/* 20261016 右下角「聯絡我們」按鈕 + 展開選單（Templates.php、js/contact_fab.js） */
.cf-wrap{ --cf-c: var(--sp-primary, #365a9e); position:fixed; right:20px; bottom:24px; z-index:8990; display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-family:inherit; }
body.op-has-cartbar .cf-wrap{ transform:translateY(-74px); transition:transform .25s; }

/* 置頂：和「聯絡我們」右緣對齊的小圓鈕（顯示 / 隱藏由 front.js 控制） */
.cf-top{ display:none; width:44px; height:44px; padding:0; border:1px solid #e2e8f0; border-radius:50%; background:#fff; color:var(--cf-c); font-size:18px; line-height:42px; text-align:center; cursor:pointer; box-shadow:0 4px 14px rgba(15,23,42,.12); transition:transform .15s, box-shadow .15s; }
.cf-top:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(15,23,42,.18); }

.cf-btn{ position:relative; display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 20px; border:1px solid #e2e8f0; border-radius:14px; background:#fff; color:var(--cf-c); font-size:15px; font-weight:700; letter-spacing:.5px; cursor:pointer; box-shadow:0 6px 22px rgba(15,23,42,.14); transition:transform .15s, box-shadow .15s; }
.cf-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(15,23,42,.2); }
.cf-btn[aria-expanded="true"]{ background:var(--cf-c); color:#fff; border-color:var(--cf-c); }
.cf-btn i{ font-size:17px; }
.cf-ai{ position:absolute; top:-7px; right:-6px; height:18px; padding:0 6px; border-radius:9px; background:#16a34a; color:#fff; font-size:10.5px; font-style:normal; font-weight:700; line-height:18px; letter-spacing:0; box-shadow:0 0 0 2px #fff; }

.cf-menu{ width:280px; max-width:calc(100vw - 32px); background:#fff; border-radius:16px; padding:8px; box-shadow:0 12px 40px rgba(15,23,42,.18); border:1px solid #eef2f7; transform-origin:bottom right; animation:cfIn .16s ease-out; }
.cf-menu[hidden]{ display:none; }
@keyframes cfIn{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
.cf-item{ display:flex; align-items:center; gap:12px; width:100%; padding:10px; border:0; border-radius:12px; background:none; text-align:left; text-decoration:none !important; color:#0f172a !important; cursor:pointer; font:inherit; }
.cf-item:hover, .cf-item:focus-visible{ background:#f1f5f9; outline:none; }
.cf-ic{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; flex:0 0 auto; }
.cf-ic.ai{ background:#16a34a; }
.cf-ic.line{ background:#06c755; }
.cf-ic.fb{ background:#0a7cff; }
.cf-ic.tel{ background:var(--cf-c); }
.cf-ic.mail{ background:#f59e0b; }
.cf-tx small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cf-tx{ display:flex; flex-direction:column; min-width:0; }
.cf-tx b{ font-size:14.5px; font-weight:700; line-height:1.35; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cf-tx small{ font-size:12px; color:#64748b; line-height:1.4; margin-top:1px; }
.cf-badge{ font-style:normal; font-size:10.5px; font-weight:700; color:#15803d; background:#dcfce7; border-radius:6px; padding:1px 6px; }

/* 手機：底部有 TabBar，往上讓出空間；按鈕縮成圖示 + 短字 */
@media (max-width:767px){
	.cf-wrap{ right:14px; bottom:78px; }
	.cf-btn{ height:46px; padding:0 16px; font-size:14px; }
	.cf-top{ width:40px; height:40px; line-height:38px; font-size:16px; }
}