/* 計算保費 Panel（短碼 [cai_quote]）— 原稿 Downloads/WP 保費試算 Panel (1).html，2026-10-08 在測試頁 #217 定案。
   只在用到 [cai_quote] 的頁面載入（inc/assets.php）。
   平時無底無框；捲到頂後整條撐滿寬度、白底＋底線，收起說明（手機再收起標題）。 */
.cai-q-pin{--bleed:var(--cai-q-bleed,calc((100vw - var(--cai-q-sbw,0px))/2 - 50%));position:sticky;top:var(--cai-q-top,0px);z-index:100;margin-inline:calc(-1 * var(--bleed));padding-inline:var(--bleed);border-bottom:1px solid transparent;transition:background-color 150ms cubic-bezier(.16,1,.3,1),border-color 150ms}
.cai-q-pin[data-stuck]{background:#FFFFFF;border-bottom-color:#DED9C8}
.cai-q{--ink:#15171C;--ink-2:#2F323A;--muted:#5F6270;--raised:#FFFFFF;--b-default:#C0BBAA;--sec-pale:#E3EAEE;--sec-mid:#3D6F85;--sans:"Noto Sans TC","PingFang TC","Helvetica Neue",system-ui,sans-serif;container-type:inline-size;font-family:var(--sans);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
.cai-q *,.cai-q *::before,.cai-q *::after{box-sizing:border-box;margin:0;padding:0}
.cai-q a{color:var(--ink-2)}.cai-q a:hover{color:var(--ink)}
.cai-q-in{display:flex;flex-direction:column;gap:10px;padding:4px 0;transition:padding 150ms}
.cai-q-row{display:flex;align-items:center;gap:10px}
.cai-q-lbl{display:flex;align-items:center;gap:8px;margin-right:6px;font-size:1rem;font-weight:600;color:var(--ink);white-space:nowrap}
.cai-q-lbl svg{width:20px;height:20px;flex-shrink:0;color:var(--ink-2)}
.cai-q-sels{display:flex;gap:10px;min-width:0}
.cai-q-sel{position:relative;display:flex;min-width:0;flex:0 0 8rem}
.cai-q-sel:first-child{flex-basis:16rem}
.cai-q-sel select{appearance:none;-webkit-appearance:none;width:100%;min-height:44px;padding:0 36px 0 14px;background:var(--raised);border:1px solid var(--b-default);border-radius:5px;font:inherit;font-size:1rem;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color 150ms}
.cai-q-sel::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.75px solid var(--ink-2);border-bottom:1.75px solid var(--ink-2);transform:rotate(45deg);pointer-events:none}
@media (hover:hover){.cai-q-sel select:hover{border-color:var(--ink-2)}}
.cai-q select:focus-visible{outline:none;border-color:var(--sec-mid);box-shadow:0 0 0 3px var(--sec-pale)}
.cai-q-note{font-size:.8125rem;line-height:1.6;color:var(--muted);text-wrap:pretty}
[data-stuck] .cai-q-in{padding:10px 0}
[data-stuck] .cai-q-note{display:none}
@container (max-width:560px){
.cai-q-row{flex-direction:column;align-items:stretch;gap:8px}
.cai-q-sels{flex-wrap:wrap;gap:8px}
.cai-q-sel{flex:1 1 0}
.cai-q-sel:first-child{flex:0 0 100%}
[data-stuck] .cai-q-lbl{display:none}
[data-stuck] .cai-q-sels{gap:6px}
[data-stuck] .cai-q-sel select{min-height:40px}
}
/* 放進 WordPress 文章欄：版面規則會把 margin 強制成 auto，改成滿版、內容對齊文章欄寬 */
.is-layout-constrained > .cai-q-pin{max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding-inline:max(var(--wp--style--root--padding-left,16px),calc(50vw - var(--wp--style--global--content-size,60rem) / 2))}
/* 登入時 WordPress 工具列固定在頂端，置頂位置要讓開 */
.cai-q-pin{--cai-q-top:var(--wp-admin--admin-bar--height,0px)}
/* 手機三個選單擠成一行（使用者 2026-10-08）：人物組合佔較寬、字與內距收小 */
@container (max-width:560px){
.cai-q-sels{flex-wrap:nowrap;gap:6px}
.cai-q-sel{flex:1 1 0}
.cai-q-sel:first-child{flex:2.3 1 0}
.cai-q-sel select{font-size:.875rem;padding:0 24px 0 10px}
.cai-q-sel::after{right:10px;width:6px;height:6px;margin-top:-5px}
}
/* 手機（≤600px）WordPress 工具列不是固定的，置頂不用讓開它，否則上方會空一條縫 */
@media (max-width:600px){.cai-q-pin{--cai-q-top:0px}}

/* 原本外型：平常透明，捲到頂才白底＋底線（使用者 2026-10-08 改回）；前後留呼吸空間，置頂時加一點陰影 */
.prose > .cai-q-pin, .cai-q-pin{margin-top:var(--space-10,2.5rem)!important;margin-bottom:var(--space-2,.5rem)}
.cai-q-pin[data-stuck]{box-shadow:0 2px 8px rgba(21,23,28,.08)}

/* 面板黏住／鬆開時高度會變（說明文字收起）；瀏覽器的捲動錨定會因此把畫面拉回去，造成往上捲時抖動。有面板的頁面關掉錨定。 */
html:has(.cai-q-pin){overflow-anchor:none}

/* 平常加一圈細框，跟上下文字分開；置頂後維持整條白底（使用者 2026-10-08） */
.cai-q-pin:not([data-stuck]) .cai-q-in{padding:14px 18px;border:1px solid var(--color-border-soft,#DED9C8);border-radius:var(--radius-md,8px);background:transparent}