/* Lynn's Travel Site -- application styles.
   Design tokens are taken verbatim from mockups/styles.css so the running
   product matches the approved mockups, including dark mode. */

:root{
  --surface:#FFFFFF; --raised:#F6F7F9; --border:#DDE1E6;
  --tp:#12161C; --ts:#4A525E; --tm:#727B88;
  --accent:#1B4FD8; --accent-h:#153FAD;
  --ok:#0F7B3E; --warn:#9A5B00; --stop:#B3261E;
  --ok-bg:#E6F4EC; --warn-bg:#FBF0DF; --stop-bg:#FBE9E7;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --e1:0 1px 2px rgba(0,0,0,.08);
  --e2:0 4px 12px rgba(0,0,0,.10);
  --e3:0 12px 32px rgba(0,0,0,.16);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --page:#E7E9EE; --page-2:#F3F5F8; --page-ink:#1A1F27; --page-ink-2:#5A6472;
  --page-rule:#CFD5DE;
}
@media (prefers-color-scheme:dark){
  :root{
    --surface:#0E1116; --raised:#171B22; --border:#2A313B;
    --tp:#F2F4F7; --ts:#B3BCC9; --tm:#8792A1;
    --accent:#5B8CFF; --accent-h:#7FA6FF;
    --ok:#3DD68C; --warn:#F2B24C; --stop:#FF8A80;
    --ok-bg:#10281C; --warn-bg:#2A2113; --stop-bg:#2C1614;
    --page:#080A0D; --page-2:#12161C; --page-ink:#E8ECF2; --page-ink-2:#93A0B0;
    --page-rule:#242B35;
    --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 4px 12px rgba(0,0,0,.5);
    --e3:0 12px 32px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--page-ink);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.2}
h1{font-size:26px;font-weight:680}
h2{font-size:18px;font-weight:660}
h3{font-size:15px;font-weight:640}
img{max-width:100%;display:block}

/* ---------- chrome ---------- */
.head{position:sticky;top:0;z-index:40;background:var(--page);
  border-bottom:1px solid var(--page-rule);backdrop-filter:saturate(1.4) blur(8px)}
.head .in{max-width:1280px;margin:0 auto;padding:12px 20px;display:flex;
  align-items:center;gap:20px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--page-ink)}
.logo:hover{text-decoration:none}
.logo .mk{width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 38%,transparent)}
.logo .mk svg{width:19px;height:19px}
.logo b{font-size:15px;font-weight:680;letter-spacing:-.017em;display:block}
.logo span{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--page-ink-2);font-weight:660}
nav.main{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
nav.main a{font-size:12.5px;font-weight:600;color:var(--page-ink-2);padding:6px 11px;
  border-radius:7px;white-space:nowrap}
nav.main a:hover{color:var(--page-ink);background:var(--page-2);text-decoration:none}
nav.main a.on{color:var(--accent);background:var(--page-2)}
.who{font-size:11.5px;color:var(--page-ink-2);padding-left:12px;
  border-left:1px solid var(--page-rule);margin-left:8px;line-height:1.3}
.who b{display:block;color:var(--page-ink);font-size:12.5px}

.wrap{max-width:1280px;margin:0 auto;padding:26px 20px 60px}
.narrow{max-width:560px}
.pagehead{display:flex;align-items:flex-start;gap:16px;margin:0 0 20px;flex-wrap:wrap}
.pagehead .lede{color:var(--page-ink-2);font-size:13px;margin:5px 0 0}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--e1)}
.pad{padding:18px}
.stack>*+*{margin-top:14px}
.grid{display:grid;gap:14px}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}

/* ---------- forms ---------- */
label{display:block;font-size:11px;font-weight:660;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tm);margin:0 0 5px}
input,select,textarea{width:100%;font:inherit;font-size:14px;padding:9px 11px;
  background:var(--surface);color:var(--tp);border:1px solid var(--border);
  border-radius:var(--r-sm);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
input[aria-invalid="true"]{border-color:var(--stop);background:var(--stop-bg)}
.field{margin:0 0 14px}
.err{color:var(--stop);font-size:12px;margin:5px 0 0;font-weight:600}
.hint{color:var(--tm);font-size:11.5px;margin:5px 0 0}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:150px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:13.5px;font-weight:640;padding:10px 18px;border-radius:var(--r-sm);
  background:var(--accent);color:#fff;border:1px solid transparent;cursor:pointer}
.btn:hover{background:var(--accent-h);text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn2{background:var(--raised);color:var(--tp);border-color:var(--border)}
.btn2:hover{background:var(--surface)}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.stop{background:var(--stop)}

/* ---------- data display ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tm);font-weight:680;padding:9px 12px;border-bottom:1px solid var(--border)}
td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:none}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:680;
  padding:3px 8px;border-radius:99px;letter-spacing:.02em}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-stop{background:var(--stop-bg);color:var(--stop)}
.b-mute{background:var(--raised);color:var(--tm)}

.mono{font-family:var(--mono);font-size:12px}
.muted{color:var(--tm)}
.sub{color:var(--ts);font-size:12.5px}
.price{font-size:22px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.price small{font-size:11.5px;font-weight:600;color:var(--tm);display:block;
  letter-spacing:0;text-align:right}

/* ---------- search results ---------- */
.result{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden}
@media(min-width:720px){.result{grid-template-columns:260px 1fr auto}}
.result .pic{background:var(--raised);position:relative;min-height:170px}
.result .pic img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.result .info{padding:16px}
.result .buy{padding:16px;display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-end;gap:12px;border-left:1px solid var(--border);min-width:190px}
@media(max-width:719px){.result .buy{border-left:none;border-top:1px solid var(--border);
  align-items:stretch}}
.stars{color:var(--warn);letter-spacing:2px;font-size:13px}
.amen{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.amen span{font-size:10.5px;background:var(--raised);color:var(--ts);padding:2px 7px;
  border-radius:99px;border:1px solid var(--border)}
.credit{position:absolute;bottom:0;left:0;right:0;font-size:9px;line-height:1.3;
  padding:4px 6px;background:rgba(0,0,0,.62);color:#fff;letter-spacing:.01em}

/* ---------- policy verdicts (F2: always state the reason) ---------- */
.verdict{border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;margin:10px 0 0;
  border:1px solid transparent;font-weight:600}
.v-allow{background:var(--ok-bg);color:var(--ok)}
.v-warn{background:var(--warn-bg);color:var(--warn)}
.v-require_approval{background:var(--warn-bg);color:var(--warn)}
.v-block{background:var(--stop-bg);color:var(--stop)}
.verdict ul{margin:6px 0 0;padding-left:18px;font-weight:500}

.notice{border-radius:var(--r-md);padding:13px 16px;font-size:13px;margin:0 0 18px;
  border:1px solid var(--border);background:var(--raised)}
.notice.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.notice.bad{background:var(--stop-bg);color:var(--stop);border-color:transparent}

.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.steps li:last-child{border-bottom:none}
.steps .n{width:24px;height:24px;flex:0 0 24px;border-radius:99px;background:var(--raised);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--tm)}
.steps .n.done{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.steps .n.now{background:var(--accent);color:#fff;border-color:transparent}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gallery figure{margin:0;position:relative;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--border)}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}

.empty{text-align:center;padding:48px 20px;color:var(--tm)}
.empty h2{color:var(--tp);margin:0 0 8px}

footer.site{border-top:1px solid var(--page-rule);margin-top:40px;padding:22px 20px 40px;
  font-size:11.5px;color:var(--page-ink-2)}
footer.site .in{max-width:1280px;margin:0 auto}
footer.site a{color:var(--page-ink-2);text-decoration:underline}

/* ============================================================ landing page */
/* Marketing surface. Photography is drawn from the live catalogue, so the
   page shows the real product rather than stock imagery. */

.landing{max-width:none;margin:0;padding:0}
.landing section{padding:0 20px}
.landing .sec-h{font-size:clamp(21px,3vw,29px);font-weight:700;letter-spacing:-.028em;
  margin:0 0 26px;max-width:22ch;text-wrap:balance}

.hero{max-width:1280px;margin:0 auto;display:grid;gap:38px;align-items:center;
  padding:52px 20px 58px}
@media(min-width:960px){.hero{grid-template-columns:1fr 1.05fr;gap:56px;padding:74px 20px 82px}}

.hero .kick{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--accent);
  margin:0 0 20px}
.hero .kick i{width:24px;height:1.5px;background:var(--accent);display:block}
.hero h1{font-size:clamp(38px,6.4vw,64px);line-height:1.02;letter-spacing:-.04em;
  font-weight:700;margin:0 0 22px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{font-size:clamp(15px,1.7vw,18px);color:var(--page-ink-2);line-height:1.6;
  max-width:46ch;margin:0 0 30px}
.cta{display:flex;gap:11px;flex-wrap:wrap;margin:0 0 14px}
.btn.lg{padding:13px 26px;font-size:14.5px}

.hero-art{display:grid;gap:10px}
.hero-shot{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--e3);border:1px solid var(--border)}
.hero-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.hero-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 13px;
  font-size:12.5px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0))}
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hero-grid figure{margin:0;border-radius:var(--r-md);overflow:hidden;position:relative;
  border:1px solid var(--border);box-shadow:var(--e1)}
.hero-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.hero-grid figcaption{position:absolute;inset:auto 0 0 0;padding:16px 8px 6px;font-size:9.5px;
  color:#fff;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0))}

.bar{border-top:1px solid var(--page-rule);border-bottom:1px solid var(--page-rule);
  background:var(--page-2)}
.bar{display:flex;flex-wrap:wrap;max-width:1280px;margin:0 auto}
.bar-i{flex:1 1 150px;padding:24px 20px;border-right:1px solid var(--page-rule)}
.bar-i:last-child{border-right:none}
.bar-i b{display:block;font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:-.03em;
  line-height:1}
.bar-i span{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--page-ink-2);font-weight:660}

.feat{max-width:1280px;margin:0 auto;padding:64px 20px}
.feat-grid{display:grid;gap:1px;background:var(--page-rule);
  border:1px solid var(--page-rule);border-radius:var(--r-md);overflow:hidden}
@media(min-width:700px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.feat-grid article{background:var(--surface);padding:26px 22px 28px}
.feat-grid .ic{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--accent);letter-spacing:.1em;margin:0 0 12px}
.feat-grid h3{font-size:15.5px;margin:0 0 8px;letter-spacing:-.015em}
.feat-grid p{margin:0;font-size:13.5px;color:var(--ts);line-height:1.6}

.cities{max-width:1280px;margin:0 auto;padding:10px 20px 64px}
.city-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.city{display:block;padding:20px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);color:var(--tp);box-shadow:var(--e1)}
.city:hover{text-decoration:none;border-color:var(--accent);box-shadow:var(--e2)}
.city b{display:block;font-size:16px;letter-spacing:-.02em}
.city span{display:block;margin-top:4px;font-size:12px;color:var(--tm)}

.close{max-width:1280px;margin:0 auto;padding:0 20px 84px;text-align:center}
.close h2{font-size:clamp(22px,3.2vw,31px);font-weight:700;letter-spacing:-.03em;margin:0 0 12px}
.close p{color:var(--page-ink-2);max-width:50ch;margin:0 auto 24px;font-size:15px;line-height:1.6}

/* ---------- flights: same card as hotels, carrier in the graphic slot ---- */
.leg-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:15px;
  font-weight:660;margin:0 0 12px}
.leg-dir{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:720}

/* The graphic slot: no photograph exists, so it carries the carrier. */
.air-pic{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:150px}
.air-pic img{max-width:72%;max-height:64px;object-fit:contain;background:#fff;
  padding:8px;border-radius:6px}
.air-iata{font-family:var(--mono);font-size:34px;font-weight:700;color:#fff;
  line-height:1;letter-spacing:1px}
.air-name{font-size:11px;color:#fff;opacity:.72;text-align:center;padding:0 10px;
  line-height:1.3}
.air-result .info h3{font-variant-numeric:tabular-nums;font-size:17px}

/* Radio drives the button state, so selecting needs no script. */
.air-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.air-select:has(+ *):focus-visible,.air-radio:focus-visible + .air-select{
  outline:2px solid var(--accent);outline-offset:2px}
.air-select{cursor:pointer;min-width:118px}
.air-select .sel-yes{display:none}
.air-radio:checked + .air-select{background:var(--ok);color:#fff}
.air-radio:checked + .air-select .sel-no{display:none}
.air-radio:checked + .air-select .sel-yes{display:inline}
.air-result:has(.air-radio:checked){border-color:var(--accent);box-shadow:var(--e2)}
.btn.disabled{opacity:.5;cursor:not-allowed}

.itin-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:14px 16px;margin-top:18px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--e2);
  position:sticky;bottom:12px}

/* ---------- flight steps and pagination ---------- */
.steps-bar{display:flex;list-style:none;gap:8px;margin:0 0 16px;padding:0;flex-wrap:wrap}
.steps-bar li{font-size:11.5px;font-weight:640;color:var(--tm);background:var(--raised);
  border:1px solid var(--border);border-radius:99px;padding:5px 13px}
.steps-bar li.now{background:var(--accent);color:#fff;border-color:transparent}
.steps-bar li.done{background:var(--ok-bg);color:var(--ok);border-color:transparent}

.chosen{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:12px 16px;
  margin:0 0 16px;border-radius:var(--r-md);background:var(--ok-bg);
  border:1px solid transparent}
.chosen-t{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:720;
  color:var(--ok)}
.chosen b{font-size:14px}

.pg-count{font-size:11.5px;color:var(--tm);font-weight:500;margin-left:auto}
.pager{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:20px 0 0}
.pg-a{min-width:36px;text-align:center;padding:7px 11px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--surface);color:var(--tp);
  font-size:13px;font-weight:600}
.pg-a:hover{border-color:var(--accent);text-decoration:none}
.pg-a.on{background:var(--accent);color:#fff;border-color:transparent}
.pg-x{padding:7px 11px;font-size:13px;color:var(--tm);opacity:.55}
.pg-gap{padding:7px 4px;color:var(--tm)}

/* A brand wordmark is not a photograph: contain it on a neutral field rather
   than cropping it to fill, which left 23 properties showing a blank sliver. */
.result .pic.pic-logo{background:var(--raised);display:flex;align-items:center;
  justify-content:center;padding:22px}
.result .pic.pic-logo img{position:static;width:auto;height:auto;max-width:100%;
  max-height:100%;object-fit:contain}

/* ---------- footer ---------- */
footer.site .foot-sources{max-width:82ch;margin:0 0 14px}
footer.site .foot-legal{margin:0;padding-top:13px;border-top:1px solid var(--page-rule);
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:660;
  color:var(--page-ink-2)}

/* ---------- place autocomplete ---------- */
.field.ac{position:relative}
.ac-box{position:absolute;z-index:60;top:100%;left:0;right:0;margin-top:4px;
  max-height:310px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--e3)}
.ac-row{display:flex;flex-direction:column;gap:1px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid var(--border)}
.ac-row:last-child{border-bottom:none}
.ac-row.on{background:var(--accent);color:#fff}
.ac-main{font-size:13.5px;font-weight:620}
.ac-sub{font-size:11.5px;color:var(--tm)}
.ac-row.on .ac-sub{color:rgba(255,255,255,.8)}
.ac-metro .ac-main::after{content:"ALL AIRPORTS";font-size:8.5px;letter-spacing:.1em;
  margin-left:8px;padding:2px 6px;border-radius:99px;background:var(--accent);color:#fff;
  vertical-align:middle;font-weight:700}
.ac-row.on.ac-metro .ac-main::after{background:rgba(255,255,255,.25)}

/* Carrier mark: logo on a white field, sized small and centred, with the
   airline named beneath so the mark never carries identification alone.
   White throughout because most airline logos are drawn for white and lose
   their colour or vanish entirely on a dark ground. */
.air-pic.has-logo{background:#fff;gap:10px;padding:18px 14px}
.result .pic.air-pic.has-logo img{position:static;inset:auto;
  width:auto;height:auto;max-width:124px;max-height:48px;
  object-fit:contain;background:transparent;padding:0;border-radius:0}
.air-carrier-name{font-size:12px;font-weight:640;color:#1c2430;text-align:center;
  line-height:1.3;max-width:96%;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.air-code{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:#6b7480;line-height:1}

/* ---------- trip type tabs and multi-city legs ---------- */
.triptabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.triptab{position:relative;font-size:12.5px;font-weight:640;padding:7px 15px;
  border-radius:99px;border:1px solid var(--border);background:var(--surface);
  color:var(--ts);cursor:pointer;text-transform:none;letter-spacing:0}
.triptab input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
/* Kept 1px and focusable rather than zero-sized: a zero-sized control is
   skipped by some browsers and gives a keyboard user no focus target. */
.triptab:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.triptab.on{background:var(--accent);color:#fff;border-color:transparent}
.triptab:hover:not(.on){border-color:var(--accent)}
.mc-leg{padding:12px 14px;margin:0 0 10px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--raised);position:relative}
.mc-leg::before{content:"Flight " counter(mcleg);counter-increment:mcleg;
  position:absolute;top:-8px;left:12px;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:720;color:var(--accent);
  background:var(--surface);padding:1px 7px;border-radius:99px;
  border:1px solid var(--border)}
#multiLegs{counter-reset:mcleg}
.air-carrier{font-weight:660;color:var(--tp)}

/* No photograph exists for this item. State that, rather than leaving a
   dark rectangle that reads as a failed image. */
.result .pic.pic-none{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;background:var(--raised);
  border-right:1px solid var(--border);text-align:center;padding:18px}
.none-mark{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--tm);
  letter-spacing:1px;line-height:1}
.none-label{font-size:11.5px;color:var(--ts);font-weight:620;line-height:1.3;
  max-width:90%}
.none-note{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tm);opacity:.75}

/* ============================================ design pass: shared surfaces */
/* One visual language across landing, search and results: a tinted band
   introduces each page, cards sit on it with a consistent lift, and the
   accent is used sparingly so a policy verdict still reads as the loudest
   thing on a card. */

.searchband{position:relative;margin:0 0 22px;padding:30px 26px 26px;
  border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 13%,var(--surface)),
    var(--surface) 62%);
  border:1px solid var(--border);box-shadow:var(--e1)}
.searchband.tight{padding:22px 24px 20px;margin-bottom:16px}
.searchband::after{content:"";position:absolute;inset:auto -60px -120px auto;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%);
  pointer-events:none}
.searchband h1{font-size:clamp(24px,3.2vw,33px);letter-spacing:-.032em;margin:0 0 8px;
  position:relative}
.searchband .lede{color:var(--ts);font-size:14px;max-width:58ch;margin:0;position:relative}
.searchband .kick{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:720;
  color:var(--accent);position:relative}
.searchband .kick i{width:20px;height:1.5px;background:var(--accent);display:block}

/* Cards lift slightly on hover so a long results list feels responsive. */
.result{transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease}
.result:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  box-shadow:var(--e2)}
.result .info h3{letter-spacing:-.018em}
.result .pic{overflow:hidden}
.result .pic img{transition:transform .35s ease}
.result:hover .pic img{transform:scale(1.035)}

/* The search form reads as part of the band above it. */
form.card.pad{border-radius:var(--r-md)}
.btn{transition:background .12s ease, box-shadow .12s ease}
.btn:not(.btn2):hover{box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 34%,transparent)}

/* Generated badge: most of a 57k catalogue has no photograph, so this is a
   first-class state rather than an error. Tinted per property so a hotel
   always looks the same, and legible in both schemes. */
.result .pic.pic-none{background:linear-gradient(150deg,var(--badge,#1a2f3a),
  color-mix(in srgb,var(--badge,#1a2f3a) 55%,#000));border-right:none;color:#fff}
.pic-none .none-mark{color:#fff;font-size:30px;opacity:.95}
.pic-none .none-label{color:rgba(255,255,255,.92);font-weight:640}
.pic-none .none-note{color:rgba(255,255,255,.6)}

/* Car rental one-way toggle */
.oneway{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:12.5px;font-weight:620;color:var(--ts);text-transform:none;
  letter-spacing:0;cursor:pointer}
.oneway input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.warnline{color:var(--warn);font-weight:600}