/**
 * @third-party:WooCommerce
 *
 * 購物車頁的報名資料提示與按鈕
 *
 * Loaded by: canvas/src/Services/HeaderFooter/WooCommerceIntegration.php
 *            (enqueue_woocommerce_cart_styles())
 *
 * ⚠️ **條件載入**,照既有 pattern:woocommerce.css 只在 is_checkout()、
 * woocommerce-account.css 只在 is_account_page()。⛔ 不要把這幾條加進 woocommerce.css
 * —— 那份是結帳頁專用,加進去等於讓它在購物車頁也載入,改掉既有行為。
 *
 * ⚠️ 載入條件是 **is_cart() 或 is_checkout() 或「報名資料頁」**,三者缺一不可:
 * - `woocommerce_get_item_data` 在**結帳頁的訂單明細也會渲染**,同樣的按鈕會出現在那
 *   (2026-09-10 走真實流程才發現;而且本站對登入者會把 /cart/ 導去 /checkout/)
 * - `.hz-signup-notice` 是報名資料頁的元素(hz_line 查不到時的提示)
 *
 * 這裡的元素由 nexus 的 SignupCartDataService 透過 woocommerce_get_item_data 的
 * `display` 欄位輸出(該欄位會過 wp_kses_post,所以 <a> 過得去)。
 *
 * ⛔ 顏色 / 字級 / 間距一律走 design token。
 */

/* 未填提示 —— 用 Warning Status,不是隨便挑一個「看起來醒目」的顏色 */
:root body .hz-signup-pending {
	color: var(--hz-color-19);
	font-family: var(--hz-typo-typo-07-ff);
	font-size: var(--hz-typo-typo-07-fs);
	font-weight: var(--hz-typo-typo-07-fw);
}

/* 【填寫報名資料】/【重新填寫】按鈕 */
:root body .hz-signup-action {
	display: inline-block;
	margin-inline-start: var(--hz-gap-03);
	padding: var(--hz-button-02-padding-y) var(--hz-button-02-padding-x);
	border-radius: var(--hz-button-02-radius);
	background-color: var(--hz-button-02-bg);
	color: var(--hz-button-02-text);
	font-family: var(--hz-typo-typo-07-ff);
	font-size: var(--hz-typo-typo-07-fs);
	font-weight: var(--hz-typo-typo-07-fw);
	text-decoration: none;
}

:root body .hz-signup-action:hover,
:root body .hz-signup-action:focus {
	background-color: var(--hz-button-02-hover-bg);
	color: var(--hz-button-02-hover-text);
	text-decoration: none;
}

/**
 * ⚠️ WooCommerce 的 cart-item-data.php 會對 display 值跑 wpautop() → 內容被包一層 <p>,
 * 在 <dd> 裡會多出上下邊距。這裡收掉,讓提示與按鈕貼齊那一行。
 */
:root body .woocommerce .variation dd p {
	margin-block: 0;
}

/* 報名資料頁:查不到 hz_line 時的提示（SignupPageService::notice）*/
:root body .hz-signup-notice {
	padding: var(--hz-gap-04);
	border: 1px solid var(--hz-color-20);
	border-radius: var(--hz-surface-02-radius);
	background-color: var(--hz-color-02);
	color: var(--hz-color-09);
	font-family: var(--hz-typo-typo-06-ff);
	font-size: var(--hz-typo-typo-06-fs);
	line-height: var(--hz-typo-typo-06-lh);
}

/**
 * 購物車頁「就地填寫」的面板（SignupCartInlineFormService）。
 *
 * ⚠️ 面板輸出在 <td class="product-name"> 裡（那是 cart.php 模板中唯一位於「那一列」
 * 內的 hook）。收合時 [hidden] 讓它 display:none、完全不影響表格寬度;展開時才用
 * min-width 把那一欄撐開，否則表單被擠在窄欄位裡沒法填。
 *
 * ⛔ 顏色 / 字級 / 間距一律走 design token。
 */
/**
 * 頁尾暫存區 —— 購物車表格那幾張表單「生」在這裡，由 JS 搬進列裡的佔位。
 *
 * ⚠️ 為什麼表單不能直接生在那一列裡:cart.php 的表格整張包在
 * `<form class="woocommerce-cart-form">` 內，而 **HTML 不允許 form 巢狀** ——
 * 瀏覽器解析時會把我們內層的 `<form>` 丟掉（見
 * `SignupCartInlineFormService::render_cart_row_placeholder()`）。
 *
 * ⚠️ `hidden` 屬性本身就是 `display:none`，這條只是**保險** —— 主題若寫了
 * `div { display: block }` 之類會蓋掉它，那時頁尾會突然多出一堆表單。
 */
:root body .hz-signup-stash[hidden] {
	display: none;
}

:root body .hz-signup-inline {
	margin-block-start: var(--hz-gap-04);
	padding: var(--hz-gap-04);
	border: 1px solid var(--hz-color-20);
	border-radius: var(--hz-surface-02-radius);
	background-color: var(--hz-color-02);
}

/**
 * ⚠️ 這裡**刻意不寫 min-width**。
 *
 * 原本寫 `min-width: min(30rem, 100%)` —— 那條**形同虛設**:`100%` 是相對父容器寬度，
 * `min()` 永遠取到父容器那個值,等於沒有下限。2026-09-11 實測面板 308px、規則有套用
 * 但一點作用都沒有。
 *
 * ⛔ 也不要改成固定 `min-width: 30rem` 去撐 —— 外層 `.woocommerce` 有
 * `max-width: 700px`(Blocksy),表格被鎖死在 700,撐開 td 只會擠壓其他欄位、
 * 甚至跑出橫向捲軸。**寬度由版面決定,表單自己會堆疊**(FluentForm 本來就是響應式的)。
 */
:root body .hz-signup-inline__inner {
	min-width: 0;
}

/* 表單本身的上下留白交給面板的 padding，⛔ 不讓 FluentForm 自己的 margin 疊上來 */
:root body .hz-signup-inline .fluentform {
	margin-block: 0;
}

/**
 * mini cart（側邊購物車）—— 站主 2026-09-11:報名資料要排在商品**下面**不是右邊。
 *
 * ⚠️⚠️ **換行靠的是 `width: 100%`，不是 `display: block`** ——
 * `.woocommerce-mini-cart-item` 是 flex 容器，子元素的 display 對「排不排得下同一行」
 * 毫無影響（第一版就是這樣寫的，實測完全沒作用）。真正的規則在
 * `WooCommerceIntegration::enqueue_mini_cart_styles()`（用 `:has()` 認出含報名資料的
 * 那個 `<dl>`），跟 `.quantity` 同一個 pattern。
 *
 * ⚠️ 只改**報名資料**那一組 —— `<dl class="variation">` 也用來顯示變體屬性
 * （「梯次: 第一梯」），那種並排是合理的，⛔ 不可一起改掉。
 */
/* mini cart 很窄,面板的內距收一級 */
:root body .woocommerce-mini-cart-item .hz-signup-inline {
	padding: var(--hz-gap-03);
}

/**
 * 商品頁:加入購物車按鈕下方的「先填寫報名資料」。
 *
 * ⚠️ 這裡的觸發是 `<button>` 不是連結 —— 商品頁沒有「退而求其次跳去哪一頁」可言
 * （報名資料頁需要 hz_line 才知道要填哪一行，而商品頁還沒有那一行）。
 */
:root body .hz-signup-product {
	margin-block-start: var(--hz-gap-04);
}

:root body .hz-signup-toggle {
	display: inline-block;
	padding: var(--hz-button-02-padding-y) var(--hz-button-02-padding-x);
	border: 0;
	border-radius: var(--hz-button-02-radius);
	background-color: var(--hz-button-02-bg);
	color: var(--hz-button-02-text);
	font-family: var(--hz-typo-typo-07-ff);
	font-size: var(--hz-typo-typo-07-fs);
	font-weight: var(--hz-typo-typo-07-fw);
	cursor: pointer;
}

:root body .hz-signup-toggle:hover,
:root body .hz-signup-toggle:focus {
	background-color: var(--hz-button-02-hover-bg);
	color: var(--hz-button-02-hover-text);
}