/* =====================================================================
   FLOAT 訂單追蹤（測試版型）
   ---------------------------------------------------------------------
   配色與幾何沿用**隱私權政策測試頁**的統一規格（2026-09-03 老闆定的）：
     page #000 ／ panel #fff ／ ink #000 ／ muted #6b6b6b
     圓角 26px ／ 間隙 3px ／ 內距 30px
   跟 float-contact-page 是同一套 token，兩頁並排看必須是同一個系統。
   ===================================================================== */

.float-tracking-page .ft {
	--ft-r: 26px;
	--ft-p: 30px;
	--ft-g: 3px;
	--ft-page: #000;
	--ft-panel: #fff;
	--ft-ink: #000;
	--ft-muted: #6b6b6b;
	--ft-face: "PingFang TC", "Hiragino Maru Gothic ProN", "Microsoft JhengHei",
		"Noto Sans TC", system-ui, sans-serif;
	--ft-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	background: var(--ft-page);
	color: var(--ft-ink);
	padding: var(--ft-g);
	font-family: var(--ft-face);
}

.float-tracking-page .ft *,
.float-tracking-page .ft *::before,
.float-tracking-page .ft *::after { box-sizing: border-box; }

/* 頁面比視窗矮時底下會露出 Blocksy 的米色 body（聯絡頁踩過）。 */
body.float-tracking-page { background: #000; }

.ft__bar {
	background: var(--ft-panel);
	border-radius: var(--ft-r);
	padding: 26px var(--ft-p);
	margin-bottom: var(--ft-g);
	display: flex;
	justify-content: center;
}

.ft__title {
	margin: 0;
	color: var(--ft-ink);
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.3;
	font-weight: 900;
	letter-spacing: .02em;
}

/* 表單那欄比說明欄寬 —— 表單是主角，說明是備援。 */
.ft__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--ft-g);
	align-items: stretch;
}

.ft__grid--result { grid-template-columns: minmax(0, 1fr); }

.ft__b {
	background: var(--ft-panel);
	color: var(--ft-ink);
	border-radius: var(--ft-r);
	padding: var(--ft-p);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.ft__h {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.25;
	font-weight: 900;
	color: inherit;
}

.ft__p {
	margin: 0;
	font-size: 15px;
	line-height: 1.85;
	max-width: 48ch;
}

/* ── 「查不到？」 ────────────────────────────────────────────────── */
.ft__faq { margin: 0; }

.ft__faq dt {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.6;
	margin-top: 18px;
}

.ft__faq dt:first-child { margin-top: 0; }

.ft__faq dd {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--ft-muted);
	max-width: 44ch;
}

.ft__faq a {
	color: var(--ft-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-skip-ink: none;   /* orders@ 的 d 會把底線挖斷 */
	word-break: break-all;
}

/* ── WooCommerce 的表單與查詢結果 ─────────────────────────────────
   只調外觀，不動它的結構——那是正式頁也在用的同一支樣板。

   ⚠️ 選擇器一定要帶 `.float-tracking-page`（body class）。
   只寫 `.ft__wc button` 的話會輸給主題的按鈕規則：實測按鈕算出來是
   透明底、灰字、1.11px 邊框，完全不是我寫的黑底白字。 */
.float-tracking-page .ft__wc { font-size: 15px; }

.float-tracking-page .ft__wc .track_order p { margin: 0 0 14px; }

.float-tracking-page .ft__wc label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ft-ink);
}

.float-tracking-page .ft__wc input[type="text"],
.float-tracking-page .ft__wc input[type="email"] {
	width: 100%;
	background: #fff;
	border: 2px solid var(--ft-ink);
	border-radius: 10px;
	padding: 11px 14px;
	font-family: var(--ft-face);
	font-size: 15px;
	color: var(--ft-ink);
}

.float-tracking-page .ft__wc input::placeholder { color: #9a9a9a; }

.float-tracking-page .ft__wc button,
.float-tracking-page .ft__wc .button {
	background: var(--ft-ink);
	color: var(--ft-panel);
	border: 2px solid var(--ft-ink);
	border-radius: 999px;
	padding: 11px 30px;
	font-family: var(--ft-face);
	font-size: 15px;
	font-weight: 900;
	cursor: pointer;
}

.float-tracking-page .ft__wc .form-row-first,
.float-tracking-page .ft__wc .form-row-last { width: 100%; float: none; }

.float-tracking-page .ft__wc .clear { clear: both; }

/* 查詢結果：狀態句與訂單表格 */
.float-tracking-page .ft__wc .order-info {
	font-size: 16px;
	line-height: 1.8;
	font-weight: 700;
}

.float-tracking-page .ft__wc mark {
	background: #fde845;
	color: var(--ft-ink);
	padding: 0 4px;
}

.float-tracking-page .ft__wc table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.float-tracking-page .ft__wc table th,
.float-tracking-page .ft__wc table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
	vertical-align: top;
}

/* ⚠️ float-shipping-tracker 自己寫的是 `"Noto Serif TC", serif`，
   站上其他地方都是黑體。這裡蓋成黑體**只是讓你看到改完長怎樣** ——
   真正要修的是那支外掛（它是正式外掛、線上啟用中），不是這裡。 */
.float-tracking-page .float-stk,
.float-tracking-page .float-stk * { font-family: var(--ft-face); }

.float-tracking-page .float-stk-title {
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--ft-muted);
}

@media (max-width: 900px) {
	.float-tracking-page .ft { --ft-p: 22px; --ft-r: 20px; }
	.ft__grid { grid-template-columns: 1fr; }
}

/* 高螢幕填滿 —— 測試頁與正式 order-tracking 共用。沿用 float-shell 已分配給
   #main-container 的剩餘高度，讓兩張內容卡吸收；不放大文字。 */

/* =====================================================================
   版面填滿：讓內容區永遠撐到視窗底，頁尾自然接在後面
   ---------------------------------------------------------------------
   ⚠️ 不加任何 @media 條件。

   2026-09-03 codex 版本把這組規則鎖在
   `@media (min-width:1081px) and (min-height:900px)`，
   等於**高度低於 900 的螢幕完全沒有保險**（筆電多半是 768–900），
   而「內容短、螢幕高」正是會露出空白的情況。條件式的保險等於沒有保險。

   做法：從主容器到內容根節點整條鏈設成 flex 直向、內容那格 flex:1，
   內容比視窗矮的時候由它撐開，不會在中間或底部留下死白。
   內容本來就比視窗高的時候，這組規則沒有任何作用。
   ===================================================================== */
body.float-tracking-page--fill #main-container,
body.float-tracking-page--fill .site-main,
body.float-tracking-page--fill .site-main > [class*="ct-container"],
body.float-tracking-page--fill .site-main article,
body.float-tracking-page--fill .site-main .entry-content,
body.float-tracking-page--fill .ft {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

body.float-tracking-page--fill .site-main,
body.float-tracking-page--fill .site-main > [class*="ct-container"],
body.float-tracking-page--fill .site-main article,
body.float-tracking-page--fill .site-main .entry-content,
body.float-tracking-page--fill .ft,
body.float-tracking-page--fill .ft__grid {
	flex: 1 1 auto;
}