/* ============================================================
   RATES PAGE — rates.php only.
   Loads after css/site.css, so every shared piece (header, .hook,
   footer, mobile dock, .sec-eyebrow, .vh-name/.vh-spec icons)
   comes from there and is never redefined here.
   Section rhythm matches the home page: 22px top on desktop,
   15px on mobile, small bottom padding so joints stay tight.
   ============================================================ */

/* ---------- page head band ---------- */
.rate-hero{position:relative;overflow:hidden;padding:26px 0 30px;
  background:
    radial-gradient(430px 260px at 88% -12%,rgba(80,130,255,.22),transparent 62%),
    radial-gradient(340px 220px at -8% 112%,rgba(40,169,239,.14),transparent 60%),
    linear-gradient(158deg,#0e1a49 0%,#152668 56%,#1a2f7d 100%)}
.rate-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 34px)}
.rate-hero-in{position:relative;z-index:2;width:min(1180px,calc(100% - 48px));margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center}

.rate-crumb{display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(198,212,255,.6);
  font-size:11px;font-weight:600;letter-spacing:.02em}
.rate-crumb a{color:rgba(198,212,255,.78);transition:color .15s ease}
.rate-crumb a:hover{color:#fff}
.rate-crumb i{width:5px;height:5px;border-top:1.5px solid rgba(198,212,255,.45);
  border-right:1.5px solid rgba(198,212,255,.45);transform:rotate(45deg)}
.rate-crumb span{color:#fff;font-weight:700}

/* the rule now sits on BOTH sides of the kicker so the block reads as centred */
.rate-kicker{display:flex;align-items:center;justify-content:center;gap:9px;margin:12px auto 0;
  color:#7fc4ff;font-size:10px;font-weight:800;letter-spacing:.14em}
.rate-kicker::before,.rate-kicker::after{content:"";width:24px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#22a7f0,#7fc4ff)}
.rate-kicker::after{background:linear-gradient(90deg,#7fc4ff,#22a7f0)}

.rate-hero h1{margin:10px auto 0;max-width:820px;color:#fff;text-wrap:balance;
  font-size:34px;line-height:1.1;letter-spacing:-.035em;font-weight:800}
.rate-hero h1 em{font-style:normal;
  background:linear-gradient(92deg,#8ccdff 0%,#22a7f0 60%,#5ee0c0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rate-sub{margin:10px auto 0;max-width:640px;color:rgba(226,233,255,.74);text-wrap:pretty;
  font-size:13.5px;line-height:1.55}

.rate-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:14px 0 0;padding:0;list-style:none}
.rate-chips li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);
  color:#dfe7ff;font-size:11px;font-weight:700;white-space:nowrap}
.rate-chips svg{width:13px;height:13px;fill:none;stroke:#4fe08d;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

.rate-search{position:relative;display:flex;align-items:center;gap:10px;
  width:min(560px,100%);margin:15px auto 0;padding:0 14px;height:48px;
  border-radius:13px;background:#fff;box-shadow:0 12px 28px rgba(4,9,38,.34)}
.rate-search>svg{width:18px;height:18px;flex:0 0 18px;color:#2a58c9}
.rate-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;
  color:#15224f;font:600 14px Inter,sans-serif;outline:none}
.rate-search input::placeholder{color:#98a1b8;font-weight:500}
.rate-search input::-webkit-search-cancel-button{display:none}
.rate-search-clear{flex:0 0 24px;width:24px;height:24px;border:0;border-radius:50%;
  background:#eef1f8;color:#5b6683;font:700 15px/1 Inter,sans-serif;cursor:pointer;
  transition:background .15s ease,color .15s ease}
.rate-search-clear:hover{background:#dfe4f0;color:#15224f}

/* ---------- vehicle legend ---------- */
.rate-legend{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.rl-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;margin-bottom:9px}
.rl-head h2{margin:0;color:#10246f;font-size:19px;font-weight:800;letter-spacing:-.02em}
.rl-head p{margin:0;color:#8a92a8;font-size:12px}

.rl-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rl-card{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 8px 11px;border:1.5px solid #e6e9f2;border-radius:14px;background:#f8faff;
  color:inherit;font:inherit;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease}
.rl-card:hover{background:#fff;border-color:#cdd6ec;transform:translateY(-2px)}
.rl-card.is-on{background:#fff;border-color:#16225c;box-shadow:0 8px 20px rgba(22,34,92,.14)}
.rl-pic{display:grid;place-items:center;width:100%;aspect-ratio:16/9}
.rl-pic img{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- the rate board ---------- */
.rate-board-wrap{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.rb-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:12px}
.rb-head h2{margin:8px 0 0;color:#10246f;font-size:32px;line-height:1.08;
  letter-spacing:-.03em;font-weight:800}
.rb-head p{margin:7px 0 0;max-width:560px;color:#6d7793;font-size:13.5px;line-height:1.5}

/* The board is just a spaced stack — each origin is its own card, so the coloured
   spine starts and stops with its group instead of running the whole page as one
   long line (which read as a single undivided block). */
.rate-board{--rb-cols:minmax(0,2.05fr) .92fr repeat(4,minmax(78px,.86fr)) 92px;
  display:grid;gap:14px}

.rb-thead{display:grid;grid-template-columns:var(--rb-cols);gap:12px;align-items:end;
  padding:11px 20px;background:#f6f8fc;border-bottom:1px solid #e6e9f2;
  color:#6b7590;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.rb-thead span[data-v]{text-align:center;transition:opacity .18s ease}
.rb-thead i{display:block;margin-top:3px;color:#9aa3b8;font-size:9.5px;font-weight:700;
  font-style:normal;letter-spacing:.04em;text-transform:none}

/* ---- one colour per origin -------------------------------------------------
   Every card in a group carries the same coloured spine, so while you scroll you
   never have to look back at the header to know which airport you are under.
   All five are dark enough for white text (≥4.5:1) and stay inside the brand
   family — blue, cyan, green, gold, and purple kept to a stripe-sized accent. */
.rb-group{--g:#2a58c9;--g-soft:#eaf1ff;
  border:1px solid #e6e9f2;border-radius:16px;background:#fff;overflow:hidden;
  box-shadow:0 10px 28px rgba(20,26,66,.06), inset 5px 0 0 var(--g)}
.rb-group[data-tone="dmk"]{--g:#0f7fae;--g-soft:#e6f4fb}
.rb-group[data-tone="utp"]{--g:#128049;--g-soft:#e8f6ee}
.rb-group[data-tone="pty"]{--g:#b06a00;--g-soft:#fdf3e0}
.rb-group[data-tone="bkc"]{--g:#5b32c9;--g-soft:#f0eaff}

.rb-grouphead{display:flex;align-items:center;gap:11px;padding:11px 20px;
  border-bottom:1px solid #eef1f8;
  background:linear-gradient(90deg,var(--g-soft),#fff 58%)}
.rb-gicon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:#fff;color:var(--g);box-shadow:0 1px 4px rgba(20,26,66,.14)}
.rb-gicon svg{width:17px;height:17px}
.rb-gtext b{display:block;color:#15224f;font-size:14px;font-weight:800;letter-spacing:-.01em}
/* airport code — solid colour chip, the fastest thing on the page to recognise */
.rb-gtext b em{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:5px;
  background:var(--g);color:#fff;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.08em;vertical-align:1px}
.rb-gtext small{display:block;margin-top:1px;color:#8a92a8;font-size:11px}
.rb-gcount{margin-left:auto;color:var(--g);font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:.85}

/* the spine lives on the group card, so rows stay clean */
.rb-row{display:grid;grid-template-columns:var(--rb-cols);gap:12px;align-items:center;
  padding:10px 20px;border-top:1px solid #f0f2f8;transition:background .15s ease}
/* DOM adjacency, so it also holds on mobile where the header row is display:none */
.rb-thead+.rb-row{border-top:0}
.rb-row:hover{background:var(--g-soft)}

.rb-dest{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}
.rb-arrow{position:relative;width:16px;height:2px;flex:0 0 16px;border-radius:2px;background:var(--g)}
.rb-arrow::after{content:"";position:absolute;right:-1px;top:-3px;width:8px;height:8px;
  border-top:2px solid var(--g);border-right:2px solid var(--g);transform:rotate(45deg)}
.rb-dest b{color:#15224f;font-size:15px;font-weight:700;letter-spacing:-.01em}
.rb-hot{padding:3px 8px;border-radius:999px;background:#eaf7ef;color:#178a4b;
  font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rb-from{display:none}

.rb-dur{display:flex;align-items:center;gap:6px;color:#6b7590;font-size:12.5px;
  font-weight:600;white-space:nowrap}
.rb-dur svg{width:14px;height:14px;flex:0 0 14px;color:#a7b0c6}

.rb-cell{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px 4px;border-radius:9px;
  transition:opacity .18s ease,background .18s ease,box-shadow .18s ease}
.rb-cell i{display:none}
.rb-cell b{color:#14225c;font-size:15.5px;font-weight:800;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.rb-go{display:inline-flex;align-items:center;justify-content:center;justify-self:end;
  height:34px;padding:0 16px;border-radius:999px;background:#16225c;color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.04em;white-space:nowrap;
  transition:background .15s ease,transform .15s ease}
.rb-row:hover .rb-go{background:#1c2b70;transform:translateY(-1px)}

/* one car highlighted — the other three columns step back */
.rate-board[data-focus] .rb-cell,
.rate-board[data-focus] .rb-thead span[data-v]{opacity:.3}
.rate-board[data-focus="sedan"] .rb-cell[data-v="sedan"],
.rate-board[data-focus="innova"] .rb-cell[data-v="innova"],
.rate-board[data-focus="fortuner"] .rb-cell[data-v="fortuner"],
.rate-board[data-focus="van"] .rb-cell[data-v="van"]{opacity:1;background:#f2f7ff;
  box-shadow:inset 0 0 0 1px #dbe6ff}
.rate-board[data-focus="sedan"] .rb-thead span[data-v="sedan"],
.rate-board[data-focus="innova"] .rb-thead span[data-v="innova"],
.rate-board[data-focus="fortuner"] .rb-thead span[data-v="fortuner"],
.rate-board[data-focus="van"] .rb-thead span[data-v="van"]{opacity:1;color:#16225c}

.rb-empty{margin:0;padding:26px 20px;border:1px solid #e6e9f2;border-radius:16px;background:#fff;
  text-align:center;color:#6d7793;font-size:13px;line-height:1.55}
.rb-empty a{color:#2a58c9;font-weight:700;text-decoration:underline}
.rb-note{margin:10px 0 0;text-align:center;color:#8a92a8;font-size:11.5px;line-height:1.5}

/* ---------- included / on request ---------- */
.rate-incl{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.ri-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ri-card{padding:15px 18px 17px;border:1px solid #e6e9f2;border-radius:16px;background:#fff;
  box-shadow:0 10px 28px rgba(20,26,66,.05)}
.ri-card h3{display:flex;align-items:center;gap:9px;margin:0 0 10px;
  color:#15224f;font-size:16px;font-weight:800;letter-spacing:-.01em}
.ri-card h3 svg{width:28px;height:28px;flex:0 0 28px;padding:6px;border-radius:9px}
.ri-card.is-yes h3 svg{background:#eafaf1;color:#18a957}
.ri-card.is-ask h3 svg{background:#eaf1ff;color:#2a58c9}
.ri-card ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.ri-card li{position:relative;padding-left:20px;color:#4a5573;font-size:13.5px;line-height:1.45}
.ri-card li::before{content:"";position:absolute;left:3px;top:6px;width:7px;height:7px;border-radius:50%}
.ri-card.is-yes li::before{background:#18a957;box-shadow:0 0 0 3px rgba(24,169,87,.13)}
.ri-card.is-ask li::before{background:#2a58c9;box-shadow:0 0 0 3px rgba(42,88,201,.12)}

/* ---------- how the price works ---------- */
.rate-steps{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:22px 0}
.rs-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.rs-list li{padding:14px 16px 16px;border:1px solid #e6e9f2;border-radius:14px;background:#fff;
  box-shadow:0 8px 22px rgba(20,26,66,.05)}
.rs-n{display:grid;place-items:center;width:30px;height:30px;margin-bottom:9px;border-radius:50%;
  background:linear-gradient(145deg,#16225c,#2a58c9);color:#fff;font-size:13px;font-weight:800}
.rs-list b{display:block;color:#15224f;font-size:15px;font-weight:800;letter-spacing:-.01em}
.rs-list small{display:block;margin-top:5px;color:#6d7793;font-size:12.5px;line-height:1.5}

/* the one CTA colour this page adds — the shared sheet has line/wa/tel only */
.hk-book{background:linear-gradient(100deg,#2160dd 0%,#2f8ae8 55%,#28a9ef 100%);
  box-shadow:0 8px 18px rgba(24,80,190,.30)}

/* ============================================================
   MOBILE  (breakpoint is 900px everywhere on this site)
   ============================================================ */
@media(max-width:900px){
  .rate-hero{padding:14px 0 17px}
  .rate-hero-in{width:calc(100% - 26px);text-align:center}
  .rate-crumb{justify-content:center}
  .rate-kicker{justify-content:center;margin-top:9px}
  .rate-hero h1{margin-top:7px;font-size:24px;line-height:1.12;letter-spacing:-.04em}
  .rh-break{display:none}
  .rate-sub{margin:7px auto 0;font-size:12px;line-height:1.5}
  .rate-chips{justify-content:center;gap:6px;margin-top:10px}
  .rate-chips li{padding:5px 10px}
  .rate-search{margin:11px auto 0;height:48px}

  .rate-legend{width:calc(100% - 26px);padding:15px 0}
  .rl-head{flex-direction:column;align-items:center;gap:2px;text-align:center;margin-bottom:7px}
  .rl-head h2{font-size:17px}
  .rl-cards{grid-template-columns:repeat(2,1fr);gap:8px}
  .rl-card{padding:8px 7px 10px;border-radius:13px}

  .rate-board-wrap{width:calc(100% - 26px);padding:15px 0}
  .rb-head{margin-bottom:9px}
  .rb-head h2{font-size:23px;margin-top:7px}
  .rb-head p{margin-top:6px;max-width:330px;font-size:11.5px;line-height:1.45}

  .rate-board{gap:10px}
  .rb-group{border-radius:14px;box-shadow:0 6px 18px rgba(20,26,66,.07), inset 5px 0 0 var(--g)}
  .rb-thead{display:none}

  .rb-grouphead{padding:9px 13px;gap:9px}
  .rb-gicon{width:27px;height:27px;flex-basis:27px}
  .rb-gicon svg{width:15px;height:15px}
  .rb-gtext b{font-size:13px}
  .rb-gtext small{font-size:10.5px}
  .rb-gcount{font-size:9.5px}

  /* Each row is a card holding a real 4-column price table:
       destination
       [SEDAN | INNOVA | FORTUNER | VAN]   <- one strip, prices on one baseline
       duration ............... [Book]
     The old 2x2 boxes made four equal-weight blocks with nothing to scan,
     and repeated the origin that the group header already states. */
  .rb-row{grid-template-columns:repeat(4,1fr);gap:8px 5px;padding:11px 13px 12px;
    grid-template-areas:
      "dest dest dest dest"
      "c1   c2   c3   c4"
      "dur  dur  go   go"}
  .rb-row:hover{background:#fff}

  .rb-dest{grid-area:dest;gap:6px}
  .rb-dest b{font-size:15.5px}
  .rb-arrow{display:none}
  .rb-from{display:none}          /* the group header above already says "From …" */

  /* the price strip */
  .rb-cell[data-v="sedan"]{grid-area:c1}
  .rb-cell[data-v="innova"]{grid-area:c2}
  .rb-cell[data-v="fortuner"]{grid-area:c3}
  .rb-cell[data-v="van"]{grid-area:c4}
  .rb-cell{flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
    padding:6px 4px 7px;border:1px solid #e9edf6;border-radius:10px;background:#f8faff}
  /* fixed label height so every price sits on the same line even when a name wraps */
  .rb-cell i{display:flex;align-items:center;justify-content:center;min-height:21px;
    color:#8a92a8;font-size:9.5px;font-weight:700;font-style:normal;line-height:1.1;
    letter-spacing:.03em;text-align:center;text-transform:uppercase}
  .rb-cell b{font-size:14px}

  .rb-dur{grid-area:dur;align-self:center;font-size:11.5px}
  .rb-go{grid-area:go;justify-self:end;align-self:center;height:34px;padding:0 20px;
    border-radius:11px;font-size:12.5px;letter-spacing:.05em}

  /* focus mode on a phone: one car only, the price gets the full width */
  .rate-board[data-focus] .rb-row{grid-template-areas:
      "dest  dest  dest  dest"
      "focus focus focus focus"
      "dur   dur   go    go"}
  .rate-board[data-focus] .rb-cell{flex-direction:row;justify-content:space-between;
    padding:9px 12px}
  .rate-board[data-focus] .rb-cell i{min-height:0;font-size:10.5px}
  .rate-board[data-focus] .rb-cell b{font-size:16px}
  .rate-board[data-focus] .rb-cell{display:none}
  .rate-board[data-focus="sedan"] .rb-cell[data-v="sedan"],
  .rate-board[data-focus="innova"] .rb-cell[data-v="innova"],
  .rate-board[data-focus="fortuner"] .rb-cell[data-v="fortuner"],
  .rate-board[data-focus="van"] .rb-cell[data-v="van"]{display:flex;grid-area:focus;
    background:#f2f7ff;box-shadow:inset 0 0 0 1px #dbe6ff}

  .rb-empty{padding:20px 14px;font-size:12.5px}
  .rb-note{font-size:11px}

  .rate-incl{width:calc(100% - 26px);padding:15px 0}
  .ri-grid{grid-template-columns:1fr;gap:10px}
  .ri-card{padding:13px 15px 15px;border-radius:14px}
  .ri-card h3{font-size:15px;margin-bottom:9px}
  .ri-card h3 svg{width:26px;height:26px;flex-basis:26px}
  .ri-card li{font-size:13px;padding-left:19px}

  .rate-steps{width:calc(100% - 26px);padding:15px 0}
  .rs-list{grid-template-columns:1fr;gap:9px}
  .rs-list li{padding:12px 14px 14px;border-radius:13px}
  .rs-n{width:27px;height:27px;margin-bottom:7px;font-size:12px}
  .rs-list b{font-size:14.5px}
  .rs-list small{font-size:12px}
}

/* narrow phones — tighten the strip instead of shrinking the type.
   At 320px this leaves ~59px inside each cell; "฿1,000" needs ~48px. */
@media(max-width:380px){
  .rb-row{gap:8px 4px;padding:10px 10px 11px}
  .rb-cell{padding:6px 2px 7px}
  .rb-go{padding:0 16px}
}

/* ============================================================
   TYPE SCALE — floor 9px, unified with the home page.
   micro 9-10 | caption 11-12 | body 13.5-14.5 | item 15-16
   card h3 15-19 | section h2 23 (mobile) / 32 (desktop)
   MUST STAY LAST IN THIS FILE so it wins the cascade.
   ============================================================ */
@media(min-width:901px){
  .rate-crumb{font-size:11px!important}
  .rate-kicker{font-size:10px!important}
  .rate-hero h1{font-size:34px!important}
  .rate-sub{font-size:13.5px!important}
  .rate-chips li{font-size:11px!important}
  .rate-search input{font-size:14px!important}
  .rl-head h2{font-size:19px!important}
  .rl-head p{font-size:12px!important}
  .rb-thead{font-size:10.5px!important}
  .rb-thead i{font-size:9.5px!important}
  .rb-gtext b{font-size:14px!important}
  .rb-gtext b em{font-size:9.5px!important}
  .rb-gtext small{font-size:11px!important}
  .rb-gcount{font-size:10px!important}
  .rb-dest b{font-size:15px!important}
  .rb-hot{font-size:10px!important}
  .rb-dur{font-size:12.5px!important}
  .rb-cell b{font-size:15.5px!important}
  .rb-go{font-size:12px!important}
  .rb-note{font-size:11.5px!important}
  .ri-card li{font-size:13.5px!important}
  .rs-list small{font-size:12.5px!important}
}
@media(max-width:900px){
  .rate-crumb{font-size:10.5px!important}
  .rate-kicker{font-size:9.5px!important}
  .rate-hero h1{font-size:24px!important}
  .rate-sub{font-size:12px!important}
  .rate-chips li{font-size:10.5px!important}
  .rate-search input{font-size:16px!important}   /* 16px stops iOS zoom-on-focus */
  .rl-head h2{font-size:17px!important}
  .rl-head p{font-size:11.5px!important}
  .rb-gtext b{font-size:13px!important}
  .rb-gtext small{font-size:10.5px!important}
  .rb-gcount{font-size:9.5px!important}
  .rb-dest b{font-size:15.5px!important}
  .rb-dur{font-size:11.5px!important}
  .rb-cell i{font-size:9.5px!important}          /* price-strip label, floor is 9 */
  .rb-cell b{font-size:14px!important}
  .rate-board[data-focus] .rb-cell i{font-size:10.5px!important}
  .rate-board[data-focus] .rb-cell b{font-size:16px!important}
  .rb-go{font-size:12.5px!important}
  .rb-note{font-size:11px!important}
  .ri-card li{font-size:13px!important}
  .rs-list small{font-size:12px!important}
}