/* New look for pages built on site.css (Find my deal, Stays, and later the
   category and info pages). Loaded AFTER site.css: it remaps the old tokens to
   the new palette (white, ink, one red action colour, teal only for savings),
   switches to Inter, rounds the controls, and styles the new header (.nh) and
   mobile tab bar (.nh-tabbar), which match /, /deals and /cheap-flights. */
:root{
  --paper:#FFFFFF; --card:#FFFFFF; --card-2:#F6F7F5;
  --ink:#101614; --ink-2:#3B4642; --muted:#66726D; --rule:#E6E8E5; --rule-2:#EEF0ED;
  --accent:#D6321E; --accent-ink:#FFFFFF; --accent-wash:#FDEEEB;
  --teal:#00806F; --teal-wash:#E5F4F1; --focus:#D6321E;
  --shadow:0 1px 2px rgba(16,22,20,.05),0 8px 24px rgba(16,22,20,.07);
  --f-display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1211; --card:#171D1B; --card-2:#151B19;
    --ink:#EEF2F0; --ink-2:#C3CCC8; --muted:#94A19C; --rule:#29312E; --rule-2:#202725;
    --accent:#EF4A35; --accent-ink:#FFFFFF; --accent-wash:#2A1714;
    --teal:#3CC4AE; --teal-wash:#123029; --focus:#EF4A35;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1211; --card:#171D1B; --card-2:#151B19;
  --ink:#EEF2F0; --ink-2:#C3CCC8; --muted:#94A19C; --rule:#29312E; --rule-2:#202725;
  --accent:#EF4A35; --accent-wash:#2A1714; --teal:#3CC4AE; --teal-wash:#123029; --focus:#EF4A35;
}
body{font-variation-settings:normal;line-height:1.55}
main.wrap{padding-top:28px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
h1{font-weight:900;letter-spacing:-.035em;font-variation-settings:normal;font-size:clamp(30px,5vw,48px);line-height:1.06}
h2{font-weight:800;letter-spacing:-.025em}
.eyebrow{font-size:13px;letter-spacing:.06em;font-weight:800;color:var(--accent)}
a{color:var(--accent)}
a:hover{color:var(--ink)}
.btn{border-radius:999px}
.btn-solid{background:var(--accent);border-color:var(--accent);color:#fff}

/* labels: sentence-case, no monospace caps */
.fform label,.tsearch label,.tcost label,.ftool label{font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-2)}
/* inputs: soft pills */
.fform input,.fform select,.tsearch input,.tsearch select,.tcost input,.tcost select,.ftool input,.ftool select,.alertbox input{
  background:var(--card-2);border:1.5px solid transparent;border-radius:999px;padding:12px 16px;font-size:16px}
.fform input:focus,.fform select:focus,.tsearch input:focus,.tsearch select:focus,.tcost input:focus,.tcost select:focus,.ftool input:focus,.ftool select:focus,.alertbox input:focus{
  outline:none;border-color:var(--ink);background:var(--card)}
/* main actions: red pills */
.fform .go,.tsearch .go,.alertbox button,.ftool .btn2{background:var(--accent);color:#fff;border-radius:999px;padding:12px 20px}
.fform .go:hover,.tsearch .go:hover,.alertbox button:hover,.ftool .btn2:hover{filter:none;background:#B8281A}
/* boxes */
.fbox,.tsearch,.tcost,.ftool,.panel{border-radius:22px}
.ftabs button,.tsearch-tabs button{background:var(--card);border-color:var(--rule)}
.ftabs button[aria-selected="true"],.tsearch-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.region button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.region{border-radius:999px}
.chips button{border-style:solid;background:var(--card)}
.chips button:hover,.quick a:hover,.links a:hover{border-color:var(--ink);color:var(--ink)}
.quick a.main,.links a.main{background:var(--accent);border-color:var(--accent);color:#fff}
.quick a.main:hover,.links a.main:hover{background:#B8281A;color:#fff}
.links a.av,.av-btn{border-style:dashed}
/* results */
.rcard,.tdeal,.tcard{border-radius:16px}
.rcard .price{color:var(--accent)}
.rcard .cta{background:var(--accent);color:#fff;border-radius:999px}
.rcard .cta:hover{background:#B8281A;color:#fff}
.best-box{border-radius:16px}
.best-box .big{color:var(--accent)}
.cal .d{border-radius:10px}
.alertbox{background:var(--accent-wash);border-color:transparent;border-radius:16px}
.elsewhere{border-radius:16px}
.tdeal-price .amt{color:var(--accent)}
.tdeal-go,.tcard .go{color:var(--accent)}
.tdeal:hover{border-color:var(--ink)}
.subhead{color:var(--accent);letter-spacing:.06em}
.ftool>summary .n{background:var(--ink)}
.tsearch .after,.tcost-total,.ftool .out{border-radius:12px}

/* ---------- new header ---------- */
.nh{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nh .wrap{display:flex;align-items:center;gap:14px;height:62px}
.nh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.nh-brand:hover{color:var(--ink)}
.nh-brand .t{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px}
.nh-nav{display:flex;gap:2px;margin-left:auto}
.nh-nav a{text-decoration:none;font-weight:600;font-size:15px;color:var(--ink-2);padding:8px 12px;border-radius:999px}
.nh-nav a:hover,.nh-nav a[aria-current="page"]{background:var(--card-2);color:var(--ink)}
.nh-bell{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);border:1px solid var(--rule);background:var(--card)}
.nh-bell:hover{border-color:var(--ink);color:var(--ink)}
.nh svg,.nh-tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.nh-nav{display:none}.nh-bell{margin-left:auto}}
@media (max-width:380px){.nh-brand span:last-child{display:none}}
.nh-tabbar{display:none}
@media (max-width:760px){
  body{padding-bottom:72px}
  .nh-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--rule);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .nh-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 0}
  .nh-tabbar a[aria-current="page"]{color:var(--accent)}
}

/* ---------- route pages (flights/*) ---------- */
.fare{border-radius:22px}
.fare .big{color:var(--accent)}
.actions a.main{background:var(--accent);border-color:var(--accent);color:#fff}
.actions a.main:hover{background:#B8281A;color:#fff}
.actions a:hover,.rlist a:hover{border-color:var(--ink)}
.rlist a{border-radius:14px}
.rlist a span{color:var(--accent)}
.crumbs a:hover{color:var(--ink)}
/* ---------- category and info pages ---------- */
.doc{max-width:76ch}
.table-scroll{border:1px solid var(--rule);border-radius:16px;background:var(--card)}
.table-scroll th{background:var(--card-2);letter-spacing:.02em;text-transform:none;font-size:13px;font-weight:700;color:var(--ink-2)}
.table-scroll td a{font-weight:700}
.category-banner{border-radius:22px}
footer{font-size:13.5px}
footer .fnav a{color:var(--ink-2)}
footer .fnav a:hover{color:var(--accent)}
