/* ============================================================================
   🚗 預約系統介紹頁（/booking-system「汽車美容一站式預約系統」；v11 追加 pt，10/30 晚第三版、深夜 pt4 改名）
   套前台版面與 theme.css 的色票（深色＋橘色）。這裡只放這一頁自己的：模擬手機畫面（pt-phone、pt-m-*）、互動示範（預約、工單、抽獎、商城、試算）、
   方案卡、常見問題、申請表單的選項膠囊。全部 pt- 前綴，不跟 theme.css 打架；手機 390、360 寬都驗過。
   ============================================================================ */
.pt-page section[id] { scroll-margin-top: 80px; }
.pt-eyebrow { color: hsl(var(--primary)); font-size: .78rem; letter-spacing: .28em; font-weight: 700; margin: 0 0 .6rem; }
.pt-head { text-align: center; max-width: 760px; margin: 0 auto 2rem; }
.pt-h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 900; line-height: 1.25; margin: 0 0 .75rem; }
.pt-lead { color: hsl(var(--muted-foreground)); margin: 0; line-height: 1.7; }
.pt-caption { color: hsl(var(--muted-foreground)); font-size: .8rem; }
.pt-num { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .7rem; letter-spacing: .22em; color: hsl(var(--primary)); margin-bottom: .4rem; }
.pt-card { transition: transform .2s, border-color .2s; }
.pt-card:hover { transform: translateY(-2px); border-color: hsl(var(--primary) / .4); }
.pt-ico { width: 40px; height: 40px; border-radius: 50%; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.pt-ico-lg { width: 52px; height: 52px; font-size: 1.5rem; margin-bottom: .75rem; }

/* ---- 模擬手機畫面（跟前台同色系） ---- */
.pt-phones { display: flex; justify-content: center; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.pt-phone-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 320px; }
.pt-phone { width: 300px; max-width: 100%; background: hsl(var(--background)); border: 6px solid #1a1d23; border-radius: 32px; padding: 12px 12px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); color: hsl(var(--foreground)); font-size: .8rem; position: relative; text-align: left; }
.pt-phone::before { content: ''; display: block; width: 36%; height: 14px; background: #1a1d23; border-radius: 999px; margin: 0 auto 10px; }
.pt-phone-sm { width: 270px; }
.pt-feature-card { width: 300px; max-width: 100%; padding: 16px 14px; font-size: .8rem; text-align: left; }
.pt-m-top { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid hsl(var(--border) / .6); margin-bottom: 10px; }
.pt-m-logo { width: 26px; height: 26px; border-radius: 50%; background-image: var(--gradient-primary); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: hsl(var(--primary-foreground)); }
.pt-m-top b { display: block; font-size: .78rem; line-height: 1.15; }
.pt-m-top small { color: hsl(var(--muted-foreground)); font-size: .62rem; }
.pt-m-hero { text-align: center; padding: 6px 0 10px; }
.pt-m-h { font-weight: 800; font-size: 1rem; text-align: center; margin: 2px 0; }
.pt-m-h.grad, .pt-m-h .grad { -webkit-background-clip: text; background-clip: text; color: transparent; background-image: var(--gradient-primary); }   /* 表情符號放在 .grad 外面，不然會變成色塊 */
/* 主視覺：兩支畫面並排（桌機 col-lg-7 放得下 2 × 260） */
.pt-hero .pt-phones { gap: 12px; }
.pt-hero .pt-phone-col { flex-basis: 240px; }
.pt-hero .pt-phone, .pt-hero .pt-feature-card { width: 260px; }
.pt-m-sub { color: hsl(var(--muted-foreground)); font-size: .68rem; text-align: center; margin-bottom: 8px; }
.pt-m-btn { display: block; width: 100%; text-align: center; padding: 8px 10px; border-radius: 999px; background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); font-weight: 700; font-size: .78rem; border: 0; line-height: 1.3; }
.pt-m-btn.mt-2 { margin-top: .5rem; }
button.pt-m-btn { cursor: pointer; transition: opacity .15s; }
button.pt-m-btn:hover { opacity: .9; }
button.pt-m-btn:disabled { opacity: .5; cursor: default; }
.pt-m-btn-o { background-image: none; background: transparent; border: 1px solid hsl(var(--primary)); color: hsl(var(--primary)); }
.pt-m-hero .d-flex .pt-m-btn { width: auto; flex: 1; padding: 7px 6px; font-size: .72rem; }
.pt-m-link { display: block; width: 100%; background: none; border: 0; color: hsl(var(--muted-foreground)); font-size: .74rem; padding: 6px; cursor: pointer; }
.pt-m-link:hover { color: hsl(var(--foreground)); }
.pt-m-card { background: hsl(var(--card) / .8); border: 1px solid hsl(var(--border) / .5); border-radius: 12px; padding: 10px; margin-top: 8px; }
.pt-m-card .t { font-weight: 700; font-size: .78rem; }
.pt-m-card .s { color: hsl(var(--muted-foreground)); font-size: .66rem; margin-top: 2px; }
.pt-m-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid hsl(var(--border) / .5); font-size: .72rem; }
.pt-m-row:first-child { border-top: 0; padding-top: 0; }
.pt-m-tag { font-size: .6rem; padding: 2px 7px; border-radius: 999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); white-space: nowrap; }
.pt-m-tag.warm { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); font-weight: 700; }
.pt-m-tag.ok { background: #1f6f3f; color: #d8f5e0; }
.pt-m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.pt-m-stat { background: hsl(var(--card) / .8); border: 1px solid hsl(var(--border) / .5); border-radius: 10px; padding: 8px 3px; text-align: center; }
.pt-m-stat b { display: block; color: hsl(var(--primary)); font-size: .86rem; white-space: nowrap; }
.pt-m-stat span { font-size: .6rem; color: hsl(var(--muted-foreground)); }
.pt-m-input { display: block; width: 100%; background: hsl(var(--background)); border: 1px solid hsl(var(--input)); color: hsl(var(--foreground)); border-radius: 8px; padding: 7px 10px; font-size: .74rem; margin-top: 8px; }
.pt-m-input:focus { outline: none; border-color: hsl(var(--primary)); }
.pt-m-input:disabled { opacity: .6; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip { padding: 5px 10px; border-radius: 999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: .7rem; border: 1px solid transparent; line-height: 1.2; }
.pt-chip.on { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); font-weight: 700; }
button.pt-chip { cursor: pointer; }
.pt-cal-wk, .pt-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.pt-cal-wk span { font-size: .6rem; color: hsl(var(--muted-foreground)); padding: 2px 0; }
.pt-cal-d { display: inline-flex; align-items: center; justify-content: center; height: 27px; border: 0; background: none; border-radius: 50%; font-size: .7rem; color: hsl(var(--foreground)); }
button.pt-cal-d { cursor: pointer; }
button.pt-cal-d:hover { background: hsl(var(--secondary)); }
.pt-cal-d.is-off { color: hsl(var(--muted-foreground) / .45); cursor: default; }
.pt-cal-d.on { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); font-weight: 700; }
.pt-bay-mini { display: grid; grid-template-columns: 38px 1fr 1fr; gap: 3px; font-size: .62rem; align-items: stretch; }
.pt-bay-mini span { color: hsl(var(--muted-foreground)); line-height: 24px; }
.pt-bay-mini i { display: block; height: 24px; border-top: 1px dashed hsl(var(--border)); font-style: normal; line-height: 24px; padding: 0 5px; overflow: hidden; }
.pt-bay-mini i.me { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); border: 0; border-radius: 6px; font-weight: 700; }
.pt-bay-mini i.busy { background: hsl(var(--secondary)); border: 0; border-radius: 6px; color: hsl(var(--secondary-foreground)); }
.pt-ph-steps { list-style: none; padding: 0; margin: 0; }
.pt-ph-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid hsl(var(--border)); border-radius: 10px; margin-bottom: 6px; font-size: .8rem; color: hsl(var(--muted-foreground)); }
.pt-ph-steps li i { font-style: normal; width: 16px; text-align: center; }
.pt-ph-steps li.is-done { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / .5); }
.pt-ph-steps li.is-done i { color: hsl(var(--primary)); }
.pt-ph-steps li.is-now { color: hsl(var(--foreground)); border-color: hsl(var(--primary)); font-weight: 700; box-shadow: 0 0 0 2px hsl(var(--primary) / .35); }

/* ---- 煩惱（看解法）、試算 ---- */
.pt-pain-toggle { background: none; border: 0; color: hsl(var(--muted-foreground)); font-size: .78rem; padding: 0; cursor: pointer; }
.pt-pain-toggle::after { content: '看解法 +'; }
.pt-pain-toggle[aria-expanded="true"]::after { content: '收合 −'; }
.pt-pain-toggle:hover { color: hsl(var(--primary)); }
.pt-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 767.98px) { .pt-calc { grid-template-columns: 1fr; } }
.pt-range-label { display: flex; justify-content: space-between; font-size: .88rem; color: hsl(var(--secondary-foreground)); margin: 16px 0 4px; }
.pt-range-label b { color: hsl(var(--foreground)); }
.pt-result { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 16px; padding: 22px; text-align: center; }
.pt-result .lbl { color: hsl(var(--muted-foreground)); font-size: .8rem; }
.pt-result .big { font-size: 2rem; font-weight: 900; line-height: 1.15; margin: 2px 0 12px; }
.pt-result .foot { color: hsl(var(--muted-foreground)); font-size: .72rem; margin: 0; }

/* ---- 五個入口 ---- */
.pt-portals { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
@media (max-width: 767.98px) { .pt-portals { grid-template-columns: 1fr; } }
.pt-portal-list { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 767.98px) { .pt-portal-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } }
.pt-portal-btn { text-align: left; background: hsl(var(--card) / .8); border: 1px solid hsl(var(--border) / .5); color: hsl(var(--secondary-foreground)); border-radius: 12px; padding: 12px 14px; font-size: .92rem; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 8px; transition: border-color .15s; }
.pt-portal-btn:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / .5); }
.pt-portal-btn.is-on { border-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 700; box-shadow: 0 0 0 1px hsl(var(--primary) / .3); }
.pt-split { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 575.98px) { .pt-split { grid-template-columns: 1fr; justify-items: center; } .pt-split > div:last-child { justify-self: stretch; } }
.pt-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pt-tags li { border: 1px solid hsl(var(--border)); border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; color: hsl(var(--secondary-foreground)); }

/* ---- 線上預約示範、施工工單示範 ---- */
.pt-steps4 { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (max-width: 767.98px) { .pt-steps4 { grid-template-columns: repeat(2, 1fr); } }
.pt-steps4 li { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .1rem; color: hsl(var(--muted-foreground)); font-size: .88rem; transition: border-color .2s, color .2s; }
.pt-steps4 li b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; letter-spacing: .15em; }
.pt-steps4 li.is-on { border-color: hsl(var(--primary)); color: hsl(var(--foreground)); box-shadow: 0 0 0 1px hsl(var(--primary) / .3); }
.pt-steps4 li.is-on b { color: hsl(var(--primary)); }
.pt-steps4 li.is-done { color: hsl(var(--secondary-foreground)); border-color: hsl(var(--primary) / .4); }
.pt-demo-grid { display: grid; grid-template-columns: 330px 1fr; gap: 20px; align-items: start; }
.pt-demo-grid-wo { grid-template-columns: 1fr 330px; }
@media (max-width: 767.98px) { .pt-demo-grid, .pt-demo-grid-wo { grid-template-columns: 1fr; } .pt-demo-grid-wo .pt-phone-col { order: -1; } }
.pt-demo-grid .pt-phone-col { max-width: none; }
#bkForm.is-locked { opacity: .75; }
.pt-notify-panel { min-height: 100%; }
.pt-out-sec { margin-bottom: 16px; animation: pt-in .4s ease; }
@keyframes pt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pt-out-sec { animation: none; } }
.pt-out-label { font-size: .76rem; color: hsl(var(--primary)); letter-spacing: .06em; margin-bottom: 8px; font-weight: 600; }
.pt-msg-who { font-size: .72rem; color: hsl(var(--muted-foreground)); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.pt-msg-who::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #06c755; }
.pt-msg-mail .pt-msg-who::before { background: #3b82f6; }
.pt-bubble { background: #fff; color: #111; border-radius: 4px 16px 16px 16px; padding: 12px 14px; font-size: .84rem; line-height: 1.6; max-width: 440px; }
.pt-bubble b { display: block; margin-bottom: 4px; }
.pt-mail { background: #fff; color: #111; border-radius: 12px; overflow: hidden; font-size: .84rem; max-width: 480px; }
.pt-mail-h { display: flex; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #eee; }
.pt-mail-h span { color: #888; width: 44px; flex-shrink: 0; }
.pt-mail-b { padding: 12px 14px; line-height: 1.6; }
.pt-mail-b .ttl { color: #f97316; font-weight: 800; margin-bottom: 6px; }
.pt-bay { display: grid; grid-template-columns: 46px 1fr 1fr; gap: 4px; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 10px; font-size: .74rem; max-width: 480px; }
.pt-bay .h { color: hsl(var(--secondary-foreground)); text-align: center; padding: 4px 0; font-weight: 700; }
.pt-bay .t { color: hsl(var(--muted-foreground)); text-align: right; padding-right: 6px; line-height: 30px; }
.pt-bay .cell { height: 30px; border-top: 1px dashed hsl(var(--border)); }
.pt-bay .blk { border-radius: 8px; padding: 6px 8px; font-size: .72rem; line-height: 1.3; overflow: hidden; }
.pt-bay .blk.me { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); font-weight: 700; }
.pt-bay .blk.busy { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.pt-wo-log { min-height: 320px; }
.pt-wo-list { list-style: none; padding: 0; margin: 12px 0 0; }
.pt-wo-list > li { border-top: 1px solid hsl(var(--border) / .6); padding: 10px 0; font-size: .88rem; color: hsl(var(--secondary-foreground)); display: flex; gap: 10px; align-items: flex-start; animation: pt-in .3s ease; }
.pt-wo-list > li > b { flex-shrink: 0; background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); border-radius: 999px; padding: 2px 10px; font-size: .74rem; }
.pt-final { list-style: none; padding: 12px 0 0; margin: 10px 0 0; border-top: 1px solid hsl(var(--primary) / .5); }
.pt-final li { padding: 6px 0; font-size: .88rem; color: hsl(var(--foreground)); }

/* ---- 抽獎車庫、商城 ---- */
.pt-garage { position: relative; height: 170px; border: 2px dashed hsl(var(--border)); border-radius: 14px; overflow: hidden; background: hsl(var(--background)); margin: 12px 0; }
.pt-door { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, #2b2e35 0 11px, #1a1d23 11px 15px); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.pt-door::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: hsl(var(--primary)); }
.pt-garage.is-open .pt-door { transform: translateY(-100%); }
.pt-prize { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.pt-prize .ico { font-size: 2.4rem; line-height: 1; }
.pt-prize .t { font-weight: 800; font-size: 1.05rem; }
.pt-prize .s { color: hsl(var(--muted-foreground)); font-size: .76rem; }
.pt-prod { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid hsl(var(--border) / .6); font-size: .86rem; }
.pt-prod .pr { color: hsl(var(--primary)); font-size: .78rem; }
.pt-qty { display: flex; align-items: center; gap: 6px; }
.pt-qty button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); color: hsl(var(--foreground)); cursor: pointer; line-height: 1; }
.pt-qty button:hover { border-color: hsl(var(--primary)); }
.pt-qty .q { min-width: 20px; text-align: center; }
.pt-total { border-top: 1px solid hsl(var(--primary) / .5); margin-top: 8px; padding-top: 10px; text-align: right; font-weight: 800; }

/* ---- 方案、常見問題、申請表單 ---- */
.pt-bill { display: inline-flex; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 3px; margin: 0 auto 24px; }
.pt-bill button { border: 0; background: none; color: hsl(var(--muted-foreground)); padding: 7px 18px; border-radius: 999px; font-size: .88rem; cursor: pointer; }
.pt-bill button.is-on { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); font-weight: 700; }
.pt-plan { position: relative; }
.pt-hot { position: absolute; top: 1rem; right: 1rem; background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); font-size: .72rem; font-weight: 800; padding: .2rem .6rem; border-radius: 999px; }
.pt-price { font-size: 2rem; font-weight: 900; }
.pt-ynote { min-height: 1.3em; }
.pt-check { list-style: none; padding: 0; margin: 0; }
.pt-check li { padding: .3rem 0; color: hsl(var(--secondary-foreground)); font-size: .92rem; border-top: 1px solid hsl(var(--border) / .5); }
.pt-check li:first-child { border-top: 0; }
.pt-check li::before { content: '✓'; color: hsl(var(--primary)); font-weight: 800; margin-right: .5rem; }
.pt-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.pt-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: none; border: 0; color: hsl(var(--foreground)); font-weight: 700; font-size: .98rem; padding: 16px 18px; text-align: left; cursor: pointer; }
.pt-faq-q::after { content: '+'; color: hsl(var(--primary)); font-size: 1.2rem; font-weight: 400; }
.pt-faq-q[aria-expanded="true"]::after { content: '−'; }
.pt-faq-a { padding: 0 18px 16px; color: hsl(var(--muted-foreground)); font-size: .9rem; line-height: 1.7; }
.pt-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pt-pills label { margin: 0; }
.pt-pills input { position: absolute; opacity: 0; width: 0; height: 0; }
.pt-pill { display: inline-block; border: 1px solid hsl(var(--border)); color: hsl(var(--secondary-foreground)); border-radius: 999px; padding: .4rem .9rem; font-size: .86rem; font-weight: 600; cursor: pointer; user-select: none; }
.pt-pills input:checked + .pt-pill { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); border-color: transparent; }
.pt-pills input:focus-visible + .pt-pill { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.pt-pills.is-invalid .pt-pill { border-color: hsl(var(--destructive)); }
.pt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }