/* ==========================================================================
   quote.css  —  詳細報價 / 費用試算頁（對應 quote.html / quote.js）
   沿用 common.css 的變數與元件；黑白灰・包浩斯 × Apple 極簡
   ========================================================================== */

/* ---------- 頁首（與 commission 一致，本頁獨立載入故重列） ---------- */
.page-hero {
    position: relative;
    padding: calc(var(--nav-h) + 96px) 0 96px;
    background: transparent;
    overflow: hidden;
}
.page-hero__title {
    font-size: clamp(44px, 8vw, 96px);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.04em;
}
.page-hero__sub {
    max-width: 620px;
    margin: 28px 0 0;
    font-size: clamp(17px, 2vw, 21px);
    color: var(--muted);
}
.page-hero .wrap { position: relative; z-index: 1; }

/* ---------- 試算版面 ------------------------------------------------- */
.quote { background: transparent; padding-top: 0; }
.quote__inner {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}

/* ---------- 左：選項 ------------------------------------------------- */
.qform { display: grid; gap: 44px; }
.qgroup__title {
    font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.qgroup__hint { margin-top: 16px; font-size: 14px; color: var(--muted); }
.qgroup__hint a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

.qcat { margin-top: 28px; }
.qcat:first-of-type { margin-top: 0; }
.qcat__title {
    font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
    color: var(--c-silver); text-transform: uppercase;
    margin-bottom: 12px;
}

.qopts { display: grid; gap: 12px; }
.qcat .qopt + .qopt { margin-top: 12px; }

/* 單一選項列 */
.qopt {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.qopt:hover { border-color: var(--c-slate); }
.qopt.is-on { border-color: var(--c-ink); background: rgba(0, 0, 0, 0.02); }
.qopt:focus-within { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* 隱藏原生控制項（保留可及性 / 鍵盤） */
.qopt input {
    position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; pointer-events: none;
}

/* 自訂勾選框 */
.qopt__box {
    position: relative; flex-shrink: 0;
    width: 20px; height: 20px;
    border: 1.6px solid var(--c-mist);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.qopt--check .qopt__box { border-radius: 5px; }
.qopt:not(.qopt--check) .qopt__box { border-radius: 50%; }
.qopt input:checked + .qopt__box { background: var(--c-ink); border-color: var(--c-ink); }
.qopt--check input:checked + .qopt__box::after {
    content: ""; position: absolute; left: 6px; top: 2.5px;
    width: 5px; height: 10px;
    border: solid var(--c-paper); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.qopt:not(.qopt--check) input:checked + .qopt__box::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-paper); transform: translate(-50%, -50%);
}

.qopt__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.qopt__name { font-size: 16px; font-weight: 600; }
.qopt__desc { font-size: 13px; color: var(--muted); }
.qopt__desc--art { margin-top: 4px; }
.qopt__desc--art strong { color: var(--c-ink); font-weight: 700; }
.qopt__price {
    flex-shrink: 0; font-size: 15px; font-weight: 700;
    letter-spacing: -0.01em; text-align: right;
}
/* 折扣前原價（劃線・淺灰） */
.qopt__was { color: var(--c-silver); text-decoration: line-through; font-weight: 500; margin-right: 4px; }

/* 停用狀態（solo 服務 / 需標準・進階版）：灰色失效、不可點 */
.qopt.is-disabled { opacity: 0.4; pointer-events: none; }

/* 方案折扣小標識（顯眼但不搶主題的細框膠囊） */
.qopt__tag {
    display: inline-block; margin-left: 8px;
    padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    line-height: 1.5; vertical-align: middle;
    border: 1px solid var(--c-ink); border-radius: 980px; white-space: nowrap;
}

/* ---------- 年數加減器（主機代理+每月維護） ---------- */
.qopt--step { cursor: default; }
.qopt__hostnote { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.qopt__hostnote:empty { display: none; }
.qstep {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--line); border-radius: 980px; padding: 3px;
}
.qstep__btn {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 18px; line-height: 1; font-weight: 700;
    color: var(--c-paper); background: var(--c-ink);
    transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
}
.qstep__btn:hover:not(:disabled) { transform: scale(0.9); }
.qstep__btn:disabled { opacity: 0.28; cursor: not-allowed; }
.qstep__qty { min-width: 26px; text-align: center; font-size: 15px; font-weight: 800; }

/* ---------- 右：即時試算 ------------------------------------------- */
/* sticky 會自成堆疊環境；給它 --z-card 讓整張卡（含毛玻璃）蓋過右上角三角鈕 */
.qsum { position: sticky; top: calc(var(--nav-h) + 20px); z-index: 1 }
.qsum__inner {
    border: 1.5px solid var(--c-ink);
    border-radius: 20px;
    padding: 28px 26px;
    background: transparent;   /* 透明底 → 讓共用毛玻璃(backdrop-filter)透出效果 */
}
.qsum__eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    color: var(--c-silver); text-transform: uppercase;
}
.qsum__total {
    font-size: clamp(32px, 4vw, 40px); font-weight: 800;
    letter-spacing: -0.03em; margin-top: 8px;
}
.qsum__totalnote { font-size: 13px; color: var(--muted); margin-top: 2px; }

.qsum__break {
    margin: 22px 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.qsum__row, .qsum__list li {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 14px; padding: 6px 0;
}
.qsum__row { font-weight: 700; }
.qsum__list { list-style: none; }
.qsum__list li { color: var(--muted); }
.qsum__list li span:last-child { white-space: nowrap; color: var(--c-ink); }
.qsum__list:empty { display: none; }

.qsum__cta { width: 100%; justify-content: center; }
.qsum__cta.is-disabled { opacity: 0.45; pointer-events: none; }   /* 必選未滿足 → 停用 */
.qsum__note { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* 必選提示（未選方案/類型/風格時顯示；滿足則隱藏） */
.qsum__reqhint { margin: 2px 0 12px; font-size: 13px; font-weight: 600; color: var(--c-slate); }
.qsum__reqhint:empty { display: none; }

/* ---------- 深色主題微調 ------------------------------------------- */
:root[data-theme="dark"] .qopt.is-on { background: rgba(255, 255, 255, 0.04); }

/* ---------- 貨幣三角鈕選項（沿用 .gtri--opt；僅報價頁） ----------
   層級沿用 .gtri（z-index:200，已高於所有毛玻璃卡片），不再另設。 */
.gtri--curopt .gtri__label { font-size: 10px; font-weight: 800; letter-spacing: 0; }
/* 即時匯率專用：尚未取得 worker 匯率前，停用貨幣切換鈕（無法切外幣＝維持 NT$） */
body:not(.rates-ready) .gtri--cur { opacity: 0.3; pointer-events: none; }
/* 黑色填充三角：維持實心倒三角、不可點、無圖示 */
.gtri--curfill { pointer-events: none; }
/* 展開貨幣選單時，淡出地球(語言)與光暗鈕（其格改由貨幣鈕佔用） */
.gtri--hidden { opacity: 0 !important; transform: scale(0.5) !important; pointer-events: none !important; }

/* ---------- 響應式 -------------------------------------------------- */
@media (max-width: 920px) {
    .quote__inner { grid-template-columns: 1fr; gap: 36px; }
    .qsum { position: static; }
    .qsum__inner { max-width: 480px; }
}
@media (max-width: 520px) {
    /* 手機：卡片改為垂直佈局，避免價格(flex-shrink:0)擠壓造成中文一字一行。
       文本在上（橫向、佔滿寬），價格獨立一行、靠右貼邊在最下方。 */
    .qopt { padding: 14px 16px; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
    .qopt__text { min-width: 0; }
    .qopt__price { flex: 0 0 100%; text-align: right; font-size: 14px; }

    /* 加減器卡片：文本置頂佔整行；底部一列放（± 控制靠左 + 價格靠右） */
    .qopt--step .qopt__text { flex: 1 1 100%; }
    .qopt--step .qopt__price { flex: 1 1 auto; }
}