/* FlightScope v3.8.0 — minimal light neumorphism.
   One surface color everywhere; depth comes from paired light/dark soft shadows.
   Raised = interactive/resting, inset = pressed/active/input. Teal is the only accent.
   Selectors and layout metrics match v3.7.x exactly — this is chrome only. */
:root {
  --ink: #2f3b52;
  --muted: #76829a;
  --line: #d3dae8;
  --surface: #e4e9f2;
  --bg: #e4e9f2;
  --well: #dde3ee;
  /* Accent (v3.8.1: orange — variable names kept from the teal era to avoid churn) */
  --teal: #e97312;
  --teal-dark: #b1560c;
  --teal-soft: rgba(233, 115, 18, .14);
  --navy: #35415c;
  --amber: #f5a524;
  --sh-dark: #c2cadb;
  --sh-light: #ffffff;
  --out-sm: 4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light);
  --out: 8px 8px 18px var(--sh-dark), -8px -8px 18px var(--sh-light);
  --out-lg: 14px 14px 30px #bcc5d7, -14px -14px 30px var(--sh-light);
  --in-sm: inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light);
  --in: inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light);
  --shadow: var(--out-lg);
}
* { box-sizing: border-box; }
body { margin: 0; padding-top: 36px; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.promo-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: 36px; background: var(--bg); box-shadow: 0 4px 12px rgba(178, 188, 208, .55); color: var(--teal-dark); text-align: center; font: 800 11px/36px Inter, sans-serif; letter-spacing: .14em; }
.app-shell { min-height: 100vh; background: var(--bg); }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(28px, calc((100vw - 1180px)/2)); background: rgba(228, 233, 242, .9); backdrop-filter: blur(12px); position: sticky; top: 36px; z-index: 20; box-shadow: 0 6px 16px rgba(178, 188, 208, .35); }
.brand { display: flex; align-items: center; gap: 10px; font-family: Manrope, sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--teal); box-shadow: var(--out-sm); }
.topnav { display: flex; align-items: center; gap: 8px; }
.nav-link { border: 0; background: transparent; color: var(--muted); font-weight: 600; padding: 10px 14px; border-radius: 999px; }
.nav-link.active { color: var(--teal-dark); box-shadow: var(--in-sm); }
.count-pill { background: var(--bg); color: var(--teal-dark); border-radius: 999px; font-size: 11px; padding: 2px 8px; margin-left: 3px; box-shadow: var(--in-sm); }
.avatar { border: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 12px; font-weight: 700; margin-left: 8px; box-shadow: var(--out-sm); }
main { max-width: 1180px; margin: 0 auto; padding: 58px 28px 90px; }
.hero { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; margin-bottom: 34px; }
.eyebrow, .section-label { margin: 0 0 8px; color: var(--teal-dark); font-weight: 800; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3 { font-family: Manrope, sans-serif; margin-top: 0; }
h1 { max-width: 720px; font-size: clamp(38px, 5vw, 62px); line-height: 1.03; letter-spacing: -.045em; margin-bottom: 18px; }
h1 span { color: var(--teal); }
.hero-copy { max-width: 760px; color: var(--muted); font-size: 17px; line-height: 1.65; margin: 0; }
.hero-stat { min-width: 245px; display: flex; gap: 12px; align-items: center; padding: 15px 18px; background: var(--bg); border-radius: 16px; box-shadow: var(--out-sm); }
.hero-stat strong, .hero-stat small { display: block; }
.hero-stat strong { font-size: 13px; }
.hero-stat small { color: var(--muted); margin-top: 3px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(233, 115, 18, .16); }
.search-card { background: var(--bg); box-shadow: var(--out-lg); border-radius: 28px; padding: 30px; }
.search-card-header, .filter-header, .results-header, .form-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.search-card h2 { margin-bottom: 0; font-size: 24px; }
.mode-switch { display: flex; background: var(--bg); padding: 5px; border-radius: 999px; box-shadow: var(--in); }
.mode-switch button { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 700; }
.mode-switch button.active { background: var(--bg); color: var(--teal-dark); box-shadow: var(--out-sm); }
.grid { display: grid; gap: 18px; }
.grid-main { grid-template-columns: 1.5fr 1fr 1fr; margin-top: 28px; }
.grid-filters { grid-template-columns: repeat(4, 1fr); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { color: #4a5670; font-weight: 700; font-size: 12px; }
.field-wide { grid-column: span 2; }
input, select { width: 100%; border: 0; background: var(--bg); color: var(--ink); border-radius: 14px; min-height: 46px; padding: 0 15px; outline: none; box-shadow: var(--in); }
input:focus, select:focus { box-shadow: var(--in), 0 0 0 3px rgba(233, 115, 18, .2); }
.input-wrap { position: relative; }
.input-wrap > span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); z-index: 1; }
.input-wrap input { padding-left: 38px; text-transform: uppercase; }
.airport-picker { display: flex; gap: 12px; }
.airport-chip { flex: 1; position: relative; text-align: left; border: 0; background: var(--bg); min-height: 62px; padding: 10px 42px 10px 15px; border-radius: 16px; box-shadow: var(--out-sm); transition: box-shadow .15s, color .15s; }
.airport-chip strong, .airport-chip small { display: block; }
.airport-chip strong { font-size: 16px; }
.airport-chip small { color: var(--muted); margin-top: 3px; }
.airport-chip i { display: none; position: absolute; right: 14px; top: 20px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-style: normal; text-align: center; line-height: 22px; }
.airport-chip.selected { box-shadow: var(--in); color: var(--teal-dark); }
.airport-chip.selected strong { color: var(--teal-dark); }
.airport-chip.selected i { display: block; }
.divider { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sh-dark), var(--sh-light)); opacity: .55; margin: 30px 0; }
.filter-header { margin-bottom: 18px; }
.filter-header h3 { font-size: 18px; margin-bottom: 0; }
.text-button { border: 0; background: transparent; color: var(--teal-dark); font-size: 12px; font-weight: 700; }
.preference-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.toggle-label { border: 0; background: var(--bg); box-shadow: var(--out-sm); border-radius: 14px; padding: 14px; display: flex; gap: 11px; align-items: center; cursor: pointer; }
.toggle-label input { display: none; }
.toggle { width: 40px; height: 23px; background: var(--bg); box-shadow: var(--in-sm); border-radius: 999px; position: relative; flex: none; transition: .2s; }
.toggle:after { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); top: 4px; left: 4px; transition: .2s; box-shadow: 2px 2px 5px var(--sh-dark), -1px -1px 3px var(--sh-light); }
.toggle-label input:checked + .toggle { background: var(--teal); box-shadow: inset 2px 2px 5px rgba(122, 60, 4, .5); }
.toggle-label input:checked + .toggle:after { transform: translateX(17px); background: #fff; }
.toggle-label strong, .toggle-label small { display: block; }
.toggle-label strong { font-size: 12px; }
.toggle-label small { color: var(--muted); font-size: 10px; line-height: 1.35; margin-top: 3px; }
.form-footer { margin-top: 28px; }
#providerStatus { margin: 0; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.primary-button { border: 0; background: linear-gradient(135deg, #f08118, #d2690b); color: #fff; min-height: 50px; padding: 0 8px 0 20px; border-radius: 16px; display: inline-flex; align-items: center; gap: 17px; font-weight: 800; box-shadow: 6px 6px 14px rgba(196, 103, 10, .38), -5px -5px 12px var(--sh-light); transition: box-shadow .15s, transform .12s; }
.primary-button:hover { transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); box-shadow: inset 3px 3px 8px rgba(122, 60, 4, .45); }
.primary-button b { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 20px; }
.results-section { margin-top: 42px; }
.hidden { display: none !important; }
.results-header { align-items: flex-end; margin-bottom: 18px; }
.results-header h2 { margin-bottom: 7px; font-size: 28px; }
.results-header p { color: var(--muted); margin: 0; font-size: 13px; }
.sort-control { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.sort-control select { width: 160px; }
.results-list { display: grid; gap: 18px; }
.flight-card { background: var(--bg); border-radius: 22px; overflow: hidden; box-shadow: var(--out); transition: transform .18s, box-shadow .18s; }
.flight-card:hover { transform: translateY(-2px); box-shadow: var(--out-lg); }
.flight-main { display: grid; grid-template-columns: 115px 1fr 155px; gap: 20px; align-items: center; padding: 22px; }
.airline-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.airline-logo { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--bg); color: var(--teal-dark); font-weight: 800; box-shadow: var(--out-sm); }
.airline-block strong { font-size: 12px; }
.airline-block small { color: var(--muted); font-size: 10px; }
.route-block { min-width: 0; }
.route-times { display: grid; grid-template-columns: 95px 1fr 95px; gap: 12px; align-items: center; }
.time strong, .time small { display: block; }
.time strong { font-size: 22px; }
.time small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.time.arrive { text-align: right; }
.route-line { text-align: center; }
.route-line small { color: var(--muted); font-size: 10px; }
.line { height: 2px; border-radius: 2px; background: var(--well); box-shadow: var(--in-sm); position: relative; margin: 7px 0; }
.line:before, .line:after { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--teal); }
.line:before { left: 0; }.line:after { right: 0; }
.stop-dot { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.flight-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.tag { border-radius: 999px; background: var(--bg); box-shadow: var(--in-sm); color: #5b6880; padding: 5px 10px; font-size: 10px; font-weight: 700; }
.tag.good { color: var(--teal-dark); background: var(--teal-soft); box-shadow: none; }
.price-block { text-align: right; border-left: 2px solid var(--well); padding-left: 20px; }
.match-score { color: var(--teal-dark); font-size: 11px; font-weight: 800; margin-bottom: 8px; }
.price { font-family: Manrope, sans-serif; font-size: 25px; font-weight: 800; }
.price-block small { color: var(--muted); display: block; margin-top: 2px; }
.card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.secondary-button, .save-button { min-height: 36px; border-radius: 999px; padding: 0 14px; font-size: 11px; font-weight: 800; }
.secondary-button { background: var(--bg); color: var(--teal-dark); border: 0; box-shadow: var(--out-sm); }
.secondary-button:active { box-shadow: var(--in-sm); }
.save-button { background: var(--bg); color: var(--ink); border: 0; box-shadow: var(--out-sm); }
.save-button:active { box-shadow: var(--in-sm); }
.save-button.saved { color: var(--teal-dark); box-shadow: var(--in-sm); }
.card-detail { padding: 12px 22px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; background: var(--well); box-shadow: var(--in-sm); }
.empty-state { text-align: center; padding: 55px 20px; background: var(--bg); border-radius: 22px; box-shadow: var(--out); }
.empty-state > div { font-size: 38px; color: var(--teal); }
.empty-state h3 { margin: 12px 0 6px; }
.empty-state p { color: var(--muted); margin: 0; }
dialog { border: 0; border-radius: 28px; padding: 0; background: var(--bg); box-shadow: 24px 24px 70px rgba(103, 116, 143, .45), -18px -18px 50px rgba(255, 255, 255, .5); color: var(--ink); }
dialog::backdrop { background: rgba(96, 108, 134, .38); backdrop-filter: blur(5px); }
.seat-dialog { width: min(860px, calc(100vw - 28px)); }
.saved-dialog { width: min(680px, calc(100vw - 28px)); padding: 28px; }
.dialog-close { position: absolute; right: 16px; top: 13px; border: 0; background: var(--bg); box-shadow: var(--out-sm); width: 34px; height: 34px; border-radius: 50%; font-size: 21px; z-index: 2; color: var(--ink); }
.dialog-close:active { box-shadow: var(--in-sm); }
.seat-hero { min-height: 240px; padding: 35px; color: var(--ink); display: flex; align-items: flex-end; background: linear-gradient(150deg, #f0e4d5, var(--bg) 62%); border-radius: 28px 28px 0 0; }
.seat-hero h2 { margin: 4px 0 7px; font-size: 32px; }
.seat-hero p { margin: 0; color: var(--muted); }
.seat-content { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 30px; }
.seat-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spec { background: var(--bg); box-shadow: var(--in-sm); padding: 13px; border-radius: 13px; }
.spec strong, .spec small { display: block; }
.spec small { color: var(--muted); margin-top: 3px; }
.cabin-visual { background: var(--well); box-shadow: var(--in); border-radius: 90px 90px 20px 20px; padding: 34px 24px 24px; display: grid; grid-template-columns: 1fr 22px 1fr; gap: 10px; }
.seat { height: 38px; background: var(--teal); border-radius: 8px 8px 13px 13px; box-shadow: inset 0 -7px rgba(0, 0, 0, .09); }
.aisle { grid-row: span 4; }
/* Generated per-flight cabin layout diagram */
.cabin-visual2 { background: var(--well); box-shadow: var(--in); border-radius: 60px 60px 18px 18px; padding: 28px 22px 14px; display: flex; flex-direction: column; gap: 8px; }
.cabin-visual2 .seat-row { display: flex; justify-content: center; align-items: center; gap: 6px; }
.cabin-visual2 .seat-row.roomy { margin-bottom: 5px; }
.cabin-visual2 .aisle-gap { width: 22px; flex: none; }
.seat-unit { display: block; width: 26px; height: 22px; background: var(--teal); border-radius: 6px 6px 9px 9px; box-shadow: inset 0 -4px rgba(0, 0, 0, .12); }
.seat-unit.premium { width: 42px; height: 30px; background: var(--navy); border-radius: 9px 9px 13px 13px; box-shadow: inset 0 -5px rgba(255, 255, 255, .14); }
.cabin-config-note { display: block; text-align: center; color: var(--muted); margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.saved-item { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.saved-item p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.saved-item button { border: 0; background: var(--bg); box-shadow: var(--out-sm); border-radius: 10px; padding: 8px 10px; color: var(--ink); }
.saved-item button:active { box-shadow: var(--in-sm); }
@media (max-width: 880px) {
  .hero { align-items: flex-start; flex-direction: column; }
  .grid-main { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: span 2; }
  .grid-filters, .preference-row { grid-template-columns: 1fr 1fr; }
  .flight-main { grid-template-columns: 80px 1fr; }
  .price-block { grid-column: span 2; border-left: 0; border-top: 2px solid var(--well); padding: 15px 0 0; text-align: left; display: flex; align-items: center; justify-content: space-between; }
}
@media (max-width: 620px) {
  .topbar { padding: 0 16px; }
  .nav-link:first-child { display: none; }
  main { padding: 36px 16px 60px; }
  .hero-stat { width: 100%; }
  .search-card { padding: 20px; border-radius: 22px; }
  .search-card-header, .filter-header, .results-header, .form-footer { align-items: flex-start; flex-direction: column; }
  .grid-main, .grid-filters, .preference-row { grid-template-columns: 1fr; }
  .field-wide { grid-column: span 1; }
  .airport-picker { flex-direction: column; }
  .primary-button { width: 100%; justify-content: space-between; }
  .flight-main { grid-template-columns: 1fr; }
  .airline-block { flex-direction: row; align-items: center; }
  .price-block { grid-column: span 1; }
  .route-times { grid-template-columns: 75px 1fr 75px; }
  .time strong { font-size: 17px; }
  .card-detail { flex-direction: column; gap: 5px; }
  .seat-content { grid-template-columns: 1fr; }
}
.escape-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 22px;margin-bottom:24px;border:0;border-radius:20px;background:var(--bg);box-shadow:var(--out)}.escape-panel h3{margin:2px 0 4px;font-size:22px}.escape-panel p{margin:0;color:var(--muted);font-size:13px}.escape-panel .primary-button{min-width:240px}@media(max-width:700px){.escape-panel{align-items:stretch;flex-direction:column}.escape-panel .primary-button{width:100%;min-width:0}}

/* Destination discovery moods */
.mood-block { margin: 2px 0 4px; }
.mood-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mood-chip { border: 0; background: var(--bg); box-shadow: var(--out-sm); color: #4a5670; border-radius: 999px; padding: 9px 17px; font-size: 13px; font-weight: 700; transition: box-shadow .15s, color .15s; }
.mood-chip:hover { color: var(--teal-dark); }
.mood-chip.active { box-shadow: var(--in); color: var(--teal-dark); }

/* Cabin preview confidence badges */
.confidence-badge { display: inline-block; margin-left: 8px; border-radius: 999px; padding: 3px 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; box-shadow: var(--in-sm); }
.confidence-badge.exact { background: #d7eee2; color: #0b6a48; }
.confidence-badge.close { background: #dbe7f5; color: #1d5e9e; }
.confidence-badge.rep { background: #f2e7cd; color: #8a5f07; }

/* Airport location hover cards */
.airport-hover { position: relative; display: inline-flex; align-items: center; cursor: help; font-weight: 700; color: var(--teal-dark); }
.airport-tooltip { position: absolute; z-index: 50; left: 50%; bottom: calc(100% + 10px); width: 255px; transform: translateX(-50%) translateY(4px); padding: 12px 14px; border-radius: 14px; background: #3a465f; color: #fff; box-shadow: 10px 12px 30px rgba(84, 96, 122, .45); opacity: 0; visibility: hidden; pointer-events: none; transition: .16s ease; text-align: left; white-space: normal; }
.airport-tooltip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: #3a465f; }
.airport-tooltip strong, .airport-tooltip small { display: block; }
.airport-tooltip strong { font-size: 12px; line-height: 1.35; color: #fff; }
.airport-tooltip small { margin-top: 4px; color: rgba(255,255,255,.75) !important; font-size: 11px; line-height: 1.35; }
.airport-hover:hover .airport-tooltip, .airport-hover:focus .airport-tooltip, .airport-hover:focus-within .airport-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.airport-chip::after { content: attr(title); position: absolute; left: 8px; right: 8px; bottom: calc(100% + 9px); z-index: 40; padding: 9px 10px; border-radius: 10px; background: #3a465f; color: #fff; font: 600 11px/1.35 Inter, sans-serif; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: .15s ease; }
.airport-chip:hover::after, .airport-chip:focus::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* Actual seat and cabin photos */
.seat-photo-section { padding: 0 30px 30px; }
.photo-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 14px; }
.photo-heading h3 { margin: 4px 0 0; }
.photo-heading > span { max-width: 310px; color: var(--muted); font-size: 11px; text-align: right; }
.seat-photo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-height: 150px; }
.seat-photo { display: block; overflow: hidden; border: 0; border-radius: 16px; background: var(--bg); box-shadow: var(--out-sm); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.seat-photo:hover { transform: translateY(-2px); box-shadow: var(--out); }
.seat-photo img { width: 100%; height: 190px; object-fit: cover; display: block; background: var(--well); }
.seat-photo span { display: block; padding: 9px 11px; font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-loading, .photo-empty { grid-column: 1 / -1; min-height: 145px; display: grid; place-items: center; padding: 24px; border: 0; border-radius: 16px; background: var(--well); box-shadow: var(--in-sm); color: var(--muted); text-align: center; }
.photo-search-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.photo-search-actions a { padding: 9px 13px; border-radius: 999px; background: var(--bg); box-shadow: var(--out-sm); border: 0; color: var(--teal-dark); font-size: 12px; font-weight: 700; text-decoration: none; }
.photo-search-actions a:hover { color: var(--teal); }
.photo-disclaimer { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
@media (max-width: 680px) {
  .seat-photo-gallery { grid-template-columns: 1fr 1fr; }
  .seat-photo img { height: 150px; }
  .photo-heading { align-items: start; flex-direction: column; }
  .photo-heading > span { text-align: left; }
  .airport-tooltip { width: 210px; left: 0; transform: translateY(4px); }
  .airport-hover:hover .airport-tooltip, .airport-hover:focus .airport-tooltip { transform: translateY(0); }
  .airport-tooltip::after { left: 18px; }
}

/* Ride comfort: chips, dialog, route map, day-by-day outlook */
.ride-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font-family: inherit; line-height: 1.4; }
.ride-chip.pending { color: var(--muted); background: var(--bg); box-shadow: var(--in-sm); cursor: default; }
.ride-chip.pending .ride-dot { background: #a9b4c6; animation: ridePulse 1.2s ease infinite; }
.ride-chip.err, .ride-chip.far { background: var(--bg); box-shadow: var(--in-sm); color: var(--muted); }
.ride-chip.far { cursor: pointer; }
.ride-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
@keyframes ridePulse { 50% { opacity: .35; } }
.band-calm { background: #d7eee2; color: #0b6a48; border-color: transparent; }
.band-smooth { background: #d8eae6; color: #0b5f57; border-color: transparent; }
.band-light { background: #f2e7cd; color: #8a5f07; border-color: transparent; }
.band-moderate { background: #f4dfc9; color: #94470e; border-color: transparent; }
.band-rough { background: #f2d5d2; color: #9c2a22; border-color: transparent; }
.ride-dialog { width: min(880px, calc(100vw - 28px)); }
.ride-hero { min-height: 210px; }
.route-arrow { color: var(--teal); font-weight: 400; }
.ride-hero .airport-code, .ride-hero .airport-hover { color: var(--ink); }
.ride-score-wrap { display: flex; align-items: center; gap: 15px; margin-top: 16px; }
.ride-score { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; flex: none; padding-top: 22px; border: 0; box-shadow: var(--out-sm); }
.ride-score strong { font-family: Manrope, sans-serif; font-size: 27px; line-height: 1; }
.ride-score span { font-size: 12px; opacity: .75; }
.ride-score.far-score { background: var(--bg); box-shadow: var(--in-sm); color: var(--ink); align-items: center; padding-top: 0; }
.ride-score-label strong { display: block; font-size: 17px; }
.ride-score-label small { color: var(--muted); line-height: 1.45; display: block; margin-top: 3px; max-width: 480px; }
.ride-body { padding: 26px 30px 30px; display: grid; gap: 24px; }
.ride-loading { padding: 60px 30px; text-align: center; color: var(--muted); }
.ride-map { width: 100%; border-radius: 18px; display: block; margin-top: 10px; box-shadow: var(--in-sm); }
.map-water { fill: #d5dcea; }
.map-land { fill: #bfc9dc; stroke: #aab6cd; }
.map-label { fill: #2f3b52; font: 800 20px Manrope, sans-serif; paint-order: stroke; stroke: #e4e9f2; stroke-width: 5px; }
.route-arc { fill: none; stroke: #d2690b; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 9; }
.route-arc-glow { fill: none; stroke: rgba(210, 105, 11, .3); stroke-width: 8; stroke-linecap: round; }
.endpoint { fill: #fff; stroke: #5b6880; stroke-width: 2.5; }
.wp-dot { stroke: #ffffff; stroke-width: 2; }
.wp-dot.band-calm { fill: #27b98a; }
.wp-dot.band-smooth { fill: #43b3a2; }
.wp-dot.band-light { fill: #e0ac31; }
.wp-dot.band-moderate { fill: #e07f2e; }
.wp-dot.band-rough { fill: #d94a3d; }
.ride-profile-wrap { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11px; font-weight: 800; color: var(--muted); }
.ride-profile { flex: 1; display: flex; gap: 3px; height: 14px; }
.profile-cell { flex: 1; border-radius: 6px; border: 0; cursor: help; }
.factor-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.factor-list li { display: flex; gap: 10px; align-items: flex-start; background: var(--bg); box-shadow: var(--in-sm); border-radius: 13px; padding: 11px 13px; font-size: 13px; line-height: 1.45; }
.factor-list i { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; }
.factor-list .sev-high i { background: #d94a3d; }
.factor-list .sev-medium i { background: #e07f2e; }
.factor-list .sev-low i { background: #4a90d9; }
.factor-list .sev-good i { background: #27b98a; }
.day-bars { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.day-col { flex: 1; min-width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 13px; border: 0; cursor: help; }
.day-col.flight { box-shadow: var(--in-sm); background: var(--teal-soft); }
.day-col.best { box-shadow: var(--in-sm); background: #f0e8d2; }
.day-col.best.flight { background: var(--teal-soft); }
.day-score { font-size: 11px; font-weight: 800; color: var(--ink); }
.day-bar { width: 22px; border-radius: 7px 7px 4px 4px; border: 0; box-shadow: 2px 2px 4px rgba(163, 174, 196, .5); }
.day-name { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.day-date { font-size: 11px; font-weight: 700; color: var(--ink); }
.day-star, .day-flag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.day-star { color: #8a5f07; }
.day-flag { color: var(--teal-dark); }
.dest-weather { margin: 0; background: var(--bg); box-shadow: var(--in-sm); border-radius: 13px; padding: 12px 14px; font-size: 13px; }
@media (max-width: 680px) {
  .ride-body { padding: 20px 16px 24px; }
  .day-col { min-width: 44px; }
  .ride-score-wrap { align-items: flex-start; }
}
.profile-cell.band-calm { background: #27b98a; }
.profile-cell.band-smooth { background: #43b3a2; }
.profile-cell.band-light { background: #e0ac31; }
.profile-cell.band-moderate { background: #e07f2e; }
.profile-cell.band-rough { background: #d94a3d; }

/* Bag + connection quality filters and risk labels */
.bags-header { margin: 22px 0 12px; }
.bags-header h3 { font-size: 16px; margin: 0; }
.preference-row.bags-row { margin-top: 0; margin-bottom: 4px; }
.tag.warn { background: #f2e7cd; color: #8a5f07; border: 0; box-shadow: none; }
.tag.risk { background: #f2d5d2; color: #9c2a22; border: 0; box-shadow: none; }
.card-alert { margin: 0 22px 14px; padding: 12px 15px; border-radius: 13px; background: #f6dbd8; box-shadow: var(--in-sm); border: 0; color: #7c211a; font-size: 12px; line-height: 1.55; }
.card-alert strong { color: #9c2a22; }
.card-alert .airport-code, .card-alert .airport-hover { color: #9c2a22; font-weight: 800; }
@media (max-width: 880px) { .preference-row.bags-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .preference-row.bags-row { grid-template-columns: 1fr; } }

/* Interactive seat map */
.seatmap-wrap { background: var(--well); box-shadow: var(--in); border-radius: 44px 44px 18px 18px; padding: 18px 14px 14px; }
.seatmap-scroll { max-height: 430px; overflow-y: auto; border-radius: 12px; padding: 4px 2px; }
.seatmap { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.sm-row { display: flex; align-items: center; gap: 4px; position: relative; }
.sm-row.sm-exit { padding: 3px 0; }
.sm-rownum { width: 20px; font-size: 9px; font-weight: 800; color: var(--muted); text-align: center; flex: none; }
.sm-aisle { width: 16px; flex: none; }
.sm-seat { width: 26px; height: 24px; border-radius: 7px 7px 9px 9px; border: 0; font-size: 9px; font-weight: 800; display: grid; place-items: center; padding: 0; transition: transform .1s; box-shadow: 2px 2px 4px rgba(163, 174, 196, .55), -1px -1px 3px rgba(255, 255, 255, .8); }
.sm-seat:hover { transform: scale(1.15); z-index: 2; }
.sm-seat.selected { outline: 2px solid var(--teal-dark); outline-offset: 1px; }
.sm-seat.s-best { background: #b5e6cf; color: #0b6a48; }
.sm-seat.s-good { background: #cfe6e1; color: #0b5f57; }
.sm-seat.s-std { background: #dde3ec; color: #5b6880; }
.sm-seat.s-care { background: #f0e0ba; color: #855a08; }
.sm-seat.s-avoid { background: #efccc7; color: #93251d; }
.sm-exit-tag { font-size: 8px; font-weight: 800; letter-spacing: .06em; color: #b3261e; flex: none; font-style: normal; }
.sm-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 10px; font-weight: 700; color: #5b6880; }
.sm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sm-legend i { width: 13px; height: 12px; border-radius: 4px; display: inline-block; }
.sm-legend .s-best { background: #b5e6cf; }
.sm-legend .s-good { background: #cfe6e1; }
.sm-legend .s-std { background: #dde3ec; }
.sm-legend .s-care { background: #f0e0ba; }
.sm-legend .s-avoid { background: #efccc7; }
.sm-advice { margin: 10px 0 0; min-height: 18px; font-size: 12px; line-height: 1.5; color: var(--ink); }
.ext-map-links { margin-top: 8px; font-size: 11px; color: var(--muted); }
.ext-map-links a { color: var(--teal-dark); font-weight: 700; text-decoration: none; }
.ext-map-links a:hover { text-decoration: underline; }
.sm-note { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* Traveler notes */
.notes-section { padding: 0 30px 26px; }
.notes-section h3 { margin: 4px 0 14px; }
.notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.note-group { background: var(--bg); box-shadow: var(--in-sm); border-radius: 14px; padding: 14px 16px; }
.note-group h4 { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-dark); }
.note-group ul { margin: 0; padding-left: 17px; }
.note-group li { font-size: 12.5px; line-height: 1.55; color: var(--ink); margin-bottom: 6px; }
.note-group li:last-child { margin-bottom: 0; }
@media (max-width: 680px) { .notes-grid { grid-template-columns: 1fr; } .notes-section { padding: 0 16px 22px; } }

/* Points + value panel */
.value-panel { margin-top: 18px; }
.value-grid { margin-top: 2px; }
.value-disclaimer { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* Related reading from the travel blogs */
.blog-list { display: grid; gap: 10px; }
.blog-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--bg); box-shadow: var(--out-sm); border: 0; border-radius: 14px; padding: 11px 14px; text-decoration: none; color: var(--ink); transition: transform .12s, box-shadow .15s; }
.blog-item:hover { transform: translateX(2px); box-shadow: var(--out); }
.blog-src { font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.blog-title { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.blog-date { font-size: 10px; color: var(--muted); white-space: nowrap; }
@media (max-width: 680px) { .blog-item { grid-template-columns: 1fr; gap: 5px; } }
.blog-meta { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.blog-why { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5b6880; background: var(--bg); box-shadow: var(--in-sm); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
@media (max-width: 680px) { .blog-meta { justify-content: flex-start; } }

/* Multi-select pick chips (cabin, departure time) */
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pick-chip { border: 0; background: var(--bg); box-shadow: var(--out-sm); color: #4a5670; border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 700; transition: box-shadow .15s, color .15s; }
.pick-chip:hover { color: var(--teal-dark); }
.pick-chip.active { box-shadow: var(--in); color: var(--teal-dark); }
.chip-hint { color: var(--muted); font-size: 10px; }

/* Traveler extras strip (meals, menus, amenities) below the seat gallery */
.seat-extra-section { margin-top: 20px; }
.seat-extra-section .photo-heading { margin-bottom: 10px; }
.seat-extra-section h3 { font-size: 15px; }
.seat-extra-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 0; }
.seat-extra-gallery .seat-photo img { height: 118px; }
.seat-extra-gallery .seat-photo span { font-size: 10px; padding: 7px 9px; }
@media (max-width: 680px) { .seat-extra-gallery { grid-template-columns: 1fr 1fr; } }