/**
 * @third-party:WooCommerce — Checkout 手機版排版修正
 *
 * 修正項目（mobile only, ≤ 767px）：
 *
 * [付款方式區塊]
 * 1. #paymentWrap 是 <table> 結構，<th>付款方式</th> 與 <td>付款內容</td>
 *    在窄螢幕沒 stack → 內容直排（字字斷行）。改 display:block 讓 row 垂直堆疊。
 * 2. #payment 自帶 margin-right: -26px，把整塊往右拉出 card 外。歸零。
 * 3. .payment_box 的 padding-left: 21px 在窄螢幕過深；padding-right 又是 0，
 *    導致卡號 / 到期日 input 右側緊貼外框。左右統一收成對稱的 12px。
 * 4. .woocommerce 容器 margin（Blocksy theme 給的）+ .ct-order-review 內 padding
 *    在手機版過寬，內容區可用寬度被壓縮。縮小讓內容靠近螢幕邊。
 *
 * [Cart 商品列]
 * 5. .product-thumbnail 預設 83px，圖片佔比過大，收到 64px。
 * 6. .product-mobile-actions .quantity 容器只給 56px，Blocksy 的 - + 按鈕用
 *    absolute 疊在 input 兩端，input padding 0 26px → 中間文字可用區只剩 2px
 *    → 數字顯示不出來。容器加寬到 80px，input 寬度跟著撐滿，數字才有空間。
 * 7. .subscription-details（"/月含7天免費試用"）沒套任何 hz-typo class，
 *    跟主文一樣 16px → 跟價格搶寬度導致字字斷行。改 flex-basis 100% 換到
 *    下一行，並縮到 12px。
 */

@media (max-width: 767px) {

	/* === #paymentWrap table → block stack === */
	#paymentWrap,
	#paymentWrap > tbody,
	#paymentWrap > tbody > tr {
		display: block !important;
		width: 100% !important;
	}

	#paymentWrap > tbody > tr > th,
	#paymentWrap > tbody > tr > td {
		display: block !important;
		width: 100% !important;
		padding: 8px 0 !important;
		text-align: left !important;
	}

	/* === #payment 拿掉負 margin、撐滿 td === */
	#paymentWrap #payment {
		margin: 0 !important;
		width: 100% !important;
	}

	/* === .payment_box 左右 padding 對稱（避免卡號框貼邊） === */
	#paymentWrap .payment_box {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	/* === Checkout 外卡離螢幕邊 + 卡內 padding 縮小 === */
	.woocommerce-checkout .woocommerce {
		width: auto !important;
		max-width: none !important;
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	.woocommerce-checkout .ct-order-review {
		padding: 12px !important;
	}

	/* === Cart 商品列：圖片縮小、數量看得見、subscription 換行小字 === */

	/* 商品圖片欄位收窄 */
	.woocommerce-checkout .cart_item .product-thumbnail {
		width: 64px !important;
		padding-right: 8px !important;
	}

	.woocommerce-checkout .cart_item .product-thumbnail img {
		width: 100% !important;
		height: auto !important;
	}

	/* 數量容器加寬，數字才有空間顯示在 - + 之間 */
	.woocommerce-checkout .cart_item .product-mobile-actions .quantity {
		width: 80px !important;
		min-width: 80px !important;
		flex-shrink: 0 !important;
	}

	.woocommerce-checkout .cart_item .product-mobile-actions .quantity input.qty {
		width: 100% !important;
		text-align: center !important;
	}

	/* mobile-actions row 允許 wrap，讓 subscription-details 換到下一行 */
	.woocommerce-checkout .cart_item .product-mobile-actions {
		flex-wrap: wrap !important;
		align-items: center !important;
		column-gap: 6px !important;
		row-gap: 2px !important;
	}

	/* "/月含7天免費試用" 獨佔一行小字 */
	.woocommerce-checkout .cart_item .subscription-details {
		flex-basis: 100% !important;
		width: 100% !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
		opacity: 0.7 !important;
		margin-top: 2px !important;
	}

	/* 移除按鈕推到 row 最右邊 */
	.woocommerce-checkout .cart_item .product-mobile-actions .remove {
		margin-left: auto !important;
	}
}

/**
 * Colour overrides — 把 Blocksy / WooCommerce 預設的硬碼藍 (#2B77BF, #0866FF) 換成
 * Hauzii Design Token，所有狀態色由 design system 統一控管。
 *
 * 注意：
 * - 此區塊**不**包在 @media 內，因為桌機版同樣需要換色。
 * - 部分 selector（.woocommerce-message、.select2-results__option--highlighted 等）
 *   不限定在 .woocommerce-checkout scope 內 — 靠檔頭的 conditional enqueue
 *   （WooCommerceIntegration::enqueue_woocommerce_checkout_styles 只在 is_checkout()
 *   時載入）限制實際生效範圍。如果未來把 enqueue 條件放寬到其他 WC 頁面，要回頭
 *   檢查這些 selector 在 cart、my-account 等頁面的副作用。
 */

/* 通知訊息（"購物車已更新" 等）：米色底 + 綠色字 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--hz-color-02) !important;
	color: var(--hz-color-18) !important;
	border-color: var(--hz-color-18) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--hz-color-18) !important;
}

/* 結帳區所有 border 預設藍 → 系統綠 */
.woocommerce-checkout .ct-order-review,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout #payment ul.payment_methods > li,
.woocommerce-checkout .woocommerce-SavedPaymentMethods-tokenInput {
	border-color: var(--hz-color-18) !important;
}

/* Radio button selected dot 顏色 */
.woocommerce-checkout input[type="radio"]:checked {
	accent-color: var(--hz-color-18) !important;
}

/* Select2 dropdown 選取項（發票類型等） */
.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--hz-color-18) !important;
	color: #fff !important;
}