/* =========================================================================
   liaise.css — 聯絡表單（楓庵 YUAN·AN ONSEN 佈景 / demo_D 階段 5）
   設計稿：參考資料/demo_D/design/YuanAn Liaise.dc.html
   只在 liaise 模組頁載入（theme.tpl 用 $xoops_dirname == 'liaise' 判斷）。

   ⚠ 前綴一律 `.ya-lia-`，刻意避開 news 的 .ya-nw-／.ya-art-、
     cadch 的 .ya-cd-、home.css 的 .ya-*。

   🔴 這支要處理一件前面幾個階段沒遇過的事：
      **欄位的 HTML 不是我們寫的**。liaise 用 `XoopsFormRendererBootstrap5`
      （include/form_render.php:53-54）產生 `<input class="form-control">`、
      `<select class="form-select">`、`<div class="form-check">` 這些 Bootstrap 5
      的結構。我們只能從外面覆寫，不能改結構（改結構＝改模組）。
      → 所有覆寫集中在本檔最後的「Bootstrap 5 欄位覆寫」一節。

   🔴 與 style.css 第 2 節「全站無圓角」的關係：
      那條重置是 `.ya-body :where(...)` ＝ (0,1,0)。本檔整個載入在 style.css
      之後，所以這裡的 (0,1,0) 規則都蓋得過去，要圓角直接寫即可。
      （2026-09-03 修過那條的特異性，詳見工作規則與進度.md B 段。）
   ========================================================================= */

/* ── 1. 外框 ─────────────────────────────────────────────────────────── */
.ya-lia { position: relative; }

/* ── 2.（已刪）形象帶 ─────────────────────────────────────────────
   `.ya-lia-band` 及其後代於 2026-09-03 刪除 —— 使用者裁示 liaise 兩頁不做形象帶。
   ♻ 還原：`css/liaise.css.band.bak`（樣式）、`modules/liaise/*.band.bak`（樣板）、
      `theme_autorun.php.band.bak`（餵圖程式）。
   ⚠ 節號刻意不重編 —— 其他文件（工作規則與進度.md）引用「第 12 節 BS5 欄位覆寫」
      這種編號，重編會讓那些指路全部失效。 */

/* ── 3. 版面：表單 ＋ 側欄（設計稿 365–367 行）───────────────────── */
.ya-lia-wrap {
	max-width: var(--ya-wrap);
	margin: 0 auto;
	padding: clamp(2.2rem, 4vw, 3rem) var(--ya-pad-x) clamp(4rem, 8vw, 6rem);
}
/* 🔴 2026-09-03：使用者裁示**表單頁與錯誤頁都移除右側欄**，這裡因此從
   `minmax(0,1fr) 300px` 兩欄改成單欄。原本兩頁共用時曾短暫用過
   `.ya-lia-grid--full` 修飾字，兩頁都單欄之後就沒有存在意義，已收回。
   ⚠ 之所以保留 grid（而不是拿掉整個容器）：`gap` 與 `align-items` 仍在用，
     日後若有第三種 liaise 頁要側欄，加修飾字比重建結構省事。 */
.ya-lia-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}
.ya-lia-main { min-width: 0; }

/* ── 4. 表單抬頭 ──────────────────────────────────────────────────
   🔴 2026-09-03 改版（使用者裁示）：原本抄的是設計稿 **368 行**那個
      「英中同一行＋底部分隔線」的內層抬頭；改成抄 **349–354 行** ——
      也就是表單填寫頁「Room enquiry ／ 訂房詢問」那顆頁面抬頭：
        · 最上方一條**左濃右淡的漸層細線**
        · 線的左端壓一顆**菱形**（正方形轉 45 度）
        · 英文眉標與中文標題**各佔一行**
   ⚠ 兩個裝飾都用 ::before／::after 做，**樣板一行都沒改**。
   ⚠ 漸層與菱形的顏色：漸層保留設計稿的**字面 rgba**（不做 palette 映射，
     見陷阱備忘）；菱形的 `#BE8574` 剛好等於 `--ya-ac`，這個才用變數。
   ⚠ 底部分隔線**刻意拿掉** —— 設計稿那顆抬頭沒有，而且下方第一個區段小標
     `.ya-lia-sec` 本來就自帶一條橫線，兩條疊在一起會很吵。 */
.ya-lia-head {
	position: relative;
	padding-top: 1.3rem;
	margin-bottom: 2rem;
}
/* 頂端漸層細線：左端玫瑰金 → 中段淡藍 → 右端透明 */
.ya-lia-head::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 1px;
	background: linear-gradient(90deg, rgba(190,133,116,.6) 0%, rgba(31,78,107,.1) 55%, transparent 100%);
}
/* 線左端的菱形。top 的 -.24rem ≈ 邊長 .44rem 的一半，讓它**騎在線上**置中。 */
.ya-lia-head::after {
	content: '';
	position: absolute;
	top: -.24rem; left: 0;
	width: .44rem; height: .44rem;
	background: var(--ya-ac);
	transform: rotate(45deg);
}
/* 英文眉標自成一行。⚠ `<p>` 本來就是 block，但寫明 display 才不怕日後
   樣板改成 <span>（news 的眉標就吃過這個虧）。 */
.ya-lia-head__en {
	display: block;
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .28em;
	font-size: .72rem;
	text-transform: uppercase;
	color: var(--ya-ac);
}
/* 中文標題另起一行。⚠ 元素上同時有 `class="h2"`，但 liaise.css 載入在
   style.css 之後、特異性同為 (0,1,0)，所以這裡的字級蓋得過去。 */
.ya-lia-head__zh {
	display: block;
	margin: .2rem 0 0;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	letter-spacing: .08em;
	line-height: 1.45;
	color: var(--ya-ink);
}
.ya-lia-head__note {
	margin: .8rem 0 0;
	max-width: 54ch;
	font-size: .9rem;
	line-height: 2;
	color: var(--ya-muted);
	text-wrap: pretty;
}

/* ── 5. 導言 ／ 全域說明 ─────────────────────────────────────────── */
.ya-lia-intro {
	margin: 0 0 1.8rem;
	font-size: .92rem;
	line-height: 2;
	color: var(--ya-body-2);
	text-wrap: pretty;
}
.ya-lia-note {
	margin: 1.6rem 0 0;
	font-size: .82rem;
	color: var(--ya-muted);
}

/* ── 6. 區段分隔（由 liaise 的 `html` 型別欄位擔任，見樣板註解）──── */
.ya-lia-sec {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 2.4rem 0 1.4rem;
}
.ya-lia-sec:first-child { margin-top: 0; }
.ya-lia-sec__no {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 1px solid var(--ya-ac);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--ya-en);
	font-size: .85rem;
	color: var(--ya-ac);
}
.ya-lia-sec__label {
	font-family: var(--ya-serif);
	font-size: 1.05rem;
	color: var(--ya-ink);
	letter-spacing: .04em;
}
.ya-lia-sec__rule { flex: 1 1 auto; height: 1px; background: var(--ya-line); }
/* html 型別欄位若有內文，接在小標下面 */
.ya-lia-sec__body { margin: -.6rem 0 1.4rem; font-size: .88rem; line-height: 1.9; color: var(--ya-body-2); }

/* ── 7. 欄位列 ───────────────────────────────────────────────────── */
.ya-lia-field { margin-bottom: 1.5rem; }
.ya-lia-field__label {
	display: block;
	margin-bottom: .5rem;
	font-size: .86rem;
	letter-spacing: .04em;
	color: var(--ya-ink);
}
/* 必填記號：模組後台的 prefix／suffix（本站 suffix ＝ `*`） */
.ya-lia-req { color: var(--ya-ac); margin-left: .25rem; }

/* ── 8. 送出列 ───────────────────────────────────────────────────── */
.ya-lia-actions {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	flex-wrap: wrap;
	margin-top: 2.2rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--ya-line);
}
.ya-lia-hint { font-size: .82rem; color: var(--ya-muted); }

/* ── 9. 驗證錯誤面板（設計稿 490–544 行「表單尚未送出」）────────── */
.ya-lia-err {
	margin: 0 0 1.8rem;
	padding: 1.2rem 1.4rem;
	background: color-mix(in oklab, var(--ya-error) 8%, var(--ya-white));
	border-left: 3px solid var(--ya-error);
}
.ya-lia-err__title {
	margin: 0 0 .5rem;
	font-family: var(--ya-serif);
	font-size: 1rem;
	color: var(--ya-error);
}
.ya-lia-err__list { margin: 0; padding-left: 1.1rem; font-size: .86rem; line-height: 1.9; color: var(--ya-body); }

/* ── 10.（已刪）側欄 ──────────────────────────────────────────────
   `.ya-lia-side`／`.ya-lia-card`（＋__en／__title／__text）／`.ya-lia-contact`
   於 2026-09-03 刪除 —— 表單頁與錯誤頁的右側欄都依裁示移除。
   ♻ 還原：`css/liaise.css.side.bak`、`modules/liaise/*.side.bak`。 */

/* ── 11. 表單一覽頁（liaise_index.html）──────────────────────────── */
.ya-lia-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.ya-lia-item {
	display: flex; flex-direction: column; gap: .6rem;
	padding: 1.6rem;
	background: var(--ya-white);
	border: 1px solid var(--ya-line);
	transition: border-color var(--ya-t-col) var(--ya-ease), transform var(--ya-t-move) var(--ya-ease), box-shadow var(--ya-t-move) var(--ya-ease);
}
.ya-lia-item:hover { border-color: var(--ya-ac); transform: translateY(-4px); box-shadow: var(--ya-sh-1); }
.ya-lia-item__title { font-family: var(--ya-serif); font-size: 1.1rem; color: var(--ya-ink); }
.ya-lia-item__desc { font-size: .86rem; line-height: 1.9; color: var(--ya-body-2); }
.ya-lia-item__go { margin-top: auto; padding-top: .6rem; font-size: .82rem; letter-spacing: .16em; color: var(--ya-ac); }

/* =========================================================================
   12. BOOTSTRAP 5 欄位覆寫
   🔴 欄位的 HTML 由 XoopsFormRendererBootstrap5 產生，我們只能從外面蓋。
      這裡把 BS5 的圓角灰框輸入框，改成設計稿那種「只有一條底線」的樣子
      （設計稿 386 行：border:0 0 1px；focus 時底線轉玫瑰金 #BE8574）。
   ⚠ 選擇器保持 (0,1,0)～(0,2,0)，夠蓋過 bootstrap.css 的 (0,1,0)
     （本檔載入順序在 bootstrap.css 之後）。不要加 !important。
   ========================================================================= */
/* 🔴 2026-09-03 改版：底線款 → **設計稿的四邊框線款**（使用者裁示）。
   設計稿出處 `YuanAn Liaise.dc.html:386／411`（欄位）與 `:1378`（`inputPad`）：
     padding `.85rem 1rem`／border `1px solid rgba(31,78,107,.16)`／
     font-size `.9rem`／color `#23303A`／background `#fff`／outline `0`／
     transition `.35s`，focus 時 `border-color:#BE8574`。
   ⚠ 邊框色刻意保留**設計稿的字面 rgba**、不做 palette 映射
     （陷阱備忘那條：只有 `var(--x,#fallback)` 的 fallback 才是舊值）。
     `#BE8574` 剛好等於 `--ya-ac`、`#23303A` 等於 `--ya-ink`，這兩個才用變數。
   🔴 `background-color` 不能寫成 `background` 簡寫 —— 見下面 .form-select 那條。 */
.ya-lia .form-control,
.ya-lia .form-select {
	width: 100%;
	border: 1px solid rgba(31,78,107,.16);
	border-radius: 0;
	padding: .85rem 1rem;
	font-family: inherit;
	font-size: .9rem;
	line-height: 1.7;
	background-color: var(--ya-white);
	color: var(--ya-ink);
	outline: 0;
	box-shadow: none;
	transition: border-color .35s var(--ya-ease);
}
.ya-lia .form-control:focus,
.ya-lia .form-select:focus {
	border-color: var(--ya-ac);
	box-shadow: none;
	background-color: var(--ya-white);
	color: var(--ya-ink);
}
.ya-lia .form-control::placeholder { color: var(--ya-muted-2); }
/* 多行文字：設計稿 `:415` 是 font-size .88rem／line-height 1.9／resize vertical */
.ya-lia textarea.form-control {
	min-height: 8rem;
	font-size: .88rem;
	line-height: 1.9;
	resize: vertical;
}
/* 🔴 `<select>` 的下拉箭頭是 BS5 的 **background-image**（data URI SVG，
   `bootstrap.css:2179`）。舊版這裡寫 `background: transparent` 簡寫，
   把 background-image 一起洗掉了 —— **箭頭其實一直是不見的**，
   而下面那條 `background-position` 也就跟著變成沒有作用的孤兒規則。
   改用 `background-color` 就不會動到圖，箭頭回來了。
   框線款要把箭頭往內縮，並留出右內距免得文字壓到箭頭。 */
.ya-lia .form-select {
	background-position: right 1rem center;
	padding-right: 2.6rem;
}

/* 勾選／單選：BS5 的 .form-check 一組 */
.ya-lia .form-check { padding-left: 1.6rem; margin-bottom: .4rem; }
.ya-lia .form-check-input {
	width: 1rem; height: 1rem;
	margin-left: -1.6rem;
	border: 1px solid var(--ya-muted-2);
	background-color: var(--ya-white);
}
.ya-lia .form-check-input:checked {
	background-color: var(--ya-ac);
	border-color: var(--ya-ac);
}
.ya-lia .form-check-input:focus { box-shadow: none; border-color: var(--ya-ac); }
.ya-lia .form-check-label { font-size: .88rem; color: var(--ya-body); }

/* 🔴 「其他：」那一格的自由填答輸入框（2026-09-03 修）
   模組把一個 `<input class="form-control">` 塞在 `<label>` **裡面**
   （`other[ele_28_]`），所以它會吃到上面 `.ya-lia .form-control` 的
   `width: 100%` 與 `padding: .7rem 0` —— 第 4 格因此又寬又高，
   與前三格（會席晚膳／私湯／接駁服務）對不齊。
   ⚠ 這是**模組吐的結構，不能改**（XoopsFormRendererBootstrap5），只能從外面蓋。
   👉 改成隨內容寬的短底線款，字級與行高都跟著標籤走。 */
.ya-lia .form-check .form-control {
	display: inline-block;
	width: auto;
	min-width: 7rem;
	max-width: 12rem;
	/* 框線與其他欄位同一款，但內距收小 —— 用 .85rem 1rem 會把這一格撐得比
	   前三個選項高一大截，又變回對不齊。 */
	padding: .3rem .6rem;
	margin-left: .4rem;
	font-size: inherit;
	line-height: inherit;
	vertical-align: baseline;
}

/* 模組在**每個**選項標籤尾端都塞了 `<br>`（`<label>私湯<br></label>`）。
   標籤是 inline，尾端的 `<br>` 會多開一行，讓每一格都變成兩行高 ——
   四格一起變高看不太出來，但和第 4 格的輸入框疊在一起就明顯歪掉。 */
.ya-lia .form-check-label br { display: none; }

/* 勾選框與標籤（含上面那個輸入框）垂直置中對齊。
   ⚠ 改 inline-flex 不影響 BS5 那組 `padding-left: 1.6rem` ＋
     `margin-left: -1.6rem` 的定位手法，勾選框仍落在同一個位置。 */
.ya-lia .form-check-inline {
	display: inline-flex;
	align-items: center;
	margin-right: 1.2rem;
}
/* 上面把 .form-check-inline 改成 flex 之後，勾選框從「浮動元素」變成「flex 項目」，
   兩件事要跟著收尾：
     ① BS5 給 .form-check-input 的 `margin-top: .25em` 原本是為了對齊第一行文字，
        在垂直置中的 flex 裡會變成往下偏 .25em → 歸零。
     ② flex 項目預設 `flex-shrink: 1`，標籤一長就會把 1rem 的勾選框壓扁 → 鎖住不縮。
   ⚠ 只作用在 inline 那組，一般（block）的 .form-check 仍走 BS5 原本的浮動排法。 */
.ya-lia .form-check-inline .form-check-input {
	margin-top: 0;
	flex: 0 0 auto;
}

/* 送出鈕（2026-09-03 依裁示改成「框線＋底色」實心款）
   設計稿出處 `YuanAn Liaise.dc.html:456` ＋ `:1465` 的 `submitBg`：
     display inline-flex／gap .7rem／padding .85rem 1.8rem／
     background `#12303F`（＝ --ya-deep）／color #fff／font-size .85rem／
     letter-spacing .16em／transition .4s，文字右側一個 `bi bi-send`。
   ⚠ 設計稿沒有 hover（它是靠「是否勾選同意」換底色），hover 特效是本佈景自訂：
     底色轉玫瑰金、字距展開、紙飛機往右上飛出去。

   🔴 圖示為什麼能用 ::after —— 模組吐的是**真的 `<button>`**
     （`<button type="submit" class="btn btn-secondary" name="submit">送出</button>`），
     不是 `<input type="submit">`。`<input>` 是替換元素、`::before/::after` 不會算繪，
     真的是 input 的話就非得改樣板不可。這裡不必改，**樣板一行都沒動**。
   ⚠ 圖示只掛在 `[type="submit"]` 上 —— 若模組日後吐出別的 `.btn`（例如重設鈕），
     不會被誤加一個紙飛機。 */
.ya-lia .btn,
.ya-lia input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	padding: .85rem 1.8rem;
	border: 1px solid var(--ya-deep);
	border-radius: 0;
	background-color: var(--ya-deep);
	font-family: var(--ya-serif);
	font-size: .85rem;
	letter-spacing: .16em;
	color: var(--ya-white);
	cursor: pointer;
	transition: background-color .4s var(--ya-ease), border-color .4s var(--ya-ease),
	            letter-spacing .4s var(--ya-ease), color .4s var(--ya-ease);
}
/* bi-send（`bootstrap-icons.css` 的 `.bi-send::before { content: "\f6c0" }`）。
   ⚠ font-family 要跟該檔一致：小寫、不加引號也可，這裡照它的寫法。
   ⚠ 圖示是 ::after，`gap` 會自動在文字與它之間留空隙，不必再加 margin。 */
.ya-lia .btn[type="submit"]::after {
	content: "\f6c0";
	font-family: bootstrap-icons;
	font-size: .85rem;
	line-height: 1;
	transition: transform .4s var(--ya-ease);
}
.ya-lia .btn:hover,
.ya-lia .btn:focus-visible,
.ya-lia input[type="submit"]:hover,
.ya-lia input[type="submit"]:focus-visible {
	background-color: var(--ya-ac);
	border-color: var(--ya-ac);
	color: var(--ya-white);
	letter-spacing: .22em;
}
/* hover：紙飛機往右上飛出去一點並微微上仰 */
.ya-lia .btn[type="submit"]:hover::after,
.ya-lia .btn[type="submit"]:focus-visible::after {
	transform: translate(.35rem, -.25rem) rotate(-12deg);
}

/* 驗證碼：XoopsFormCaptcha 吐出圖片＋輸入框（本站 captcha 設定為開啟） */
.ya-lia-captcha { margin-top: 1.6rem; }
.ya-lia-captcha img { display: inline-block; vertical-align: middle; margin-right: .8rem; cursor: pointer; }
.ya-lia-captcha .form-control { display: inline-block; width: auto; min-width: 8rem; }

/* ── 13. 響應式 ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
	/* .ya-lia-grid 的基底已於 2026-09-03 改成單欄，這條是同值重複，但保留無害
	   且語意清楚（日後若基底改回兩欄，這條仍是對的）。
	   同批的 `.ya-lia-side { order: 2 }` 已隨側欄一起刪除。 */
	.ya-lia-grid { grid-template-columns: 1fr; }
}