/**
 * @third-party:FluentForms
 *
 * Fluent Forms（+ Fluent Forms Pro）樣式覆蓋
 *
 * Loaded by: canvas/src/Services/HeaderFooter/WooCommerceIntegration.php
 *            (enqueue_fluentform_styles())
 *
 * 表單可能出現在任何頁面（報名 / 聯絡 / 問卷），因此全站載入，掛在
 * hauzii-tailwind 上。
 *
 * ── 這份是怎麼來的 ────────────────────────────────────────────────
 * 2026-09-10 先在 site2 用三張涵蓋 49 種欄位型別的表單（form 56/58/59）
 * 各寫一份 per-form CSS（存 _custom_form_css）實測驗證，再收斂成這一份。
 * 收斂的理由不是「一百張表單一百份」的維護性推論，是實測出來的：
 * **per-form CSS 每一份都要重打一次同樣的四場 cascade 仗**（見下方 ⚠️ 段）。
 *
 * ── 本檔刻意不做的事 ──────────────────────────────────────────────
 * 1. 不設 max-width / margin：版面是頁面的事，不是第三方樣式表的事。
 *    要窄一點的表單請在頁面/區塊層決定。
 * 2. 不改 TinyMCE（rich_text_input）的 toolbar / statusbar：那是接管一個
 *    第三方編輯器的內部樣式，成本與風險不成比例（站主 2026-09-10 裁決）。
 * 3. 不假設站台是深色或淺色：所有顏色走 token，勾選控制項維持原生外觀
 *    （見下方 accent-color 段），因此換 palette 不需要回頭改這裡。
 */

/* ==========================================================================
   0. 變數覆寫 —— ⚠️ 送出鈕靠這招，不是靠 specificity
   FF 自己的規則是
       form.fluent_form_{N} .ff-btn-submit:not(.ff_btn_no_style)
       { background-color: var(--fluentform-primary) }
   specificity (0,3,1)，而且選擇器帶 form id。站台級 CSS 沒有 form id 可用，
   硬拚疊不上去 —— 但那條規則讀的是變數，把變數換掉就等於換色，而且 FF 其他
   吃這個變數的地方（focus ring 等）會一起跟著走。
   ========================================================================== */
.fluentform {
	--fluentform-primary: var(--hz-button-02-bg);
}

/* ==========================================================================
   1. 欄位標籤與說明文字
   ========================================================================== */
.fluentform .ff-el-input--label label {
	color: var(--hz-color-08) !important;
	font-family: var(--hz-typo-typo-07-ff) !important;
	font-size: var(--hz-typo-typo-07-fs) !important;
	font-weight: var(--hz-typo-typo-07-fw) !important;
	letter-spacing: var(--hz-typo-typo-07-ls) !important;
}

.fluentform .ff-el-section-title {
	color: var(--hz-color-07) !important;
	font-family: var(--hz-typo-typo-04-ff) !important;
	font-size: var(--hz-typo-typo-04-fs) !important;
	font-weight: var(--hz-typo-typo-04-fw) !important;
}

.fluentform .ff-section-break-desc,
.fluentform .ff-el-help-message {
	color: var(--hz-color-10) !important;
	font-size: var(--hz-typo-typo-08-fs) !important;
}

/* ==========================================================================
   2. 欄位間距
   ========================================================================== */
.fluentform .ff-el-group {
	margin-bottom: var(--hz-gap-05) !important;
}

/* ==========================================================================
   3. 輸入框 / 下拉 / 多行文字
   ========================================================================== */
.fluentform .ff-el-form-control {
	background-color: var(--hz-color-02) !important;
	color: var(--hz-color-09) !important;
	border: 1px solid var(--hz-color-20) !important;
	border-radius: var(--hz-surface-02-radius) !important;
	padding: var(--hz-gap-03) var(--hz-gap-04) !important;
	font-family: var(--hz-typo-typo-06-ff) !important;
	font-size: var(--hz-typo-typo-06-fs) !important;
	line-height: var(--hz-typo-typo-06-lh) !important;
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--hz-color-10) !important;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--hz-color-14) !important;
	outline: 2px solid var(--hz-color-14);
	outline-offset: 2px;
}

/* 原生下拉展開後的選項清單（在 select 底下自成一層，不吃上面那條） */
.fluentform select.ff-el-form-control option {
	background-color: var(--hz-color-02) !important;
	color: var(--hz-color-09) !important;
}

/**
 * ⚠️ cascade 仗 #1 —— 選色器（color_picker）
 * 它的 input 是 readonly，會被 FF 自家的
 *     .fluentform .ff-el-form-control[readonly]   (0,3,0)
 * 當成「停用欄位」塗成灰底。上面那條 .fluentform .ff-el-form-control 是
 * (0,2,0)，打不贏，必須自己也帶 [readonly]。
 */
.fluentform .ff-el-form-control[readonly] {
	background-color: var(--hz-color-02) !important;
	color: var(--hz-color-09) !important;
	border-color: var(--hz-color-20) !important;
}

/* 連動選單（chained_select）—— 三顆 select 各自渲染，共用同一個 class */
.fluentform select.el-chained-select {
	background-color: var(--hz-color-02) !important;
	color: var(--hz-color-09) !important;
	border-color: var(--hz-color-20) !important;
}

/* ==========================================================================
   4. ⭐ 單選鈕 / 核取方塊 —— 可用性，不是好看
   ========================================================================== */

/**
 * FF 用的是**原生** input（實測 appearance:auto、13×13、opacity:1），
 * 不是 LRM 那種「隱藏 input + 自繪 indicator」的寫法 —— 所以覆蓋直接打在
 * input 本身，這裡不需要（也不該）去找 sibling indicator。
 *
 * 兩個問題要一起解，只解一個沒用：
 *  a) 13px 太小，在深色底上看不出勾沒勾（可用性問題，不是美觀問題）
 *  b) 勾選態用瀏覽器預設藍，跟站台的強調色無關
 *
 * ⚠️ 刻意**維持原生外觀**（不寫 appearance:none）：
 * 一旦 appearance:none 就得自己畫勾勾與圓點，而 input 上的 ::after 在
 * Firefox 不可靠、內嵌 SVG 又會夾帶硬編色。維持原生 + accent-color 是
 * 這裡的取捨，而且它在淺色站台一樣成立（本檔不假設深色）。
 *
 * ⚠️ 這與 woocommerce.css 的做法不同，不要互抄：那份的 Blocksy 版
 * checkbox 是 appearance:none，accent-color 在那裡是死碼、只能改
 * border/background；這裡剛好相反。判準是先量 computed 的 appearance。
 *
 * 尺寸 1rem 是控制項本身的視覺尺寸（互動元素命中區），不屬於元素間距，
 * 因此不走 gap token。
 */
.fluentform .ff-el-form-check-input {
	accent-color: var(--hz-color-14) !important;
	width: 1rem !important;
	height: 1rem !important;
	vertical-align: middle;
}

.fluentform .ff-el-form-check-label,
.fluentform .ff-el-tc label {
	color: var(--hz-color-09) !important;
	font-family: var(--hz-typo-typo-06-ff) !important;
	font-size: var(--hz-typo-typo-07-fs) !important;
}

/* 條款 / 隱私權連結 —— 不跟主題的通用連結色（在深底上會泛紅） */
.fluentform .ff-el-tc a {
	color: var(--hz-color-14) !important;
}

/* ==========================================================================
   5. ⚠️ cascade 仗 #2 —— Choices.js（複選欄位 multi_select）
   multi_select 前台不是 <select>，是 Choices.js 畫出來的一組 div。
   打 .ff-el-form-control 完全碰不到它 —— 症狀是深色表單中間留一個白盒子。
   FF 的規則是 .frm-fluent-form .choices__inner (0,2,0)，同分靠載入順序決勝，
   所以這裡用 !important 明確拿下，不去賭順序。
   ========================================================================== */
.fluentform .choices__inner,
.fluentform .choices__list--dropdown,
.fluentform .choices__list--dropdown .choices__item {
	background-color: var(--hz-color-02) !important;
	color: var(--hz-color-09) !important;
	border-color: var(--hz-color-20) !important;
}

.fluentform .choices__inner {
	border: 1px solid var(--hz-color-20) !important;
	border-radius: var(--hz-surface-02-radius) !important;
}

/* 游標所在的選項 —— color.03 Light Brand Tint 就是為「淺品牌色底」設的 slot，
   不要拿 color.20 Default Border 當底色用（那是框線 slot，換 palette 會歪） */
.fluentform .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: var(--hz-color-03) !important;
}

/* ==========================================================================
   6. ⚠️ cascade 仗 #3 —— 表格型欄位
   NPS（net_promoter_score）與可勾選格線（tabular_grid）都渲染成 table，
   FF 的規則是 .ff_net_table tbody tr td (0,1,3) —— 元素選擇器堆出來的分數
   比一般 wrapper 選擇器高，一般寫法會只吃到文字色、底色留白 → 亮底亮字，
   反而比不改更難讀。
   ========================================================================== */
.fluentform .ff_net_table tbody tr td,
.fluentform .ff_net_table tbody tr th,
.fluentform table.ff-checkable-grids tbody tr td,
.fluentform table.ff-checkable-grids thead tr th,
.fluentform table.ff-checkable-grids tbody tr td.ff_grid_header,
.fluentform table.ff_repeater_table tbody tr td {
	background-color: var(--hz-color-02) !important;
	color: var(--hz-color-09) !important;
	/* 表格格線走 color.21 Light Border（文件明文「分隔線、表格格線」），
	   不是 card/input 用的 color.20 Default Border */
	border-color: var(--hz-color-21) !important;
}

/* ==========================================================================
   6b. 區段分隔線與收合區塊（accordion）
   section_break 的 <hr> 底色與 accordion 的 header/content 都是 FF 自帶的
   淺色卡片，在深色站台上會浮出兩塊白。
   ⚠️ 這裡只碰**容器**的底色 / 文字色 / 框線 —— 收合行為與 toggle 圖示維持
   FF 自己的實作，不接管。
   ========================================================================== */
.fluentform hr {
	background-color: var(--hz-color-21) !important;
	border-color: var(--hz-color-21) !important;
}

.fluentform .ff-accordion-header,
.fluentform .ff-accordion-content {
	background-color: var(--hz-color-02) !important;
	color: var(--hz-color-09) !important;
	border-color: var(--hz-color-20) !important;
}

.fluentform .ff-accordion-title {
	color: var(--hz-color-07) !important;
	font-family: var(--hz-typo-typo-05-ff) !important;
	font-size: var(--hz-typo-typo-05-fs) !important;
}

.fluentform .ff-accordion-description {
	color: var(--hz-color-10) !important;
}

/* ==========================================================================
   7. 滑桿（rangeslider）
   ========================================================================== */
/* 軌道是細長條，與 <hr> 同性質 → color.21 Light Border；
   把手是可拖曳的互動元素 → Primary Accent */
.fluentform .rangeslider,
.fluentform .rangeslider__fill {
	background-color: var(--hz-color-21) !important;
}

.fluentform .rangeslider__handle {
	background-color: var(--hz-color-14) !important;
	border-color: var(--hz-color-20) !important;
}

/* ==========================================================================
   8. 多步驟表單的進度條
   ========================================================================== */
.fluentform .ff-el-progress {
	background-color: var(--hz-color-20) !important;
}

.fluentform .ff-el-progress-bar {
	background-color: var(--hz-color-14) !important;
}

/* ==========================================================================
   9. ⚠️ cascade 仗 #4 —— 按鈕
   上面第 0 段的 --fluentform-primary 只換得掉底色；圓角 / 內距 / 字型還是
   輸給主題的 [type="submit"] 規則，所以這裡再明確蓋一次。
   next / prev / save-progress 不帶 .ff_btn_style，選擇器不能只寫
   .ff-btn-submit.ff_btn_style（第一輪就是這樣讓「下一步」留在預設灰）。
   ========================================================================== */
.fluentform .ff-btn.ff-btn-submit,
.fluentform .ff-btn.ff-btn-next,
.fluentform .ff-btn.ff-btn-prev,
.fluentform .ff-btn.ff-btn-save-progress {
	background-color: var(--hz-button-02-bg) !important;
	color: var(--hz-button-02-text) !important;
	border: none !important;
	border-radius: var(--hz-button-02-radius) !important;
	padding: var(--hz-button-02-padding-y) var(--hz-button-02-padding-x) !important;
	font-family: var(--hz-typo-typo-07-ff) !important;
	font-weight: var(--hz-typo-typo-07-fw) !important;
	font-size: var(--hz-typo-typo-07-fs) !important;
}

.fluentform .ff-btn.ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-next:hover,
.fluentform .ff-btn.ff-btn-prev:hover,
.fluentform .ff-btn.ff-btn-save-progress:hover {
	background-color: var(--hz-button-02-hover-bg) !important;
	color: var(--hz-button-02-hover-text) !important;
	opacity: 1 !important;
}

/* ==========================================================================
   10. 錯誤狀態
   ========================================================================== */
.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--hz-color-17) !important;
}

.fluentform .error.text-danger {
	color: var(--hz-color-17) !important;
	font-size: var(--hz-typo-typo-08-fs) !important;
}