/**
 * sc-icg-np-cart 前台樣式。
 *
 * 硬性紀律：
 *   1. 每一條選擇器都必須以 `.scnp-` 開頭（建置期 tools/check-css-scope.sh 強制）。
 *      不覆寫 Blocksy 或 WooCommerce 的任何全域選擇器。
 *   2. 步驟離場一律用 flexbox `order` ＋ `visibility: hidden` ＋ `position: absolute`，
 *      絕對不用 `display: none`。P0-A 實測證實這樣第三方 iframe 尺寸全程不變；
 *      用 display:none 會讓金流 SDK 與 Turnstile 算不出尺寸，甚至根本不 render。
 *   3. 不使用 `!important`，不使用 `:root`。色票變數宣告在 `.scnp-page` 上，
 *      特異度 (0,1,0)，所以站台端很容易蓋過去（見下方 token 區的說明）。
 *   4. 行動優先。375px 寬度下不得出現橫向捲動。
 *   5. 深色模式不做，前台跟隨主題。
 *
 * @package sc-icg-np-cart
 * @since   1.0.0
 */

/* =========================================================================
 * 1. 設計 token
 *
 * ★ 這裡就是色票的唯一來源，不是 fallback。
 *
 * 這一段註解到 1.16.5 為止寫的是「實際值由 PHP 依 Settings::get('style.*') 印成
 * `.scnp-page { --scnp-primary: ...; }` 的 inline style，會蓋過這一段」。
 * **那段 PHP 從來沒有存在過**，而 `style.primary_color` 那四個設定鍵也是死的
 * （有預設值、沒有讀取端、後台沒有欄位），已於 1.16.6 移除。
 *
 * ★ 要換品牌色，依推薦順序：
 *
 *   1. **「外觀 → 自訂 → 額外 CSS」**（第一推薦）。它掛在 wp_head p101，
 *      印在所有外掛樣式表之後，一定贏；存在 custom_css post 裡，
 *      **不受外掛更新影響**；站長本來就在用這個介面。
 *   2. `style.custom_css` 設定（讀取端在 Checkout_Bridge 與 Thankyou，
 *      走 wp_add_inline_style 掛同一個 handle，印在 <link> 之後）。
 *      ★ 後台目前沒有這一格的欄位，只能用 WP-CLI 或 scnp_settings_group filter。
 *
 *   兩種都是寫 `.scnp-page { --scnp-primary: #xxx; ... }`。
 *
 * ★ **不要直接改這個檔案。** 部署是 `rsync --delete`，
 *   下一次部署會把改過的顏色靜默回寫成預設紅色，沒有提示也沒有備份。
 *
 * ★ 只蓋主色會變成半調子：`--scnp-primary` 之外還有 `-dark`（按鈕 hover）、
 *   `-soft`（選中的金額卡片底色）、`-ring`（focus 外框）；
 *   `--scnp-accent` 另有 `-soft`；圓角是 `--scnp-radius` 加 `-sm`、`-lg`
 *   （`-sm` 的用量比主 token 還多）；內文色是 `--scnp-text`。
 *
 * ★ **淺色品牌要多改一件事**：本檔數處把 `background: var(--scnp-primary)`
 *   與硬編碼的 `color: #ffffff` 配成一對，沒有 `--scnp-on-primary` 這種前景 token。
 *   品牌色若是黃、淺綠、淺藍，主按鈕會變成白字配淺底，
 *   必須連那幾處的前景色一起覆寫（搜 `#ffffff` 找得到）。
 * ====================================================================== */

.scnp-page {
	--scnp-primary: #c8102e;
	--scnp-primary-dark: #a20d25;
	--scnp-primary-soft: rgba(200, 16, 46, 0.08);
	--scnp-primary-ring: rgba(200, 16, 46, 0.28);
	--scnp-accent: #f0b323;
	--scnp-accent-soft: rgba(240, 179, 35, 0.14);

	--scnp-text: #1f2328;
	--scnp-text-muted: #5b636d;
	--scnp-text-faint: #868e98;
	--scnp-bg: #ffffff;
	--scnp-bg-soft: #f6f7f9;
	--scnp-border: #dfe3e8;
	--scnp-border-strong: #c3cad2;

	--scnp-danger: #b3261e;
	--scnp-danger-soft: rgba(179, 38, 30, 0.08);
	--scnp-success: #1a7f4b;
	--scnp-warning: #8a6100;

	--scnp-radius: 12px;
	--scnp-radius-sm: 8px;
	--scnp-radius-lg: 18px;

	--scnp-gap: 16px;
	--scnp-gap-lg: 28px;
	--scnp-max-width: 720px;

	/*
	 * 兩欄版面的外框寬度（第 19 節）。
	 * 單欄時仍然用 --scnp-max-width，行寬不會因為版面改版而變難讀。
	 *
	 * ★ 1.10.2 起直接讀主題的內容寬度，捐款頁才會跟站上其他頁面對齊。
	 *   Blocksy 在 `:root` 上宣告 `--theme-normal-container-max-width`
	 *   （jbak 站實測 1290px），它的 `.ct-container` 吃的就是這一個。
	 *   站長日後在主題後台改內容寬度，捐款頁會自動跟上，不必回頭改這支 CSS。
	 *   這與同一支檔案裡 `--theme-content-vertical-spacing` 的做法一致。
	 *   fallback 給 1290px，換掉主題時仍然有合理的寬度。
	 */
	--scnp-max-width-wide: var( --theme-normal-container-max-width, 1290px );

	/*
	 * `.scnp-main` 左右的留白。
	 *
	 * ★ 這個值同時被 `.scnp-main` 的 padding 與第 19 節寬螢幕的 max-width 計算用到，
	 *   所以寫成變數，兩處不會漂移。改這一個值就好。
	 */
	--scnp-page-gutter: 16px;
	--scnp-col-gap: 40px;
	--scnp-sticky-top: 24px;

	--scnp-font-size: 16px;
	--scnp-line-height: 1.7;
	--scnp-touch: 48px;

	--scnp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--scnp-shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
	--scnp-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

	box-sizing: border-box;
	color: var(--scnp-text);
	font-size: var(--scnp-font-size);
	line-height: var(--scnp-line-height);
	max-width: 100%;
	overflow-x: clip;
}

/* NPO 站高齡捐款人比例高，style.font_scale = large 時整體放大一級。 */
.scnp-page[data-font-scale="large"] {
	--scnp-font-size: 18px;
	--scnp-line-height: 1.8;
	--scnp-touch: 52px;
}

/* box-sizing 只作用在自家元素上，絕不外溢到金流 SDK 的內部節點。 */
.scnp-page [class^="scnp-"],
.scnp-page [class*=" scnp-"],
.scnp-page [class^="scnp-"]::before,
.scnp-page [class^="scnp-"]::after {
	box-sizing: border-box;
}

.scnp-sr-only,
.scnp-live {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* 蜜罐。對人不可見、對輔助科技也不可見，但仍在 DOM 裡等機器人上鉤。 */
.scnp-honeypot {
	height: 0;
	left: -9999px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: -9999px;
	width: 0;
}

.scnp-wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--scnp-max-width);
	padding-left: 16px;
	padding-right: 16px;
	width: 100%;
}

/* =========================================================================
 * 2. Hero
 * ====================================================================== */

.scnp-hero {
	margin-bottom: var(--scnp-gap-lg);
	position: relative;
	width: 100%;
}

.scnp-hero-media {
	background-color: var(--scnp-bg-soft);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	position: absolute;
}

.scnp-hero-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.72) 100%);
	inset: 0;
	opacity: 0.45;
	position: absolute;
}

.scnp-hero-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--scnp-max-width);
	padding: 40px 16px;
	position: relative;
	width: 100%;
}

.scnp-hero-eyebrow {
	font-size: 0.85em;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.scnp-hero-title {
	font-size: 1.65em;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 10px;
}

.scnp-hero-summary {
	font-size: 0.98em;
	margin: 0;
	opacity: 0.92;
}

/* image_bg: 圖當背景，文字壓在遮罩上。 */
.scnp-hero--image-bg {
	color: #ffffff;
	min-height: 220px;
}

.scnp-hero--image-bg .scnp-hero-inner {
	min-height: 220px;
	padding-bottom: 32px;
	padding-top: 72px;
}

/* side_by_side: 小螢幕先圖後文，大螢幕左右並排。 */
.scnp-hero--side-by-side .scnp-hero-media {
	aspect-ratio: 16 / 9;
	border-radius: var(--scnp-radius);
	position: relative;
	width: 100%;
}

.scnp-hero--side-by-side .scnp-hero-overlay {
	display: none;
}

.scnp-hero--side-by-side .scnp-hero-inner {
	padding-top: 20px;
}

/* minimal: 純文字，不出圖。 */
.scnp-hero--minimal .scnp-hero-media,
.scnp-hero--minimal .scnp-hero-overlay {
	display: none;
}

.scnp-hero--minimal .scnp-hero-inner {
	padding-bottom: 8px;
	padding-top: 24px;
}

/* =========================================================================
 * 3. 募款進度
 * ====================================================================== */

.scnp-progress {
	background: var(--scnp-bg);
	border: 1px solid var(--scnp-border);
	border-radius: var(--scnp-radius);
	box-shadow: var(--scnp-shadow-sm);
	margin-bottom: var(--scnp-gap-lg);
	padding: 18px 16px;
}

.scnp-progress-stats {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 14px;
}

.scnp-progress-stat {
	min-width: 0;
}

.scnp-progress-label {
	color: var(--scnp-text-muted);
	display: block;
	font-size: 0.82em;
	margin-bottom: 2px;
}

.scnp-progress-num {
	display: block;
	font-size: 1.3em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.scnp-progress-num[data-key="raised"] {
	color: var(--scnp-primary);
}

/*
 * ★ 這一條務必保持「後代選擇器」的寫法，不可以寫成裸的 `.scnp-progress-bar`。
 *
 * page.php 會把 `scnp-progress-<style>` 印在最外層容器上，progress_style
 * 預設值就是 `bar`，所以最外層 div 身上真的有 `scnp-progress-bar` 這個 class。
 * 一旦寫成裸選擇器，整頁容器會被壓成 12px 高再加 overflow:hidden，
 * 畫面等同全白，而且不會有任何錯誤訊息。同理見下方的 .scnp-progress-ring。
 */
.scnp-progress .scnp-progress-bar {
	background: var(--scnp-bg-soft);
	border-radius: 999px;
	height: 12px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.scnp-progress .scnp-progress-bar-fill {
	background: linear-gradient(90deg, var(--scnp-primary) 0%, var(--scnp-accent) 140%);
	border-radius: 999px;
	height: 100%;
	transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
	width: 0;
}

.scnp-progress-foot {
	align-items: baseline;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin-top: 8px;
}

.scnp-progress-percent {
	color: var(--scnp-primary);
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.scnp-progress-note {
	color: var(--scnp-text-faint);
	font-size: 0.82em;
	margin: 0;
}

/* 環形。 */
.scnp-progress--ring .scnp-progress-bar {
	display: none;
}

/* 同上，progress_style = ring 時最外層容器身上也會有 `scnp-progress-ring`。 */
.scnp-progress .scnp-progress-ring {
	display: block;
	height: 132px;
	margin: 0 auto 10px;
	transform: rotate(-90deg);
	width: 132px;
}

.scnp-progress-ring-track {
	fill: none;
	stroke: var(--scnp-bg-soft);
	stroke-width: 12;
}

.scnp-progress-ring-fill {
	fill: none;
	stroke: var(--scnp-primary);
	stroke-linecap: round;
	stroke-width: 12;
	transition: stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 純文字。 */
.scnp-progress--text-only .scnp-progress-bar,
.scnp-progress--text-only .scnp-progress-ring {
	display: none;
}

/* 沒有目標金額時不出現進度條，只留「感謝每一份心意」。 */
.scnp-progress--no-goal .scnp-progress-bar,
.scnp-progress--no-goal .scnp-progress-ring,
.scnp-progress--no-goal .scnp-progress-percent,
.scnp-progress--no-goal .scnp-progress-stat[data-key="goal"] {
	display: none;
}

/* bootstrap 還沒回來或失敗時的低調佔位，不擋捐款流程。 */
.scnp-progress.is-loading .scnp-progress-num,
.scnp-progress.is-unavailable .scnp-progress-num {
	color: var(--scnp-text-faint);
}

/* =========================================================================
 * 4. 勸募資訊
 * ====================================================================== */

.scnp-campaign {
	background: var(--scnp-bg-soft);
	border-radius: var(--scnp-radius);
	margin-bottom: var(--scnp-gap-lg);
	padding: 16px;
}

.scnp-campaign-title {
	font-size: 0.95em;
	font-weight: 700;
	margin: 0 0 10px;
}

.scnp-campaign-list {
	display: grid;
	gap: 8px;
	margin: 0;
}

.scnp-campaign-row {
	display: grid;
	gap: 2px;
	grid-template-columns: 1fr;
}

.scnp-campaign-key {
	color: var(--scnp-text-muted);
	font-size: 0.82em;
}

.scnp-campaign-value {
	font-size: 0.92em;
	overflow-wrap: anywhere;
}

/* =========================================================================
 * 5. 表單外殼
 * ====================================================================== */

.scnp-form {
	margin: 0 auto;
	max-width: var(--scnp-max-width);
	position: relative;
	width: 100%;
}

/* 吸收 implicit submission 用的按鈕。必須留在 DOM 裡但完全不可見、不可聚焦。 */
.scnp-sink {
	border: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	position: absolute;
	width: 0;
}

/* =========================================================================
 * 6. 步驟指示器
 * ====================================================================== */

.scnp-stepper {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 var(--scnp-gap-lg);
	padding: 0;
}

.scnp-stepper-item {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	color: var(--scnp-text-faint);
	cursor: pointer;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	font: inherit;
	gap: 4px;
	min-width: 0;
	padding: 6px 2px 0;
	position: relative;
	text-align: center;
}

.scnp-stepper-item::before {
	background: var(--scnp-border);
	border-radius: 999px;
	content: "";
	display: block;
	height: 4px;
	margin-bottom: 4px;
	transition: background-color 220ms ease;
	width: 100%;
}

.scnp-stepper-item.is-done::before {
	background: var(--scnp-primary-ring);
}

.scnp-stepper-item.is-active::before {
	background: var(--scnp-primary);
}

.scnp-stepper-index {
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.scnp-stepper-label {
	font-size: 0.78em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.scnp-stepper-item.is-active {
	color: var(--scnp-primary);
}

.scnp-stepper-item.is-done {
	color: var(--scnp-text-muted);
}

.scnp-stepper-item:focus-visible {
	border-radius: var(--scnp-radius-sm);
	outline: 2px solid var(--scnp-primary);
	outline-offset: 2px;
}

/* =========================================================================
 * 7. 步驟容器
 *
 * ★★★ 這一段是全檔最重要的部分。 ★★★
 *
 * 離場步驟用 `position: absolute` 抽離文件流、`visibility: hidden` 隱形，
 * 但元素仍然有版面尺寸，所以裡面的第三方 iframe（金流 SDK、Turnstile）
 * 量得到寬高、不會被歸零。切換靠 flexbox `order` 決定誰排在最上面。
 *
 * 絕對不能改成 `display: none`，也絕對不能重繪 innerHTML。
 * ====================================================================== */

.scnp-steps {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
}

.scnp-step {
	min-width: 0;
	order: 2;
	width: 100%;
}

/* --- wizard: 一次只顯示一步 --- */

.scnp-steps[data-layout="wizard"] .scnp-step {
	left: 0;
	order: 3;
	pointer-events: none;
	position: absolute;
	top: 0;
	visibility: hidden;
	width: 100%;
}

.scnp-steps[data-layout="wizard"] .scnp-step.is-active {
	left: auto;
	order: 1;
	pointer-events: auto;
	position: relative;
	top: auto;
	visibility: visible;
}

/* --- flow: 四段同頁順序捲動（預設）。
       Turnstile 與金流 SDK 一開始就可見，手冊坑五的問題根本不會發生。 --- */

.scnp-steps[data-layout="flow"] {
	gap: var(--scnp-gap-lg);
}

.scnp-steps[data-layout="flow"] .scnp-step {
	position: relative;
	visibility: visible;
}

.scnp-steps[data-layout="flow"] .scnp-step[data-step="1"] {
	order: 1;
}

.scnp-steps[data-layout="flow"] .scnp-step[data-step="2"] {
	order: 2;
}

.scnp-steps[data-layout="flow"] .scnp-step[data-step="3"] {
	order: 3;
}

.scnp-steps[data-layout="flow"] .scnp-step[data-step="4"] {
	order: 4;
}

.scnp-step-head {
	margin-bottom: var(--scnp-gap);
}

.scnp-step-title {
	align-items: baseline;
	display: flex;
	font-size: 1.2em;
	font-weight: 700;
	gap: 8px;
	line-height: 1.4;
	margin: 0 0 4px;
}

.scnp-step-num {
	background: var(--scnp-primary);
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.78em;
	height: 1.9em;
	align-items: center;
	justify-content: center;
	width: 1.9em;
}

.scnp-step-desc {
	color: var(--scnp-text-muted);
	font-size: 0.9em;
	margin: 0;
}

.scnp-step-body {
	background: var(--scnp-bg);
	border: 1px solid var(--scnp-border);
	border-radius: var(--scnp-radius);
	padding: 18px 16px;
}

/* =========================================================================
 * 8. 欄位
 * ====================================================================== */

.scnp-field {
	margin-bottom: var(--scnp-gap);
	min-width: 0;
}

.scnp-field:last-child {
	margin-bottom: 0;
}

.scnp-field-label {
	display: block;
	font-size: 0.9em;
	font-weight: 600;
	margin-bottom: 6px;
}

.scnp-field-required {
	color: var(--scnp-danger);
	margin-left: 2px;
}

.scnp-field-control {
	position: relative;
}

.scnp-input,
.scnp-select,
.scnp-textarea {
	background: var(--scnp-bg);
	border: 1px solid var(--scnp-border-strong);
	border-radius: var(--scnp-radius-sm);
	color: var(--scnp-text);
	display: block;
	font: inherit;
	line-height: 1.4;
	min-height: var(--scnp-touch);
	padding: 12px 14px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
	width: 100%;
}

.scnp-textarea {
	min-height: 96px;
	resize: vertical;
}

.scnp-input:focus,
.scnp-select:focus,
.scnp-textarea:focus {
	border-color: var(--scnp-primary);
	box-shadow: 0 0 0 3px var(--scnp-primary-ring);
	outline: none;
}

.scnp-field.is-invalid .scnp-input,
.scnp-field.is-invalid .scnp-select,
.scnp-field.is-invalid .scnp-textarea {
	background: var(--scnp-danger-soft);
	border-color: var(--scnp-danger);
}

.scnp-field-help {
	color: var(--scnp-text-muted);
	font-size: 0.82em;
	margin: 6px 0 0;
}

/* 錯誤紅字。一律就地顯示在欄位下方，不用頁首 notice。 */
.scnp-field-error {
	color: var(--scnp-danger);
	display: none;
	font-size: 0.85em;
	line-height: 1.5;
	margin: 6px 0 0;
}

.scnp-field-error.is-visible {
	display: block;
}

/* 軟提醒（例如 Email 網域疑似打錯）：提示但不阻擋送出。 */
.scnp-field-error.is-hint {
	color: var(--scnp-warning);
}

.scnp-field.is-hinted .scnp-input {
	border-color: var(--scnp-warning);
}

/* 兩欄並排（姓、名）。 */
.scnp-field-row {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scnp-field-row .scnp-field {
	margin-bottom: var(--scnp-gap);
}

/* 勾選 ／ 單選。 */
.scnp-check {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 10px;
	line-height: 1.55;
	min-height: var(--scnp-touch);
	padding: 8px 0;
}

.scnp-check input {
	flex: 0 0 auto;
	height: 20px;
	margin: 3px 0 0;
	width: 20px;
}

.scnp-check-text {
	font-size: 0.92em;
	min-width: 0;
}

.scnp-radio-group {
	display: grid;
	gap: 8px;
}

.scnp-radio {
	align-items: center;
	border: 1px solid var(--scnp-border);
	border-radius: var(--scnp-radius-sm);
	cursor: pointer;
	display: flex;
	gap: 10px;
	min-height: var(--scnp-touch);
	padding: 10px 14px;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.scnp-radio:hover {
	border-color: var(--scnp-border-strong);
}

.scnp-radio.is-selected {
	background: var(--scnp-primary-soft);
	border-color: var(--scnp-primary);
}

/* 密碼欄的顯示 ／ 隱藏切換。核心的 form field 只吐裸 input，切換鈕要自己做。 */
.scnp-field-control .scnp-password-toggle {
	appearance: none;
	background: none;
	border: 0;
	color: var(--scnp-text-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.82em;
	padding: 8px 12px;
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
}

.scnp-field-control .scnp-password-toggle:hover {
	color: var(--scnp-primary);
}

.scnp-field-control .scnp-password-toggle:focus-visible {
	border-radius: var(--scnp-radius-sm);
	outline: 2px solid var(--scnp-primary);
	outline-offset: 1px;
}

.scnp-password-hint {
	color: var(--scnp-text-muted);
	font-size: 0.82em;
	margin: 6px 0 0;
}

/* =========================================================================
 * 9. 金額
 * ====================================================================== */

/*
 * `.scnp-amounts` 在 BASE 裡是包住 legend、按鈕格與自訂金額的 <fieldset>，
 * 不是按鈕格本身。按鈕格是底下的 `.scnp-amount-grid`。
 * fieldset 的預設邊框與內距一律歸零，交給 .scnp-step-body 提供留白。
 */
.scnp-amounts {
	border: 0;
	margin: 0 0 14px;
	min-width: 0;
	padding: 0;
	transition: opacity 160ms ease;
}

.scnp-amounts.is-busy {
	opacity: 0.6;
}

/* fieldset 的 legend 預設會有內距，而且不吃 display:block 以外的排版。 */
.scnp-amounts-legend {
	display: block;
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 10px;
	padding: 0;
	width: 100%;
}

.scnp-amount-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 14px;
	min-width: 0;
}

.scnp-amount {
	align-items: center;
	appearance: none;
	background: var(--scnp-bg);
	border: 1.5px solid var(--scnp-border-strong);
	border-radius: var(--scnp-radius);
	color: var(--scnp-text);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	gap: 2px;
	justify-content: center;
	line-height: 1.2;
	min-height: 60px;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 12px 8px;
	text-align: center;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.scnp-amount:hover {
	border-color: var(--scnp-primary);
}

.scnp-amount:active {
	transform: scale(0.98);
}

.scnp-amount:focus-visible {
	outline: 2px solid var(--scnp-primary);
	outline-offset: 2px;
}

.scnp-amount.is-selected {
	background: var(--scnp-primary);
	border-color: var(--scnp-primary);
	color: #ffffff;
}

.scnp-amount-unit {
	font-size: 0.72em;
	font-weight: 500;
	opacity: 0.75;
}

/*
 * 金額按鈕的第二行敘述。
 *
 * 1.5.0 起每一顆按鈕都一定有這一行（沒填標籤時由 Amount_Rules 補預設敘述），
 * 所以行高要給得夠：敘述常常是兩行中文，擠在一起會讓按鈕看起來像一團字。
 * `1.5em` 是客戶指定的值。
 */
.scnp-amount-note {
	font-size: 0.7em;
	font-weight: 500;
	line-height: 1.5em;
	opacity: 0.8;
}

.scnp-amount-custom {
	margin-top: 4px;
}

.scnp-amount-custom .scnp-field-control {
	align-items: center;
	display: flex;
	gap: 8px;
}

/*
 * 注意：`scnp-custom-amount` 在 BASE 裡有兩個身分。
 *   - `.scnp-custom-amount`  是外層 div（包 label ＋ input group ＋ 提示 ＋ 錯誤）
 *   - `#scnp-custom-amount`  是裡面那顆 input,JS 把 `is-active` 加在它身上
 * 所以數字排版與 is-active 的外框都要下在 input 上，不能下在外層 div，
 * 否則 label 與提示文字會一起變粗。
 */
.scnp-custom-amount .scnp-input {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.scnp-input.is-active {
	border-color: var(--scnp-primary);
	box-shadow: 0 0 0 3px var(--scnp-primary-ring);
}

.scnp-amount-suffix {
	color: var(--scnp-text-muted);
	flex: 0 0 auto;
	font-size: 0.9em;
}

.scnp-amount-hint {
	color: var(--scnp-text-muted);
	font-size: 0.82em;
	margin: 6px 0 0;
}

.scnp-amount-display {
	color: var(--scnp-primary);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* =========================================================================
 * 10. 付款區塊
 *
 * `#payment` 的內部標記由 WooCommerce 產生，所以這裡的選擇器一律從
 * `.scnp-payment` 起手，只在自家容器內生效，不影響站台其他結帳頁。
 * DOM 位置從頭到尾不動，只有外層步驟的 CSS order 改變。
 * ====================================================================== */

.scnp-payment {
	margin-top: 4px;
	min-width: 0;
}

.scnp-payment ul {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.scnp-payment li {
	border: 1px solid var(--scnp-border);
	border-radius: var(--scnp-radius-sm);
	margin: 0;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.scnp-payment li > label {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	min-height: var(--scnp-touch);
	padding: 12px 14px;
}

.scnp-payment li > input[type="radio"] {
	flex: 0 0 auto;
	height: 20px;
	margin: 0 0 0 14px;
	width: 20px;
}

.scnp-payment li img {
	height: auto;
	max-height: 26px;
	max-width: 100%;
	width: auto;
}

.scnp-payment li > div {
	border-top: 1px solid var(--scnp-border);
	font-size: 0.88em;
	margin: 0;
	padding: 12px 14px;
}

/* 金流 SDK 的 iframe 一律不限制高度，讓它自己撐。 */
.scnp-payment iframe {
	border: 0;
	max-width: 100%;
}

.scnp-payment-empty {
	background: var(--scnp-bg-soft);
	border-radius: var(--scnp-radius-sm);
	color: var(--scnp-text-muted);
	font-size: 0.9em;
	margin: 0;
	padding: 14px;
}

/* =========================================================================
 * 11. 登入面板
 * ====================================================================== */

.scnp-login {
	background: var(--scnp-bg-soft);
	border-radius: var(--scnp-radius);
	margin-bottom: var(--scnp-gap);
	padding: 4px 14px;
	position: relative;
}

.scnp-login-toggle {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	color: var(--scnp-primary);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 0.92em;
	font-weight: 600;
	gap: 6px;
	min-height: var(--scnp-touch);
	padding: 0;
	text-align: left;
	width: 100%;
}

.scnp-login-toggle::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	height: 7px;
	margin-left: auto;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 200ms ease;
	width: 7px;
}

.scnp-login-toggle[aria-expanded="true"]::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

/*
 * 收合狀態刻意用與步驟離場相同的機制(visibility ＋ position:absolute),
 * 不用 max-height:0 或 display:none。
 * 理由：站長若開了 cfturnstile_login，登入面板裡會有一顆 Turnstile widget，
 * 而 widget 在「沒有尺寸」的容器內不會 render（手冊 3.3 坑五）。
 * 這樣寫，面板收著的時候仍然量得到寬高。
 */
.scnp-login-panel {
	border-top: 1px solid var(--scnp-border);
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	visibility: hidden;
	width: 100%;
	z-index: -1;
}

.scnp-login-panel.is-open {
	left: auto;
	padding: 14px 0 16px;
	pointer-events: auto;
	position: relative;
	top: auto;
	visibility: visible;
	z-index: auto;
}

.scnp-login-title {
	font-size: 0.95em;
	font-weight: 700;
	margin: 0 0 10px;
}

.scnp-login-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

.scnp-login-submit {
	appearance: none;
	background: var(--scnp-text);
	border: 0;
	border-radius: var(--scnp-radius-sm);
	color: #ffffff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	min-height: var(--scnp-touch);
	padding: 12px 22px;
}

.scnp-login-submit:hover {
	background: #000000;
}

.scnp-login-forgot {
	color: var(--scnp-text-muted);
	font-size: 0.88em;
	text-decoration: underline;
}

.scnp-login-message {
	font-size: 0.88em;
	margin: 10px 0 0;
}

.scnp-login-message.is-error {
	color: var(--scnp-danger);
}

.scnp-login-message.is-success {
	color: var(--scnp-success);
}

/* 已登入時的身分列。 */
.scnp-identity {
	align-items: center;
	background: var(--scnp-primary-soft);
	border-radius: var(--scnp-radius-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--scnp-gap);
	padding: 12px 14px;
}

.scnp-identity-name {
	font-size: 0.92em;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.scnp-identity-switch {
	color: var(--scnp-text-muted);
	font-size: 0.85em;
	margin-left: auto;
	text-decoration: underline;
}

/* 帳號區塊。 */
.scnp-account {
	border-top: 1px solid var(--scnp-border);
	margin-top: var(--scnp-gap);
	padding-top: var(--scnp-gap);
}

.scnp-account-title {
	font-size: 0.98em;
	font-weight: 700;
	margin: 0 0 4px;
}

.scnp-account-help {
	color: var(--scnp-text-muted);
	font-size: 0.85em;
	margin: 0 0 12px;
}

/* =========================================================================
 * 12. 電子申報 ／ 收據
 * ====================================================================== */

.scnp-receipt-switch,
.scnp-efile {
	border-top: 1px solid var(--scnp-border);
	margin-top: var(--scnp-gap);
	padding-top: var(--scnp-gap);
}

.scnp-efile-help {
	color: var(--scnp-text-muted);
	font-size: 0.85em;
	margin: 6px 0 0;
}

.scnp-efile-notice {
	background: var(--scnp-bg-soft);
	border-radius: var(--scnp-radius-sm);
	color: var(--scnp-text-muted);
	font-size: 0.82em;
	line-height: 1.65;
	margin-top: 12px;
	max-height: 220px;
	overflow-y: auto;
	padding: 12px 14px;
}

/* PHP 端把不適用的欄位標成 disabled 時的視覺弱化。 */
.scnp-field.is-disabled {
	opacity: 0.55;
}

/* =========================================================================
 * 13. 摘要
 * ====================================================================== */

.scnp-summary {
	background: var(--scnp-bg-soft);
	border-radius: var(--scnp-radius);
	margin-bottom: var(--scnp-gap);
	padding: 4px 16px;
}

.scnp-summary-row {
	align-items: baseline;
	border-bottom: 1px solid var(--scnp-border);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 12px 0;
}

.scnp-summary-row:last-child {
	border-bottom: 0;
}

.scnp-summary-key {
	color: var(--scnp-text-muted);
	flex: 0 0 auto;
	font-size: 0.85em;
	min-width: 5.5em;
}

.scnp-summary-value {
	flex: 1 1 auto;
	font-size: 0.95em;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.scnp-summary-row.is-empty .scnp-summary-value {
	color: var(--scnp-text-faint);
	font-weight: 400;
}

.scnp-summary-row[data-field="amount"] .scnp-summary-value {
	color: var(--scnp-primary);
	font-size: 1.2em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.scnp-summary-edit {
	appearance: none;
	background: none;
	border: 0;
	color: var(--scnp-text-muted);
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	font-size: 0.82em;
	padding: 4px 6px;
	text-decoration: underline;
}

.scnp-summary-edit:hover {
	color: var(--scnp-primary);
}

/* =========================================================================
 * 14. 個資聲明與 Turnstile
 * ====================================================================== */

.scnp-consent {
	margin-bottom: var(--scnp-gap);
}

.scnp-consent-body {
	background: var(--scnp-bg-soft);
	border-radius: var(--scnp-radius-sm);
	color: var(--scnp-text-muted);
	font-size: 0.82em;
	line-height: 1.7;
	margin-bottom: 10px;
	max-height: 200px;
	overflow-y: auto;
	padding: 12px 14px;
}

.scnp-consent-link {
	color: var(--scnp-primary);
	text-decoration: underline;
}

/* Turnstile 容器。
   絕對不要對它下 display:none 或 height:0,widget 在不可見容器內不會 render。 */
.scnp-turnstile {
	margin: 0 0 var(--scnp-gap);
	min-height: 68px;
	overflow-x: auto;
}

.scnp-turnstile iframe {
	max-width: 100%;
}

/* =========================================================================
 * 15. 導航與送出
 * ====================================================================== */

.scnp-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--scnp-gap);
}

.scnp-next,
.scnp-submit {
	appearance: none;
	background: var(--scnp-primary);
	border: 0;
	border-radius: var(--scnp-radius);
	color: #ffffff;
	cursor: pointer;
	flex: 1 1 auto;
	font: inherit;
	font-size: 1.02em;
	font-weight: 700;
	min-height: var(--scnp-touch);
	padding: 14px 20px;
	text-align: center;
	transition: background-color 160ms ease, transform 120ms ease;
}

.scnp-next:hover,
.scnp-submit:hover {
	background: var(--scnp-primary-dark);
}

.scnp-next:active,
.scnp-submit:active {
	transform: scale(0.99);
}

.scnp-next:focus-visible,
.scnp-submit:focus-visible,
.scnp-prev:focus-visible {
	outline: 2px solid var(--scnp-primary);
	outline-offset: 2px;
}

.scnp-prev {
	appearance: none;
	background: none;
	border: 1px solid var(--scnp-border-strong);
	border-radius: var(--scnp-radius);
	color: var(--scnp-text-muted);
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	min-height: var(--scnp-touch);
	padding: 14px 20px;
}

.scnp-prev:hover {
	border-color: var(--scnp-text-muted);
	color: var(--scnp-text);
}

.scnp-submit {
	font-size: 1.08em;
	padding: 16px 20px;
}

.scnp-submit[disabled],
.scnp-submit.is-busy {
	cursor: progress;
	opacity: 0.72;
}

.scnp-submit.is-busy::after {
	animation: scnp-spin 700ms linear infinite;
	border: 2px solid currentColor;
	border-radius: 999px;
	border-right-color: transparent;
	content: "";
	display: inline-block;
	height: 0.9em;
	margin-left: 8px;
	vertical-align: -0.1em;
	width: 0.9em;
}

@keyframes scnp-spin {
	to {
		transform: rotate(360deg);
	}
}

.scnp-submit-note {
	color: var(--scnp-text-faint);
	font-size: 0.8em;
	margin: 10px 0 0;
	text-align: center;
}

/* =========================================================================
 * 16. 通知 ／ 專案狀態 ／ 其他捐款方式
 * ====================================================================== */

.scnp-notice {
	border-left: 3px solid var(--scnp-border-strong);
	border-radius: var(--scnp-radius-sm);
	font-size: 0.9em;
	margin: 0 0 var(--scnp-gap);
	padding: 12px 14px;
}

.scnp-notice--error {
	background: var(--scnp-danger-soft);
	border-left-color: var(--scnp-danger);
	color: var(--scnp-danger);
}

.scnp-notice--info {
	background: var(--scnp-bg-soft);
	border-left-color: var(--scnp-primary);
}

.scnp-notice--warning {
	background: var(--scnp-accent-soft);
	border-left-color: var(--scnp-accent);
	color: var(--scnp-warning);
}

.scnp-ended {
	background: var(--scnp-bg-soft);
	border-radius: var(--scnp-radius-lg);
	margin: 0 auto var(--scnp-gap-lg);
	max-width: var(--scnp-max-width);
	padding: 40px 20px;
	text-align: center;
}

.scnp-ended-title {
	font-size: 1.25em;
	font-weight: 700;
	margin: 0 0 8px;
}

.scnp-ended-body {
	color: var(--scnp-text-muted);
	font-size: 0.95em;
	margin: 0;
}

.scnp-offline {
	border-top: 1px solid var(--scnp-border);
	margin: var(--scnp-gap-lg) auto 0;
	max-width: var(--scnp-max-width);
	padding-top: var(--scnp-gap-lg);
}

.scnp-offline-title {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 8px;
}

.scnp-offline-body {
	color: var(--scnp-text-muted);
	font-size: 0.9em;
	line-height: 1.75;
}

/* =========================================================================
 * 17. 與實際輸出對齊層
 *
 * 這一段補的是「模板真的印出來、但上面十六節沒有定義」的選擇器。
 * 判準只有一個：以捐款頁實際輸出的 HTML 為準，不以模板檔名或直覺為準。
 *
 * 三件事在這裡一次講清楚，之後改樣式請先讀：
 *
 *   1. 最外層容器 `#scnp-donation` 身上同時掛著版面旗標
 *      （`scnp-layout-*`、`scnp-status-*`、`scnp-hero-*`、`scnp-progress-*`、
 *      `scnp-font-*`），命名空間和「元件」是共用的。所以元件規則一律寫成
 *      後代選擇器，不能寫裸的單一 class，否則會誤中最外層容器。
 *   2. BASE 的修飾詞用「底線」(image_bg、side_by_side、permit_no),
 *      因為那些字串直接來自設定值與欄位 key，沒有做連字號轉換。
 *   3. WooCommerce 產的 `p.form-row` 沒有 `scnp-` 前綴，但它一定包在
 *      `.scnp-fields` 裡，所以從 `.scnp-fields` 起手就不會外溢。
 * ====================================================================== */

/* ---------- 17.1 版面骨架 ---------- */

.scnp-donation {
	margin: 0 auto;
	min-width: 0;
	width: 100%;
}

/*
 * hero 之外的一切內容都收在這裡，單一欄寬，行動優先。
 *
 * ★★★ 上下間距沿用 Blocksy 的頁面內容間距 ★★★
 *
 * `--theme-content-vertical-spacing` 是 Blocksy 自己的變數，宣告在 `:root`
 * （站上實測值：桌機 60px、窄螢幕 50px，由 blocksy 的 global.css 印出），
 * 主題用它給 `[data-vertical-spacing]` 容器上下內距。
 *
 * 捐款頁的模板取代了主題的 single-product 版型，連帶沒有輸出
 * `<div class="ct-container" data-vertical-spacing="...">` 那一層，
 * 所以主題的上下間距在這一頁完全沒有生效，畫面上表現成
 * 「捐款頁一路頂到頁首、和站上其他頁面的節奏對不起來」。
 *
 * 這裡直接讀同一個變數，站長日後在 Blocksy 後台調整頁面間距時，
 * 捐款頁會自動跟著改，不必回頭改這支 CSS。
 * fallback 保留原本的數值，主題換掉時仍然有合理的留白。
 */
.scnp-main {
	margin: 0 auto;
	max-width: var(--scnp-max-width);
	min-width: 0;
	padding-bottom: var(--theme-content-vertical-spacing, 48px);
	padding-left: var(--scnp-page-gutter);
	padding-right: var(--scnp-page-gutter);
	padding-top: var(--theme-content-vertical-spacing, 32px);
	width: 100%;
}

/* 版面模式旗標。flow（預設）四段同頁展開；wizard 一次一步。 */
.scnp-layout-flow .scnp-stepper {
	margin-bottom: var(--scnp-gap);
}

.scnp-layout-wizard .scnp-stepper {
	margin-bottom: var(--scnp-gap-lg);
}

/*
 * 專案狀態旗標。進行中的專案讓進度區塊保持純白，從灰底頁面上跳出來；
 * 已結束或尚未開始的則收進灰底，視覺上先降一階。
 */
.scnp-status-active .scnp-progress {
	background: var(--scnp-bg);
}

.scnp-status-ended .scnp-progress,
.scnp-status-upcoming .scnp-progress {
	background: var(--scnp-bg-soft);
}

/*
 * 字級旗標。與 `[data-font-scale]` 同義，兩者都印在最外層容器上。
 * 這裡補上 class 版本，子主題若只換 class 不換 data 屬性也能生效。
 */
.scnp-font-normal {
	--scnp-font-size: 16px;
	--scnp-line-height: 1.7;
	--scnp-touch: 48px;
}

.scnp-font-large {
	--scnp-font-size: 18px;
	--scnp-line-height: 1.8;
	--scnp-touch: 52px;
}

/* 通知區。內容由 WooCommerce 塞，空的時候不佔位。 */
.scnp-notices {
	margin: 0 auto;
	max-width: var(--scnp-max-width);
	min-width: 0;
}

/* 區塊。步驟內的次級分段（付款方式、建立帳戶、個資聲明、摘要）共用。 */
.scnp-section {
	border-top: 1px solid var(--scnp-border);
	margin-top: var(--scnp-gap-lg);
	min-width: 0;
	padding-top: var(--scnp-gap-lg);
}

.scnp-section-title {
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 12px;
}

/* 付款方式：第三方 SDK 會掛在這裡面，不設任何高度上限。 */
.scnp-section--payment {
	overflow: visible;
}

/* ---------- 17.2 Hero ---------- */

.scnp-hero-body {
	min-width: 0;
	position: relative;
}

/*
 * hero.php 印的是 `scnp-hero--{$layout}`,$layout 直接來自設定值，
 * 用的是底線(image_bg / side_by_side / minimal);
 * 第 2 節既有的規則用的是連字號。兩種寫法都要能套到，所以這裡補上底線版本。
 */
.scnp-hero--image_bg {
	color: #ffffff;
	min-height: 220px;
}

.scnp-hero--image_bg .scnp-hero-inner {
	min-height: 220px;
	padding-bottom: 32px;
	padding-top: 72px;
}

/*
 * ★ 沒有主視覺圖時務必把文字色換回來。
 *
 * hero.php 在沒有圖的情況下仍會輸出 `scnp-hero--image_bg`，只是多帶一個
 * `no-image`。若只看修飾詞就把文字塗白，專案標題會變成白底白字，
 * DOM 完整、沒有錯誤，但畫面上什麼都看不到。
 */
.scnp-hero--image-bg.no-image,
.scnp-hero--image_bg.no-image {
	background: var(--scnp-bg-soft);
	color: var(--scnp-text);
	min-height: 0;
}

.scnp-hero--image-bg.no-image .scnp-hero-inner,
.scnp-hero--image_bg.no-image .scnp-hero-inner {
	min-height: 0;
	padding-bottom: 28px;
	padding-top: 32px;
}

.scnp-hero--image-bg.no-image .scnp-hero-summary,
.scnp-hero--image_bg.no-image .scnp-hero-summary {
	color: var(--scnp-text-muted);
	opacity: 1;
}

.scnp-hero--side_by_side .scnp-hero-media {
	aspect-ratio: 16 / 9;
	border-radius: var(--scnp-radius);
	position: relative;
	width: 100%;
}

.scnp-hero--side_by_side .scnp-hero-overlay {
	display: none;
}

.scnp-hero--side_by_side .scnp-hero-inner {
	padding-top: 20px;
}

.scnp-hero-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* 最外層容器上的 hero 版面旗標，供站台以 scnp_page_classes 掛鉤。 */
.scnp-hero-image_bg .scnp-hero,
.scnp-hero-side_by_side .scnp-hero,
.scnp-hero-minimal .scnp-hero {
	margin-bottom: var(--scnp-gap-lg);
}

/* ---------- 17.3 募款進度 ---------- */

/*
 * 進度條。BASE 印的是 `.scnp-progress-track` ＋ `.scnp-progress-fill`
 * （寬度寫在 fill 的 inline style），不是第 3 節那組 `-bar` ／ `-bar-fill`。
 */
.scnp-progress-track {
	background: var(--scnp-bg-soft);
	border: 1px solid var(--scnp-border);
	border-radius: 999px;
	height: 18px;
	margin: 0 0 18px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.scnp-progress-fill {
	background: linear-gradient(90deg, var(--scnp-primary) 0%, var(--scnp-accent) 160%);
	border-radius: 999px;
	display: block;
	height: 100%;
	min-width: 0;
	transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * 四分之一刻度。募款進度要能「不讀數字就估得出成數」，
 * 所以在條上壓四道細線，填色與未填色的區段都看得到。
 */
.scnp-progress-track::after {
	background-image: repeating-linear-gradient(
		to right,
		transparent 0,
		transparent calc(25% - 1px),
		var(--scnp-bg) calc(25% - 1px),
		var(--scnp-bg) 25%
	);
	content: "";
	inset: 0;
	opacity: 0.85;
	pointer-events: none;
	position: absolute;
}

.scnp-progress--bar .scnp-progress-ring {
	display: none;
}

.scnp-progress--ring .scnp-progress-track,
.scnp-progress--text_only .scnp-progress-track,
.scnp-progress--text-only .scnp-progress-track,
.scnp-progress--no-goal .scnp-progress-track {
	display: none;
}

/* 沒有目標金額：不談成數，只談已募得。 */
.scnp-progress.no-goal .scnp-progress-track,
.scnp-progress.no-goal .scnp-stat--goal {
	display: none;
}

.scnp-progress--no-goal .scnp-stat--goal {
	display: none;
}

.scnp-progress-nogoal {
	color: var(--scnp-text-muted);
	font-size: 0.92em;
	margin: 0 0 14px;
}

/* 統計數字。dl ／ dd 的瀏覽器預設邊界一定要歸零。 */
.scnp-progress-stats:last-child {
	margin-bottom: 0;
}

.scnp-stat {
	min-width: 0;
}

.scnp-stat-label {
	color: var(--scnp-text-muted);
	display: block;
	font-size: 0.85em;
	line-height: 1.4;
	margin: 0 0 2px;
}

.scnp-stat-value {
	display: block;
	font-size: 1.28em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	overflow-wrap: anywhere;
}

/* 已募得是主角，用主色；處理中（ATM 未入帳）用警示色，和已入帳分得開。 */
.scnp-stat--raised .scnp-stat-value {
	color: var(--scnp-primary);
}

.scnp-stat--pending .scnp-stat-value {
	color: var(--scnp-warning);
}

.scnp-stat--goal .scnp-stat-value,
.scnp-stat--donors .scnp-stat-value,
.scnp-stat--days .scnp-stat-value {
	color: var(--scnp-text);
}

/* bootstrap 還沒回來時的佔位不要跳色，避免數字閃一下。 */
.scnp-progress.is-loading .scnp-stat-value,
.scnp-progress.is-unavailable .scnp-stat-value {
	color: var(--scnp-text-faint);
}

/* ---------- 17.4 勸募資訊 ---------- */

.scnp-campaign-label {
	color: var(--scnp-text-muted);
	font-size: 0.85em;
	line-height: 1.5;
	margin: 0;
}

.scnp-campaign-value {
	margin: 0;
}

/* 許可文號與金額是會被抄下來核對的，用等寬數字排。 */
.scnp-campaign-row--permit_no .scnp-campaign-value,
.scnp-campaign-row--planned_amount .scnp-campaign-value,
.scnp-campaign-row--period .scnp-campaign-value {
	font-variant-numeric: tabular-nums;
}

.scnp-campaign-row--name .scnp-campaign-value,
.scnp-campaign-row--authority .scnp-campaign-value {
	font-weight: 600;
}

.scnp-campaign-row--purpose .scnp-campaign-value {
	line-height: 1.65;
}

/* ---------- 17.5 步驟指示器 ---------- */

.scnp-stepper-list {
	display: flex;
	flex: 1 1 auto;
	gap: 6px;
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0;
}

/*
 * 真正被點的是 `<button class="scnp-stepper-button">`，
 * `.scnp-stepper-item` 只是外層 li（第 6 節負責它的進度橫條與狀態色）。
 */
.scnp-stepper-button {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 4px;
	justify-content: flex-start;
	min-height: 44px;
	min-width: 0;
	padding: 6px 2px;
	text-align: center;
	width: 100%;
}

.scnp-stepper-button:focus-visible {
	border-radius: var(--scnp-radius-sm);
	outline: 2px solid var(--scnp-primary);
	outline-offset: 2px;
}

.scnp-stepper-number {
	align-items: center;
	background: var(--scnp-bg-soft);
	border: 1px solid var(--scnp-border);
	border-radius: 999px;
	color: var(--scnp-text-muted);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	height: 2em;
	justify-content: center;
	transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
	width: 2em;
}

.scnp-stepper-item.is-active .scnp-stepper-number {
	background: var(--scnp-primary);
	border-color: var(--scnp-primary);
	color: #ffffff;
}

.scnp-stepper-item.is-done .scnp-stepper-number {
	background: var(--scnp-primary-soft);
	border-color: var(--scnp-primary);
	color: var(--scnp-primary);
}

.scnp-stepper-title {
	font-size: 0.78em;
	line-height: 1.3;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---------- 17.6 步驟 ---------- */

.scnp-step-header {
	margin-bottom: var(--scnp-gap);
	min-width: 0;
}

/*
 * 步驟編號旗標。排序完全由第 7 節的 `[data-step]` ＋ flexbox order 決定，
 * 這裡的 `--N` 只碰視覺，不參與離場與排序，改這幾條不影響切換機制。
 */
.scnp-step--1 .scnp-step-body,
.scnp-step--2 .scnp-step-body,
.scnp-step--3 .scnp-step-body,
.scnp-step--4 .scnp-step-body {
	box-shadow: var(--scnp-shadow-sm);
}

/* 第一步是金額與付款，轉換的關鍵，邊框加重一級。 */
.scnp-step--1 .scnp-step-body {
	border-color: var(--scnp-border-strong);
}

/* 第四步是最後確認，同上。 */
.scnp-step--4 .scnp-step-body {
	border-color: var(--scnp-border-strong);
}

/* ---------- 17.7 金額 ---------- */

/* 打勾記號要定位，所以按鈕本身必須是定位脈絡。 */
.scnp-amount {
	position: relative;
	/*
	 * ★ 頂端多留一條 10px 的空間給右上角的打勾徽章。
	 *
	 * 徽章的垂直範圍是卡片頂端 4px 到 18px，把內容往下推到 22px 起，
	 * 兩者就**在任何寬度下都不可能重疊**。
	 *
	 * 為什麼往上讓而不是往左右讓：這一格的可用寬度只有大約 85px，
	 * 「3,000 元」幾乎就把它填滿了。左右讓位會直接擠爆金額那一行
	 * （1.10.0 第一次修的時候就是這樣把「300 元」拆成三行的）。
	 * 高度這一側則有很大的餘裕，`min-height: 60px` 本來就吃得下。
	 *
	 * ★ **所有卡片都留，不是只有 .is-selected**，
	 *   否則點下去會因為突然多出內距而整格跳動。
	 */
	padding-top: 22px;
}

.scnp-amount-value {
	font-size: 1.08em;
	line-height: 1.2;
	/*
	 * ★ 金額一律不斷行。
	 *
	 * `.scnp-amount` 上有 `overflow-wrap: anywhere`（那是為了長敘述設計的），
	 * 一旦這一行的可用寬度不足，它會從**任意位置**斷開，
	 * 「300 元」就變成「30 ／ 0 ／ 元」。金額被拆成這樣沒有任何可讀性，
	 * 寧可讓它溢出也不要斷。
	 *
	 * ★ 1.10.0 踩過的坑：不要用 `padding-inline` 來替右上角的打勾徽章讓位。
	 *   這一格的可用寬度只有大約 85px，扣掉左右內距之後金額就會開始亂斷。
	 *   讓位要往「上」讓，不是往「左右」讓，見下面 `.scnp-amount` 的 padding-top。
	 */
	white-space: nowrap;
}

/*
 * ★ 選取狀態不能只靠顏色。
 *
 * 紅底白字對紅綠色盲來說和一般狀態幾乎沒有差別，所以同時改三件事：
 * 底色、外圈光暈（形狀變化）、以及右上角一個實心打勾。
 * 任何一種色覺條件下都至少有兩個線索。
 */
.scnp-amount.is-selected {
	box-shadow: 0 0 0 3px var(--scnp-primary-ring);
}

/*
 * 徽章比 1.9.1 之前小一點（1.7em → 1.5em、0.72em → 0.68em）。
 * 它現在住在 `.scnp-amount` 頂端那條 22px 的保留區裡（見上面的 padding-top）。
 * ★ 徽章改大或改變 top 值時，那條 padding-top 要一起加，否則又會蓋到金額。
 */
.scnp-amount.is-selected::after {
	align-items: center;
	background: #ffffff;
	border-radius: 999px;
	color: var(--scnp-primary);
	content: "✓";
	display: flex;
	font-size: 0.68em;
	height: 1.5em;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 5px;
	top: 5px;
	width: 1.5em;
}

.scnp-custom-amount {
	margin-top: 4px;
	min-width: 0;
}

/* 自訂金額的輸入框與單位。 */
.scnp-input-group {
	align-items: center;
	display: flex;
	gap: 8px;
	min-width: 0;
}

.scnp-input-group .scnp-input {
	flex: 1 1 auto;
	min-width: 0;
}

.scnp-input-suffix {
	color: var(--scnp-text-muted);
	flex: 0 0 auto;
	font-size: 0.95em;
	white-space: nowrap;
}

/* 金額規則是給 JS 讀的 JSON，不是畫面。 */
.scnp-amount-rules {
	display: none;
}

/* ---------- 17.8 欄位群(WooCommerce form-row) ---------- */

/*
 * `.scnp-fields` 裡面是 woocommerce_form_field() 產出的 `p.form-row`。
 * 那些 class 不是我們的，但一定包在這個容器內，所以從這裡起手安全。
 * 一律單欄：高齡捐款人比例高，單欄表單的填答正確率明顯較好，
 * 因此把 Woo 的 form-row-first ／ form-row-last 浮動一併壓平。
 */
.scnp-fields {
	min-width: 0;
}

.scnp-fields .form-row {
	margin: 0 0 var(--scnp-gap);
	min-width: 0;
	padding: 0;
}

.scnp-fields .form-row-first,
.scnp-fields .form-row-last,
.scnp-fields .form-row-wide {
	float: none;
	width: 100%;
}

.scnp-fields label {
	display: block;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 6px;
}

.scnp-fields .optional {
	color: var(--scnp-text-faint);
	font-weight: 400;
}

.scnp-fields .required {
	color: var(--scnp-danger);
	margin-left: 2px;
	text-decoration: none;
}

.scnp-fields .woocommerce-input-wrapper {
	display: block;
	min-width: 0;
	width: 100%;
}

.scnp-fields .input-text,
.scnp-fields select,
.scnp-fields textarea {
	background: var(--scnp-bg);
	border: 1px solid var(--scnp-border-strong);
	border-radius: var(--scnp-radius-sm);
	color: var(--scnp-text);
	display: block;
	font: inherit;
	line-height: 1.4;
	min-height: var(--scnp-touch);
	padding: 12px 14px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
	width: 100%;
}

.scnp-fields textarea {
	min-height: 96px;
	resize: vertical;
}

.scnp-fields .input-text:focus,
.scnp-fields select:focus,
.scnp-fields textarea:focus {
	border-color: var(--scnp-primary);
	box-shadow: 0 0 0 3px var(--scnp-primary-ring);
	outline: none;
}

.scnp-fields .form-row.is-invalid .input-text {
	background: var(--scnp-danger-soft);
	border-color: var(--scnp-danger);
}

.scnp-fields .form-row.is-hinted .input-text {
	border-color: var(--scnp-warning);
}

/*
 * 錯誤訊息是 form-row 的「兄弟」節點而不是子節點（BASE 就是這樣印的），
 * 顯示時要往上拉，才會貼著出錯的那個欄位而不是浮在下一欄旁邊。
 */
.scnp-fields > .scnp-field-error.is-visible {
	display: block;
	margin: calc(4px - var(--scnp-gap)) 0 var(--scnp-gap);
}

.scnp-billing {
	min-width: 0;
}

.scnp-account-fields {
	margin-top: 4px;
}

/* 站台設了自動產生密碼時，這裡取代密碼欄位說明。 */
.scnp-account-note {
	color: var(--scnp-text-muted);
	font-size: 0.88em;
	line-height: 1.7;
	margin: 0;
}

.scnp-identity-text {
	font-size: 0.92em;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * 密碼欄下方的工具列（顯示 ／ 隱藏 ＋ 說明）。
 * 緊貼上面的 form-row，所以把 form-row 的下邊界抵銷掉。
 */
.scnp-password-tools {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	margin: calc(0px - var(--scnp-gap)) 0 var(--scnp-gap);
	min-width: 0;
}

.scnp-password-tools .scnp-field-help {
	flex: 1 1 12em;
	margin: 0;
	min-width: 0;
}

/*
 * 密碼顯示 ／ 隱藏切換。
 * BASE 沒有 `.scnp-field-control` 那層包裝（第 8 節那組規則是給它用的），
 * 所以這裡不做疊在輸入框上的浮動小按鈕，改成輸入框下方的一顆文字按鈕：
 * 熱區整條都是，高齡捐款人不必瞄準四十像素見方的角落。
 */
.scnp-password-toggle {
	appearance: none;
	background: none;
	border: 0;
	color: var(--scnp-primary);
	cursor: pointer;
	display: inline-block;
	flex: 0 0 auto;
	font: inherit;
	font-size: 0.85em;
	min-height: 44px;
	padding: 10px 0;
	text-align: left;
	text-decoration: underline;
}

.scnp-password-toggle:hover {
	color: var(--scnp-primary-dark);
}

.scnp-password-toggle:focus-visible {
	border-radius: var(--scnp-radius-sm);
	outline: 2px solid var(--scnp-primary);
	outline-offset: 2px;
}

/* 忘記密碼也是 <button>，要把瀏覽器預設外觀清掉。 */
.scnp-login-forgot {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	min-height: 44px;
	padding: 10px 0;
}

/* ---------- 17.9 勾選與單選 ---------- */

/*
 * BASE 用的是 `.scnp-choice` ＋ `.scnp-choice-label`
 * （第 8 節的 `.scnp-check` ／ `.scnp-radio` 是另一套命名，兩套都留著）。
 * 勾選框放大到 22px：預設的 13px 對高齡使用者太小。
 */
.scnp-choice {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 10px;
	line-height: 1.55;
	margin: 0;
	min-height: 44px;
	min-width: 0;
	padding: 8px 0;
}

.scnp-choice input {
	flex: 0 0 auto;
	height: 22px;
	margin: 4px 0 0;
	width: 22px;
}

.scnp-choice-label {
	font-size: 0.95em;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* 蜜罐。模板已用 inline style 鎖死，這裡把契約也寫進樣式表。 */
.scnp-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

/* ---------- 17.10 收據與申報 ---------- */

/* fieldset 的預設外框與內距一律歸零，留白交給 .scnp-step-body。 */
.scnp-receipt-optin {
	border: 0;
	margin: 0 0 var(--scnp-gap);
	min-width: 0;
	padding: 0;
}

.scnp-receipt-optin .scnp-field-label {
	display: block;
	padding: 0;
	width: 100%;
}

.scnp-receipt-optin .scnp-field-help {
	display: block;
	margin: 6px 0 0;
}

.scnp-receipt-fields {
	min-width: 0;
}

/*
 * ★ 不需要收據時整塊收起來。
 *
 * 這裡用 `display: none` 是安全的：它作用在 `.scnp-receipt-fields`，
 * **不是** `.scnp-step`。手冊坑五禁的是對步驟容器用 display:none
 * （會讓金流 SDK 與 Turnstile 的 iframe 量不到尺寸、甚至不 render），
 * 而這一塊裡面只有兩個純文字輸入框，沒有任何第三方 iframe。
 *
 * JS 那一端一律改 `hidden` 屬性（np-cart.js 全檔零 style.display），
 * 這條 class 只是讓沒有 JS 的環境也有一致的表現。
 */
.scnp-receipt-fields[hidden],
.scnp-receipt-fields.is-hidden {
	display: none;
}

/* np-cart 自己補的收據欄位（invoice-receipt 沒渲染時才出現）。 */
.scnp-receipt-own {
	border-top: 1px solid var(--scnp-border);
	margin-top: var(--scnp-gap);
	min-width: 0;
	padding-top: var(--scnp-gap);
}

.scnp-receipt-own .scnp-section-title {
	margin-bottom: 10px;
}

/* 必填星號。顏色之外還有形狀，而且 aria-hidden，不會被螢幕閱讀器唸成「星號」。 */
.scnp-required {
	color: var(--scnp-danger);
	margin-left: 2px;
}

/* invoice-receipt 有掛欄位時才會有內容，這時候和上面的選項拉開距離。 */
.scnp-receipt-fields .form-row {
	margin: 0 0 var(--scnp-gap);
	padding: 0;
}

/* 第 12 節只給了 .scnp-efile 上緣線，其餘三邊的 fieldset 預設外框在這裡清掉。 */
.scnp-efile {
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	min-width: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.scnp-efile .scnp-field-label {
	display: block;
	padding: 0;
	width: 100%;
}

.scnp-efile-notice-body {
	margin-top: 8px;
}

/* ---------- 17.11 付款方式 ---------- */

.scnp-payment-methods {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	min-width: 0;
	padding: 0;
}

/*
 * radio 和 label 在 DOM 裡是兄弟，label 又是 flex（第 10 節），
 * 不把 li 做成 flex 的話 radio 會自己佔一行。
 * 付款細節(payment_box)換行到下面整寬，金流 SDK 才有完整寬度可用。
 */
.scnp-payment-methods > li {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.scnp-payment-methods > li > label {
	flex: 1 1 auto;
	min-width: 0;
}

.scnp-payment-methods > li > div {
	flex: 1 1 100%;
	min-width: 0;
}

/* 選中的付款方式要看得出來，同樣不只靠顏色：底色 ＋ 左側粗邊。 */
.scnp-payment-methods > li:focus-within {
	border-color: var(--scnp-primary);
}

/*
 * ══════════════════════════════════════════════════════════════════════
 * 17.11b 付款方式的卡片外框（1.5.0 修）
 * ══════════════════════════════════════════════════════════════════════
 *
 * 【症狀】三個付款選項裡只有第一個看得到完整外框，其餘兩個上緣是斷的。
 *
 * 【根因】站上 Blocksy 的 woocommerce.min.css 有這兩條：
 *
 *     #payment ul.payment_methods>li.wc_payment_method { border:1px solid ... }
 *     #payment ul.payment_methods>li.wc_payment_method:not(:first-child) { border-top:none }
 *
 * 那是為「上下相連、共用一條分隔線」的堆疊清單設計的。而我們的
 * `.scnp-payment-methods` 是 `display:grid` ＋ `gap:8px`，選項之間本來就有間隔，
 * 少了 border-top 的第二、三顆看起來就是「框破了一角」。
 *
 * 第 10 節的 `.scnp-payment li` 蓋不掉它：那條的權重是 (0,1,1),
 * Blocksy 那條帶了 id，權重是 **(1,3,2)**。**只要對方有 id，再多 class 都贏不了**，
 * 所以這裡的選擇器必須自己也帶一個 id。
 *
 * ★ 1.10.1 更正：這裡原本寫 Blocksy 是 (1,2,2)，那是**算錯的**。
 *   `:not(:first-child)` 依規範要計入其參數的權重（`:first-child` 是 pseudo-class），
 *   所以要多算一個 class 級單位，實際是 (1,3,2)。
 *   下面主規則的 (1,3,1) 因此在元素數那一欄輸掉，第二顆之後的上框整批不見。
 *   補救的規則寫在 :hover 那一條的上面，連同完整的推導。
 *   **算權重的時候不要漏掉 `:not()` 裡面的東西。**
 *
 * `#payment` 這個 id 是我們自己的 payment.php 印的（SHOPLINE 與 checkout.js
 * 都靠它定位付款區塊，不能改名），寫成 `.scnp-payment#payment` 的形式：
 *   - 仍然以 `.scnp-` 開頭，通過 check-css-scope.sh
 *   - 不是裸的 `#payment` 起手，通過 check-front-assets.sh 的 B 組禁令
 *   - 權重 (1,3,1) > (1,2,2)，真的蓋得掉
 */
.scnp-payment#payment .scnp-payment-methods > li.wc_payment_method {
	background: var(--scnp-bg);
	border: 1px solid var(--scnp-border-strong);
	border-radius: var(--scnp-radius-sm);
	overflow: hidden;
	position: relative;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

/*
 * ★ 1.10.1 修正：第二顆之後的上框會不見。
 *
 * 上面那條主規則的權重是 (1,3,1)，而 Blocksy 的
 * `#payment ul.payment_methods>li.wc_payment_method:not(:first-child){border-top:none}`
 * 實際是 **(1,3,2)**，不是上面註解原本寫的 (1,2,2)：
 * `:not()` 依規範要計入其參數的權重，`:first-child` 是 pseudo-class，
 * 所以它多算一個 class 級單位。ID 相同、class 相同（3 = 3），
 * 最後在**元素數**那一欄 2 > 1，Blocksy 贏。
 *
 * 症狀之所以是「只有第一顆有上框」，正因為對方那條帶 `:not(:first-child)`，
 * 第一顆不在它的射程內。這是權重算錯了一級的典型長相。
 *
 * 補一條同樣帶 `:not(:first-child)` 的規則把上框加回來：
 * 權重 (1,4,1) > (1,3,2)，這次真的贏得了。
 * 顏色不必重寫，下面的 :hover ／ :focus-within ／ :has(:checked)
 * 都是設 border-color，會套在這條補回來的邊框上。
 */
.scnp-payment#payment .scnp-payment-methods > li.wc_payment_method:not( :first-child ) {
	border-top: 1px solid var(--scnp-border-strong);
}

.scnp-payment#payment .scnp-payment-methods > li.wc_payment_method:hover {
	border-color: var(--scnp-primary);
}

.scnp-payment#payment .scnp-payment-methods > li.wc_payment_method > label {
	cursor: pointer;
	min-height: var(--scnp-touch);
	padding: 14px 16px;
}

/* 付款細節(payment_box)整寬換行，金流 SDK 才有完整寬度可用。 */
.scnp-payment#payment .scnp-payment-methods > li.wc_payment_method > .payment_box {
	border-top: 1px solid var(--scnp-border);
	flex: 1 1 100%;
	min-width: 0;
	padding: 16px;
}

/*
 * 選中狀態。
 *
 * ★ 刻意不只靠顏色（色盲考量），三個訊號同時給：
 *   1. 主色外框 ＋ 內縮一圈的 box-shadow（等於 2px 邊框，但不改變版面高度）
 *   2. 左側 4px 的實心色條（li 的 ::before，純形狀，不依賴色彩辨識）
 *   3. 標籤文字加粗
 *
 * ★ 色條掛在 li 的 ::before，不是 label 的。
 *   Blocksy 把原生 radio 用 clip 藏起來，改在 `label:before` 畫自己的圓點
 *   (`#payment ul.payment_methods>li.wc_payment_method>input:checked+label:before`)。
 *   我們若也用 label::before，權重更高會把那顆圓點整個蓋掉，
 *   結果是「選了哪一個看不出來」，修一個框的同時弄壞一個更重要的訊號。
 *
 * `:has()` 自 2023 年底起是所有主流瀏覽器的 baseline。
 * 萬一真的碰到不支援的瀏覽器，只會少掉這三個訊號，radio 本身仍然正常運作。
 */
.scnp-payment#payment .scnp-payment-methods > li.wc_payment_method:has( > input[type="radio"]:checked ) {
	background: var(--scnp-primary-soft);
	border-color: var(--scnp-primary);
	box-shadow: inset 0 0 0 1px var(--scnp-primary);
}

.scnp-payment#payment .scnp-payment-methods > li.wc_payment_method:has( > input[type="radio"]:checked )::before {
	background: var(--scnp-primary);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	top: 0;
	width: 4px;
	z-index: 1;
}

.scnp-payment#payment .scnp-payment-methods > li.wc_payment_method:has( > input[type="radio"]:checked ) > label {
	font-weight: 700;
}

.scnp-payment#payment .scnp-payment-methods > li.wc_payment_method:focus-within {
	border-color: var(--scnp-primary);
	box-shadow: 0 0 0 3px var(--scnp-primary-ring);
}

/* 沒有可用付款方式時的說明條不是卡片，把上面的外框收掉。 */
.scnp-payment#payment .scnp-payment-methods > li.scnp-payment-empty {
	border: 0;
	box-shadow: none;
}

/* ---------- 17.12 送出列 ---------- */

.scnp-submit-row {
	margin-top: var(--scnp-gap);
	min-width: 0;
}

.scnp-submit-row .scnp-submit {
	width: 100%;
}

/* ---------- 17.13 摘要 ---------- */

.scnp-summary-list {
	margin: 0;
	min-width: 0;
}

.scnp-summary .scnp-section-title {
	margin: 14px 0 4px;
}

.scnp-summary-label {
	color: var(--scnp-text-muted);
	flex: 0 0 auto;
	font-size: 0.88em;
	margin: 0;
	min-width: 6em;
}

.scnp-summary-value {
	margin: 0;
}

/*
 * 「修改」按鈕的樣式留著給主題覆寫用，BASE 從 1.5.0 起不再輸出它。
 *
 * 確認頁改成純羅列：八列各配一顆「修改」等於在最後一步放了八個離開的出口，
 * 而且按鈕比資料本身還醒目。要改就按最下面那顆「上一步」。
 */
.scnp-summary-action {
	flex: 0 0 auto;
	margin: 0 0 0 auto;
}

.scnp-summary-action .scnp-summary-edit {
	min-height: 44px;
	padding: 10px 4px;
}

/* 純羅列的引導語。告訴人「要改請按上一步」，免得他在列上到處點。 */
.scnp-summary-hint {
	color: var(--scnp-text-muted);
	font-size: 0.85em;
	line-height: 1.6;
	margin: 0 0 4px;
}

/* 身分證等遮罩過的值用等寬數字，對齊比較好讀。 */
.scnp-summary-row--receipt_id .scnp-summary-value,
.scnp-summary-row--receipt_name .scnp-summary-value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* 金額是確認頁的主角。 */
.scnp-summary-row--amount .scnp-summary-value {
	color: var(--scnp-primary);
	font-size: 1.2em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.scnp-summary-row--email .scnp-summary-value,
.scnp-summary-row--phone .scnp-summary-value {
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.scnp-summary-row--name .scnp-summary-value,
.scnp-summary-row--payment .scnp-summary-value,
.scnp-summary-row--receipt .scnp-summary-value,
.scnp-summary-row--efile .scnp-summary-value {
	font-weight: 600;
}

/* 備註可能很長，不放大也不加粗，讓它安靜地換行。 */
.scnp-summary-row--note .scnp-summary-value {
	font-weight: 400;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

/* ---------- 17.14 個資同意 ---------- */

.scnp-field--note .scnp-textarea {
	min-height: 88px;
}

.scnp-field--public-consent,
.scnp-field--anonymous {
	margin-bottom: var(--scnp-gap);
}

/* 同意條款是按下送出前的最後一道確認，底色圈起來，不要讓人滑過去。 */
.scnp-field--consent {
	background: var(--scnp-primary-soft);
	border-radius: var(--scnp-radius-sm);
	margin-bottom: var(--scnp-gap);
	padding: 2px 14px;
}

/*
 * ══════════════════════════════════════════════════════════════════════
 * 17.14b 個資聲明彈窗（1.5.0 新增）
 * ══════════════════════════════════════════════════════════════════════
 *
 * ★★★ 這一段與 `.scnp-step` 的離場機制完全無關，一行都不能互相影響 ★★★
 *
 * 彈窗的收合走 `hidden` 屬性（JS 只改 `el.hidden`，全檔零 style.display），
 * 展開時是 `position: fixed` 的全螢幕遮罩。
 * `.scnp-step` 的 order ／ visibility ／ position 三件套完全沒有被碰到，
 * 手冊坑五的條件不變（建置期 check-front-assets.sh 會驗）。
 *
 * 為什麼 fixed 在這裡是安全的：第 19 節的 sticky 右欄刻意沒有用
 * transform ／ filter ／ will-change（那三個會讓 fixed 子孫改以該元素為
 * 容器塊，彈窗會被關進右欄那個小框裡）。改那一節時請一併回來讀這一段。
 */
.scnp-consent-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 16px;
	position: fixed;
	z-index: 100000;
}

/* 收合狀態。瀏覽器預設就會處理，這裡寫出來是為了不被 flex 覆蓋掉。 */
.scnp-consent-modal[hidden] {
	display: none;
}

.scnp-consent-backdrop {
	background: rgba(16, 24, 40, 0.55);
	inset: 0;
	position: absolute;
}

.scnp-consent-dialog {
	background: var(--scnp-bg);
	border-radius: var(--scnp-radius-lg);
	box-shadow: var(--scnp-shadow-lg);
	display: flex;
	flex-direction: column;
	/* 小螢幕上也不能超過視窗高度，否則關閉鈕會被推到看不到的地方。 */
	max-height: calc(100vh - 32px);
	max-width: 640px;
	min-width: 0;
	position: relative;
	width: 100%;
}

.scnp-consent-head {
	align-items: flex-start;
	border-bottom: 1px solid var(--scnp-border);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 18px 20px 14px;
}

.scnp-consent-modal-title {
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	min-width: 0;
}

.scnp-consent-close {
	appearance: none;
	background: none;
	border: 0;
	border-radius: var(--scnp-radius-sm);
	color: var(--scnp-text-muted);
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	font-size: 1.4em;
	line-height: 1;
	min-height: 44px;
	min-width: 44px;
}

.scnp-consent-close:hover {
	color: var(--scnp-text);
}

.scnp-consent-close:focus-visible,
.scnp-consent-ok:focus-visible,
.scnp-consent-open:focus-visible {
	outline: 2px solid var(--scnp-primary);
	outline-offset: 2px;
}

/*
 * 內文捲動區。
 *
 * `tabindex="0"` 在模板上，讓只用鍵盤的人可以捲動這一塊；
 * 沒有它的話，一份很長的聲明對鍵盤使用者等於讀不到後半段。
 */
.scnp-consent-scroll {
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 16px 20px;
}

/* 彈窗內的內文不再需要自己的高度上限與底色，捲動由外層負責。 */
.scnp-consent-scroll .scnp-consent-body {
	background: none;
	color: var(--scnp-text);
	font-size: 0.9em;
	margin: 0;
	max-height: none;
	overflow-y: visible;
	padding: 0;
}

.scnp-consent-foot {
	border-top: 1px solid var(--scnp-border);
	padding: 14px 20px 18px;
}

.scnp-consent-ok {
	appearance: none;
	background: var(--scnp-primary);
	border: 1px solid var(--scnp-primary);
	border-radius: var(--scnp-radius);
	color: #ffffff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	min-height: var(--scnp-touch);
	padding: 12px 24px;
	width: 100%;
}

.scnp-consent-ok:hover {
	background: var(--scnp-primary-dark);
	border-color: var(--scnp-primary-dark);
}

/*
 * 勾選列裡那顆「個人資料蒐集聲明」。
 *
 * 它是 <button> 而不是 <a>（不導航、不在網址列留 #），但外觀要像連結，
 * 否則捐款人不會知道那幾個字可以點。
 */
.scnp-consent-open {
	appearance: none;
	background: none;
	border: 0;
	color: var(--scnp-primary);
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.scnp-consent-open:hover {
	color: var(--scnp-primary-dark);
}

.scnp-consent-note {
	margin: 0 0 var(--scnp-gap);
}

/*
 * 沒有任何聲明內容可讀時的降級樣式。
 *
 * 刻意不給主色、不給底線：那兩樣是「這幾個字可以點」的視覺承諾，
 * 而這個狀態下它就只是一段文字，看起來能點卻點不動比樸素難看得多。
 */
.scnp-consent-plain {
	font: inherit;
}

/* ---------- 17.15 其他狀態區塊 ---------- */

/* 專案暫時無法捐款時的說明條。 */
.scnp-blocked {
	background: var(--scnp-accent-soft);
	border-left: 3px solid var(--scnp-accent);
	border-radius: var(--scnp-radius-sm);
	color: var(--scnp-warning);
	font-size: 0.9em;
	margin: 0 0 var(--scnp-gap);
	padding: 12px 14px;
}

.scnp-ended-date {
	color: var(--scnp-text-muted);
	font-size: 0.88em;
	font-variant-numeric: tabular-nums;
	margin: 12px 0 0;
}

.scnp-ended-actions {
	margin: 20px 0 0;
}

.scnp-button {
	appearance: none;
	background: var(--scnp-primary);
	border: 1px solid var(--scnp-primary);
	border-radius: var(--scnp-radius);
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 700;
	min-height: var(--scnp-touch);
	padding: 13px 24px;
	text-decoration: none;
}

.scnp-button:hover {
	background: var(--scnp-primary-dark);
	border-color: var(--scnp-primary-dark);
	color: #ffffff;
}

.scnp-button--secondary {
	background: none;
	border-color: var(--scnp-border-strong);
	color: var(--scnp-text);
}

.scnp-button--secondary:hover {
	background: none;
	border-color: var(--scnp-text-muted);
	color: var(--scnp-text);
}

.scnp-button:focus-visible {
	outline: 2px solid var(--scnp-primary);
	outline-offset: 2px;
}

/*
 * ★ 擋掉主題畫在連結上的底線漸層（1.10.2）。
 *
 * 症狀：感謝頁的「回到專案頁」「回到首頁」在滑鼠移開時會閃過一道黑色。
 *
 * 成因：Blocksy 有這一條
 *   [data-link=type-4] :where( .entry-content :where(p,em,strong)>a, … ) {
 *     background-size:  var( --has-link-decoration, 100% 1px );
 *     background-image: var( --has-link-decoration, linear-gradient( currentColor, currentColor ) );
 *   }
 * 那是它的連結底線效果。三件事湊在一起才會出事：
 *   1. 感謝頁的按鈕包在 `<p class="scnp-thankyou-actions">` 裡（thankyou.php），
 *      正好命中 `:where(p,em,strong)>a`。
 *   2. `currentColor` 對 `--secondary` 來說是 `var(--scnp-text)`，接近黑的 #1f2328，
 *      所以那道底線是黑的。
 *   3. **權重打平**：`:where()` 不計權重，所以對方那條只有 `[data-link=type-4]` 的
 *      (0,1,0)，而我們的 `.scnp-button--secondary { background: none }` 也是 (0,1,0)。
 *      同分時由載入順序決定，主題晚載入就蓋過我們。
 *
 * 所以這裡用 `.scnp-page` 前綴把權重拉到 (0,2,0)，不必靠載入順序碰運氣，
 * 也一次涵蓋所有 np-cart 按鈕（不只感謝頁那兩顆）。
 *
 * ★ 只關掉 background-image 與 background-size，**不要動 background-color**：
 *   主要按鈕的紅底就是靠 `.scnp-button` 的 background 簡寫來的，一起關會變透明。
 */
.scnp-page .scnp-button {
	background-image: none;
	background-size: auto;
}

/* =========================================================================
 * 18. 響應式
 *
 * 行動優先。以下只在螢幕變寬時「加東西」，375px 一律是單欄 ／ 兩欄。
 * ====================================================================== */

@media (min-width: 480px) {
	.scnp-amount-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.scnp-progress-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.scnp-summary-row {
		flex-wrap: nowrap;
	}
}

@media (min-width: 640px) {
	.scnp-hero-inner {
		padding-left: 24px;
		padding-right: 24px;
	}

	.scnp-hero-title {
		font-size: 2em;
	}

	.scnp-hero--image-bg {
		min-height: 300px;
	}

	.scnp-hero--image-bg .scnp-hero-inner {
		min-height: 300px;
		padding-top: 110px;
	}

	.scnp-step-body {
		padding: 24px 22px;
	}

	.scnp-progress {
		padding: 22px 24px;
	}

	.scnp-campaign-row {
		grid-template-columns: 8.5em 1fr;
	}

	.scnp-campaign-key,
	.scnp-campaign-label {
		font-size: 0.88em;
	}

	.scnp-stepper-label,
	.scnp-stepper-title {
		font-size: 0.85em;
	}

	/*
	 * ★★ 640px 以上把左右留白放大，改的是變數，不是 padding ★★
	 *
	 * 寫死 `.scnp-main` 的 padding 會把 `--scnp-page-gutter` 蓋掉，而第 19 節
	 * 寬螢幕的 `max-width` 計算仍然讀 `.scnp-page` 上那個 16px。兩邊一漂移，
	 * 捐款頁的內容邊緣就會比主題的 `.ct-container` **各窄 8px**，
	 * 而畫面上只會「有點怪」，沒有人講得出哪裡怪。
	 *
	 * 2026-09-02 在測試站用 headless 量到的就是這件事：
	 * 主題容器內容邊緣 1290、捐款頁 1274、左緣 155 對 163。
	 * 變數的宣告處（本檔案 .scnp-page）白紙黑字承諾過「兩處不會漂移」，
	 * 這一段就是讓那句話重新成立。
	 */
	.scnp-page {
		--scnp-page-gutter: 24px;
	}

	.scnp-hero--image-bg.no-image .scnp-hero-inner,
	.scnp-hero--image_bg.no-image .scnp-hero-inner {
		padding-bottom: 36px;
		padding-top: 44px;
	}

	.scnp-progress-track {
		height: 20px;
	}

	.scnp-summary-label {
		min-width: 7em;
	}

	.scnp-nav {
		flex-wrap: nowrap;
	}

	.scnp-next {
		flex: 1 1 auto;
	}
}

@media (min-width: 900px) {
	.scnp-hero--side-by-side .scnp-hero-inner,
	.scnp-hero--side_by_side .scnp-hero-inner {
		align-items: center;
		display: grid;
		gap: 28px;
		grid-template-columns: 1fr 1fr;
	}

	.scnp-hero--side-by-side .scnp-hero-media,
	.scnp-hero--side_by_side .scnp-hero-media {
		aspect-ratio: 4 / 3;
	}
}

/* 尊重使用者的減少動態偏好。 */
@media (prefers-reduced-motion: reduce) {
	.scnp-progress .scnp-progress-bar-fill,
	.scnp-progress-fill,
	.scnp-progress-ring-fill,
	.scnp-amount,
	.scnp-stepper-item::before,
	.scnp-login-toggle::after {
		transition-duration: 1ms;
	}

	.scnp-submit.is-busy::after {
		animation-duration: 3s;
	}
}

/* 列印時把互動元素收掉，只留摘要。 */
@media print {
	.scnp-stepper,
	.scnp-nav,
	.scnp-submit,
	.scnp-submit-row,
	.scnp-turnstile,
	.scnp-summary-action,
	.scnp-hp,
	.scnp-login {
		display: none;
	}

	.scnp-steps[data-layout="wizard"] .scnp-step {
		position: relative;
		visibility: visible;
	}
}

/* =========================================================================
 * 19. 兩欄版面
 *
 * 桌機（900px 以上）：左欄 2 ／ 右欄 1，右欄 sticky。
 * 行動裝置（900px 以下）：單欄，順序即 page.php 的 DOM 順序
 *     主視覺 → 募款進度 → 捐款流程 → 專案文案 → 勸募資訊
 * 捐款流程刻意排在專案文案之前：手機上不該讓人捲很久才看得到捐款區。
 *
 * ★ 這一節不使用任何 `order` 或 `display: contents` 來重排。
 *   DOM 順序本身就是正確的閱讀順序，桌機只是把第 1、3 塊排進同一欄。
 *   鍵盤 Tab 與螢幕閱讀器走的是 DOM 順序，用視覺順序去騙它們一定會出事。
 * ====================================================================== */

/* ---------- 19.1 骨架 ---------- */

.scnp-columns {
	display: flex;
	flex-direction: column;
	gap: var(--scnp-gap-lg);
	min-width: 0;
	width: 100%;
}

.scnp-col {
	min-width: 0;
	width: 100%;
}

/*
 * 通知在兩欄之上、整幅寬。
 * 第 17 節把它限制在 --scnp-max-width，兩欄版面下會變成一條窄帶浮在左上角，
 * 這裡放寬成跟著 .scnp-main 走。
 */
.scnp-main .scnp-notices {
	max-width: 100%;
}

/* ---------- 19.2 主視覺（收進左欄之後） ---------- */

/*
 * hero 從「整頁滿版橫幅」改成「左欄裡的一張卡」。
 * 有精選圖時做成圓角卡片，沒有圖時完全不做卡：
 * no-image 的底色是 --scnp-bg-soft，在同樣淺色的頁面上做成卡片只會多一圈
 * 看不出用途的灰邊，標題直接落在欄位頂端反而乾淨。
 */
.scnp-col--lead .scnp-hero {
	border-radius: var(--scnp-radius-lg);
	margin-bottom: var(--scnp-gap);
	overflow: hidden;
}

.scnp-col--lead .scnp-hero-inner {
	max-width: 100%;
}

.scnp-col--lead .scnp-hero.no-image {
	background: none;
	border-radius: 0;
	overflow: visible;
}

.scnp-col--lead .scnp-hero.no-image .scnp-hero-inner {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

/* ---------- 19.3 募款進度：把目標金額做成視覺重點 ---------- */

/*
 * 客戶要的「醒目」在這裡完成。
 *
 * 手法只有三個，全部是排版而不是特效：字級落差（主角約 2.4em、
 * 次要統計約 1.0em）、主色只給主角一個人用、以及一條有份量的進度條。
 * 不用漸層背景、不用陰影堆疊、不用動畫，基金會的募款頁靠可信度而不是花俏，
 * 而「看起來很像廣告」正是捐款頁最貴的錯誤。
 */
.scnp-progress .scnp-progress-headline {
	margin: 0 0 var(--scnp-gap);
	min-width: 0;
}

.scnp-progress .scnp-progress-lead-label {
	color: var(--scnp-text-muted);
	font-size: 0.92em;
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin: 0 0 2px;
}

.scnp-progress .scnp-progress-lead {
	margin: 0;
	min-width: 0;
}

.scnp-progress .scnp-progress-lead-value {
	color: var(--scnp-primary);
	display: block;
	font-size: 2.35em;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.scnp-progress .scnp-progress-goal-line {
	align-items: baseline;
	color: var(--scnp-text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.95em;
	gap: 0 8px;
	line-height: 1.5;
	margin: 10px 0 0;
	min-width: 0;
}

.scnp-progress .scnp-progress-goal-value {
	color: var(--scnp-text);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/*
 * ★ 中和第 3 節的 `.scnp-progress-num`（display: block ＋ font-size: 1.3em）。
 *
 * 1.4.0 起數字被包成 `.scnp-stat-value` 或 `.scnp-progress-goal-line` 裡的
 * 一個 span，兩層 em 會相乘：1.28em × 1.3em ≈ 1.66em，次要統計會長得比
 * 主角還搶眼，整個視覺層級反過來。字級一律由外層那一層決定。
 */
.scnp-progress .scnp-stat-value .scnp-progress-num,
.scnp-progress .scnp-progress-goal-line .scnp-progress-num {
	display: inline;
	font-size: 1em;
	font-weight: inherit;
	line-height: inherit;
}

/* ---------- 19.3.1 步驟指示器：尚未解鎖的格子 ---------- */

/*
 * 只是視覺預告，不是禁用。真正的把關在 np-cart.js 的 goToStep()：
 * 它從目前這一步開始逐步驗證，第一個沒過的就地停下。
 * 這裡刻意不用 `pointer-events: none`，否則捐款人明明前面都填完了、
 * 想直接跳到第 4 步卻點不動，那是一條看不出原因的死路。
 */
.scnp-stepper-item.is-locked .scnp-stepper-button {
	cursor: default;
}

.scnp-stepper-item.is-locked .scnp-stepper-number,
.scnp-stepper-item.is-locked .scnp-stepper-title {
	opacity: 0.55;
}

.scnp-progress .scnp-progress-meter {
	align-items: center;
	display: flex;
	gap: 12px;
	margin: 0 0 var(--scnp-gap);
	min-width: 0;
}

.scnp-progress .scnp-progress-meter .scnp-progress-track {
	flex: 1 1 auto;
	height: 16px;
	margin: 0;
	min-width: 0;
}

.scnp-progress .scnp-progress-percent {
	color: var(--scnp-primary);
	flex: 0 0 auto;
	font-size: 1.05em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin: 0;
	min-width: 3.4em;
	text-align: right;
}

/* 次要統計與主角之間拉一條線，視覺層級才不會打架。 */
.scnp-progress .scnp-progress-stats {
	border-top: 1px solid var(--scnp-border);
	margin: 0;
	padding-top: 14px;
}

/*
 * 骨架階段（is-loading）與拿不到數字時（is-unavailable）一律用最淡的字色。
 * 主角是主色、其他是文字色，若不統一壓淡，佔位符會先閃一次紅色大字。
 */
.scnp-progress.is-loading .scnp-progress-lead-value,
.scnp-progress.is-loading .scnp-progress-goal-value,
.scnp-progress.is-loading .scnp-progress-percent,
.scnp-progress.is-unavailable .scnp-progress-lead-value,
.scnp-progress.is-unavailable .scnp-progress-goal-value,
.scnp-progress.is-unavailable .scnp-progress-percent {
	color: var(--scnp-text-faint);
}

/* ---------- 19.4 專案詳細文案 ---------- */

/*
 * 內容來自區塊編輯器，標籤組合無法預期，所以只做三件事：
 * 首尾邊界歸零、媒體不得撐破欄寬、表格自己橫向捲。
 * 其餘排版交給主題，避免和站台既有的內文樣式打架。
 */
.scnp-content {
	margin-bottom: var(--scnp-gap-lg);
	min-width: 0;
}

.scnp-content-title {
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 12px;
}

.scnp-content-body {
	line-height: 1.85;
	min-width: 0;
	overflow-wrap: anywhere;
}

.scnp-content-body > :first-child {
	margin-top: 0;
}

.scnp-content-body > :last-child {
	margin-bottom: 0;
}

.scnp-content-body img,
.scnp-content-body video,
.scnp-content-body iframe {
	height: auto;
	max-width: 100%;
}

/* 寬表格自己捲，不讓整頁在 375px 出現橫向捲動。 */
.scnp-content-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ---------- 19.5 右欄標題 ---------- */

.scnp-form-title {
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 var(--scnp-gap);
}

/* ---------- 19.6 桌機：兩欄 ＋ sticky 右欄 ---------- */

/*
 * ★ 刻意寫成 `screen and`。
 *
 * 不指定 media type 的 `@media (min-width: 900px)` 在列印時同樣會命中
 * （紙張寬度換算後多半大於 900px），而這一段裡有 `overflow: hidden`
 * 與 `max-height`，套到列印上會把捐款摘要裁掉一半。
 * 第 18 節結尾的 `@media print` 負責列印，兩者不可互相踩線。
 */
@media screen and (min-width: 900px) {

	/*
	 * ★ 要加上左右留白才會跟主題的內容邊緣切齊。
	 *
	 * 主題的 `.ct-container` 沒有內距，靠 `width: min(100%, base)` 做留白，
	 * 所以它的**內容邊緣**就落在 1290px 的兩端。
	 * 而 `.scnp-main` 有 `--scnp-page-gutter` 的左右內距加上 `box-sizing: border-box`，
	 * 若把 max-width 直接設成 1290px，內容會變成 1290 減去兩側內距，
	 * 比專案頁窄一個內距的寬度，看起來就是「差一點點」。
	 */
	.scnp-main {
		max-width: calc( var(--scnp-max-width-wide) + var(--scnp-page-gutter) * 2 );
	}

	/*
	 * grid-template-areas 讓 form 一格橫跨兩列，
	 * 左欄則是 lead 在上、content 在下。
	 * 用具名區域而不是 grid-column ／ grid-row 數字，是因為之後若要插入
	 * 第四塊（例如捐款人牆）只要改這三行字，不必重算每一塊的行號。
	 */
	.scnp-columns {
		align-items: start;
		display: grid;
		gap: 0 var(--scnp-col-gap);
		grid-template-areas:
			"lead form"
			"content form";
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.scnp-col--lead {
		grid-area: lead;
	}

	.scnp-col--content {
		grid-area: content;
	}

	/*
	 * ★★★ 右欄 sticky ＋ 自帶捲動 ★★★
	 *
	 * sticky 的容器塊就是這一格 grid area（橫跨 lead ＋ content 兩列），
	 * 所以捐款人一路往下讀專案內容時，捐款流程都留在視野裡。
	 *
	 * max-height ＋ overflow-y 不是裝飾，是必要的：實測第 4 步（摘要 ＋
	 * 個資聲明 ＋ 人機驗證 ＋ 送出）高度可達 1100px，超過大多數筆電的視窗高。
	 * 沒有這兩行的話，元素會黏在 top: 24px 而下緣永遠捲不到，
	 * 症狀是「送出按鈕看得到卻按不到」。
	 *
	 * ★ 為什麼捲動容器不會害到第三方 iframe：
	 *   手冊坑五談的是 `display: none`（元素根本不被 render）。
	 *   overflow 捲動容器不改變任何子元素的版面尺寸，金流 SDK 與 Turnstile
	 *   照樣量得到寬高。另外這裡刻意不用 `transform` ／ `filter` ／
	 *   `will-change`，那三個會讓 `position: fixed` 的子孫改以本元素為容器塊，
	 *   Turnstile 的互動挑戰浮層就會被關進這個小框裡出不來。
	 */
	.scnp-col--form {
		grid-area: form;
		max-height: calc(100vh - (var(--scnp-sticky-top) * 2));
		overflow-x: hidden;
		overflow-y: auto;
		padding: 2px 4px;
		position: sticky;
		scrollbar-gutter: stable;
		top: var(--scnp-sticky-top);
	}

	/*
	 * ★★★ wizard 離場步驟：只在「右欄是捲動容器」時才裁切 ★★★
	 *
	 * 離場機制本身完全不動，仍然是 order ＋ visibility: hidden ＋
	 * position: absolute,**絕對不是 display: none**（手冊坑五）。
	 *
	 * 這裡補的是捲動容器帶來的副作用：絕對定位的離場步驟仍然會把自己的
	 * 自然高度算進捲動容器的 scrollHeight。第 2 步約 550px、第 4 步約 1100px，
	 * 於是停在第 1 步時右欄會出現一條「捲下去什麼都沒有」的捲軸。
	 *
	 * 解法是把離場步驟拉成與 .scnp-steps 等高（top: 0 ＋ bottom: 0）並就地裁切：
	 *   - 高度仍然大於 0，不是 display: none 也不是 height: 0，
	 *     裡面的金流 SDK 與 Turnstile 照樣量得到寬高。
	 *   - 超出的部分被裁掉但不撐出捲動高度，幽靈捲軸消失。
	 *   - 只裁「離場的那幾步」，目前這一步完全不受影響（下面那條把它復原），
	 *     所以焦點外框、卡片陰影、下拉選單都不會被切到。
	 */
	.scnp-col--form .scnp-steps[data-layout="wizard"] .scnp-step {
		bottom: 0;
		overflow: hidden;
	}

	.scnp-col--form .scnp-steps[data-layout="wizard"] .scnp-step.is-active {
		bottom: auto;
		overflow: visible;
	}

	/* 兩欄之下左欄變窄，主角數字跟著收一級，免得在 2fr 欄裡折行。 */
	.scnp-progress .scnp-progress-lead-value {
		font-size: 2.6em;
	}
}

/* 更寬的螢幕再放大一級，左欄有空間就給它。 */
@media screen and (min-width: 1200px) {
	.scnp-progress .scnp-progress-lead-value {
		font-size: 2.9em;
	}
}

/* ---------- 19.7 列印 ---------- */

/*
 * 兩欄在紙上沒有意義（右欄的捲動與 sticky 都不存在），一律拆成單欄。
 */
@media print {
	.scnp-columns {
		display: block;
	}

	.scnp-col--form {
		max-height: none;
		overflow: visible;
		position: static;
	}
}

/* =========================================================================
 * 20. 感謝頁
 *
 * 這一節的樣式跑在 WooCommerce 原生 order-received 頁面**之內**，
 * 上面還有主題與 YSCO 的東西（成功訊息、訂單摘要列、金流的匯款資訊）。
 * 所以這裡只做兩件事：
 *
 *   1. 把自家區塊圈成一張自成一格的卡片，讓捐款人一眼看得出「這一段
 *      在講我的捐款」，而不是散在主題的段落之間。
 *   2. 金額是這一頁唯一該搶眼的數字。其餘一律安靜。
 *
 * 不去對齊、也不去覆寫上面那些第三方區塊：那等於把樣式押在別人的 DOM 上，
 * 對方一改版就整頁走鐘，而且外觀壞掉不會有任何錯誤訊息。
 *
 * 容器帶 `.scnp-page`，所有 CSS 變數的宿主就在自己身上，
 * 不依賴頁面上任何其他元素。
 * ====================================================================== */

.scnp-thankyou {
	background: var(--scnp-bg);
	border: 1px solid var(--scnp-border);
	border-radius: var(--scnp-radius-lg);
	margin: var(--scnp-gap-lg) auto 0;
	max-width: var(--scnp-max-width);
	padding: 24px 20px;
}

.scnp-thankyou-title {
	color: var(--scnp-text);
	font-size: 1.5em;
	line-height: 1.35;
	margin: 0 0 12px;
}

.scnp-thankyou-message {
	color: var(--scnp-text);
	margin: 0 0 var(--scnp-gap);
}

.scnp-thankyou-message p {
	margin: 0 0 0.8em;
}

.scnp-thankyou-message p:last-child {
	margin-bottom: 0;
}

/* ---------- 20.1 事實列 ---------- */

/*
 * `dl` 用 grid 排，標籤與值各佔一欄。
 *
 * 不用 float 也不用固定寬度：標籤長度會被站長改（文案全部可覆寫），
 * 寫死寬度的版面遲早會在某個站上折行折在奇怪的位置。
 */
.scnp-thankyou-facts {
	background: var(--scnp-bg-soft);
	border-radius: var(--scnp-radius);
	display: grid;
	gap: 10px;
	margin: 0 0 var(--scnp-gap);
	padding: 16px;
}

.scnp-thankyou-fact {
	align-items: baseline;
	display: grid;
	gap: 2px 16px;
	grid-template-columns: 1fr;
}

.scnp-thankyou-fact-label {
	color: var(--scnp-text-muted);
	font-size: 0.9em;
	margin: 0;
}

.scnp-thankyou-fact-value {
	color: var(--scnp-text);
	font-weight: 700;
	margin: 0;
	overflow-wrap: anywhere;
}

/* 捐款編號是要拿去對帳的，等寬數字比較好念也比較好比對。 */
.scnp-thankyou-fact--order .scnp-thankyou-fact-value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* 金額是這一頁唯一的主角。 */
.scnp-thankyou-fact--amount .scnp-thankyou-fact-value {
	color: var(--scnp-primary);
	font-size: 1.5em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* ---------- 20.2 狀態（付款方式決定語氣） ---------- */

/*
 * 已完成與待轉帳用不同的顏色帶，而不是只有文字不同。
 *
 * ATM 捐款人在這一步最容易誤以為「已經捐好了」，那條左邊的色帶
 * 是他掃過整頁時唯一會停下來的視覺提示。
 */
.scnp-thankyou-status {
	border-left: 3px solid var(--scnp-border-strong);
	border-radius: var(--scnp-radius-sm);
	margin: 0 0 var(--scnp-gap);
	padding: 12px 14px;
}

.scnp-thankyou-status.is-paid {
	background: rgba(26, 127, 75, 0.08);
	border-left-color: var(--scnp-success);
}

.scnp-thankyou-status.is-pending {
	background: var(--scnp-accent-soft);
	border-left-color: var(--scnp-accent);
}

/*
 * 沒有成立的捐款（已取消、已退款）。
 *
 * ★ 不沿用 is-pending 的強調色 ★
 * 那是「還差一步」的語氣，會讓捐款人以為再做一件事就好，而這一筆已經終局了。
 *
 * ★ 也不用 --scnp-danger 的錯誤紅 ★
 * 取消不是故障。對捐款人喊錯誤，他會以為是自己操作失敗、進而再捐一次。
 * 用警示色的低透明度底加同色左框：掃頁時停得下來，語氣是「這件事沒有成立」。
 * 這一態最需要色帶：整頁最上方那句抬頭是印在核心的綠色成功底色裡的，
 * 我們這一塊若退回中性灰，全頁最強的視覺訊號仍然會是「成功」。
 *
 * ★★ 這四個狀態 class 是模板用 'is-' . $scnp_state 組出來的 ★★
 * 原始碼裡沒有字面，check-css-scope.sh 與 check-front-assets.sh 都掃不到
 * 「哪一態沒有色帶」。新增第五態時要回來補這裡，
 * test-thankyou.php 第 9 節逐一比對 Thankyou::states() 與這一段。
 */
.scnp-thankyou-status.is-cancelled,
.scnp-thankyou-status.is-refunded {
	background: rgba(138, 97, 0, 0.1);
	border-left-color: var(--scnp-warning);
}

/*
 * 「上面那組匯款帳號已經作廢」。
 *
 * 與 .scnp-thankyou-hint 分開：那一句是補充說明（灰、小字），
 * 這一句是要攔住一個正要去匯款的人，字級不縮、顏色不淡。
 */
.scnp-thankyou-stale {
	color: var(--scnp-warning);
	font-weight: 600;
	margin: 8px 0 0;
}

.scnp-thankyou-status-note {
	color: var(--scnp-text);
	font-weight: 600;
	margin: 0;
}

.scnp-thankyou-hint {
	color: var(--scnp-text-muted);
	font-size: 0.92em;
	margin: 8px 0 0;
}

/* ---------- 20.3 收據 ---------- */

.scnp-thankyou-receipt {
	border-top: 1px solid var(--scnp-border);
	margin: 0;
	padding: var(--scnp-gap) 0 0;
}

.scnp-thankyou-receipt-title {
	color: var(--scnp-text);
	font-size: 1.05em;
	margin: 0 0 6px;
}

.scnp-thankyou-receipt-note {
	color: var(--scnp-text-muted);
	margin: 0;
}

/*
 * 第三方掛件（例如收據下載按鈕）的落點。
 *
 * 它是與收據區塊平行的獨立區塊，不是收據區塊的一部分：沒有收據說明的訂單
 * 一樣要看得到這裡的內容（理由見 templates/donation/thankyou.php）。
 * 所以間距用整頁共用的 --scnp-gap，前面有沒有收據區塊看起來都一樣勻。
 * 只給間距，不去規定裡面長什麼樣子：那是別人的 DOM。
 */
.scnp-thankyou-extra {
	margin: var(--scnp-gap) 0 0;
}

/* ---------- 20.4 出口 ---------- */

.scnp-thankyou-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: var(--scnp-gap-lg) 0 0;
}

.scnp-thankyou-actions .scnp-button {
	flex: 1 1 auto;
	text-align: center;
}

/* ---------- 20.5 寬螢幕 ---------- */

@media (min-width: 560px) {

	.scnp-thankyou {
		padding: 32px 28px;
	}

	/* 有空間之後標籤與值排成兩欄，一眼掃得完。 */
	.scnp-thankyou-fact {
		grid-template-columns: minmax(0, 8em) minmax(0, 1fr);
	}

	.scnp-thankyou-fact-value {
		text-align: right;
	}

	/* 按鈕不再撐滿：兩顆各自貼齊左邊，不做成一整條大色塊。 */
	.scnp-thankyou-actions .scnp-button {
		flex: 0 0 auto;
	}
}

/* ---------- 20.6 列印 ---------- */

/*
 * 捐款人常常直接列印這一頁當成暫時的憑證（收據要等入帳後才開）。
 * 出口按鈕在紙上沒有意義，陰影與底色只會浪費碳粉。
 */
@media print {

	.scnp-thankyou {
		border-color: #999999;
		box-shadow: none;
		max-width: none;
		padding: 0;
	}

	.scnp-thankyou-actions {
		display: none;
	}

	.scnp-thankyou-facts {
		background: none;
		border: 1px solid #cccccc;
	}
}