/* =========================================================================
   e路有網 eSIM — 設計系統（由 UI/UX 交付稿 index.html 匯入，內容未改動）
   ========================================================================= */
/* =========================================================================
   e路有網 eSIM — Design System
   Palette : Airline (navy #1E3A8A + booking orange #EA580C)  — 取自 LOGO
   Style   : Minimalism & Swiss  |  Pattern: Funnel (3-step conversion)
   Motion  : Standard (200-250ms) |  Density: Standard
   Responsive: 標準 media query，斷點 1080 / 900 / 767 / 400。
   （交付稿原本用 container query 驅動桌機上的手機預覽框，導入後改為真 RWD）
   ========================================================================= */

/* --- 1. Tokens --------------------------------------------------------- */
:root{
  --primary:#1E3A8A; --on-primary:#FFFFFF; --secondary:#3B82F6;
  --accent:#EA580C;  --on-accent:#FFFFFF;
  --background:#EFF6FF; --foreground:#0F172A; --card:#FFFFFF;
  --muted:#E9EEF5; --muted-fg:#475569; --border:#D8E5F8;
  --destructive:#DC2626; --success:#059669; --ring:#1E3A8A;

  /* Brand hues sampled from the logo */
  --navy-900:#0F2557; --navy-700:#1E3A8A; --navy-600:#2450B5;
  --brand-blue:#2D7FF0; --blue-100:#DCEAFE; --blue-50:#F2F7FF;
  --brand-orange:#F47B20; --orange-50:#FFF4EC; --orange-100:#FFE2CC;

  /* Spacing (density 5/10) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* Shadows — soft, low-contrast, per the 背景淡雅 brief */
  --sh-sm:0 1px 2px rgba(15,37,87,.05);
  --sh-md:0 1px 2px rgba(15,37,87,.04), 0 6px 18px rgba(15,37,87,.06);
  --sh-lg:0 2px 4px rgba(15,37,87,.04), 0 16px 40px rgba(15,37,87,.10);
  --sh-xl:0 24px 70px rgba(15,37,87,.18);

  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:150ms; --t:220ms; --t-slow:320ms;

  --font:'Rubik','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --appbar-h:68px; --tabbar-h:62px;
}

/* --- 2. Reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); font-size:16px;
  line-height:1.75;            /* CJK 需要比 Latin 預設 1.5 更寬的行距 */
  letter-spacing:.02em; color:var(--foreground);
  background:
    radial-gradient(900px 520px at 10% -10%, var(--blue-100) 0%, transparent 60%),
    radial-gradient(680px 420px at 94% 2%, #FFE9D8 0%, transparent 62%),
    linear-gradient(180deg,#F8FBFF 0%, var(--background) 100%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;line-height:1.3;letter-spacing:-.01em;font-weight:700;color:var(--navy-900);text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--navy-700);text-decoration:none}
ul{margin:0;padding:0;list-style:none}
svg{display:block;flex:none}
/* hidden 屬性要贏過 .fab__menu{display:grid}、.field{display:grid} 這類規則，否則 el.hidden=true 沒用（2026-09-14 客服選單一載入就打開就是這個） */
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--brand-blue);outline-offset:2px;border-radius:6px}
::selection{background:var(--orange-100);color:var(--navy-900)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:50%;top:0;transform:translate(-50%,-140%);z-index:200;
  background:var(--navy-900);color:#fff;padding:10px 20px;
  border-radius:0 0 var(--r-md) var(--r-md);font-weight:700;transition:transform var(--t) var(--ease);
}
.skip-link:focus-visible{transform:translate(-50%,0)}
/* Rubik 的等寬數字讓價格欄位對齊 */
.num,.price,.day-btn b,.stat b{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* --- 3. Shell ----------------------------------------------------------- */
/* 100dvh：行動瀏覽器網址列收合時 100vh 會跳動，dvh 才是實際可視高度 */
.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;position:relative}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--sp-5)}
.main{flex:1;padding-bottom:var(--sp-8)}

/* --- 4. App bar -------------------------------------------------------- */
.appbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border)}
.appbar__in{display:flex;align-items:center;gap:var(--sp-5);height:var(--appbar-h)}
.brand{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.brand img{height:38px;width:auto}
.brand__tag{font-size:12px;color:var(--muted-fg);font-weight:500;padding-left:var(--sp-3);border-left:1px solid var(--border);line-height:1.4}
.nav{display:flex;align-items:center;gap:var(--sp-1);margin-inline-start:auto}
.nav a{padding:9px 14px;border-radius:var(--r-full);font-weight:500;font-size:15px;white-space:nowrap;color:var(--muted-fg);transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.nav a:hover{background:var(--blue-50);color:var(--navy-700)}
.nav a[aria-current='page']{color:var(--navy-900);font-weight:700;background:var(--blue-100)}
.appbar__act{display:flex;align-items:center;gap:var(--sp-2);flex:none}
/* 中英切換 TW｜EN（桌機在導覽列常見問題旁，手機在右上角）：淺色膠囊底（站上的 --muted）、目前語言站上慣用的深藍實心、另一個灰字（2026-09-14 依使用者參考圖；底色用站內中性色不用藍，選中色使用者要藍不要橘） */
.lang{display:inline-flex;align-items:center;gap:2px;margin-inline-start:var(--sp-2);padding:3px;border-radius:var(--r-full);background:var(--muted);border:1px solid var(--border);font-size:12px;font-weight:800;letter-spacing:.06em}
.lang button{min-width:40px;height:26px;padding:0 10px;border-radius:var(--r-full);color:var(--muted-fg);transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.lang button:hover{color:var(--navy-700)}
.lang button[aria-pressed='true']{background:var(--primary);color:var(--on-primary);box-shadow:var(--sh-sm)}
.lang button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.lang--m{display:none;margin-inline-start:0}
.lang--m button{min-width:36px;height:24px;padding:0 8px}
@media (max-width:767px){.lang--m{display:inline-flex}}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-full);color:var(--navy-700);transition:background var(--t) var(--ease)}
.icon-btn:hover{background:var(--blue-100)}
.cart-dot{
  position:absolute;top:4px;right:3px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-full);
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center;
  border:2px solid #fff;font-variant-numeric:tabular-nums;
}

/* --- 5. Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;padding:0 var(--sp-5);border-radius:var(--r-full);
  font-weight:700;font-size:16px;letter-spacing:.02em;white-space:nowrap;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             transform var(--t-fast) var(--ease),border-color var(--t) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn--cta{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px rgba(234,88,12,.28)}
.btn--cta:hover:not([disabled]){background:#C2410C;box-shadow:0 10px 24px rgba(234,88,12,.34)}
.btn--primary{background:var(--primary);color:var(--on-primary);box-shadow:0 6px 16px rgba(30,58,138,.22)}
.btn--primary:hover:not([disabled]){background:var(--navy-900)}
.btn--outline{background:var(--card);color:var(--navy-700);border:1.5px solid var(--border)}
.btn--outline:hover:not([disabled]){border-color:var(--navy-700);background:var(--blue-50)}
.btn--ghost{color:var(--muted-fg);min-height:44px;padding:0 var(--sp-3)}
.btn--ghost:hover{background:var(--muted);color:var(--navy-900)}
.btn--block{width:100%}
.btn--lg{min-height:56px;font-size:17px;padding-inline:var(--sp-6)}
.btn--sm{min-height:40px;font-size:14px;padding-inline:var(--sp-4)}
.btn.is-loading{pointer-events:none;color:transparent !important;position:relative}
.btn.is-loading::after{
  content:'';position:absolute;inset:0;margin:auto;width:20px;height:20px;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
}
.btn--outline.is-loading::after{border-color:rgba(30,58,138,.25);border-top-color:var(--navy-700)}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- 6. Cards + primitives --------------------------------------------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-md)}
.card--pad{padding:var(--sp-5)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-full);font-size:12px;font-weight:700;line-height:1.7;letter-spacing:.03em}
.badge--hot{background:var(--orange-50);color:#C2410C}
.badge--blue{background:var(--blue-100);color:var(--navy-700)}
.badge--save{background:#DCFCE7;color:#047857}
.badge--soft{background:var(--muted);color:var(--muted-fg)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-full);background:var(--card);border:1px solid var(--border);font-size:13px;font-weight:500;color:var(--muted-fg);box-shadow:var(--sh-sm)}
.pill svg{color:var(--brand-blue)}
.flag{
  display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:var(--r-full);
  background:var(--blue-50);border:1px solid var(--border);
  font-family:'Noto Color Emoji',var(--font);font-size:24px;line-height:1;overflow:hidden;
}
.flag--sm{width:34px;height:34px;font-size:17px}
.flag--lg{width:60px;height:60px;font-size:32px}
.muted{color:var(--muted-fg)}
.strike{text-decoration:line-through;color:#94A3B8;font-weight:500}
.price{font-weight:700;color:var(--navy-900)}
.price em{font-style:normal;font-size:.68em;font-weight:600;margin-right:2px}
.section{padding-block:var(--sp-8)}
.section__head{margin-bottom:var(--sp-6)}
.section__head h2{font-size:30px;font-weight:900}
.section__head p{color:var(--muted-fg);margin-top:var(--sp-2);max-width:56ch}
.divider{height:1px;background:var(--border);border:0;margin-block:var(--sp-5)}

/* --- 7. Funnel progress + page head ------------------------------------ */
.pagehead{padding-top:var(--sp-6);padding-bottom:var(--sp-5)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted-fg);flex-wrap:wrap}
.crumbs a:hover{color:var(--navy-700);text-decoration:underline}
.crumbs svg{color:#B4C6E0}
.pagehead h1{font-size:30px;font-weight:900;margin-top:var(--sp-3)}
.pagehead .lede{color:var(--muted-fg);margin-top:var(--sp-2);max-width:60ch}
.stepper{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.stepper__i{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.stepper__n{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-full);background:var(--muted);color:var(--muted-fg);font-size:14px;font-weight:700;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.stepper__t{font-size:14px;font-weight:500;color:var(--muted-fg)}
.stepper__i.is-done .stepper__n{background:var(--blue-100);color:var(--navy-700)}
.stepper__i.is-done .stepper__t{color:var(--navy-700)}
.stepper__i.is-now .stepper__n{background:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--blue-100)}
.stepper__i.is-now .stepper__t{color:var(--navy-900);font-weight:700}
.stepper__bar{flex:1;height:2px;background:var(--border);border-radius:2px;min-width:12px}
.stepper__i.is-done + .stepper__bar{background:var(--secondary)}

/* --- 8. Home ----------------------------------------------------------- */
.hero{padding-block:var(--sp-8) var(--sp-7)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}
.hero h1{font-size:clamp(34px,4vw,50px);font-weight:900;line-height:1.22;letter-spacing:-.02em}
.hero h1 span{color:var(--brand-orange)}
.hero .lede{font-size:17px;color:var(--muted-fg);margin-top:var(--sp-4);max-width:46ch}
.hero__cta{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap}
.hero__pills{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--sp-4);padding:6px 14px 6px 8px;border-radius:var(--r-full);background:var(--card);border:1px solid var(--border);box-shadow:var(--sh-sm);font-size:13px;font-weight:600;color:var(--navy-700)}
.eyebrow svg{color:var(--brand-orange)}
.hero__card{position:relative}
.hero__card::before{content:'';position:absolute;inset:-18px -14px -22px;background:linear-gradient(150deg,rgba(45,127,240,.16),rgba(244,123,32,.14));filter:blur(34px);border-radius:50%}
.miniflow{position:relative;z-index:1;padding:var(--sp-5);display:grid;gap:var(--sp-3)}
.miniflow__row > svg{color:var(--success)}
.miniflow__row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--blue-50);border:1px solid var(--border)}
.miniflow__row b{font-size:15px;color:var(--navy-900);display:block}
.miniflow__row small{color:var(--muted-fg);font-size:12.5px}
.miniflow__row .n{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:var(--r-full);background:var(--primary);color:#fff;font-size:13px;font-weight:700}
.miniflow__total{display:flex;align-items:baseline;justify-content:space-between;padding:var(--sp-4);border-radius:var(--r-md);background:linear-gradient(135deg,var(--navy-900),var(--navy-600));color:#fff}
.miniflow__total span{font-size:13px;opacity:.85}
.miniflow__total .price{color:#fff;font-size:28px;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.stat{text-align:center;padding:var(--sp-4)}
.stat b{display:block;font-size:30px;font-weight:700;color:var(--navy-700);line-height:1.2}
.stat span{font-size:13.5px;color:var(--muted-fg)}
.grid-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.feat{padding:var(--sp-5)}
.feat__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-md);background:var(--blue-100);color:var(--navy-700);margin-bottom:var(--sp-4)}
.feat h3{font-size:17px}
.feat p{color:var(--muted-fg);font-size:14.5px;margin-top:6px}
.grid-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.how{position:relative;padding:var(--sp-5);background:transparent;border:0;box-shadow:none}
.how__n{font-size:34px;font-weight:700;color:var(--blue-100);line-height:1}
.how h3{font-size:17px;margin-top:var(--sp-2)}
.how p{color:var(--muted-fg);font-size:14.5px;margin-top:4px}
.how::after{content:'';position:absolute;top:18px;right:-10px;width:20px;height:2px;background:var(--border)}
.how:last-child::after{display:none}
.section__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.section__acts{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.rev-avg{display:inline-flex;align-items:center;gap:8px;color:var(--muted-fg);flex-wrap:wrap}
.rev-count{display:inline-flex;align-items:center;gap:2px;color:var(--navy-700);font-weight:600}
.rev-count:hover{text-decoration:underline}
.rev-done{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-weight:600;min-height:48px}
.pagehead .section__head--row{margin-bottom:0}
dialog.modal{border:0;padding:0;background:transparent;width:min(560px,calc(100vw - 32px));max-width:none;margin:auto;overflow:visible}
dialog.modal::backdrop{background:rgba(15,37,87,.45);backdrop-filter:blur(2px)}
.modal__card{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-xl);padding:var(--sp-5);display:grid;gap:var(--sp-4);max-height:calc(100dvh - 32px);overflow:auto}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.modal__head h3{font-size:20px;font-weight:800}
.rev-avg b{color:var(--navy-900);font-size:18px}
.rev__stars-off{display:inline-flex;gap:2px;color:#E2E8F0}
.grid-rev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.rev{padding:var(--sp-5);display:flex;flex-direction:column}
.rev__stars{display:inline-flex;gap:2px;color:#F59E0B;margin-bottom:var(--sp-3);vertical-align:middle}
.rev-avg .rev__stars,.lede .rev__stars{margin-bottom:0}
.review-form h3{font-size:18px;font-weight:800;margin-bottom:var(--sp-2)}
.starpick{display:flex;align-items:center;gap:2px}
.starpick button{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-full);color:#CBD5E1;transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.starpick button:hover{transform:scale(1.08)}
.starpick button.lit{color:#F59E0B}
.starpick__t{margin-left:8px;font-weight:700;color:var(--navy-700)}
textarea.input{min-height:110px;resize:vertical;line-height:1.6;font:inherit}
.rev p{font-size:14.5px;color:#334155}
.rev__by{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-4)}   /* 卡片等高時會員資訊固定貼底 */
.rev__by .av{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-full);background:var(--blue-100);color:var(--navy-700);font-weight:700;font-size:15px}
.rev__by b{font-size:14.5px;display:block;line-height:1.4}
.rev__by small{color:var(--muted-fg);font-size:12.5px}
.faq{display:grid;gap:var(--sp-3);max-width:820px}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:box-shadow var(--t) var(--ease)}
.faq details[open]{box-shadow:var(--sh-md)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);cursor:pointer;font-weight:700;color:var(--navy-900);list-style:none;transition:background var(--t) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--blue-50)}
.faq summary svg{color:var(--muted-fg);transition:transform var(--t) var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{padding:0 var(--sp-5) var(--sp-5);color:var(--muted-fg);font-size:15px}
.cta-band{padding:var(--sp-7);border-radius:var(--r-xl);text-align:center;background:linear-gradient(135deg,var(--navy-900),var(--navy-600) 55%,#2E6BD8);color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:'';position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:rgba(244,123,32,.28);filter:blur(46px)}
.cta-band h2{color:#fff;font-size:30px;font-weight:900;position:relative}
.cta-band p{color:rgba(255,255,255,.82);margin-top:var(--sp-2);position:relative}
.cta-band .btn{margin-top:var(--sp-5);position:relative}

/* --- 9. Step 1 · Country picker ---------------------------------------- */
.search{position:relative;display:flex;align-items:center;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-full);padding:0 var(--sp-5);height:56px;box-shadow:var(--sh-md);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(30,58,138,.12)}
.search svg{color:var(--muted-fg);flex:none}
.search input{flex:1;border:0;outline:0;background:none;padding:0 var(--sp-3);font-size:16px;min-width:0}
.search input::placeholder{color:#94A3B8}
.tabs{display:flex;gap:var(--sp-2);overflow-x:auto;padding-block:var(--sp-2);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:9px 18px;border-radius:var(--r-full);background:var(--card);border:1px solid var(--border);font-size:14.5px;font-weight:500;color:var(--muted-fg);transition:all var(--t) var(--ease)}
.tab:hover{border-color:var(--navy-600);color:var(--navy-700)}
.tab[aria-pressed='true']{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.grid-country{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.country{display:flex;align-items:center;gap:var(--sp-3);text-align:left;width:100%;padding:var(--sp-4);background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease),background var(--t) var(--ease)}
.country:hover{border-color:var(--navy-600);box-shadow:var(--sh-lg);transform:translateY(-2px)}
.country__b{min-width:0;flex:1}
.country__n{display:flex;align-items:center;gap:6px}
.country__n b{font-size:16px;font-weight:700;color:var(--navy-900)}
.country__en{font-size:12.5px;color:var(--muted-fg);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.country__p{font-size:13px;color:var(--muted-fg);margin-top:3px}
.country__p strong{color:var(--accent);font-weight:700}
.country__go{color:#B4C6E0;transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.country:hover .country__go{color:var(--navy-700);transform:translateX(3px)}
.empty{text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--muted-fg)}
.empty svg{margin:0 auto var(--sp-4);color:#B4C6E0}
.empty b{display:block;color:var(--navy-900);font-size:17px;margin-bottom:6px}

/* --- 10. Step 2 · Data tiers ------------------------------------------- */
.grid-tier{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3);align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;text-align:left;padding:var(--sp-5) var(--sp-4);background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease)}
.tier:hover{border-color:var(--navy-600);box-shadow:var(--sh-lg);transform:translateY(-3px)}
.tier--hot{border-color:var(--brand-orange);box-shadow:0 8px 26px rgba(244,123,32,.14)}
.tier__flag{position:absolute;top:-11px;left:var(--sp-4);padding:2px 10px;border-radius:var(--r-full);background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em}
.bars{display:flex;align-items:flex-end;gap:3px;height:22px;margin-bottom:var(--sp-3)}
.bars i{width:6px;border-radius:2px;background:var(--blue-100);display:block}
.bars i:nth-child(1){height:30%} .bars i:nth-child(2){height:48%}
.bars i:nth-child(3){height:66%} .bars i:nth-child(4){height:83%}
.bars i:nth-child(5){height:100%}
.bars i.on{background:var(--brand-blue)}
.tier--hot .bars i.on{background:var(--brand-orange)}
.tier h3{font-size:19px;font-weight:900}
.tier__blurb{font-size:13.5px;color:var(--muted-fg);margin-top:4px;min-height:2.6em}
.tier__list{margin-top:var(--sp-3);display:grid;gap:6px}
.tier__list li{display:flex;gap:7px;font-size:13px;color:#334155;line-height:1.55}
.tier__list svg{color:var(--success);margin-top:3px}
.tier__foot{margin-top:auto;padding-top:var(--sp-4)}
.tier__equiv{font-size:12px;color:var(--muted-fg);background:var(--blue-50);border-radius:var(--r-sm);padding:7px 10px;line-height:1.5;margin-bottom:var(--sp-3)}
.tier__price{display:flex;align-items:baseline;gap:5px}
.tier__price .price{font-size:22px}
.tier__price small{font-size:12.5px;color:var(--muted-fg)}
.ctx{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5)}
.ctx__b{flex:1;min-width:180px}
.ctx__b b{font-size:19px;color:var(--navy-900);display:block;line-height:1.4}
.ctx__b span{font-size:13.5px;color:var(--muted-fg)}
.ctx__meta{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.ctx__meta div{font-size:13px;color:var(--muted-fg)}
.ctx__meta b{display:block;color:var(--navy-900);font-size:14px;font-weight:700}
.ctx__note{width:100%;font-size:13px;color:#C2410C;background:var(--orange-50);border-radius:var(--r-sm);padding:8px 12px;display:flex;gap:7px;align-items:flex-start}
.ctx__note svg{margin-top:3px;flex:none}

/* --- 11. Step 3 · Day picker ------------------------------------------- */
.days-layout{display:grid;grid-template-columns:1fr 350px;gap:var(--sp-5);align-items:start}
.day-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--sp-2)}
.day-btn{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:58px;padding:6px 2px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-md);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),
             transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease);
}
.day-btn b{font-size:17px;font-weight:700;color:var(--navy-900);line-height:1.15}
.day-btn small{font-size:10.5px;color:var(--muted-fg);line-height:1.3;font-variant-numeric:tabular-nums}
.day-btn:hover{border-color:var(--navy-600);background:var(--blue-50);transform:translateY(-2px)}
.day-btn[aria-pressed='true']{background:var(--primary);border-color:var(--primary);box-shadow:0 8px 20px rgba(30,58,138,.3)}
.day-btn[aria-pressed='true'] b,.day-btn[aria-pressed='true'] small{color:#fff}
.day-btn[aria-pressed='true'] small{opacity:.88}
.day-btn__hot{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--brand-orange)}
.day-btn[aria-pressed='true'] .day-btn__hot{background:#FFD9BC}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:12.5px;color:var(--muted-fg);margin-top:var(--sp-4)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:7px;height:7px;border-radius:50%;background:var(--brand-orange);display:block}
.legend i.sq{width:13px;height:13px;border-radius:4px;background:var(--primary)}
.ladder{display:grid;gap:var(--sp-2);margin-top:var(--sp-5)}
.ladder__r{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:9px 14px;border-radius:var(--r-sm);background:var(--blue-50);font-size:13.5px;color:var(--muted-fg);border:1px solid transparent;transition:all var(--t) var(--ease)}
.ladder__r.is-now{background:#DCFCE7;border-color:#86EFAC;color:#047857;font-weight:700}
.ladder__r b{color:var(--navy-900);font-weight:700}
.ladder__r.is-now b{color:#047857}
.summary{position:sticky;top:calc(var(--appbar-h) + var(--sp-4))}
.summary__h{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.summary__h b{font-size:16px;color:var(--navy-900)}
.summary__b{padding:var(--sp-5)}
.srow{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);font-size:14.5px;padding-block:5px}
.srow > span:first-child{color:var(--muted-fg);flex:none}
.srow > span:last-child{text-align:right;color:var(--navy-900);font-weight:500}
.srow--save > span:last-child{color:var(--success);font-weight:700}
.srow--total{align-items:baseline;padding-top:var(--sp-4);margin-top:var(--sp-3);border-top:1px dashed var(--border)}
.srow--total > span:first-child{font-size:15px;font-weight:700;color:var(--navy-900)}
.srow--total .price{font-size:30px;color:var(--accent)}
.summary__acts{display:grid;gap:var(--sp-2);margin-top:var(--sp-5)}
.summary__note{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--muted-fg);margin-top:var(--sp-4);line-height:1.6}
.summary__note svg{color:var(--success);margin-top:3px;flex:none}
.actionbar{display:none}

/* --- 12. Cart ---------------------------------------------------------- */
.cart-layout{display:grid;grid-template-columns:1fr 350px;gap:var(--sp-5);align-items:start}
.citem{display:flex;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.citem:last-child{border-bottom:0}
.citem__b{flex:1;min-width:0}
.citem__t{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.citem__t b{font-size:16px;color:var(--navy-900)}
.citem__m{font-size:13.5px;color:var(--muted-fg);margin-top:2px}
.citem__f{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-3);flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card)}
.qty button{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-full);color:var(--navy-700);transition:background var(--t) var(--ease)}
.qty button:hover:not([disabled]){background:var(--blue-100)}
.qty button[disabled]{color:#CBD5E1;cursor:not-allowed}
.qty span{min-width:34px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.citem__p{text-align:right}
.citem__p .price{font-size:20px}
.citem__p small{display:block;font-size:12px}
.link-danger{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted-fg);padding:6px 2px;transition:color var(--t) var(--ease)}
.link-danger:hover{color:var(--destructive)}
.promo{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}
.promo input{flex:1;min-width:0;height:46px;padding:0 var(--sp-4);border:1.5px solid var(--border);border-radius:var(--r-sm);outline:0;background:var(--card);transition:border-color var(--t) var(--ease)}
.promo input:focus{border-color:var(--primary)}

/* --- 13. Forms --------------------------------------------------------- */
.form{display:grid;gap:var(--sp-4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.field{display:grid;gap:6px;min-width:0}
.field > label{font-size:14px;font-weight:700;color:var(--navy-900)}
.field > label .opt{font-weight:400;color:var(--muted-fg);font-size:13px}
.input{
  width:100%;min-height:50px;padding:0 var(--sp-4);background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:16px;outline:0;                    /* 16px 避免 iOS 聚焦時自動放大 */
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.input::placeholder{color:#A9B7CC}
.input:hover{border-color:#B4C6E0}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(30,58,138,.12)}
.input[aria-invalid='true']{border-color:var(--destructive);background:#FFF7F7}
.input[aria-invalid='true']:focus{box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.hint{font-size:12.5px;color:var(--muted-fg);line-height:1.55}
.err{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--destructive);font-weight:500}
.err:empty{display:none}
.card-input{position:relative}
.card-input .input{padding-right:66px;letter-spacing:.06em}
.card-brand{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--navy-700);background:var(--blue-100);padding:3px 8px;border-radius:5px}
.errsum{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);background:#FFF1F2;border:1.5px solid #FECACA}
.errsum:focus-visible{outline:3px solid var(--destructive)}
.errsum h3{font-size:15px;color:#991B1B;display:flex;align-items:center;gap:7px}
.errsum ul{margin-top:var(--sp-2);display:grid;gap:3px}
.errsum a{color:#B91C1C;text-decoration:underline;font-size:14px}
.choice{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--card);cursor:pointer;transition:all var(--t) var(--ease)}
.choice:hover{border-color:var(--navy-600);background:var(--blue-50)}
.choice input{accent-color:var(--primary);width:20px;height:20px;flex:none;cursor:pointer}
.choice b{font-size:15px;color:var(--navy-900);display:block;line-height:1.5}
.choice small{color:var(--muted-fg);font-size:13px}
.choice:has(input:checked){border-color:var(--primary);background:var(--blue-50);box-shadow:0 0 0 3px rgba(30,58,138,.08)}
.choice__logos{margin-inline-start:auto;display:flex;gap:5px}
.choice__logos span{font-size:10px;font-weight:700;padding:3px 7px;border-radius:4px;background:var(--muted);color:var(--muted-fg);letter-spacing:.04em}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:14px;color:var(--muted-fg);cursor:pointer}
.check input{accent-color:var(--primary);width:19px;height:19px;margin-top:3px;flex:none;cursor:pointer}
.check a{text-decoration:underline}
.authtabs{display:flex;gap:var(--sp-1);padding:5px;background:var(--muted);border-radius:var(--r-full);margin-bottom:var(--sp-5)}
.authtabs button{flex:1;min-height:44px;border-radius:var(--r-full);font-weight:700;font-size:15px;color:var(--muted-fg);transition:all var(--t) var(--ease)}
.authtabs button[aria-pressed='true']{background:var(--card);color:var(--navy-900);box-shadow:var(--sh-sm)}
.authwrap{max-width:460px;margin-inline:auto}
.trustrow{display:flex;justify-content:center;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-6)}
.trustrow span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted-fg)}
.trustrow svg{color:var(--success)}

/* --- 14. Checkout ------------------------------------------------------ */
.co-layout{display:grid;grid-template-columns:1fr 350px;gap:var(--sp-5);align-items:start}
.co-sec{padding:var(--sp-5)}
.co-sec + .co-sec{margin-top:var(--sp-4)}
.co-sec__h{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.co-sec__h span{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);background:var(--primary);color:#fff;font-size:14px;font-weight:700;flex:none}
.co-sec__h h2{font-size:18px}
.mini{display:flex;gap:var(--sp-3);align-items:center;padding-block:var(--sp-3)}
.mini + .mini{border-top:1px dashed var(--border)}
.mini__b{flex:1;min-width:0}
.mini__b b{font-size:14.5px;color:var(--navy-900);display:block;line-height:1.45}
.mini__b small{font-size:12.5px;color:var(--muted-fg)}
.mini .price{font-size:15px}
.ccard{position:relative;border-radius:var(--r-lg);padding:var(--sp-5);background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-600) 60%,#2E6BD8 100%);color:#fff;box-shadow:var(--sh-lg);overflow:hidden;margin-bottom:var(--sp-5)}
.ccard::after{content:'';position:absolute;right:-40px;top:-50px;width:190px;height:190px;border-radius:50%;background:rgba(244,123,32,.3);filter:blur(38px)}
.ccard__top{display:flex;align-items:center;justify-content:space-between;position:relative}
.ccard__chip{width:42px;height:32px;border-radius:6px;background:linear-gradient(135deg,#FCD34D,#D97706);position:relative;overflow:hidden}
.ccard__chip::after{content:'';position:absolute;inset:6px 4px;border:1px solid rgba(120,53,15,.5);border-radius:2px;border-left-width:0;border-right-width:0}
.ccard__brand{font-size:15px;font-weight:700;letter-spacing:.1em;opacity:.95}
.ccard__no{font-size:21px;font-weight:500;letter-spacing:.12em;margin-top:var(--sp-5);font-variant-numeric:tabular-nums;position:relative}
.ccard__bot{display:flex;gap:var(--sp-6);margin-top:var(--sp-4);position:relative}
.ccard__bot small{display:block;font-size:9.5px;opacity:.7;letter-spacing:.1em}
.ccard__bot b{font-size:14px;font-weight:500;letter-spacing:.05em}
.paying{display:grid;place-items:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-4);text-align:center}
.paying__ring{width:56px;height:56px;border-radius:50%;border:4px solid var(--blue-100);border-top-color:var(--primary);animation:spin .8s linear infinite}
.paying b{font-size:17px;color:var(--navy-900)}
.paying p{color:var(--muted-fg);font-size:14px}

/* --- 15. Success + account --------------------------------------------- */
.done{max-width:640px;margin-inline:auto;text-align:center}
.done__tick{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#DCFCE7;color:var(--success);margin:0 auto var(--sp-5);animation:pop .5s var(--ease) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.done h1{font-size:28px;font-weight:900}
.done > p{color:var(--muted-fg);margin-top:var(--sp-2)}
.qr-card{padding:var(--sp-6);margin-top:var(--sp-6);text-align:center}
.qr{display:grid;width:190px;height:190px;margin:0 auto var(--sp-4);padding:10px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr);gap:0}
.qr i{display:block}
.qr i.on{background:var(--navy-900)}
.install{text-align:left;display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
.install li{display:flex;gap:var(--sp-3);font-size:14.5px;color:#334155}
.install b{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:var(--r-full);background:var(--blue-100);color:var(--navy-700);font-size:12.5px;font-weight:700}
.esim-card{padding:var(--sp-5)}
.esim-card__h{display:flex;align-items:center;gap:var(--sp-3)}
.esim-card__h b{font-size:17px;color:var(--navy-900);display:block;line-height:1.4}
.esim-card__h small{font-size:13px;color:var(--muted-fg)}
.meter{height:8px;border-radius:var(--r-full);background:var(--muted);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--brand-blue),var(--navy-700))}
.acct-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--sp-5);align-items:start}
.acct-panel{transition:opacity .15s var(--ease)}
.acct-panel[aria-busy='true']{opacity:.55}   /* 換分頁抓資料中：右側面板微淡，左側選單不動、整頁不重畫 */
.sidenav{display:grid;gap:3px;padding:var(--sp-3)}
.sidenav button{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;padding:11px var(--sp-4);border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--muted-fg);transition:all var(--t) var(--ease)}
.sidenav button:hover{background:var(--blue-50);color:var(--navy-700)}
.sidenav button[aria-current='true']{background:var(--blue-100);color:var(--navy-900);font-weight:700}
.tablewrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;min-width:520px}
table.data th,table.data td{padding:var(--sp-3) var(--sp-4);text-align:left;font-size:14.5px}
table.data th{font-size:12.5px;font-weight:700;color:var(--muted-fg);border-bottom:1px solid var(--border);letter-spacing:.04em}
table.data td{border-bottom:1px solid var(--border);color:var(--navy-900)}
table.data tr:last-child td{border-bottom:0}

/* --- 16. Tabbar (mobile) + footer -------------------------------------- */
.tabbar{display:none}
.footer{border-top:1px solid var(--border);background:rgba(255,255,255,.6);margin-top:auto}
.footer__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-6);padding-block:var(--sp-7) var(--sp-5)}
.footer h4{font-size:14px;margin-bottom:var(--sp-3)}
.footer ul{display:grid;gap:9px}
.footer li a{font-size:14px;color:var(--muted-fg);transition:color var(--t) var(--ease)}
.footer li a:hover{color:var(--navy-700)}
.footer__about p{font-size:13.5px;color:var(--muted-fg);margin-top:var(--sp-3);max-width:34ch}
.footer__bot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;padding-block:var(--sp-4);border-top:1px solid var(--border);font-size:12.5px;color:var(--muted-fg)}
.paylogos{display:flex;gap:6px}
.paylogos span{font-size:10px;font-weight:700;padding:4px 8px;border-radius:5px;background:var(--muted);color:var(--muted-fg);letter-spacing:.05em}

/* --- 17. Toast --------------------------------------------------------- */
.toasts{position:fixed;left:50%;bottom:var(--sp-5);transform:translateX(-50%);z-index:300;display:grid;gap:var(--sp-2);width:min(420px,calc(100% - 32px));pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--sp-3);padding:13px var(--sp-4);border-radius:var(--r-md);background:var(--navy-900);color:#fff;box-shadow:var(--sh-xl);font-size:14.5px;font-weight:500;animation:toastin .32s var(--ease) both}
.toast svg{color:#6EE7B7;flex:none}
.toast--warn svg{color:#FCD34D}
@keyframes toastin{from{opacity:0;transform:translateY(14px) scale(.97)}}

/* --- 17b. 客服：右下角浮動按鈕（站上慣用的深藍）＋小選單 -------------------- */
.fab{position:fixed;right:20px;bottom:24px;z-index:70}
.fab__btn{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(30,58,138,.35),0 2px 6px rgba(15,37,87,.2);transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.fab__btn:hover{background:var(--navy-900);transform:translateY(-2px)}
.fab__btn[aria-expanded='true']{background:var(--navy-900)}
.fab__menu{position:absolute;right:0;bottom:68px;width:264px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xl);padding:var(--sp-3);display:grid;gap:4px;animation:fabin .2s var(--ease) both}
@keyframes fabin{from{opacity:0;transform:translateY(8px) scale(.97)}}
.fab__title{font-size:14px;font-weight:800;color:var(--navy-900);padding:6px 10px 8px}
.fab__item{display:flex;align-items:center;gap:var(--sp-3);padding:9px 10px;border-radius:var(--r-md);color:var(--navy-900);transition:background var(--t) var(--ease)}
.fab__item:hover{background:var(--blue-50)}
.fab__item b{display:block;font-size:14.5px;line-height:1.3}
.fab__item small{display:block;font-size:12.5px;color:var(--muted-fg);line-height:1.4}
.fab__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-full);background:var(--blue-100);color:var(--navy-700);flex:none}
.fab__ic--line{background:#06C755;color:#fff;font-size:10px;font-weight:800;letter-spacing:.02em}

/* --- 17c. 客服：聯絡客服頁、會員中心客服訊息 -------------------------------- */
.support-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-5);align-items:start}
.support-side{display:grid;gap:var(--sp-3)}
.support-side__item{display:flex;align-items:center;gap:var(--sp-3);color:var(--navy-900)}
.support-side__item>svg{flex:none;color:var(--navy-700)}
.support-side__item b{display:block;font-size:15px}
.support-side__item small{display:block;color:var(--muted-fg);font-size:13px;line-height:1.45}
.support-line{border-color:#86EFAC;background:#F0FDF4}
.support-line .fab__ic--line{width:40px;height:40px}
.seg{display:inline-flex;padding:3px;border-radius:var(--r-full);background:var(--muted);border:1px solid var(--border)}
.seg button{min-height:34px;padding:0 18px;border-radius:var(--r-full);font-weight:700;font-size:14px;color:var(--muted-fg);transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.seg button[aria-checked='true']{background:var(--primary);color:#fff;box-shadow:var(--sh-sm)}
.form .actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.support-ok{text-align:center;padding-block:var(--sp-6)}
.support-ok h2{font-size:24px;margin-top:var(--sp-3)}
.support-ok .lede{margin:var(--sp-2) auto var(--sp-5);max-width:48ch}
.support-ok .actions{justify-content:center}
.tk-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap}
.tk-list{display:grid;gap:var(--sp-3)}
.tk{display:grid;gap:6px;padding:var(--sp-4);text-align:left;width:100%;cursor:pointer;transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.tk:hover{border-color:var(--navy-700);transform:translateY(-1px)}
.tk__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--navy-900)}
.tk__prev{color:#334155;font-size:14.5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tk small{color:var(--muted-fg);font-size:12.5px}
.thread{display:grid;gap:var(--sp-3)}
.bub{max-width:88%;padding:10px 14px;border-radius:14px;background:var(--muted)}
.bub--me{justify-self:end;background:var(--blue-100);border-bottom-right-radius:4px}
.bub--staff{justify-self:start;background:#F8FAFC;border:1px solid var(--border);border-bottom-left-radius:4px}
.bub small{display:block;font-size:12px;color:var(--muted-fg);margin-bottom:4px}
.bub p{font-size:14.5px;line-height:1.6;overflow-wrap:anywhere}

/* --- 17d. 條款／隱私權政策頁：左側黏住的目錄＋右側條文（伺服器頁，不是 SPA） ---------- */
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--sp-6);align-items:start}
.legal__toc{position:sticky;top:calc(var(--appbar-h) + 16px);padding:var(--sp-3);display:grid;gap:2px;max-height:calc(100dvh - var(--appbar-h) - 32px);overflow:auto}
.legal__toc b{font-size:12px;letter-spacing:.08em;color:var(--muted-fg);padding:6px 10px}
.legal__toc a{display:block;padding:7px 10px;border-radius:var(--r-sm);font-size:14px;color:var(--muted-fg);line-height:1.45;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.legal__toc a:hover{background:var(--blue-50);color:var(--navy-700)}
.legal__toc a[aria-current='true']{background:var(--blue-100);color:var(--navy-900);font-weight:700}
.legal__tocm{display:none;border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);background:var(--blue-50)}
.legal__tocm summary{font-weight:700;color:var(--navy-900);cursor:pointer}
.legal__doc{padding:var(--sp-6);max-width:840px;min-width:0}   /* min-width:0：表格有最小寬度，不設的話手機上整欄會被撐寬、文字被切掉 */
.legal__doc h2{font-size:20px;margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--border);scroll-margin-top:calc(var(--appbar-h) + 16px)}
.legal__doc h2 .no{display:inline-block;min-width:1.6em;color:var(--brand-blue);font-variant-numeric:tabular-nums}
.legal__doc h3{font-size:16px;margin-top:var(--sp-5);color:var(--navy-700)}
.legal__doc p,.legal__doc li{font-size:15.5px;color:#334155;line-height:1.85}
.legal__doc p{margin-top:var(--sp-3)}
.legal__doc ul,.legal__doc ol{margin-top:var(--sp-3);padding-left:1.4em;display:grid;gap:6px}
.legal__doc ul{list-style:disc}
.legal__doc ol{list-style:decimal}
.legal__doc li::marker{color:var(--brand-blue)}
.legal__doc a{text-decoration:underline;text-underline-offset:3px}
.legal__en{font-size:13px!important;color:var(--muted-fg)!important;margin-top:0!important;margin-bottom:var(--sp-4)}
.legal__sum{background:var(--blue-50);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5)}
.legal__sum b{display:block;color:var(--navy-900);font-size:16px}
.legal__sum ul{margin-top:var(--sp-2)}
.legal__note{background:var(--orange-50);border-left:4px solid var(--brand-orange);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-4);color:#7C2D12!important}
.legal__tblwrap{overflow-x:auto;margin-top:var(--sp-4)}
.legal__tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.legal__tbl th,.legal__tbl td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top;line-height:1.7;color:#334155}
.legal__tbl th{background:var(--blue-50);color:var(--navy-900);font-weight:700;white-space:nowrap}
.legal__tbl td:first-child{color:var(--navy-900);font-weight:500}
.legal__kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin-top:var(--sp-4);font-size:15px}
.legal__kv dt{color:var(--muted-fg)}
.legal__kv dd{margin:0;color:var(--navy-900)}
.legal__meta{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:13px;color:var(--muted-fg);margin-top:var(--sp-3)}
.legal__meta a{font-weight:700}
@media (max-width:900px){
  .legal{grid-template-columns:minmax(0,1fr)}
  .legal__toc{display:none}
  .legal__tocm{display:block}
  .legal__doc{padding:var(--sp-5) var(--sp-4)}
}
@media print{
  .appbar,.footer,.tabbar,.fab,.toasts,.legal__toc,.legal__tocm,.skip-link{display:none!important}
  body{background:#fff}
  .legal{display:block}
  .legal__doc{border:0;box-shadow:none;padding:0;max-width:none}
  .legal__doc h2{break-after:avoid}
  .legal__tbl{min-width:0}
}

/* --- 18. Responsive ------------------------------------------------------ */
@media (max-width:1080px){
  .grid-country{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-tier{grid-template-columns:repeat(3,minmax(0,1fr))}
  .days-layout,.cart-layout,.co-layout{grid-template-columns:1fr}
  .summary{position:static}
  .footer__in{grid-template-columns:1fr 1fr;row-gap:var(--sp-5)}
}
@media (max-width:900px){
  /* 768–900 這一段標題列剛好差幾 px，先收起裝飾性的品牌副標讓導覽不換行 */
  .brand__tag{display:none}
  .support-layout{grid-template-columns:1fr}
  .hero__grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .grid-feat,.grid-how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-rev{grid-template-columns:1fr}
  .how::after{display:none}
  .acct-layout{grid-template-columns:1fr}
  .sidenav{display:flex;overflow-x:auto;scrollbar-width:none}
  .sidenav button{flex:none}
}
@media (max-width:767px){
  .wrap{padding-inline:var(--sp-4)}
  .nav{display:none}
  .appbar__in{height:60px}
  .brand{margin-inline-end:auto}
  .brand img{height:32px}
  .main{padding-bottom:0}
  /* 四組「圓圈＋標籤」全展開約需 480px，窄螢幕只留目前步驟的文字，
     圓圈與連接線保留，仍看得出第幾步／共幾步 */
  .stepper__t{display:none}
  .stepper__i.is-now .stepper__t{display:block}
  .section{padding-block:var(--sp-6)}
  .section__head h2,.pagehead h1,.cta-band h2,.done h1{font-size:23px}
  .hero{padding-block:var(--sp-5) var(--sp-6)}
  .hero h1{font-size:30px}
  .hero .lede{font-size:15.5px}
  .hero__cta .btn{flex:1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-country{grid-template-columns:1fr}
  .grid-tier,.grid-feat,.grid-how{grid-template-columns:1fr}
  .tier__blurb{min-height:0}
  .form-row{grid-template-columns:1fr}
  .cta-band{padding:var(--sp-6) var(--sp-4)}
  .authwrap .card--pad{padding:var(--sp-4)}
  /* Step 3：390px 下 5 欄 × 6 列最易掃視 */
  .day-grid{grid-template-columns:repeat(5,1fr);gap:7px}
  .day-btn{min-height:54px}
  /* 桌機的訂單摘要卡在手機變成置底操作列 */
  .summary{display:none}
  /* 置底操作列疊在導覽列「上方」，兩者皆 sticky 才不會互相遮蓋 */
  .actionbar{
    display:block;position:sticky;z-index:55;
    bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(15,37,87,.09);
    padding:var(--sp-3) var(--sp-4);
  }
  .actionbar__in{display:flex;align-items:center;gap:var(--sp-3)}
  .actionbar__p{flex:none}
  .actionbar__p small{display:block;font-size:11.5px;color:var(--muted-fg);line-height:1.4}
  .actionbar__p .price{font-size:22px}
  .actionbar .btn{flex:1}
  .footer__in{grid-template-columns:1fr;gap:var(--sp-5)}
  .footer__bot{justify-content:center;text-align:center}
  .toasts{bottom:calc(var(--tabbar-h) + 84px)}
  /* 客服按鈕浮在置底導覽列上方 */
  .fab{right:14px;bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom,0px))}
  .fab__btn{width:52px;height:52px}
  .fab__menu{width:min(264px,calc(100vw - 28px))}
  /* 置底導覽列：sticky 而非 fixed —— 它是 .shell 的最後一個 flex 子元素，
     捲動時吸在視窗底部，捲到頁尾時剛好落回原位，不會永久蓋住內容 */
  .tabbar{
    display:block;position:sticky;bottom:0;z-index:58;
    background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .tabbar__in{display:grid;grid-template-columns:repeat(4,1fr)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tabbar-h);font-size:11px;font-weight:500;color:var(--muted-fg);position:relative;transition:color var(--t) var(--ease)}
  .tabbar a[aria-current='page']{color:var(--navy-700);font-weight:700}
  .tabbar a[aria-current='page']::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--primary)}
  .tabbar .cart-dot{top:-3px;right:-9px}
}
@media (max-width:400px){
  .day-grid{grid-template-columns:repeat(4,1fr)}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
}

/* --- 19. Motion preferences -------------------------------------------- */
.reveal{animation:reveal .42s var(--ease) both}
@keyframes reveal{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{animation:none}
}

/* ---- 訂單／結帳（2026-09-07 訂單模組） ---- */
.mono{font-family:ui-monospace,Consolas,'SFMono-Regular',monospace;font-size:.92em}
.link{color:var(--primary);text-decoration:underline;font:inherit;font-size:inherit;cursor:pointer;background:none;border:0;padding:0}
.guestbar{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.guestbar > span{flex:1;min-width:200px}
.guestbar b{display:block;color:var(--navy-900)}
.guestbar small{color:var(--muted-fg);font-size:13px}
.done__tick--muted{background:var(--blue-100);color:var(--navy-700)}
.esimline{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted-fg);margin-top:6px}
.esimline b{color:var(--navy-900)}
.esimline .mono{color:var(--navy-900);word-break:break-all}
.promo input[readonly]{background:var(--blue-50);color:var(--navy-700);font-weight:700}
.promo input[disabled]{background:var(--muted);color:var(--muted-fg)}
.promo .btn{flex:none}

/* ---- 天數頁：一般／AI 工具可用 切換（2026-09-08） ---- */
.seg{display:inline-flex;gap:3px;padding:4px;border:1.5px solid var(--border);border-radius:var(--r-full);background:var(--card);max-width:100%}
.seg button{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--r-full);font-size:14.5px;font-weight:700;color:var(--muted-fg);transition:all var(--t) var(--ease);white-space:nowrap}
.seg button:hover:not([disabled]){background:var(--blue-50);color:var(--navy-700)}
.seg button[aria-pressed='true']{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(30,58,138,.25)}
.seg button[aria-pressed='true'] svg{color:#FCD34D}
.seg button[disabled]{opacity:.4;cursor:not-allowed}
.day-btn[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}
.day-btn[disabled]:hover{transform:none;border-color:var(--border);background:var(--card)}
@media (max-width:480px){ .seg{display:flex} .seg button{flex:1;justify-content:center;padding-inline:10px} }


/* ---- 選流量頁：固定五張卡，沒資料的反灰（2026-09-08） ---- */
.tier--off{opacity:.5;cursor:not-allowed;box-shadow:none;background:var(--muted)}
.tier--off:hover{transform:none;border-color:var(--border);box-shadow:none}
.tier--off .bars i.on{background:#B4C6E0}
.tier__off{font-size:13px;font-weight:700;color:var(--muted-fg)}

.tier--off .tier__foot{flex-direction:column;align-items:flex-start;gap:6px}