/* Visual direction: the airport departure board.
   Mono for anything the system generated (times, codes, PNRs), condensed
   signage type for headings, amber only where the board would glow. */

:root {
  /* Brand — taken from the Visafir logo: royal blue #333FF4, gold #FDB500,
     and the orange #FD8700 at the far end of the flight trail. */
  --brand:#333ff4; --brand-700:#2a33d6; --brand-800:#2029c9; --brand-50:#edeffe; --brand-100:#dee2fd;
  --amber:#fdb500; --amber-2:#fd8700; --amber-dim:#8a6200; --amber-50:#fff6e0;
  --ink:#0f1230; --board:#0c1046; --board-2:#1a2070;
  --paper:#eef0f7; --panel:#fff; --line:#d5d9ec; --line-soft:#e6e9f6; --muted:#5b6080; --muted-2:#8a8fb0;
  --ok:#067a55; --ok-bg:#e6f4ef; --warn:#a35a07; --warn-bg:#fdf3e4; --err:#b3261e; --err-bg:#fdecea;
  --r:4px; --shadow:0 1px 2px rgba(15,18,48,.06),0 8px 24px -16px rgba(15,18,48,.35);
}
*{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(--brand)}

/* shell */
.masthead{position:relative;background:#fff;color:#fff}
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--amber-2))}
.masthead-in{max-width:1160px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-family:"Barlow Condensed",sans-serif;font-size:25px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}
.brand span{color:var(--amber)}
/* The logo is 180x80 with a lot of air around the tagline; 38px tall sits level
   with the nav. width:auto keeps the ratio whatever file is served. */
.brand img{display:block;height:38px;width:auto;flex:none}
.brand:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
@media (max-width:640px){.brand img{height:30px}}
.env-tag{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--amber-dim);color:var(--amber);padding:2px 7px;border-radius:2px}
.env-tag.live{border-color:#2f7a55;color:#6ee7b7}
.toplink{color:#aab2ea;font-size:12px;text-transform:uppercase;letter-spacing:.09em;text-decoration:none}
.toplink:hover{color:var(--amber)}
.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:#7a81c4;border-right:1px dashed #2b3280}
.step:last-child{border-right:0}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:10px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;border:1px solid #353d8e}
.step.done{color:#aab2ea}.step.done .n{border-color:var(--ok);color:#6ee7b7}
.step.active{color:var(--amber)}.step.active .n{border-color:var(--amber);background:var(--amber);color:var(--board);font-weight:600}
.wrap{max-width:1160px;margin:0 auto;padding:22px 20px 72px}
.wrap.roomy{max-width:1340px}
.masthead-in.roomy{max-width:1340px}
.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}
.grid{display:grid;gap:12px}
.search-grid{grid-template-columns:1.2fr 1.2fr .9fr .9fr 1fr .8fr;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}
.ac-input{font-family:"IBM Plex Mono",monospace;text-transform:uppercase}
.ac-list{position:absolute;top:100%;left:0;right:0;z-index:40;background:#fff;border:1px solid var(--brand);border-radius:var(--r);margin-top:3px;max-height:264px;overflow:auto;box-shadow:0 12px 32px -12px rgba(15,18,48,.35)}
.ac-item{display:flex;align-items:baseline;gap:10px;padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--line-soft)}
.ac-item:last-child{border-bottom:0}.ac-item:hover{background:var(--brand-50)}
/* Heads the list when the rows below are spelling guesses rather than matches. */
.ac-head{padding:8px 11px;font-size:12px;color:var(--muted);background:var(--paper);
  border-bottom:1px solid var(--line-soft)}
.ac-item b{font-family:"IBM Plex Mono",monospace;font-size:13px}.ac-item .c{font-size:13px}.ac-item .n{font-size:11px;color:var(--muted-2);margin-left:auto;text-align:right}
.hint{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;color:var(--muted-2)}
.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(--brand);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(--brand)}.stepper-num button:disabled{opacity:.35;cursor:not-allowed}
.stepper-num .val{font-family:"IBM Plex Mono",monospace;width:18px;text-align:center}
.btn{background:#fda900;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-700);border-color:var(--brand-700)}.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(--brand);color:var(--brand);background:#fff}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--board);font-weight:600}.btn.amber:hover:not(:disabled){background:#ffc63f}
.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}
.board{background:var(--board);color:#fff;border-radius:var(--r) var(--r) 0 0;padding:12px 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(--brand)}
.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(--ink);box-shadow:inset 0 -2px 0 var(--amber);font-weight:600}
.flight-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.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:168px 1fr 132px;gap:16px;align-items:center;padding:14px 16px}
.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(--board);color:var(--amber);padding:5px 7px;border-radius:2px;letter-spacing:.04em}
.carrier .who{min-width:0}.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}
.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:var(--amber-50);border-color:#f7d68f;color:var(--amber-dim)}
.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:#fff8ec;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}
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:#d8dcf7;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(--brand);background:var(--brand-50)}
.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)}
.cabin{overflow:auto;background:var(--board);border-radius:var(--r);padding:14px 10px}
.cabin-in{display:inline-flex;flex-direction:column;gap:4px;margin:0 auto;min-width:100%;align-items:center}
.seat-row{display:flex;gap:4px;align-items:center}
.seat-row .rn{font-family:"IBM Plex Mono",monospace;font-size:10px;color:#7a81c4;width:22px;text-align:right;margin-right:4px}
.seat{width:30px;height:30px;border-radius:5px 5px 2px 2px;border:1px solid #353d8e;background:#20276e;color:#d8dcf7;font-family:"IBM Plex Mono",monospace;font-size:9px;cursor:pointer;display:grid;place-items:center;padding:0}
.seat:hover:not(:disabled){border-color:var(--amber)}
.seat.aisle-gap{margin-right:14px}
.seat.booked{background:#0a0e3a;color:#353d8e;border-color:#1b2166;cursor:not-allowed}
.seat.legroom{border-bottom:3px solid #6ee7b7}
.seat.mine{background:var(--amber);color:var(--board);border-color:var(--amber);font-weight:600}
.seat.other{background:#4d5663;color:#fff}
.seat-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:10px}
.seat-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px;border:1px solid var(--line)}
.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(--brand);background:var(--brand-50)}.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:#fff8ec}
.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(--brand);box-shadow:0 0 0 1px var(--brand-100)}
.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(51,63,244,.25);border-top-color:var(--brand)}
@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}
}
@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}
  .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:#aab2ea}
.toplink.asbtn:hover{color:var(--amber)}
.modal-bg{position:fixed;inset:0;background:rgba(13,17,23,.62);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 #2b3280;border-radius:var(--r);overflow:hidden}
.prodnav a{padding:5px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#aab2ea;text-decoration:none}
.prodnav a.on{background:var(--brand);color:#fff;font-weight:600}
.prodnav a:not(.on):hover{color:#fff}
.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(--amber);color:var(--board);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}
.combo-label{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);width:64px;flex:0 0 64px}
.combo-row .sector{flex:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
/* ==========================================================================
   Hotel booking — results, hotel page and review.
   Layout follows the shape agents already know from Tripjack; the colours are
   Visafir's (logo blue for actions, gold for prices and CTAs).
   ========================================================================== */

/* --- compact search strip ------------------------------------------------ */
.searchstrip{display:grid;grid-template-columns:minmax(200px,1.5fr) 1fr auto 1fr minmax(150px,.9fr) minmax(160px,1fr) auto;gap:10px;align-items:end;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:18px;box-shadow:var(--shadow)}
.ss-field{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.ss-field>label{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2)}
.ss-input{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:10px 11px;width:100%;min-width:0;font-size:15px;font-weight:500}
.ss-input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.ss-btnlike{text-align:left;cursor:pointer}
.ss-nights{align-self:end;margin-bottom:9px;background:var(--amber-50);border:1px solid #f4dca6;color:var(--amber-dim);
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;padding:6px 10px;border-radius:var(--r);white-space:nowrap}
.ss-go{padding:11px 26px}
@media (max-width:980px){.searchstrip{grid-template-columns:1fr 1fr;}.ss-nights{display:none}.ss-nat{grid-column:1/-1}.ss-go{grid-column:1/-1}}

/* rooms & guests popover */
.rooms-pop{position:absolute;top:100%;left:0;z-index:50;width:310px;margin-top:6px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 18px 44px -18px rgba(15,18,48,.45);padding:6px 14px 12px}
.rp-room{padding:10px 0;border-bottom:1px dashed var(--line-soft)}
.rp-hd{display:flex;justify-content:space-between;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin-bottom:8px}
.rp-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:4px 0}
.rp-row em{display:block;font-style:normal;font-size:11px;color:var(--muted-2)}
.rp-ages{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rp-ages label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.rp-ages select{padding:4px 6px;width:66px}
.rp-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px}

/* --- results layout ------------------------------------------------------ */
.res-layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:20px;align-items:start}
/* The filters follow you down the results.
   position:sticky was already here but could never move: .res-layout sets
   align-items:start, so the sidebar column was only as tall as the panel itself and
   a sticky child has nothing to travel within. Stretching the column to the height
   of the results gives it the room. The max-height matters too — this panel can be
   taller than a laptop screen, and a sticky block taller than the viewport pins its
   top out of reach, so it scrolls inside itself instead. */
.res-filters{align-self:stretch}
.res-filters .panel{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
.res-filters .fgroup{padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.res-filters .fgroup:last-child{border-bottom:0}
.res-filters h3{font-size:15px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.fcheck{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding:5px 0;cursor:pointer}
.fcheck input{accent-color:var(--brand);width:15px;height:15px}
.fcheck .count{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted-2)}
.fcheck input:disabled+*{opacity:.4}
.frange{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
.res-filters input[type=range]{width:100%;accent-color:var(--brand)}

.res-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sortby{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sortby select{padding:7px 9px;width:auto;font-size:13px}
.res-count{font-size:14px;color:var(--muted)}
.res-count b{color:var(--ink)}
/* Shown when the city box has moved on from the results underneath it. */
.res-stale{color:var(--warn,#b26b00);font-size:13px}
.viewtog{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.viewtog button{background:#fff;border:0;padding:8px 14px;font-size:12px;cursor:pointer;color:var(--muted)}
.viewtog button[aria-pressed="true"]{background:var(--brand);color:#fff;font-weight:600}

/* --- hotel cards --------------------------------------------------------- */
.hotel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.hcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.hcard:hover{border-color:var(--brand);box-shadow:0 10px 30px -18px rgba(15,18,48,.5)}
.hcard-img{position:relative;aspect-ratio:16/10;background:var(--board);overflow:hidden}
.hcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.hcard-img.noimg img{display:none}
.noimg-fill{width:100%;height:100%;display:grid;place-items:center;background:var(--board);color:var(--amber);
  font-family:"Barlow Condensed",sans-serif;font-size:40px;font-weight:700}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:19px;line-height:1;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.gal-nav.prev{left:8px}.gal-nav.next{right:8px}
.hcard-img:hover .gal-nav,.g-main:hover .gal-nav{opacity:1}
.gal-count{position:absolute;left:10px;bottom:10px;background:rgba(12,16,70,.78);color:#fff;font-family:"IBM Plex Mono",monospace;
  font-size:11px;padding:2px 8px;border-radius:10px}
.fav{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:#c9ced9;font-size:16px;line-height:1;display:grid;place-items:center}
.fav.on{color:var(--err)}
.fav.big{position:static;width:auto;height:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff;
  padding:7px 13px;font-size:13px;display:inline-flex;gap:7px;align-items:center;color:var(--muted)}
.fav.big.on{color:var(--err);border-color:#f3c3bf}
.hcard-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:4px;flex:1}
.hcard-top{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.hcard-name{font-size:17px;line-height:1.25;font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.01em}
.hcard-loc{font-size:12px;color:var(--muted)}
.hcard-facts{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px}
.hcard-facts li{position:relative;padding-left:13px;color:var(--muted);line-height:1.6}
.hcard-facts li::before{content:"•";position:absolute;left:2px;color:var(--muted-2)}
.hcard-facts li.free{color:var(--ok);font-weight:500}
.hcard-facts li.free::before{color:var(--ok)}
.hcard-amen{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.hcard-amen span{font-size:11px;color:var(--muted-2);background:var(--paper);border-radius:3px;padding:2px 7px;white-space:nowrap;
  max-width:130px;overflow:hidden;text-overflow:ellipsis}
.hcard-price{margin-top:auto;padding-top:11px;text-align:right}
.hcard-price .pn{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.hcard-price .pn span{font-size:11px}
.hcard-price .pt{font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:600;color:var(--ink)}
.hcard-price .pt span{font-size:11px;font-weight:400;color:var(--muted)}
.hcard-price .pnote{font-size:10.5px;color:var(--muted-2)}

/* list view */
.hotel-grid.as-list{grid-template-columns:1fr}
.as-list .hcard{flex-direction:row}
.as-list .hcard-img{width:290px;flex:0 0 290px;aspect-ratio:auto}
.as-list .hcard-body{flex-direction:row;gap:18px;align-items:flex-start}
.as-list .hcard-body>*{flex:1}
.as-list .hcard-price{flex:0 0 190px;padding-top:0;margin-top:0;align-self:center}
/* Stacked on narrow screens: a sticky sidebar above the results would sit on top of
   them for the whole scroll. */
@media (max-width:1100px){.res-layout{grid-template-columns:1fr}
  .res-filters{align-self:auto}
  .res-filters .panel{position:static;max-height:none;overflow:visible}}
@media (max-width:720px){.as-list .hcard,.as-list .hcard-body{flex-direction:column}.as-list .hcard-img{width:auto;flex:auto;aspect-ratio:16/10}}

/* --- hotel page ---------------------------------------------------------- */
.crumbs{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.crumbs button{background:none;border:0;padding:0;font:inherit;color:var(--brand);cursor:pointer}
.crumbs em{font-style:normal;color:var(--ink)}
.hpage-hd{padding:18px;margin-bottom:18px}
.hpage-title{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
.hpage-title h1{font-size:26px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.hpage-addr{font-size:13px;color:var(--muted);margin-top:3px}
/* The hero was a fixed 330px tall in a two-thirds-width column, so on a wide screen
   it became a long letterbox — and covering a letterbox with a normally proportioned
   photo means scaling it up until the short side fits, which is where the softness
   comes from. Letting the height grow with the width keeps the box nearer the shape
   of the photo, so it is cropped rather than stretched. */
.gallery{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px;
  height:clamp(330px, 30vw, 460px)}
/* Staging only: what Tripjack sent against what we are drawing. */
.gal-note{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font-size:10.5px;
  font-family:"IBM Plex Mono",monospace;color:#fff;background:rgba(15,18,48,.72)}
.gal-note.bad{background:rgba(150,30,30,.82)}
.g-main,.g-thumb{position:relative;background:var(--board);border-radius:var(--r);overflow:hidden}
.g-main img,.g-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.g-side{display:grid;grid-template-rows:1fr 1fr;gap:8px;min-height:0}
.g-more{position:absolute;inset:auto 10px 10px auto;background:rgba(12,16,70,.82);color:#fff;border:0;border-radius:var(--r);
  padding:7px 12px;font-size:12px;cursor:pointer}
.hpage-about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;margin-top:18px}
.hpage-about h3{font-size:16px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.hpage-about p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.65}
.amen-list{display:flex;gap:7px;flex-wrap:wrap}
.amen-list span{font-size:12px;color:var(--muted);background:var(--paper);border-radius:3px;padding:4px 9px}
@media (max-width:820px){.gallery{grid-template-columns:1fr;height:auto}.g-side{grid-template-rows:none;grid-template-columns:1fr 1fr;height:130px}.hpage-about{grid-template-columns:1fr}}

/* Photo viewer: one large image, arrows, and a strip of the rest. Replaces the
   scrolling grid, which could only be opened from the "+N photos" button. */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(9,12,40,.95);
  display:grid;grid-template-rows:1fr auto;gap:12px;padding:56px 22px 18px}
.lb-close{position:fixed;top:14px;right:18px;background:#fff;border:0;width:36px;height:36px;
  border-radius:50%;cursor:pointer;font-size:16px;z-index:2}
.lb-count{position:fixed;top:20px;left:22px;color:#fff;opacity:.75;font-size:13px;
  font-family:"IBM Plex Mono",monospace}
.lb-stage{position:relative;display:grid;place-items:center;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r);display:block}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer;
  border-radius:var(--r)}
.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-nav.prev{left:0}.lb-nav.next{right:0}
.lb-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;justify-content:flex-start}
.lb-strip img{height:62px;width:84px;object-fit:cover;border-radius:4px;cursor:pointer;
  opacity:.5;flex:0 0 auto;border:2px solid transparent}
.lb-strip img.on,.lb-strip img:hover{opacity:1;border-color:#fff}
/* The gallery photos are now openable, so say so on hover. */
.g-main img,.g-thumb img{cursor:zoom-in}
@media (max-width:640px){.lightbox{padding:52px 10px 12px}.lb-nav{width:38px;height:54px;font-size:24px}}

/* --- room types ---------------------------------------------------------- */
.rooms-panel{overflow:hidden}
.room-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line-soft);background:var(--paper)}
.room-filters .control{width:280px;max-width:100%}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.chip{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 13px;font-size:12px;cursor:pointer;color:var(--muted)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.roomrow{display:grid;grid-template-columns:150px minmax(0,1fr) 210px;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line-soft);align-items:center}
.roomrow:last-of-type{border-bottom:0}
.roomrow-img{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--board)}
.roomrow-img img{width:100%;height:100%;object-fit:cover;display:block}
.roomrow-main h4{font-size:16px;font-family:"Barlow Condensed",sans-serif;font-weight:600;margin:0 0 4px}
.roomrow-main .dim{color:var(--muted-2);font-weight:400}
.roomrow-meta{font-size:12.5px;color:var(--muted)}
.roomrow-free{font-size:12.5px;color:var(--ok);margin-top:5px}
.roomrow-nr{font-size:12.5px;color:var(--muted-2);margin-top:5px}
.roomrow-inc{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.roomrow-inc span{font-size:11px;background:var(--paper);border-radius:3px;padding:2px 7px;color:var(--muted)}
.roomrow-price{text-align:right}
.roomrow-price .pn{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.roomrow-price .pt{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600}
.roomrow-price .pt span{font-size:11px;font-weight:400;color:var(--muted)}
.roomrow-price .pnote{font-size:10.5px;color:var(--muted-2);margin-bottom:8px}
@media (max-width:820px){.roomrow{grid-template-columns:1fr}.roomrow-price{text-align:left}.chips{margin-left:0}}

/* --- review + guests ----------------------------------------------------- */
.review-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.page-h1{font-size:26px;margin-bottom:14px}
.rev-hotel{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.rev-thumb{width:150px;flex:0 0 150px;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--board)}
.rev-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rev-hotel h2{font-size:20px}
.rev-addr{font-size:13px;color:var(--muted);margin-top:4px}
.rev-strip{display:flex;gap:10px;flex-wrap:wrap;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.rev-strip>div{display:flex;flex-direction:column;gap:2px;min-width:92px}
.rev-strip span{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2);font-family:"IBM Plex Mono",monospace}
.rev-strip b{font-size:14px}
.rev-strip .mid{background:var(--amber-50);border:1px solid #f4dca6;color:var(--amber-dim);border-radius:14px;padding:4px 12px;
  font-size:12px;min-width:0;align-items:center}
.rev-room{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-top:12px}
.rev-room .dim{font-size:12px;color:var(--muted)}
.rev-room-tags{font-size:13px;color:var(--muted)}
.rev-confirm{display:flex;gap:9px;align-items:flex-start;font-size:13px;margin-top:14px;border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;cursor:pointer}
.rev-confirm input{accent-color:var(--brand);width:16px;height:16px;margin-top:1px}
.rev-confirm.invalid{border-color:var(--err);background:var(--err-bg)}
.polytable{width:100%;border-collapse:collapse;font-size:13px}
.polytable th{text-align:left;background:var(--paper);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-2);padding:9px 12px;border:1px solid var(--line-soft)}
.polytable td{padding:10px 12px;border:1px solid var(--line-soft)}
.polynotes{margin:12px 0 0;padding-left:18px;font-size:12px;color:var(--muted);line-height:1.7}
/* Says which of the two lists below is the hotel's and which is ours, so our
   standard terms are never mistaken for the rate's own policy. */
.polynotes-hd{list-style:none;margin-left:-18px;margin-bottom:6px;color:var(--ink)}

/* Static hotel content: check-in times and the property's own notices. Tripjack
   asks that these reach the guest before booking, so they are a panel of their
   own rather than a line in the description. */
.cio-strip{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.cio-strip div{flex:1 1 130px;border:1px solid var(--line-soft);border-radius:var(--r);padding:9px 12px}
.cio-strip span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-2);margin-bottom:3px}
.cio-strip b{font-size:14px;font-weight:500}
.pnote-group{border-top:1px solid var(--line-soft);padding-top:10px;margin-top:12px}
.pnote-group:first-child{border-top:0;padding-top:0;margin-top:0}
.pnote-group > h4{margin:0 0 6px;font-size:13px;font-weight:600}
.pnote-group.flag > h4{color:var(--err)}
.pnote-item{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:7px}
.pnote-item b{color:var(--ink);font-weight:500}
.pnote-more{background:none;border:0;padding:0;margin-top:2px;font-size:12px;color:var(--brand);
  cursor:pointer;text-decoration:underline}
/* The hotel's own terms, when Tripjack sends them as prose in the inclusions array
   rather than as short labels. Folded away so one property cannot flood the list. */
.roomrow-terms{margin-top:6px}
.roomrow-terms .pnote-item{margin-top:6px;max-width:62ch}

/* One card per room, with its rates beneath. Tripjack sends a separate option for
   every rate, so a room sold on four meal plans arrived as four look-alike rows. */
.roomcard{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:16px 18px;
  border-bottom:1px solid var(--line-soft)}
.roomcard:last-of-type{border-bottom:0}
.roomcard-img{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--board)}
.roomcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.roomcard-main h4{font-size:16px;font-family:"Barlow Condensed",sans-serif;font-weight:600;margin:0}
.roomcard-main .dim{color:var(--muted-2);font-weight:400}
.roomcard-sub{font-size:12px;color:var(--muted-2);margin:2px 0 10px}

.ratelist{border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.rate{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:14px;padding:11px 13px;align-items:center}
.rate + .rate{border-top:1px solid var(--line-soft)}
.rate:nth-child(even){background:var(--paper)}
.rate-facts{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;color:var(--muted)}
.rate-facts span{position:relative}
.rate-facts span + span::before{content:'|';position:absolute;left:-7px;color:var(--line)}
.rate-facts .free{color:var(--ok)}
.rate-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  margin-top:8px;padding:8px 13px;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r);font:inherit;font-size:12.5px;color:var(--brand);cursor:pointer;text-align:left}
.rate-toggle:hover{background:var(--brand-50);border-color:var(--brand)}
.rate-toggle .caret{color:var(--muted-2);font-size:11px}
.rate-price{text-align:right}
.rate-price .pt{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600}
.rate-price .pnote{font-size:10.5px;color:var(--muted-2);margin-bottom:7px}
@media (max-width:820px){
  .roomcard{grid-template-columns:1fr}
  .rate{grid-template-columns:1fr}
  .rate-price{text-align:left;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .rate-price .pnote{margin-bottom:0}
}

.farebox{position:sticky;top:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.fb-hd{background:var(--board);color:#fff;padding:12px 16px;font-family:"Barlow Condensed",sans-serif;font-size:17px;
  text-transform:uppercase;letter-spacing:.05em}
.fb-bd{padding:14px 16px}
.fb-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:6px 0}
.fb-row .v{font-family:"IBM Plex Mono",monospace}
.fb-row.muted{color:var(--muted);font-size:12.5px}
.fb-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:11px;font-size:16px;font-weight:600}
.fb-note{font-size:12px;color:var(--muted);margin-top:8px}
.fb-cta{margin-top:14px}
@media (max-width:980px){.review-layout{grid-template-columns:1fr}.farebox{position:static}}

/* hotel page: gallery beside the best-rate card */
.hpage-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(250px,1fr);gap:16px;align-items:start}
.bookcard{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--panel)}
.bc-hd b{font-size:15px}
.bc-hd .dim{font-size:12px;color:var(--muted);margin-top:2px}
.bc-facts{list-style:none;margin:10px 0;padding:0;font-size:12.5px}
.bc-facts li{position:relative;padding-left:13px;color:var(--muted);line-height:1.7}
.bc-facts li::before{content:"•";position:absolute;left:2px;color:var(--muted-2)}
.bc-facts li.free{color:var(--ok)}.bc-facts li.free::before{color:var(--ok)}
.bc-price{text-align:right;margin:10px 0 12px}
.bc-price .pn{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.bc-price .pt{font-family:"IBM Plex Mono",monospace;font-size:23px;font-weight:600}
.bc-price .pnote{font-size:10.5px;color:var(--muted-2)}
.bc-times{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line-soft);
  font-size:11px;color:var(--muted-2)}
@media (max-width:980px){.hpage-grid{grid-template-columns:1fr}}

/* Certification run tag - only ever shown on staging. */
.case-tag{background:var(--amber);color:#201400;border-color:var(--amber);font-weight:700}

/* Site footer. The hotel pages had none, so the legal documents were unreachable
   from anywhere in the booking flow. */
.sitefoot{border-top:1px solid var(--line);background:var(--panel);margin-top:48px}
.sitefoot-in{max-width:1160px;margin:0 auto;padding:18px 20px;display:flex;gap:16px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted-2)}
.sitefoot-in.roomy{max-width:1340px}
.sitefoot nav{display:flex;gap:16px;flex-wrap:wrap}
.sitefoot a{color:var(--muted);text-decoration:none}
.sitefoot a:hover{color:var(--brand);text-decoration:underline}

/* Foot of the results list: where the rest of the city streams in. */
.morebar{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;
  padding:14px;border:1px dashed var(--line);border-radius:var(--r);
  font-size:13px;color:var(--muted-2)}

/* ==========================================================================
   Responsive layer
   --------------------------------------------------------------------------
   Everything below is about making the same markup work from a 320px phone up.
   It is kept in one block, after everything else, so that a rule here always
   wins and there is one place to look when a screen size misbehaves.

   Four things were actually broken, and they are worth naming because they are
   easy to reintroduce:

     1. The search form carried its column template in an inline style attribute.
        No media query can override an inline style, so the five columns survived
        all the way down to 320px and the city field ended up 30px wide. Column
        templates belong in here, never on the element.
     2. .btn is white-space:nowrap. A button whose label cannot wrap sets the
        minimum width of the grid cell holding it — "Hold without payment — pay
        later from your dashboard" is 576px of unbreakable text, which pushed the
        pay page sideways on every phone.
     3. Grid and flex children default to min-width:auto, so their content, not
        the column, decides how narrow they may get. They need min-width:0.
     4. Inputs under 16px make iOS Safari zoom the page on focus, and it does not
        zoom back out.
   ========================================================================== */

/* Nothing may exceed the viewport. If something does, the fix belongs above
   this line — but a stray wide child should not leave the whole page scrolling
   sideways with the header detached from the content. */
html,body{max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%}

/* Grid and flex children: let them shrink. */
.two-col>*,.res-layout>*,.hsearch-grid>*,.form-grid>*,.searchstrip>*,.masthead-in>*{min-width:0}

/* ---- the search form -------------------------------------------------- */
.hsearch-grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr auto;align-items:end}
@media (max-width:1100px){
  .hsearch-grid{grid-template-columns:1fr 1fr}
  /* the submit button takes the full width rather than a sliver of a column,
     and loses the spacer label that only existed to line it up with the fields */
  .hsearch-grid>.field:last-child{grid-column:1/-1}
  .hsearch-grid>.field:last-child>label{display:none}
}
@media (max-width:620px){
  .hsearch-grid{grid-template-columns:1fr}
}
.child-age{width:88px}
@media (max-width:620px){.child-age{width:100%}}

/* ---- buttons ----------------------------------------------------------- */
@media (max-width:860px){
  .btn{white-space:normal;line-height:1.35}
  .btn.block{text-align:center}
}

/* ---- typing ------------------------------------------------------------ */
@media (max-width:860px){
  .control,input,select,textarea{font-size:16px}
  .sortby select{font-size:16px}
}

/* ---- the masthead ------------------------------------------------------ */
@media (max-width:860px){
  .masthead-in{padding:10px 16px;gap:12px}
  /* two rows: brand + products + account, then the step strip under them */
  .userchip{order:2;margin-left:auto}
  .stepper{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .stepper::-webkit-scrollbar{display:none}
  .step{padding:6px 10px;white-space:nowrap;flex:none}
}
@media (max-width:420px){
  /* at this width the six steps are the only thing between the logo and the
     form; the stage headings say where you are, so the strip can go */
  .stepper{display:none}
}

/* ---- page gutter ------------------------------------------------------- */
@media (max-width:640px){
  .wrap,.wrap.roomy{padding:16px 16px 56px}
  .panel-bd{padding:14px}
  .panel-hd{padding:12px 14px}
  .panel-hd h2{font-size:17px}
}

/* ---- results: filters fold away on a phone ----------------------------- */
/* Open and permanent beside the results on a wide screen; on a phone it is a
   420px wall of checkboxes standing between the search and the first hotel, so
   it collapses to a single line and remembers nothing it does not have to. */
.filter-summary{display:none}
.filter-fold{list-style:none}
.filter-fold>summary::-webkit-details-marker{display:none}
@media (max-width:1100px){
  .res-filters .panel{position:static;max-height:none;overflow:visible}
  .filter-summary{display:flex;align-items:center;gap:8px;cursor:pointer;
    padding:13px 16px;font-family:"Barlow Condensed",sans-serif;font-size:16px;
    text-transform:uppercase;letter-spacing:.05em;font-weight:600}
  .filter-summary::after{content:"▾";margin-left:auto;font-size:12px;color:var(--muted-2)}
  .filter-fold[open] .filter-summary{border-bottom:1px solid var(--line-soft)}
  .filter-fold[open] .filter-summary::after{content:"▴"}
  .filter-summary .fcount{background:var(--brand);color:#fff;border-radius:10px;
    font-family:"IBM Plex Mono",monospace;font-size:11px;padding:1px 7px;letter-spacing:0}
}

/* ---- results bar ------------------------------------------------------- */
@media (max-width:560px){
  .res-bar{gap:10px}
  .sortby{width:100%}
  .sortby select{flex:1}
  .viewtog{margin-left:0}
  .res-count{width:100%;font-size:13px}
}

/* ---- a table of dates and money cannot shrink; let it scroll ----------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:620px){.tablewrap .polytable{min-width:440px}}

/* ---- voucher ----------------------------------------------------------- */
@media (max-width:560px){
  .ticket-hd{padding:14px;gap:8px}
  .ticket-hd h2{font-size:20px!important}
  .pnr-strip{gap:14px 20px;padding:14px}
  .pnr-strip .pnr{font-size:16px}
}

/* ---- dashboard --------------------------------------------------------- */
@media (max-width:760px){
  .order{grid-template-columns:1fr;gap:6px}
  /* stacked, the status pill would otherwise stretch the whole row */
  .order .tag{justify-self:start}
  .dash-hd{gap:12px}
  .stats{gap:18px;flex-wrap:wrap}
  #lookupId{width:100%!important}
}

/* ---- touch ------------------------------------------------------------- */
/* Hover does not exist on a touch screen, and a 15px checkbox does not either.
   Keyed to the input type as well as the width, so a touch laptop benefits. */
@media (pointer:coarse),(max-width:860px){
  .prodnav a{padding:9px 13px}
  .toplink{padding:7px 0;display:inline-block}
  .stepper-num button{width:38px;height:38px;font-size:17px}
  .stepper-num .val{width:26px;font-size:16px}
  .chk input[type=checkbox],.fcheck input[type=checkbox]{width:20px;height:20px}
  .fcheck{padding:8px 0}
  /* .toplink.asbtn resets padding to 0, which outranks a bare .toplink rule */
  .toplink,.toplink.asbtn{padding:8px 0}
  /* the small button is a 29px target; "Select" and "Add a room" are not minor */
  .btn.sm{padding:10px 15px;font-size:12px}
  .chk{padding:8px 0}
  .fav.big{min-height:40px}
  input[type=range]{height:28px}
  .crumbs{gap:10px}
  .crumbs button{padding:6px 0}
  .swap-inline{padding:8px 0 8px 8px}
  .sitefoot nav a{padding:6px 0;display:inline-block}
  /* gallery arrows only ever appeared on hover, so on a phone they never did */
  .gal-nav,.hcard-img .gal-nav{opacity:1}
  .lb-nav{width:40px;height:72px}
}