/* Summit Jet — booking platform */
:root {
  color-scheme: light;
  --bg: #efefef; --bg-2: #e7e7e7; --card: #ffffff; --card-2: #f6f6f6; --sand: #e4e4e4;
  --ink: #0b0b0b; --ink-2: #474747; --muted: #6b6b6b; --faint: #9a9a9a;
  --line: rgba(0, 0, 0, .09); --line-2: rgba(0, 0, 0, .16);
  --btn: #0b0b0b; --btn-ink: #ffffff; --btn-hover: #262626;
  --gold: #c5a059; --gold-ink: #8a6a2c; --gold-soft: rgba(197, 160, 89, .14);
  --ok: #2f8f5b; --ok-soft: rgba(47, 143, 91, .12); --warn: #b5532e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px -22px rgba(0, 0, 0, .25);
  --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, .45);
  --scrim: rgba(10, 10, 10, .45);
  --f-sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 18px; --r-lg: 24px; --r-sm: 12px;
}
html[data-sj-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a; --bg-2: #101010; --card: #141414; --card-2: #1b1b1b; --sand: #111111;
  --ink: #f2f2f2; --ink-2: #b4b4b4; --muted: #8a8a8a; --faint: #5f5f5f;
  --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .18);
  --btn: #f2f2f2; --btn-ink: #0b0b0b; --btn-hover: #ffffff;
  --gold-ink: #d9b878; --gold-soft: rgba(197, 160, 89, .16);
  --ok: #5cc48a; --ok-soft: rgba(92, 196, 138, .12); --warn: #e58b63;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -22px rgba(0, 0, 0, .9);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .95);
  --scrim: rgba(0, 0, 0, .66);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.lock { overflow: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
em.s { font-family: var(--f-serif); font-style: italic; font-weight: 600; letter-spacing: -.03em; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.hd { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--line); }
.hd-in { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; flex: none; }
.brand-w { font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 26px; letter-spacing: -.07em; line-height: 1; }
.brand-t { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.modes { display: flex; gap: 2px; margin-inline: auto; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.mode { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background .25s, color .25s; }
.mode:hover { color: var(--ink); }
.mode[aria-current="true"] { background: var(--btn); color: var(--btn-ink); }
.hd-r { display: flex; align-items: center; gap: 8px; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .2s, background .2s; }
.pill:hover { border-color: var(--line-2); }
.pill svg { width: 17px; height: 17px; flex: none; }
.pill .ct[hidden] { display: none; }
.pill .ct { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #0b0b0b; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.pill.icon { width: 40px; padding: 0; justify-content: center; }
.pill[aria-current="true"] { border-color: var(--ink); }
.lang { appearance: none; -webkit-appearance: none; background: var(--card); border: 1px solid var(--line); border-radius: 999px; height: 40px; padding: 0 30px 0 14px; font-size: 13px; font-weight: 600; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.modes-m { display: none; }

/* ---------- search ---------- */
.hero { padding: 40px 0 8px; }
.hero h1 { margin: 0 0 6px; font-size: clamp(30px, 4.2vw, 46px); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.hero p.sub { margin: 0 0 26px; color: var(--muted); font-size: 16px; max-width: 640px; }
.search { position: relative; display: grid; grid-template-columns: 1.25fr auto 1.25fr 1fr 1fr auto; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 6px; }
.search.s-disc { grid-template-columns: 1.6fr 1fr 1fr auto; }
.fld { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 10px 18px; border-radius: 16px; min-width: 0; cursor: text; transition: background .2s; }
.fld:hover, .fld:focus-within { background: var(--card-2); }
.fld + .fld::before, .fld + .swap + .fld::before { content: ""; }
.fld label, .lbl { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.fld input, .fld select { border: 0; background: none; padding: 0; outline: none; font-size: 16px; width: 100%; min-width: 0; color: var(--ink); text-overflow: ellipsis; }
.fld input::placeholder { color: var(--faint); }
.fld select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.fld input[type="date"] { cursor: pointer; }
.fld input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.sep { width: 1px; background: var(--line); margin: 14px 0; }
.swap { align-self: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; margin: 0 -8px; position: relative; z-index: 2; transition: transform .35s var(--ease); }
.swap:hover { transform: rotate(180deg); }
.swap svg { width: 16px; height: 16px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper b { min-width: 22px; text-align: center; font-weight: 500; font-size: 16px; }
.stepper button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: none; display: grid; place-items: center; font-size: 15px; line-height: 1; }
.stepper button:disabled { opacity: .3; cursor: default; }
.go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 16px; background: var(--btn); color: var(--btn-ink); padding: 0 26px; font-weight: 600; font-size: 15px; min-height: 58px; transition: background .2s; }
.go:hover { background: var(--btn-hover); }
.go svg { width: 17px; height: 17px; }

/* charter search */
.csearch { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 14px; }
.ctop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 12px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.legrow { display: grid; grid-template-columns: 28px 1.3fr auto 1.3fr 1fr 40px; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 16px; padding: 4px; margin-bottom: 8px; }
.legrow .n { font-size: 12px; color: var(--muted); text-align: center; font-weight: 600; }
.legrow .fld { padding: 8px 14px; }
.legrow .rm { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--muted); font-size: 18px; }
.legrow .rm:hover { background: var(--card-2); color: var(--ink); }
.cbot { display: flex; align-items: center; gap: 12px; padding: 6px 4px 2px; flex-wrap: wrap; }
.addleg { border: 1px dashed var(--line-2); background: none; border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 500; }
.cbot .fld { padding: 6px 14px; border: 1px solid var(--line); border-radius: 14px; }
.cbot .go { margin-left: auto; min-height: 52px; }

/* airport autocomplete */
.ac { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: max(100%, 340px); max-height: 360px; overflow: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; display: none; }
.ac.on { display: block; }
.ac button { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 10px; }
.ac button:hover, .ac button.hi { background: var(--card-2); }
.ac .cd { font-size: 12px; font-weight: 700; letter-spacing: .06em; border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 0; text-align: center; }
.ac .nm { font-size: 14px; line-height: 1.25; }
.ac .nm small { display: block; color: var(--muted); font-size: 12.5px; }
.ac .any { grid-template-columns: 52px 1fr; color: var(--muted); }

/* popular */
.pop { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pop::-webkit-scrollbar { display: none; }
.pop .lbl { flex: none; margin: 0 4px 0 0; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: border-color .2s, background .2s; }
.chip:hover { border-color: var(--line-2); }
.chip small { color: var(--muted); font-size: 13px; font-weight: 400; }
.chip[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.chip[aria-pressed="true"] small { color: inherit; opacity: .7; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* ---------- results header ---------- */
.rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 40px 0 16px; flex-wrap: wrap; }
.rhead h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.04em; }
.rmeta { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--muted); font-size: 14px; }
.rmeta b { color: var(--ink); font-weight: 500; }
.live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.rtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sort { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; border-radius: 999px; height: 42px; padding: 0 36px 0 16px; font-size: 14px; }
.tb { height: 42px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 0 16px; font-size: 14px; font-weight: 500; }
.tb:hover { border-color: var(--line-2); }
.tb svg { width: 16px; height: 16px; }
.tb.gold { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold-ink); background: var(--gold-soft); }
.vt { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); }
.vt button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--muted); }
.vt button[aria-pressed="true"] { background: var(--card-2); color: var(--ink); }
.vt svg { width: 16px; height: 16px; }
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 14px 0; border-block: 1px solid var(--line); margin-bottom: 22px; }
.filters::-webkit-scrollbar { display: none; }

/* ---------- cards ---------- */
.list { display: grid; gap: 16px; padding-bottom: 60px; }
.list.grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { display: grid; grid-template-columns: minmax(220px, 34%) 1fr auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .25s, transform .35s var(--ease), box-shadow .35s; }
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.ph { position: relative; min-height: 220px; background: var(--sand); overflow: hidden; }
.ph img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .ph img.photo { transform: scale(1.04); }
.ph .badge { position: absolute; left: 14px; bottom: 14px; display: inline-flex; gap: 8px; padding: 6px 11px; border-radius: 999px; background: rgba(10, 10, 10, .62); color: #fff; backdrop-filter: blur(8px); font-size: 10.5px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
.ph .badge em { color: var(--gold); font-style: normal; }
.ph .cnt { position: absolute; right: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 10, 10, .62); color: #fff; font-size: 12px; font-weight: 600; }
.heart { position: absolute; right: 12px; top: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(10, 10, 10, .5); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); transition: transform .2s; }
.heart:hover { transform: scale(1.08); }
.heart svg { width: 18px; height: 18px; }
.heart[aria-pressed="true"] { color: var(--gold); }
.heart[aria-pressed="true"] svg path { fill: currentColor; }
.ph.profile { display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 100%, var(--card-2), var(--sand)); }
.ph.profile img.prof { width: 82%; max-height: 70%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .25)); }
html[data-sj-theme="dark"] .ph.profile img.prof { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .7)) brightness(.95); }
.mid { padding: 22px 26px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 14px; }
.route .end { text-align: right; }
.code { display: inline-block; font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px; margin-bottom: 6px; }
.city { font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.city small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.flight { display: grid; justify-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; min-width: 120px; padding-bottom: 4px; }
.fl-line { display: flex; align-items: center; width: 100%; gap: 6px; }
.fl-line i { flex: 1; height: 1px; background: var(--line-2); }
.fl-line b { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.fl-line svg { width: 16px; height: 16px; color: var(--ink-2); transform: rotate(90deg); }
.row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.when { font-size: 15px; font-weight: 500; }
.when .t { color: var(--ink-2); font-weight: 400; }
.when .more { color: var(--muted); font-size: 13px; font-weight: 400; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; color: var(--ink-2); }
.tag.gold { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold-ink); background: var(--gold-soft); }
.tag.ok { border-color: transparent; color: var(--ok); background: var(--ok-soft); }
.tag.warn { border-color: transparent; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.row3 { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ac-name { font-size: 15px; font-weight: 500; }
.ac-name small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; margin-top: 2px; }
.link { border: 0; background: none; padding: 0; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.link svg { width: 12px; height: 12px; }
.side { border-left: 1px solid var(--line); padding: 22px 26px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 16px; min-width: 230px; }
.pricebox { text-align: right; }
.flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gold-ink); margin-bottom: 6px; }
.flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.price { font-size: 32px; font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
.was { font-size: 14px; color: var(--muted); text-decoration: line-through; margin-right: 6px; font-weight: 400; letter-spacing: 0; }
.per { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.book { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; background: var(--btn); color: var(--btn-ink); padding: 15px 22px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: background .2s, transform .2s; }
.book:hover { background: var(--btn-hover); }
.book:active { transform: scale(.98); }
.book svg { width: 12px; height: 12px; }
.book:disabled { opacity: .35; cursor: not-allowed; }
.book.wide { width: 100%; }
.seatbar { width: 170px; }
.seatbar .bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px; }
.seatbar .bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.seatbar .bar i.low { background: var(--warn); }
.seatbar small { font-size: 12.5px; color: var(--muted); }
.partner { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.partner b { font-size: 12px; letter-spacing: .08em; color: var(--ink); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 8px; font-weight: 700; }

/* grid view: stack cards */

/* discovery cards */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; padding-bottom: 60px; }
.exp { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, box-shadow .35s; }
.exp:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.exp .ph { min-height: 200px; }
.exp .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.exp h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.exp .loc { font-size: 13px; color: var(--muted); }
.exp p { margin: 0; color: var(--ink-2); font-size: 14px; }
.exp .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.exp .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.exp .price { font-size: 26px; }

/* charter estimates */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding-bottom: 30px; }
.cl { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.cl.off { opacity: .55; }
.cl .ph { min-height: 150px; }
.cl .body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cl h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.cl .models { font-size: 13px; color: var(--muted); }
.cl .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 0; border-block: 1px solid var(--line); }
.cl .facts div { font-size: 12px; color: var(--muted); }
.cl .facts b { display: block; color: var(--ink); font-size: 15px; font-weight: 500; }
.cl .range { font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.cl .range small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.cl .book { margin-top: auto; }
.match { display: flex; align-items: center; gap: 16px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: var(--r); padding: 16px 20px; margin-bottom: 18px; }
.match b { font-weight: 600; }
.match p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.match .tb { margin-left: auto; flex: none; }
.note { color: var(--muted); font-size: 13px; padding-bottom: 50px; max-width: 760px; }

.empty { text-align: center; padding: 70px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); margin-bottom: 60px; }
.empty h3 { color: var(--ink); font-size: 20px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.03em; }
.empty .tb { margin-top: 18px; }
.more-btn { justify-self: center; }

/* ---------- modal / sheet ---------- */
.ov { position: fixed; inset: 0; z-index: 80; background: var(--scrim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .3s; }
.ov.on { opacity: 1; }
.dlg { width: min(1080px, 100%); max-height: calc(100dvh - 48px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); transform: translateY(18px) scale(.985); transition: transform .45s var(--ease); overscroll-behavior: contain; }
.ov.on .dlg { transform: none; }
.dlg.sm { width: min(520px, 100%); }
.dlg-hd { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 26px; background: var(--card); border-bottom: 1px solid var(--line); }
.x { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: none; display: grid; place-items: center; }
.x svg { width: 14px; height: 14px; }
.dlg-bd { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; padding: 34px 40px 40px; align-items: start; }
.dlg-bd > * { min-width: 0; }
.dlg-bd.one { grid-template-columns: 1fr; padding: 26px 28px 30px; }
.dlg h2 { margin: 0 0 22px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.sec:first-of-type { padding-top: 0; }
.sec .lbl { display: block; margin-bottom: 6px; }
.sec .v { font-size: 17px; font-weight: 500; }
.sec .v small { color: var(--muted); font-weight: 400; font-size: 14px; }
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stepper.lg button { width: 40px; height: 40px; font-size: 18px; }
.stepper.lg b { font-size: 18px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.form .full { grid-column: 1 / -1; }
.in { display: flex; flex-direction: column; gap: 6px; }
.in span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.in input, .in textarea, .in select { border: 1px solid var(--line-2); background: var(--card-2); border-radius: 12px; padding: 13px 14px; font-size: 15px; outline: none; transition: border-color .2s, background .2s; width: 100%; }
.in textarea { min-height: 92px; resize: vertical; }
.in input:focus, .in textarea:focus, .in select:focus { border-color: var(--gold); background: var(--card); }
.in.bad input { border-color: var(--warn); }
.phone { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); margin-top: 16px; line-height: 1.45; }
.check input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.check.bad { color: var(--warn); }
.sum .check.sum-agree { margin: 18px 20px 14px; } .sum .check.sum-agree input { margin-left: 0; }
.hint { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.sum { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: 22px; padding: 22px; background: var(--card); }
.sum-top { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sum-top .th { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: var(--sand); }
.sum-top .th.pr { object-fit: contain; padding: 10px; }
.sum-top .k { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.sum-top .r { font-size: 17px; font-weight: 500; margin: 3px 0; line-height: 1.25; }
.sum-top .m { font-size: 13.5px; color: var(--muted); }
.lines { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.ln { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.ln span:first-child { color: var(--ink-2); text-decoration: underline dotted var(--line-2); text-underline-offset: 4px; }
.tot { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 18px; font-size: 18px; font-weight: 600; }
.tot b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.fine { font-size: 12.5px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.5; }
.disclose { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--card-2); font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.disclose b { color: var(--ink-2); font-weight: 600; }

/* slots */
.days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 10px; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; width: 62px; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 8px 0; text-align: center; }
.day small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.day b { font-size: 18px; font-weight: 500; }
.day[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.day[aria-pressed="true"] small { color: inherit; opacity: .7; }
.day:disabled { opacity: .35; cursor: not-allowed; }
.slots { display: flex; gap: 8px; flex-wrap: wrap; }
.slot { border: 1px solid var(--line-2); background: var(--card); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 500; }
.slot:disabled { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.slot[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }

/* details */
.gal { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sand); }
.gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.gal img.on { opacity: 1; }
.gal .nav { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(10, 10, 10, .55); color: #fff; display: grid; place-items: center; }
.gal .nav.p { left: 12px; } .gal .nav.n { right: 12px; }
.gal .nav svg { width: 14px; height: 14px; }
.gal .cnt { position: absolute; right: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 10, 10, .62); color: #fff; font-size: 12px; font-weight: 600; }
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 18px; }
.specs div { background: var(--card); padding: 14px 16px; font-size: 12.5px; color: var(--muted); }
.specs b { display: block; color: var(--ink); font-size: 15px; font-weight: 500; margin-top: 2px; }
.bullets { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bullets li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); }
.bullets li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 8px; }

/* success */
.done { text-align: center; padding: 50px 30px 44px; }
.done .ok:not(.tag) { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; margin: 0 auto 18px; }
.done .ok svg { width: 28px; height: 28px; }
.done h2 { margin-bottom: 10px; }
.done p { color: var(--muted); max-width: 440px; margin: 0 auto 6px; }
.done .ref { display: inline-block; margin: 16px 0 24px; font-size: 13px; letter-spacing: .14em; font-weight: 700; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 12px; }
.done .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* trips */
.trips { display: grid; gap: 12px; padding-bottom: 60px; }
.trip { display: grid; grid-template-columns: 70px 1fr auto; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; }
.trip img { width: 70px; height: 70px; border-radius: 12px; object-fit: cover; background: var(--sand); }
.trip .k { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.trip .r { font-size: 16px; font-weight: 500; margin: 2px 0; }
.trip .m { font-size: 13.5px; color: var(--muted); }
.trip .rt { text-align: right; display: grid; gap: 8px; justify-items: end; }
.trip .rt b { font-size: 18px; font-weight: 500; }

.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; z-index: 99; background: var(--btn); color: var(--btn-ink); padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .3s, translate .4s var(--ease); pointer-events: none; }
.toast.on { opacity: 1; translate: -50% 0; }
.foot { border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--muted); font-size: 12.5px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot a { color: var(--ink-2); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .modes { display: none; }
  .hd-r { margin-left: auto; }
  .modes-m { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 12px; }
  .modes-m::-webkit-scrollbar { display: none; }
  .modes-m .mode { border: 1px solid var(--line); background: var(--card); }
  .modes-m .mode[aria-current="true"] { border-color: var(--btn); background: var(--btn); }
  .search { grid-template-columns: 1fr auto 1fr; }
  .search .sep { display: none; }
  .search .fld.w, .search .fld.p { grid-column: span 1; }
  .search .go { grid-column: 1 / -1; }
  .search.s-disc { grid-template-columns: 1fr 1fr; }
  .search.s-disc .fld:first-child { grid-column: 1 / -1; }
  .card { grid-template-columns: 1fr; }
  .ph { min-height: 200px; }
  .side { border-left: 0; border-top: 1px solid var(--line); flex-direction: row; align-items: center; min-width: 0; }
  .pricebox { text-align: left; }
  .dlg-bd { grid-template-columns: 1fr; gap: 26px; padding: 24px 22px 28px; }
  .sum { position: static; }
}
@media all {
  .hd-in { height: 60px; gap: 10px; }
  .brand-t, .pill .lb { display: none; }
  .pill { padding: 0 12px; }
  .hero { padding-top: 22px; }
  .hero p.sub { font-size: 15px; margin-bottom: 18px; }
  .search { grid-template-columns: 1fr; padding: 6px; border-radius: 20px; }
  .search .swap { position: absolute; right: 18px; top: 46px; margin: 0; }
  .search .fld { padding: 10px 14px; }
  .search .fld + .fld, .search .swap + .fld { border-top: 1px solid var(--line); border-radius: 0; }
  .search .go { margin-top: 6px; }
  .search.s-disc { grid-template-columns: 1fr; }
  .legrow { grid-template-columns: 1fr 1fr; }
  .legrow .n, .legrow .swap { display: none; }
  .legrow .fld:nth-of-type(3) { grid-column: 1 / 2; }
  .legrow .rm { justify-self: end; }
  .cbot .go { width: 100%; }
  .rhead { margin-top: 30px; }
  .rhead h2 { font-size: 22px; }
  .rtools { width: 100%; }
  .sort { flex: 1; }
  [data-quick] { display: none; }
  .mid { padding: 18px; }
  .route { grid-template-columns: 1fr; gap: 6px; }
  .route .end { text-align: left; }
  .flight { justify-items: start; min-width: 0; }
  .fl-line { width: 140px; }
  .city { font-size: 17px; }
  .side { padding: 16px 18px; }
  .price { font-size: 26px; }
  .book { padding: 14px 16px; }
  .ov { padding: 0; place-items: end center; }
  .dlg { border-radius: 24px 24px 0 0; max-height: 94dvh; }
  .dlg-hd { padding: 14px 18px; }
  .form { grid-template-columns: 1fr; }
  .trip { grid-template-columns: 56px 1fr; }
  .trip img { width: 56px; height: 56px; }
  .trip .rt { grid-column: 1 / -1; justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; justify-content: space-between; }
  .match { flex-wrap: wrap; }
  .match .tb { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- account menu ---------- */
.acct { position: relative; }
.av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; letter-spacing: .02em; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.av svg { width: 55%; height: 55%; }
.av.sm { width: 26px; height: 26px; font-size: 11px; }
.av.md { width: 46px; height: 46px; font-size: 16px; }
.av.lg { width: 64px; height: 64px; font-size: 21px; }
#acct-btn { padding-left: 6px; }
#acct-btn > svg { margin-left: 6px; }
.menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 290px; background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 8px; }
.menu .mh { display: flex; gap: 12px; align-items: center; padding: 10px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu .mh b { display: block; font-weight: 600; font-size: 15px; }
.menu .mh small { color: var(--muted); font-size: 13px; word-break: break-all; }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 11px 12px; border-radius: 12px; font-size: 15px; text-align: left; }
.menu button:hover, .menu button:focus-visible { background: var(--card-2); }
.menu button svg { width: 19px; height: 19px; flex: none; color: var(--ink-2); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }

/* ---------- account layout ---------- */
.acc { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 34px 70px; }
.acc-side { position: sticky; top: 92px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 0 14px; overflow: hidden; }
.who { display: flex; align-items: center; gap: 14px; padding: 0 20px 18px; min-width: 0; }
.who > div { min-width: 0; }
.who b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.who small { display: block; color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgbtn { display: flex; align-items: center; gap: 12px; width: calc(100% - 40px); margin: 0 20px 14px; border: 0; background: var(--card-2); border-radius: 14px; padding: 14px 16px; font-size: 15.5px; font-weight: 500; text-align: left; }
.msgbtn svg { width: 20px; height: 20px; }
.msgbtn[aria-current="true"] { background: var(--btn); color: var(--btn-ink); }
.acc-nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 8px; }
.an { position: relative; display: flex; align-items: center; gap: 14px; border: 0; background: none; padding: 13px 22px; font-size: 15.5px; text-align: left; color: var(--ink); }
.an svg { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.an:hover { background: var(--card-2); }
.an i { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--card-2); color: var(--ink-2); }
.an[aria-current="true"] { background: var(--card-2); color: var(--gold-ink); font-weight: 500; }
.an[aria-current="true"] svg { color: var(--gold-ink); }
.an[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.acc-main { min-width: 0; }
.acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.acc-head .eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.acc-head h1 { margin: 6px 0 6px; font-size: clamp(34px, 4.6vw, 56px); font-weight: 500; letter-spacing: -.05em; line-height: 1.02; text-wrap: balance; }
.acc-head p { margin: 0; color: var(--muted); font-size: 16px; max-width: 620px; }
.acc-seg small { color: var(--muted); font-size: 12px; margin-left: 2px; }
.acc-h2 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; margin: 34px 0 14px; }
.acc-empty { text-align: center; padding: 56px 20px 50px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); }
.acc-empty .ei { width: 70px; height: 70px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--card); display: inline-grid; place-items: center; margin-bottom: 16px; color: var(--ink-2); }
.acc-empty .ei svg { width: 28px; height: 28px; }
.acc-empty h3 { margin: 0 0 8px; color: var(--ink); font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.acc-empty p { margin: 0 auto 20px; max-width: 440px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats button { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 18px 20px; font-size: 13.5px; color: var(--muted); transition: border-color .2s; }
.stats button:hover { border-color: var(--line-2); }
.stats b { display: block; font-size: 32px; font-weight: 500; letter-spacing: -.04em; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qk { position: relative; border: 0; padding: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); text-align: left; }
.qk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.qk:hover img { transform: scale(1.05); }
.qk span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 26px 14px 12px; color: #fff; font-weight: 600; font-size: 14.5px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.qk svg { width: 12px; height: 12px; }
.trip .rt .link { font-size: 13px; }
.link.warn, .tb.warn { color: var(--warn); }
.trip.alert { grid-template-columns: 56px 1fr auto; }
.trip .ai { width: 56px; height: 56px; border-radius: 14px; background: var(--gold-soft); color: var(--gold-ink); display: grid; place-items: center; }
.trip .ai svg { width: 22px; height: 22px; }

/* recommended row */
.rec { margin-top: 20px; }
.rec-h { display: flex; align-items: center; justify-content: space-between; }
.rec-nav { display: flex; gap: 8px; margin-top: 20px; }
.rec-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rec-row::-webkit-scrollbar { display: none; }
.rc { scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.rc .ph { min-height: 170px; }
.rc .badge { top: 14px; bottom: auto; letter-spacing: .04em; text-transform: none; font-size: 12px; align-items: center; gap: 5px; }
.rc .badge svg { color: var(--gold); }
.rc-b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rc-r { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.rc-m { font-size: 13px; color: var(--muted); }
.rc-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.rc-f b { font-size: 22px; font-weight: 500; letter-spacing: -.03em; display: block; }
.rc-f small { font-size: 12px; color: var(--muted); }

/* messages */
.contact { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 18px 20px; margin-bottom: 18px; }
.contact p { margin: 4px 0 12px; color: var(--muted); font-size: 14px; }
.cbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cbtns a.tb { text-decoration: none; }
.tb.static { cursor: text; user-select: all; }
.threads { display: grid; gap: 14px; }
.thread { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 14px; }
.thread header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.thread header .k { display: block; font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.thread header b { font-weight: 500; font-size: 16px; }
.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg > div { background: var(--card-2); border-radius: 4px 16px 16px 16px; padding: 12px 14px; max-width: 620px; }
.msg b { font-size: 13px; font-weight: 600; }
.msg time { font-size: 12px; color: var(--muted); margin-left: 8px; }
.msg p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.msg.me { justify-content: flex-end; }
.msg.me > div { border-radius: 16px 4px 16px 16px; background: var(--btn); }
.msg.me p { color: var(--btn-ink); margin: 0; }

/* referrals */
.refcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 14px; }
.refrow { display: flex; gap: 10px; }
.refrow input { flex: 1; min-width: 0; border: 1px solid var(--line-2); background: var(--card-2); border-radius: 12px; padding: 13px 14px; font-size: 15px; }
.steps3 { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.steps3 li { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); }
.steps3 b { width: 30px; height: 30px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); display: grid; place-items: center; font-size: 14px; }

/* reviews */
.stars { color: var(--gold); letter-spacing: 2px; }
.stars i { color: var(--line-2); font-style: normal; }
.revform { align-items: start; }
.revform textarea { min-height: 64px; margin-top: 8px; }
.rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin-top: 4px; }
.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate span { font-size: 24px; color: var(--line-2); cursor: pointer; line-height: 1; }
.rate:not(:hover) label:has(input:checked) span, .rate:not(:hover) label:has(input:checked) ~ label span, .rate label:hover span, .rate label:hover ~ label span { color: var(--gold); }
.rate input:focus-visible + span { outline: 2px solid var(--gold); border-radius: 4px; }

/* settings */
.setform { display: grid; gap: 8px; }
.setsec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 22px 22px; }
.setsec .acc-h2 { margin-top: 20px; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.prow:first-of-type { border-top: 0; }
.prow .lang { height: 40px; }
.sw { cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw i { flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--line-2); position: relative; transition: background .2s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--ease); }
.sw input:checked + i { background: var(--gold); }
.sw input:checked + i::after { transform: translateX(18px); }
.sw input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }
.setbar { display: flex; justify-content: flex-end; padding: 8px 0 14px; }
.danger .hint { margin-bottom: 14px; }

@media (max-width: 1080px) {
  .acc { grid-template-columns: 1fr; gap: 22px; padding-top: 20px; }
  .acc-side { position: static; padding: 16px 0 0; }
  .who { padding: 0 16px 14px; }
  .msgbtn { width: calc(100% - 32px); margin: 0 16px 12px; }
  .acc-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 0; }
  .acc-nav::-webkit-scrollbar { display: none; }
  .an { flex: none; padding: 14px 16px; gap: 8px; font-size: 14.5px; }
  .an svg { width: 17px; height: 17px; }
  .an[aria-current="true"]::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; }
  .an i { margin-left: 2px; }
  .rec-row { grid-auto-columns: calc((100% - 16px) / 2); }
  .quick { grid-template-columns: repeat(2, 1fr); }
}
@media all {
  .menu { position: fixed; left: 12px; right: 12px; top: calc(64px + env(safe-area-inset-top, 0px)); width: auto; }
  #acct-btn { padding-right: 6px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stats button { padding: 14px; font-size: 12.5px; }
  .stats b { font-size: 26px; }
  .rec-row { grid-auto-columns: 82%; }
  .steps3 { grid-template-columns: 1fr; }
  .refrow { flex-direction: column; }
  .acc-head { flex-direction: column; align-items: stretch; }
  .acc-seg { display: flex; }
  .acc-seg button { flex: 1; padding: 8px 6px; }
  .trip.alert { grid-template-columns: 48px 1fr; }
  .trip .ai { width: 48px; height: 48px; }
  .revform .rt { grid-column: 1 / -1; }
}

/* ---------- grid cards ---------- */
.list.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.list.grid .more-btn { grid-column: 1 / -1; }
.gcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .25s, box-shadow .35s; }
.gcard:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.gcard .ph { min-height: 0; aspect-ratio: 16 / 9; }
.gcard .ph.profile img.prof { width: 78%; }
.gcard:hover .ph img.photo { transform: scale(1.04); }
.gcard .heart { background: rgba(255, 255, 255, .92); color: #0b0b0b; backdrop-filter: none; }
.gcard .heart[aria-pressed="true"] { color: #8a6a2c; }
.gtop { position: absolute; left: 14px; top: 14px; z-index: 2; }
.gb { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #0b0b0b; font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.gb svg { color: var(--gold); }
.gb.warn { color: #b5532e; }
.gcard .badge { background: rgba(255, 255, 255, .94); color: #0b0b0b; backdrop-filter: none; }
.gcard .badge em { color: #8a6a2c; position: relative; padding-left: 9px; }
.gcard .badge em::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: rgba(0, 0, 0, .2); }
.gbody { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.gbody .route { gap: 8px; }
.gbody .city { font-size: 18px; }
.gbody .flight { min-width: 86px; }
.gwhen { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 0; margin-top: 16px; border-block: 1px solid var(--line); font-size: 15.5px; font-weight: 500; }
.gwhen i { font-style: normal; color: var(--muted); padding: 0 4px; }
.gwhen b { font-weight: 500; }
.gwhen .more { color: var(--muted); font-weight: 400; font-size: 14px; white-space: nowrap; }
.gwhen > span:first-child { min-width: 0; }
.gfoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 0; margin-top: auto; }
.gfoot .ac-name { min-width: 0; }
.gfoot .pricebox { text-align: right; flex: none; }
.gfoot .price { font-size: 28px; }
.gbtns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.gview { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line-2); background: var(--card); border-radius: 14px; padding: 14px 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: border-color .2s; }
.gview:hover { border-color: var(--ink); }
.gview svg { width: 12px; height: 12px; }
.gbtns .book { padding: 14px 12px; }
@media (max-width: 1180px) { .list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media all {
  .list.grid { grid-template-columns: 1fr; gap: 16px; }
  .gbody .route { grid-template-columns: 1fr auto 1fr; }
  .gbody .route .end { text-align: right; }
  .gbody .flight { justify-items: center; }
  .gbody .fl-line { width: 70px; }
  .gbody .city { font-size: 16px; }
}

/* ---------- charter: aircraft models + calendar ---------- */
.ch-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: 40px 0 22px; }
.ch-top .tb svg { width: 12px; height: 12px; }
.ch-route { text-align: center; }
.ch-route h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; }
.ch-route p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.ch-count { font-size: 13px; color: var(--muted); font-weight: 500; }
.ch-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; padding-bottom: 60px; }
.ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mc { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px 20px; cursor: pointer; transition: border-color .25s, box-shadow .35s, transform .35s var(--ease); }
.mc:hover, .mc:focus-visible { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.mc.off { cursor: default; opacity: .55; }
.mc.off:hover { transform: none; box-shadow: none; }
.mc header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mc h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.mc header span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.mc-ph { position: relative; height: 180px; display: grid; place-items: center; margin: 6px -6px 10px; }
.mc-ph::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 26px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .16), transparent); }
html[data-sj-theme="dark"] .mc-ph::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
.mc-ph img { position: relative; z-index: 1; width: 92%; max-height: 120px; object-fit: contain; transition: transform .6s var(--ease); }
.mc:hover .mc-ph img { transform: translateX(6px); }
.mc footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; }
.mc footer b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.mc footer small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.mc footer .tag { margin-top: 8px; }
.mc-go { flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--gold-soft); color: var(--gold-ink); display: grid; place-items: center; transition: background .2s, color .2s; }
.mc-go svg { width: 14px; height: 14px; }
.mc:hover .mc-go { background: var(--btn); color: var(--btn-ink); }
.ch-side { position: sticky; top: 92px; display: grid; gap: 14px; }
.cal-box { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.cal-box > .lbl { display: block; margin: 0 4px 10px; }
.cal { background: var(--card); border-radius: 16px; padding: 14px 12px 12px; }
.cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-h b { font-weight: 600; font-size: 15px; text-transform: capitalize; }
.cal-n { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; color: var(--ink); }
.cal-n:hover { background: var(--card-2); }
.cal-n:disabled { opacity: .25; cursor: default; background: none; }
.cal-n svg { width: 12px; height: 12px; }
.cal-w, .cal-d { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-w span { font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 4px 0 6px; text-transform: capitalize; }
.cd { aspect-ratio: 1; border: 0; background: none; border-radius: 10px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cd:hover:not(:disabled) { background: var(--card-2); }
.cd:disabled { color: var(--faint); cursor: default; }
.cd.mid { background: var(--gold-soft); border-radius: 0; }
.cd.sel { background: var(--btn); color: var(--btn-ink); font-weight: 600; }
.cd.sel.ret { background: var(--gold); color: #0b0b0b; }
.cls-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cls-chips .chip { padding: 7px 13px; }
.ch-side .note { padding: 0 4px; margin: 0; font-size: 12.5px; }
@media (max-width: 1080px) {
  .ch-wrap { grid-template-columns: 1fr; }
  .ch-side { position: static; order: -1; grid-template-columns: 1fr 1fr; align-items: start; }
  .ch-side .note { grid-column: 1 / -1; }
}
@media all {
  .ch-top { grid-template-columns: 1fr auto; margin-top: 26px; }
  .ch-top .tb { display: none; }
  .ch-route { text-align: left; }
  .ch-side { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ch-side .cal-box:first-child, .ch-side .note { display: none; }
  .ch-side .cal-box { background: none; border: 0; padding: 0; }
  .ch-side .cal-box > .lbl { display: none; }
  .cls-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cls-chips::-webkit-scrollbar { display: none; }
  .ch-grid { grid-template-columns: 1fr; gap: 14px; }
  .mc-ph { height: 150px; }
}

/* =====================================================================
   Summit Jet design: landing-page frame + photo cards
   ===================================================================== */
:root { --hd-h: 69px; --glass: rgba(255, 255, 255, .3); --glass-line: rgba(255, 255, 255, .55); --pill: #ffffff; --pill-ink: #0b0b0b; --notch: var(--bg); }
html[data-sj-theme="dark"] { --glass: rgba(28, 28, 28, .45); --glass-line: rgba(255, 255, 255, .1); --pill: #1c1c1c; --pill-ink: #f2f2f2; }

/* header: glass pills like the landing nav */
.hd { background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .35s, border-color .35s, backdrop-filter .35s; }
.hd { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom-color: var(--line); }
.brand { height: 44px; align-items: center; padding: 0 18px; border-radius: 100px; background: var(--pill); color: var(--pill-ink); box-shadow: 0 18px 32px -16px rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .06); }
.brand-w { font-size: 22px; }
.modes, .modes-m { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .28); padding: 5px; }
.mode { color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
.mode[aria-current="true"] { background: var(--pill); color: var(--pill-ink); box-shadow: 0 8px 17px rgba(0, 0, 0, .12); }
.hd .pill, .hd .lang { background: var(--pill); color: var(--pill-ink); border-color: transparent; box-shadow: 0 18px 32px -16px rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .06); height: 44px; font-weight: 600; }
.hd .pill.icon { width: 44px; }


/* charter: aircraft on a studio floor */
.mc { background: var(--card); padding: 0; overflow: hidden; }
.mc header { flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 22px 0; }
.mc h3 { font-family: var(--f-serif); font-style: italic; font-size: 26px; letter-spacing: -.04em; }
.mc-ph { height: 200px; margin: 0; overflow: hidden; background: radial-gradient(60% 70% at 50% 40%, color-mix(in srgb, var(--card) 100%, transparent), transparent 70%), linear-gradient(180deg, var(--card) 0%, var(--card) 58%, var(--card-2) 58%, var(--sand) 100%); }
.mc-ph::after { bottom: auto; top: calc(58% - 8px); }
.mc-ph img { position: absolute; left: 4%; width: 92%; top: calc(58% - 96px); height: 96px; max-height: none; object-fit: contain; object-position: center bottom; }
.mc-ph img.refl { top: 58%; transform: scaleY(-1); opacity: .16; -webkit-mask-image: linear-gradient(to top, #000, transparent 70%); mask-image: linear-gradient(to top, #000, transparent 70%); }
.mc:hover .mc-ph img.refl { transform: scaleY(-1) translateX(6px); }
.mc footer { padding: 16px 22px 20px; border-top: 1px dashed var(--line-2); }
.cal-box { background: var(--card); }
.cal { background: var(--card-2); }

/* account touches */
.acc-side, .stats button, .setsec, .refcard, .thread, .contact { border-radius: 24px; }
.acc-head h1 { font-weight: 600; }
.acc-head h1, .rhead h2 { letter-spacing: -.05em; }

@media (max-width: 1180px) { .list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .hd .modes { display: none; }
  .modes-m { border-radius: 100px; margin: 4px 0 10px; padding: 5px; }
  .modes-m .mode { border: 0; background: none; }
  .modes-m .mode[aria-current="true"] { background: var(--pill); color: var(--pill-ink); }
}
@media all {
  .brand { height: 40px; padding: 0 14px; }
  .brand-w { font-size: 19px; }
  .hd .pill, .hd .lang { height: 40px; }
}

.rec-row.list.grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px; padding: 14px 2px 18px; }
@media (max-width: 1080px) { .rec-row.list.grid { grid-auto-columns: calc((100% - 22px) / 2); } }
@media all { .rec-row.list.grid { grid-auto-columns: 86%; } }
.rec-row.list.grid { grid-auto-columns: calc((100% - 22px) / 2); } }
@media all { .rec-row.list.grid { grid-auto-columns: 86%; } }
.pass-kind { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.rec-row.list.grid { grid-auto-columns: calc((100% - 22px) / 2); }

/* ---------- photo cards ---------- */
.list { gap: 22px; }
.list.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
.fc { position: relative; display: flex; flex-direction: column; min-width: 0; }
.fc-ph { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--sand); isolation: isolate; }
.fc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.fc:hover .fc-ph img { transform: scale(1.05); }
.fc-ph.dest img { object-position: center 35%; }
.fc-ph.profile, .sc-ph[data-sky] { background: linear-gradient(180deg, #2A2234 0%, #5E4A5E 40%, #C98E62 78%, #F3C995 100%); }
.fc-ph.profile[data-sky="sunset"], .sc-ph[data-sky="sunset"] { background: linear-gradient(180deg, #221836, #66305C 45%, #DB6A50 80%, #FFB86E); }
.fc-ph.profile[data-sky="night"], .sc-ph[data-sky="night"] { background: linear-gradient(180deg, #05070D, #0E1730 55%, #253658); }
.fc-ph.profile[data-sky="day"], .sc-ph[data-sky="day"] { background: linear-gradient(180deg, #2A5891, #6699CE 55%, #CFE2F0); }
.fc-ph img.prof, .sc-ph img.prof { inset: auto 8% 22% 8%; width: 84%; height: 46%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.fc:hover .fc-ph img.prof { transform: translateX(6px); }
.fc-ph .heart { top: 12px; right: 12px; width: 38px; height: 38px; background: rgba(255, 255, 255, .9); color: #0b0b0b; backdrop-filter: none; }
.fc-ph .heart svg { width: 17px; height: 17px; }
.fc-ph .heart[aria-pressed="true"] { color: #8a6a2c; }
.fc-chip { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 100px; background: rgba(255, 255, 255, .9); color: #0b0b0b; font-size: 12.5px; font-weight: 600; }
.fc-chip svg { color: var(--gold); width: 12px; height: 12px; }
.fc-b { padding: 14px 4px 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.fc-when { font-size: 13px; color: var(--muted); }
.fc-when span { color: var(--gold-ink); }
.fc-route { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; }
.fc-arr { display: inline-grid; place-items: center; color: var(--muted); }
.fc-arr svg { width: 14px; height: 14px; transform: rotate(90deg); }
.fc-meta { font-size: 13.5px; color: var(--muted); }
.fc-meta em { font-style: normal; color: var(--gold-ink); }
.fc-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; }
.fc-price { margin-right: auto; }
.fc-price b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.fc-price small { font-size: 12px; color: var(--muted); }
.fc-more { font-size: 13.5px; }
.fc .book { padding: 11px 18px; border-radius: 100px; letter-spacing: .02em; text-transform: none; font-size: 14px; font-weight: 600; }

/* list view: photo on the left */
.list:not(.grid) .fc { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 10px; }
.list:not(.grid) .fc-ph { aspect-ratio: auto; min-height: 180px; border-radius: 18px; }
.list:not(.grid) .fc-b { padding: 10px 14px 8px 0; }
.list:not(.grid) .fc-route { font-size: 22px; }

/* trips + summaries */
.trips { gap: 12px; }
.trip img { border-radius: 14px; }
.rec-row.list.grid { grid-auto-columns: calc((100% - 22px) / 2); padding: 4px 2px 10px; }

@media (max-width: 1180px) { .list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media all {
  .list.grid { grid-template-columns: 1fr; }
  .list:not(.grid) .fc { grid-template-columns: 1fr; padding: 8px; }
  .list:not(.grid) .fc-ph { aspect-ratio: 4 / 3; min-height: 0; }
  .list:not(.grid) .fc-b { padding: 6px 8px 8px; }
  .rec-row.list.grid { grid-auto-columns: 84%; }
}

/* search sits directly under the header */
.search-dock { margin-top: 0; padding-top: 30px; }
.pop { margin-top: 18px; }

/* flight-type tabs: separate pills with icons */
.hd .modes { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; gap: 8px; }
.mode { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border-radius: 100px; background: var(--pill); color: var(--pill-ink); border: 1px solid var(--line); box-shadow: 0 18px 32px -18px rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .04); font-size: 14px; transition: background .25s, color .25s, border-color .25s; }
.mode svg { width: 18px; height: 18px; flex: none; color: var(--gold-ink); }
.mode:hover { border-color: var(--line-2); }
.mode[aria-current="true"], .modes-m .mode[aria-current="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.mode[aria-current="true"] svg { color: var(--gold); }
.modes-m { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 2px 0 12px; gap: 8px; }
.modes-m .mode { background: var(--pill); border: 1px solid var(--line); }
@media (max-width: 1280px) { .hd .modes .mode { padding: 0 12px; font-size: 13.5px; } .hd .modes .mode svg { width: 16px; height: 16px; } }

/* booking popup: ticket summary */
.pass-brand { font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 17px; letter-spacing: -.05em; white-space: nowrap; }
.pass-no { margin-left: auto; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); white-space: nowrap; }
.pass-fields { display: grid; gap: 12px 18px; margin: 0; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.fd { min-width: 0; }
.fd dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.fd dd { margin: 0; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc { display: block; width: 100%; height: 46px; margin: 14px 0 0; fill: var(--ink); opacity: .78; }
.sum { background: var(--card-2); border: 0; padding: 0; overflow: visible; }
.sum > .book, .sum > .fine, .sum > .disclose { margin-left: 20px; margin-right: 20px; }
.sum > .book { width: calc(100% - 40px); }
.sum > .disclose { margin-bottom: 20px; background: var(--card); }
.sum-pass, .issued { --notch: var(--card); position: relative; padding: 20px 22px 4px; }
.sp-head { display: flex; align-items: center; gap: 10px; }
.sp-head .pass-no, .sp-head .tag { margin-left: auto; }
.sp-route { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 16px 0; }
.sp-route > div { min-width: 0; }
.sp-route b { display: block; font-size: 40px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.sp-route span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.sp-route .r { text-align: right; }
.sp-pl { flex: 1; height: 1px; border-top: 1px dashed var(--line-2); margin: 0 4px 30px; position: relative; }
.sp-pl svg { position: absolute; left: 50%; top: 50%; translate: -50% -55%; width: 16px; height: 16px; transform: rotate(90deg); background: var(--card-2); color: var(--ink); }
.sp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-tear { position: relative; height: 0; border-top: 2px dashed var(--line-2); margin: 18px -22px 4px; }
.sp-tear::before, .sp-tear::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--notch); }
.sp-tear::before { left: -12px; } .sp-tear::after { right: -12px; }
.sum-pass .lines { border-bottom: 1px solid var(--line); }
.issued { max-width: 420px; margin: 22px auto 26px; background: var(--card-2); border-radius: 22px; text-align: left; padding-bottom: 20px; }
@media all { .sp-route b { font-size: 34px; } .search-dock { padding-top: 18px; } }

/* flight-type tabs: separate pills inside one shared frame */
.hd .modes, .modes-m { background: var(--glass); border: 1px solid var(--line); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .22); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); padding: 5px; gap: 5px; border-radius: 100px; }
html:not([data-sj-theme="dark"]) .hd .modes, html:not([data-sj-theme="dark"]) .modes-m { background: rgba(0, 0, 0, .035); }
.hd .modes .mode, .modes-m .mode { height: 38px; box-shadow: none; }
.modes-m { margin: 2px 0 12px; width: max-content; max-width: 100%; }
.mc footer b { font-size: 21px; }

/* charter: no calendar sidebar, types fill the width */
.ch-wrap { grid-template-columns: 1fr; gap: 14px; }
.ch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-side { position: static; display: block; }
.ch-side .note { display: block !important; max-width: 760px; padding: 0; }
@media (max-width: 1080px) { .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ch-side { order: 0; } }
@media all { .ch-grid { grid-template-columns: 1fr; } }

/* right-side actions: Saved, account and language share one frame */
.hd-r { gap: 5px; padding: 5px; border-radius: 100px; border: 1px solid var(--line); background: rgba(0, 0, 0, .035); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .22); }
html[data-sj-theme="dark"] .hd-r { background: var(--glass); }
.hd .hd-r .pill, .hd .hd-r .lang { height: 38px; box-shadow: none; border: 1px solid var(--line); }
.hd .hd-r .lang { padding-right: 28px; background-position: right 11px center; }
@media all { .hd .hd-r .pill, .hd .hd-r .lang { height: 34px; } .hd-r { padding: 4px; gap: 4px; } }
.hd .hd-r .lang { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; }

/* one account button: menu, avatar, name, language, saved count */
.hd-r { padding: 0; border: 0; background: none !important; box-shadow: none; }
.hd .hd-r #acct-btn { height: 46px; gap: 10px; padding: 0 8px 0 16px; border: 1px solid var(--line); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .22); }
#acct-btn .ab-menu { display: grid; gap: 4px; width: 16px; }
#acct-btn .ab-menu i { display: block; height: 1.6px; border-radius: 2px; background: currentColor; }
#acct-btn .ab-menu i:last-child { width: 11px; }
#acct-btn .av.sm { width: 30px; height: 30px; }
#acct-btn .ab-lang { font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); height: 18px; display: inline-flex; align-items: center; }
#acct-btn .ct { margin-left: -2px; }
.menu button .ct { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: #0b0b0b; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.mlang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin: 2px 0 4px; background: var(--card-2); border-radius: 12px; }
.menu .mlang button { justify-content: center; padding: 8px 0; font-size: 13px; font-weight: 600; border-radius: 9px; color: var(--ink-2); }
.menu .mlang button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
@media all {
  .hd .hd-r #acct-btn { height: 42px; padding: 0 6px 0 14px; gap: 8px; }
  #acct-btn .lb { display: none; }
}

/* ---------- filters ---------- */
.ftb small { color: var(--muted); font-weight: 400; }
.ftb .ct { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: #0b0b0b; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.fdlg { display: flex; flex-direction: column; max-height: min(860px, calc(100dvh - 48px)); overflow: hidden; }
.fhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.fhead h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.fhead .link { font-size: 15px; color: var(--ink-2); justify-self: start; }
.fhead .fdone { justify-self: end; color: var(--ink); font-weight: 600; }
.fbody { overflow: auto; padding: 4px 22px 10px; flex: 1; }
.fsec { padding: 22px 0; border-bottom: 1px solid var(--line); }
.fsec:last-child { border-bottom: 0; }
.fsec h3 { margin: 0 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.fsec .hint { margin: -8px 0 16px; font-size: 14px; }
.fsort { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fopt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; font-size: 15px; transition: border-color .2s; }
.fopt input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; border: 1.5px solid var(--faint); flex: none; transition: border-width .15s, border-color .15s; }
.fopt input:checked { border: 6px solid var(--ink); }
.fopt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
.fopt input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hist { display: flex; align-items: flex-end; gap: 4px; height: 96px; padding: 0 14px; }
.hist i { flex: 1; border-radius: 3px 3px 0 0; background: var(--line); transition: background .2s; }
.hist i.on { background: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.dual { position: relative; height: 34px; margin: 0 2px; }
.dual .track { position: absolute; left: 14px; right: 14px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--line-2); }
.dual .fill { position: absolute; top: 0; bottom: 0; background: var(--ink); border-radius: 2px; }
.dual input { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 34px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual input::-webkit-slider-runnable-track { background: none; border: 0; }
.dual input::-moz-range-track { background: none; border: 0; }
.dual input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: grab; }
.dual input::-moz-range-thumb { pointer-events: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: grab; }
.dual input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gold); outline-offset: 2px; }
.pvals { display: flex; justify-content: space-between; margin-top: 12px; }
.pvals .lbl { display: block; margin-bottom: 2px; }
.pvals b { font-size: 18px; font-weight: 600; }
.pvals .r { text-align: right; }
.ftypes { display: flex; flex-wrap: wrap; gap: 10px; }
.ftypes .chip { padding: 10px 18px; font-size: 15px; }
.ffoot { padding: 14px 22px 18px; border-top: 1px solid var(--line); }
@media all { .fdlg { max-height: 92dvh; } .fsort { gap: 8px; } .fopt { padding: 12px 14px; font-size: 14.5px; } }

/* account button: outer frame (like the flight-type bar) holding two pills */
.hd .hd-r #acct-btn { height: auto; padding: 5px; gap: 5px; border-radius: 100px; border: 1px solid var(--line); background: rgba(0, 0, 0, .035); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .22); }
html[data-sj-theme="dark"] .hd .hd-r #acct-btn { background: var(--glass); }
#acct-btn .ab-user, #acct-btn .ab-menu { height: 38px; display: inline-flex; align-items: center; border-radius: 100px; background: var(--pill); color: var(--pill-ink); border: 1px solid var(--line); transition: border-color .2s; }
#acct-btn .ab-user { gap: 9px; padding: 0 16px 0 5px; }
#acct-btn .ab-menu { width: 46px; justify-content: center; flex-direction: column; gap: 4px; }
#acct-btn .ab-menu i { width: 16px; height: 1.6px; border-radius: 2px; background: currentColor; }
#acct-btn:hover .ab-user, #acct-btn:hover .ab-menu { border-color: var(--line-2); }
#acct-btn[aria-expanded="true"] .ab-menu { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
#acct-btn .av.sm { width: 28px; height: 28px; }
#acct-btn .ab-lang { display: none; }
@media all {
  .hd .hd-r #acct-btn { padding: 4px; gap: 4px; }
  #acct-btn .ab-user, #acct-btn .ab-menu { height: 34px; }
  #acct-btn .ab-user { padding: 0 5px; }
  #acct-btn .ab-user .ct { margin-right: 4px; }
  #acct-btn .ab-menu { width: 40px; }
}

.quick { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .hd .modes .mode { padding: 0 11px; gap: 6px; } }

/* worldwide search dropdown */
.ac { width: max(100%, 380px); max-height: 420px; }
.ac-h { padding: 10px 10px 4px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.ac .cd { border-radius: 8px; }
.ac .cd.fl { border: 0; font-size: 22px; line-height: 1; padding: 0; }
.ac .cd.pin { border: 0; display: grid; place-items: center; color: var(--gold-ink); }
.ac .cd.pin svg { width: 20px; height: 20px; }
.ac .nm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac .nm { min-width: 0; }
.ac-none { margin: 0; padding: 14px 12px; font-size: 14px; color: var(--muted); }
@media all { .ac { width: 100%; max-height: 360px; } }
.ac button { align-items: center; }
.ac .cd { align-self: center; height: auto; line-height: 1.3; }
.ac .cd { aspect-ratio: auto; background: none; font-size: 12px; }

/* phones: flight-type tabs show icons only; the selected one opens smoothly to show its name */
@media all {
  .modes-m { width: 100%; overflow: visible; }
  .modes-m .mode { flex: 0 1 44px; min-width: 44px; width: auto; height: 40px; padding: 0 12px; justify-content: flex-start; gap: 0; overflow: hidden;
    transition: flex-grow .55s var(--ease), background-color .35s ease, color .35s ease, border-color .35s ease, gap .55s var(--ease); }
  .modes-m .mode svg { width: 19px; height: 19px; flex: none; }
  .modes-m .mode span { display: block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateX(-6px);
    transition: max-width .55s var(--ease), opacity .25s ease, transform .45s var(--ease); }
  .modes-m .mode[aria-current="true"] { flex-grow: 1; gap: 8px; }
  .modes-m .mode[aria-current="true"] span { max-width: 160px; opacity: 1; transform: none; transition: max-width .55s var(--ease), opacity .35s ease .15s, transform .45s var(--ease) .1s; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .modes-m { gap: 4px; padding: 4px; }
  .modes-m .mode { flex-basis: 38px; min-width: 38px; padding: 0 9.5px; }
  .modes-m .mode[aria-current="true"] { gap: 6px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .modes-m .mode, .modes-m .mode span { transition: none !important; } }

/* phones: center icon and name inside the flight-type pills */
@media all {
  .modes-m .mode { justify-content: center; }
}

/* phones: list view is a compact row (small photo left, details right); grid view keeps the big photo cards */
@media all {
  .list:not(.grid) { gap: 10px; }
  .list:not(.grid) .fc { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px; border-radius: 20px; align-items: stretch; }
  .list:not(.grid) .fc-ph { aspect-ratio: auto; min-height: 0; height: 100%; min-height: 128px; border-radius: 14px; }
  .list:not(.grid) .fc-ph .heart { width: 30px; height: 30px; top: 6px; right: 6px; }
  .list:not(.grid) .fc-ph .heart svg { width: 14px; height: 14px; }
  .list:not(.grid) .fc-chip { display: none; }
  .list:not(.grid) .fc-ph img.prof { inset: auto 6% 26% 6%; width: 88%; height: 46%; }
  .list:not(.grid) .fc-b { padding: 4px 4px 2px 0; gap: 2px; }
  .list:not(.grid) .fc-when { font-size: 12px; }
  .list:not(.grid) .fc-route { font-size: 16px; gap: 0 5px; }
  .list:not(.grid) .fc-arr svg { width: 12px; height: 12px; }
  .list:not(.grid) .fc-meta { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .list:not(.grid) .fc-foot { padding-top: 6px; gap: 8px; }
  .list:not(.grid) .fc-price b { font-size: 17px; }
  .list:not(.grid) .fc-price small { font-size: 11px; }
  .list:not(.grid) .fc-more { display: none; }
  .list:not(.grid) .fc .book { padding: 8px 14px; font-size: 13px; }
}

/* grid view: photo and details sit together inside one card frame */
.list.grid .fc { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); transition: border-color .25s, box-shadow .35s; }
.list.grid .fc:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.list.grid .fc-ph { border-radius: 19px; }
.list.grid .fc-b { padding: 14px 12px 8px; }
@media all { .list.grid .fc { border-radius: 24px; } .list.grid .fc-b { padding: 12px 10px 6px; } }

/* ---------- quieter navigation: one monochrome segmented bar, no gold ---------- */
.hd .modes, .modes-m { background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -18px rgba(0, 0, 0, .25); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 4px; gap: 2px; }
html:not([data-sj-theme="dark"]) .hd .modes, html:not([data-sj-theme="dark"]) .modes-m { background: var(--card); }
.mode, .modes-m .mode { background: transparent; border: 0; box-shadow: none; color: var(--muted); font-weight: 500; }
.hd .modes .mode, .modes-m .mode { height: 38px; }
.mode svg, .modes-m .mode svg { color: currentColor; opacity: .9; }
.mode:hover { color: var(--ink); background: var(--card-2); }
.mode[aria-current="true"], .modes-m .mode[aria-current="true"] { background: var(--ink); color: var(--bg); border: 0; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45); }
.mode[aria-current="true"] svg, .modes-m .mode[aria-current="true"] svg { color: currentColor; opacity: 1; }
.mode:focus:not(:focus-visible) { outline: none; }
.mode:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* account button matches the bar */
.hd .hd-r #acct-btn { background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -18px rgba(0, 0, 0, .25); padding: 4px; gap: 2px; }
html[data-sj-theme="dark"] .hd .hd-r #acct-btn { background: var(--card); }
#acct-btn .ab-user, #acct-btn .ab-menu { background: transparent; border: 0; color: var(--ink); }
#acct-btn:hover .ab-user, #acct-btn:hover .ab-menu { background: var(--card-2); }
#acct-btn .av.sm { background: var(--card-2); color: var(--ink-2); border-color: var(--line-2); }
#acct-btn[aria-expanded="true"] .ab-menu { background: var(--ink); color: var(--bg); }
#acct-btn:focus:not(:focus-visible) { outline: none; }
.brand { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -18px rgba(0, 0, 0, .25); border: 1px solid var(--line); }

.ch-gap { height: 34px; }
@media all { .ch-gap { height: 22px; } }
/* neutral focus ring (no gold outline after tapping) */
:focus-visible { outline-color: var(--ink); }
button:focus:not(:focus-visible) { outline: none; }

/* charter types use the same card style as the other flight types */
.ch-grid.list.grid { gap: 26px 22px; }
.fc-ph.studio { aspect-ratio: 16 / 10; background: linear-gradient(180deg, var(--card-2) 0%, var(--card-2) 66%, var(--sand) 100%); }
html[data-sj-theme="dark"] .fc-ph.studio { background: linear-gradient(180deg, #1d1d1d 0%, #1a1a1a 66%, #111 100%); }
.fc-ph.studio img.prof { inset: auto 8% 22% 8%; width: 84%; height: 50%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .18)); }
html[data-sj-theme="dark"] .fc-ph.studio img.prof { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .7)); }
.fc.mc2.off { opacity: .55; }
.fc.mc2 .fc-price b { font-size: 19px; }
.fc.mc2 .book { white-space: nowrap; }

.muted-price { font-size: 16px !important; font-weight: 600; color: var(--ink-2); }
.fc .book.ghosty { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); }
.fc .book.ghosty:hover { border-color: var(--ink); }
.mode:focus { outline: none; }
.mode:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* clear (×) button inside a chosen location */
.fld[data-ap] { padding-right: 46px; }
.fld[data-ap] .clr { position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--card-2); color: var(--ink-2); display: grid; place-items: center; transition: background .2s, color .2s; }
.fld[data-ap]:hover .clr, .fld[data-ap]:focus-within .clr { background: var(--line); }
.fld[data-ap] .clr:hover { color: var(--ink); background: var(--line-2); }
.fld[data-ap] .clr svg { width: 11px; height: 11px; }
.search .swap { z-index: 3; }
@media all { .search .fld[data-ap] .clr { right: 62px; } .search .fld[data-ap]:nth-of-type(n+2) .clr { right: 10px; } }

/* list / grid toggle on every flight type */
.ch-bar { display: flex; justify-content: flex-end; margin: 30px 0 16px; }
.exp-list:not(.grid) { grid-template-columns: 1fr; }
.ch-grid.list:not(.grid) { grid-template-columns: 1fr; gap: 16px; }
.ch-grid.list:not(.grid) .fc-ph.studio { aspect-ratio: auto; }
@media all { .ch-bar { margin: 20px 0 12px; } }
@media all {
  .list:not(.grid) .muted-price { font-size: 13.5px !important; }
  .list:not(.grid) .fc-price small { display: none; }
  .list:not(.grid) .fc-ph.studio img.prof { inset: 0 4%; width: 92%; height: 100%; }
}

/* ---------- When picker ---------- */
.when-btn { border: 0; background: none; padding: 0; font-size: 16px; text-align: left; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.when-btn.set { color: var(--ink); }
.fld.w { cursor: pointer; }
.wscrim { position: fixed; inset: 0; z-index: 70; background: transparent; }
.wpop { position: fixed; z-index: 75; background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 40px 80px -30px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .35s var(--ease); max-height: calc(100dvh - 120px); overflow: auto; }
.wpop.on { opacity: 1; transform: none; }
.wp-top { display: flex; align-items: center; gap: 8px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.wp-top::-webkit-scrollbar { display: none; }
.wp-sep { flex: none; width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.wmonths { display: flex; gap: 6px; }
.wchip { flex: none; height: 36px; padding: 0 15px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.wchip i { font-style: normal; color: var(--muted); font-size: 12px; }
.wchip:hover { border-color: var(--line-2); color: var(--ink); }
.wchip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.wchip.on i { color: inherit; opacity: .6; }
.wp-cal { position: relative; padding: 16px 20px 6px; }
.wmonths2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 30px; }
.wmon-h { text-align: center; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; height: 36px; line-height: 36px; text-transform: capitalize; }
.wnav { position: absolute; top: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; z-index: 1; }
.wnav.p { left: 20px; } .wnav.n { right: 20px; }
.wnav:disabled { opacity: .3; }
.wnav svg { width: 12px; height: 12px; }
.wgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wgrid.wk span { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 8px 0 6px; }
.wd { display: grid; justify-items: center; align-content: center; gap: 1px; height: 54px; border: 0; border-radius: 14px; background: none; color: var(--ink); transition: background .15s; }
.wd b { font-size: 15px; font-weight: 500; }
.wd small { font-size: 11px; color: var(--muted); height: 14px; }
.wd:hover:not(:disabled) { background: var(--card-2); }
.wd:disabled { color: var(--faint); cursor: default; }
.wd.cheap small { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.wd.rng { background: var(--card-2); border-radius: 0; }
.wd.on { background: var(--ink); color: var(--bg); border-radius: 14px; }
.wd.on small { color: inherit; opacity: .75; text-decoration: none; }
.wp-flex { display: flex; align-items: center; gap: 14px; padding: 12px 20px 16px; flex-wrap: wrap; }
.wp-flex .lbl { margin: 0; }
.wp-flex .seg button:disabled { opacity: .4; cursor: default; }
.wp-foot { display: flex; align-items: center; gap: 14px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.wp-foot p { margin: 0 auto 0 0; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.cheap-key { width: 18px; height: 2px; background: var(--gold); border-radius: 2px; flex: none; }
.wp-foot .book { padding: 12px 26px; border-radius: 100px; text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600; }
@media (max-width: 899px) {
  .wscrim { background: var(--scrim); opacity: 0; transition: opacity .25s; }
  .wscrim.on { opacity: 1; }
  .wpop { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; border-radius: 26px 26px 0 0; max-height: 90dvh; transform: translateY(30px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .wp-top { padding: 16px 16px 12px; }
  .wp-cal { padding: 12px 12px 4px; }
  .wnav.p { left: 12px; } .wnav.n { right: 12px; } .wnav { top: 12px; }
  .wd { height: 50px; }
  .wp-flex { padding: 10px 16px 14px; gap: 10px; }
  .wp-flex .seg { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .wp-flex .seg button { padding: 8px 4px; font-size: 13px; }
  .wp-foot { padding: 12px 16px 16px; flex-wrap: wrap; }
  .wp-foot p { flex-basis: 100%; }
  .wp-foot .book { margin-left: auto; }
}

/* Search button: quiet when results already match the form, solid when there are new changes */
.go { transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.go.idle, html[data-sj-theme="dark"] .go.idle { background: var(--card-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.go.idle:hover, html[data-sj-theme="dark"] .go.idle:hover { background: var(--line); color: var(--ink); }
.fld[data-ap] .clr[hidden] { display: none; }

/* charter one way / round trip: single search line */
.csearch .search.crow { box-shadow: none; border: 1px solid var(--line); grid-template-columns: 1.25fr auto 1.25fr 1fr 1fr auto; }
.csearch .search.crow.rt { grid-template-columns: 1.15fr auto 1.15fr .9fr .9fr .95fr auto; }
.csearch .search.crow .fld input[type="date"] { font-size: 15px; }
@media (max-width: 1080px) {
  .csearch .search.crow, .csearch .search.crow.rt { grid-template-columns: 1fr auto 1fr; }
  .csearch .search.crow .fld.w, .csearch .search.crow .fld.p { grid-column: span 1; }
  .csearch .search.crow .go { grid-column: 1 / -1; }
}
@media all {
  .csearch { padding: 10px; }
  .csearch .search.crow, .csearch .search.crow.rt { grid-template-columns: 1fr; border: 0; padding: 0; }
}
.pax-max { font-weight: 600; color: var(--ink-2); }
.fc.mc2.off .pax-max { color: var(--warn); }
.tag.sm { white-space: nowrap; flex: none; }
.fc.mc2 .fc-price b { white-space: nowrap; }
.fc.mc2.off .pax-max { color: var(--gold-ink); }
.fc.mc2 .tag.warn.sm { color: var(--gold-ink); background: var(--gold-soft); }
.pax-max { font-weight: inherit !important; color: inherit !important; }
.fc.mc2.off .pax-max { color: var(--gold-ink) !important; }
.fc.mc2 .fc-meta { margin-top: 2px; }

/* charter: aircraft standing on a mirror floor */
.fc-ph.studio { background: linear-gradient(180deg, var(--card-2) 0%, var(--card-2) 62%, var(--sand) 62%, var(--card-2) 100%); }
html[data-sj-theme="dark"] .fc-ph.studio { background: linear-gradient(180deg, #1d1d1d 0%, #1a1a1a 62%, #121212 62%, #181818 100%); }
.fc-ph.studio img.prof { inset: auto 8% 38% 8%; height: 40%; object-position: center bottom; }
.fc-ph.studio img.prof.refl { inset: 62% 8% auto 8%; height: 40%; object-position: center top; transform: scaleY(-1); transform-origin: center top; translate: 0 0; opacity: .22; filter: blur(.4px); -webkit-mask-image: linear-gradient(to top, #000, transparent 60%); mask-image: linear-gradient(to top, #000, transparent 60%); }
.fc:hover .fc-ph.studio img.prof.refl { transform: scaleY(-1) translateX(6px); }
.list:not(.grid) .fc-ph.studio img.prof { inset: auto 6% 38% 6%; width: 88%; height: 40%; }
.list:not(.grid) .fc-ph.studio img.prof.refl { inset: 62% 6% auto 6%; height: 40%; }
.fc-ph.studio img.prof.refl { transform-origin: center center !important; transform: scaleY(-1) !important; object-position: center bottom; }
.fc:hover .fc-ph.studio img.prof.refl { transform: scaleY(-1) translateX(6px) !important; }
.fc-ph.studio { background: linear-gradient(180deg, var(--card-2) 0%, #f0f0f0 62%, #e9e9e9 62%, #f3f3f3 100%); }
html[data-sj-theme="dark"] .fc-ph.studio { background: linear-gradient(180deg, #1d1d1d 0%, #1a1a1a 62%, #141414 62%, #191919 100%); }

/* tyres sit exactly on the mirror line: each image is nudged by its own ground offset */
.fc-ph.studio img.prof:not(.refl) { transform: translateY(var(--g, 5%)); }
.fc:hover .fc-ph.studio img.prof:not(.refl) { transform: translateY(var(--g, 5%)) translateX(6px); }
.fc-ph.studio img.prof.refl { transform: scaleY(-1) translateY(var(--g, 5%)) !important; }
.fc:hover .fc-ph.studio img.prof.refl { transform: scaleY(-1) translateY(var(--g, 5%)) translateX(6px) !important; }

/* dropdown rows: icon or code left, place in the middle, flag on the right */
.ac button { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 11px 12px; border-radius: 12px; }
.ac button + button { border-top: 1px solid var(--line); border-radius: 0; }
.ac button:hover, .ac button.hi { border-radius: 12px; }
.ac .any { grid-template-columns: 52px 1fr; }
.ac .fl-r { font-size: 20px; line-height: 1; padding-left: 8px; }
.ac .nm { font-size: 15px; }
.ac .nm small { font-size: 13px; margin-top: 2px; }
.ac .cd.pin { color: var(--ink-2); }
.ac { width: max(100%, 440px); }
@media all { .ac { width: 100%; } }
.empty-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.empty-acts .book { padding: 12px 22px; border-radius: 100px; text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600; }
.empty-acts .tb { margin: 0; }

/* "also on this route" sections under an empty result */
.also { margin-top: 34px; }
.also-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.also-h h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.also-h .link svg { width: 11px; height: 11px; }
.list > .empty { grid-column: 1 / -1; }

/* discovery promo inside the empty state */
.dpromo { display: inline-flex; align-items: center; gap: 14px; margin: 30px auto 0; padding: 8px 16px 8px 8px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; max-width: 100%; transition: border-color .2s, transform .2s, box-shadow .2s; }
.dpromo:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: 0 8px 24px -14px rgba(0,0,0,.25); }
.dp-ph { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: var(--line); }
.dp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-tx b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.dp-tx small { font-size: 13px; color: var(--muted); }
.dp-go { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); flex: none; margin-left: 6px; }
.dp-go svg { width: 13px; height: 13px; }

/* route as two places with their state / country underneath */
.fc-rt { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; margin: 2px 0 8px; }
.fc-pt { min-width: 0; }
.fc-pt.r { text-align: right; }
.fc-pt .fc-route { display: block; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-pt small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-rt .fc-arr { position: relative; width: 64px; height: 16px; }
.fc-rt .fc-arr::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-2); }
.fc-rt .fc-arr svg { position: relative; width: 14px; height: 14px; padding: 0 5px; box-sizing: content-box; background: var(--card); }
.list:not(.grid) .fc-pt .fc-route { font-size: 22px; }
@media all {
  .list:not(.grid) .fc-pt .fc-route { font-size: 16px; }
  .fc-rt .fc-arr { width: 36px; }
  .fc-pt small { font-size: 12px; }
}
.list:not(.grid) .fc-rt { max-width: 560px; }

.far-n { font-style: normal; color: var(--gold-ink); }
.sp-route b.sp-place { font-size: 24px; letter-spacing: -.03em; line-height: 1.12; overflow-wrap: anywhere; }
.sp-route > div { flex: 1 1 0; }
.sp-route .sp-pl { flex: none; }
.ftypes .chip:disabled { opacity: .45; cursor: not-allowed; }
.ffoot { display: flex; gap: 10px; align-items: center; }
.ffoot .book.wide { flex: 1; width: auto; }
.ffoot .freset { flex: none; padding: 0 22px; align-self: stretch; border-radius: 14px; font-weight: 600; margin: 0; }
.ffoot .freset[hidden] { display: none; }
.ffoot .freset { height: auto; min-height: 0; align-self: stretch; display: inline-flex; align-items: center; border-radius: 12px; font-size: 14px; }

/* flight-type description on hover */
.mtip { position: fixed; z-index: 60; width: 280px; padding: 14px 16px 15px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px -18px rgba(0,0,0,.35); pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease; }
.mtip.on { opacity: 1; transform: none; }
.mtip::before { content: ""; position: absolute; top: -6px; left: calc(var(--ax, 140px) - 6px); width: 11px; height: 11px; background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.mtip b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mtip b svg { width: 16px; height: 16px; flex: none; }
.mtip p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .mtip { transition: none; } }

/* (i) next to results title + info sheet */
.rh2 { display: flex; align-items: center; gap: 10px; }
.info-b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; padding: 0; flex: none; transition: color .15s, border-color .15s, transform .15s; }
.info-b:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-1px); }
.info-b svg { width: 17px; height: 17px; }
.info-bd { padding: 22px 26px 8px; overflow: auto; }
.info-hd { display: flex; align-items: center; gap: 12px; }
.info-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); flex: none; }
.info-ic svg { width: 20px; height: 20px; }
.info-hd h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.info-in { margin: 14px 0 6px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.info-bd h4 { margin: 22px 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.info-steps, .info-know { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.info-steps li, .info-know li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.info-steps .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; margin-top: -1px; }
.info-know svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold-ink); }
.info-dlg .ffoot { margin-top: 14px; }

/* compact one-month date picker */
.wpop .wp-top { padding: 14px 14px 12px; gap: 6px; }
.wpop .wchip { height: 32px; padding: 0 12px; font-size: 13px; }
.wpop .wp-cal { padding: 12px 14px 4px; }
.wpop .wnav { top: 12px; width: 32px; height: 32px; }
.wpop .wnav.p { left: 14px; } .wpop .wnav.n { right: 14px; }
.wpop .wmon-h { height: 32px; line-height: 32px; font-size: 15px; }
.wpop .wd { height: 44px; border-radius: 12px; }
.wpop .wd b { font-size: 14px; }
.wpop .wd small { font-size: 10px; height: 12px; }
.wpop .wd.on { border-radius: 12px; }
.wpop .wp-flex { display: block; padding: 10px 14px 14px; }
.wpop .wp-flex .lbl { display: block; margin: 0 0 8px; }
.wpop .wp-flex .seg { width: 100%; display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); }
.wpop .wp-flex .seg button { padding: 8px 6px; font-size: 12.5px; white-space: nowrap; }
.wpop .wp-foot { padding: 12px 14px 14px; flex-wrap: wrap; gap: 10px; }
.wpop .wp-foot p { flex-basis: 100%; }
.wpop .wp-foot .link { margin-left: auto; }
.wpop .wp-foot .book { padding: 10px 22px; }
@media all { .wpop .wd { height: 46px; } }
.wd.on, .wd.on:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.wd.rng:disabled { background: none; }

/* flexible range: each day in the window gets a soft visible tile */
.wpop .wgrid:not(.wk) { gap: 4px; }
.wpop .wd.rng { background: rgba(0, 0, 0, .075); border-radius: 12px; }
.wpop .wd.rng:hover:not(:disabled) { background: rgba(0, 0, 0, .11); }
html[data-sj-theme="dark"] .wpop .wd.rng { background: rgba(255, 255, 255, .1); }
html[data-sj-theme="dark"] .wpop .wd.rng:hover:not(:disabled) { background: rgba(255, 255, 255, .15); }
.wpop .wd.rng:disabled { background: none; }

/* × on date and passenger fields */
.fld.w, .fld.pf { position: relative; }
.fld .fclr { position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--card-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.fld .fclr:hover { color: var(--ink); background: var(--line-2); }
.fld .fclr svg { width: 11px; height: 11px; }
.fld .fclr[hidden] { display: none; }
.fld.w .when-btn, .pax-btn { padding-right: 34px; }
.pax-btn { border: 0; background: none; padding: 0 34px 0 0; font-size: 16px; text-align: left; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; cursor: pointer; }
/* passenger picker */
.ppop { padding: 22px 22px 20px; text-align: center; }
.ppop h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.pp-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.pp-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 6px 16px; }
.pp-b { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color .15s, transform .15s; }
.pp-b:hover:not(:disabled) { border-color: var(--ink); }
.pp-b:active:not(:disabled) { transform: scale(.95); }
.pp-b:disabled { opacity: .35; cursor: default; }
.pp-b svg { width: 22px; height: 22px; }
.pp-v b { display: block; font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.pp-v small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.pp-q { display: flex; justify-content: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.pp-q button { width: 44px; height: 38px; border-radius: 100px; border: 0; background: var(--card-2); color: var(--ink); font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.pp-q button:hover { background: var(--line); }
.pp-q button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.pp-done { margin-top: 16px; text-transform: none; letter-spacing: 0; font-size: 15px; border-radius: 14px; padding: 13px; }
@media all { .ppop { padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); } }

/* closing card: other ways to fly this search */
.xcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 22px 18px 16px; min-width: 0; }
.xc-h { padding: 0 6px 14px; }
.xc-k { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.xc-h h3 { margin: 8px 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.xc-h p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.xc-list { display: grid; gap: 8px; margin-top: auto; }
.xc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.xc-row:hover { border-color: var(--line-2); background: var(--card-2); transform: translateY(-1px); }
.xc-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; flex: none; }
.xc-row:hover .xc-ic { background: var(--ink); color: var(--bg); }
.xc-ic svg { width: 18px; height: 18px; }
.xc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xc-tx b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.xc-tx small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-go { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); flex: none; }
.xc-go svg { width: 12px; height: 12px; }
.list:not(.grid) .xcard { padding: 20px; }
.list:not(.grid) .xc-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* charter date picker: round-trip ends */
.wpop .wd.end { box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 12px; }
.wpop .ch-tabs { border-bottom: 1px solid var(--line); }
.wpop .ch-tabs .wchip { flex: 1; }
.wpop .wp-foot .book { margin-left: auto; }

.promos { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
.promos .dpromo { margin: 0; width: min(460px, 100%); }
.dp-ph.studio { background: linear-gradient(#fafafa, #e9e9e9); display: grid; place-items: center; }
.dp-ph.studio img { width: 118%; height: auto; max-width: none; object-fit: contain; margin: 0; }
html[data-sj-theme="dark"] .dp-ph.studio { background: linear-gradient(#2a2a2a, #1a1a1a); }

/* ---------- phone: Uber-style charter trip view ---------- */
@media all {
  #main.ub-mode .search-dock { display: none; }
  #main.ub-mode ~ .foot { padding-bottom: 120px; }
  #main.ub-mode #results { padding: 0; max-width: none; }
  .ub-map { position: relative; height: 44vh; min-height: 280px; margin: -1px 0 0; background: var(--bg-2); color: var(--ink); overflow: hidden; }
  .ub-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ub-route { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: ubdraw 1.1s .15s cubic-bezier(.3,.7,.2,1) forwards; }
  @keyframes ubdraw { to { stroke-dashoffset: 0; } }
  .ub-back { position: absolute; left: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 18px -8px rgba(0,0,0,.35); }
  .ub-back svg { width: 16px; height: 16px; }
  .ub-lbl { position: absolute; display: flex; align-items: stretch; gap: 0; max-width: 64%; border: 0; padding: 0; background: var(--card); color: var(--ink); box-shadow: 0 8px 22px -10px rgba(0,0,0,.35); text-align: left; transform: translate(-50%, calc(-100% - 16px)); white-space: nowrap; }
  .ub-lbl.bot { transform: translate(-50%, 16px); }
  .ub-lbl > svg { width: 11px; height: 11px; align-self: center; margin: 0 10px 0 2px; flex: none; }
  .ub-tx { display: flex; flex-direction: column; padding: 7px 8px 7px 12px; min-width: 0; }
  .ub-tx b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .ub-tx small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
  .ub-t { background: var(--ink); color: var(--bg); display: grid; place-items: center; padding: 0 10px; }
  .ub-t b { font-size: 13px; font-weight: 600; }
  .ub-sheet { position: relative; margin-top: -22px; background: var(--card); border-radius: 24px 24px 0 0; padding: 10px 0 8px; box-shadow: 0 -10px 30px -18px rgba(0,0,0,.3); }
  .ub-grab { display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--line-2); margin: 0 auto 10px; }
  .ub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 20px 12px; border-bottom: 1px solid var(--line); }
  .ub-head b { font-size: 15px; font-weight: 600; }
  .ub-f { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; }
  .ub-f svg { width: 17px; height: 17px; }
  .ub-f .ct { position: absolute; top: -4px; right: -4px; }
  .ub-list { display: grid; gap: 4px; padding: 12px 14px 4px; }
  .ub-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px 14px 14px 8px; border: 2px solid transparent; border-radius: 18px; background: none; color: var(--ink); text-align: left; font: inherit; }
  .ub-row.on { border-color: var(--ink); }
  .ub-row.off { opacity: .45; }
  .ub-ph { width: 84px; height: 46px; display: grid; place-items: center; }
  .ub-ph img { width: 100%; height: 100%; object-fit: contain; }
  .ub-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .ub-mid b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
  .ub-mid b i { font-style: normal; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
  .ub-mid b i svg { width: 13px; height: 13px; }
  .ub-mid small { font-size: 13.5px; color: var(--ink-2); }
  .ub-badge { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: var(--gold); color: #111; }
  .ub-pr { text-align: right; display: flex; flex-direction: column; gap: 2px; }
  .ub-pr b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
  .ub-pr small { font-size: 12.5px; color: var(--muted); }
  .ub-pr small::before { content: "– "; }
  .ub-note { margin: 8px 20px 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
  .ub-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); }
  .ub-go { flex: 1; height: 56px; border-radius: 14px; font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: 0; }
  .ub-cal { flex: none; width: 60px; height: 56px; border-radius: 14px; border: 0; background: var(--card-2); color: var(--ink); display: grid; place-items: center; padding: 0; }
  .ub-cal svg { width: 24px; height: 24px; }
}

@media all {
  #main.ub-mode #results { padding-left: 0 !important; padding-right: 0 !important; margin: 0; width: 100%; max-width: none; }
  .ub-sheet { margin-top: -22px; border-radius: 24px 24px 0 0; }
  .ub-map { background: radial-gradient(120% 90% at 50% 40%, var(--bg) 0%, var(--bg-2) 100%); }
  .ub-row { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; padding: 12px 12px 12px 6px; }
  .ub-ph { width: 70px; height: 40px; }
  .ub-mid b { font-size: 16px; flex-wrap: wrap; row-gap: 0; }
  .ub-mid small { font-size: 13px; }
  .ub-pr b { font-size: 16px; }
  .ub-pr small { font-size: 12px; }
}

/* black & white base map */
@media all {
  .ub-map { background: #dcdcdc; }
  .ub-water { fill: #dcdcdc; }
  .ub-land { fill: #f7f7f7; stroke: #c4c4c4; stroke-width: .8; stroke-linejoin: round; }
  .ub-bord { fill: none; stroke: #cfcfcf; stroke-width: .8; stroke-dasharray: 3 3; }
  html[data-sj-theme="dark"] .ub-map, html[data-sj-theme="dark"] .ub-water { background: #0b0b0b; fill: #0b0b0b; }
  html[data-sj-theme="dark"] .ub-land { fill: #1d1d1d; stroke: #2e2e2e; }
  html[data-sj-theme="dark"] .ub-bord { stroke: #333; }
}

/* ---------- phone: floating bottom bar (Explore · Bookings · Saved · Account) ---------- */
.bnav { display: none; }
@media all {
  .hd .hd-r { display: none; }
  .bnav { display: block; position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 45; pointer-events: none; }
  .bn-in { pointer-events: auto; margin: 0 auto; width: min(360px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border-radius: 100px; background: rgba(18, 18, 18, .86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .bn-in button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; border: 0; border-radius: 100px; background: none; color: rgba(255, 255, 255, .62); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; min-width: 0; }
  .bn-in button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
  .bn-in button svg { width: 21px; height: 21px; }
  .bn-in button .av.sm { width: 22px; height: 22px; font-size: 10px; }
  .bn-in button[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
  .bn-in .ct { position: absolute; top: 6px; left: calc(50% + 6px); font-style: normal; }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  #main.ub-mode ~ .bnav, body:has(#main.ub-mode) .bnav { display: none; }
  .wpop, .ov { z-index: 80; }
  .bsheet .msheet { padding: 8px 6px 14px; }
  .bsheet .msheet > button, .bsheet .msheet .mh { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: none; color: var(--ink); font: inherit; font-size: 16px; text-align: left; }
  .bsheet .msheet > button:active { background: var(--card-2); }
  .bsheet .msheet > button svg { width: 20px; height: 20px; flex: none; }
  .bsheet .msheet .mh { padding: 16px; }
  .bsheet .msheet .mh small { display: block; color: var(--muted); font-size: 13px; }
  .bsheet .msheet hr { border: 0; border-top: 1px solid var(--line); margin: 8px 14px; }
  .bsheet .msheet .mlang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 14px; }
  .bsheet .msheet .mlang button { height: 40px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; }
  .bsheet .msheet .mlang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .bsheet .msheet .ct { margin-left: auto; }
}
@media all { .bsheet .msheet > [data-go="search"], .bsheet .msheet > [data-acc="saved"], .bsheet .msheet > [data-acc="bookings"] { display: none; } }

/* phone header: flight types only; bottom bar styled like the landing page dock (glass frame, white pill) + progressive blur */
.edge-blur { display: none; }
@media all {
  .hd .brand { display: none; }
  .hd .hd-in { display: none; }
  .edge-blur { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: clamp(90px, 13vh, 150px); z-index: 44; pointer-events: none; }
  .edge-blur > i { position: absolute; inset: 0; }
  .edge-blur > i:nth-child(1) { backdrop-filter: blur(.5px); -webkit-backdrop-filter: blur(.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image: linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
  .edge-blur > i:nth-child(2) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to bottom, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image: linear-gradient(to bottom, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
  .edge-blur > i:nth-child(3) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image: linear-gradient(to bottom, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
  .edge-blur > i:nth-child(4) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to bottom, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image: linear-gradient(to bottom, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
  .edge-blur > i:nth-child(5) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image: linear-gradient(to bottom, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
  .edge-blur > i:nth-child(6) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
  .edge-blur > i:nth-child(7) { backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); -webkit-mask-image: linear-gradient(to bottom, transparent 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(to bottom, transparent 75%, #000 87.5%, #000 100%); }
  #main.ub-mode ~ .edge-blur { display: none; }
  .bnav { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .bn-in { width: max-content; max-width: calc(100% - 24px); display: flex; gap: 2px; padding: 5px; border-radius: 100px;
    background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .06); }
  .bn-in button { flex-direction: row; gap: 7px; height: 40px; min-width: 48px; padding: 0 14px; border-radius: 100px; color: #3a3a3a; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
  .bn-in button span { display: none; padding: 0; }
  .bn-in button svg { width: 19px; height: 19px; }
  .bn-in button[aria-current="page"] { background: #fff; color: #111; box-shadow: 0 32px 32px 0 rgba(0, 0, 0, .07), 0 8px 17px 0 rgba(0, 0, 0, .08); }
  .bn-in button[aria-current="page"] span { display: inline; }
  .bn-in .ct { top: 2px; left: auto; right: 4px; }
  html[data-sj-theme="dark"] .bn-in { background: rgba(28, 28, 28, .45); border-color: rgba(255, 255, 255, .1); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3); }
  html[data-sj-theme="dark"] .bn-in button { color: #bdbdbd; }
  html[data-sj-theme="dark"] .bn-in button[aria-current="page"] { background: #1c1c1c; color: #f2f2f2; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
}

/* liquid sliding pill for the phone bottom bar */
@media all {
  .bn-in { position: relative; }
  .bn-pill { position: absolute; left: 0; top: 5px; bottom: 5px; border-radius: 100px; background: #fff; box-shadow: 0 32px 32px 0 rgba(0,0,0,.07), 0 8px 17px 0 rgba(0,0,0,.08); pointer-events: none; will-change: transform, width; opacity: 0; transform-origin: 50% 50%; }
  html[data-sj-theme="dark"] .bn-pill { background: #1c1c1c; box-shadow: 0 8px 17px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
  .bn-in button, .bn-in button[aria-current="page"] { position: relative; z-index: 1; background: none !important; box-shadow: none !important; transition: color .3s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
  .bn-in button[aria-current="page"] { color: #111; }
  html[data-sj-theme="dark"] .bn-in button[aria-current="page"] { color: #f2f2f2; }
  .bn-in button:active { transform: scale(.92); }
  /* label opens/closes smoothly instead of popping */
  .bn-in button span, .bn-in button[aria-current="page"] span { display: grid; grid-template-columns: 0fr; opacity: 0; margin-left: -7px; transition: grid-template-columns .45s cubic-bezier(.32,1.25,.5,1), opacity .25s ease, margin-left .45s cubic-bezier(.32,1.25,.5,1); }
  .bn-in button span b { overflow: hidden; font-weight: 600; white-space: nowrap; min-width: 0; }
  .bn-in button[aria-current="page"] span { grid-template-columns: 1fr; opacity: 1; margin-left: 0; transition-delay: 0s, .08s, 0s; }
}
@media (prefers-reduced-motion: reduce) { .bn-in button span { transition: none; } }

/* phone: flight-type tabs match the bottom bar (glass frame, sliding white pill) */
@media all {
  .modes-m { position: relative; background: rgba(255, 255, 255, .28) !important; border: 1px solid rgba(255, 255, 255, .5) !important;
    backdrop-filter: blur(10px) saturate(1.2) !important; -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .06) !important; padding: 5px !important; border-radius: 100px; }
  html[data-sj-theme="dark"] .modes-m { background: rgba(28, 28, 28, .45) !important; border-color: rgba(255, 255, 255, .1) !important; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3) !important; }
  .modes-m .mode, .modes-m .mode[aria-current="true"] { position: relative; z-index: 1; background: none !important; border: 0 !important; box-shadow: none !important; color: #3a3a3a; transition: color .3s ease, flex-grow .45s cubic-bezier(.32,1.25,.5,1), transform .25s cubic-bezier(.34,1.56,.64,1); }
  .modes-m .mode[aria-current="true"] { color: #111 !important; font-weight: 600; }
  html[data-sj-theme="dark"] .modes-m .mode { color: #bdbdbd; }
  html[data-sj-theme="dark"] .modes-m .mode[aria-current="true"] { color: #f2f2f2 !important; }
  .modes-m .mode:active { transform: scale(.92); }
  .modes-m .bn-pill { top: 5px; bottom: 5px; }
}

/* phone: no page footer; the broker notice and links live in the Account sheet */
@media all {
  .foot { display: none; }
  .ms-legal { padding: 4px 22px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 11.5px; line-height: 1.5; color: var(--muted); }
  .ms-legal p { margin: 0 0 8px; }
  .ms-legal a { color: var(--ink-2); }
}

/* phone: account sections live in the Account sheet (bottom bar), not in a side card */
@media all {
  .acc .acc-side { display: none; }
  .acc { grid-template-columns: 1fr !important; }
}
@media all {
  .bn-in button .av, .bn-in button[aria-current="page"] .av { display: grid !important; place-items: center; grid-template-columns: none; opacity: 1 !important; margin: 0 !important; width: 22px; height: 22px; font-size: 9.5px; flex: none; }
}

/* ---------- phone: account home (Uber-style) ---------- */
.ah-back { display: none; }
@media all {
  .ah { padding-top: 18px; display: grid; gap: 12px; }
  .ah-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
  .ah-top h1 { margin: 0; font-size: 34px; line-height: 1.05; font-weight: 700; letter-spacing: -.04em; }
  .ah-top .av.lg { width: 72px; height: 72px; flex: none; font-size: 24px; }
  .ah-top .av.lg svg { width: 30px; height: 30px; }
  .ah-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .ah-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--card-2); border: 0; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); }
  .ah-chip svg { width: 14px; height: 14px; }
  .ah-sign { background: var(--ink); color: var(--bg); padding: 0 14px; border-radius: 100px; height: 36px; font-weight: 600; }
  .ah-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ah-tile { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; font-size: 16.5px; font-weight: 500; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
  .ah-tile svg { width: 22px; height: 22px; flex: none; }
  .ah-tile .ct { margin-left: 4px; font-style: normal; }
  .ah-tile:active, .ah-row:active, .ah-promo:active { transform: scale(.98); }
  .ah-promo { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; min-height: 104px; padding: 0 0 0 18px; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); font: inherit; text-align: left; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .2s; }
  .ah-pt { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 0; }
  .ah-pt b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
  .ah-pt small { font-size: 14px; color: var(--muted); line-height: 1.35; }
  .ah-pi { width: 112px; flex: none; }
  .ah-pi img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ah-stat { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px; border-radius: 18px; background: var(--card); font-size: 16.5px; font-weight: 500; }
  .ah-stat b { display: inline-flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
  .ah-stat b svg { width: 26px; height: 26px; color: var(--gold-ink); }
  .ah-list { display: grid; margin-top: 6px; }
  .ah-row { display: flex; align-items: center; gap: 18px; padding: 14px 4px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; transition: transform .2s; }
  .ah-row > svg { width: 22px; height: 22px; flex: none; }
  .ah-rt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ah-rt b { font-size: 17px; font-weight: 500; }
  .ah-rt small { font-size: 14px; color: var(--muted); }
  .ah-fine { margin: 6px 4px 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
  .ah-back { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 8px 14px 8px 10px; border: 0; border-radius: 100px; background: var(--card); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; }
  .ah-back svg { width: 12px; height: 12px; }
}
@media all { body.v-acc .hd { display: none; } body.v-acc .ah, body.v-acc .acc { padding-top: 14px !important; margin-top: 0 !important; } }

/* ---------- phone: compact search card (From/To full width, When | Passengers side by side, slim Search) ---------- */
@media all {
  .search-dock { padding-top: 12px !important; }
  .search, .csearch .search.crow, .csearch .search.crow.rt { display: grid !important; grid-template-columns: 1fr 1fr !important; padding: 4px !important; border-radius: 18px; position: relative; }
  .search > * { grid-column: 1 / -1; }
  .search > .fld.w, .search > .fld.pf { grid-column: auto; }
  .search .fld { padding: 8px 14px !important; min-height: 0; }
  .search .fld .lbl, .search .fld label { font-size: 10.5px; letter-spacing: .12em; margin-bottom: 2px; }
  .search .fld input, .search .when-btn, .search .pax-btn, .search .fld select { font-size: 15.5px; height: 24px; line-height: 24px; }
  .search .fld + .fld, .search .swap + .fld { border-top: 1px solid var(--line); }
  .search > .fld.pf { border-left: 1px solid var(--line); }
  .search > .fld.w + .fld.w { border-left: 1px solid var(--line); }
  .search .swap { width: 34px; height: 34px; right: 14px !important; top: 37px !important; }
  .search .swap svg { width: 15px; height: 15px; }
  .search .fld[data-ap] .clr { right: 56px !important; }
  .search .fld[data-ap]:nth-of-type(n+2) .clr { right: 10px !important; }
  .search .fld .fclr { width: 24px; height: 24px; right: 8px; }
  .search .go { height: 46px !important; min-height: 0; margin: 4px 0 0 !important; border-radius: 14px !important; font-size: 15px; }
  .csearch .ctop { margin-bottom: 8px; }
}
@media all {
  .search .fld[data-ap] .clr { right: 60px !important; }
  .search .fld[data-ap]:nth-of-type(n+2) .clr { right: 10px !important; }
  .search.crow.rt > .fld.pf { grid-column: 1 / -1; border-left: 0; }
  .csearch { padding: 8px !important; }
  .csearch .search.crow { padding: 0 !important; }
}

/* ---------- phone: search pill + full-page search ---------- */
.qbar, .sq-hd, .sq-rec { display: none; }
@media all {
  .qbar { display: block; }
  .qpill { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 18px 8px 8px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); color: var(--ink); font: inherit; text-align: left; box-shadow: 0 10px 30px -18px rgba(0,0,0,.3); transition: transform .2s; }
  .qpill:active { transform: scale(.98); }
  .qp-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; flex: none; }
  .qp-ic svg { width: 19px; height: 19px; }
  .qp-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .qp-tx b { font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qp-tx b i { display: inline-grid; color: var(--muted); }
  .qp-tx b i svg { width: 11px; height: 11px; }
  .qp-tx small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qchips { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
  .qchips::-webkit-scrollbar { display: none; }
  .qchip { flex: none; height: 36px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; width: auto !important; }
  .qchip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  body:not(.sq-open) .search-dock #search { display: none; }
  body.sq-open { overflow: hidden; }
  body.sq-open .search-dock #search { display: block; position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow-y: auto; padding: 0 16px 40px; animation: sqin .32s cubic-bezier(.22,1,.36,1); }
  @keyframes sqin { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  body.sq-open .bnav, body.sq-open .edge-blur { display: none; }
  .sq-hd { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 14px 0 14px; position: sticky; top: 0; background: var(--bg); z-index: 2; }
  .sq-hd b { text-align: center; font-size: 17px; font-weight: 600; }
  .sq-hd .link { font-size: 15px; font-weight: 500; color: var(--ink-2); }
  .sq-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--card-2); color: var(--ink); display: grid; place-items: center; }
  .sq-x svg { width: 14px; height: 14px; }
  .sq-rec { display: block; margin-top: 26px; }
  .sq-rec h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  .sq-ri { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; }
  .sq-ri:first-of-type { border-radius: 16px 16px 0 0; } .sq-ri:last-of-type { border-radius: 0 0 16px 16px; border-bottom: 0; } .sq-ri:only-of-type { border-radius: 16px; }
  .sq-ri svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
  .sq-ri span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sq-ri b { font-size: 15.5px; font-weight: 500; }
  .sq-ri small { font-size: 13px; color: var(--muted); }
  body.sq-open .search .fld input, body.sq-open .search .when-btn, body.sq-open .search .pax-btn { font-size: 16px; }
  .pop:empty { display: none; }
}
@media all { .qchips { display: none !important; } }

/* ---------- phone: full-page search, clean tiles ---------- */
.fld .fi, .sq-types { display: none; }
@media all {
  body.sq-open .search-dock #search { padding: 0 16px 40px; }
  body.sq-open .sq-hd { padding: 16px 0 10px; }
  body.sq-open .sq-hd .link { color: var(--ink); font-weight: 600; }
  body.sq-open .sq-types { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px -16px 14px; padding: 0 16px; }
  body.sq-open .sq-types::-webkit-scrollbar { display: none; }
  body.sq-open .sq-types button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 500; }
  body.sq-open .sq-types button svg { width: 16px; height: 16px; }
  body.sq-open .sq-types button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  /* form: white card holding soft grey tiles */
  body.sq-open #search .search, body.sq-open #search .csearch .search.crow { display: flex !important; flex-direction: column; gap: 8px; padding: 10px !important; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 34px -22px rgba(0,0,0,.25); }
  body.sq-open #search .csearch { padding: 0 !important; background: none; border: 0; box-shadow: none; }
  body.sq-open #search .csearch .ctop { margin-bottom: 10px; }
  body.sq-open #search .search .fld { position: relative; display: block; padding: 11px 44px 11px 54px !important; border: 0 !important; border-radius: 14px !important; background: var(--card-2); min-height: 62px; }
  body.sq-open #search .fld .fi { display: grid; place-items: center; position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; color: var(--ink-2); }
  body.sq-open #search .fld .fi svg { width: 21px; height: 21px; }
  body.sq-open #search .fld .lbl, body.sq-open #search .fld label { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); margin: 0 0 3px; display: block; }
  body.sq-open #search .fld input, body.sq-open #search .when-btn, body.sq-open #search .pax-btn { font-size: 16.5px !important; height: 24px; line-height: 24px; color: var(--ink); padding: 0; }
  body.sq-open #search .fld input::placeholder, body.sq-open #search .when-btn:not(.set) { color: var(--muted); }
  body.sq-open #search .fld.pf::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 1.8px solid var(--ink-2); border-bottom: 1.8px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
  body.sq-open #search .fld.pf .fclr { display: none; }
  body.sq-open #search .fld .clr, body.sq-open #search .fld .fclr { right: 12px !important; width: 28px; height: 28px; background: var(--line); }
  body.sq-open #search .fld[data-ap] .clr { right: 12px !important; }
  body.sq-open #search .search .swap { position: absolute; right: 56px !important; top: 52px !important; z-index: 3; width: 36px; height: 36px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 4px 12px -6px rgba(0,0,0,.25); }
  body.sq-open #search .search .swap svg { transform: rotate(90deg); }
  body.sq-open #search .search .go { height: 54px !important; margin: 4px 0 0 !important; border-radius: 14px !important; background: var(--ink) !important; color: var(--bg) !important; border: 0 !important; font-size: 16px; font-weight: 600; }
  body.sq-open #search .search .go svg { display: none; }
  body.sq-open .sq-rec { margin-top: 28px; }
  body.sq-open .sq-rec h3 { font-size: 21px; font-weight: 600; margin-bottom: 12px; }
  body.sq-open .sq-ri { background: var(--card); padding: 15px 16px; }
  body.sq-open .sq-ri b { font-size: 16px; }
}
@media all {
  body.sq-open #main.ub-mode .search-dock { display: block !important; }
  body.sq-open #search .search .swap svg { transform: none; }
  body.sq-open #search .search .swap { right: 12px !important; top: 54px !important; }
  body.sq-open #search .fld[data-ap] { padding-right: 100px !important; }
  body.sq-open #search .fld[data-ap] .clr { right: 58px !important; }
}
.qfilt { display: none; }
@media all {
  .qbar { display: flex !important; align-items: center; gap: 10px; }
  .qbar .qpill { flex: 1; min-width: 0; }
  .qfilt { display: grid; place-items: center; position: relative; flex: none; width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: 0 10px 30px -18px rgba(0,0,0,.3); }
  .qfilt[hidden] { display: none; }
  .qfilt svg { width: 21px; height: 21px; }
  .qfilt .ct { position: absolute; top: 4px; right: 4px; }
  .rtools #alert, .rtools .ftb, .ub-head .ub-f { display: none !important; }
}
@media all {
  .qfilt .ct { top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--gold); color: #111; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; font-style: normal; }
  .rhead { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-end; justify-content: space-between; gap: 10px; }
  .rhead > div:first-child { min-width: 0; }
  .rhead .rtools { flex: none; margin: 0 !important; }
}
@media all { .rhead > div:first-child { flex: 1 1 auto; } .rhead .rtools { width: auto !important; flex: 0 0 auto !important; } }

@media all {
  .search-dock .pop { display: none !important; }
  body.sq-open .sq-ri { gap: 14px; }
  body.sq-open .sq-ri > span:nth-child(2) { flex: 1; }
  body.sq-open .sq-pi { width: 38px; height: 38px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; flex: none; }
  body.sq-open .sq-pi svg { width: 17px; height: 17px; color: var(--ink); }
  body.sq-open .sq-ri > svg { width: 12px; height: 12px; color: var(--muted); flex: none; }
}

/* ---------- phone home ---------- */
@media all {
  body.v-home .hd { display: none; }
  .home { padding-top: 22px; }
  .home-h { margin: 6px 0 16px; font-size: 32px; line-height: 1.08; font-weight: 600; letter-spacing: -.04em; }
  .home-dock { padding: 0 !important; margin: 0; }
  .home-types { display: flex; gap: 6px; margin: 18px -16px 6px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .home-types::-webkit-scrollbar { display: none; }
  .home-types button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 76px; padding: 4px 6px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; }
  .home-types button span { width: 58px; height: 58px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; transition: transform .2s; }
  .home-types button:active span { transform: scale(.94); }
  .home-types button svg { width: 24px; height: 24px; }
  .hrow { margin-top: 26px; }
  .hrow-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .hrow-h h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
  .hrow-h .link { font-size: 14.5px; color: var(--ink-2); }
  .hrow-s { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }
  .hrow-s::-webkit-scrollbar { display: none; }
  .hc { position: relative; flex: none; width: 74%; max-width: 300px; scroll-snap-align: start; }
  .hc-ph { position: relative; aspect-ratio: 4 / 3.1; border-radius: 22px; overflow: hidden; background: var(--card-2); cursor: pointer; }
  .hc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hc-ph.profile { background: linear-gradient(#fafafa, #e6e6e6); }
  .hc-ph.profile img { object-fit: contain; padding: 18px; }
  .hc-ph::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.45)); pointer-events: none; }
  .hc-model { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
  .hc-chip { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 100px; background: rgba(20,20,22,.55); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hc-chip svg { width: 11px; height: 11px; }
  .hc .heart { top: 10px; right: 10px; width: 38px; height: 38px; background: rgba(255,255,255,.9); color: #0b0b0b; backdrop-filter: none; }
  .hc-b { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 4px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; }
  .hc-b b { font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hc-b b i { display: inline-grid; color: var(--muted); } .hc-b b i svg { width: 10px; height: 10px; }
  .hc-b small { font-size: 13.5px; color: var(--muted); }
  .hc-b span { margin-top: 3px; font-size: 16px; font-weight: 600; }
  .hc-b span em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--muted); }
}
@media all { body.v-home .qfilt { display: none; } .hc-ph.profile::after { inset: 70% 0 0; } }
@media all {
  .hc-ph.studio { display: grid; place-items: center; width: 100%; border: 0; padding: 0; background: linear-gradient(#fafafa, #e4e4e4); }
  .hc-ph.studio img { object-fit: contain; width: 86%; height: auto; }
  .hc-ph.studio::after { inset: 72% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.28)); }
  html[data-sj-theme="dark"] .hc-ph.studio { background: linear-gradient(#2a2a2a, #161616); }
}
@media all {
  .hcs-b { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
  .fc-ph.studio.hcs { aspect-ratio: 4 / 3.1; border-radius: 22px; overflow: hidden; }
}
/* home cards: framed like the result cards */
@media all {
  .hc { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 30px -24px rgba(0,0,0,.35); }
  .hc .hc-ph, .fc-ph.studio.hcs { border-radius: 19px; }
  .hc .heart { top: 18px; right: 18px; }
  .hc-b { padding: 12px 10px 8px; }
}
@media all { .hc { box-shadow: none !important; } }

@media all {
  .ub-fl .ub-ph.ph { width: 84px; height: 62px; border-radius: 12px; overflow: hidden; }
  .ub-fl .ub-ph.ph img { object-fit: cover; }
  .ub-rt { display: flex !important; align-items: center; gap: 5px !important; font-size: 15.5px !important; white-space: nowrap; overflow: hidden; }
  .ub-rt i { display: inline-grid; color: var(--muted); } .ub-rt i svg { width: 10px !important; height: 10px !important; }
  .ub-mod { color: var(--muted) !important; font-size: 12.5px !important; }
  .ub-badge svg { width: 10px; height: 10px; }
  .ub-pr small.np::before { content: none; }
  .ub-n { font-size: 13px; color: var(--muted); }
}
@media all {
  .ub-row.ub-fl { grid-template-columns: 76px minmax(0, 1fr) auto !important; gap: 12px; padding: 10px 12px 10px 10px; align-items: center; }
  .ub-fl .ub-ph.ph { position: relative; width: 76px !important; height: 64px !important; border-radius: 12px; overflow: hidden; }
  .ub-fl .ub-ph.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ub-fl .ub-mid { gap: 2px; }
  .ub-fl .ub-badge { margin-top: 5px; }
}
@media all {
  .ub-fl .ub-ph.ph { align-self: center; display: block !important; max-height: 64px; }
  .ub-mid b.ub-rt { flex-wrap: nowrap !important; font-size: 15px !important; }
  .ub-fl .ub-mid small { font-size: 12.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ub-fl .ub-pr b { font-size: 16px; }
}
@media all { .ub-fl .ub-ph.ph { min-height: 0 !important; background: var(--card-2); } }

@media all {
  body:has(#main.ub-mode) .hd { display: none; }
  .ub-types { display: flex; gap: 4px; margin: 2px 16px 6px; padding: 4px; border-radius: 100px; background: var(--card-2); border: 1px solid var(--line); }
  .ub-types button { flex: 0 1 44px; min-width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 100px; background: none; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; }
  .ub-types button svg { width: 19px; height: 19px; flex: none; }
  .ub-types button.on { flex: 1 1 auto; background: var(--card); color: var(--ink); box-shadow: 0 4px 12px -6px rgba(0,0,0,.2); }
  .ub-back { top: calc(16px + env(safe-area-inset-top, 0px)); }
}
@media all {
  .home-h { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
  .hl-logo { font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 34px; letter-spacing: -.07em; line-height: 1; }
  .hl-bar { width: 1.5px; height: 26px; background: var(--line-2); flex: none; }
  .hl-tag em { font-style: normal; color: var(--muted); }
}
@media all { .home-h { font-size: 17px; font-weight: 700; gap: 10px; margin: 2px 0 14px; } .hl-logo { font-size: 26px; } .hl-bar { height: 20px; } .hl-tag em { font-weight: 700; } }
@media all {
  body:not(.v-acc) .hd { display: none; }
  .search-dock { padding-top: 16px !important; }
  .q-types { margin: 12px 0 0 !important; background: var(--card) !important; }
  .q-types button.on { background: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; }
}
@media all { .sq-x svg { width: 18px !important; height: 18px !important; } }
@media all {
  .ub-sec + .ub-sec { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
  .ub-sec h4 { display: flex; align-items: center; gap: 8px; margin: 4px 6px 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  .ub-sec h4 svg { width: 17px; height: 17px; }
  .ub-sec h4 em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--card-2); border-radius: 100px; padding: 2px 8px; }
  .ub-sec h4 .link { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
  .ub-types { overflow-x: auto; scrollbar-width: none; }
  .ub-types::-webkit-scrollbar { display: none; }
  .ub-types button { flex: 0 0 auto; min-width: 42px; padding: 0 11px; }
}
.trip .rt .trash { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.trip .rt .trash:hover { color: #b3261e; border-color: var(--line-2); }
.trip .rt .trash svg { width: 18px; height: 18px; }
@media all {
  .trip .rt { display: flex !important; align-items: center; gap: 10px; }
  .trip .rt > b { margin-right: auto; }
  .trip .rt .trash { order: 2; }
  .trip .rt .tb, .trip .rt .tag { order: 3; }
}
@media all {
  .ub-top { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; }
  .ub-ic { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: 0 8px 22px -10px rgba(0,0,0,.35); }
  .ub-ic svg { width: 19px; height: 19px; }
  .ub-ic .ct { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #111; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
  .ub-loc { flex: 1; min-width: 0; height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 18px; border: 0; border-radius: 100px; background: var(--card); color: var(--ink); font: inherit; text-align: left; box-shadow: 0 8px 22px -10px rgba(0,0,0,.35); }
  .ub-loc b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ub-loc b i { display: inline-grid; color: var(--muted); } .ub-loc b i svg { width: 10px; height: 10px; }
  .ub-loc small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ub-map { min-height: 300px; }
}
@media all {
  .la-sec { margin-top: 28px; }
  .la-sec .also-h h3 { display: flex; align-items: center; gap: 8px; }
  .la-sec .also-h h3 svg { width: 19px; height: 19px; }
  .la-sec .also-h h3 em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--card-2); border-radius: 100px; padding: 2px 9px; }
  body.sq-open .sq-types button svg { width: 16px; height: 16px; }
}
@media all {
  .ub-none { opacity: .55; filter: grayscale(1); }
  .ub-nrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 6px 6px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 16px; font-size: 14px; color: var(--muted); }
  .ub-nrow .tb { margin: 0; height: 34px; padding: 0 12px; font-size: 13px; }
  .ub-nrow .tb svg { width: 14px; height: 14px; }
}
/* phone search page: multi-city legs use the same tiles */
@media all {
  body.sq-open #search .legrow { position: relative; display: flex !important; flex-direction: column; gap: 8px; padding: 34px 10px 10px !important; margin: 0 0 10px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); grid-template-columns: none !important; }
  body.sq-open #search .legrow .n { position: absolute; left: 16px; top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
  body.sq-open #search .legrow .n::before { content: "FLIGHT "; }
  body.sq-open #search .legrow .rm { position: absolute; right: 10px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--card-2); }
  body.sq-open #search .legrow > span:last-child:empty { display: none; }
  body.sq-open #search .legrow .swap { position: absolute; right: 22px; top: 88px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); margin: 0; }
  body.sq-open #search .legrow .fld, body.sq-open #search .cbot .fld { position: relative; display: block; width: auto; padding: 11px 44px 11px 54px !important; border: 0 !important; border-radius: 14px !important; background: var(--card-2); min-height: 62px; }
  body.sq-open #search .legrow .fld[data-ap] { padding-right: 100px !important; }
  body.sq-open #search .legrow .fld[data-ap] .clr { right: 58px !important; }
  body.sq-open #search .cbot { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
  body.sq-open #search .cbot .addleg { height: 48px; border-radius: 14px; width: 100%; }
  body.sq-open #search .cbot .go { height: 54px !important; border-radius: 14px !important; background: var(--ink) !important; color: var(--bg) !important; margin: 0 !important; width: 100%; }
  body.sq-open #search .cbot .go svg { display: none; }
  body.sq-open #search .cbot .fld.pf::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 1.8px solid var(--ink-2); border-bottom: 1.8px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); }
  body.sq-open #search .cbot .fld.pf .fclr { display: none; }
}
@media all {
  body.sq-open #search .legrow > .fld, body.sq-open #search .cbot > .fld, body.sq-open #search .cbot > .addleg { align-self: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; }
  body.sq-open #search .legrow .n { display: block !important; width: auto !important; height: auto !important; background: none !important; border: 0 !important; }
  body.sq-open #search .legrow .swap { display: grid !important; place-items: center; }
  body.sq-open #search .legrow .swap svg { transform: rotate(90deg); width: 15px; height: 15px; }
}
@media all { body.sq-open #search .legrow .swap svg { transform: none; } }
@media all {
  .home-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 18px 0 6px; padding: 0; overflow: visible; }
  .home-types button { min-width: 0; padding: 0; gap: 7px; font-size: 11.5px; letter-spacing: -.01em; white-space: nowrap; }
  .home-types button span { width: 100%; max-width: 62px; height: auto; aspect-ratio: 1; border-radius: 17px; }
  .home-types button svg { width: 22px; height: 22px; }
}
@media all {
  .ub-empty { padding: 22px 18px 10px; text-align: center; }
  .ub-empty h3 { margin: 0 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
  .ub-empty .tb { margin: 0 auto; }
  .ub-empty .promos { margin-top: 18px; }
}
.pick-list { display: grid; gap: 8px; margin-top: 6px; }
.pick-opt { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.pick-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick-opt svg { width: 18px; height: 18px; }
.ah-pic { width: 112px; flex: none; display: grid; place-items: center; background: var(--card-2); color: var(--ink); }
.ah-pic svg { width: 40px; height: 40px; }
.pick-opt .po-l { display: flex; align-items: center; gap: 12px; text-align: left; }
.pick-opt .po-l > svg, .pick-opt .po-l > i { width: 18px; height: 18px; flex: none; }
.pick-opt .po-l small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.pick-opt > svg { width: 20px; height: 20px; color: var(--ink-2); }
.pick-opt .po-f { font-size: 24px; line-height: 1; display: inline-flex; }
.pick-opt .po-f img, .pick-opt .po-f svg { width: 28px; height: auto; border-radius: 4px; }
.pick-opt { height: auto; min-height: 56px; padding: 10px 18px; }
@media all { .ah .ah-promo, .ah .ah-stat { display: none !important; } }
.dlg-hd { flex-direction: row-reverse; }
.av.av-img { padding: 0; overflow: hidden; background: var(--card-2); }
.av.av-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.ah-avb { position: relative; cursor: pointer; flex: none; }
.ah-cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; border: 2px solid var(--bg); }
.ah-cam svg { width: 14px; height: 14px; }
.set-ph { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; }
.set-ph .av.lg { width: 72px; height: 72px; font-size: 24px; }
.set-ph-b { display: flex; flex-wrap: wrap; gap: 8px; }
.set-ph-b .tb { cursor: pointer; }
.set-ph-b { flex-wrap: nowrap; } .set-ph-b .tb { white-space: nowrap; }
.sp-bc { padding: 2px 0 2px; text-align: center; }
.sp-bc .bc { height: 52px; margin: 6px 0 8px; opacity: .85; }
.sp-bc span { display: block; font-size: 11px; letter-spacing: .32em; color: var(--muted); font-weight: 600; }
.sp-tear2 { margin-top: 8px; } .sp-bc { margin-bottom: 14px; }
.sum > .sp-tear2, .sum > .sp-bc { margin-left: 22px; margin-right: 22px; } .sum > .sp-tear2 { margin-top: 18px; } .sum > .sp-bc { margin-bottom: 18px; }
.sum > .sp-tear2::before, .sum > .sp-tear2::after { display: none; }
@media all {
  .dlg-hd.hd-bk .hd-back { margin-right: auto; }
  .bk-map { position: relative; height: 190px; border-radius: 22px; overflow: hidden; margin: 2px 0 22px; background: #dcdcdc; }
  .bk-map .ub-map { position: absolute; inset: 0; height: auto; min-height: 0; margin: 0; }
  .bk-map .ub-top, .bk-map .ub-lbl { display: none; }
  html[data-sj-theme="dark"] .bk-map { background: #0b0b0b; }
}
@keyframes sjNudge { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.nudge { animation: sjNudge .45s ease .3s; }
.check.bad input + span, .check.bad span { color: var(--warn, #b4441f); }
.check.bad { border-radius: 14px; outline: 1.5px solid color-mix(in srgb, #b4441f 55%, transparent); outline-offset: 8px; }
@media all {
  .ub-bord { stroke: #a3a3a3; stroke-width: 1; }
  html[data-sj-theme="dark"] .ub-bord { stroke: #4a4a4a; }
}
.trip[data-trip] { cursor: pointer; }
.td h2 { margin: 2px 0 0; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.td-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.td-hd .k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.td-hd .tag { flex: none; margin-top: 4px; }
.td-list { margin: 18px 0 6px; border-top: 1px solid var(--line); }
.td-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.td-row span { color: var(--muted); }
.td-row b { font-weight: 600; text-align: right; }
.td-acts { display: grid; gap: 10px; margin-top: 18px; }
.td-acts .book, .td-acts .tb { width: 100%; justify-content: center; text-align: center; }
.td-acts a.book { text-decoration: none; display: flex; align-items: center; }
.td-row b span { color: inherit; }
.td-ph { height: 210px; border-radius: 22px; overflow: hidden; margin: 2px 0 20px; background: var(--bg-2); }
.td-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-map { margin-top: 16px; }
.td-map .bk-map { margin: 0; height: 170px; border-radius: 16px; }
.td-map .bk-map { border: 1px solid var(--line); }
.td-gal { margin: 2px 0 20px; border-radius: 22px; overflow: hidden; }
/* ticket screens: grey page, white ticket */
@media all {
  .dlg:has(#bform), .dlg:has(.issued) { background: var(--bg); }
  .dlg:has(#bform) .dlg-hd, .dlg:has(.issued) .dlg-hd { background: var(--bg); }
  .dlg:has(#bform) .sum, .dlg:has(.issued) .issued { background: var(--card); --notch: var(--bg); }
  .dlg:has(#bform) .sum-pass { --notch: var(--bg); }
  .dlg:has(#bform) .in input, .dlg:has(#bform) .in select, .dlg:has(#bform) .in textarea, .dlg:has(#bform) .phone select { background: var(--card); }
  .dlg:has(#bform) .day, .dlg:has(#bform) .slot, .dlg:has(#bform) .stp button, .dlg-hd .x { background: var(--card); }
  .dlg:has(.issued) .td-map .bk-map { border-color: var(--line); }
}
/* request sent: the ticket prints out of a slot */
.sp-pl svg { background: transparent; }
.done.pr { padding-top: 34px; }
.done.pr h2 { margin-bottom: 8px; }
.printer { position: relative; max-width: 420px; margin: 28px auto 0; }
.pr-slot { position: relative; z-index: 2; height: 16px; margin: 0 -8px; border-radius: 10px; background: #121212; box-shadow: inset 0 -4px 0 #2b2b2b, 0 6px 14px rgba(0,0,0,.18); }
.pr-out { position: relative; overflow: hidden; margin-top: -8px; padding: 0 0 6px; }
.pr-paper { transform: translateY(-101%); animation: prPrint 2.8s cubic-bezier(.35,.05,.3,1) .8s forwards; }
.pr-paper .issued { margin: 0; text-align: left; }
@keyframes prPrint {
  0% { transform: translateY(-101%); }
  28% { transform: translateY(-72%); } 34% { transform: translateY(-70%); }
  62% { transform: translateY(-32%); } 68% { transform: translateY(-30%); }
  100% { transform: translateY(0); }
}
.done.pr .acts { margin-top: 24px; opacity: 0; animation: prFade .5s ease 3.5s forwards; }
@keyframes prFade { to { opacity: 1; } }
html[data-sj-theme="dark"] .pr-slot { background: #000; box-shadow: inset 0 -4px 0 #262626, 0 6px 14px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .pr-paper { animation: none; transform: none; } .done.pr .acts { animation: none; opacity: 1; } }
.done.pr h2 { display: inline-flex; align-items: center; gap: 10px; }
.pr-ok { width: 32px; height: 32px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; flex: none; }
.pr-ok svg { width: 17px; height: 17px; stroke-width: 2.6; }
.pr-slot { height: 16px; background: #c9c9c9; box-shadow: inset 0 -5px 0 #a9a9a9, 0 6px 12px rgba(0,0,0,.08); }
html[data-sj-theme="dark"] .pr-slot { background: #3a3a3a; box-shadow: inset 0 -5px 0 #232323, 0 6px 12px rgba(0,0,0,.4); }
.pr-out { margin: -8px -16px 0; padding: 0 16px 34px; }
.pr-paper .issued { box-shadow: 0 14px 30px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.06); }
html[data-sj-theme="dark"] .pr-paper .issued { box-shadow: 0 14px 30px rgba(0,0,0,.5); }
@keyframes prPrint {
  0% { transform: translateY(-101%); }
  28% { transform: translateY(-72%); } 34% { transform: translateY(-70%); }
  62% { transform: translateY(-32%); } 68% { transform: translateY(-30%); }
  92% { transform: translateY(0); }
  100% { transform: translateY(16px); }
}
.done.pr .acts { margin-top: 6px; }
/* brand-colored confirmation, real cut-outs on the printed ticket */
.pr-ok { background: var(--gold); }
.pr-paper { filter: drop-shadow(0 12px 18px rgba(0,0,0,.09)) drop-shadow(0 2px 4px rgba(0,0,0,.06)); }
html[data-sj-theme="dark"] .pr-paper { filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); }
.pr-paper .issued { box-shadow: none !important; --ty: 50%;
  -webkit-mask: radial-gradient(circle 12px at 0 var(--ty), transparent 11.5px, #000 12.5px), radial-gradient(circle 12px at 100% var(--ty), transparent 11.5px, #000 12.5px);
  -webkit-mask-composite: source-in; mask: radial-gradient(circle 12px at 0 var(--ty), transparent 11.5px, #000 12.5px), radial-gradient(circle 12px at 100% var(--ty), transparent 11.5px, #000 12.5px); mask-composite: intersect; }
.pr-paper .sp-tear::before, .pr-paper .sp-tear::after { display: none; }
.pr-out { margin: -8px -30px 0; padding: 0 30px 40px; }
/* booking, request-sent and trip screens open full screen on phones */
@media all {
  .dlg:has(#bform), .dlg:has(.issued) { height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; transform: translateY(40px); }
  .ov.on .dlg:has(#bform), .ov.on .dlg:has(.issued) { transform: none; }
  .dlg:has(#bform) .dlg-hd, .dlg:has(.issued) .dlg-hd { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
}
@media all {
  .dlg:has(#bform) .day[aria-pressed="true"], .dlg:has(#bform) .slot[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
}
.ub-cap { color: var(--muted); margin: -4px auto 14px; max-width: 320px; font-size: 15px; line-height: 1.45; }
.ub-capb { margin: 0 auto 18px; display: inline-flex; padding: 12px 20px; }
.ub-mod .ub-px { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; vertical-align: -1px; }
.ub-mod .ub-px svg { width: 12px; height: 12px; }
.pxi { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--ink); white-space: nowrap; vertical-align: -1px; }
.pxi svg { width: .9em; height: .9em; }

/* ================= computer layout: same app design, laid out for a wide screen ================= */
@media (min-width: 900px) {
  /* top-right navigation instead of the floating bottom bar */
  .bnav { top: 22px; bottom: auto; left: auto; right: max(24px, calc((100vw - 1240px) / 2)); }
  .bn-in { width: max-content; max-width: none; margin: 0; }
  .edge-blur { display: none !important; }
  body:has(#main.ub-mode) .bnav { display: block; }
  .home .home-h { min-height: 56px; display: flex; align-items: center; margin-bottom: 26px; }

  /* home: centered search and type tiles */
  .home { max-width: 1240px; }
  .home-dock { max-width: 760px; margin: 18px auto 0; }
  .home-types { max-width: 760px; margin: 22px auto 40px; display: flex; justify-content: space-between; }
  .home-types button { flex: 1; }
  .hrow { margin-top: 34px; }
  .hrow-h h2 { font-size: 26px; }
  .hrow-s { grid-auto-columns: calc((100% - 3 * 16px) / 4) !important; }

  /* full-page search sits in a centered column */
  body.sq-open .search-dock { max-width: 760px; margin-left: auto; margin-right: auto; }

  /* results: list panel on the left, map fills the rest */
  #main.ub-mode { min-height: 100vh; }
  #main.ub-mode .ub-map { position: fixed; top: 0; bottom: 0; left: 460px; right: 0; height: auto; min-height: 0; margin: 0; z-index: 1; }
  #main.ub-mode .ub-sheet { position: fixed; top: 0; bottom: 0; left: 0; width: 460px; margin: 0; border-radius: 0; overflow-y: auto; padding: 18px 0 110px; box-shadow: 1px 0 0 var(--line); z-index: 5; overscroll-behavior: contain; }
  #main.ub-mode .ub-grab { display: none; }
  #main.ub-mode .ub-bar { left: 0; right: auto; width: 460px; z-index: 6; }
  #main.ub-mode .ub-top { left: 20px; right: auto; top: 20px; width: min(620px, calc(100% - 300px)); }
  body:has(#main.ub-mode) .bnav { right: 24px; }
  body:has(#main.ub-mode) { overflow: hidden; }
  body:has(#main.ub-mode) .foot { display: none; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .hrow-s { grid-auto-columns: calc((100% - 2 * 16px) / 3) !important; }
}
@media (min-width: 900px) {
  /* every page other than home starts below the top navigation */
  #main > .wrap.search-dock:not(.home-dock) { margin-top: 96px; max-width: 980px; }
  #main > .wrap.search-dock .qbar { max-width: 760px; margin-left: auto; margin-right: auto; }
  #main > .wrap.search-dock .q-types { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
  #main > .wrap.search-dock .q-types button { flex: none; }
  #main > .wrap.search-dock .q-types button[aria-pressed="true"], #main > .wrap.search-dock .q-types button.on { padding: 0 18px; }
  #main > #results.wrap { max-width: 1240px; }
  #results .list.grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px; }
  #results .list:not(.grid) { max-width: 980px; margin-left: auto; margin-right: auto; }
  #main > .wrap.ah, #main > .wrap.acc { margin-top: 96px; max-width: 760px; }

  /* full-page search in a centered column */
  body.sq-open .search-dock #search { padding-left: max(24px, calc((100vw - 760px) / 2)); padding-right: max(24px, calc((100vw - 760px) / 2)); }
}
@media (min-width: 900px) and (max-width: 1180px) { #results .list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 900px) {
  #main > .wrap.ah, #main > .wrap.acc { padding-top: 96px; }
  .dk-logo { display: flex; align-items: center; position: fixed; top: 22px; left: max(24px, calc((100vw - 1240px) / 2)); height: 52px; z-index: 44; color: var(--ink); text-decoration: none; font-size: 26px; }
  body.v-home .dk-logo, body:has(#main.ub-mode) .dk-logo, body.sq-open .dk-logo, body:has(#ov) .dk-logo { display: none; }
}
@media (max-width: 899px) { .dk-logo { display: none !important; } }
@media (min-width: 900px) { .dk-logo { border: 0; background: none; cursor: pointer; padding: 0; font: inherit; } .dk-logo .hl-logo { font-size: 26px; } }
@media (min-width: 900px) { body.v-acc #main > .ah, body.v-acc #main > .acc { padding-top: 96px !important; } }
@media (min-width: 900px) and (max-width: 1279px) {
  body:has(#main.ub-mode) .bnav { top: auto; bottom: 22px; left: 460px; right: 0; }
  body:has(#main.ub-mode) .bn-in { margin: 0 auto; }
  #main.ub-mode .ub-top { width: auto; right: 20px; max-width: 620px; }
}
@media (min-width: 900px) {
  .dlg:has(.td), .dlg:has(.done.pr) { width: min(760px, 100%); }
  .td-gal { aspect-ratio: 16 / 9; height: auto; }
}

/* ===== computer results, Airbnb-style: photo cards on the left, rounded map on the right ===== */
@media (min-width: 900px) {
  body:has(#main.ub-mode) { overflow: auto; }
  body:has(#main.ub-mode) .dk-logo { display: flex; }
  body:has(#main.ub-mode) .bnav { top: 22px; bottom: auto; left: auto; right: 24px; }
  body:has(#main.ub-mode) .bn-in { margin: 0; }
  #main.ub-mode > #results.wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 40%); column-gap: 28px; align-items: start; max-width: 1760px; margin: 0 auto; padding: 96px 24px 0; }
  #main.ub-mode .ub-map { position: sticky; top: 96px; left: auto; right: auto; bottom: auto; grid-column: 2; grid-row: 1 / span 2; height: calc(100vh - 120px); border-radius: 24px; overflow: hidden; z-index: 1; }
  #main.ub-mode .ub-top { left: 16px; right: 16px; top: 16px; width: auto; max-width: none; }
  #main.ub-mode .ub-sheet { position: static; grid-column: 1; grid-row: 1; width: auto; overflow: visible; margin: 0; padding: 0 0 24px; background: none; border-radius: 0; box-shadow: none; }
  #main.ub-mode .ub-types { width: max-content; max-width: 100%; margin: 0 0 6px; }
  #main.ub-mode .ub-types button { flex: none; }
  #main.ub-mode .ub-head { padding: 10px 2px 14px; border: 0; }
  #main.ub-mode .ub-bar { position: sticky; bottom: 16px; left: auto; right: auto; width: auto; grid-column: 1; grid-row: 2; z-index: 6; border: 1px solid var(--line); border-radius: 22px; margin-bottom: 16px; box-shadow: 0 12px 30px -16px rgba(0,0,0,.25); }

  /* cards */
  #main.ub-mode .ub-list, #main.ub-mode .ub-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; padding: 0; border: 0; }
  #main.ub-mode .ub-sec { margin-bottom: 34px; }
  #main.ub-mode .ub-sec > h4, #main.ub-mode .ub-list > :not(.ub-row), #main.ub-mode .ub-sec > :not(.ub-row) { grid-column: 1 / -1; }
  #main.ub-mode .ub-sec > h4 { margin: 0 0 -10px; padding: 0 2px; }
  #main.ub-mode .ub-row { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; margin: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; text-align: left; cursor: pointer; }
  #main.ub-mode .ub-row .ub-ph { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; flex: none; transition: outline-color .2s; outline: 2.5px solid transparent; outline-offset: 3px; }
  #main.ub-mode .ub-row .ub-ph img { width: 100%; height: 100%; object-fit: cover; }
  #main.ub-mode .ub-row:not(.ub-fl) .ub-ph { background: linear-gradient(180deg, #f7f7f7, #e9e9e9); display: grid; place-items: center; }
  #main.ub-mode .ub-row:not(.ub-fl) .ub-ph img { object-fit: contain; padding: 10% 8%; }
  #main.ub-mode .ub-row.on .ub-ph { outline-color: var(--ink); }
  #main.ub-mode .ub-row:hover .ub-ph img { transform: scale(1.03); }
  #main.ub-mode .ub-row .ub-ph img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  #main.ub-mode .ub-row .ub-mid { margin-top: 12px; padding: 0 2px; min-width: 0; }
  #main.ub-mode .ub-row .ub-mid b { font-size: 16px; }
  #main.ub-mode .ub-row .ub-mid small { font-size: 14px; }
  #main.ub-mode .ub-row .ub-badge { position: absolute; top: 12px; left: 12px; margin: 0; z-index: 2; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
  #main.ub-mode .ub-row .ub-pr { margin-top: 6px; padding: 0 2px; text-align: left; display: flex; align-items: baseline; gap: 6px; }
  #main.ub-mode .ub-row .ub-pr b { font-size: 16px; }
  #main.ub-mode .ub-row.off { opacity: .45; }
}
@media (min-width: 1500px) {
  #main.ub-mode .ub-list, #main.ub-mode .ub-sec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  #main.ub-mode > #results.wrap { padding: 96px 24px 0 !important; width: 100% !important; max-width: 1760px !important; margin: 0 auto !important; }
  #main.ub-mode .ub-row .ub-ph, #main.ub-mode .ub-row.ub-fl .ub-ph { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 4 / 3; }
  body:has(#main.ub-mode) .dk-logo { left: 24px; }
}
@media (min-width: 1784px) { body:has(#main.ub-mode) .dk-logo { left: calc((100vw - 1760px) / 2 + 24px); } }
@media (min-width: 900px) {
  #main.ub-mode::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 88px; background: var(--bg); z-index: 40; }
  #main.ub-mode { padding-bottom: 0 !important; margin-bottom: 0 !important; min-height: 0; }
  #main.ub-mode > #results.wrap { min-height: 100vh; padding-bottom: 24px !important; box-sizing: border-box; }
  #main.ub-mode .ub-types, #main.ub-mode .ub-head { position: relative; z-index: 2; }
}
@media (min-width: 900px) { body { padding-bottom: 40px !important; } body:has(#main.ub-mode) { padding-bottom: 0 !important; } }
/* computer: a top bar that stays with the screen, like Airbnb */
.dk-bar { display: none; }
@media (min-width: 900px) {
  .dk-bar { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; right: 0; height: 96px; z-index: 43; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; pointer-events: none; }
  body.dk-scrolled .dk-bar { border-bottom-color: var(--line); box-shadow: 0 6px 20px -16px rgba(0,0,0,.25); }
  body.v-home .dk-logo { display: flex; }
  body.v-home .home .home-h .hl-logo, body.v-home .home .home-h .hl-bar { visibility: hidden; }
  body.v-home .home .home-h { visibility: visible; }
  body.v-home .home { padding-top: 96px; }
  body.v-home .home .home-h { position: fixed; top: 22px; left: max(24px, calc((100vw - 1240px) / 2)); height: 52px; min-height: 0; margin: 0; z-index: 44; pointer-events: none; }
  body.v-home .home .home-h .hl-logo, body.v-home .home .home-h .hl-bar { display: none; }
  body.v-home .home .home-h .hl-tag { margin-left: 112px; opacity: 1; transition: opacity .25s; }
  body.v-home.dk-mini .home .home-h .hl-tag { opacity: 0; }
  body:has(#main.ub-mode) .dk-bar, body.sq-open .dk-bar, body:has(#ov) .dk-bar { display: none; }
  body:not(.v-home) .dk-bar { box-shadow: none; }
  .dk-pill { pointer-events: auto; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 6px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 6px 18px -10px rgba(0,0,0,.2);
    opacity: 0; transform: translateY(-8px) scale(.96); transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); visibility: hidden; }
  body.dk-mini .dk-pill { opacity: 1; transform: none; visibility: visible; }
  .dkp-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; }
  .dkp-ic svg { width: 17px; height: 17px; }
  .dkp-tx { display: flex; align-items: center; gap: 12px; font-size: 14.5px; white-space: nowrap; }
  .dkp-tx i { width: 1px; height: 20px; background: var(--line); }
  .dkp-tx span { color: var(--muted); }
  /* the big home search hides behind the bar as it scrolls away */
  body.v-home .home-dock { position: relative; z-index: 1; }
  .hrow-h { position: relative; z-index: 1; }
}
@media (min-width: 900px) {
  body:has(#ov) .dk-logo, body.sq-open .dk-logo { display: none !important; }
}
@media (min-width: 900px) {
  body.sq-open .search-dock, body.sq-open .home-dock { z-index: 80 !important; }
  body.sq-open .home .home-h { display: none !important; }
}
/* ===== computer header, Airbnb-style: logo · flight types · account + menu ===== */
@media (min-width: 900px) {
  .bnav { display: none !important; }
  .dk-bar { height: 88px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); }
  body.v-home .home .home-h, body.v-home .home-types { display: none !important; }
  body.v-home .home { padding-top: 92px; }
  body.v-home .home-dock { margin-top: 8px; }
  .dk-types { pointer-events: auto; position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; gap: 6px; padding: 5px; border-radius: 100px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 18px -12px rgba(0,0,0,.18); transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
  .dk-types button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 14px; border: 0; border-radius: 100px; background: none; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
  .dk-types button svg { width: 18px; height: 18px; flex: none; }
  .dk-types button:hover { background: var(--card-2); color: var(--ink); }
  .dk-types button.on { background: var(--ink); color: var(--bg); }
  body:not(.v-home) .dk-types, body.dk-mini .dk-types { opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; }
  .dk-pill { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
  .dk-r { pointer-events: auto; position: absolute; right: max(24px, calc((100vw - 1240px) / 2)); top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: 10px; }
  .dk-acc, .dk-menu { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; transition: box-shadow .2s; }
  .dk-acc:hover, .dk-menu:hover { box-shadow: 0 4px 14px -6px rgba(0,0,0,.25); }
  .dk-acc svg, .dk-menu svg { width: 20px; height: 20px; }
  .dk-acc .av { width: 100%; height: 100%; font-size: 13px; border: 0; }
  .dk-mw { position: relative; }
  .dk-dd { position: absolute; right: 0; top: calc(100% + 10px); width: 250px; padding: 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(0,0,0,.3); z-index: 50; }
  .dk-dd[hidden] { display: none; }
  .dk-dd button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
  .dk-dd button:hover { background: var(--card-2); }
  .dk-dd button svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
  .dk-dd hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
  .dk-logo { top: 18px; left: max(24px, calc((100vw - 1240px) / 2)) !important; }
  body.v-home .dk-logo, body:not(.v-home) .dk-logo { display: flex; }
  body.sq-open .dk-logo, body:has(#ov) .dk-logo { display: none !important; }
  #main.ub-mode > #results.wrap { padding-top: 92px !important; }
  #main.ub-mode .ub-map { top: 92px; }
  body:has(#main.ub-mode) .dk-bar { display: flex; }
  body:has(#main.ub-mode) .dk-bar, body:has(#main.ub-mode) .dk-r { padding: 0 24px; }
  body:has(#main.ub-mode) .dk-r { right: 0; }
  body:has(#main.ub-mode) .dk-logo { left: 24px !important; }
  #main.ub-mode::before { display: none; }
}
@media (min-width: 900px) and (max-width: 999px) {
  .dk-types button span { display: none; }
  .dk-types button { padding: 0 14px; }
  .dk-types button.on span, .dk-types button:hover span { display: inline; }
}
/* flight-type tabs: names only on the selected tab on phones, every name on computers */
@media (max-width: 899px) { .ub-types button:not(.on) span { display: none; } }
@media (min-width: 900px) {
  .ub-types { width: max-content !important; max-width: 100%; }
  .ub-types button { flex: none !important; width: auto !important; gap: 8px; padding: 0 16px 0 14px !important; font-size: 14px; font-weight: 600; }
  .ub-types button span { display: inline !important; }
  .ub-types button:not(.on) { color: var(--ink-2); }
  .ub-types button:not(.on):hover { background: var(--card-2); }
  body:has(#main.ub-mode) .dk-pill { display: none; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  #main.ub-mode .ub-types button:not(.on) span { display: none !important; }
  #main.ub-mode .ub-types button:not(.on) { padding: 0 13px !important; }
}
/* home rows: link title, arrows and a "See all" tile (computer only) */
.hrow-t { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.hrow-go, .hrow-nav, .hc-more { display: none; }
@media (min-width: 900px) {
  .hrow { margin-top: 30px; }
  .hrow-h { display: flex; align-items: center; margin-bottom: 14px; }
  .hrow-h h2 { font-size: 22px !important; font-weight: 600; letter-spacing: -.02em; }
  .hrow-h > .link { display: none; }
  .hrow-go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); }
  .hrow-go svg { width: 13px; height: 13px; }
  .hrow-t:hover .hrow-go { background: var(--card); }
  .hrow-nav { display: flex; gap: 8px; margin-left: auto; }
  .hrow-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
  .hrow-nav button svg { width: 13px; height: 13px; }
  .hrow-nav button:disabled { opacity: .35; cursor: default; }

  /* frameless photo cards, seven in a row on wide screens */
  .hrow-s { display: grid !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 6 * 16px) / 7) !important; gap: 16px !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin: 0 !important; padding: 0 0 4px !important; scrollbar-width: none; }
  .hrow-s::-webkit-scrollbar { display: none; }
  .hc { width: auto !important; max-width: none !important; background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
  .hc .hc-ph { aspect-ratio: 1 / 1; border-radius: 18px !important; }
  .hc .hc-ph::after { display: none; }
  .hc .hc-model { display: none; }
  .hc .hc-chip { top: 10px; left: 10px; font-size: 10.5px; padding: 5px 9px; background: rgba(255,255,255,.92); color: #111; letter-spacing: .04em; }
  .hc .heart { top: 8px !important; right: 8px !important; width: 32px; height: 32px; }
  .hc .heart svg { width: 16px; height: 16px; }
  .hc-b { padding: 9px 2px 0 !important; gap: 1px; }
  .hc-b b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hc-b b i svg { width: 9px; height: 9px; }
  .hc-b small { font-size: 13.5px; color: var(--muted); }
  .hc-b .tnum { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
  .hc-b .tnum em { font-weight: 400; color: var(--muted); }
  .hc-ph.studio img, .hc-ph.profile img { width: 92%; }

  .hc-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 1 / 1; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; scroll-snap-align: start; box-shadow: 0 6px 18px -14px rgba(0,0,0,.25); }
  .hc-more:hover { box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); }
  .hcm-pics { position: relative; width: 104px; height: 78px; }
  .hcm-pics img { position: absolute; width: 58px; height: 58px; object-fit: cover; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
  .hcm-pics img:nth-child(1) { left: 6px; top: 0; transform: rotate(-8deg); }
  .hcm-pics img:nth-child(2) { right: 6px; top: 4px; transform: rotate(7deg); }
  .hcm-pics img:nth-child(3) { left: 24px; top: 18px; transform: rotate(-2deg); z-index: 2; }
}
@media (min-width: 900px) and (max-width: 1279px) { .hrow-s { grid-auto-columns: calc((100% - 4 * 16px) / 5) !important; } }
@media (min-width: 1280px) and (max-width: 1499px) { .hrow-s { grid-auto-columns: calc((100% - 5 * 16px) / 6) !important; } }
@media (min-width: 900px) { .hc .hc-chip { max-width: calc(100% - 58px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; } }
/* list pages: search pill and type tabs share one centre line */
@media (min-width: 900px) {
  #main > .wrap.search-dock:not(.home-dock) { margin-top: 92px; }
  #main > .wrap.search-dock .qbar { position: relative; display: block; max-width: 760px; margin: 8px auto 0 !important; }
  #main > .wrap.search-dock .qbar .qpill { width: 100%; }
  #main > .wrap.search-dock .qbar .qfilt { position: absolute; top: 50%; left: calc(100% + 14px); translate: 0 -50%; margin: 0; }
  #main > .wrap.search-dock .q-types { display: flex !important; margin: 16px auto 0 !important; }
}
/* computer home: flight types sit under the search, "All" selected */
.home-tabs { display: none; }
.dk-logo:focus:not(:focus-visible) { outline: none; }
@media (min-width: 900px) {
  .dk-types { display: none !important; }
  .home-tabs { display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 16px auto 4px; padding: 5px; border-radius: 100px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 18px -12px rgba(0,0,0,.18); }
  .home-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 14px; border: 0; border-radius: 100px; background: none; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
  .home-tabs button svg { width: 18px; height: 18px; flex: none; }
  .home-tabs button:hover { background: var(--card-2); color: var(--ink); }
  .home-tabs button.on { background: var(--ink); color: var(--bg); cursor: default; }
}
/* computer home: the full search bar (From · To · When · Passengers · Search) sits on top, Airbnb style */
@media (min-width: 900px) {
  body.v-home:not(.sq-open) .home-dock .qbar { display: none !important; }
  body.v-home:not(.sq-open) .home-dock #search { display: block !important; position: static; padding: 0; background: none; animation: none; }
  body.v-home:not(.sq-open) .home-dock #search .sq-hd, body.v-home:not(.sq-open) .home-dock #search .sq-types, body.v-home:not(.sq-open) .home-dock #search .sq-pop, body.v-home:not(.sq-open) .home-dock #search .sq-rec { display: none !important; }
  body.v-home:not(.sq-open) .home-dock { max-width: 900px; }
  body.v-home:not(.sq-open) .home-dock #search .search { display: grid !important; grid-template-columns: 1.2fr auto 1.2fr 1fr 1fr auto; align-items: center; padding: 6px; border-radius: 100px; box-shadow: 0 8px 24px -14px rgba(0,0,0,.25); }
  body.v-home:not(.sq-open) .home-dock #search .search.s-disc { grid-template-columns: 1.6fr 1fr 1fr auto; }
  body.v-home:not(.sq-open) .home-dock #search .fld { padding: 12px 24px !important; border-radius: 100px !important; background: none; min-height: 0; }
  body.v-home:not(.sq-open) .home-dock #search .fld:hover, body.v-home:not(.sq-open) .home-dock #search .fld:focus-within { background: var(--card-2); }
  body.v-home:not(.sq-open) .home-dock #search .fld .fi { display: none !important; }
  body.v-home:not(.sq-open) .home-dock #search .fld label, body.v-home:not(.sq-open) .home-dock #search .fld .lbl { font-size: 11px; letter-spacing: .02em; text-transform: none; color: var(--ink); font-weight: 600; }
  body.v-home:not(.sq-open) .home-dock #search .fld input, body.v-home:not(.sq-open) .home-dock #search .when-btn, body.v-home:not(.sq-open) .home-dock #search .pax-btn { font-size: 14.5px !important; color: var(--ink-2); }
  body.v-home:not(.sq-open) .home-dock #search .swap { margin: 0 -10px; }
  body.v-home:not(.sq-open) .home-dock #search .go { border-radius: 100px; min-height: 52px; height: 52px; padding: 0 22px; margin: 0; width: auto; }
}
@media (min-width: 900px) {
  body.v-home:not(.sq-open) .home-dock #search .search { grid-template-columns: 1.2fr 1.2fr 1fr 1fr auto !important; padding: 6px !important; border-radius: 100px !important; }
  body.v-home:not(.sq-open) .home-dock #search .search > * { grid-column: auto !important; }
  body.v-home:not(.sq-open) .home-dock #search .fld { padding: 10px 24px !important; border: 0 !important; position: relative; }
  body.v-home:not(.sq-open) .home-dock #search .fld + .fld::after, body.v-home:not(.sq-open) .home-dock #search .swap + .fld::after { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
  body.v-home:not(.sq-open) .home-dock #search .fld:hover::after, body.v-home:not(.sq-open) .home-dock #search .fld:hover + .fld::after, body.v-home:not(.sq-open) .home-dock #search .fld:focus-within::after { opacity: 0; }
  body.v-home:not(.sq-open) .home-dock #search .swap { position: absolute !important; left: calc((100% - 120px) * 1.2 / 4.4 + 6px); top: 50% !important; right: auto !important; translate: -50% -50%; margin: 0; width: 30px; height: 30px; z-index: 3; }
  body.v-home:not(.sq-open) .home-dock #search .go { height: 52px !important; margin: 0 !important; border-radius: 100px !important; padding: 0 22px !important; width: auto; background: var(--ink) !important; color: var(--bg) !important; border: 0 !important; }
  body.v-home:not(.sq-open) .home-dock #search .fld input, body.v-home:not(.sq-open) .home-dock #search .when-btn, body.v-home:not(.sq-open) .home-dock #search .pax-btn { height: 22px; line-height: 22px; }
}
@media (min-width: 900px) {
  body.v-home:not(.sq-open) .home-dock { max-width: 960px; }
  body.v-home:not(.sq-open) .home-dock #search .swap { display: none !important; }
  body.v-home:not(.sq-open) .home-dock #search .search { grid-template-columns: 1.3fr 1.3fr 1fr 1.1fr auto !important; }
  .dk-pill, .home-dock #search .search { transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
  body.v-home.dk-mini .home-dock #search .search { opacity: 0; transform: translateY(-14px) scale(.9); }
}
@media (min-width: 900px) {
  body.v-home:not(.sq-open) .home-dock #search .ac { width: 400px !important; max-width: none; }
  body.v-home .home { padding-top: 80px; }
  body.v-home .home-dock { margin-top: 0 !important; padding-top: 0 !important; }
}
@media (min-width: 900px) {
  body.v-home .home { padding-top: 78px; }
  body.v-home:not(.dk-mini) .home-dock { position: relative; z-index: 46; }
  body.v-home:not(.dk-scrolled) .dk-bar { background: transparent; }
  body.v-home .home-tabs { margin-top: 12px; }
  body.v-home .hrow:first-of-type { margin-top: 22px; }
}
@media (min-width: 900px) {
  body.v-home .home { padding-top: 70px; }
  body.v-home .home-tabs { margin-top: 12px; }
}
/* wide computers: the detailed search lives in the header where the short search appears; scrolling shrinks one into the other in place */
@media (min-width: 1100px) {
  body.v-home .home { padding-top: 92px; }
  body.v-home:not(.sq-open) .home-dock { position: fixed !important; top: 7px; left: 50%; translate: -50% 0; width: min(960px, calc(100vw - 2 * max(24px, (100vw - 1240px) / 2) - 2 * 150px)); max-width: none !important; margin: 0 !important; z-index: 46; }
  body.v-home:not(.sq-open) .home-dock #search .search { transform-origin: 50% 37px; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
  body.v-home.dk-mini:not(.sq-open) .home-dock #search .search { opacity: 0; transform: scale(.45, .68); pointer-events: none; }
  body.v-home.dk-mini:not(.sq-open) .home-dock #search .ac { display: none !important; }
  body.v-home .dk-pill { transform: scale(1.6, 1.4); }
  body.v-home.dk-mini .dk-pill { transform: none; transition: opacity .3s .05s, transform .35s cubic-bezier(.2,.8,.2,1); }
  body.v-home:not(.dk-scrolled) .dk-bar { background: var(--bg); }
  body.v-home .home-tabs { margin-top: 14px; }
}
@media (min-width: 1100px) {
  body.v-home:not(.sq-open) .home-dock { top: 18px; }
  body.v-home:not(.sq-open) .home-dock #search .search { padding: 4px !important; min-height: 0; transform-origin: 50% 26px; }
  body.v-home:not(.sq-open) .home-dock #search .fld { padding: 6px 22px !important; }
  body.v-home:not(.sq-open) .home-dock #search .fld label, body.v-home:not(.sq-open) .home-dock #search .fld .lbl { margin-bottom: 0; font-size: 10.5px; }
  body.v-home:not(.sq-open) .home-dock #search .fld input, body.v-home:not(.sq-open) .home-dock #search .when-btn, body.v-home:not(.sq-open) .home-dock #search .pax-btn { height: 20px; line-height: 20px; font-size: 14px !important; }
  body.v-home:not(.sq-open) .home-dock #search .go { height: 44px !important; padding: 0 20px !important; font-size: 14px; }
  body.v-home .home { padding-top: 90px; }
}
@media (min-width: 1100px) { body.v-home:not(.sq-open) .home-dock { top: 14px; } }
/* ===== every search page on wide computers: detailed search in the header, shrinks to the short search on scroll ===== */
@media (min-width: 1100px) {
  body.dk-big:not(.sq-open) .search-dock .qpill, body.dk-big:not(.sq-open) .search-dock .qchips { display: none !important; }
  body.dk-big:not(.sq-open) .search-dock { position: fixed !important; top: 14px !important; left: 50%; translate: -50% 0; width: min(960px, calc(100vw - 2 * max(24px, (100vw - 1240px) / 2) - 2 * 150px)); max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 46; }
  body.dk-big:not(.sq-open):not(.v-home) .search-dock { width: min(880px, calc(100vw - 2 * max(24px, (100vw - 1240px) / 2) - 2 * 150px - 70px)); translate: calc(-50% - 35px) 0; }
  body.dk-big:not(.sq-open) .search-dock .qbar { display: contents !important; }
  body.dk-big:not(.sq-open) .search-dock .qfilt { position: absolute !important; left: calc(100% + 10px) !important; top: 6px !important; translate: none !important; width: 48px; height: 48px; margin: 0; }
  body.dk-big:not(.sq-open) .search-dock .q-types { position: fixed; top: 100px; left: 50%; translate: -50% 0; margin: 0 !important; z-index: 1; }
  body.dk-big:not(.sq-open) .search-dock .q-types { position: absolute; top: 76px; }
  body.dk-big:not(.sq-open):not(.v-home) .search-dock .q-types { left: calc(50% + 35px); }
  body.dk-big.dk-mini:not(.sq-open) .search-dock .q-types, body.dk-big.dk-mini:not(.sq-open) .search-dock .qfilt { opacity: 0; pointer-events: none; }
  body.dk-big:not(.sq-open):not(.v-home) #main > #results.wrap { padding-top: 150px; }
  body.dk-big:not(.v-home) .home-tabs { display: none; }
  body.dk-big:not(.sq-open) .search-dock #search { display: block !important; position: static; padding: 0; background: none; animation: none; }
  body.dk-big:not(.sq-open) .search-dock #search .sq-hd, body.dk-big:not(.sq-open) .search-dock #search .sq-types, body.dk-big:not(.sq-open) .search-dock #search .sq-pop, body.dk-big:not(.sq-open) .search-dock #search .sq-rec, body.dk-big:not(.sq-open) .search-dock #search > :not(form):not(.csearch) { display: none !important; }
  body.dk-big:not(.sq-open) .search-dock #search .search { display: grid !important; grid-template-columns: 1.3fr 1.3fr 1fr 1.1fr auto !important; align-items: center; padding: 4px !important; border-radius: 100px !important; box-shadow: 0 8px 24px -14px rgba(0,0,0,.25); background: var(--card); border: 1px solid var(--line); transform-origin: 50% 26px; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
  body.dk-big:not(.sq-open) .search-dock #search .search.s-disc { grid-template-columns: 2fr 1fr 1fr auto !important; }
  body.dk-big:not(.sq-open) .search-dock #search .search > * { grid-column: auto !important; }
  body.dk-big:not(.sq-open) .search-dock #search .fld { padding: 6px 22px !important; border: 0 !important; border-radius: 100px !important; background: none; position: relative; min-height: 0; }
  body.dk-big:not(.sq-open) .search-dock #search .fld:hover, body.dk-big:not(.sq-open) .search-dock #search .fld:focus-within { background: var(--card-2); }
  body.dk-big:not(.sq-open) .search-dock #search .fld + .fld::after { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
  body.dk-big:not(.sq-open) .search-dock #search .fld .fi, body.dk-big:not(.sq-open) .search-dock #search .swap { display: none !important; }
  body.dk-big:not(.sq-open) .search-dock #search .fld label, body.dk-big:not(.sq-open) .search-dock #search .fld .lbl { font-size: 10.5px; letter-spacing: .02em; text-transform: none; color: var(--ink); font-weight: 600; margin: 0; }
  body.dk-big:not(.sq-open) .search-dock #search .fld input, body.dk-big:not(.sq-open) .search-dock #search .when-btn, body.dk-big:not(.sq-open) .search-dock #search .pax-btn { font-size: 14px !important; height: 20px; line-height: 20px; color: var(--ink-2); }
  body.dk-big:not(.sq-open) .search-dock #search .go { height: 44px !important; margin: 0 !important; border-radius: 100px !important; padding: 0 20px !important; width: auto; font-size: 14px; background: var(--ink) !important; color: var(--bg) !important; border: 0 !important; }
  body.dk-big:not(.sq-open) .search-dock #search .ac { width: 400px !important; }
  body.dk-big.dk-mini:not(.sq-open) .search-dock #search .search, body.dk-big.dk-mini:not(.sq-open) .search-dock #search .csearch { opacity: 0; transform: scale(.45, .68); pointer-events: none; }
  body.dk-big.dk-mini:not(.sq-open) .search-dock #search .ac { display: none !important; }
  body.dk-big .dk-pill { transform: scale(1.6, 1.4); }
  body.dk-big.dk-mini .dk-pill { transform: none; transition: opacity .3s .05s, transform .35s cubic-bezier(.2,.8,.2,1); }
  body.dk-big .dk-bar { background: var(--bg) !important; }
}
@media (min-width: 1100px) {
  body.dk-big:not(.sq-open) .search-dock #search .csearch { display: block !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; transform-origin: 50% 26px; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
  body.dk-big:not(.sq-open) .search-dock #search .csearch .search.crow { margin-bottom: 6px; }
  body.dk-big:not(.sq-open) .search-dock #search .csearch .ctop { position: absolute; top: 132px; left: calc(50% + 35px); translate: -50% 0; margin: 0 !important; padding: 0 !important; z-index: 2; }
  body.dk-big.dk-mini:not(.sq-open) .search-dock #search .csearch .ctop { opacity: 0; pointer-events: none; }
  body.dk-big:not(.sq-open):not(.v-home):has(.csearch) #main > #results.wrap { padding-top: 196px; }
}
@media (min-width: 1100px) {
  body.dk-big:not(.sq-open) .search-dock #search .csearch .ctop { top: 146px; }
  body.dk-big:not(.sq-open) .search-dock #search .csearch .search.crow { grid-template-columns: 1.15fr 1.15fr 1.15fr 1.15fr auto auto !important; }
  body.dk-big:not(.sq-open) .search-dock #search .fld .fclr { right: 4px; }
}
@media (min-width: 1100px) {
  body.dk-big:not(.sq-open) .search-dock #search, body.dk-big:not(.sq-open) .search-dock #search .csearch { position: static !important; }
  body.dk-big:not(.sq-open) .search-dock #search .csearch .ctop { top: 72px !important; left: 10px !important; translate: none !important; }
  body.dk-big:not(.sq-open):has(.csearch) .search-dock .q-types { top: 124px !important; }
}
@media (min-width: 900px) { .wscrim { background: transparent !important; } .wpop { max-height: calc(100vh - 110px); overflow-y: auto; } }
@media (min-width: 1100px) {
  /* the faded detailed search must not block clicks on the short search */
  body.dk-big.dk-mini:not(.sq-open) .search-dock { pointer-events: none; }
  body.dk-big.dk-mini:not(.sq-open) .search-dock .q-types, body.dk-big.dk-mini:not(.sq-open) .search-dock .csearch .ctop { visibility: hidden; }
  /* opened from the short search: a soft shade under the header */
  body.dk-force::after { content: ""; position: fixed; inset: 88px 0 0; background: rgba(0,0,0,.25); z-index: 42; animation: sqin .25s ease; }
  body.dk-force .dk-bar { box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
  body.dk-force:not(.sq-open) .search-dock .q-types, body.dk-force:not(.sq-open) .search-dock .qfilt { display: none !important; }
}
@media (min-width: 1100px) { body.dk-force.dk-big:not(.sq-open) #main > .wrap.search-dock .q-types, body.dk-force.dk-big:not(.sq-open) #main > .wrap.search-dock .qfilt, body.dk-force .search-dock .csearch .ctop { display: none !important; } }
/* home rows: bigger cards, five across on wide screens */
@media (min-width: 900px) { .hrow-s { grid-auto-columns: calc((100% - 3 * 18px) / 4) !important; gap: 18px !important; } .hc-b b { font-size: 15.5px; } .hc-b small, .hc-b .tnum { font-size: 14px; } .hc .hc-chip { font-size: 11px; } }
@media (min-width: 1280px) { .hrow-s { grid-auto-columns: calc((100% - 4 * 18px) / 5) !important; } }
/* home cards: a white frame fades in around the card on hover */
@media (min-width: 900px) and (hover: hover) {
  .hrow-s { padding: 10px 10px 14px !important; margin: -10px -10px -10px !important; scroll-padding: 0 10px; }
  .hc { position: relative; z-index: 0; }
  .hc::before { content: ""; position: absolute; inset: -9px -9px -11px; z-index: -1; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(0,0,0,.25); opacity: 0; transform: scale(.97); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
  .hc:hover::before { opacity: 1; transform: none; }
  .hc .hc-ph img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .hc:hover .hc-ph img { transform: scale(1.03); }
}
@media (min-width: 900px) and (hover: hover) { .hrow-s { padding: 12px 12px 16px !important; margin: -12px -12px -12px !important; } .hc::before { inset: -8px -8px -10px; } }
@media (min-width: 900px) and (hover: hover) { .hc::before { box-shadow: none !important; } }
.hc-px { display: inline-flex; align-items: center; gap: 2px; color: inherit; white-space: nowrap; vertical-align: -1px; }
.hc-px svg { width: .9em; height: .9em; }
.hc-b small .hc-px { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; letter-spacing: inherit; }
/* flight-type pages on computers: four cards per row, shorter photos */
@media (min-width: 1100px) {
  #results .list.grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px; }
  #results .list.grid .fc-ph { aspect-ratio: 16 / 10 !important; }
}
@media (min-width: 900px) and (max-width: 1099px) { #results .list.grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #results .list.grid .fc-ph { aspect-ratio: 16 / 10 !important; } }
@media (min-width: 1100px) { #results .list.grid .fc-pt .fc-route { font-size: 17px; } }
/* detailed search: the clear (×) button sits at the right edge of its field, never over the text */
@media (min-width: 900px) {
  body.dk-big:not(.sq-open) .search-dock #search .fld[data-ap] .clr, body.v-home:not(.sq-open) .home-dock #search .fld[data-ap] .clr { right: 10px !important; left: auto !important; top: 50% !important; translate: 0 -50%; width: 24px; height: 24px; }
  body.dk-big:not(.sq-open) .search-dock #search .fld[data-ap] input, body.v-home:not(.sq-open) .home-dock #search .fld[data-ap] input { padding-right: 26px !important; }
}
/* map results on computers: the short search stays in the header, like Airbnb */
@media (min-width: 900px) {
  body:has(#main.ub-mode) .dk-pill { display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  body:has(#main.ub-mode) .dk-bar { border-bottom: 1px solid var(--line); }
  #main.ub-mode > #results.wrap { padding-top: 112px !important; }
  #main.ub-mode .ub-map { top: 112px; height: calc(100vh - 136px); }
}
@media (min-width: 900px) { #main.ub-mode .ub-top .ub-loc { visibility: hidden; } }
/* map results on computers: a back button replaces the logo in the header */
.dk-back { display: none; }
@media (min-width: 900px) {
  body:has(#main.ub-mode) .dk-logo { display: none !important; }
  body:has(#main.ub-mode):not(.sq-open):not(:has(#ov)) .dk-back { display: grid; place-items: center; position: fixed; top: 21px; left: 24px; z-index: 44; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; padding: 0; }
  .dk-back svg { width: 20px; height: 20px; }
  .dk-back:hover { box-shadow: 0 4px 14px -6px rgba(0,0,0,.25); }
  #main.ub-mode .ub-top .ub-ic[data-qhome] { visibility: hidden; }
}
/* computers: every window floats in the middle with space around it */
@media (min-width: 900px) {
  .ov { padding: 24px !important; place-items: center !important; }
  .dlg, .dlg:has(#bform), .dlg:has(.issued) { height: auto !important; max-height: calc(100dvh - 48px) !important; border-radius: 28px !important; border: 1px solid var(--line) !important; }
  .dlg:has(#bform) .dlg-hd, .dlg:has(.issued) .dlg-hd { padding-top: 18px !important; }
  .dlg-hd { border-radius: 28px 28px 0 0; }
}
/* computers: the ticket stays fully in view beside the form while the form scrolls */
@media (min-width: 900px) {
  .dlg:has(#bform) #bform { align-items: start; }
  .dlg:has(#bform) .sum { position: sticky !important; top: 102px; align-self: start; }
  .dlg:has(#bform) .sum-pass { padding: 16px 20px 2px; }
  .dlg:has(#bform) .sum-pass .sp-route { margin: 6px 0 2px; }
  .dlg:has(#bform) .sum-pass .sp-fields { gap: 8px 16px; margin-top: 10px; }
  .dlg:has(#bform) .sum-pass .sp-tear { margin-top: 12px; }
  .dlg:has(#bform) .sum .lines { padding-top: 4px; }
  .dlg:has(#bform) .sum .tot { margin-top: 6px; padding-top: 10px; }
  .dlg:has(#bform) .sum .book.wide { margin-top: 10px; }
  .dlg:has(#bform) .sum .fine { margin: 8px 0 0; font-size: 12px; }
  .dlg:has(#bform) .sum .sp-bc .bc { height: 40px; margin: 4px 0 6px; }
  .dlg:has(#bform) > :not(.dlg-hd) { }
}
@media (min-width: 900px) and (max-height: 820px) {
  .dlg:has(#bform) .sum-pass .sp-route b, .dlg:has(#bform) .sum-pass .sp-route .code { font-size: 30px; }
  .dlg:has(#bform) .sum .sp-tear2, .dlg:has(#bform) .sum .sp-bc { display: none; }
}
@media (min-width: 900px) { .dlg:has(#bform) #bform.dlg-bd { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr) !important; gap: 36px; } }
/* ===== computer footer, same as the landing page: legal text, links, socials and a giant SUMMIT ===== */
.sjf { display: none; }
@media (min-width: 900px) {
  .sjf { display: block; position: relative; overflow: hidden; margin-top: 80px; padding-top: 40px; }
  body:has(#main.ub-mode) .sjf, body.v-acc .sjf { display: none; }
  .sjf-in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
  .sjf-grid { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .sjf-logo { display: inline-flex; color: var(--ink); text-decoration: none; opacity: .6; }
  .sjf-logo .hl-logo { font-size: 34px; }
  .sjf-legal { margin: 16px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); max-width: 600px; text-wrap: balance; }
  .sjf-copy { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
  .sjf h4 { margin: 0 0 14px; font-size: 14px; font-weight: 500; color: var(--muted); }
  .sjf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .sjf ul a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
  .sjf ul a:hover { color: var(--ink); }
  .sjf-soc { display: flex; gap: 10px; margin-top: 14px; }
  .sjf-soc a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #8a8a8a; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 14px -6px rgba(0,0,0,.14); transition: color .2s; }
  .sjf-soc a:hover { color: var(--ink); }
  .sjf-soc svg { width: 18px; height: 18px; }
  html[data-sj-theme="dark"] .sjf-soc a { background: #1c1c1c; }
  .sjf-giant { position: relative; z-index: 0; margin: -6vw 0 0; text-align: center; white-space: nowrap; user-select: none; font-weight: 900; font-size: 27.5vw; line-height: .72; letter-spacing: -.065em; padding-right: .065em;
    color: transparent; background: linear-gradient(180deg, var(--bg) 6%, #cdcdcd 78%, #c4c4c4 100%); -webkit-background-clip: text; background-clip: text;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
  html[data-sj-theme="dark"] .sjf-giant { background: linear-gradient(180deg, var(--bg) 6%, #2b2b2b 78%, #303030 100%); -webkit-background-clip: text; background-clip: text; }
  body { padding-bottom: 0 !important; }
}
@media (min-width: 900px) { .sjf-in { max-width: none; padding: 0 max(24px, calc((100vw - 1240px) / 2)); } .sjf ul a { font-size: 14.5px; } }
/* match the landing page footer sizes exactly */
@media (min-width: 900px) {
  .sjf-copy { font-size: 11.5px; }
  .sjf h4 { font-size: 12.5px; font-weight: 600; color: #474747; }
  .sjf ul { gap: 6.4px; }
  .sjf ul a { font-size: 13px; color: var(--muted); }
  .sjf-giant { font-size: 24.95vw; }
}
/* footer is always dark, like dark mode */
@media (min-width: 900px) {
  .sjf { background: #0a0a0a; color: #f2f2f2; padding-top: 64px; margin-top: 80px; }
  .sjf-logo { color: #f2f2f2; opacity: .85; }
  .sjf-legal, .sjf-copy { color: #8a8a8a; }
  .sjf h4 { color: #bdbdbd; }
  .sjf ul a { color: #8a8a8a; }
  .sjf ul a:hover { color: #f2f2f2; }
  .sjf-soc a { background: #1c1c1c !important; color: #9a9a9a; box-shadow: none; }
  .sjf-soc a:hover { color: #f2f2f2; }
  .sjf-giant, html[data-sj-theme="dark"] .sjf-giant { background: linear-gradient(180deg, #0a0a0a 6%, #2b2b2b 78%, #303030 100%); -webkit-background-clip: text; background-clip: text; -webkit-mask-image: none; mask-image: none; }
}
/* soft blur over the bottom of the footer, like the end of the landing page */
@media (min-width: 900px) {
  .sjf::before, .sjf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
  .sjf::before { height: 30%; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%); mask-image: linear-gradient(to bottom, transparent, #000 60%); }
  .sjf::after { height: 18%; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%); mask-image: linear-gradient(to bottom, transparent, #000 70%); }
}
@media (min-width: 900px) { .sjf { padding-top: 110px; } .sjf-giant { margin-top: -11vw; } }
@media (min-width: 900px) { .sjf-in { z-index: 3; } }
@media (min-width: 900px) { .sjf { border-radius: 40px 40px 0 0; } }
/* the light page curves into the black footer (rounded bottom of the light block, not the footer) */
@media (min-width: 900px) {
  .sjf { border-radius: 0 !important; margin-top: -40px !important; padding-top: 150px !important; }
  body:not(.v-acc):not(:has(#main.ub-mode)) #main { position: relative; z-index: 2; background: var(--bg); border-radius: 0 0 40px 40px; padding-bottom: 80px; }
}
@media (min-width: 900px) {
  body:not(.v-acc):not(:has(#main.ub-mode)) #main { padding-bottom: 140px; }
  .sjf { padding-top: 84px !important; }
}
/* rounded light block without lifting #main above the header (that hid the search) */
@media (min-width: 900px) {
  body:not(.v-acc):not(:has(#main.ub-mode)) #main { position: static !important; z-index: auto !important; box-shadow: 0 40px 0 #0a0a0a; }
  .sjf { margin-top: 0 !important; padding-top: 44px !important; }
}
.hc-dest .hc-ph img { object-fit: cover; } .hc-dest .hc-b .tnum { font-weight: 500; color: var(--muted); }
/* ===== list view on computers: compact rows — photo · trip details · price and actions ===== */
@media (min-width: 900px) {
  #results .list:not(.grid) { max-width: none !important; margin: 0 !important; display: flex; flex-direction: column; gap: 14px; }
  #results .list:not(.grid) .fc { display: grid !important; grid-template-columns: 230px minmax(0, 1fr) !important; gap: 0 26px; align-items: stretch; padding: 10px !important; border-radius: 24px; transition: border-color .2s; }
  #results .list:not(.grid) .fc:hover { border-color: var(--line-2); }
  #results .list:not(.grid) .fc-ph { width: 230px; height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3 !important; border-radius: 16px !important; }
  #results .list:not(.grid) .fc-ph .fc-chip { top: 10px; left: 10px; font-size: 11.5px; padding: 5px 10px; }
  #results .list:not(.grid) .fc-ph .heart { top: 8px; right: 8px; width: 32px; height: 32px; }
  #results .list:not(.grid) .fc-b { display: grid !important; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: auto auto 1fr; column-gap: 28px; padding: 10px 6px 10px 0 !important; min-width: 0; }
  #results .list:not(.grid) .fc-b > :not(.fc-foot) { grid-column: 1; }
  #results .list:not(.grid) .fc-when { font-size: 13.5px; margin: 0 0 8px; }
  #results .list:not(.grid) .fc-rt { display: flex !important; align-items: flex-start; justify-content: flex-start; gap: 18px; margin: 0; }
  #results .list:not(.grid) .fc-pt, #results .list:not(.grid) .fc-pt.r { text-align: left !important; align-items: flex-start; min-width: 0; }
  #results .list:not(.grid) .fc-pt .fc-route, #results .list:not(.grid) .fc-route { font-size: 22px !important; }
  #results .list:not(.grid) .fc-pt small { font-size: 13px; }
  #results .list:not(.grid) .fc-arr { flex: none; width: 54px; margin-top: 10px; }
  #results .list:not(.grid) .fc-meta { align-self: end; margin: 14px 0 0; font-size: 14px; }
  #results .list:not(.grid) .fc-foot { grid-column: 2; grid-row: 1 / -1; display: flex !important; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; margin: 0 !important; padding: 4px 0 4px 28px !important; border-left: 1px solid var(--line); border-top: 0 !important; }
  #results .list:not(.grid) .fc-price { text-align: left; margin: 0 0 6px; }
  #results .list:not(.grid) .fc-price b { font-size: 28px; }
  #results .list:not(.grid) .fc-foot .book { width: 100%; justify-content: center; order: 2; }
  #results .list:not(.grid) .fc-foot .fc-more { order: 3; align-self: center; padding: 4px; }
}
@media (min-width: 900px) {
  #results .list:not(.grid) .fc { grid-template-columns: 210px minmax(0, 1fr) !important; }
  #results .list:not(.grid) .fc-ph { width: 210px; aspect-ratio: 16 / 11 !important; }
  #results .list:not(.grid) .fc-price small { display: block !important; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  #results .list:not(.grid) .fc-foot .fc-more { display: inline-flex !important; font-size: 13.5px; color: var(--ink-2); }
  #results .list:not(.grid) .fc-foot .book { height: 44px; }
  #results .list:not(.grid) .fc-b { padding: 8px 6px 8px 0 !important; }
}
/* whole card opens the flight details, so no separate "View" link */
#results .list .fc[data-id] { cursor: pointer; }
#results .list .fc-foot .fc-more { display: none !important; }
html body #results .list .fc .fc-foot .fc-more, html body #results .list:not(.grid) .fc .fc-foot .fc-more { display: none !important; }
/* flight time sits under the plane between the two cities */
.fc-arr { position: relative; }
.fc-dur { position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
/* "All" page: a muted card for each type with nothing on this route */
.la-none { margin-top: 14px; }
.la-nrow { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: 20px; background: transparent; color: var(--muted); }
.la-nrow > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.la-nrow b { color: var(--ink-2); font-size: 16px; font-weight: 600; }
.la-nrow small { font-size: 13.5px; }
.la-nic { width: 42px; height: 42px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; color: var(--muted); flex: none; }
.la-nic svg { width: 19px; height: 19px; }
.la-nrow .tb { flex: none; }
.la-zero { display: inline-flex; align-items: center; margin-left: 8px; padding: 3px 10px; border-radius: 100px; background: var(--card-2); border: 1px solid var(--line); font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); vertical-align: 2px; }
.la-nrow .la-z { font-size: 14px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 899px) {
  .la-nrow { padding: 14px 16px; gap: 12px; }
  .la-nrow .tb { width: 44px; height: 44px; padding: 0 !important; border-radius: 50%; justify-content: center; flex: none; }
  .la-nrow .tb span { display: none; }
  .la-nrow .tb svg { width: 19px; height: 19px; margin: 0; }
}
/* phone: once the search scrolls away, the short search stays pinned at the top */
@media (max-width: 899px) {
  .dk-bar { display: flex !important; position: fixed; top: 0; left: 0; right: 0; z-index: 43; justify-content: center; align-items: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; background: var(--bg); border-bottom: 1px solid var(--line);
    transform: translateY(-110%); transition: transform .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
  body.dk-mini .dk-bar { transform: none; pointer-events: auto; }
  body.sq-open .dk-bar, body:has(#ov) .dk-bar, body:has(#main.ub-mode) .dk-bar, body.v-acc .dk-bar { display: none !important; }
  .dk-bar .dk-types, .dk-bar .dk-r { display: none !important; }
  .dk-pill { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; height: 48px; padding: 0 16px 0 5px; border: 1px solid var(--line); border-radius: 100px; background: var(--card); color: var(--ink); font: inherit; opacity: 1; visibility: visible; transform: none; box-shadow: 0 6px 18px -12px rgba(0,0,0,.25); }
  .dkp-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; flex: none; }
  .dkp-ic svg { width: 16px; height: 16px; }
  .dkp-tx { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; }
  .dkp-tx b { overflow: hidden; text-overflow: ellipsis; }
  .dkp-tx i { width: 1px; height: 18px; background: var(--line); flex: none; }
  .dkp-tx span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
}
/* phone list: charter price and button never spill out of the card */
@media (max-width: 899px) {
  #results .list:not(.grid) .fc-foot { flex-wrap: wrap; gap: 8px; min-width: 0; }
  #results .list:not(.grid) .fc-price { min-width: 0; }
  #results .list:not(.grid) .fc-price b { font-size: 19px; white-space: nowrap; }
  #results .list:not(.grid) .fc-foot .book, #results .list:not(.grid) .fc-foot .tb { flex: none; padding: 9px 14px !important; font-size: 13.5px; margin-left: auto; }
}
.kb-done { position: fixed; right: 12px; top: auto; bottom: auto; z-index: 200; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 100px; background: var(--ink); color: var(--bg); font: inherit; font-size: 15px; font-weight: 600; box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); }
.kb-done[hidden] { display: none; }
.kb-done svg { width: 17px; height: 17px; }
@media (min-width: 900px) { .kb-done { display: none !important; } }
/* date and passengers are already in the search, so the map sheet doesn't repeat them */
.ub-head > b { display: none !important; }
.ub-head:not(:has(.ub-n)) { display: none !important; }
.ub-head:has(.ub-n) { justify-content: flex-end; }
/* phone bottom bar: stretches almost edge to edge, like Instagram and Telegram */
@media (max-width: 899px) {
  .bnav { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .bn-in { width: calc(100% - 28px) !important; max-width: 520px !important; margin: 0 auto !important; display: flex !important; justify-content: space-between; padding: 6px !important; }
  .bn-in button { flex: 1 1 0; min-width: 0; height: 52px !important; padding: 0 10px !important; justify-content: center; }
  .bn-in button svg { width: 22px !important; height: 22px !important; }
}
@media (max-width: 899px) { .bn-in button[aria-current="page"] { flex: 0 0 auto; padding: 0 20px !important; } .bn-in button span { overflow: visible !important; } }
@media (max-width: 899px) { .bn-in { padding: 4px !important; } .bn-in button { height: 44px !important; } .bn-pill { top: 4px !important; bottom: 4px !important; } }
/* bottom bar: more solid glass so icons stay readable over photos */
.bn-in { background: rgba(255, 255, 255, .72) !important; backdrop-filter: blur(18px) saturate(1.4) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; }
html[data-sj-theme="dark"] .bn-in { background: rgba(22, 22, 22, .74) !important; }
html[data-sj-theme="dark"] .bn-in button { color: #e6e6e6 !important; }
html[data-sj-theme="dark"] .bn-in button[aria-current="page"] { color: #fff !important; }
.bn-in button { color: #2a2a2a !important; }
.bn-in button[aria-current="page"] { color: #111 !important; }
@media (max-width: 899px) {
  .bn-in { transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  body.bn-small .bn-in { transform: scale(.84); }
}
@media (max-width: 899px) { .bn-in { transition: transform .7s cubic-bezier(.22,.61,.36,1) !important; } }
/* phone list pages: a round back button to the left of the search */
.qback { display: none; }
@media (max-width: 899px) {
  body:not(.v-home) .search-dock .qbar .qback { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0; box-shadow: 0 6px 18px -12px rgba(0,0,0,.25); }
  .qback svg { width: 21px; height: 21px; }
  body:not(.v-home) .search-dock .qbar { gap: 8px; }
  body:not(.v-home) .search-dock .qbar .qpill { min-width: 0; flex: 1; }
}
.dk-bk { display: none; }
@media (max-width: 899px) {
  body:not(.v-home) .dk-bar .dk-bk { display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 0; box-shadow: 0 6px 18px -12px rgba(0,0,0,.25); }
  .dk-bk svg { width: 20px; height: 20px; }
  .dk-bar .dk-pill { flex: 1; min-width: 0; }
}
.fc-meta .pxi { color: inherit; font-weight: inherit; margin-left: 2px; }
.fc-meta .pxi { display: inline; white-space: nowrap; }
.fc-meta .pxi svg { display: inline-block; vertical-align: -2px; margin-right: 2px; }
.fc-price .fc-px { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; vertical-align: 2px; } .fc-price .fc-px .pxi { color: inherit; font-weight: inherit; }
.fc-price .fc-px { font-size: 13px !important; vertical-align: 3px; }
.fc-price .fc-px .pxi { display: inline-flex !important; align-items: center; gap: 3px; color: var(--muted) !important; line-height: 1; }
.fc-price .fc-px .pxi svg { width: 13px !important; height: 13px !important; margin: 0 !important; vertical-align: 0 !important; display: block !important; fill: currentColor; color: inherit; }
.fc-price .fc-px { display: inline-flex !important; align-items: center; vertical-align: middle !important; position: relative; top: -2px; }
.fc-price .fc-px .pxi { gap: 2px; color: #5a5a5a !important; font-size: 13px; }
.fc-price .fc-px .pxi svg { width: 15px !important; height: 15px !important; }
html[data-sj-theme="dark"] .fc-price .fc-px .pxi { color: #a8a8a8 !important; }
.fc-price .fc-px .pxi svg { transform: translateY(-1.5px); }
/* passenger count beside the price: plain text like the jet name, sitting on the price's baseline */
html body .fc-price .fc-px { display: inline !important; position: static !important; top: 0 !important; vertical-align: baseline !important; margin-left: 8px; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0; }
html body .fc-price .fc-px .pxi { display: inline !important; gap: 0; font-size: inherit; font-weight: 400 !important; color: var(--muted) !important; line-height: 1; white-space: nowrap; }
html body .fc-price .fc-px .pxi svg { display: inline-block !important; width: .78em !important; height: .78em !important; margin: 0 3px 0 0 !important; vertical-align: 0 !important; transform: none !important; }
html body .fc-price .fc-px .pxi svg { width: 1.05em !important; height: 1.05em !important; vertical-align: -.13em !important; margin-right: 2px !important; }
/* request-sent buttons: same rounded pill shape and same lettering */
.done .acts .book, .done .acts .tb { border-radius: 100px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 600 !important; height: 50px; padding: 0 24px !important; display: inline-flex; align-items: center; justify-content: center; }
/* result count in a circle before the title */
.rh2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rh-n { flex: none; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 100px; display: inline-grid; place-items: center; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
@media (max-width: 899px) { .rh-n { min-width: 34px; height: 34px; font-size: 15px; } .rh2 { gap: 10px; } }
.dkp-tx .pxi { color: inherit; font-weight: inherit; } .dkp-tx .pxi svg { width: .95em; height: .95em; vertical-align: -.12em; margin-right: 2px; display: inline-block; }
.empty .book[data-setpax] { border-radius: 100px; text-transform: none; letter-spacing: 0; font-size: 15px; padding: 14px 24px; }
/* phone map results, like Uber: the map stays fixed behind and the list sheet slides up over it while scrolling */
@media (max-width: 899px) {
  #main.ub-mode .ub-map { position: fixed !important; top: 0; left: 0; right: 0; height: 46vh !important; min-height: 280px; margin: 0 !important; z-index: 0; }
  #main.ub-mode > #results { padding-top: calc(46vh - 22px) !important; position: relative; }
  #main.ub-mode .ub-sheet { position: relative; z-index: 2; margin-top: 0 !important; min-height: calc(100vh - 60px); box-shadow: 0 -10px 30px -14px rgba(0,0,0,.35); }
  #main.ub-mode .ub-bar { z-index: 6; }
}
@media (max-width: 899px) {
  #main.ub-mode .ub-grab { position: sticky; top: 96px; z-index: 5; display: block; height: 22px; margin: -10px 0 0; background: var(--card); border-radius: 24px 24px 0 0; }
  #main.ub-mode .ub-grab::after { content: ""; position: absolute; left: 50%; top: 9px; translate: -50% 0; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); }
  #main.ub-mode .ub-sheet > .ub-types { position: sticky; top: 118px; z-index: 5; box-shadow: 0 0 0 16px var(--card); }
  #main.ub-mode .ub-sheet { padding-top: 10px; }
  body.ub-docked #main.ub-mode .ub-map { z-index: 4; clip-path: inset(0 0 calc(100% - 97px) 0); }
}
@media (max-width: 899px) { #main.ub-mode .ub-sheet > .ub-grab { width: auto !important; height: 24px !important; margin: -10px 0 0 !important; border-radius: 24px 24px 0 0 !important; background: var(--card) !important; } #main.ub-mode .ub-sheet > .ub-types { top: 119px; } }
/* docked sheet keeps its rounded top corners: map sits between the list and the sheet header */
@media (max-width: 899px) {
  #main.ub-mode .ub-sheet { z-index: auto !important; }
  body.ub-docked #main.ub-mode .ub-map { z-index: 4; clip-path: inset(0 0 calc(100% - 121px) 0) !important; }
  #main.ub-mode .ub-sheet > .ub-grab, #main.ub-mode .ub-sheet > .ub-types { z-index: 5; }
}
@media (max-width: 899px) { body.ub-docked #main.ub-mode .ub-map { clip-path: inset(0 0 calc(100% - 118px) 0) !important; } #main.ub-mode .ub-sheet > .ub-types { box-shadow: 0 0 0 40px var(--card); } }
.empty .book[data-ualert] { border-radius: 100px; text-transform: none; letter-spacing: 0; font-size: 15px; padding: 14px 24px; display: inline-flex; align-items: center; gap: 8px; } .empty .book[data-ualert] svg { width: 17px; height: 17px; }
@media (max-width: 899px) {
  /* the sticky tabs' backing only covers above them, so it never cuts the first card or section title */
  #main.ub-mode .ub-sheet > .ub-types { box-shadow: 0 -22px 0 16px var(--card) !important; margin-top: 0 !important; margin-bottom: 14px !important; }
  #main.ub-mode .ub-sheet > .ub-grab { height: 18px !important; }
  #main.ub-mode .ub-sheet > .ub-types { top: 113px !important; }
}
@media (max-width: 899px) { #main.ub-mode .ub-sheet > .ub-types { box-shadow: 0 -22px 0 16px var(--card), 0 -6px 0 16px var(--card) !important; } }
.ub-head.ub-th { display: block !important; border: 0 !important; padding: 2px 16px 6px !important; }
.ub-head.ub-th h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.ub-head.ub-th h4 svg { width: 20px; height: 20px; }
.ub-head.ub-th h4 em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--card-2); border-radius: 100px; min-width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0 8px; }
.ub-head.ub-th h4 { font-size: 17px; } .ub-head.ub-th h4 em { min-width: 26px; height: 26px; font-size: 13px; }
.ub-head.ub-th h4 > svg { display: none; }
/* visible grab handle at the top of the map sheet, replacing the empty gap */
@media (max-width: 899px) {
  #main.ub-mode .ub-sheet { padding-top: 0 !important; }
  #main.ub-mode .ub-sheet > .ub-grab { height: 26px !important; margin: 0 !important; }
  #main.ub-mode .ub-sheet > .ub-grab::after { top: 10px !important; width: 44px !important; height: 5px !important; background: #c9c9c9 !important; }
  html[data-sj-theme="dark"] #main.ub-mode .ub-sheet > .ub-grab::after { background: #4a4a4a !important; }
  #main.ub-mode .ub-sheet > .ub-types { top: 121px !important; margin-top: 2px !important; }
}
@media (max-width: 899px) { #main.ub-mode .ub-sheet > .ub-grab { z-index: 6 !important; background: transparent !important; } #main.ub-mode .ub-sheet > .ub-types { box-shadow: 0 -26px 0 16px var(--card), 0 -6px 0 16px var(--card) !important; } }
@media (max-width: 899px) {
  #main.ub-mode .ub-sheet > .ub-types { box-shadow: none !important; }
  body.ub-docked #main.ub-mode .ub-sheet > .ub-types { box-shadow: 0 -12px 0 16px var(--card), 0 -6px 0 16px var(--card) !important; }
  #main.ub-mode .ub-sheet > .ub-grab { height: 22px !important; }
  #main.ub-mode .ub-sheet > .ub-grab::after { top: 8px !important; }
  #main.ub-mode .ub-sheet > .ub-types { top: 117px !important; }
}
/* zoomable results map */
.ub-map .ub-svg { touch-action: none; cursor: grab; }
.ub-map .ub-svg:active { cursor: grabbing; }
.ub-map .ub-svg path, .ub-map .ub-svg circle { vector-effect: non-scaling-stroke; }
.ub-bar .ub-cal[data-details] { display: none !important; } .ub-bar .ub-go { flex: 1; }

/* booking summary: plain price card, no ticket (ticket is revealed after request) */
.sum-plain { padding: 18px 22px 2px !important; }
.sum-plain .lines { padding-top: 0 !important; }
.sum:has(.sum-plain) { padding-bottom: 18px; }
.sum:has(.sum-plain) > .fine { margin-bottom: 0; }

/* bookings tabs: sticky header + slimmer */
.bk-stick { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); padding: 8px 0 10px; margin: -8px 0 6px; }
.bk-stick .acc-seg { display: flex; margin: 0; }
.bk-stick .acc-seg button { flex: 1; padding: 6px; min-height: 0; height: 38px; line-height: 1; }
@media (min-width: 900px) { .bk-stick { top: 0; padding: 24px 0 12px; margin: -24px 0 6px; } }

/* pax: next to "Entire aircraft" on cards, next to price in list layout */
html body .fc-price b .fc-px { display: none !important; }
.fc-px2 { display: inline-flex; align-items: center; margin-left: 8px; vertical-align: middle; }
.fc-px2 .pxi { display: inline-flex !important; align-items: center; gap: 2px; color: inherit !important; font-weight: 400; line-height: 1; }
.fc-px2 .pxi svg { width: 13px !important; height: 13px !important; margin: 0 !important; display: block; fill: currentColor; transform: translateY(-1px); }
html body .list:not(.grid) .fc-price b .fc-px { display: inline !important; }
html body .list:not(.grid) .fc-px2 { display: none; }
/* list layout: keep price + pax + button on one line */
html body .list:not(.grid) .fc-foot { flex-wrap: nowrap !important; gap: 8px; }
html body .list:not(.grid) .fc-price, html body .list:not(.grid) .fc-price b { white-space: nowrap; min-width: 0; }
html body .list:not(.grid) .fc-foot > :last-child { flex-shrink: 0; margin-left: auto; }
/* more-ways rows never overflow the card */
.xc-list { grid-template-columns: minmax(0, 1fr); }
.xc-row { min-width: 0; }
.xc-tx { min-width: 0; flex: 1; }
.xc-tx small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* more-ways card at the end of the phone map lists */
.ub-x { padding: 8px 16px 24px; }
.ub-x .xcard { background: var(--card-2, var(--card)); }

/* draggable sheet handle on phone map results */
@media (max-width: 899px) {
  #main.ub-mode .ub-sheet > .ub-grab { touch-action: none; cursor: grab; }
  #main.ub-mode .ub-sheet > .ub-grab::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -6px; }
}
@media (max-width: 899px) {
  body #main.ub-mode > #results { padding-top: calc(46vh - 22px + var(--ub-low, 0px)) !important; }
  body #main.ub-mode .ub-map { height: calc(46vh + var(--ub-low, 0px) + var(--ub-mapx, 0px)) !important; }
  body.ub-anim #main.ub-mode > #results { transition: padding-top .38s cubic-bezier(.2,.8,.2,1); }
  body.ub-anim #main.ub-mode .ub-map { transition: height .38s cubic-bezier(.2,.8,.2,1); }
}
@media (max-width: 899px) {
  body.ub-shifted #main.ub-mode .ub-sheet { transform: translateY(var(--ub-shift, 0px)); }
  body.ub-anim #main.ub-mode .ub-sheet { transition: transform .38s cubic-bezier(.2,.8,.2,1); }
  body.ub-shifted #main.ub-mode .ub-map { clip-path: none !important; z-index: 0 !important; }
}
@media (max-width: 899px) { body.ub-shifted #main.ub-mode .ub-sheet { clip-path: inset(var(--ub-clip, 0px) 0 -200px 0 round 24px 24px 0 0); } }
@media (max-width: 899px) { body.ub-shifted #main.ub-mode .ub-sheet > .ub-grab { background: var(--card) !important; } }
.done.pr.no-hd { padding-top: calc(36px + env(safe-area-inset-top, 0px)) !important; }
@media (min-width: 900px) { .dlg:has(#bform) #bk-sum > .fine { margin-left: 20px !important; margin-right: 20px !important; } }
/* computer list layout: pax sits next to "Entire aircraft" (phones keep it beside the price) */
@media (min-width: 900px) {
  html body .list:not(.grid) .fc-price b .fc-px { display: none !important; }
  html body .list:not(.grid) .fc-px2 { display: inline-flex !important; }
}
/* account home on computers: compact, two-column, breathing room at the bottom */
@media (min-width: 900px) {
  .ah { max-width: 1000px !important; margin: 0 auto; padding: 36px 24px 120px !important; }
  .ah .ah-top { align-items: center; margin-bottom: 28px; }
  .ah .ah-top h1 { font-size: 44px; }
  .ah .ah-top .av.lg { width: 88px; height: 88px; font-size: 28px; }
  .ah .ah-tiles { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
  .ah .ah-tile { flex-direction: column; align-items: flex-start; justify-content: space-between; height: 118px; padding: 18px 20px; border-radius: 20px; font-size: 16px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
  .ah .ah-tile svg { width: 26px; height: 26px; }
  .ah .ah-tile:hover { box-shadow: 0 0 0 1.5px var(--ink); }
  .ah .ah-list { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 0; }
  .ah .ah-row { padding: 18px 20px; border-radius: 20px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04); cursor: pointer; transition: box-shadow .15s; }
  .ah .ah-row:hover { box-shadow: 0 0 0 1.5px var(--ink); }
  .ah .ah-row[data-logout] { grid-column: 1 / -1; justify-self: start; background: none; box-shadow: none; padding: 12px 4px; margin-top: 8px; color: var(--muted); }
  .ah .ah-row[data-logout]:hover { color: var(--ink); box-shadow: none; }
}
/* account page on computers: a back button in place of the logo */
@media (min-width: 900px) {
  body.v-acc .dk-logo { display: none !important; }
  body.v-acc .ah-back { display: none !important; }
  body.v-acc:not(.sq-open):not(:has(#ov)) .dk-back { display: grid; place-items: center; position: fixed; top: 21px; left: max(24px, calc((100vw - 1240px) / 2)); z-index: 44; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; padding: 0; }
}
/* confirmation on computers: text and buttons on the left, ticket on the right, all in one screen */
@media (min-width: 900px) {
  .dlg:has(.done.pr) { width: min(980px, 100%) !important; }
  .done.pr.no-hd { display: grid; grid-template-columns: 1fr 400px; grid-template-areas: "h pr" "p pr" "a pr"; grid-template-rows: auto auto 1fr; column-gap: 48px; align-items: start; text-align: left; padding: 40px 48px 28px !important; }
  .done.pr.no-hd > h2 { grid-area: h; align-self: end; margin-top: 120px; justify-content: flex-start; }
  .done.pr.no-hd > p { grid-area: p; margin: 4px 0 0; max-width: 360px; }
  .done.pr.no-hd > .printer { grid-area: pr; margin: 0; max-width: 400px; width: 100%; }
  .done.pr.no-hd > .acts { grid-area: a; justify-content: flex-start; margin-top: 26px; flex-wrap: wrap; }
  .done.pr.no-hd .td-map .bk-map { height: 140px; }
}

/* ---------- account on computers: one clean side panel ---------- */
.dside { display: none; }
@media (min-width: 900px) {
  .acc { grid-template-columns: 272px minmax(0, 1fr) !important; gap: 48px; padding-block: 28px 100px !important; }
  #main > .wrap.acc { max-width: 1180px !important; }
  .acc .acc-side { display: none !important; }
  .dside { display: flex; flex-direction: column; position: sticky; top: 96px; padding: 10px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
  .dside > * { flex-shrink: 0; }
  .mc { padding: 10px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
  .mc-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .mc-who .av.lg { width: 44px; height: 44px; font-size: 15px; flex: none; }
  .mc-who > div { min-width: 0; }
  .mc-who b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-who small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dnav { display: flex; flex-direction: column; gap: 2px; }
  .dn, .dfoot button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background .15s; }
  .dn svg, .dfoot button svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
  .dn:hover, .dfoot button:hover { background: var(--card-2); }
  .dn i { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
  .dn[aria-current="true"] { background: var(--card-2); font-weight: 600; }
  .dn[aria-current="true"] svg { color: var(--ink); }
  .dfoot { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .dfoot button { color: var(--ink-2); }
  .dfoot em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--muted); }
  .dfoot .dn-out { color: var(--muted); }
  .acc-main .acc-head h1 { font-size: 44px; }
  .acc-main .acc-head { margin-bottom: 22px; }
}
@media (min-width: 900px) { .dside .mc { border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } .dside .mc::after { display: none !important; } }
/* computer list view: route across the top (from left, to right, time in the middle), then date and aircraft */
@media (min-width: 900px) {
  html body .list:not(.grid) .fc-b { align-content: center; row-gap: 0; }
  html body .list:not(.grid) .fc-b > .fc-rt { grid-column: 1; grid-row: 1; display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; width: 100%; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  html body .list:not(.grid) .fc-rt .fc-pt { text-align: left; }
  html body .list:not(.grid) .fc-rt .fc-pt.r { text-align: right; }
  html body .list:not(.grid) .fc-rt .fc-arr { width: 150px; }
  html body .list:not(.grid) .fc-b > .fc-when { grid-column: 1; grid-row: 2; margin: 14px 0 4px; font-size: 15px; color: var(--ink); font-weight: 500; }
  html body .list:not(.grid) .fc-b > .fc-meta { grid-column: 1; grid-row: 3; margin: 0 !important; }
  html body .list:not(.grid) .fc-b > .fc-foot { grid-column: 2; grid-row: 1 / span 3; }
}
@media (min-width: 900px) {
  html body #main .list:not(.grid) .fc .fc-b > .fc-rt { display: grid !important; max-width: none !important; width: 100% !important; }
  html body #main .list:not(.grid) .fc .fc-b { grid-template-rows: auto auto auto; align-content: center !important; }
  html body #main .list:not(.grid) .fc .fc-b > .fc-meta { align-self: start; }
}
@media (min-width: 900px) {
  html body #main .list:not(.grid) .fc .fc-rt .fc-pt.r, html body #main .list:not(.grid) .fc .fc-rt .fc-pt.r > * { text-align: right !important; justify-self: end; }
  html body #main .list:not(.grid) .fc .fc-rt .fc-arr { width: 160px !important; }
}
@media (min-width: 900px) {
  html body #main .list:not(.grid) .fc .fc-b > .fc-when { margin: 12px 0 0 !important; line-height: 1.3; }
  html body #main .list:not(.grid) .fc .fc-b > .fc-meta { margin-top: 2px !important; padding-top: 0 !important; line-height: 1.3; min-height: 0; }
}
/* computer map results: section title + "more ways" card line up with the result cards, and stay clear of the Book bar */
@media (min-width: 900px) {
  html body #main.ub-mode .ub-head, html body #main.ub-mode .ub-head.ub-th { padding-left: 2px !important; padding-right: 2px !important; }
  html body #main.ub-mode .ub-x { padding: 28px 0 130px !important; }
  html body #main.ub-mode .ub-x .xcard { background: var(--card) !important; margin: 0; }
}
@media (min-width: 900px) { html body #main.ub-mode .ub-sheet > .ub-types { width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; } }
/* passenger count matches the aircraft name next to it */
html body .ub-mod .ub-px, html body .ub-mod .ub-px svg, html body .ub-mid b i, html body .hc-px { color: inherit !important; font-weight: inherit !important; }
html body .ub-mod .ub-px svg, html body .hc-px svg { fill: currentColor; }
/* computer map results: room between the type tabs, the section title and the first cards */
@media (min-width: 900px) {
  html body #main.ub-mode .ub-sheet > .ub-types { margin-bottom: 22px !important; }
  html body #main.ub-mode .ub-head, html body #main.ub-mode .ub-head.ub-th { margin: 0 0 14px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  html body #main.ub-mode .ub-sec h4 { margin-top: 18px; margin-bottom: 12px; }
}
/* computer map results: each card is framed as a whole and has its own Book button; no bottom bar */
.ub-bk { display: none; }
@media (min-width: 900px) {
  html body #main.ub-mode .ub-bar { display: none !important; }
  html body #main.ub-mode .ub-x { padding-bottom: 40px !important; }
  html body #main.ub-mode .ub-row { background: var(--card) !important; border-radius: 24px !important; padding: 8px 8px 16px !important; box-shadow: 0 0 0 1px var(--line) !important; transition: box-shadow .15s; }
  html body #main.ub-mode .ub-row:hover { box-shadow: 0 0 0 1.5px var(--line-2), 0 10px 26px -18px rgba(0,0,0,.35) !important; }
  html body #main.ub-mode .ub-row.on { box-shadow: 0 0 0 2.5px var(--ink) !important; }
  html body #main.ub-mode .ub-row .ub-ph, html body #main.ub-mode .ub-row.on .ub-ph { outline: 0 !important; border-radius: 17px; }
  html body #main.ub-mode .ub-row .ub-mid { padding: 0 8px !important; }
  html body #main.ub-mode .ub-row .ub-pr { padding: 0 8px; padding-right: 130px; min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
  html body #main.ub-mode .ub-bk { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 16px; bottom: 16px; height: 40px; padding: 0 20px; border-radius: 100px; background: var(--btn, var(--ink)); color: var(--btn-ink, var(--bg)); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .15s; }
  html body #main.ub-mode .ub-bk:hover { transform: scale(1.03); }
  html body #main.ub-mode .ub-row.off .ub-bk { display: none; }
}
/* booking form on computers: everything on one screen */
@media (min-width: 900px) {
  .dlg:has(#bform) .dlg-hd { padding-top: 14px !important; padding-bottom: 14px !important; min-height: 0 !important; height: auto !important; }
  .dlg:has(#bform) #bform { padding-top: 18px !important; padding-bottom: 22px !important; }
  .dlg:has(#bform) #bform .bk-map { display: none !important; }
  .dlg:has(#bform) #bform h2 { font-size: 30px !important; margin: 0 0 10px !important; }
  .dlg:has(#bform) #bform .sec { padding-top: 12px !important; padding-bottom: 12px !important; }
  .dlg:has(#bform) #bform .sec .hint { margin: 2px 0 0 !important; }
  .dlg:has(#bform) #bform .form { grid-template-columns: 1fr 1fr !important; gap: 10px 12px !important; margin-top: 10px !important; }
  .dlg:has(#bform) #bform .form .full { grid-column: 1 / -1; }
  .dlg:has(#bform) #bform .form input, .dlg:has(#bform) #bform .form select { height: 46px !important; }
  .dlg:has(#bform) #bform .form textarea { min-height: 58px !important; height: 58px !important; }
  .dlg:has(#bform) #bform .check { margin-top: 12px !important; }
}
/* computer map results: filters next to the short search instead of on the map */
.dk-filt { display: none; }
@media (min-width: 900px) {
  body.dk-filt-on .dk-filt { display: grid; place-items: center; position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; pointer-events: auto; box-shadow: 0 6px 18px -10px rgba(0,0,0,.2); padding: 0; }
  body.dk-filt-on .dk-filt svg { width: 20px; height: 20px; }
  body.dk-filt-on .dk-filt .ct { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
  body.dk-filt-on .dk-filt .ct[hidden] { display: none; }
  body.dk-filt-on #main.ub-mode #open-filters { display: none !important; }
}
/* charter cards: a long price range and the button never collide — the button drops under the price when space is short */
html body .fc.mc2 .fc-foot { flex-wrap: wrap; gap: 10px 12px; }
html body .fc.mc2 .fc-foot .fc-price { min-width: 0; flex: 1 1 auto; }
html body .fc.mc2 .fc-foot .fc-price b { white-space: nowrap; }
html body .fc.mc2 .fc-foot .book { flex: 0 0 auto; margin-left: auto; }
@media (min-width: 900px) { html body .grid .fc.mc2 .fc-foot .book, html body .ch-grid .fc.mc2 .fc-foot .book { flex: 1 1 100%; width: 100%; margin-left: 0; } }
/* map place names */
.ub-lbls { pointer-events: none; }
.ub-lbls .lb { text-anchor: middle; dominant-baseline: middle; font-family: inherit; paint-order: stroke; stroke: var(--bg-2, #eee); stroke-width: .25em; stroke-linejoin: round; }
.ub-lbls .lb0 { fill: var(--ink-2); font-weight: 500; letter-spacing: .01em; }
.ub-lbls .lb1 { fill: var(--muted); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.ub-lbls .lb2 { fill: var(--ink); font-weight: 500; }
.ub-lbls .lb { stroke: none !important; paint-order: normal !important; }
/* map: no text selection while dragging; zoom buttons */
.ub-map, .ub-map * { -webkit-user-select: none; user-select: none; }
.ub-zm { display: none; }
@media (min-width: 900px) {
  #main.ub-mode .ub-zm { display: flex; flex-direction: column; gap: 8px; position: absolute; right: 16px; bottom: 16px; z-index: 3; }
  #main.ub-mode .ub-zm button { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 6px 16px -10px rgba(0,0,0,.25); }
  #main.ub-mode .ub-zm button:hover { background: var(--card-2); }
  #main.ub-mode .ub-zm svg { width: 20px; height: 20px; }
}
/* computer map "All": sliding row per type */
.ub-more, .ub-rnav { display: none; }
@media (min-width: 900px) {
  html body #main.ub-mode .ub-sec > h4 { grid-column: 1 / -1 !important; }
  html body #main.ub-mode .ub-rail { position: relative; grid-column: 1 / -1; min-width: 0; }
  html body #main.ub-mode .ub-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 4px 8px; margin: -4px -4px -8px; scroll-padding: 4px; }
  html body #main.ub-mode .ub-track::-webkit-scrollbar { display: none; }
  html body #main.ub-mode .ub-track > .ub-row { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
  html body #main.ub-mode .ub-more { flex: 0 0 120px; scroll-snap-align: end; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--ink); cursor: pointer; font: inherit; }
  html body #main.ub-mode .ub-more span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); }
  html body #main.ub-mode .ub-more svg { width: 18px; height: 18px; }
  html body #main.ub-mode .ub-more small { font-size: 13.5px; font-weight: 500; }
  html body #main.ub-mode .ub-more:hover { box-shadow: 0 0 0 1.5px var(--ink); }
  html body #main.ub-mode .ub-rnav { display: grid; place-items: center; position: absolute; top: 34%; z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; padding: 0; box-shadow: 0 6px 16px -8px rgba(0,0,0,.3); }
  html body #main.ub-mode .ub-rnav[hidden] { display: none; }
  html body #main.ub-mode .ub-rnav.prev { left: -14px; } html body #main.ub-mode .ub-rnav.next { right: -14px; }
  html body #main.ub-mode .ub-rnav svg { width: 16px; height: 16px; }
}
/* computer map "All": tighter spacing between a type title, its cards and the next type */
@media (min-width: 900px) {
  html body #main.ub-mode .ub-sec { row-gap: 14px !important; margin-bottom: 26px !important; }
  html body #main.ub-mode .ub-sec > h4 { margin: 0 !important; }
  html body #main.ub-mode .ub-list > .ub-sec:first-child > h4 { margin-top: 0 !important; }
}
@media (min-width: 900px) { html body #main.ub-mode .ub-list:has(> .ub-sec) { row-gap: 0 !important; } html body #main.ub-mode .ub-sec { margin-bottom: 30px !important; } }
/* info window: route header with airport codes */
.drt { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; padding: 4px 0 18px; border-bottom: 1px dashed var(--line-2); margin-bottom: 4px; }
.drt.one { grid-template-columns: 1fr auto; }
.dr-end { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dr-end.r { align-items: flex-end; text-align: right; }
.dr-code { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; padding: 4px 8px; border-radius: 7px; background: var(--card-2); color: var(--ink-2); margin-bottom: 4px; }
.dr-end b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.dr-end small { font-size: 13.5px; color: var(--muted); }
.dr-mid, .dr-loop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 22px; min-width: 120px; }
.dr-mid span, .dr-loop span { font-size: 13.5px; font-weight: 600; }
.dr-mid small, .dr-loop small { font-size: 12px; color: var(--muted); text-align: center; }
.dr-mid i { display: flex; align-items: center; gap: 6px; width: 100%; color: var(--ink-2); }
.dr-mid i em { flex: 1; border-top: 1.5px dashed var(--line-2); }
.dr-mid i svg { width: 16px; height: 16px; }
.dr-flex { font-style: normal; margin-left: 8px; padding: 2px 8px; border-radius: 100px; border: 1px solid var(--line-2); font-size: 10.5px; letter-spacing: .12em; color: var(--gold-ink); }
.dlg .specs { grid-template-columns: repeat(2, 1fr); }
/* booking: flight summary in the price card, saved details, reassurance */
.sp-mini { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.spm-ph { width: 58px; height: 58px; flex: none; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card-2); }
.spm-ph img { width: 100%; height: 100%; object-fit: cover; }
.sp-mini > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spm-k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.sp-mini b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mini small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtl-s { display: none; }
.dtl.saved .dtl-s { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dtl-s > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dtl-s b { font-size: 16px; font-weight: 500; }
.dtl-s small { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtl.saved .dtl-f, .dtl.saved .form > label:not(.full), .dtl.saved .form > label.full:first-child { display: none !important; }
.dtl.saved .form { margin-top: 14px; }
.assure { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.assure li { display: flex; align-items: center; gap: 10px; }
.assure svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.assure a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.dr-mid i svg { transform: rotate(90deg); }
/* empty type rows: faded text, but the Create alert button stays fully visible */
.ub-none { opacity: 1 !important; filter: none !important; }
.ub-none h4, .ub-none .ub-nrow > span { opacity: .55; }
.ub-none .ub-nrow .tb { background: var(--btn, var(--ink)) !important; color: var(--btn-ink, var(--bg)) !important; border-color: transparent !important; font-weight: 600; }
.ub-none .ub-nrow .tb svg { color: inherit; }
.ub-none .ub-nrow .tb { background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; box-shadow: 0 2px 8px -4px rgba(0,0,0,.18); }
/* empty type rows: readable title and text */
.ub-none h4, .ub-none .ub-nrow > span { opacity: 1 !important; }
.ub-none h4, .ub-none h4 span { color: var(--ink) !important; }
.ub-none h4 svg { color: var(--ink-2) !important; }
.ub-none .ub-nrow > span { color: var(--ink-2) !important; }
.ub-none .ub-nrow { border-color: var(--line-2) !important; background: transparent !important; border-style: dashed !important; }
/* initials avatar: neutral black / grey / white, no gold */
html body .av:not(.av-img) { background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; box-shadow: none !important; }
html body .mc-who .av:not(.av-img), html body .dk-acc .av:not(.av-img) { background: var(--card) !important; color: var(--ink) !important; }

/* ---------- computer dashboard ---------- */
.dd-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.dd-hd .eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.dd-hd h1 { margin: 6px 0 0; font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.dd-hd .book { display: inline-flex; align-items: center; gap: 8px; border-radius: 100px; padding: 0 22px; height: 46px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.dd-hd .book svg { width: 17px; height: 17px; }
.dd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.dd-h { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.dd-h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 10px; }
.dd-h2 .dd-h { margin: 0; }
.dd-h2 h3 { margin: 0; font-size: 15px; font-weight: 600; }
.dd-hero { display: grid; grid-template-columns: 42% 1fr; border-radius: 24px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .15s; }
.dd-hero:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.ddh-ph { position: relative; min-height: 270px; }
.ddh-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ddh-when { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 100px; background: rgba(255,255,255,.92); color: #111; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); }
.ddh-b { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px; min-width: 0; }
.ddh-k { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.ddh-k .tag { margin-left: auto; }
.ddh-rt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.ddh-rt > div { display: flex; flex-direction: column; gap: 2px; }
.ddh-rt > div.r { text-align: right; }
.ddh-rt span { font-size: 38px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.ddh-rt small { font-size: 13.5px; color: var(--muted); }
.ddh-rt i { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.ddh-rt i em { flex: 1; border-top: 1.5px dashed var(--line-2); }
.ddh-rt i svg { width: 18px; height: 18px; transform: rotate(90deg); }
.ddh-rt.one { display: flex; flex-direction: column; align-items: flex-start; }
.ddh-rt.one b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.ddh-m { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ddh-m dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ddh-m dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddh-f { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.ddh-f b { font-size: 24px; font-weight: 600; }
.ddh-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; }
.ddh-go svg { width: 14px; height: 14px; }
.dd-empty { display: flex; align-items: center; gap: 18px; padding: 26px; border-radius: 24px; border: 1px dashed var(--line-2); }
.dd-empty .ei { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--card); flex: none; }
.dd-empty .ei svg { width: 22px; height: 22px; }
.dd-empty > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dd-empty small { color: var(--muted); font-size: 14px; }
.dd-empty .book { border-radius: 100px; text-transform: none; letter-spacing: 0; padding: 0 20px; height: 44px; }
.dd-rows { display: flex; flex-direction: column; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.dd-row { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dd-row + .dd-row { border-top: 1px solid var(--line); }
.dd-row:hover { background: var(--card-2); }
.ddr-d { width: 46px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 12px; background: var(--card-2); }
.ddr-d small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.ddr-d b { font-size: 18px; font-weight: 600; line-height: 1.1; }
.ddr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ddr-t b { font-size: 15px; font-weight: 500; }
.ddr-t small { font-size: 13px; color: var(--muted); }
.ddr-p { font-weight: 600; }
.dd-row > svg { width: 14px; height: 14px; color: var(--muted); }
.dd-side { display: flex; flex-direction: column; gap: 14px; }
.dd-card { display: block; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
.dd-card .dd-h2 { margin: 0 0 8px; }
.dd-stats { padding: 6px; }
.dd-st { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 14px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.dd-st:hover { background: var(--card-2); }
.dd-st svg { width: 18px; height: 18px; color: var(--ink-2); }
.dd-st span { flex: 1; text-align: left; font-size: 14.5px; }
.dd-st b { font-size: 18px; font-weight: 600; }
.dd-sv { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dd-sv img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; }
.dd-sv span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dd-sv b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-sv small { font-size: 13px; color: var(--muted); }
.dd-sv:hover b { text-decoration: underline; }
.dd-mute { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.dd-help { display: flex; flex-direction: column; gap: 4px; background: var(--ink); color: var(--bg); box-shadow: none; }
.dd-help small { color: color-mix(in srgb, var(--bg) 70%, transparent); font-size: 13.5px; line-height: 1.4; }
.dd-help span { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; font-size: 14.5px; }
.dd-help span svg { width: 13px; height: 13px; }
.dd-new { margin-top: 34px; }
.dd-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dd-types button { position: relative; height: 112px; border: 0; padding: 0; border-radius: 18px; overflow: hidden; cursor: pointer; background: #111; }
.dd-types img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .4s, opacity .2s; }
.dd-types button:hover img { transform: scale(1.05); opacity: .65; }
.dd-types span { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.dd-types span svg { width: 16px; height: 16px; }
@media (max-width: 1180px) { .dd-grid { grid-template-columns: 1fr; } .dd-side { display: grid; grid-template-columns: repeat(3, 1fr); } .dd-types button { height: 96px; } }
/* ---------- tablet portrait (700–899px): phone layout, sized for the bigger screen ---------- */
@media (min-width: 700px) and (max-width: 899px) {
  #results .list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  #results .list.grid > :not(.fc):not(.mc):not(.mc2) { grid-column: 1 / -1; }
  #results .list.grid .fc .fc-ph { aspect-ratio: 4 / 3; height: auto; }
  .la-sec .list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hrow .hc { width: calc((100vw - 32px - 28px) / 3) !important; flex: none; }
  .qbar { max-width: 640px; margin-left: auto; margin-right: auto; }
  .home-tabs, .q-types:not(.ub-types) { max-width: 640px; margin-left: auto; margin-right: auto; }
  .bn-in { max-width: 460px !important; margin-left: auto; margin-right: auto; }
  #main.ub-mode .ub-sheet > .ub-list, #main.ub-mode .ub-sheet > .ub-head, #main.ub-mode .ub-sheet > .ub-x, #main.ub-mode .ub-sheet > .ub-types, #main.ub-mode .ub-sheet > .ub-empty { max-width: 680px; margin-left: auto !important; margin-right: auto !important; }
  #main.ub-mode .ub-bar { max-width: 680px; margin: 0 auto; left: 0; right: 0; border-radius: 22px 22px 0 0; }
  .sjf-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr !important; }
}
/* preview notice */
.beta-dlg { max-width: 460px !important; }
.beta { padding: 30px 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.beta-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--card-2); margin-bottom: 14px; }
.beta-ic svg { width: 24px; height: 24px; }
.beta-k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.beta h2 { margin: 8px 0 8px; font-size: 26px; line-height: 1.15; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
.beta p { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.beta ul { list-style: none; margin: 0 0 22px; padding: 14px 16px; display: grid; gap: 10px; width: 100%; text-align: left; border-radius: 16px; background: var(--card-2); }
.beta li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.beta li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.beta .book.wide { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.beta .book svg { width: 14px; height: 14px; }
.beta-back { margin-top: 14px; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
/* preview notice: spinning gears, short text */
.beta { padding: 30px 28px 26px !important; }
.beta-gears { position: relative; width: 84px; height: 72px; margin-bottom: 16px; color: var(--ink); }
.beta-gears i { position: absolute; display: block; }
.beta-gears svg { width: 100%; height: 100%; display: block; }
.beta-gears .g1 { width: 50px; height: 50px; left: 4px; top: 16px; animation: betaSpin 4s linear infinite; }
.beta-gears .g2 { width: 34px; height: 34px; right: 4px; top: 2px; color: var(--muted); animation: betaSpin 2.72s linear infinite reverse; }
@keyframes betaSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .beta-gears i { animation-duration: 12s; } }
.beta h2 { margin: 0 0 6px !important; }
.beta p { margin: 0 0 22px !important; }
.dk-logo { text-decoration: none; } .dk-logo:focus:not(:focus-visible) { outline: none; } a.hl-logo { color: inherit; text-decoration: none; }
/* charter aircraft on the map results: studio look with a floor reflection, dark in dark mode */
.ub-studio .ub-refl { display: none; }
html[data-sj-theme="dark"] .ub-row .ub-studio, html[data-sj-theme="dark"] #main.ub-mode .ub-row:not(.ub-fl) .ub-ph { background: linear-gradient(180deg, #1d1d1d 0%, #1a1a1a 62%, #141414 62%, #191919 100%) !important; }
@media (min-width: 900px) {
  html body #main.ub-mode .ub-row .ub-ph.ub-studio { position: relative; display: block; background: linear-gradient(180deg, var(--card-2) 0%, #f0f0f0 62%, #e9e9e9 62%, #f3f3f3 100%); }
  html[data-sj-theme="dark"] body #main.ub-mode .ub-row .ub-ph.ub-studio { background: linear-gradient(180deg, #1d1d1d 0%, #1a1a1a 62%, #141414 62%, #191919 100%) !important; }
  html body #main.ub-mode .ub-row .ub-ph.ub-studio img { position: absolute; left: 8%; width: 84%; height: 40%; padding: 0 !important; object-fit: contain; }
  html body #main.ub-mode .ub-row .ub-ph.ub-studio img:not(.ub-refl) { bottom: 38%; object-position: center bottom; filter: drop-shadow(0 14px 14px rgba(0,0,0,.18)); }
  html[data-sj-theme="dark"] body #main.ub-mode .ub-row .ub-ph.ub-studio img:not(.ub-refl) { filter: drop-shadow(0 14px 18px rgba(0,0,0,.7)); }
  html body #main.ub-mode .ub-row .ub-ph.ub-studio .ub-refl { display: block; top: 62%; object-position: center bottom; transform: scaleY(-1) !important; opacity: .22; -webkit-mask-image: linear-gradient(to top, #000, transparent 60%); mask-image: linear-gradient(to top, #000, transparent 60%); }
  html body #main.ub-mode .ub-row:hover .ub-ph.ub-studio img:not(.ub-refl) { transform: translateX(6px) !important; }
  html body #main.ub-mode .ub-row:hover .ub-ph.ub-studio .ub-refl { transform: scaleY(-1) translateX(6px) !important; }
}
@media (min-width: 900px) { html body #main.ub-mode .ub-row .ub-badge { color: #111 !important; } }
html body .beta ul.beta-ul { display: inline-flex; flex-direction: column; gap: 8px; width: auto; margin: 10px auto 24px; padding: 0; background: none; text-align: left; list-style: none; }
html body .beta ul.beta-ul li { position: relative; padding-left: 18px; font-size: 15px; color: var(--ink-2); }
html body .beta ul.beta-ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
/* dark mode: the ticket is printed on light paper (soft grey, not white) */
html[data-sj-theme="dark"] .issued {
  --bg: #e4e3df; --bg-2: #dcdbd6; --card: #e9e8e4; --card-2: #dfded9; --sand: #d6d5d0;
  --ink: #111111; --ink-2: #3e3e3e; --muted: #6a6a6a; --faint: #8f8f8f;
  --line: rgba(0, 0, 0, .1); --line-2: rgba(0, 0, 0, .18);
  --gold-ink: #7a5b20; --notch: #0a0a0a;
  background: #e9e8e4 !important; color: #111111;
}
html[data-sj-theme="dark"] .issued .ub-map { background: #dcdbd6 !important; }
html[data-sj-theme="dark"] .issued .ub-water { fill: #d3d2cd !important; }
html[data-sj-theme="dark"] .issued .ub-land { fill: #f1f0ec !important; }
html[data-sj-theme="dark"] .issued .td-map .bk-map { border-color: rgba(0,0,0,.12) !important; }
.la-more { display: flex; justify-content: center; margin: 14px 0 6px; }
.la-more .more-btn { margin: 0; }
.ub-more2 { display: flex; justify-content: center; padding: 6px 0 14px; }
.ub-more2 .more-btn { margin: 0; }
.kb-done { display: none !important; }
/* phones: 16px text in every field so iPhone never zooms in while typing */
@media (max-width: 899px) { input, textarea, select, .in input, .in textarea, .form input, .form textarea, .form select { font-size: 16px !important; } }
/* access gate */
.beta-gate { z-index: 9999 !important; }
.beta-code { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0 0 14px; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.beta-code input { height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; outline: none; }
.beta-code input:focus { border-color: var(--ink); }
.beta-code input.bad { border-color: #c0392b; }
.beta-err { margin: -6px 0 12px !important; font-size: 13.5px !important; color: #c0392b !important; }
.beta.shake { animation: betaShake .4s; }
@keyframes betaShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.ch-hero { margin-bottom: 16px; }
.ch-hero .fc-ph.studio { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; }
.ch-hero .fc-ph.studio img { position: absolute; opacity: 1; }
.ch-hero .fc-ph.studio img.refl { opacity: .22; }
/* phones: keep map-sheet thumbnails painted while scrolling (iOS Safari flicker) */
@media (max-width: 899px) {
.ub-row .ub-ph { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; isolation: isolate; }
.ub-row .ub-ph img { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); }
}
/* printed ticket shadow: a soft rounded shadow layer instead of a filter (iOS drew the filter as a hard-edged box) */
.pr-paper { filter: none !important; position: relative; isolation: isolate; }
.pr-paper::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; border-radius: 22px; box-shadow: 0 14px 26px -6px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.06); pointer-events: none; }
html[data-sj-theme="dark"] .pr-paper::before { box-shadow: 0 16px 30px -6px rgba(0,0,0,.6); }
/* phones: a "Show more" card at the end of each sliding row */
.hcm-ph { display: none; }
@media (max-width: 899px) {
  .hrow-s > .hc-more { display: flex !important; flex: none; width: 44%; max-width: 180px; align-self: stretch; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border-radius: 26px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; scroll-snap-align: end; padding: 16px; }
  .hrow-s > .hc-more > b { display: none; }
  .hrow-s > .hc-more .hcm-ph { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
  .hrow-s > .hc-more .hcm-ph::after { content: "›"; font-size: 20px; line-height: 1; }
  .hcm-pics { position: relative; width: 104px; height: 78px; }
  .hcm-pics img { position: absolute; width: 58px; height: 58px; object-fit: cover; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
  .hcm-pics img:nth-child(1) { left: 6px; top: 0; transform: rotate(-8deg); }
  .hcm-pics img:nth-child(2) { right: 6px; top: 4px; transform: rotate(7deg); }
  .hcm-pics img:nth-child(3) { left: 24px; top: 18px; transform: rotate(-2deg); z-index: 2; }
}
/* "Show more" sits right under its own cards, with the space going before the next section */
html body .la-sec .list { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body .la-more { margin: 14px 0 0 !important; }
html body .la-sec + .la-more + .la-sec, html body .la-more + .la-sec { margin-top: 44px !important; }
/* charter cards without a route: smaller "From $x/h" so it never touches Add route */
@media (max-width: 899px) {
  html body .fc.mc2 .fc-foot .fc-price b { font-size: 17px !important; letter-spacing: -.01em; }
  html body .fc.mc2 .fc-foot .book.ghosty { padding: 0 14px !important; height: 38px !important; font-size: 14px !important; }
  html body .fc.mc2 .fc-foot { gap: 8px; }
}
@media (max-width: 899px) {
  html body .fc.mc2 .fc-foot { flex-wrap: wrap !important; row-gap: 10px; }
  html body .fc.mc2 .fc-foot .fc-price { flex: 0 0 auto !important; min-width: max-content !important; }
  html body .fc.mc2 .fc-foot .book { margin-left: auto; }
}
@media (max-width: 899px) {
  html body .fc.mc2 .fc-foot { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  html body .fc.mc2 .fc-foot .fc-price, html body .fc.mc2 .fc-foot .fc-price b { width: auto !important; max-width: none !important; overflow: visible !important; }
  html body .fc.mc2 .fc-foot .book { margin-left: 0 !important; align-self: stretch; justify-content: center; }
}
@media (max-width: 899px) {
  html body #results .list:not(.grid) .fc.mc2 .fc-foot { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; }
  html body #results .list:not(.grid) .fc.mc2 .fc-price { flex: 1 0 100% !important; min-width: 0 !important; }
  html body #results .list:not(.grid) .fc.mc2 .fc-price b { font-size: 17px !important; }
  html body #results .list:not(.grid) .fc.mc2 .fc-foot .book { margin-left: 0 !important; align-self: auto; }
}
/* phones: stop the bottom bar from jumping when the browser toolbar hides on short pages (iOS rubber-band) */
@media (max-width: 899px) {
  html, body { overscroll-behavior-y: none; }
  body { min-height: 100lvh; }
  .bnav { transform: translateZ(0); will-change: transform; }
}
/* ticket shadow: only under the bottom edge, never beside the ticket, so the side notches show clean page colour */
.pr-paper::before { left: 18px !important; right: 18px !important; top: 40% !important; bottom: 0 !important; border-radius: 24px !important; box-shadow: 0 18px 26px -10px rgba(0,0,0,.18) !important; }
html[data-sj-theme="dark"] .pr-paper::before { box-shadow: 0 18px 30px -10px rgba(0,0,0,.65) !important; }
/* computer list view: charter price ranges fit inside the card */
@media (min-width: 900px) {
  html body #results .list:not(.grid) .fc.mc2 .fc-price b { font-size: 22px !important; white-space: nowrap; letter-spacing: -.02em; }
  html body #results .list:not(.grid) .fc.mc2 .fc-foot { min-width: 0; overflow: hidden; }
}

/* ---------- sign in / register ---------- */
.au-ov { z-index: 95 !important; }
.dlg.au { width: min(440px, 100%); }
.au .au-hd { flex-direction: row; border-bottom: 0; padding: 16px 18px 0; }
.au-bd { padding: 8px 32px 30px; }
.au h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 6px; line-height: 1.15; }
.au-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 22px; line-height: 1.5; }
.au-sub b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.au-form { display: flex; flex-direction: column; gap: 14px; }
.au-f { display: flex; flex-direction: column; gap: 7px; }
.au-f > span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.au-f input, .au-ph { border: 1px solid var(--line-2); background: var(--card-2); border-radius: 14px; font-size: 16px; outline: none; transition: border-color .2s, background .2s; width: 100%; color: var(--ink); }
.au-f input { padding: 14px 15px; }
.au-f input:focus, .au-ph:focus-within { border-color: var(--ink); background: var(--card); }
.au-f.bad input, .au-f.bad .au-ph { border-color: var(--warn); }
.au-ph { display: flex; align-items: stretch; overflow: hidden; }
.au-ph input { border: 0 !important; background: transparent !important; border-radius: 0; flex: 1; min-width: 0; padding: 14px 15px 14px 12px; }
.au-cc { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 14px; border-right: 1px solid var(--line-2); font-size: 15px; font-weight: 500; white-space: nowrap; flex: none; }
.au-cc svg { width: 14px; height: 14px; color: var(--muted); }
.au-cc select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; width: 100%; }
.au .book.wide { margin-top: 4px; min-height: 52px; position: relative; }
.au-busy { pointer-events: none; color: transparent !important; }
.au-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--btn-ink) var(--btn-ink) transparent transparent; animation: au-spin .7s linear infinite; }
.au-alt.au-busy::after { border-color: var(--ink) var(--ink) transparent transparent; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 13px; }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.au-alt { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: 999px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s; }
.au-alt + .au-alt { margin-top: 10px; }
.au-alt:hover { background: var(--card-2); border-color: var(--ink); }
.au-alt svg { width: 20px; height: 20px; flex: none; }
.au-fine { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.55; margin: 20px 0 0; }
.au-fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.au-err { margin: -2px 0 0; font-size: 13.5px; color: var(--warn); line-height: 1.45; }
.au-err .au-link { display: block; margin-top: 6px; padding: 0; }
.au-code { width: 100%; text-align: center; font-size: 28px !important; letter-spacing: .5em; text-indent: .5em; font-weight: 600; padding: 16px 10px; border: 1px solid var(--line-2); background: var(--card-2); border-radius: 14px; outline: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.au-code:focus { border-color: var(--ink); background: var(--card); }
.au-code::placeholder { color: var(--faint); }
.au-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.au-link { background: none; border: 0; padding: 4px 0; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.au-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); display: grid; place-items: center; margin: 8px 0 14px; }
.au-ic svg { width: 26px; height: 26px; }
.au-vf { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-2); font-size: 15px; }
.au-vf span { font-size: 12.5px; color: var(--muted); }
.au-vf b { font-weight: 500; flex: 1; }
.au-vf i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.au-vf i svg { width: 14px; height: 14px; }
.au-wait { width: 28px; height: 28px; margin: 40px auto; border-radius: 50%; border: 2px solid var(--ink); border-color: var(--ink) var(--ink) transparent transparent; animation: au-spin .7s linear infinite; }
#au-rc { position: fixed; bottom: 0; right: 0; z-index: 99; }
.grecaptcha-badge { visibility: hidden !important; }
@media (max-width: 899px) {
  .dlg.au { width: 100%; }
  .au-bd { padding: 6px 22px calc(26px + env(safe-area-inset-bottom)); }
  .au h2 { font-size: 24px; }
}
/* booking details when signed out / verified */
.dtl-n { display: none; }
.dtl.need .dtl-n { display: block; }
.dtl-n .hint { margin: 2px 0 14px; font-size: 14px; line-height: 1.5; }
.dtl.need .dtl-f, .dtl.need .form > label:not(:last-child) { display: none !important; }
.dtl.need .form { margin-top: 14px; }
.nyou { align-self: flex-start; background: none; border: 0; padding: 2px 0 0; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
em.pv { font-style: normal; color: var(--ok); font-weight: 600; margin-left: 4px; }
.in input[readonly] { color: var(--muted); }
/* one box per code digit */
.au-otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.au-otp .au-code { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .01; color: transparent; caret-color: transparent; background: none; border: 0; padding: 0; letter-spacing: 0; text-indent: 0; font-size: 16px !important; z-index: 2; cursor: text; }
.au-otp i { font-style: normal; display: grid; place-items: center; height: 58px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px -8px rgba(0,0,0,.12); font-size: 24px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.au-otp i.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--line); }
.au-otp i.on:empty::after { content: ""; width: 2px; height: 24px; background: var(--ink); animation: au-blink 1s steps(1) infinite; }
.au-otp.bad i { border-color: var(--warn); }
@keyframes au-blink { 50% { opacity: 0; } }
@media (max-width: 380px) { .au-otp { gap: 6px; } .au-otp i { height: 52px; } }
/* keep the real code input "visible" (opacity 1) so the system offers "Fill code from Messages" */
.au-otp .au-code { opacity: 1 !important; color: transparent !important; -webkit-text-fill-color: transparent; background: transparent !important; outline: none; box-shadow: none; }
.au-otp .au-code::selection { background: transparent; }
.au-otp .au-code:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px transparent inset; transition: background-color 9999s; }
.dtl-n b.dtl-who { display: block; font-size: 16px; font-weight: 500; margin-top: 2px; }
.dtl-n small.dtl-who { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
/* inline phone verification in the booking form */
.dtl.half .form > label:nth-child(3) { display: none !important; }
.dtl-ph { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card-2); }
.dlg:has(#bform) .dtl-ph { background: var(--card); }
.dtl-ph-h b { display: block; font-size: 15px; font-weight: 600; }
.dtl-ph-h .hint { margin: 3px 0 14px; font-size: 13.5px; line-height: 1.5; }
.dtl-ph .au-f > span { display: none; }
.dtl-ph .au-ph, .dtl-ph .au-otp i { background: var(--card); }
.dlg:has(#bform) .dtl-ph .au-ph { background: var(--card-2); }
.dtl-ph .book.wide { margin-top: 12px; min-height: 50px; position: relative; }
.dtl-ph .au-err { margin: 10px 0 0; }
.dtl-ph .au-sub { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.dtl-ph .au-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.dtl-ph .au-links { margin-top: 12px; }
.dtl-ph .au-otp i { height: 52px; }
.dtl-ph.nudge { animation: au-nudge .5s; }
@keyframes au-nudge { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* six real code inputs (lets Chrome/Safari offer "Fill code from Messages") */
.au-otp .au-d { width: 100%; min-width: 0; height: 58px; padding: 0; text-align: center; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); color: var(--ink); font-size: 24px !important; font-weight: 600; font-variant-numeric: tabular-nums; outline: none; caret-color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px -8px rgba(0,0,0,.12); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.au-otp .au-d:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--line); }
.au-otp.bad .au-d { border-color: var(--warn); }
.dtl-ph .au-otp .au-d { height: 52px; }
@media (max-width: 380px) { .au-otp .au-d { height: 52px; } }
/* dark mode: ticket notches show the dark page behind the light ticket (the ticket's own --bg is light) */
html[data-sj-theme="dark"] .issued, html[data-sj-theme="dark"] .dlg:has(.issued) .issued, html[data-sj-theme="dark"] .dlg:has(#bform) .sum-pass { --notch: #0a0a0a !important; }
/* request button stays grey until the person is signed in and their phone is verified */
#bform:has(.dtl.need) .sum button[type=submit], #bform:has(.dtl.half) .sum button[type=submit] { background: var(--line-2) !important; color: var(--muted) !important; border-color: transparent !important; box-shadow: none !important; cursor: not-allowed; }
/* computer account pages: the sidebar already has the account + menu items, and the type cards start a search */
@media (min-width: 900px) {
  body.v-acc .dk-r, body.v-acc .acct { display: none !important; }
  body.v-acc .dd-hd > .book { display: none !important; }
}
/* computer dashboard: everything in one frame, one screen */
.dd-frame { border-radius: 26px; background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.ddf-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0; }
.ddf-next { padding: 22px 24px; min-width: 0; }
.ddf-stats { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px; border-left: 1px solid var(--line); }
.ddf-stats .dd-st { padding: 11px 12px; }
.ddf-sec { padding: 18px 24px 22px; border-top: 1px solid var(--line); }
.ddf-lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ddf-lbl h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.dd-frame .dd-empty { border: 1px dashed var(--line-2); padding: 18px 20px; border-radius: 18px; background: var(--card-2); }
.dd-frame .dd-empty .ei { background: var(--card); width: 46px; height: 46px; }
.dd-frame .dd-hero { box-shadow: 0 0 0 1px var(--line); background: var(--card-2); }
.dd-frame .ddh-ph { max-height: 210px; }
.ddf-sv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ddf-sv .dd-sv { padding: 8px; border-radius: 14px; background: var(--card-2); }
.dd-frame .dd-types { gap: 10px; }
.dd-frame .dd-types button { height: 104px; border-radius: 16px; }
.ddf-help { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .15s; }
.ddf-help:hover { background: var(--card-2); }
.ddf-hi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--card-2); flex: none; }
.ddf-hi svg { width: 18px; height: 18px; }
.ddf-ht { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ddf-ht b { font-size: 14.5px; font-weight: 600; }
.ddf-ht small { font-size: 13px; color: var(--muted); }
.ddf-hn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.ddf-hn svg { width: 13px; height: 13px; }
.dd-hd { margin-bottom: 20px; }
@media (max-width: 1180px) { .ddf-top { grid-template-columns: 1fr; } .ddf-stats { flex-direction: row; border-left: 0; border-top: 1px solid var(--line); } .ddf-stats .dd-st { flex: 1; } }
/* "Recommended for you" on computers: three normal-size cards per row, not one giant card */
@media (min-width: 900px) {
  .rec-row.list.grid { grid-auto-columns: calc((100% - 44px) / 3) !important; gap: 22px !important; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  .rec-row.list.grid { grid-auto-columns: calc((100% - 22px) / 2) !important; }
}
@media (min-width: 900px) {
  .rec-row .fc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
  .rec-row .fc-price { flex: 1; min-width: 0; }
  .rec-row .fc-more { display: none !important; }
  .rec-row .fc-foot .book { flex: none; padding: 0 18px; height: 42px; font-size: 14px; white-space: nowrap; }
}
/* empty states: even line breaks, no single word left on its own line */
.acc-empty p, .dd-empty small, .ub-none p { text-wrap: balance; max-width: 440px; margin-left: auto; margin-right: auto; }
.dd-empty small { margin-left: 0; }
/* trip details: the ticket next to everything shown before booking */
.td-cols { display: flex; flex-direction: column; gap: 22px; }
.td-tk .issued { margin: 0 auto; }
.td-info .drt { margin: 0 0 14px; }
.td-info .td-specs { margin: 0 0 6px; }
.td-info .bullets { margin-top: 8px; }
@media (min-width: 900px) {
  .dlg.td-dlg { width: min(1040px, 100%); }
  .td-cols { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px; align-items: start; }
  .td-tk { position: sticky; top: 0; }
}
.dside .mc-who[data-acc] { cursor: pointer; border-radius: 16px; transition: background .15s; }
.dside .mc-who[data-acc]:hover { background: var(--card-2); }
/* a lone last fact fills the row instead of leaving an empty cell */
.specs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fc[data-id] { cursor: pointer; }
/* aircraft name on the photo, bottom-left */
.fc-ph .fc-jet { position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 100px; background: rgba(10,10,10,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* aircraft name: plain white caps over a soft shadow at the bottom of the photo (like the home rows) */
.fc-ph:has(.fc-jet)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1; background: linear-gradient(transparent, rgba(0,0,0,.45)); pointer-events: none; border-radius: inherit; }
.fc-ph .fc-jet { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-radius: 0; left: 16px; bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.fc-ph .fc-jet { text-shadow: none !important; }
/* list view: small photo, so a smaller jet name that wraps instead of being cut */
.list:not(.grid) .fc-ph .fc-jet { left: 10px; right: 10px; bottom: 10px; max-width: none; font-size: 9.5px; letter-spacing: .08em; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; }
.list:not(.grid) .fc-ph:has(.fc-jet)::after { height: 55%; }
/* jet names on photos: normal case, no letter spacing, like the place names */
.fc-ph .fc-jet, .hc-model { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 14px !important; }
.list:not(.grid) .fc-ph .fc-jet { font-size: 12.5px !important; line-height: 1.25; }
/* jet name matches the place-name text under the cities: same size, regular weight */
.fc-ph .fc-jet, .hc-model { font-weight: 400 !important; font-size: 12px !important; }
.fc-ph .fc-jet, .list:not(.grid) .fc-ph .fc-jet { font-size: 12px !important; }
.list.grid .fc-ph .fc-jet, .rec-row .fc-ph .fc-jet { font-size: 13px !important; }
/* status labels (Requested, No longer available, Completed…): normal case, no letter spacing */
.tag { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; padding: 4px 10px !important; border-radius: 8px !important; }
/* all main buttons (Next, Request flight, Contact support, Send code…): normal case, no letter spacing */
.book { text-transform: none !important; letter-spacing: 0 !important; font-size: 16px !important; font-weight: 600 !important; }
/* card buttons keep their compact size */
.fc .book, .fc-foot .book, .trip .book, .dd-frame .book, .tb.book { font-size: 14px !important; }
.list:not(.grid) .fc .book { font-size: 13.5px !important; padding: 0 16px !important; }
/* passenger icon + number: same size as the place names under the cities */
.fc .pxi, .fc-px .pxi, .fc-px2 .pxi { font-size: 12px !important; font-weight: 400 !important; color: var(--muted) !important; gap: 3px; letter-spacing: 0; }
.fc .pxi svg { width: 12px !important; height: 12px !important; }
/* list view: jet name on one line */
.list:not(.grid) .fc-ph .fc-jet { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 11px !important; left: 9px !important; right: 9px !important; bottom: 9px !important; }
/* home-row badges look like the card ones: white pill, icon left, normal case */
.hc-chip { background: rgba(255,255,255,.92) !important; color: #0b0b0b !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important; height: 26px !important; padding: 0 10px !important; gap: 5px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hc-chip svg, .fc-chip svg { width: 12px; height: 12px; color: var(--gold); flex: none; }
/* dark mode: dark badges on photos */
html[data-sj-theme="dark"] .hc-chip, html[data-sj-theme="dark"] .fc-chip { background: rgba(20,20,20,.88) !important; color: #f2f2f2 !important; }
/* save (heart) button: same size as the badge pill */
.fc-ph .heart, .hc .heart { width: 26px !important; height: 26px !important; }
.fc-ph .heart svg, .hc .heart svg { width: 13px !important; height: 13px !important; }
.fc-ph:has(.fc-chip) .heart { top: 12px; }
html[data-sj-theme="dark"] .fc-ph .heart, html[data-sj-theme="dark"] .hc .heart { background: rgba(20,20,20,.88) !important; color: #f2f2f2 !important; }
.hc .heart { top: 12px !important; right: 12px !important; }
.hc .heart { top: 10px !important; right: 10px !important; }
.hc .heart { top: 21px !important; right: 21px !important; }
/* home cards: heart sits inside the photo, level with the badge */
.hc .hc-ph .heart { top: 12px !important; right: 12px !important; width: 26px !important; height: 26px !important; z-index: 2; }
.hc .hc-ph .hc-chip { top: 12px !important; left: 12px !important; height: 26px !important; }
/* result cards: badge and heart same size, same line */
.fc-ph .fc-chip { top: 12px !important; left: 12px !important; height: 26px !important; padding: 0 10px !important; font-size: 12px !important; gap: 5px !important; }
.fc-ph .heart { top: 12px !important; right: 12px !important; }
/* destination cards: arrow button on the right */
.hc-dest .hc-b { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; }
.hc-dest .hd-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.hc-dest .hd-go { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink); transition: background .15s, border-color .15s; }
.hc-dest .hd-go svg { width: 15px; height: 15px; }
.hc-dest:hover .hd-go { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fc-ph .heart svg, .hc .heart svg { transform: translateY(.5px); }

/* chat with Summit inside trip details */
.td-chat { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.td-chat > .k { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.td-msgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.td-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; background: var(--card-2); align-self: flex-start; }
.td-msg.me { align-self: flex-end; background: var(--ink); color: var(--card); }
.td-msg small { display: block; font-size: 11px; opacity: .7; margin-bottom: 2px; }
.td-msg p { margin: 0; font-size: 14px; white-space: pre-wrap; }
.td-chf { display: flex; gap: 8px; align-items: flex-end; }
.td-chf textarea { flex: 1; min-height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2); padding: 10px 12px; font: inherit; font-size: 14.5px; color: var(--ink); resize: vertical; outline: none; }
.td-chf textarea:focus { border-color: var(--ink); }
.td-chf .tb { height: 44px; }
/* quotes and changes from the operator, inside trip details */
.td-offers { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.td-off { padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--gold); background: var(--gold-soft); }
.td-off > .k { display: block; font-size: 12.5px; font-weight: 600; color: var(--gold-ink); margin-bottom: 6px; }
.td-off-p { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.td-off .td-row { border-color: rgba(0,0,0,.08); }
.td-off p { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.td-off-a { display: flex; gap: 8px; margin-top: 12px; }
.td-off-a .book { flex: 1; }
.th-chf { margin-top: 12px; }
.th-chf textarea { min-height: 44px; }
.hp h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.hp-p { color: var(--ink-2); margin: 6px 0 18px; }
.hp-f { display: flex; flex-direction: column; gap: 12px; }
.hp-f label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.hp-f select, .hp-f input, .hp-f textarea { width: 100%; border: 1px solid var(--line-2); background: var(--card-2); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.hp-f textarea { resize: vertical; }
.hp-f select:focus, .hp-f input:focus, .hp-f textarea:focus { border-color: var(--ink); background: var(--card); }
.hp-err { color: var(--warn); margin: 0; font-size: 14px; }
.hp-or { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.hp-or > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.hp-done { text-align: center; padding: 10px 0; }
.hp-done .pr-ok { display: inline-grid; margin-bottom: 10px; }
.hp-done h3 { margin: 0 0 6px; font-size: 22px; }
.hp-done p { color: var(--ink-2); margin: 0 0 18px; }
/* unread dots (brand gold) and sent / read ticks */
.nd { display: inline-block; flex: none; width: 8px; height: 8px; margin-left: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); vertical-align: middle; font-style: normal; }
.trip { position: relative; }
.trip > .nd { position: absolute; top: 12px; right: 12px; margin: 0; }
.bn-ic { position: relative; display: inline-flex; font-style: normal; }
.bn-ic > .nd { position: absolute; top: -3px; right: -5px; margin: 0; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--card); }
.ah-tile .nd { margin-left: 8px; }
.rcpt { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 11px; font-weight: 500; vertical-align: middle; white-space: nowrap; }
.rcpt svg { width: 15px; height: 10px; }
.td-msg.me .rcpt.rd, .msg.me .rcpt.rd { color: #e0bd78; opacity: 1; }
[data-sj-theme="dark"] .td-msg.me .rcpt.rd, [data-sj-theme="dark"] .msg.me .rcpt.rd { color: #7a5a1c; }
.msg.me small.msg-st { display: flex; justify-content: flex-end; align-items: center; margin-top: 4px; font-size: 11px; color: var(--btn-ink); opacity: .75; }

.ah-chip svg.vbadge { width: 18px; height: 18px; }
.dk-acc, .dk-menu { position: relative; }
.dk-acc > .nd, .dk-menu > .nd { position: absolute; top: 1px; right: 1px; margin: 0; width: 11px; height: 11px; box-shadow: 0 0 0 2.5px var(--bg); }
.dk-dd .nd { margin-left: 8px; }

.ah-avb { border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; transition: transform .15s; }
.ah-avb:active { transform: scale(.95); }

/* Messages: pick a trip first, then its conversation */
.mp-h { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 12px; }
.mp-list { display: flex; flex-direction: column; gap: 12px; }
.mp-card { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.mp-card:hover { border-color: var(--line-2); }
.mp-card:active { transform: scale(.99); }
.mp-card img, .mp-head img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--card-2); }
.mp-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp-t b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.mp-t small { font-size: 13px; color: var(--muted); }
.mp-t em { font-style: normal; font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-card.new .mp-t em { color: var(--ink); font-weight: 600; }
.mp-r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mp-r .nd { margin: 0 6px 0 0; }
.mp-back { margin-bottom: 14px; }
.mp-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); margin-bottom: 14px; cursor: pointer; }
.mp-head img { width: 64px; height: 64px; }
.mp-head .k { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mp-thread { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 520px) { .mp-card { grid-template-columns: 64px 1fr auto; gap: 12px; } .mp-card img { width: 64px; height: 64px; } }
.hp-or .cbtns { display: flex; flex-wrap: nowrap; gap: 8px; }
.hp-or .cbtns .tb { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn span .nd, .an span .nd { margin-left: 9px; min-width: 0; height: 8px; width: 8px; padding: 0; vertical-align: 2px; display: inline-block; }
.acc-seg button .nd { margin-left: 7px; vertical-align: 1px; }

/* payment box in trip details */
.td-pay { margin-top: 14px; padding: 16px; border-radius: 18px; border: 1.5px solid var(--line-2); background: var(--card); }
.td-pay > .k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.td-pay > b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.03em; margin: 4px 0 2px; }
.td-pay p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.td-pay .td-pay-err { color: #b4472b; }
.td-pay.paid { border-color: color-mix(in srgb, #2f8a4e 45%, transparent); background: color-mix(in srgb, #2f8a4e 7%, var(--card)); }
.td-pay.paid > .k { color: #2f8a4e; }
.td-pay.paid > .k svg { width: 14px; height: 14px; }
.td-pay.paid small { font-size: 13px; color: var(--muted); }
.td-pay-a { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pay-bank { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; width: 100%; padding: 16px 16px 14px; border-radius: 14px; border: 1.5px solid var(--gold); background: var(--gold-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pay-bank em { position: absolute; top: -10px; left: 14px; padding: 2px 9px; border-radius: 999px; background: var(--gold); color: #0b0b0b; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.pay-bank span { font-size: 15.5px; font-weight: 600; }
.pay-bank b { font-size: 17px; font-weight: 600; }
.td-pay-row { display: flex; gap: 8px; }
.td-pay-row > button { flex: 1 1 0; min-width: 0; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.pay-apple svg { width: 17px; height: 17px; margin-top: -2px; }
.td-pay-s { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: var(--muted); }
.td-pay-s svg { width: 12px; height: 12px; }
.td-pay button:disabled { opacity: .55; cursor: default; }
.td-wire-b { display: block; margin: 4px auto 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.td-wire { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--line-2); }
.td-wire .td-row b { cursor: copy; }
.td-wire .td-wire-n { font-size: 13px; color: var(--muted); }
.td-wire .book { width: 100%; height: 48px; margin-top: 10px; }
.td-pay-emb { padding: 14px 10px 10px; }
.td-pay-emb > .k, .td-pay-emb > b { padding: 0 6px; }
.td-emb { margin-top: 10px; border-radius: 12px; overflow: hidden; background: #fff; min-height: 420px; }
.td-emb-x { display: block; margin: 8px 6px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

/* payment options list */
.pay-opts { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; }
.pay-opt { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-top: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.pay-opt:first-child { border-top: 0; }
.pay-opt:hover:not(.off) { background: var(--card-2); }
.pay-opt.off { cursor: default; opacity: .5; }
.po-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--card-2); display: grid; place-items: center; color: var(--ink); }
.po-ic svg { width: 20px; height: 20px; }
.po-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-t b { font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-t b em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #0b0b0b; }
.po-t small { font-size: 12.5px; color: var(--muted); }
.po-p { font-size: 16px; font-weight: 600; white-space: nowrap; }
.td-pay-a .td-wire { margin-top: 12px; }
@media (max-width: 520px) { .pay-opt { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 13px 12px; } .po-ic { width: 34px; height: 34px; } .po-t b { font-size: 15px; } }
.td-apl { margin: 14px 0 0; min-height: 52px; }
.td-apl-n { margin: 10px 2px 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.td-pay [hidden] { display: none !important; }
.pay-apl { cursor: default; }
.po-apl { display: flex; align-items: center; justify-content: flex-end; min-width: 120px; }
.po-apl-b { width: 150px; }
@media (max-width: 520px) { .po-apl { min-width: 104px; } .po-apl-b { width: 120px; } }

/* checkout box */
.td-pay.pw { padding: 20px; border: 1px solid var(--line-2); border-radius: 20px; }
.pw-h { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pw-list { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.pw-o { display: flex; align-items: center; gap: 14px; padding: 16px; border-top: 1px solid var(--line); cursor: pointer; position: relative; transition: background .15s; }
.pw-o:first-child { border-top: 0; }
.pw-o:hover { background: var(--card-2); }
.pw-o.on { box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 14px; }
.pw-o.on + .pw-o { border-top-color: transparent; }
.pw-o input { position: absolute; opacity: 0; pointer-events: none; }
.pw-r { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.pw-o.on .pw-r { border-color: var(--ink); }
.pw-o.on .pw-r::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.pw-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-l b { font-size: 15.5px; font-weight: 500; }
.pw-l small { font-size: 12.5px; color: var(--muted); }
.pw-brands { display: flex; gap: 5px; }
.pw-brands i { font-style: normal; height: 22px; min-width: 34px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--line-2); background: #fff; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; }
.pw-brands .v { color: #1a1f71; font-style: italic; }
.pw-brands .a { background: #1f72cd; color: #fff; border-color: #1f72cd; }
.pw-brands .m { display: flex; align-items: center; justify-content: center; }
.pw-brands .m b { width: 12px; height: 12px; border-radius: 50%; background: #eb001b; }
.pw-brands .m b + b { background: #f79e1b; margin-left: -5px; mix-blend-mode: multiply; }
.pw-apb { display: inline-flex; align-items: center; gap: 1px; height: 22px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--ink); font-size: 11.5px; font-weight: 600; color: var(--ink); }
.pw-apb svg { width: 11px; height: 11px; margin-top: -1px; }
.pw-save { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.pw-sum { margin-top: 16px; display: flex; flex-direction: column; }
.pw-sum > div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 2px; font-size: 14.5px; color: var(--ink-2); }
.pw-sum .pw-disc b { color: var(--gold-ink); }
.pw-sum .pw-tot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; color: var(--ink); }
.pw-sum .pw-tot span { font-size: 16px; font-weight: 600; }
.pw-sum .pw-tot b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.pw-agree { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.pw-agree input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--ink); }
.pw-agree a { color: var(--ink); text-decoration: underline; }
.pw-agree.shake { animation: pwshake .4s; border-color: #b4472b; }
@keyframes pwshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pw-act { margin-top: 14px; }
.pw-go { width: 100%; height: 52px; font-size: 16px; }
.pw-apl { min-height: 52px; }
.td-pay.pw:not(.agreed) .pw-go { opacity: .55; }
.pw-trust { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.pw-trust li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.45; }
.pw-trust svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--ink-2); }

/* trip popup: pass + details left, summary card right */
.td-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "pass side" "more side"; gap: 22px 28px; align-items: start; margin-top: 18px; }
.td-pass { grid-area: pass; min-width: 0; }
.td-more { grid-area: more; min-width: 0; }
.td-side { grid-area: side; position: sticky; top: 0; min-width: 0; }
.td-sum { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ts-top { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ts-top img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--card-2); }
.ts-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-codes { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ts-t b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ts-t small { font-size: 13px; color: var(--muted); }
.ts-top .tag { align-self: start; }
.td-sum .ts-list { margin: 6px 0 0; border-top: 0; }
.ts-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.ts-total span { font-size: 16px; font-weight: 600; }
.ts-total b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.td-sum .td-pay, .td-sum .td-pay.pw { border: 0; padding: 0; margin-top: 14px; background: none; box-shadow: none; }
.td-sum .td-pay .pw-sum > div:first-child { display: none; }
.td-sum .td-pay.paid { border: 1px solid color-mix(in srgb, #2f8a4e 45%, transparent); padding: 14px 16px; }
.td-sum .td-acts { margin-top: 16px; }
.td-sum .td-cx { display: block; margin: 2px auto 0; font-size: 14px; color: var(--muted); }
.td-more .td-chat { margin-top: 22px; }
@media (max-width: 860px) {
  .td-g { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pass" "side" "more"; }
  .td-side { position: static; }
  .td-sum { padding: 16px; }
}
@media (max-width: 520px) { .ts-top { grid-template-columns: 56px 1fr; } .ts-top img { width: 56px; height: 56px; } .ts-top .tag { grid-column: 1 / -1; justify-self: start; } }
.pw-card { padding: 4px 16px 16px 50px; border-top: 0; display: flex; flex-direction: column; gap: 10px; }
.pw-o.on + .pw-card { border-top: 0; }
.pw-card + .pw-o { border-top: 1px solid var(--line); }
.pw-ce { min-height: 120px; }
.pw-load { display: block; height: 120px; border-radius: 12px; background: linear-gradient(90deg, var(--card-2) 25%, var(--line) 50%, var(--card-2) 75%); background-size: 200% 100%; animation: pwload 1.2s infinite; }
@keyframes pwload { to { background-position: -200% 0; } }
.pw-name { height: 48px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 15px; background: var(--card); color: var(--ink); outline: none; }
.pw-name:focus { border-color: var(--ink); }
.pw-name.bad { border-color: #b4472b; }
.pw-err { font-size: 13px; color: #b4472b; }
.pw-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pwsp .7s linear infinite; vertical-align: -3px; }
@keyframes pwsp { to { transform: rotate(360deg); } }
@media (max-width: 520px) { .pw-card { padding: 4px 12px 14px; } }
.pw-grp { border-top: 1px solid var(--line); }
.pw-list > .pw-grp:first-child { border-top: 0; }
.pw-grp > .pw-o { border-top: 0; }
.pw-grp.on { box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 14px; border-top-color: transparent; }
.pw-grp.on > .pw-o.on { box-shadow: none; }
.pw-grp.on + .pw-o, .pw-o.on + .pw-grp { border-top-color: transparent; }

/* trip details card (before payment) */
.tfacts { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.tf-h { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tf-h span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tf-h small { font-size: 13px; color: var(--muted); }
.tf-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tf-route > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tf-route .r { text-align: right; align-items: flex-end; }
.tf-route b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.tf-route small { font-size: 12.5px; color: var(--muted); }
.tf-code { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; background: var(--card-2); color: var(--ink-2); vertical-align: 3px; }
.tf-pl svg { width: 20px; height: 20px; color: var(--ink-2); }
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0; }
.tf-grid > div { padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tf-grid dt { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tf-grid dd { margin: 4px 0 0; font-size: 15.5px; font-weight: 500; }
.tf-map { margin-top: 16px; }
/* Whop checkout inside the Card option */
.pw-wcard { gap: 12px; }
.pw-wcard .pw-sum { margin-top: 0; }
.pw-wcard .pw-agree { margin-top: 0; }
.pw-whop { min-height: 72px; border-radius: 14px; }
.pw-whop .pw-load { height: 280px; }
.pw-gate { margin: 0; padding: 18px 16px; border: 1px dashed var(--line-2); border-radius: 14px; font-size: 13.5px; color: var(--muted); text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pw-o .pw-apb { margin-left: 5px; }

.pw-brands .btc { background: #f7931a; color: #fff; border-color: #f7931a; font-size: 13px; font-style: normal; }
.pw-brands .usdc { background: #2775ca; color: #fff; border-color: #2775ca; }
.pw-rt { display: flex; align-items: center; gap: 10px; }
.pw-coins { display: flex; }
.pw-coins i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; color: #fff; box-shadow: 0 0 0 2px var(--card, #fff); }
.pw-coins .btc { background: #f7931a; }
.pw-coins .eth { background: #627eea; margin-left: -6px; }
.pw-coins .eth svg { width: 9px; height: 14px; }
.pw-apb { height: 26px; padding: 0 8px; font-size: 13px; border-radius: 6px; }
.pw-apb svg { width: 13px; height: 13px; }

/* paying: compact right column so the whole payment fits on one screen */
.ts-pay { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ts-pay span { font-size: 15px; font-weight: 600; }
.ts-pay b { margin-left: auto; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.td-sum.paying { padding: 16px 18px; }
.td-sum.paying .td-pay { margin-top: 12px; }
.td-sum.paying .pw-h { margin-bottom: 8px; }
.td-sum.paying .pw-o { padding: 11px 14px; }
.td-sum.paying .pw-l small { font-size: 12px; }
.td-sum.paying .pw-card { padding-top: 0; }
.td-sum.paying .pw-agree { padding: 10px 12px; font-size: 13px; }
.td-sum.paying .pw-gate { padding: 12px; font-size: 13px; }
.td-sum.paying .pw-sum > div { padding-top: 6px; padding-bottom: 6px; }
.td-sum.paying .pw-trust { margin-top: 10px; padding-top: 10px; }
.td-sum.paying .td-acts { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.td-sum.paying .td-acts .tb { flex: 1; }
.td-sum.paying .td-cx { margin: 0; flex: none; }
.td-specs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Confirm and pay ---------- */
.cp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: "err err" "s s" "l r" "t r" ". r"; grid-template-rows: auto auto auto auto 1fr; gap: 0 48px; align-items: start; margin-top: 18px; }
.cp-l { grid-area: l; } .cp-r { grid-area: r; } .cp-trust { grid-area: t; } .cp > .td-pay-err { grid-area: err; margin-bottom: 14px; }
.cp .pw-o.on { border-radius: 0; }
.cp > .td-pay-err { grid-column: 1 / -1; margin: 0; }
.cp .lbl { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cp-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cp-row:first-child { padding-top: 4px; }
.cp-row b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.cp-row small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.cp-pay { padding-top: 18px; }
.cp-pay .lbl { margin-bottom: 10px; }
.cp .pw-list { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; }
.cp .pw-o { padding: 15px 16px; border-top: 1px solid var(--line); }
.cp .pw-o:first-child { border-top: 0; }
.cp .pw-o.on { background: transparent; box-shadow: none; outline: 0; }
.cp .pw-o.on + .pw-o { border-top-color: var(--line); }
.cp .pw-l b { font-size: 16px; font-weight: 500; }
.cp-trust { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.cp-trust li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.cp-trust li b { font-weight: 500; color: var(--ink); }
.cp-trust svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink); }
.cp-trust .link { padding: 0; font: inherit; color: var(--ink); text-decoration: underline; }
.cp-r { position: sticky; top: 0; min-width: 0; }
.cp-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -18px rgba(0,0,0,.18); }
.cp-top { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cp-top img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--card-2); }
.cp-top > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-top b { font-size: 17px; font-weight: 500; }
.cp-top small { font-size: 13.5px; color: var(--muted); }
.cp-lines { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cp-ln { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; }
.cp-ln span { color: var(--ink-2); }
.cp-ln b { font-weight: 500; }
.cp-ln.disc b { color: var(--gold-ink); }
.cp-ln.tot { padding: 16px 0 14px; }
.cp-ln.tot span, .cp-ln.tot b { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.cp-card .pw-agree { margin-top: 0; padding: 12px 14px; font-size: 13.5px; }
.cp-card .pw-whop, .cp-card .pw-act { margin-top: 14px; }
.cp-card .pw-gate { padding: 14px; font-size: 13.5px; }
.cp-card .pw-go { width: 100%; }
.cp-by { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.cp-by b { font-weight: 600; color: var(--ink-2); }
.cp-r .td-cx { display: block; margin: 12px auto 0; font-size: 14px; color: var(--muted); }
.cp-more { margin-top: 28px; }
@media (max-width: 900px) {
  .cp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "err" "s" "l" "r" "t"; grid-template-rows: none; gap: 0; }
  .cp-r { margin-top: 22px; }
  .cp-r { position: static; }
  .cp-card { padding: 18px; }
}

/* ---------- Confirm and pay · v2 ---------- */
.cp h3 { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.cp-flight { border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden; }
.cp-fh { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px dashed var(--line-2); }
.cp-route { display: flex; align-items: center; gap: 16px; padding: 20px 20px 16px; }
.cp-end { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-end.r { text-align: right; }
.cp-end b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.cp-end span { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-path { flex: 1; display: flex; align-items: center; gap: 8px; position: relative; color: var(--ink); min-width: 40px; }
.cp-dash { flex: 1; border-top: 1.5px dashed var(--line-2); }
.cp-pl svg { width: 18px; height: 18px; transform: rotate(90deg); display: block; }
.cp-path small { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); font-size: 12px; color: var(--muted); white-space: nowrap; }
.cp-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 0; border-top: 1px solid var(--line); }
.cp-meta > div { padding: 12px 20px; border-left: 1px solid var(--line); min-width: 0; }
.cp-meta > div:first-child { border-left: 0; }
.cp-meta dt { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.cp-meta dd { margin: 0; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-trav { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--card-2); }
.cp-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--bg, #fff); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.cp-trav > div { display: flex; flex-direction: column; min-width: 0; }
.cp-trav b { font-size: 15px; font-weight: 500; }
.cp-trav small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cp-sec { margin-top: 26px; }
.cp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cp-tile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 15px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cp-tile:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line-2)); }
.cp-tile.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), 0 8px 24px -16px rgba(0,0,0,.35); }
.cp-tile input { position: absolute; opacity: 0; pointer-events: none; }
.cp-tile-h { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-bottom: 8px; }
.cp-tile .pw-r { position: static; margin: 0; }
.cp-tile b { font-size: 15.5px; font-weight: 600; }
.cp-tile small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.cp-tile .pw-save { position: absolute; right: 14px; bottom: 14px; }
.cp-tile:has(.pw-save) small { padding-right: 78px; }
.cp-art { display: flex; align-items: center; }
.cp-bank { width: 30px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line-2); }
.cp-bank svg { width: 17px; height: 17px; }

.cp-next { margin-top: 26px; padding-top: 0; }
.cp-next ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cp-next li { display: flex; gap: 14px; position: relative; padding-bottom: 16px; }
.cp-next li:last-child { padding-bottom: 0; }
.cp-next li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 1px; background: var(--line-2); }
.cp-next i { width: 27px; height: 27px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); }
.cp-next b { display: block; font-size: 14.5px; font-weight: 500; margin-top: 3px; }
.cp-next small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.cp-next .link { padding: 0; font-size: 13px; color: var(--ink); text-decoration: underline; }

.cp-card { padding: 0; overflow: hidden; }
.cp-hero { position: relative; height: 150px; background: var(--card-2); }
.cp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62)); }
.cp-hero-t { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; color: #fff; }
.cp-hero-t span { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.cp-hero-t b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.cp-body { padding: 18px 22px 20px; }
.cp-body .cp-lines { padding: 0 0 10px; margin-bottom: 4px; }
.cp-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0 16px; }
.cp-tot span { font-size: 15px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.cp-tot span small { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--muted); }
.cp-tot b { font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.cp-by { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.cp-by svg { width: 13px; height: 13px; flex: none; }
@media (max-width: 900px) {
      .cp-end b { font-size: 28px; }
  .cp-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-meta > div:nth-child(3) { border-left: 0; }
  .cp-meta > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cp-route, .cp-fh, .cp-meta > div, .cp-trav { padding-left: 16px; padding-right: 16px; }
  .cp-hero { height: 120px; }
}
@media (max-width: 420px) { .cp-tiles { gap: 8px; } .cp-tile { padding: 12px 13px; } .cp-tile:has(.pw-save) small { padding-right: 0; } .cp-tile .pw-save { position: static; align-self: flex-start; margin-top: 6px; } }

.cp-next { grid-area: t; }
.cp-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-chk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg, #fff); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; flex: none; }
.cp-chk svg { width: 12px; height: 12px; }
.cp-tile.on .cp-chk { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .cp-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-meta > div:nth-child(3) { border-left: 1px solid var(--line); }
  .cp-meta > div:nth-child(n+3) { border-top: 0; }
  }
@media (max-width: 420px) { .cp-tile .pw-brands i { min-width: 28px; padding: 0 3px; font-size: 8.5px; } }
.cp-tot span { white-space: nowrap; }
@media (max-width: 420px) { .cp-tot b { font-size: 26px; } }

.cp-steps { display: flex; align-items: center; margin: 4px 0 22px; padding: 0; }
.cp-st { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 13px; color: var(--muted); }
.cp-st i { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 600; border: 1px solid var(--line-2); color: var(--muted); background: var(--card); }
.cp-st i svg { width: 12px; height: 12px; }
.cp-st.is-done i { background: var(--ink); border-color: var(--ink); color: var(--bg, #fff); }
.cp-st.is-done { color: var(--ink-2); }
.cp-st.is-now i { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent); }
.cp-st.is-now { color: var(--ink); font-weight: 600; }
.cp-st > span { white-space: nowrap; }
.cp-sl { flex: 1; min-width: 12px; height: 1.5px; margin: 0 10px; background: var(--line-2); border-radius: 2px; }
.cp-sl.is-done { background: var(--ink); }
@media (max-width: 900px) { .cp-st > span { display: none; } .cp-st.is-now > span { display: inline; } .cp-sl { margin: 0 6px; } }
.cp-steps { grid-area: s; max-width: 640px; }
/* progress: full width, centered, soft grey, rounded-square markers */
.cp-steps { max-width: none; justify-content: center; margin: 6px 0 26px; }
.cp-st i { border-radius: 7px; width: 24px; height: 24px; }
.cp-st.is-done i { background: var(--card-2); border-color: var(--line-2); color: var(--ink-2); }
.cp-st.is-done { color: var(--muted); }
.cp-sl { flex: 0 1 120px; }
.cp-sl.is-done { background: color-mix(in srgb, var(--ink) 28%, var(--line-2)); }
.cp-st.is-now i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent); }

.pw-pe { min-height: 120px; }
.pw-pay { width: 100%; margin-top: 14px; height: 52px; font-size: 16px; }
.pw-pay[disabled] { opacity: .45; cursor: not-allowed; }
.pw-brand { margin-top: 10px; }
.pw-whop .pw-err { margin: 10px 0 0; font-size: 13px; color: #b4472b; }

.wc { padding: 14px 0 4px; }
.wc b { display: block; font-size: 15px; font-weight: 600; }
.wc p { margin: 4px 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.wc-pe { min-height: 110px; }
.wc-go { width: 100%; margin-top: 12px; }
.wc-br { margin-top: 10px; }

.cp-body .cp-lines { padding: 2px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.cp-tip { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; cursor: help; }

.cp-zelle { width: 30px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: #6d1ed4; color: #fff; font-weight: 800; font-size: 16px; font-style: normal; }
.cp-tiles > .cp-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.zl { display: flex; align-items: center; gap: 14px; padding: 14px 0 6px; }
.zl img { width: 120px; height: 120px; border-radius: 10px; border: 1px solid var(--line); background: #fff; padding: 6px; flex: none; image-rendering: pixelated; }
.zl p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
/* payment proof (wire / Zelle) */
.pp { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.pp-h { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.pp-l { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.pp-l input { font: inherit; font-size: 14.5px; color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 12px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pp-l input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.pp.is-err .pp-l input, .pp.is-err .pp-f { border-color: #c0392b; }
.pp-f { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; border: 1px dashed var(--line-2); border-radius: 10px; padding: 11px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.pp-f:hover { border-color: var(--gold); background: var(--gold-soft); }
.pp-f input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.pp-fi { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--gold-soft); color: var(--gold-ink); }
.pp-fn { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-f small { font-size: 11.5px; color: var(--muted); }
.pp-f.is-set { border-style: solid; border-color: var(--gold); }
.pp-n { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pp .book { width: 100%; }
.pp-ok { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 13px; color: var(--gold-ink); }

.pp-or { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: -2px 0; }
.pp-or::before, .pp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* payment methods: list view */
.cp-tiles { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--card); }
.cp-tiles > .cp-tile:last-child:nth-child(odd) { grid-column: auto; }
.cp-tile { flex-direction: row; align-items: center; gap: 14px; padding: 15px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cp-tile + .cp-tile { border-top: 1px solid var(--line); }
.cp-tile:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); border-color: var(--line); }
.cp-tile.on { background: color-mix(in srgb, var(--ink) 4.5%, transparent); box-shadow: none; border-color: var(--line); }
.cp-rad { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: border-color .15s, border-width .15s; }
.cp-tile.on .cp-rad { border: 6px solid var(--ink); }
.cp-tile input:focus-visible ~ .cp-rad { box-shadow: 0 0 0 3px var(--gold-soft); }
.cp-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cp-txt b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 600; }
.cp-tile small, .cp-tile:has(.pw-save) small { padding-right: 0; font-size: 12.5px; }
.cp-tile .pw-save, .cp-txt .pw-save { position: static; font-size: 11px; padding: 2px 8px; margin: 0; }
.cp-tile .cp-art { flex: none; display: flex; justify-content: flex-end; }
.cp-tile .cp-chk { display: none; }
@media (max-width: 420px) { .cp-tile { padding: 13px 12px; gap: 11px; } .cp-tile .pw-save { margin-top: 0; } .cp-tile .pw-brands i:nth-child(n+3) { display: none; } }
.cp-tile .cp-txt small { display: none; }
.cp-tile { padding-top: 16px; padding-bottom: 16px; }

/* pay button shown before the terms are ticked; pressing it asks for the tick */
.pw-gatebtn { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cp-card .pw-apbtn, .pw-apbtn.book { background: #000; color: #fff; border-color: #000; }
.pw-apb-l { display: inline-flex; align-items: center; gap: 2px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.pw-apb-l svg { width: 22px; height: 22px; margin-top: -3px; }
.pw-express { min-height: 52px; }
/* once Whop's form is on the page it shows its own "Powered by Whop" + terms line, so ours goes away */
.cp.agreed .cp-by.is-whop { display: none; }
/* footer line: lock icon sits inline with the text, never on its own row */
.cp-by { display: block; text-wrap: balance; }
.cp-by svg { display: inline-block; vertical-align: -2px; margin-right: 5px; }
/* destination cards: country in regular weight, like the landing page */
.hc-dest .hd-t small { font-weight: 400; }
/* agreement tick: one line */
.cp-card .pw-agree { align-items: center; gap: 10px; padding: 12px 13px; font-size: 13px; letter-spacing: -.005em; }
.cp-card .pw-agree input { margin-top: 0; }
/* checkout reassurance block */
.cp-trust { border-top: 1px solid var(--line); padding-top: 22px !important; }
.cp-trust svg { width: 20px; height: 20px; flex: none; }
.cpt-h { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.cpt-h svg { margin-top: 0; }
.cp-trust ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.cp-trust li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.cp-trust li svg { color: var(--ink-2); opacity: .75; }
.cp-trust li a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cp-trust li { padding-bottom: 0 !important; }
.cp-trust li::before { display: none !important; }
.cp-trust ul { gap: 12px; }
/* dashboard next trip: Pay now as a quiet black button */
.ddh-pay { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 18px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 14px; font-weight: 600; transition: opacity .15s; }
.ddh-pay svg { width: 14px; height: 14px; }
.dd-hero:hover .ddh-pay { opacity: .88; }
/* next-trip photo always fills the card height */
.dd-frame .ddh-ph { max-height: none; min-height: 210px; }
/* operator disclosure before payment (DOT Part 295) */
.cp-op { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 13px; }
.cp-op span { color: var(--muted); }
.cp-op b { font-weight: 500; color: var(--ink); }
.cp-op small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.4; }
/* operator details: folded */
details.cp-op { display: block; padding: 0; border-top: 1px solid var(--line); }
details.cp-op summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; font-size: 13px; color: var(--muted); }
details.cp-op summary::-webkit-details-marker { display: none; }
details.cp-op summary svg { width: 15px; height: 15px; }
details.cp-op summary:hover { color: var(--ink); }
details.cp-op > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 0 18px 13px; font-size: 13px; }
details.cp-op[open] summary { color: var(--ink); }
/* operator details inside the reassurance list */
.cpt-op details { min-width: 0; }
.cpt-op summary { list-style: none; cursor: pointer; }
.cpt-op summary::-webkit-details-marker { display: none; }
.cpt-op summary u { color: inherit; text-underline-offset: 3px; margin-left: 4px; white-space: nowrap; }
.cpt-op details[open] summary u { display: none; }
.cpt-op p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.cpt-op p b { font-weight: 500; color: var(--ink); }
/* bookings list: Pay now as a solid button (same as the dashboard) */
.tp-pay { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px 0 17px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.tp-pay svg { width: 13px; height: 13px; }
.trip:hover .tp-pay { opacity: .88; }
/* bookings list cards (computer only): bigger photo and text, price above the actions. Phones keep the compact card. */
@media (min-width: 701px) {
  .trip.trip-bk { grid-template-columns: 116px 1fr auto !important; gap: 22px; padding: 18px 22px 18px 18px; align-items: center; }
  .trip.trip-bk > img { width: 116px; height: 116px; border-radius: 16px; }
  .trip.trip-bk .k { font-size: 11.5px; }
  .trip.trip-bk .r { font-size: 19px; margin: 5px 0 4px; letter-spacing: -.01em; }
  .trip.trip-bk .m { font-size: 14.5px; }
  .trip.trip-bk .rt { display: flex !important; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; grid-column: auto !important; text-align: right; }
  .trip.trip-bk .rt > b { margin: 0 !important; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
  .trip.trip-bk .rt-a { display: flex; align-items: center; gap: 14px; }
  .trip.trip-bk .rt-a .link { font-size: 13.5px; }
}
.trip .k .k-tag { margin-left: 10px; vertical-align: 1px; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
/* phone: compact card; Cancel and Pay now spaced; Confirmed tag on its own small line */
@media (max-width: 700px) {
  .trip.trip-bk .rt-a { display: flex; align-items: center; gap: 14px; }
  .trip.trip-bk .k .k-tag { display: table; margin: 5px 0 1px; font-size: 11px; padding: 2px 8px; }
}
/* Confirmed: tag on computers, just a green tick next to the booking code on phones */
.trip .k .k-tag svg { display: none; }
@media (max-width: 700px) {
  .trip.trip-bk .k .k-tag { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; margin: 0 0 0 6px; border-radius: 50%; vertical-align: -4px; }
  .trip.trip-bk .k .k-tag span { display: none; }
  .trip.trip-bk .k .k-tag svg { display: block; width: 11px; height: 11px; }
}
@media (max-width: 700px) { .trip.trip-bk .k .k-tag { width: 18px !important; height: 18px !important; min-width: 0 !important; padding: 0 !important; display: inline-grid !important; margin: 0 0 0 6px !important; } }
/* messages list: status top-right, Open chat button under it */
.mp-card { align-items: stretch; }
.mp-card img { align-self: center; }
.mp-t { justify-content: center; }
.mp-r { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; position: relative; }
.mp-open { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--card); white-space: nowrap; transition: background .15s; }
.mp-open svg { width: 15px; height: 15px; }
.mp-card:hover .mp-open { background: var(--card-2); }
.mp-r > .nd { position: absolute; top: -4px; right: -4px; margin: 0; }
@media (max-width: 520px) { .mp-open { height: 30px; padding: 0 11px; font-size: 12.5px; } .mp-card { grid-template-columns: 64px 1fr auto; } .mp-card img { width: 64px; height: 64px; } }
@media (max-width: 700px) { .trip.trip-bk .k { display: flex; align-items: center; flex-wrap: wrap; } .trip.trip-bk .k .k-tag { vertical-align: 0 !important; border-radius: 50% !important; width: 17px !important; height: 17px !important; } }
/* next-trip label: wraps between the type and the booking code, never inside the code */
.ddh-kt span { white-space: nowrap; }
/* account on wide screens: the back button sits to the left of the menu card, level with its top (narrower screens keep it top-left) */
@media (min-width: 1320px) {
  body.v-acc:not(.sq-open):not(:has(#ov)) .dk-back { top: 96px !important; left: calc((100vw - 1180px) / 2 - 66px) !important; }
}
/* experiences: coming soon cards (not clickable) */
.hc-soon .hc-ph img { object-fit: cover; }
.hc-soon .hc-b { cursor: default; text-align: left; }
.hc-soon .hc-b small { color: var(--gold-ink); }
.hc-soon .hc-chip { position: absolute; top: 12px; left: 12px; }
.hc-soon, .hc-soon:hover { background: transparent !important; box-shadow: none !important; transform: none !important; cursor: default; }
/* maps on tickets are fixed pictures: no dragging or zooming, page scrolls over them */
.td-map .ub-svg, .tf-map .ub-svg, .issued .ub-svg { pointer-events: none; touch-action: auto; }
.td-map .ub-zm, .tf-map .ub-zm, .issued .ub-zm { display: none !important; }
/* checkout on phones: jet photo + name on top of the flight table; the price card keeps only the price */
.cp-hero-m { display: none; }
@media (max-width: 900px) {
  .cp-flight .cp-hero-m { display: block; height: 150px; }
  .cp-card > .cp-hero { display: none; }
}
/* next-trip label: text wraps (between type and code) and the status tag always stays inside the card */
.ddh-k .ddh-kt { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; column-gap: .35em; }
.ddh-k .tag { flex: none; }
/* phone keyboard open over a popup: the popup fits the visible area above the keyboard */
@media (max-width: 700px) {
  body.kb-open #ov { top: var(--vvt, 0px) !important; bottom: auto !important; height: var(--vvh, 100dvh) !important; }
  body.kb-open #ov .dlg { max-height: calc(var(--vvh, 100dvh) - 8px) !important; }
}
/* account on computers: no empty band on top; the menu card and content start near the top */
@media (min-width: 900px) {
  body.v-acc #main > .acc { padding-top: 32px !important; margin-top: 0 !important; }
  body.v-acc .acc { padding-top: 32px !important; }
  body.v-acc .dside { top: 32px; }
  body.v-acc:not(.sq-open):not(:has(#ov)) .dk-back { top: 32px !important; }
}
@media (min-width: 900px) { body.v-acc .dk-bar { display: none !important; } }
/* detailed map (MapLibre): tiles underneath, our route/pins SVG on top and click-through */
.ub-map > .ub-gl { position: absolute !important; inset: 0; z-index: 0; }
.ub-map.gl-on .ub-svg { z-index: 1; pointer-events: none; }
.ub-map.gl-on .ub-zm { z-index: 2; }
.ub-gl .maplibregl-ctrl-attrib { font-size: 10px; }
.ub-gl .maplibregl-ctrl-bottom-right { bottom: 0; }
html[data-sj-theme="dark"] .ub-map.gl-on .maplibregl-ctrl-attrib { background: rgba(20,20,20,.7); color: #999; }
html[data-sj-theme="dark"] .ub-map.gl-on .maplibregl-ctrl-attrib a { color: #aaa; }
/* map credit: a small (i) under the top bar, out of the way of the sheet */
.ub-map > .ub-gl .maplibregl-ctrl-top-right { top: 78px; right: 4px; }
#main.ub-mode .ub-map > .ub-gl .maplibregl-ctrl-top-right { top: 84px; }
.ub-map > .ub-gl .maplibregl-ctrl-attrib.maplibregl-compact { opacity: .55; }
/* fixed-size street map: pinned to the top of the map area; the route layer has the same size */
.ub-map.gl-fixed > .ub-gl { bottom: auto !important; height: var(--glh); }
.ub-map.gl-fixed.gl-on .ub-svg { top: 0; bottom: auto; height: var(--glh); }
/* the map credit only opens when tapped */
.ub-map > .ub-gl .maplibregl-ctrl-attrib.maplibregl-compact:not(:hover):not(:focus-within) .maplibregl-ctrl-attrib-inner { display: none !important; }
.ub-map > .ub-gl .maplibregl-ctrl-attrib.maplibregl-compact:not(:hover):not(:focus-within) { padding: 0 !important; min-height: 24px; }
/* tiny map credit on a white chip, top-right under the search bar */
.ub-cr { display: none; }
.ub-map.gl-on > .ub-cr { display: block; position: absolute; top: 78px; right: 8px; z-index: 2; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.85); color: #777; font-size: 9px; line-height: 14px; text-decoration: none; }
#main.ub-mode .ub-map.gl-on > .ub-cr { top: 84px; }
html[data-sj-theme="dark"] .ub-map.gl-on > .ub-cr { background: rgba(20,20,20,.75); color: #999; }
/* once the street map exists, new map spots never show the old drawn map underneath (no flash) */
html.gl-ready .ub-map[data-gl] .ub-water, html.gl-ready .ub-map[data-gl] .ub-geo, html.gl-ready .ub-map[data-gl] .ub-lbls { display: none; }
html.gl-ready .ub-map[data-gl] { background: #f4f4f4; }
html.gl-ready[data-sj-theme="dark"] .ub-map[data-gl] { background: #1b1b1b; }
/* map credit: plain white text, bottom-right of the visible map (just above the list sheet on phones) */
.ub-map.gl-on > .ub-cr, #main.ub-mode .ub-map.gl-on > .ub-cr, html[data-sj-theme="dark"] .ub-map.gl-on > .ub-cr { top: auto; bottom: 34px; right: 10px; padding: 0; background: none; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.35), 0 0 1px rgba(0,0,0,.4); font-size: 9px; }
@media (min-width: 900px) { .ub-map.gl-on > .ub-cr, #main.ub-mode .ub-map.gl-on > .ub-cr { bottom: 10px; right: 14px; } }
.ub-map.gl-on > .ub-cr, #main.ub-mode .ub-map.gl-on > .ub-cr, html[data-sj-theme="dark"] .ub-map.gl-on > .ub-cr { text-shadow: none !important; }
/* still street map on tickets: tiles under the route, credit in the corner */
.ub-map.gls-init.gl-on .ub-svg { z-index: 1; pointer-events: none; }
.ub-map.gls-init.gl-on .ub-water, .ub-map.gls-init.gl-on .ub-geo { display: none; }
.ub-map.gls-init.gl-on > .ub-cr { bottom: 6px !important; right: 9px !important; top: auto !important; font-size: 8px !important; }
/* quote cards: aircraft picture on top */
.td-off-ph { margin: -2px 0 12px; border-radius: 14px; overflow: hidden; background: var(--card-2); aspect-ratio: 16 / 7; display: grid; place-items: center; }
.td-off-ph img { width: 100%; height: 100%; object-fit: contain; }
.td-off .td-row b small { font-weight: 400; color: var(--muted); margin-left: 3px; }
/* traveler declined our quotes: new options coming */
.td-requote { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; margin: 14px 0 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card-2); }
.td-requote b { display: block; font-size: 15px; font-weight: 600; }
.td-requote p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.rq-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); animation: rqp 1.8s ease-in-out infinite; }
@keyframes rqp { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 6%, transparent); } }
/* quote request view: what was asked + the options */
.rq-legs { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rq-leg { display: flex; gap: 12px; align-items: flex-start; }
.rq-leg i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; background: var(--card-2); color: var(--muted); margin-top: 2px; }
.rq-leg b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.rq-leg .rq-ar { color: var(--muted); font-weight: 400; }
.rq-leg small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.rq-msg { padding-top: 12px; }
.rq-msg span { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rq-msg p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }
.rq-side .rq-oh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rq-side .rq-oh b { font-size: 17px; font-weight: 600; }
.rq-side .td-requote { margin-top: 0; }
/* accept / decline in progress */
.td-off-a button.loading { position: relative; color: transparent !important; pointer-events: none; }
.td-off-a button.loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--btn-ink, #fff) transparent var(--btn-ink, #fff) transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }