/* travel-kit.css — the Travel Center public design language.
   Editorial, photography-first: full-bleed heroes, one display serif
   (Playfair Display) over the platform text face (Inter), generous whitespace,
   restrained chrome. EVERY color is a theme.css var so a skin change recolors
   the whole travel section. Cards/panels use var(--bg); the page uses
   var(--surface) — same contract as kit.css. */

:where(.tv) { font-family: var(--font); }

/* ---------- type ---------- */
.tv-disp { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 600; letter-spacing: -0.015em; line-height: 1.04; }
.tv-eyebrow { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--brand); }
.tv-lede { color: var(--muted); font-size: 1.06rem; line-height: 1.75; }
.tv-rule { width: 54px; height: 2px; background: var(--brand); border: 0; margin: 18px 0; }
.tv-rule.center { margin-left: auto; margin-right: auto; }

/* ---------- shell ---------- */
.tv-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.tv-wrap.narrow { max-width: 880px; }
.tv-section { padding: 5.5rem 0; }
.tv-section.tight { padding: 3.5rem 0; }
@media (max-width: 767px) { .tv-section { padding: 3.5rem 0; } }

/* ---------- nav ---------- */
.tv-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: background .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; }
.tv-nav.solid { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px) saturate(160%); border-bottom-color: var(--border); }
.tv-nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.tv-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); }
.tv-brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--accent)); color: var(--on-brand,#0a0a0a); font-weight: 800; font-size: 1rem; flex: 0 0 38px; }
.tv-brand-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.22rem; letter-spacing: .01em; line-height: 1; }
.tv-links { display: flex; align-items: center; gap: 1.6rem; }
.tv-links a { color: var(--muted); text-decoration: none; font-size: .875rem; font-weight: 600; letter-spacing: .02em; transition: color .18s; }
.tv-links a:hover, .tv-links a.on { color: var(--text); }
/* core's public-nav.js injects the OTHER installed modules' public pages into the
   [data-public-nav] mount as bare anchors. The mount is one flex CHILD of .tv-links,
   so without its own gap those links render jammed together ("JournalReviewsFAQ").
   Match the rail's own spacing so injected links are indistinguishable from ours. */
.tv-links [data-public-nav] { display: inline-flex; align-items: center; gap: 1.6rem; }
@media (max-width: 940px) { .tv-links { display: none; } }
.tv-burger { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 8px; }
@media (max-width: 940px) { .tv-burger { display: inline-flex; } }
.tv-drawer { display: none; background: var(--surface); border-top: 1px solid var(--border); padding: 14px 1.5rem 22px; }
.tv-drawer.open { display: block; }
.tv-drawer a { display: block; padding: 12px 0; color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--border); }
.tv-drawer a:last-child { border-bottom: 0; }
/* Phones: keep the brand, the CTA and the burger on ONE line. A long business name
   otherwise wraps to two lines and pushes the CTA into the burger. */
@media (max-width: 600px) {
  .tv-nav-inner { height: 66px; gap: .6rem; padding: 0 1rem; }
  .tv-brand-mark { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; font-size: .9rem; }
  .tv-brand-name { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
  .tv-nav .tv-btn.sm { padding: 8px 13px; font-size: .76rem; white-space: nowrap; }
}

/* SECTION MODE (travel_settings.section_mode): the module is a SECTION of a bigger
   site, so instead of the host's whole nav being injected into this header there is
   ONE quiet way back. Reads as chrome, never competes with the travel links. */
.tv-back { display: inline-flex; align-items: center; gap: .45rem; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; transition: color .18s, border-color .18s, background .18s; }
.tv-back:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 32%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); }
.tv-drawer .tv-back-row { display: block; padding: 12px 0; color: var(--muted); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--border); }
/* Section tag on the brand lockup — only added when the back-link repeats the brand name. */
.tv-brand-sec { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; color: var(--brand); border-left: 1px solid var(--border); padding-left: .6rem; margin-left: .1rem; }
@media (max-width: 600px) { .tv-brand-sec { display: none; } }

/* ---------- book-direct rail (destination.book_direct_url) ---------- */
.tv-direct { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; text-decoration: none; color: var(--text); border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--border)); border-radius: 20px; padding: 26px 30px; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 10%, var(--bg)), var(--bg) 62%); transition: transform .2s, box-shadow .25s, border-color .2s; }
.tv-direct:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 18px 40px -26px var(--brand); }
.tv-direct .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 48px; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.tv-direct .txt { flex: 1 1 320px; min-width: 0; }
.tv-direct .txt strong { display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.32rem; letter-spacing: -.01em; }
.tv-direct .txt span { display: block; color: var(--muted); font-size: .95rem; line-height: 1.6; margin-top: 6px; }
.tv-direct .go { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 800; font-size: .9rem; white-space: nowrap; }
@media (max-width: 600px) { .tv-direct { padding: 22px; gap: 16px; } }

/* ---------- buttons ---------- */
.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: .9rem; letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 1px solid transparent; background: var(--brand); color: var(--on-brand,#0a0a0a); transition: transform .18s, box-shadow .25s, background .18s, border-color .18s, color .18s; }
.tv-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px var(--brand); }
.tv-btn.ghost { background: transparent; color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.tv-btn.ghost:hover { border-color: var(--brand); color: var(--brand); box-shadow: none; }
.tv-btn.sm { padding: 10px 18px; font-size: .82rem; }
.tv-link { color: var(--brand); text-decoration: none; font-weight: 700; font-size: .875rem; display: inline-flex; align-items: center; gap: 7px; }
.tv-link:hover { color: var(--accent); }

/* ---------- hero ---------- */
.tv-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; }
.tv-hero.short { min-height: 62vh; }
.tv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-hero-scrim { position: absolute; inset: 0; background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 62%, transparent) 0%, transparent 26%, transparent 44%, color-mix(in srgb, var(--surface) 92%, transparent) 92%, var(--surface) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 72%, transparent) 0%, transparent 62%); }
.tv-hero-inner { position: relative; width: 100%; padding: 0 0 5.5rem; }
.tv-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); margin: 14px 0 0; max-width: 16ch; }
.tv-hero p.sub { max-width: 46ch; margin-top: 20px; font-size: 1.1rem; line-height: 1.7; color: color-mix(in srgb, var(--text) 78%, transparent); }
.tv-hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- destination cards ---------- */
.tv-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.tv-dest { position: relative; display: block; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--text); background: var(--bg); border: 1px solid var(--border); }
.tv-dest .ph { position: relative; aspect-ratio: 4/5; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, var(--bg)); }
.tv-dest .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.tv-dest:hover .ph img { transform: scale(1.07); }
.tv-dest .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--surface) 78%, transparent) 74%, var(--surface) 100%); }
.tv-dest .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; }
.tv-dest .cap .where { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 62%, transparent); font-weight: 700; }
.tv-dest .cap h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.5rem; margin: 6px 0 0; line-height: 1.15; }
.tv-dest .cap p { font-size: .84rem; color: color-mix(in srgb, var(--text) 66%, transparent); margin: 7px 0 0; line-height: 1.5; }
.tv-dest .flag { position: absolute; top: 16px; left: 16px; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 13px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- deal cards ---------- */
.tv-deals { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.tv-deal { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s; }
.tv-deal:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: 0 24px 50px -24px var(--brand); }
.tv-deal .ph { aspect-ratio: 16/10; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, var(--bg)); position: relative; }
.tv-deal .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.tv-deal:hover .ph img { transform: scale(1.05); }
.tv-deal .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.tv-deal h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.28rem; line-height: 1.25; margin: 0 0 6px; }
.tv-deal .meta { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.tv-deal .blurb { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 10px 0 0; }
.tv-deal ul.hl { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 7px; }
.tv-deal ul.hl li { font-size: .85rem; color: color-mix(in srgb, var(--text) 74%, transparent); display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.tv-deal ul.hl li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex: 0 0 5px; margin-top: 7px; }
.tv-deal .foot { margin-top: auto; padding-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.tv-price { line-height: 1.1; }
.tv-price .from { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.tv-price .amt { font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; font-weight: 600; color: var(--text); }
.tv-price .note { display: block; font-size: .74rem; color: var(--muted); margin-top: 4px; }
.tv-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 12px; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
.tv-chip.on-photo { position: absolute; top: 14px; left: 14px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(8px); color: var(--text); border-color: var(--border); }
.tv-chip.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.tv-disclose { font-size: .72rem; color: var(--muted); margin-top: 12px; line-height: 1.5; }

/* ---------- rail (horizontal deal strip) ---------- */
.tv-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 360px); gap: 22px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.tv-rail > * { scroll-snap-align: start; }

/* ---------- advisor block ---------- */
.tv-advisor { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .tv-advisor { grid-template-columns: 1fr; gap: 30px; } }
.tv-advisor .portrait { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; background: var(--bg); border: 1px solid var(--border); }
.tv-advisor .portrait img { width: 100%; height: 100%; object-fit: cover; }
.tv-cred { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tv-cred span { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: .76rem; color: var(--muted); font-weight: 600; }

/* ---------- panels / forms ---------- */
.tv-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 34px; }
@media (max-width: 640px) { .tv-panel { padding: 22px; } }
.tv-field { margin-bottom: 22px; }
.tv-field > label { display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.tv-field .hint { font-size: .82rem; color: var(--muted); margin: -4px 0 10px; line-height: 1.5; }
.tv-field input, .tv-field textarea, .tv-field select { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 14px 16px; font-size: 1rem; font-family: inherit; }
.tv-field input:focus, .tv-field textarea:focus, .tv-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.tv-field input::placeholder, .tv-field textarea::placeholder { color: color-mix(in srgb, var(--muted) 76%, transparent); }
.tv-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.tv-pill { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 10px 18px; font-size: .86rem; font-weight: 600; cursor: pointer; transition: .18s; font-family: inherit; }
.tv-pill:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--text); }
.tv-pill.on { background: color-mix(in srgb, var(--brand) 16%, transparent); border-color: var(--brand); color: var(--brand); }
.tv-step { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 800; color: var(--brand); margin-bottom: 8px; }
.tv-err { color: var(--bad); font-size: .88rem; margin-top: 12px; min-height: 1em; }

/* ---------- stats / trust ---------- */
.tv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.tv-stats > div { background: var(--surface); padding: 30px 24px; text-align: center; }
.tv-stats .n { font-family: 'Playfair Display', Georgia, serif; font-size: 2rem; font-weight: 600; color: var(--text); display: block; }
.tv-stats .l { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 8px; display: block; }

/* ---------- empty state ---------- */
.tv-empty { border: 1px dashed var(--border); border-radius: 20px; padding: 64px 28px; text-align: center; color: var(--muted); }
.tv-empty h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; color: var(--text); margin: 0 0 8px; font-weight: 600; }

/* ---------- footer ---------- */
.tv-foot { border-top: 1px solid var(--border); padding: 3.5rem 0 2.5rem; margin-top: 2rem; }
.tv-foot .cols { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.tv-foot a { color: var(--muted); text-decoration: none; }
.tv-foot a:hover { color: var(--brand); }
.tv-foot .legal { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; line-height: 1.6; }

/* ---------- hero search card (Expedia-pattern "jump right in") ----------
   Sits over the hero photo and leads the page: product tabs, pill fields,
   optional bundle add-ons, one big Search button. Glassy so the photography
   still reads through it; every color is a theme var. */
.tv-search { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--border); border-radius: 22px; padding: 16px 16px 18px; box-shadow: 0 34px 80px -40px color-mix(in srgb, var(--text) 60%, transparent); max-width: 1000px; }
.tv-search-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 14px; }
.tv-search-tabs::-webkit-scrollbar { display: none; }
.tv-tab { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 999px; padding: 9px 15px; font-size: .84rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: color .18s, background .18s, border-color .18s; }
.tv-tab:hover { color: var(--text); }
.tv-tab.on { background: color-mix(in srgb, var(--brand) 15%, transparent); border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand); }
.tv-tab i, .tv-tab svg { width: 16px; height: 16px; }

.tv-srow { display: grid; grid-template-columns: 1.5fr 1.35fr 1.1fr auto; gap: 10px; align-items: stretch; }
@media (max-width: 900px) { .tv-srow { grid-template-columns: 1fr 1fr; } .tv-srow .tv-sfield.wide, .tv-srow .tv-sgo { grid-column: 1 / -1; } }
@media (max-width: 560px) { .tv-srow { grid-template-columns: 1fr; } }

.tv-sfield { position: relative; display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 11px 15px; min-height: 62px; text-align: left; cursor: text; transition: border-color .18s, box-shadow .18s; }
.tv-sfield:focus-within, .tv-sfield.open { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.tv-sfield > i, .tv-sfield > svg { width: 18px; height: 18px; color: var(--brand); flex: 0 0 18px; }
.tv-sfield .in { flex: 1; min-width: 0; }
.tv-sfield .lab { display: block; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: 3px; }
.tv-sfield input.q { width: 100%; background: transparent; border: 0; outline: none; color: var(--text); font-size: .98rem; font-family: inherit; font-weight: 600; padding: 0; }
.tv-sfield input.q::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); font-weight: 500; }
.tv-sfield.btn { cursor: pointer; width: 100%; }
.tv-sfield.btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.tv-sfield .val { display: block; color: var(--text); font-size: .98rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tv-sgo { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 14px; background: var(--brand); color: var(--on-brand,#0a0a0a); font-family: inherit; font-weight: 800; font-size: .95rem; padding: 0 30px; min-height: 62px; cursor: pointer; transition: transform .18s, box-shadow .25s; }
.tv-sgo:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px var(--brand); }

.tv-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--text) 70%, transparent); padding: 14px; display: none; }
.tv-pop.open { display: block; }
.tv-pop.dates { width: min(420px, 88vw); }
.tv-pop.people { width: min(320px, 88vw); }
.tv-pop .ttl { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.tv-pop .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tv-pop input[type=date] { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 11px 12px; font-family: inherit; font-size: .92rem; }
.tv-pop input[type=date]:focus { outline: none; border-color: var(--brand); }
.tv-pop .nights { font-size: .8rem; color: var(--muted); margin-top: 10px; }
.tv-pop .done { width: 100%; margin-top: 12px; border: 0; border-radius: 10px; background: var(--brand); color: var(--on-brand,#0a0a0a); font-family: inherit; font-weight: 700; font-size: .85rem; padding: 10px; cursor: pointer; }

.tv-step-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; }
.tv-step-row + .tv-step-row { border-top: 1px solid var(--border); }
.tv-step-row .who { font-size: .9rem; font-weight: 700; color: var(--text); }
.tv-step-row .who small { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.tv-stepper { display: flex; align-items: center; gap: 12px; }
.tv-stepper button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer; font-family: inherit; }
.tv-stepper button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.tv-stepper button:disabled { opacity: .35; cursor: default; }
.tv-stepper .n { min-width: 18px; text-align: center; font-weight: 700; font-size: .95rem; }

.tv-sugg { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--text) 70%, transparent); padding: 6px; display: none; max-height: 320px; overflow-y: auto; }
.tv-sugg.open { display: block; }
.tv-sugg button { display: flex; width: 100%; gap: 11px; align-items: center; text-align: left; background: transparent; border: 0; border-radius: 11px; padding: 9px 10px; cursor: pointer; font-family: inherit; color: var(--text); }
.tv-sugg button:hover, .tv-sugg button.cursor { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.tv-sugg .thumb { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; flex: 0 0 42px; background: color-mix(in srgb, var(--text) 10%, var(--bg)); }
.tv-sugg button > span { min-width: 0; }
.tv-sugg .nm { display: block; font-size: .92rem; font-weight: 700; line-height: 1.25; }
.tv-sugg .sb { display: block; font-size: .76rem; color: var(--muted); margin-top: 1px; }
/* The hero search and the "Not sure yet?" quick links are BOTH transformed by AOS,
   so each opens its own stacking context at the same level under .tv-wrap. Without
   this, the later-in-DOM quick links paint OVER the search's absolutely-positioned
   suggestion dropdown (whose z-index is trapped inside .tv-search-holder). Lift the
   whole search holder above the quick links so the dropdown always covers them. */
.tv-search-holder { position: relative; z-index: 20; }

.tv-addons { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.tv-addons label { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.tv-addons input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.tv-addons label:hover { color: var(--text); }
.tv-bundle { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); }
.tv-serr { color: var(--bad); font-size: .82rem; margin: 10px 0 0; min-height: 1em; }
.tv-quick { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 18px; font-size: .84rem; color: color-mix(in srgb, var(--text) 72%, transparent); }

/* ---------- search summary (plan-my-trip handoff) ---------- */
.tv-summary { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; margin-bottom: 22px; }
.tv-summary .hd { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tv-summary .hd h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.15rem; margin: 0; }
.tv-summary .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tv-summary .chips span { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-size: .82rem; color: var(--text); font-weight: 600; }
.tv-summary .chips span i, .tv-summary .chips span svg { width: 14px; height: 14px; color: var(--brand); }