/* 線上估價（Views/Quote/Index.cshtml、Sheet.cshtml）：精靈畫面與報價單列印版面。
   顏色、字級一律用 site.css 的 token；卡片比照聯絡頁 card-soft（無框淡陰影）與產品頁 fp- 淺色區塊（白卡、較大圓角）；
   一律邏輯屬性（阿拉伯文由右到左）。2026-10 UI/UX 審查紀錄：Docs/報價頁UIUX審查-2026-10/README.md */

.quote-page,
.quote-sheet-wrap {
    --q-radius: 1rem;
    --q-radius-sm: 0.625rem;
    --q-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);      /* 同 site.css .card-soft */
    --q-shadow-hover: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.quote-page { max-width: 66rem; }
.quote-page .quote-notice { font-size: var(--fs-small); border-radius: var(--q-radius-sm); }

/* ── 步驟列（選擇產品 → 設定配置 → 選購清單 → 填寫聯絡資料） ── */
.quote-steps { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: qstep; }
.quote-steps > li { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); color: var(--gray-600); line-height: var(--lh-heading); counter-increment: qstep; }
.quote-steps > li::before { content: counter(qstep); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--gray-400); background: #fff; color: var(--gray-700); font-weight: 600; }
.quote-steps > li:not(:last-child)::after { content: ""; flex: 1 1 1rem; min-width: 0.75rem; height: 1px; background: var(--gray-400); }
.quote-steps > li.is-current { color: var(--gray-900); font-weight: 700; }
.quote-steps > li.is-current::before { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.quote-steps > li.is-done { color: var(--gray-700); }
.quote-steps > li.is-done::before { content: "\f633" / ""; font-family: bootstrap-icons; font-weight: 400; background: var(--green-50); border-color: var(--green-700); color: var(--green-700); } /* bi-check-lg */
.quote-steps > li.is-done::after { background: var(--green-700); }
@media (max-width: 767.98px) {
    /* 手機只留圓圈與目前步驟的名稱（其他步驟名稱視覺隱藏，仍讀得到） */
    .quote-steps { margin-block-end: 1rem; }
    .quote-steps > li { flex: 0 0 auto; }
    .quote-steps > li.is-current { flex: 1 1 auto; }
    .quote-steps > li:not(.is-current) .quote-step-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .quote-steps > li:not(:last-child)::after { flex: 0 0 1rem; }
    .quote-steps > li.is-current:not(:last-child)::after { flex: 1 1 1rem; }
}

/* ── 標題列：上一步、標題、說明 ── */
.quote-head { display: flex; align-items: center; gap: 0.5rem; padding-block-end: 0.75rem; border-block-end: 1px solid var(--bs-border-color); margin-block-end: 1.25rem; }
.quote-title { font-size: var(--fs-h2-sm); font-weight: 700; line-height: var(--lh-heading); margin: 0; flex: 1; min-width: 0; }
.quote-back, .quote-help { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 44px; text-decoration: none; }
.quote-back { width: 44px; padding: 0; border-radius: 50%; font-size: 1.375rem; color: var(--green-700); }
.quote-back:hover { background: var(--green-50); color: var(--green-800); }
.quote-help { font-size: var(--fs-small); flex: 0 0 auto; }
.quote-lead { color: var(--gray-600); margin-block-end: 1.25rem; }

.quote-screen { display: none; }
.quote-screen.is-active { display: block; }

/* ── 卡片（產品、選項、清單共用；同 card-soft：無框淡陰影） ── */
.quote-card { position: relative; background: #fff; border: 1px solid transparent; border-radius: var(--q-radius); box-shadow: var(--q-shadow); transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; }
.quote-card-title { font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-heading); margin: 0; min-width: 0; color: var(--gray-900); }
.quote-card-desc { color: var(--gray-600); font-size: var(--fs-small); margin: 0.25rem 0 0; }
.quote-opt-note { color: var(--gray-700); font-size: var(--fs-small); line-height: 1.6; }
.quote-spec { color: var(--gray-600); font-size: var(--fs-small); line-height: 1.6; }
.quote-spec-label { color: var(--gray-700); font-weight: 600; margin-inline-end: 0.375rem; }
.quote-spec-note { color: var(--green-700); }
.quote-price-text { color: var(--green-700); font-weight: 700; white-space: nowrap; }

/* ── 產品：平板以上三欄直式卡片（圖在上），手機橫式 ── */
.quote-products { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.quote-product { display: flex; flex-direction: column; overflow: hidden; }
.quote-product-media { background: var(--gray-100); height: 12rem; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.quote-product-img { width: 100%; height: 100%; object-fit: contain; }
.quote-product-body { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.25rem 1.5rem; }
.quote-product-body .quote-card-title { font-size: var(--fs-h3); }
.quote-product-body .btn { margin-block-start: auto; align-self: flex-start; }
.quote-product-body .quote-card-desc { margin-block-end: 1rem; }
@media (hover: hover) {
    .quote-product:hover { box-shadow: var(--q-shadow-hover); }
    .quote-product:hover .btn-outline-primary { color: #fff; background: var(--green-700); }
}
@media (max-width: 575.98px) {
    .quote-products { grid-template-columns: 1fr; gap: 0.75rem; }
    .quote-product { flex-direction: row; align-items: stretch; }
    .quote-product-media { flex: 0 0 6.5rem; height: auto; padding: 0.625rem; }
    .quote-product-body { padding: 0.875rem 1rem; }
    .quote-product-body .quote-card-desc { margin-block-end: 0.625rem; }
}

/* ── 配置：寬螢幕左側大類清單（步驟編號），窄螢幕上方可橫向捲動的標籤（跟著頁首固定） ── */
.quote-config { display: flex; gap: 1.5rem; align-items: flex-start; }
.quote-nav { flex: 0 0 13rem; position: sticky; top: var(--quote-sticky-top, 5rem); display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; background: #fff; border-radius: var(--q-radius); box-shadow: var(--q-shadow); }
.quote-nav-item { display: flex; align-items: center; gap: 0.625rem; min-height: 44px; padding: 0.375rem 0.625rem; border: 0; border-radius: var(--q-radius-sm); background: none; color: var(--gray-700); font-size: var(--fs-small); line-height: var(--lh-heading); text-align: start; width: 100%; }
.quote-nav-item:hover { background: var(--gray-100); color: var(--gray-900); }
.quote-nav-item.is-current { background: var(--green-50); color: var(--green-800); font-weight: 700; box-shadow: inset 3px 0 0 var(--green-700); }
:root[dir="rtl"] .quote-nav-item.is-current { box-shadow: inset -3px 0 0 var(--green-700); }
.quote-nav-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--gray-400); background: #fff; color: var(--gray-700); font-size: var(--fs-xs); font-weight: 600; }
.quote-nav-item.is-current .quote-nav-num { border-color: var(--green-700); color: var(--green-700); }
.quote-nav-num.is-done, .quote-nav-item.is-current .quote-nav-num.is-done { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.quote-nav-text { min-width: 0; overflow-wrap: anywhere; }
.quote-main { flex: 1; min-width: 0; }
@media (max-width: 991.98px) { .quote-nav { flex-basis: 11rem; } }
.quote-cat-head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.75rem; margin-block-end: 1rem; }
.quote-cat-name { font-size: var(--fs-h3); font-weight: 700; margin: 0; }
.quote-cat-step { font-size: var(--fs-small); }
@media (max-width: 767.98px) {
    .quote-config { display: block; }
    .quote-nav { position: sticky; top: var(--quote-sticky-top, 4rem); z-index: 2; flex-direction: row; overflow-x: auto; gap: 0.375rem; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5); margin-block-end: 1rem; padding: 0.5rem calc(var(--bs-gutter-x, 1.5rem) * 0.5); border-radius: 0; box-shadow: 0 1px 0 var(--bs-border-color); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .quote-nav::-webkit-scrollbar { display: none; }
    .quote-nav-item { flex: 0 0 auto; width: auto; white-space: nowrap; border: 1px solid var(--bs-border-color); border-radius: 999px; padding-inline: 0.5rem 0.875rem; }
    .quote-nav-item.is-current { border-color: var(--green-700); box-shadow: none; }
    :root[dir="rtl"] .quote-nav-item.is-current { box-shadow: none; }
}

/* ── 選項卡片：整列是一個按鈕（role=radio／checkbox），數量、備註、規格在下方對齊名稱 ── */
.quote-options { display: flex; flex-direction: column; gap: 0.75rem; }
.quote-opt { --q-indent: 7.75rem; }
.quote-opt.is-selected { border-color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-700), var(--q-shadow); background: var(--green-50); }
.quote-opt-toggle, .quote-opt-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1rem; background: none; border: 0; text-align: start; color: inherit; border-radius: var(--q-radius); }
.quote-opt-toggle { cursor: pointer; }
.quote-opt-toggle:focus-visible { outline-offset: -3px; } /* 外框畫在卡片內，不和卡片邊框疊在一起 */
@media (hover: hover) {
    .quote-opt:not(.is-selected):not(.is-disabled):hover { box-shadow: var(--q-shadow-hover); border-color: var(--bs-border-color); }
}
.quote-mark { flex: 0 0 auto; font-size: 1.25rem; color: var(--gray-400); line-height: 1; }
.quote-opt.is-selected .quote-mark { color: var(--green-700); }
.quote-opt-img { flex: 0 0 auto; width: 4rem; height: 4rem; object-fit: contain; border-radius: var(--q-radius-sm); background: var(--gray-100); padding: 0.25rem; }
.quote-opt-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1rem; row-gap: 0.125rem; }
.quote-opt-text .quote-card-title { flex: 1 1 12rem; }
.quote-opt-text .quote-price-text { font-size: var(--fs-body); }
.quote-opt-pct { color: var(--gray-600); font-weight: 400; font-size: var(--fs-small); }
.quote-opt-extra { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 1rem 0.875rem var(--q-indent); margin-block-start: -0.25rem; }
.quote-opt-extra > .quote-qty-row { margin-block: 0.125rem 0.375rem; }
/* 停用：不用整張半透明（說明文字會淡到看不清），改灰底、名稱與圖淡化，原因文字維持 4.5:1 */
.quote-opt.is-disabled { background: var(--gray-100); box-shadow: none; border-color: var(--bs-border-color); }
.quote-opt.is-disabled .quote-card-title, .quote-opt.is-disabled .quote-price-text { color: var(--gray-600); }
.quote-opt.is-disabled .quote-opt-img { opacity: 0.5; filter: grayscale(1); }
.quote-opt-disabled { display: flex; align-items: baseline; gap: 0.375rem; color: var(--gray-900); font-size: var(--fs-small); font-weight: 600; }
.quote-opt-disabled .bi { color: var(--bs-danger); }
.quote-subcat { margin-block-start: 1rem; padding: 1rem; border-radius: var(--q-radius); background: var(--gray-100); }
.quote-subcat-title { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-body); font-weight: 700; color: var(--gray-900); margin: 0 0 0.75rem; }
.quote-subcat-title .bi { color: var(--green-700); }
@media (max-width: 575.98px) {
    .quote-opt { --q-indent: 2rem; }
    .quote-opt-toggle, .quote-opt-row { align-items: flex-start; gap: 0.625rem; padding: 0.875rem; }
    .quote-mark { margin-block-start: 0.125rem; }
    .quote-opt-img { width: 3.25rem; height: 3.25rem; }
    /* 名稱與價格上下排：價格不會被擠成兩行，右側也不會被浮動客服按鈕蓋住 */
    .quote-opt-text { flex-direction: column; align-items: flex-start; }
    .quote-opt-text .quote-card-title { flex: 0 0 auto; }
    .quote-opt-extra { padding: 0 0.875rem 0.875rem; }
    .quote-subcat { padding: 0.75rem; margin-inline: -0.25rem; }
}

/* ── 數量 − N ＋（按鈕 44px，焦點外框畫在框內不被裁掉） ── */
.quote-qty-row { display: flex; align-items: center; gap: 0.75rem; }
.quote-qty-label { font-size: var(--fs-small); color: var(--gray-700); }
.quote-qty { display: inline-flex; align-items: center; border: 1px solid var(--gray-400); border-radius: var(--q-radius-sm); background: #fff; }
.quote-qty button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--q-radius-sm); background: none; color: var(--green-700); font-size: 1rem; line-height: 1; }
.quote-qty button:focus-visible { outline-offset: -3px; }
.quote-qty button:hover { background: var(--green-50); color: var(--green-800); }
.quote-qty button:disabled { color: var(--gray-400); background: none; }
.quote-qty > span { min-width: 2.25rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 底部固定列：桌機一列（金額在前、按鈕在後），手機兩列 ── */
.quote-foot { position: fixed; inset-inline: 0; inset-block-end: 0; background: #fff; border-block-start: 1px solid var(--bs-border-color); padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); z-index: 1020; box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.08); }
.quote-foot-inner { max-width: 66rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quote-price { display: flex; flex-direction: column; min-width: 0; line-height: var(--lh-heading); }
.quote-price-sub { font-size: var(--fs-small); color: var(--gray-600); }
.quote-price-amt { font-size: var(--fs-h3); font-weight: 700; color: var(--green-700); font-variant-numeric: tabular-nums; }
.quote-foot-btns { display: flex; gap: 0.75rem; flex: 0 0 auto; }
.quote-foot-btns .btn { min-height: 44px; }
.quote-foot-btns .btn-primary { min-width: 11rem; }
.quote-foot-btns .btn-primary.w-100 { width: auto !important; }
@media (max-width: 767.98px) {
    .quote-foot { padding-block: 0.625rem calc(0.625rem + env(safe-area-inset-bottom)); }
    .quote-foot-inner { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .quote-price { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
    .quote-foot-btns > * { flex: 1 1 0; }
    .quote-foot-btns .btn-primary { flex-grow: 2; min-width: 0; }
    .quote-foot-btns .btn-primary.w-100 { width: 100% !important; }
}
/* 底部列高度由 quote.js 寫入 --quote-foot-h：頁面底部留空，浮動客服按鈕移到底部列上方 */
body.quote-has-foot { padding-block-end: calc(var(--quote-foot-h, 6.5rem) + 4.5rem); } /* 多留浮動客服按鈕的高度，最後一張卡片捲得到按鈕上方 */
body.quote-has-foot .line-float-btn, body.quote-has-foot .chat-float-btn { bottom: calc(var(--quote-foot-h, 6.5rem) + 0.75rem); }
@media (max-width: 1199.98px) {
    /* 手機、平板：浮動客服按鈕縮成 52px 圓形（同 site.css 的 is-compact；1200px 以上由 site.js 判斷），不蓋住選項卡片的名稱與價格；文字仍是可及名稱 */
    body.quote-has-foot .line-float-btn { justify-content: center; width: 52px; height: 52px; padding: 0; inset-inline-end: 12px; }
    body.quote-has-foot .line-float-btn .bi { font-size: 1.6rem; }
    body.quote-has-foot .line-float-btn > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ── 選購清單 ── */
.quote-cart { display: flex; flex-direction: column; gap: 1rem; }
.quote-cart-item { padding: 1.25rem; }
.quote-cart-top { display: flex; align-items: flex-start; gap: 1rem; }
.quote-cart-img { flex: 0 0 auto; width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: var(--q-radius-sm); background: var(--gray-100); padding: 0.25rem; }
.quote-cart-info { flex: 1; min-width: 0; }
.quote-cart-info .quote-card-title { font-size: var(--fs-h3); }
.quote-cart-toggle { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; padding: 0; margin-block-start: 0.25rem; border: 0; background: none; color: var(--green-700); font-size: var(--fs-small); font-weight: 600; }
.quote-cart-toggle:hover { color: var(--green-800); text-decoration: underline; }
.quote-cart-lines { list-style: none; padding: 0; margin: 0.25rem 0 0; border-radius: var(--q-radius-sm); background: var(--gray-100); }
.quote-cart-lines > li { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; padding: 0.5rem 0.75rem; font-size: var(--fs-small); }
.quote-cart-lines > li + li { border-block-start: 1px solid var(--bs-border-color); }
.quote-cart-line-cat { flex: 0 0 100%; color: var(--gray-600); font-size: var(--fs-xs); }
.quote-cart-line-name { flex: 1 1 10rem; min-width: 0; color: var(--gray-900); }
.quote-cart-line-price { margin-inline-start: auto; color: var(--gray-900); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quote-cart-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--bs-border-color); }
.quote-cart-sub { display: flex; flex-direction: column; align-items: flex-end; line-height: var(--lh-heading); margin-inline-start: auto; }
.quote-cart-sub-label { font-size: var(--fs-small); color: var(--gray-600); }
.quote-cart-sub .quote-price-text { font-size: var(--fs-h3); }
.quote-cart-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; }
.quote-cart-actions .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 0.375rem; }
.quote-cart-actions .btn-link { text-decoration: none; }
.quote-more { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 3.5rem; margin-block-start: 1rem; border: 1px dashed var(--gray-400); border-radius: var(--q-radius); background: #fff; color: var(--green-700); font-weight: 600; }
.quote-more:hover { border-color: var(--green-700); background: var(--green-50); color: var(--green-800); }
@media (max-width: 575.98px) {
    .quote-cart-item { padding: 1rem; }
    .quote-cart-img { width: 3.5rem; height: 3.5rem; }
    .quote-cart-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── 對話框（聯絡資料、說明、送出完成、建議整組） ── */
.quote-modal .modal-content { border: 0; border-radius: var(--q-radius, 1rem); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18); }
.quote-modal .modal-footer .btn { min-height: 44px; }
.quote-modal .modal-header, .quote-modal .modal-footer { border-color: var(--bs-border-color); }
@media (max-width: 575.98px) {
    .quote-modal.modal .modal-fullscreen-sm-down .modal-content { border-radius: 0; }
}
.quote-guide-steps { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: qguide; display: flex; flex-direction: column; gap: 0.75rem; }
.quote-guide-steps > li { position: relative; padding-inline-start: 2.5rem; counter-increment: qguide; min-height: 1.75rem; }
.quote-guide-steps > li::before { content: counter(qguide); position: absolute; inset-inline-start: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--green-50); color: var(--green-700); font-weight: 700; font-size: var(--fs-small); }
.quote-guide-title .bi { color: var(--green-700); margin-inline-end: 0.25rem; }
.quote-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--green-50); font-size: 2.5rem; color: var(--green-700); }
.quote-done-no { display: inline-block; margin-block: 0.25rem 1rem; padding: 0.375rem 1rem; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); }
.quote-done-no b { color: var(--gray-900); letter-spacing: 0.02em; }
.quote-warn-icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--bs-warning-bg-subtle); font-size: 2.25rem; color: var(--bs-warning-text-emphasis); }

/* ── 報價單頁（Sheet.cshtml）：螢幕上是一張紙，列印時只留這張紙 ── */
.quote-sheet-wrap { max-width: 54rem; }
.quote-sheet { background: #fff; border-radius: var(--q-radius); box-shadow: var(--q-shadow); padding: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); font-size: var(--fs-small); color: var(--gray-900); }
.quote-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding-block-end: 1rem; border-block-end: 3px solid var(--green-500); }
.quote-sheet-company { font-size: var(--fs-xs); color: var(--gray-600); text-align: end; line-height: 1.7; }
.quote-sheet-title { text-align: center; font-size: var(--fs-h2-sm); letter-spacing: 0.4em; margin: 1.25rem 0 1rem; font-weight: 700; }
.quote-sheet table { width: 100%; border-collapse: collapse; margin-block-end: 1rem; }
.quote-sheet th, .quote-sheet td { border: 1px solid var(--gray-400); padding: 0.4375rem 0.625rem; vertical-align: top; }
.quote-sheet th { background: var(--green-50); color: var(--green-800); font-weight: 700; text-align: start; white-space: nowrap; }
.quote-sheet .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quote-sheet .center { text-align: center; }
.quote-sheet .nowrap { white-space: nowrap; }
.quote-sheet .pre-line { white-space: pre-line; }
.quote-sheet .quote-sheet-product { background: var(--gray-100); font-weight: 700; font-size: var(--fs-body); }
.quote-sheet .quote-sheet-spec { color: var(--gray-600); font-size: var(--fs-xs); }
.quote-sheet .quote-sheet-subtotal th { background: #fff; color: var(--gray-700); }
/* 明細表在手機橫向捲動（6 欄擠在 375px 會一字一行），其他表維持滿版 */
.quote-sheet-scroll { overflow-x: auto; margin-block-end: 1rem; -webkit-overflow-scrolling: touch; }
.quote-sheet-scroll > table { min-width: 36rem; margin-block-end: 0; }
.quote-sheet-scroll .quote-sheet-item { min-width: 8em; }
.quote-sheet-totals { display: flex; gap: 1rem 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-block-end: 1rem; }
.quote-sheet-terms { flex: 1 1 18rem; font-size: var(--fs-xs); line-height: 1.8; }
.quote-sheet-terms ol { padding-inline-start: 1.25rem; margin: 0; }
.quote-sheet-sum { flex: 1 1 16rem; max-width: 20rem; }
.quote-sheet-sum .total { font-size: var(--fs-body); font-weight: 700; }
.quote-sheet-sign td { height: 4.5rem; color: var(--gray-600); }
.quote-sheet-sign .quote-sheet-sign-sales { width: 62%; }
.quote-sheet-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block-end: 1.25rem; }
.quote-sheet-actions .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 0.375rem; }
@media (max-width: 575.98px) {
    .quote-sheet-actions .btn-primary { flex: 1 1 100%; justify-content: center; }
    .quote-sheet-actions .btn-outline-secondary { flex: 1 1 0; justify-content: center; }
    .quote-sheet-company { text-align: start; }
    .quote-sheet-sum { max-width: none; }
    /* 抬頭資訊表 4 欄在手機縮小字級與內距，單號可在連字號處換行，不讓整頁橫向捲動 */
    .quote-sheet > table th, .quote-sheet > table td { padding: 0.3125rem 0.375rem; font-size: var(--fs-xs); }
    .quote-sheet > table .nowrap { white-space: normal; overflow-wrap: anywhere; }
}
@media print {
    @page { size: A4; margin: 12mm; }
    .site-header, .site-footer, footer, aside, .quote-sheet-actions, .language-suggest-bar, .language-preview-bar, .skip-link, .chat-float-btn, .line-float-btn, .page-banner { display: none !important; }
    body { padding: 0 !important; background: #fff; }
    .quote-sheet-wrap { max-width: none; padding: 0 !important; margin: 0 !important; }
    .quote-sheet { border: 0; border-radius: 0; box-shadow: none; padding: 0; font-size: 10pt; }
    .quote-sheet, .quote-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .quote-sheet-scroll { overflow: visible; }
    .quote-sheet-scroll > table { min-width: 0; }
    .quote-sheet tr, .quote-sheet-totals, .quote-sheet-sign, .quote-sheet-sum { break-inside: avoid; }
    .quote-sheet thead { display: table-header-group; }
    .quote-sheet-head { border-block-end-color: var(--green-500); }
}

/* 由右到左：「上一步」箭頭鏡像（site.css 的鏡像清單只含前進方向的圖示） */
[dir="rtl"] .quote-back .bi-arrow-left::before { scale: -1 1; }

/* ── 分組（選項多的大類，例如檢測項目：大氣、土壤、水位、多合一；details／summary 收合） ── */
.quote-group { margin-block-end: 0.75rem; }
.quote-group-title { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.25rem; cursor: pointer; font-weight: 700; color: var(--green-700); list-style: none; border-block-end: 1px solid var(--gray-100); }
.quote-group-title::-webkit-details-marker { display: none; }
.quote-group-title:focus-visible { outline: 2px solid var(--green-800); outline-offset: 2px; border-radius: 0.25rem; }
.quote-group-name { flex: 1; }
.quote-group-count { min-width: 1.5rem; height: 1.5rem; padding-inline: 0.4rem; border-radius: 1rem; background: var(--green-700); color: #fff; font-size: var(--fs-xs); display: inline-flex; align-items: center; justify-content: center; }
.quote-group-chevron { transition: transform 0.2s ease; }
.quote-group[open] > .quote-group-title .quote-group-chevron { transform: rotate(180deg); }
.quote-group-body { padding-block-start: 0.5rem; }

/* ── 海外單：報價單頁不顯示金額時的說明 ── */
.quote-sheet-noprice { flex: 0 0 16rem; margin: 0; padding: 0.75rem 1rem; background: var(--green-50); color: var(--green-700); border-radius: 0.5rem; font-weight: 600; }