/* Visafir — the brand is the logo: electric blue for structure and action,
   amber-to-orange for the one thing you should look at next. Mono for
   machine-made values (times, codes, PNRs), condensed type for headings. */

:root {
  --brand:#333ff4; --brand-ink:#232cc4; --brand-deep:#161a63; --brand-50:#f0f1ff; --brand-100:#dde0ff;
  --amber:#fdb500; --amber-2:#f97316; --amber-dim:#8a6416; --amber-50:#fff7e6;
  --ink:#121633; --board:#161a63; --board-2:#232a80;
  --paper:#f2f4fb; --panel:#fff; --line:#dfe3f2; --line-soft:#ecEFFA; --muted:#5a6280; --muted-2:#8b93b0;
  --ok:#067a55; --ok-bg:#e6f4ef; --warn:#a35a07; --warn-bg:#fdf3e4; --err:#b3261e; --err-bg:#fdecea;
  --r:10px; --r-sm:7px;
  --shadow:0 1px 2px rgba(22,26,99,.05),0 10px 30px -18px rgba(22,26,99,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Barlow Condensed",Inter,sans-serif;font-weight:600;letter-spacing:.01em;margin:0}
.mono,.code,time,.fare-amt,.pnr{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink)}

/* shell */
.masthead{position:sticky;top:0;z-index:30;background:#fff;color:var(--ink);border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--brand) 0%,var(--brand) 45%,var(--amber) 75%,var(--amber-2) 100%) 1;box-shadow:0 6px 24px -20px rgba(22,26,99,.6)}
.masthead-in{max-width:1160px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--brand);font-family:"Barlow Condensed",sans-serif;font-size:25px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.brand img{height:34px;width:auto;display:block}
.brand span{color:var(--amber-2)}
.env-tag{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;border:1px solid #f0cf8a;background:var(--amber-50);color:#8a6416;padding:2px 7px;border-radius:999px}
.env-tag.live{border-color:#9fd9bf;background:var(--ok-bg);color:var(--ok)}
.toplink{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.09em;text-decoration:none}
.toplink:hover{color:var(--brand)}
.stepper{display:flex;margin-left:auto;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:7px;padding:5px 13px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2);border-right:1px dashed var(--line)}
.step:last-child{border-right:0}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:10px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line)}
.step.done{color:var(--muted)}.step.done .n{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.step.active{color:var(--brand-ink);font-weight:600}.step.active .n{border-color:var(--brand);background:var(--brand);color:#fff;font-weight:600}
.wrap{max-width:1160px;margin:0 auto;padding:22px 20px 72px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel-hd{padding:13px 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-hd h2{font-size:19px;text-transform:uppercase;letter-spacing:.05em}
.panel-bd{padding:18px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-2)}
.mb{margin-bottom:16px}.mt{margin-top:16px}

/* forms */
.triptabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.triptab{background:none;border:1px solid var(--line);border-radius:var(--r);padding:6px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;cursor:pointer;color:var(--muted)}
.triptab[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

/* Leg tabs on the results page: a row of journeys, each with its own date.
   Underline rather than pill, so three legs read as one itinerary. */
.legtabs{display:flex;gap:4px;align-items:stretch;overflow-x:auto;border-bottom:1px solid var(--line);margin:0;-webkit-overflow-scrolling:touch}
.legtab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 16px 9px;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;text-align:left;white-space:nowrap;color:var(--muted);font:inherit}
.legtab:hover{background:#f7f8fc}
.legtab .lt-route{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--muted)}
.legtab .lt-arrow{color:var(--muted-2);margin:0 2px;font-weight:400}
.legtab .lt-date{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;color:var(--muted-2)}
.legtab.on{border-bottom-color:var(--amber-2)}
.legtab.on .lt-route{color:var(--amber-2)}
.legtab.on .lt-arrow{color:var(--amber-2)}
.legtab.on .lt-date{color:var(--ink)}
.legtab .lt-tick{color:#0a7d55;margin-left:7px;font-size:12px}
/* A flight into a different airport than searched — loud enough to notice. */
.tag.nearby{background:#eef4ff;border-color:#b9ccff;color:#1d4ed8;font-weight:600}
.grid{display:grid;gap:12px}
.search-grid{grid-template-columns:1.1fr 1.1fr .9fr .9fr 1fr minmax(150px,auto);align-items:end}
.field{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2)}
.control{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:9px 11px;width:100%;min-width:0}
.control:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.control::placeholder{color:#aab1bb}
.control:disabled{background:#f6f7fc;color:var(--muted-2);cursor:not-allowed}
.ac-input{font-family:"IBM Plex Mono",monospace;text-transform:uppercase}
/* The suggestions are wider than the field they hang from. The To box is one
   narrow column of six, and city, country and airport name cannot share 180px
   without "Dehradun" becoming "De...". It grows rightwards, where the rest of
   the form sits, and never past the viewport edge. */
.ac-list{position:absolute;top:100%;left:0;right:auto;z-index:40;min-width:max(100%,380px);width:max-content;max-width:min(460px,calc(100vw - 28px));background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-top:6px;max-height:352px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 20px 44px -18px rgba(22,26,99,.45),0 2px 6px rgba(22,26,99,.06)}
.ac-list::-webkit-scrollbar{width:10px}
.ac-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;border:3px solid #fff}
.field[data-ac] .ac-list.flip{left:auto;right:0}
/* Airport suggestions, laid out like the supplier's own B2B portal: the code in
   its own column, city and country together on the first line, the airport name
   quiet underneath. Two lines per row costs height but stops the three Auckland
   airports looking identical. */
.ac-item{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:14px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.ac-item:last-child{border-bottom:0}.ac-item:hover{background:var(--brand-50)}
.ac-item b{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;color:var(--amber-2);letter-spacing:.03em}
.ac-item .m{min-width:0}
.ac-item .t{display:flex;align-items:baseline;gap:12px}
.ac-item .c{font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-item .cn{margin-left:auto;padding-left:10px;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.ac-item .n{display:block;margin-top:2px;font-size:12.5px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-item:hover .c,.ac-item:hover .cn{color:var(--brand-ink)}
@media (max-width:480px){
/* On a phone the fields are already full width, so the panel goes back to
   matching its input. min-width wins over max-width in CSS, so leaving the
   desktop 380px here would hang the panel off the side of the screen. */
.ac-list{left:0;right:0;min-width:100%;width:auto;max-width:100%}
.ac-item{grid-template-columns:46px 1fr;gap:10px;padding:10px}.ac-item .c{font-size:14px}.ac-item .cn{font-size:12px;color:var(--muted)}.ac-item .n{font-size:11.5px}}
.swap-inline{background:none;border:0;color:var(--muted-2);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;cursor:pointer;padding:0 0 0 8px;text-transform:uppercase}
.swap-inline:hover{color:var(--ink);text-decoration:underline}
.paxbar{display:flex;gap:18px;flex-wrap:wrap;align-items:end}
.stepper-num{display:flex;align-items:center;gap:8px}
.stepper-num button{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:var(--r);cursor:pointer;line-height:1}
.stepper-num button:hover:not(:disabled){border-color:var(--ink)}.stepper-num button:disabled{opacity:.35;cursor:not-allowed}
.stepper-num .val{font-family:"IBM Plex Mono",monospace;width:18px;text-align:center}
.btn{border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:var(--r);padding:10px 20px;cursor:pointer;font-size:13px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;text-decoration:none;display:inline-block}
.btn:hover:not(:disabled){background:var(--brand-ink);border-color:var(--brand-ink)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}.btn.ghost:hover:not(:disabled){border-color:var(--ink);background:#fff}
.btn.amber{background:linear-gradient(135deg,var(--amber),var(--amber-2));border-color:transparent;color:#23180a;font-weight:600;box-shadow:0 8px 18px -12px rgba(249,115,22,.9)}
.btn.amber:hover:not(:disabled){filter:brightness(1.05)}
.btn.brand{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;box-shadow:0 8px 18px -12px rgba(51,63,244,.9)}
.btn.brand:hover:not(:disabled){background:var(--brand-ink)}
.btn.danger{background:none;color:var(--err);border-color:#f3c3bf}.btn.danger:hover:not(:disabled){background:var(--err-bg);border-color:var(--err)}
.btn.sm{padding:6px 13px;font-size:11px}.btn.block{width:100%}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* results */
.results-layout{display:grid;grid-template-columns:232px 1fr;gap:18px;align-items:start}

/* The route, the date and the sort tabs follow you down a long results list —
   on 2,000 flights it is easy to forget which leg you are even looking at. */

/* The search, pinned across the top of the results. Dark, so it reads as part
   of the header furniture rather than as another card in the list. */
.searchstrip{position:sticky;top:var(--mast-h,0px);z-index:25;background:linear-gradient(115deg,var(--brand-deep),var(--brand));
  color:#fff;border-radius:0 0 var(--r) var(--r);border-bottom:2px solid var(--amber);
  margin:-22px -20px 14px;padding:0 20px;box-shadow:0 14px 26px -22px rgba(22,26,99,.95)}
.ss-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:11px 0}
.ss-cell{padding:2px 20px;border-left:1px solid rgba(255,255,255,.16);min-width:0}
.ss-cell:first-child{border-left:0;padding-left:0}
.ss-k{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#9fb0ff}
.ss-v{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;margin-top:1px}
.ss-sub{font-size:11px;color:#b9c3dd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.ss-code{font-family:"IBM Plex Mono",monospace;color:var(--amber);font-size:17px;letter-spacing:.05em}
.ss-dash{margin:0 6px;color:#9fb0ff;font-size:13px}
.ss-v{display:flex;align-items:baseline;flex-wrap:wrap}
.ss-act{margin-left:auto;display:flex;gap:8px;align-items:center;padding-left:16px}
.ss-modify{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.4);color:#fff}
.ss-modify:hover{background:rgba(255,255,255,.2);border-color:#fff}
/* The sort row keeps its own line under the strip. */
.sortbar{border-radius:var(--r) var(--r) 0 0;border-top:1px solid var(--line)}
.sortcount{display:flex;align-items:center;padding:0 14px;font-size:11px;color:var(--muted-2);border-left:1px solid var(--line-soft);white-space:nowrap}
.resbar{position:sticky;top:calc(var(--mast-h,0px) + var(--strip-h,0px));z-index:20;background:var(--bg);box-shadow:0 10px 18px -18px rgba(22,26,99,.9)}
/* The filter rail stays put too, and scrolls inside itself when the airline
   list is longer than the screen. */
.filters{position:sticky;top:calc(var(--mast-h,0px) + var(--strip-h,0px) + 12px);max-height:calc(100vh - var(--mast-h,0px) - var(--strip-h,0px) - 24px);overflow-y:auto;overscroll-behavior:contain}
.board{background:linear-gradient(115deg,var(--brand-deep),var(--brand));color:#fff;border-radius:var(--r) var(--r) 0 0;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--amber)}
.board .route{font-family:"IBM Plex Mono",monospace;font-size:17px;letter-spacing:.06em;color:var(--amber)}
.board .meta{font-size:12px;color:#9aa4b2;letter-spacing:.04em}
.filters .fgroup{padding:14px 16px;border-bottom:1px solid var(--line-soft)}.filters .fgroup:last-child{border-bottom:0}
.filters h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.filters label{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;cursor:pointer}
.filters .count{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted-2)}
.filters input[type=range]{width:100%;accent-color:var(--ink)}
.sortbar{display:flex;border:1px solid var(--line);border-top:0;background:#fff}
.sortbar button{flex:1;background:none;border:0;border-right:1px solid var(--line-soft);padding:9px 8px;cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sortbar button:last-child{border-right:0}
.sortbar button[aria-pressed="true"]{color:var(--brand-ink);box-shadow:inset 0 -2px 0 var(--brand);font-weight:600}
.flight-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
/* the strip under the results: progress, and a button for anyone who would
   rather click than scroll. Fixed height so appending a batch does not make
   the page jump under the finger. */
.list-tail{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 0 4px}
.list-tail:empty{min-height:0;padding:0}
.tail-note{font-size:12px;color:var(--muted)}
@media (max-width:480px){.list-tail{flex-direction:column;gap:8px}}
.flight{background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:border-color .12s,box-shadow .12s;animation:flap .22s ease-out backwards;transform-origin:top center}
.flight:hover{border-color:#aab3bf;box-shadow:var(--shadow)}.flight.open{border-color:var(--ink);box-shadow:var(--shadow)}
.flight-main{display:grid;grid-template-columns:150px 1fr 286px;gap:16px;align-items:center;padding:14px 16px}
/* The flight and its tags share the middle column, so a one-way card is
   not a single thin line of text beside a five-row fare list. */
.flight-mid{display:flex;flex-direction:column;gap:12px;min-width:0;justify-content:center}
.flight-mid .taglist{padding:0;gap:6px}
.flight-mid .linkish{margin-left:auto}
.carrier{display:flex;align-items:center;gap:10px;min-width:0}
.carrier .iata{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px;background:var(--brand-50);color:var(--brand-ink);border:1px solid var(--brand-100);padding:5px 7px;border-radius:var(--r-sm);letter-spacing:.04em}
.carrier .who{min-width:0;overflow:hidden}
.carrier .fn{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.carrier .nm{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.carrier .fn{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted-2)}
.sector{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.sector .end{text-align:center}.sector .end .t{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:500;line-height:1.1}
.sector .end .p{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted-2);letter-spacing:.06em}
.sector .mid{text-align:center}.sector .mid .dur{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.sector .mid .line{height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px);margin:6px 0 5px;position:relative}
.sector .mid .line::after{content:"✈";position:absolute;right:-2px;top:50%;transform:translateY(-50%);background:#fff;padding-left:4px;font-size:11px;color:var(--muted)}
.sector .mid .stops{font-size:11px;color:var(--muted-2)}.sector .mid .stops.nonstop{color:var(--ok)}
.pricecol{text-align:right}.pricecol .fare-amt{font-size:21px;font-weight:600;letter-spacing:-.02em}
.pricecol .per{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}.pricecol .btn{margin-top:7px}

/* ---- fare picker on the result card -------------------------------------
   The fares are the decision, so they sit in the card rather than behind a
   "View fares" button: choose one, press Book. Only the first three show;
   the rest unfold in place. */
.farepick{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);padding-left:16px;min-width:0}
/* Nine fares would make the card enormous, so the unfolded list scrolls. */

.farepick-list{display:flex;flex-direction:column;max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.fare-opt{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.fare-opt + .fare-opt{border-top:1px solid var(--line);border-radius:0}
.fare-opt:hover{background:#f7f8fc}
.fare-opt.on{background:#f2f3ff;border-color:var(--brand);border-radius:8px}
.fare-opt.on + .fare-opt{border-top-color:transparent}
.fare-opt input{margin:0;accent-color:var(--brand);flex:0 0 auto}
/* price and its label on ONE line: three fares then read as three rows,
   not six, which is what left a one-way card half empty. */
.fo-body{display:flex;align-items:baseline;gap:7px;min-width:0;flex-wrap:wrap}
.fo-price{font-size:15.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.fo-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.fo-chip{background:#fdf3d6;color:#7a5a00;border-radius:4px;padding:1px 5px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.fo-ref{color:#0a7d55}.fo-non{color:#c2410c}
.farepick-more{background:none;border:0;color:var(--brand);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:6px 8px;text-align:left;align-self:flex-start}
.farepick-more:hover{text-decoration:underline}
.farepick-book{margin-top:6px;width:100%}
.farepick-note{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;text-align:center;margin-top:4px}
/* "Flight details" reads as a link, not a second call to action. */
.linkish{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--brand);cursor:pointer;text-decoration:underline;margin-left:auto}
.tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.07em;padding:2px 6px;border-radius:2px;border:1px solid var(--line);color:var(--muted)}
.tag.ok{background:var(--ok-bg);border-color:#b8e0d0;color:var(--ok)}.tag.warn{background:var(--warn-bg);border-color:#f0d4a8;color:var(--warn)}
.tag.err{background:var(--err-bg);border-color:#f3c3bf;color:var(--err)}.tag.amber{background:#fff5df;border-color:#f2d79a;color:#8a6416}
.taglist{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.fares{border-top:1px solid var(--line-soft);background:#fbfcfd;padding:12px 16px}
.fare-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:9px 11px;background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:7px}
.fare-row:last-child{margin-bottom:0}.fare-row .fname{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.fare-row .fmeta{font-size:11px;color:var(--muted);margin-top:2px}
.legs{border-top:1px solid var(--line-soft);padding:12px 16px}
.leg{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line-soft);font-size:13px}
.leg:last-child{border-bottom:0}.leg .lt{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.layover{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--warn);background:var(--warn-bg);padding:4px 9px;border-radius:2px;margin:6px 0;display:inline-block}

/* review / travellers / payment */
.two-col{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.summary{position:sticky;top:18px}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px}.sum-row .v{font-family:"IBM Plex Mono",monospace}
.sum-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:11px;font-size:17px;font-weight:600}.sum-row.muted{color:var(--muted)}
.pax-card{border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px}
.pax-hd{background:#f7f8fa;border-bottom:1px solid var(--line-soft);padding:9px 14px;display:flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.pax-bd{padding:14px}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.form-grid .span2{grid-column:span 2}.form-grid .span4{grid-column:span 4}
.field.invalid .control{border-color:var(--err)}.field .err-msg{font-size:11px;color:var(--err)}
.notice{border-left:3px solid var(--amber);background:var(--amber-50);padding:11px 14px;border-radius:0 var(--r) var(--r) 0;font-size:13px;margin-bottom:14px}
.notice.error{border-left-color:var(--err);background:var(--err-bg)}.notice.ok{border-left-color:var(--ok);background:var(--ok-bg)}
.notice .hd{font-weight:600;margin-bottom:3px}.notice code{font-family:"IBM Plex Mono",monospace;font-size:12px}
.rule-block{font-size:13px}.rule-block table{width:100%;border-collapse:collapse;margin-top:6px}
.rule-block th,.rule-block td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-soft);font-size:12px;vertical-align:top}
.rule-block th{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);font-weight:400}
.rule-block td.num{font-family:"IBM Plex Mono",monospace;text-align:right}
/* ---- the airline's cancellation and change rules, in plain English ---- */
.rule-wait{color:var(--muted);font-size:13px;margin:0}
.rule-sum{margin:0 0 14px;padding:11px 13px;border-radius:var(--r);background:var(--amber-50);
  border:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--ink)}
.rule-sec{margin-bottom:16px}
.rule-sec h3{margin:0 0 2px;font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.rule-block .rule-tbl td{font-size:13px;padding:9px 8px;line-height:1.45}
.rule-block .rule-tbl td.num{white-space:nowrap;font-size:13px}
.rule-note{margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.rule-fee{display:block;font-size:11px;color:var(--muted)}
.rule-free{color:var(--ok)}
.rule-no{color:var(--err)}
.rule-none{color:var(--muted);font-size:12.5px;font-style:normal}
.rule-foot{margin:8px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
@media (max-width:760px){
  .rule-sum{font-size:13px}
  /* the shared phone layout stacks each cell under its own label; the amount
     reads better beside that label than right-aligned under it */
  .rule-block .rule-tbl td.num{text-align:left;font-size:14px}
  .rule-block .rule-tbl tr{padding:9px 12px;margin-bottom:7px}
  .rule-block .rule-tbl td{padding:1px 0}
  .rule-block .rule-tbl td.num::before{margin-top:5px}
}
details.disclosure{border-top:1px solid var(--line-soft);padding:10px 0 0;margin-top:10px}
details.disclosure summary{cursor:pointer;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
details.disclosure[open] summary{color:var(--ink)}
details.disclosure pre{font-family:"IBM Plex Mono",monospace;font-size:11px;background:var(--board);color:#cfd6df;padding:12px;border-radius:var(--r);overflow:auto;max-height:320px}
.paymode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.paymode label{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.paymode label.on{border-color:var(--ink);background:#fffaf0}
.paymode .t{font-weight:600;font-size:13px}.paymode .d{font-size:12px;color:var(--muted)}

/* extras: seats + SSR */
.seg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pax-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pax-tabs .triptab .s{font-family:"IBM Plex Mono",monospace;font-size:10px;margin-left:6px;color:var(--amber-2)}
.triptab[aria-pressed="true"] .s{color:#ffd980}
/* seat map — a cabin you can read at a glance: colour is price, the face is
   the seat letter, and the panel on the right says who is sitting where. */
.seatpick{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:16px;align-items:start}
.cabin-wrap{overflow:auto;padding-bottom:4px;max-height:62vh}
.fuselage{width:max-content;min-width:100%;margin:0 auto}
.cabin{width:100%;background:linear-gradient(180deg,#fbfcff,#f4f6fd);border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;padding:8px 54px 18px 16px}
.cabin-nose{width:100%;height:42px;position:sticky;top:0;z-index:2;border:1px solid var(--line);border-bottom:0;border-radius:120px 120px 0 0;background:linear-gradient(180deg,#fff,#fbfcff);display:grid;place-items:center}
.cabin-nose span{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.deck{display:flex;flex-direction:column;gap:6px}
.seat-row{display:flex;gap:6px;align-items:center}
.seat-row .rn{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted-2);width:24px;text-align:right;margin-right:2px}
.seat-row.hdr .seat-col{width:34px;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted-2)}
.seat-row.exitrow{position:relative}
.seat-row.exitrow::after{content:"EXIT";position:absolute;right:-44px;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;color:#1d8a5f}
.aisle{width:20px;flex:0 0 20px}
.seat{width:34px;height:34px;border-radius:9px 9px 5px 5px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:11px;cursor:pointer;display:grid;place-items:center;padding:0;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.seat.t0{background:#eefaf4;border-color:#c4e7d7}
.seat.t1{background:#fff8e8;border-color:#f2ddae}
.seat.t2{background:#ffe0c2;border-color:#efb375}
.seat.legroom{box-shadow:inset 0 -3px 0 #1d8a5f}
.seat:hover:not(:disabled){transform:translateY(-1px);border-color:var(--brand);box-shadow:0 8px 14px -10px rgba(51,63,244,.8)}
.seat.booked{background:repeating-linear-gradient(45deg,#eef0f7,#eef0f7 3px,#e6e9f3 3px,#e6e9f3 6px);border-color:#e2e6f0;color:#b3bad0;cursor:not-allowed}
.seat.mine{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;box-shadow:0 8px 16px -10px rgba(51,63,244,.9)}
.seat.other{background:var(--brand-100);border-color:#c5caff;color:var(--brand-ink);font-weight:600}
.seat-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:12px}
.seat-legend i{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:-2px;margin-right:5px;border:1px solid var(--line)}
/* who sits where */
.seat-side{border:1px solid var(--line);border-radius:var(--r);background:#fff;position:sticky;top:14px}
.seat-side h4{margin:0;padding:11px 14px;border-bottom:1px solid var(--line-soft);font-family:"Barlow Condensed",sans-serif;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.seat-side .who{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);padding:10px 14px;cursor:pointer}
.seat-side .who:last-of-type{border-bottom:0}
.seat-side .who[aria-pressed="true"]{background:var(--brand-50)}
.seat-side .who .nm{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat-side .who .sc{font-family:"IBM Plex Mono",monospace;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:2px 7px;min-width:38px;text-align:center;color:var(--muted-2)}
.seat-side .who[aria-pressed="true"] .sc{border-color:var(--brand);color:var(--brand-ink)}
.seat-side .who .sc.set{background:var(--brand);border-color:var(--brand);color:#fff}
.seat-side .who .amt{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted-2);width:58px;text-align:right}
.seat-side .foot{display:flex;justify-content:space-between;gap:8px;padding:11px 14px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted)}
.seat-side .foot b{font-family:"IBM Plex Mono",monospace;color:var(--ink)}
.seat-side .clearseat{margin:0 14px 12px;font-size:11px;background:none;border:1px solid var(--line);border-radius:6px;padding:5px 9px;cursor:pointer;color:var(--muted)}
.seat-side .clearseat:hover{border-color:var(--err);color:var(--err)}
@media (max-width:900px){ .seatpick{grid-template-columns:1fr} .seat-side{position:static} }
.ssr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ssr{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:center;background:#fff}
.ssr.on{border-color:var(--ink);background:#fffaf0}.ssr .d{font-size:13px}.ssr .c{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted-2)}
.ssr .a{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:13px}

/* ticket */
.ticket{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.ticket-hd{background:var(--board);color:#fff;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ticket-hd .status{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6ee7b7}
.ticket-hd .status.hold{color:var(--amber)}.ticket-hd .status.bad{color:#f7a39b}
.pnr-strip{display:flex;gap:26px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px dashed var(--line);background:#fffaf0}
.pnr-strip .k{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2)}
.pnr-strip .pnr{font-size:19px;font-weight:600;letter-spacing:.08em}
.tear{height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}

/* manage page */
.order-list{display:flex;flex-direction:column;gap:8px}
.order{display:grid;grid-template-columns:150px 1fr auto auto;gap:14px;align-items:center;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.order:hover{border-color:var(--ink)}
.order .id{font-family:"IBM Plex Mono",monospace;font-weight:600}
.order .sub{font-size:12px;color:var(--muted)}

/* states */
.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty h3{font-size:21px;margin-bottom:6px;color:var(--ink);text-transform:uppercase;letter-spacing:.05em}
.skeleton{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:10px}
.sk-line{height:11px;background:linear-gradient(90deg,#eceff3 25%,#f6f7f9 50%,#eceff3 75%);background-size:200% 100%;border-radius:2px;animation:sweep 1.3s linear infinite}
@keyframes sweep{to{background-position:-200% 0}}
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:7px}
.spinner.dark{border-color:rgba(13,17,23,.2);border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flap{from{opacity:0;transform:translateY(-5px) rotateX(28deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media (max-width:1000px){
  .search-grid{grid-template-columns:1fr 1fr}.results-layout{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}
  .summary{position:static}.form-grid{grid-template-columns:repeat(2,1fr)}.form-grid .span4{grid-column:span 2}
  .order{grid-template-columns:1fr 1fr}
}
/* Between tablet and phone the three-column card gets too tight for a fare
   list, so the picker moves below the flight before the rest of the layout
   stacks. */
@media (max-width:880px) and (min-width:641px){
  .flight-main{grid-template-columns:168px 1fr;gap:14px}
  .farepick{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:10px}
  .farepick-book{max-width:320px}
}
@media (max-width:640px){
  .search-grid{grid-template-columns:1fr}.flight-main{grid-template-columns:1fr;gap:12px}
  .pricecol{text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px}.pricecol .btn{margin-top:0}
  /* On a narrow card the fare picker drops under the flight and runs full
     width, with the dividing rule moving from the side to the top. */
  .farepick{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:10px;margin-top:4px}
  .form-grid{grid-template-columns:1fr}.form-grid .span2,.form-grid .span4{grid-column:span 1}
  .stepper{width:100%;margin-left:0;overflow-x:auto}.step{padding:5px 11px}.paymode{grid-template-columns:1fr}
}

/* accounts / modal / dashboard */
.userchip{display:flex;gap:14px;align-items:center;margin-left:14px}
.toplink.asbtn{background:none;border:0;cursor:pointer;padding:0;font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.toplink.asbtn:hover{color:var(--brand)}
.modal-bg{position:fixed;inset:0;background:rgba(18,22,51,.55);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:100;padding:16px}
.modal{width:100%;max-width:440px;animation:flap .2s ease-out}
.dash-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.stats{display:flex;gap:26px}
.stats .n{font-size:24px;font-weight:600;letter-spacing:-.02em}
.stats .k{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2)}
@media print{.masthead,.actions,.btn,details,.panel.mb:has(#btnCharges){display:none!important}.wrap{padding:0}}

/* product nav + hotel cards */
.prodnav{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--brand-50)}
.prodnav a{padding:5px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);text-decoration:none}
.prodnav a.on{background:var(--brand);color:#fff;font-weight:600}
.prodnav a:not(.on):hover{color:var(--brand)}
.room-cfg{display:flex;gap:18px;align-items:end;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--line-soft)}
.room-cfg .stepper-num{gap:6px}.room-cfg .stepper-num label{margin-right:2px}
.hotel-card{display:grid;grid-template-columns:104px 1fr 150px;gap:14px;align-items:center;padding:12px 16px;cursor:pointer}
.hthumb{width:104px;height:84px;object-fit:cover;border-radius:var(--r);background:var(--board)}
.hthumb.noimg{display:grid;place-items:center;color:var(--amber);font-family:"Barlow Condensed",sans-serif;font-size:30px;font-weight:700}
.hthumb.big{width:100%;height:190px;border-radius:var(--r) var(--r) 0 0}
.hero .hero-in{padding:14px 18px}
.hstars{color:var(--amber-dim);letter-spacing:.1em;font-size:13px}
.hmain{min-width:0;display:flex;flex-direction:column;gap:4px}
@media (max-width:640px){.hotel-card{grid-template-columns:72px 1fr}.hotel-card .pricecol{grid-column:1/-1}}

/* multi-city search */
.mc-legs{display:flex;flex-direction:column;gap:10px}
.mc-leg{display:grid;grid-template-columns:28px 1fr 1fr 150px 28px;gap:12px;align-items:end}
.mc-leg .mc-n{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;margin-bottom:9px}
.mc-del{width:28px;height:38px;border:1px solid var(--line-soft);background:none;color:var(--muted);border-radius:var(--r);cursor:pointer;margin-bottom:1px}
.mc-del:hover{color:var(--err);border-color:var(--err)}
.mc-del-spacer{width:28px}
.mc-actions{display:flex;gap:14px;align-items:end;margin-top:6px;flex-wrap:wrap}
.mc-actions .btn:last-child{margin-left:auto}
@media (max-width:640px){.mc-leg{grid-template-columns:24px 1fr 1fr;gap:8px}.mc-leg [data-mcdate]{grid-column:2/4}.mc-del,.mc-del-spacer{grid-row:1;grid-column:3;justify-self:end}}
/* combined round-trip (COMBO) cards */
.flight.combo .flight-main{align-items:center}
.combo-legs{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.combo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* Outbound / Return, with the travel date under it — the two legs of a round
   trip are only tellable apart by their dates. */
.combo-label{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);width:86px;flex:0 0 86px}
.combo-label .combo-date{display:block;margin-top:2px;letter-spacing:.04em;text-transform:none;font-size:11px;color:var(--ink);font-weight:500}
.combo-row .sector{flex:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-width:0}
.combo-flights{flex:0 0 100%;padding-left:98px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted-2);letter-spacing:.04em}
.next-day{font-size:10px;color:var(--amber-2);font-weight:700;margin-left:1px;top:-.5em}
/* A round trip card carries two legs, so the legs get a dividing rule. */
.combo-legs .combo-row + .combo-row{border-top:1px dashed var(--line);padding-top:8px}
/* ---------------------------- phones ---------------------------------
   The desktop layout is two columns with a permanent filter rail; on a
   phone the rail folds behind a button, the stepper shows only where you
   are, and tables that were built for width stack instead. */
.filters-toggle{display:none;background:#fff;color:var(--ink);border-color:var(--line);justify-self:start;width:auto}
@media (max-width:900px){
  /* Stack the round-trip legs: the label sits above its own times. */
  .combo-row{gap:6px}
  .combo-label{flex:0 0 100%;width:auto}
  .combo-label .combo-date{display:inline;margin-left:8px}
  .combo-flights{padding-left:0}
}
.filters-toggle .fcount{background:var(--brand);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;margin-left:6px}
@media (max-width:900px){
  .filters-toggle{display:inline-flex;align-items:center;margin-bottom:12px}
  /* No room to pin things on a phone: the rail folds behind a button and
     the summary scrolls away with the page. */
  .filters{display:none;position:static;max-height:none;overflow:visible}
  .resbar{position:static;box-shadow:none}
  .masthead{position:static}
  .searchstrip{position:static;margin:-16px -12px 12px;padding:0 12px}
  .ss-in{padding:10px 0;gap:4px}
  .ss-cell{border-left:0;padding:2px 0;flex:1 0 46%}
  .ss-act{flex:1 0 100%;margin-left:0;padding-left:0;margin-top:8px}
  .ss-act .btn{flex:1}
  .filters.open{display:block;margin-bottom:14px}
  /* only the step you are on, so seven steps do not eat three rows */
  .stepper{width:100%;margin-left:0;flex-wrap:nowrap}
  .step{display:none}
  .step.active{display:flex;border-right:0;padding-left:0}
  .masthead-in{gap:12px;padding:12px 16px}
  .board{padding:12px 14px}
  .board .route{font-size:15px}
  /* fare rules read as stacked labels rather than a squeezed table */
  .rule-block table,.rule-block tbody,.rule-block tr,.rule-block td,.rule-block th{display:block;width:100%}
  .rule-block thead{display:none}
  .rule-block tr{border:1px solid var(--line-soft);border-radius:var(--r);padding:10px 12px;margin-bottom:8px}
  .rule-block td{border:0;padding:2px 0;text-align:left}
  .rule-block td::before{content:attr(data-k);display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted-2)}
  .ssr-grid{grid-template-columns:1fr}
  .seat-side{position:static}
  .cabin-wrap{max-height:65vh}     /* still scrolls, so the page stays short */
  .summary{position:static}
  .btn{min-height:44px}            /* thumb-sized targets */
  .seat{width:32px;height:32px}
}
@media (max-width:420px){
  .wrap{padding:16px 12px 56px}
  .panel-bd{padding:14px}
  .seat{width:29px;height:29px}
  .seat-row{gap:5px}
}

/* site footer — the pages customers look for before paying */
.sitefoot{border-top:1px solid var(--line);background:#fff;margin-top:40px;padding:18px 0}
.sitefoot .wrap{padding-bottom:0;font-size:12px;color:var(--muted-2);text-align:center}
.sitefoot a{color:var(--muted);text-decoration:none;margin:0 2px}
.sitefoot a:hover{color:var(--brand);text-decoration:underline}