/*
 * Never Layover — Application Styles
 */

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:       #3b82f6;
  --blue-dark:  #1d4ed8;
  --blue-light: #eff6ff;
  --gray-50:    #f9fafb;
  --gray-100:   #f3f4f6;
  --gray-200:   #e5e7eb;
  --gray-400:   #9ca3af;
  --gray-600:   #4b5563;
  --gray-800:   #1f2937;
  --white:      #ffffff;
  --radius:     8px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.1);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--gray-50);
  color: var(--gray-800);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ─── Navbar ────────────────────────────────────────────────── */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--blue-dark);
}

.brand-icon { font-size: 1.4rem; }

/* ─── Flash ─────────────────────────────────────────────────── */
.flash {
  padding: 12px 24px;
  font-size: .875rem;
  text-align: center;
}
.flash-notice { background: #dcfce7; color: #166534; }
.flash-alert  { background: #fee2e2; color: #991b1b; }

/* ─── Hero / Home ───────────────────────────────────────────── */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 50%, #fafafa 100%);
  padding: 48px 24px 36px;
}

.hero-content {
  max-width: 700px;
  width: 100%;
  text-align: center;
}

.hero-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--gray-800);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--gray-600);
  margin-bottom: 24px;
  line-height: 1.55;
}

@media (max-width: 480px) {
  .hero { padding: 32px 16px 24px; }
}

/* ─── Search ────────────────────────────────────────────────── */
.search-container,
.search-bar-compact {
  position: relative;
  width: 100%;
}

.search-bar-compact {
  max-width: 380px;
}

.search-bar-large {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 16px;
  font-size: 1rem;
  color: var(--gray-400);
  pointer-events: none;
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 14px 48px 14px 44px;
  font-size: 1rem;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.search-bar-compact .search-input {
  padding: 10px 44px 10px 40px;
  font-size: .9rem;
  border-radius: 8px;
}

.search-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.search-spinner {
  position: absolute;
  right: 14px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--blue);
  border-radius: 50%;
  display: none;
}

.search-spinner.active {
  display: block;
  animation: spin .6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  list-style: none;
  z-index: 200;
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
}

.autocomplete-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  transition: background .12s;
  text-decoration: none;
}

.autocomplete-list li[data-selectable]:hover a,
.autocomplete-list li[data-selectable].highlighted a {
  background: var(--blue-light);
}

.no-results {
  padding: 12px 16px;
  font-size: .875rem;
  color: var(--gray-400);
}

.result-icon {
  font-size: .9rem;
  color: var(--blue);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.result-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.result-name {
  font-size: .9rem;
  font-weight: 500;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-location {
  font-size: .78rem;
  color: var(--gray-400);
}

.result-iata {
  font-weight: 700;
  font-size: .875rem;
  color: var(--blue-dark);
  flex-shrink: 0;
  background: var(--blue-light);
  padding: 2px 7px;
  border-radius: 4px;
}

.city-result-badge {
  font-weight: 700;
  font-size: .875rem;
  color: #6d28d9;
  flex-shrink: 0;
  background: #ede9fe;
  padding: 2px 7px;
  border-radius: 4px;
}

/* City group header in select-mode dropdown — non-clickable banner with
   indented airport rows beneath. Mirrors the Google Flights pattern
   where typing "Mexico City" surfaces a city group with MEX/NLU inside. */
.result-city-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 6px;
  background: var(--gray-50, #f9fafb);
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  cursor: default;
}
.result-city-header .result-name {
  font-weight: 700;
  color: var(--gray-900, #111827);
}
.result-city-header .result-location {
  color: var(--gray-500, #6b7280);
}
.result-airport-nested a { padding-left: 36px; }

/* Mobile fullscreen overlay for the airport picker. Same pattern as
   .dr-panel @<=640px — the picker takes the entire viewport with a
   sticky back-arrow header so the user has a single thing to focus on.
   Inspired by the Google Flights airport search UX. */
/* Hidden by default and on desktop. Only shown when the overlay is
   open AND we're on a mobile viewport — the rule lives inside the
   media query below so a closed picker on mobile still hides it. */
.as-mobile-header { display: none; }

@media (max-width: 640px) {
  .as--open {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--white, #fff);
    padding: 0 14px calc(14px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .as--open .search-input-wrapper {
    margin: 4px 0 10px;
    flex: 0 0 auto;
  }
  /* Override the route_pair form's lopsided top padding (22px/8px,
     designed to fit a floating label that doesn't exist in the
     fullscreen overlay). Symmetric padding centers "Paris" inside
     the box. Bumped specificity past .rp-search-airport-input
     (0,1,0) is automatic; the explicit padding is what matters. */
  .as--open .rp-search-airport-input {
    padding: 16px 16px;
    font-size: 1rem;
  }
  /* Bumped to .rp-search-airport .as--open ... (0,3,0) to beat the
     later-defined .rp-search-airport .autocomplete-list (0,2,0) that
     would otherwise force position: absolute; top: 100% and push the
     list off the bottom of the fullscreen viewport. */
  .rp-search-airport .as--open .autocomplete-list,
  .as--open .autocomplete-list.autocomplete-list {
    position: static;
    margin-top: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    flex: 1;
  }
  .as--open .autocomplete-list li a { padding: 14px 8px; }
  .as--open .result-city-header { padding: 14px 8px 8px; }
  .as--open .result-airport-nested a { padding-left: 32px; }
  .as--open .as-mobile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    padding: 12px 0 10px;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    margin: 0 0 8px;
    z-index: 1;
  }
  .as-mobile-back {
    appearance: none;
    border: 0;
    background: none;
    padding: 6px 10px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--gray-800, #1f2937);
    cursor: pointer;
  }
  .as-mobile-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
  }
  body.as-body-locked { overflow: hidden; }
}

/* ─── Example airports ─────────────────────────────────────── */
.example-airports {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.example-label {
  font-size: .85rem;
  color: var(--gray-400);
}

.example-link {
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue-dark);
  transition: background .15s, border-color .15s;
}

.example-link:hover {
  background: var(--blue-light);
  border-color: var(--blue);
}

/* ─── Route search (homepage) ───────────────────────────────── */
.route-search-container {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Tabs sit at the top of the hero search "card". Underline-style tabs
   that visually attach to the form below — not a segmented pill. Two
   intent modes (specific-route vs. browse-from-airport) share the
   submit pipeline; tabs are pure presentation + a To-field hide on
   Explore. */
.route-search-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  margin-bottom: 6px;
}
.route-search-tab {
  flex: 0 0 auto;
  padding: 12px 18px;
  border: 0; background: transparent;
  color: var(--gray-500, #6b7280);
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer; user-select: none;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;  /* sit on top of the parent's border */
  transition: color 100ms, border-color 100ms;
}
.route-search-tab:hover { color: var(--gray-800, #1f2937); }
.route-search-tab.is-active {
  color: var(--blue-dark, #1d4ed8);
  border-bottom-color: var(--blue, #3b82f6);
}
@media (max-width: 480px) {
  .route-search-tab { padding: 10px 12px; font-size: 0.85rem; }
}

.route-search-fields {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.route-search-field {
  flex: 1;
  min-width: 0;
  position: relative;
}

.route-search-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  padding-left: 4px;
}

.route-search-swap {
  flex-shrink: 0;
  width: 36px;
  height: 44px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-600);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  align-self: flex-end;
}
/* Explicit overrides: the class's `display: flex` would otherwise beat
   the UA `[hidden] { display: none }` rule when the explore tab hides
   these elements. */
.route-search-swap[hidden],
.route-search-field[hidden] { display: none; }

.route-search-swap:hover {
  background: var(--blue-light);
  color: var(--blue-dark);
  border-color: var(--blue);
}

.route-search-btn {
  width: 100%;
  padding: 12px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}

.route-search-btn:hover {
  background: var(--blue-dark);
}

.example-routes {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Airport flex-date search ─────────────────────────────────
   Search every nonstop destination from this airport in a flexible
   window. Collapsed-by-default `<details>` chip — taps open inline
   to keep the map above-the-fold on mobile. Submits to
   /airports/:iata/flex_search and renders cards into the turbo-frame
   inside the body (collapsing also hides results — avoids orphan
   results without a visible form context). */
/* Deals tab panel — sibling of the Map and List panels. The tab button
   appears only when @airport_deals is non-empty (see _routes_content.html.erb),
   and carries a small red dot to draw attention. */
.tab-btn--with-dot { position: relative; padding-right: 26px; }
.tab-btn-dot {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--white, #fff);
}
.airport-deals-tab {
  /* Participate in the mobile flex chain: airport-page → turbo-frame →
     airport-body → route-filter → view-tabs → tab-panel → us. Without
     flex:1 + min-height:0 + overflow-y:auto the panel can't scroll on
     mobile (the page is overflow:hidden so the deal grid is clipped). */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.airport-deals-tab-intro {
  margin: 0;
  font-size: .92rem;
  color: var(--gray-600, #4b5563);
}
.airport-deals-tab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
/* Inside a grid container the card uses the grid cell width — override
   the strip-mode `flex: 0 0 280px` so it fills the cell properly. */
.airport-deals-tab-grid > .deal-card { flex: 1 1 auto; }
.airport-deals-tab-footer {
  margin: 4px 0 0;
  text-align: center;
}
.airport-deals-tab-more {
  font-size: .9rem;
  font-weight: 700;
  color: var(--blue-dark, #1d4ed8);
  text-decoration: none;
}
.airport-deals-tab-more:hover { text-decoration: underline; }

/* ─── Dedicated deals page (/airports/:iata/deals) ─────────────────── */
.airport-deals-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 20px 64px;
}
.airport-deals-hero {
  margin: 12px 0 24px;
}
.airport-deals-title {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 800;
  color: var(--gray-900, #111827);
  letter-spacing: -.02em;
  margin: 0 0 8px;
}
.airport-deals-sub {
  color: var(--gray-600, #4b5563);
  line-height: 1.55;
  max-width: 680px;
  margin: 0;
}

.airport-deals-form {
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 24px;
}
.airport-deals-form-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.airport-deals-form-row--primary { gap: 14px; }
.airport-deals-form-row--dow {
  gap: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100, #f3f4f6);
  margin-top: 12px;
}
.airport-deals-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}
.airport-deals-field--nights { flex: 0 0 auto; min-width: 160px; }
.airport-deals-label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-500, #6b7280);
}
.airport-deals-label-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--gray-400, #9ca3af);
}
.airport-deals-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  background: var(--blue, #3b82f6);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.airport-deals-submit:hover { background: var(--blue-dark, #1d4ed8); }
.airport-deals-dow {
  margin-top: 4px;
}
.airport-deals-dow-summary {
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-600, #4b5563);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
}
.airport-deals-dow-summary::-webkit-details-marker { display: none; }
.airport-deals-dow-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s;
}
.airport-deals-dow[open] .airport-deals-dow-summary::before { transform: rotate(90deg); }

@media (max-width: 640px) {
  .airport-deals-form-row--primary { flex-direction: column; align-items: stretch; }
  .airport-deals-submit { width: 100%; }
}

.airport-flex-search {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin: 12px 0 18px;
  overflow: hidden;
}

.airport-flex-search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.airport-flex-search-trigger::-webkit-details-marker { display: none; }
.airport-flex-search-trigger::marker { content: ""; }
.airport-flex-search-trigger-icon  { font-size: 1.1rem; line-height: 1; }
.airport-flex-search-trigger-label { font-weight: 700; color: var(--gray-800); font-size: 0.95rem; }
.airport-flex-search-trigger-sub   { color: var(--gray-500); font-size: 0.82rem; }
.airport-flex-search-trigger-caret {
  margin-left: auto;
  color: var(--gray-500);
  transition: transform .15s;
  font-size: 0.9rem;
}
.airport-flex-search[open] .airport-flex-search-trigger { border-bottom: 1px solid var(--gray-100); }
.airport-flex-search[open] .airport-flex-search-trigger-caret { transform: rotate(180deg); }
.airport-flex-search-trigger:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
}

.airport-flex-search-body { padding: 14px 16px 18px; }
.airport-flex-search-sub  { font-size: 0.85rem; color: var(--gray-600); margin: 0 0 14px; line-height: 1.5; }

.airport-flex-form { display: flex; flex-direction: column; gap: 12px; }
.airport-flex-row { display: grid; gap: 12px; }
.airport-flex-row--dates { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: end; }
.airport-flex-row--dow   { grid-template-columns: 1fr 1fr; }

.airport-flex-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.airport-flex-label {
  font-size: 0.72rem; font-weight: 700; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.airport-flex-submit {
  align-self: flex-start;
  padding: 11px 22px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.airport-flex-submit:hover:not(:disabled) { background: var(--blue-dark); }

.airport-flex-results-frame { display: block; margin-top: 16px; }
.airport-flex-results-meta {
  font-size: 0.85rem; color: var(--gray-600);
  margin: 16px 0 10px;
}
.airport-flex-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.airport-flex-results-note { font-size: 0.82rem; color: var(--gray-500); margin: 14px 0 0; }

.airport-flex-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.airport-flex-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}
.airport-flex-card--top {
  border-color: var(--blue);
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
}
.airport-flex-card-dest { display: flex; align-items: baseline; gap: 8px; }
.airport-flex-card-iata { font-size: 1rem; font-weight: 800; color: var(--gray-800); letter-spacing: -.01em; }
.airport-flex-card-city { font-size: 0.85rem; color: var(--gray-600); }
.airport-flex-card-airline { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--gray-600); min-width: 0; }
.airport-flex-card-airline-sep { color: var(--gray-400); flex-shrink: 0; }
.airport-flex-card-airline-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.airport-flex-card-dates { font-size: 0.85rem; color: var(--gray-600); }
.airport-flex-card-price { font-size: 1.05rem; font-weight: 700; color: var(--blue-dark); margin-top: 2px; }

.airport-flex-empty {
  background: #fef3c7;
  color: #78350f;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
}
.airport-flex-empty p { margin: 0; }
.airport-flex-empty-sub { font-size: 0.88rem; margin-top: 6px !important; line-height: 1.5; }

@media (max-width: 640px) {
  .airport-flex-search-body { padding: 12px 14px 16px; }
  .airport-flex-search-trigger-sub { display: none; }
  .airport-flex-row--dates { grid-template-columns: 1fr; }
  .airport-flex-row--dow   { grid-template-columns: 1fr; }
  .airport-flex-submit { width: 100%; }
}

/* ─── Hero alert form (homepage) ───────────────────────────────
   Primary CTA on /. Mirrors the /alerts/new form but with
   From/To pickers built in. Submits to POST /alerts. */
/* Match the route_pair page width (1100px max, 24px side padding) so
   the hero form and the route_pair search form are the same width
   when the user crosses between them. */
.hero-content--wide { max-width: 1100px; }

.hero-alert-form {
  margin-top: 20px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.hero-alert-row { display: grid; gap: 12px; }
.hero-alert-row--airports { grid-template-columns: 1fr 1fr; }
.hero-alert-row--dates    { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: end; }
.hero-alert-row--dow      { grid-template-columns: 1fr 1fr; }
.hero-alert-row--submit-only { grid-template-columns: 1fr; }
.hero-alert-row--submit   { grid-template-columns: minmax(0, 1.4fr) auto; gap: 12px; align-items: end; }
.hero-search-flex { display: flex; flex-direction: column; gap: 12px; }
.hero-search-flex[hidden] { display: none; }

/* Desktop primary row: From, To, DateStart, DateEnd on one line. Subgrid
   on each .hero-alert-field cell pins all labels to row 1 and all
   inputs to row 2 — so labels share a horizontal baseline regardless of
   input height. Row is position:relative so the calendar panel drops
   absolutely below all four cells. */
.hero-alert-row--primary {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 6px 12px;
  position: relative;
}
.hero-alert-row--primary .hero-alert-field {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}
.hero-alert-row--primary .hero-alert-dr-panel {
  /* Override .dr-panel's default top: calc(100%+6px) (positioned relative
     to .dr wrapper) — the panel here is a child of the grid row, so the
     existing absolute positioning + position:relative on the row work as
     expected, but the calendar wants more width than one cell. */
  left: 0;
  right: auto;
  min-width: min(560px, 100%);
}
/* Hero-specific date box — inherits .search-input visual styling so it
   matches the From/To inputs exactly (border, radius, focus glow,
   height). Only override the bits that are button-specific. */
.hero-alert-date-box {
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--gray-800);
}
.hero-alert-date-box .dr-box-placeholder { color: var(--gray-400); font-weight: 400; }

/* Refinements row (flex mode): Trip length, Outbound days, Return days.
   Same subgrid trick so labels share a horizontal baseline. */
.hero-alert-row--refinements {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
  grid-template-rows: auto auto;
  gap: 6px 12px;
}
.hero-alert-row--refinements .hero-alert-field {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}

.hero-alert-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.hero-alert-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-alert-field--airport .search-input {
  padding: 12px 14px 12px 40px;
  border-radius: 10px;
}

.hero-alert-field--email input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.hero-alert-field--email input[type="email"]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.hero-alert-submit {
  padding: 12px 22px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.hero-alert-submit:hover:not(:disabled) { background: var(--blue-dark); }
.hero-alert-submit:disabled { opacity: .5; cursor: not-allowed; }

.hero-alert-pair-count { text-align: left; }

.hero-alert-fine {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin: 0;
  text-align: center;
}

.hero-explore {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .hero-alert-form { padding: 16px; gap: 12px; }
  .hero-alert-row--airports     { grid-template-columns: 1fr; }
  .hero-alert-row--dates        { grid-template-columns: 1fr; }
  .hero-alert-row--dow          { grid-template-columns: 1fr; }
  .hero-alert-row--submit       { grid-template-columns: 1fr; }
  .hero-alert-row--primary      { grid-template-columns: 1fr; }
  .hero-alert-row--refinements  { grid-template-columns: 1fr; }
  .hero-alert-submit            { width: 100%; }
}

/* ─── Airport Page ──────────────────────────────────────────── */
.airport-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  overflow: hidden;
}

.airport-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 12px 24px;
  position: relative;
  z-index: 10;
}

/* Header column: Identity (left) */
.header-col-identity {}

.header-breadcrumb {
  font-size: 0.78rem;
  color: var(--gray-400);
  margin-bottom: 2px;
}
.header-breadcrumb .breadcrumb-link { color: var(--blue); }
.header-breadcrumb .breadcrumb-link:hover { text-decoration: underline; }
.header-breadcrumb .breadcrumb-sep { margin: 0 4px; }

/* Header column: Status (center) */
.header-col-status {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Header column: Actions (right) */
.header-col-actions {
  display: flex;
  align-items: center;
  min-width: 260px;
}

.airport-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.airport-iata {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--blue-dark);
  letter-spacing: -.03em;
  line-height: 1;
}

.airport-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-800);
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.airport-location {
  font-size: .9rem;
  color: var(--gray-400);
  margin-top: 2px;
}

.airport-summary {
  font-size: .85rem;
  color: var(--gray-500);
  margin-top: 4px;
  line-height: 1.4;
}

/* (airport-meta removed — "updated" text is now in header-col-status) */

.route-count {
  font-size: .95rem;
  font-weight: 600;
  color: var(--blue-dark);
  background: var(--blue-light);
  padding: 4px 12px;
  border-radius: 20px;
}

.last-updated {
  font-size: .8rem;
  color: var(--gray-400);
}

.btn-refresh {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-size: .8rem;
  cursor: pointer;
  color: var(--gray-600);
  transition: background .15s;
}

.btn-refresh:hover { background: var(--gray-100); }

/* ─── Airport Info Bar ─────────────────────────────────────── */
/* ─── FAA Live Delay Banner ─────────────────────────────────── */
.faa-delay-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: var(--radius);
  margin: 0 20px;
  font-size: .85rem;
}
.faa-delay-minor {
  background: #fef9c3;
  border: 1px solid #facc15;
  color: #854d0e;
}
.faa-delay-moderate {
  background: #ffedd5;
  border: 1px solid #fb923c;
  color: #9a3412;
}
.faa-delay-severe {
  background: #fee2e2;
  border: 1px solid #f87171;
  color: #991b1b;
}
.faa-delay-critical {
  background: #fecaca;
  border: 1px solid #ef4444;
  color: #7f1d1d;
}
.faa-delay-clear {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}
.faa-delay-icon { font-size: 1.2rem; flex-shrink: 0; }
.faa-delay-text { flex: 1; }
.faa-delay-text strong { display: block; }
.faa-delay-reason {
  display: block;
  font-size: .8rem;
  opacity: .85;
  margin-top: 2px;
}
.faa-delay-source {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  opacity: .5;
  flex-shrink: 0;
}

/* (airport-info-bar removed — items now live inside header-col-status) */

.info-bar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
}

.info-bar-label {
  color: var(--gray-400);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.info-bar-value {
  color: var(--gray-800);
  font-weight: 600;
}


.info-bar-link {
  color: var(--blue);
  font-size: .85rem;
  font-weight: 500;
}

.info-bar-link:hover {
  text-decoration: underline;
}

.info-bar-icon-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: .82rem;
  font-weight: 500;
}
.info-bar-icon-link:hover { opacity: .7; }
.info-bar-icon-link svg { flex-shrink: 0; }

/* Favorite star inline with airport name */
.favorite-star {
  display: inline;
  background: none;
  border: none;
  padding: 0 0 0 6px;
  font-size: 1.1em;
  cursor: pointer;
  vertical-align: baseline;
  line-height: 1;
}
.favorite-star.favorited { color: #f59e0b; }
.favorite-star.unfavorited { color: var(--gray-400); }
.favorite-star:hover { opacity: .7; }

.info-bar-ontime {
  padding-right: 20px;
  border-right: 1px solid var(--gray-200);
  margin-right: 0;
}

.ontime-badge {
  font-weight: 700;
  font-size: .9rem;
}
.ontime-great { color: #16a34a; }
.ontime-good  { color: #65a30d; }
.ontime-fair  { color: #d97706; }
.ontime-poor  { color: #dc2626; }

.ontime-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  font-size: .65rem;
  color: var(--gray-400);
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
}

/* ─── Shared action-button pair (used in list cards + map popups) ── */
.action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background .15s, color .15s, border-color .15s;
}

.action-btn-departures {
  background: none;
  color: var(--blue);
  border: 1px solid var(--blue);
}
.action-btn-departures:hover { background: var(--blue-light); border-color: var(--blue-dark); color: var(--blue-dark); }

.action-btn-flights {
  background: none;
  color: #00897b;
  border: 1px solid #00897b;
}
.action-btn-flights:hover { background: #e0f2f1; color: #00695c; border-color: #00695c; }

.popup-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.schedule-find-flights {
  display: block;
  text-align: center;
  margin: 16px 0 8px;
  padding: 10px 20px;
}

.btn-primary {
  display: inline-block;
  padding: 10px 24px;
  background: var(--blue);
  color: var(--white);
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
}

/* ─── Tabs ──────────────────────────────────────────────────── */
.airport-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.airport-page turbo-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.airport-page [data-controller="route-filter"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.view-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tab-buttons {
  display: flex;
  gap: 4px;
  padding: 12px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.tab-btn {
  padding: 6px 18px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--gray-600);
  transition: background .15s, color .15s;
}

.tab-btn.active,
.tab-btn:hover {
  background: var(--blue-light);
  color: var(--blue-dark);
}

.tab-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tab-panel.hidden { display: none; }

/* ─── Filter Sidebar ───────────────────────────────────────── */
.filter-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  overflow-y: auto;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Active-filters header — appears at the top of every filter surface
   (desktop chip bar, list sidebar, mobile sheet) when at least one filter
   is active. Single Clear All without per-chip deselection. */
.filter-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--gray-200);
}
.filter-bar-active-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filter-bar-clear {
  background: transparent;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.filter-bar-clear:hover {
  background: var(--gray-100);
  border-color: var(--gray-400, #9ca3af);
}

/* Mobile-only filter topbar — hidden on desktop */
/* filter-sheet-btn hidden on desktop, shown in mobile media query */

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.filter-group-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 0 6px;
  margin-bottom: 4px;
}

.filter-group-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: .82rem;
  font-weight: 500;
  color: var(--gray-700, #374151);
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
  gap: 8px;
}

.filter-chip-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}

.filter-chip-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

.filter-chip:hover {
  background: var(--blue-light);
  color: var(--blue-dark);
}

.filter-chip:hover .filter-chip-count {
  background: #dbeafe;
  color: var(--blue-dark);
}

.filter-chip.active {
  background: var(--blue);
  color: var(--white);
}

.filter-chip.active .filter-chip-count {
  background: rgba(255,255,255,.25);
  color: var(--white);
}

.filter-overflow.hidden { display: none; }

.filter-view-all {
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: none;
  font-size: .8rem;
  color: var(--blue);
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  margin-top: 4px;
  transition: background .12s;
}

.filter-view-all:hover { background: var(--blue-light); }

/* Mobile filter button — hidden on desktop */
.filter-sheet-btn { display: none; }

/* Mobile filter bottom sheet */
.filter-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 900;
}

.filter-sheet-overlay.open { display: block; }

.filter-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.15);
  z-index: 901;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .25s ease;
  pointer-events: none;
  visibility: hidden;
}

.filter-sheet.open {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.filter-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--gray-200);
}

.filter-sheet-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.filter-sheet-close {
  background: none;
  border: none;
  color: var(--blue);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
  min-height: 44px;
}

.filter-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-sheet-body .filter-group {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.filter-sheet-body .filter-group-chips {
  flex-wrap: wrap;
  gap: 8px;
}

.filter-sheet-body .filter-chip {
  padding: 10px 14px;
  min-height: 44px;
  font-size: .875rem;
}

.filter-sheet-footer {
  display: flex;
  gap: 12px;
  padding: 12px 20px 20px;
  border-top: 1px solid var(--gray-200);
}

.filter-sheet-clear {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.filter-sheet-apply {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--blue);
  color: var(--white);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

/* ─── Map ───────────────────────────────────────────────────── */
.map-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

#route-map {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 0;
}

.map-marker-origin {
  width: 36px;
  height: 36px;
  background: #2563eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  border: 2px solid white;
}

.map-marker-hub {
  width: 28px;
  height: 28px;
  background: var(--blue-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}


.map-popup { min-width: 160px; }
.popup-dest { font-weight: 700; font-size: .95rem; }
.popup-country { font-size: .8rem; color: var(--gray-400); margin-bottom: 4px; }
.popup-airlines { font-size: .85rem; color: var(--gray-600); }
.popup-freq { font-size: .8rem; color: var(--blue-dark); margin-top: 4px; font-weight: 600; }
.popup-time { font-size: .8rem; color: var(--gray-600); margin-top: 2px; }

/* Deal block inside a destination popup — shown only when route.deal is set.
   Matches the amber marker styling (route_map_controller _initMap) so the
   visual signal is consistent: amber outside (map), amber inside (popup). */
.popup-deal {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 6px;
  align-items: center;
}
.popup-deal-tag {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: #b45309;
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
}
.popup-deal-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: #78350f;
  font-variant-numeric: tabular-nums;
}
.popup-deal-savings {
  font-size: .72rem;
  font-weight: 700;
  color: #b45309;
}
.popup-deal-dates {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: .75rem;
  color: var(--gray-700, #374151);
  font-variant-numeric: tabular-nums;
}
.popup-deal-link {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: #b45309;
  text-decoration: none;
}
.popup-deal-link:hover { color: #78350f; text-decoration: underline; }

/* ─── Points / Book with Points ────────────────────────────── */
.popup-points, .route-card-points {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.points-label {
  font-size: .75rem;
  color: var(--gray-600);
  margin-right: 2px;
}
.points-card-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #fcd34d;
  white-space: nowrap;
}

/* Inline "✦ Points" badge on list cards */
.route-card-points {
  font-size: .7rem;
  font-weight: 600;
  color: #92400e;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ─── Routes List (Cards) ──────────────────────────────────── */
.list-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.list-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.airline-list-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 8px 0;
}

.list-search {
  padding: 12px 24px 8px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.filter-input {
  max-width: 320px;
  padding: 8px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: .875rem;
  outline: none;
  width: 100%;
}

.filter-input:focus { border-color: var(--blue); }

.airline-origin-group { margin-bottom: 20px; }

.airline-origin-group .route-cards { overflow-y: visible; flex: none; padding: 4px 24px 0; }

.airline-origin-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 24px 4px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 4px;
}

.airline-origin-link {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.airline-origin-link:hover .dest-iata { color: var(--blue); }

.origin-route-count {
  margin-left: auto;
  font-size: .78rem;
  color: var(--gray-400);
}

.route-cards {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.route-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .12s;
}

.route-card:hover { border-color: var(--blue); }

.route-card-header {
  flex: 1 1 180px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.route-card-dest {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.dest-iata {
  font-weight: 700;
  color: var(--blue-dark);
  font-size: .95rem;
  flex-shrink: 0;
}

.dest-name {
  color: var(--gray-600);
  font-size: .85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-card-country {
  font-size: .78rem;
  color: var(--gray-400);
  flex-shrink: 0;
}

.route-card-body {
  flex: 2 1 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.route-card-airlines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.airline-logo {
  object-fit: contain;
  vertical-align: middle;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.airline-code-fallback {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  vertical-align: middle;
}

.airline-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gray-100);
  color: var(--gray-600);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .75rem;
}

.route-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.route-card-time {
  font-size: .85rem;
  color: var(--gray-600);
  white-space: nowrap;
}

.frequency-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.freq-multiple-daily { background: #dcfce7; color: #15803d; }
.freq-daily          { background: #d1fae5; color: #166534; }
.freq-high-weekly    { background: #fef9c3; color: #854d0e; }
.freq-mid-weekly     { background: #fef3c7; color: #92400e; }
.freq-low-weekly     { background: #ffedd5; color: #9a3412; }
.freq-occasional     { background: #f3f4f6; color: #4b5563; }
.freq-unknown        { background: #f3f4f6; color: #9ca3af; font-style: italic; }

.route-card-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
}

/* ─── City Page Chips & Badges ──────────────────────────────── */
.city-airport-chip {
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: inherit;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
}
.city-airport-chip:hover { background: rgba(255,255,255,.25); }

.city-origin-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.city-origin-chip {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .7rem;
  font-weight: 600;
}

/* ─── Empty State ───────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--gray-600);
}

.routes-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  color: var(--gray-600);
  font-size: .9rem;
}

/* ─── Departure Schedule Panel (PRO FEATURE) ────────────────── */
.schedule-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100vw;
  height: 100vh;
  background: var(--white);
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s ease;
}

.schedule-panel.open {
  transform: translateX(0);
}

.schedule-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.schedule-panel.open ~ .schedule-overlay {
  opacity: 1;
  pointer-events: auto;
}

.schedule-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.schedule-panel-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.3;
}

.schedule-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--gray-400);
  padding: 10px 12px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}

.schedule-panel-close:hover { background: var(--gray-100); color: var(--gray-800); }

.schedule-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.schedule-loading,
.schedule-error,
.schedule-empty {
  color: var(--gray-600);
  font-size: .9rem;
  text-align: center;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.schedule-loading-sub {
  display: block;
  font-size: .75rem;
  color: var(--gray-400);
  margin-top: 6px;
}

.schedule-error {
  color: #ef4444;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.schedule-origin-header {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-500);
  padding: 12px 0 4px;
  border-top: 1px solid var(--gray-200);
  margin-top: 8px;
}
.schedule-origin-header:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}

.btn-schedule-retry {
  padding: 8px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
}
.btn-schedule-retry:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.schedule-signup-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 24px;
}

.schedule-skeleton-rows {
  width: 100%;
  pointer-events: none;
  filter: blur(3px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.schedule-skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.skel-time {
  width: 50px;
  height: 14px;
  background: #e0e0e0;
  border-radius: 4px;
  flex-shrink: 0;
}

.skel-info {
  width: 120px;
  height: 14px;
  background: #e0e0e0;
  border-radius: 4px;
}

.schedule-signup-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 20px;
  max-width: 320px;
  width: 100%;
  margin: 16px auto 0;
}

.schedule-signup-heading {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  margin-top: 0;
  text-align: center;
}

.schedule-mini-form {
  display: flex;
  flex-direction: column;
}

.schedule-mini-input {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.schedule-mini-submit {
  display: block;
  width: 100%;
  padding: 9px;
  background: var(--gray-900);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.schedule-mini-submit:hover {
  background: var(--gray-700);
}

.schedule-signup-alt {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
}

.schedule-progress-bar {
  width: 100%;
  max-width: 240px;
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.schedule-progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  animation: schedule-progress 15s ease-out forwards;
}
@keyframes schedule-progress {
  0%   { width: 0%; }
  20%  { width: 30%; }
  60%  { width: 70%; }
  90%  { width: 90%; }
  100% { width: 95%; }
}

.schedule-note {
  font-size: .75rem;
  color: var(--gray-400);
  margin-bottom: 16px;
}

.schedule-airlines-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
}

@media (min-width: 768px) {
  .schedule-airlines-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.schedule-airline-block {
  margin-bottom: 20px;
}

.schedule-airline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

/* Top-of-panel CTA: jumps from the schedule sidebar to the dedicated
   route_pair page. Keeps the per-airline "Book {airline}" buttons out
   of the schedule (those went to airline.com directly and bypassed
   our deeper search/alerts surface). */
.schedule-routepage-btn {
  display: block;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--blue, #3b82f6);
  color: #fff !important;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: filter 80ms;
}
.schedule-routepage-btn:hover { filter: brightness(0.95); }

.schedule-airline-name {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blue);
  margin-bottom: 8px;
}

.schedule-pattern-block {
  margin-bottom: 10px;
}

.schedule-pattern-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-400);
  margin-bottom: 4px;
  padding-left: 2px;
}

.schedule-flight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--gray-50);
  border-radius: var(--radius);
  margin-bottom: 4px;
}

.schedule-times-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.schedule-time-chip {
  display: inline-block;
  padding: 4px 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gray-800);
  cursor: default;
}

.schedule-time {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gray-800);
  min-width: 40px;
}

.schedule-number {
  font-size: .8rem;
  color: var(--gray-600);
}
.schedule-aircraft {
  font-size: .75rem;
  color: var(--gray-400);
  margin-left: auto;
  white-space: nowrap;
}
.schedule-aircraft-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.schedule-aircraft-tag {
  font-size: 0.7rem;
  color: var(--gray-600);
  background: var(--gray-100);
  border-radius: 4px;
  padding: 1px 6px;
}

.schedule-points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 8px;
}

/* "Departures" button click handler target (map popup) */
.popup-departures-btn { cursor: pointer; }

.schedule-cell { text-align: right; }

/* ─── Navbar Links ──────────────────────────────────────────── */
.navbar { justify-content: space-between; }

.navbar-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-link {
  font-size: .875rem;
  color: var(--gray-600);
  font-weight: 500;
  transition: color .15s;
}

.navbar-link:hover { color: var(--blue-dark); }

.navbar-btn {
  padding: 6px 16px;
  background: var(--blue);
  color: var(--white);
  border-radius: 6px;
  font-size: .875rem;
  font-weight: 600;
  transition: background .15s;
}

.navbar-btn:hover { background: var(--blue-dark); }

/* Hamburger — hidden on desktop */
.nav-toggle-checkbox { display: none; }
.nav-hamburger { display: none; }

/* ─── Auth Pages ─────────────────────────────────────────────── */
.auth-page {
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 50%, #fafafa 100%);
  padding: 40px 24px;
}

.auth-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
}

.auth-header {
  text-align: center;
  margin-bottom: 28px;
}

.auth-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}

.auth-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-800);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: .9rem;
  color: var(--gray-400);
}

.auth-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.field-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-600);
}

.field-hint {
  font-size: .75rem;
  color: var(--gray-400);
}

.field-optional {
  font-size: .75rem;
  font-weight: 400;
  color: var(--gray-400);
}

.auth-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: .95rem;
  outline: none;
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}

.auth-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* Airport search input inside auth card */
.auth-card .search-input {
  padding: 10px 44px 10px 40px;
  font-size: .95rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.auth-checkbox {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  flex-shrink: 0;
}

.check-label {
  font-size: .875rem;
  color: var(--gray-600);
  line-height: 1.4;
  cursor: pointer;
}

.input-with-toggle {
  position: relative;
}

.input-with-toggle .auth-input {
  padding-right: 56px;
}

.show-password-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--blue);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.field-error {
  font-size: .8rem;
  color: #dc2626;
}

.input-error {
  border-color: #dc2626 !important;
}

.btn-auth {
  width: 100%;
  padding: 12px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s;
}

.btn-auth:hover { background: var(--blue-dark); }

.auth-links {
  text-align: center;
  margin-top: 20px;
  font-size: .875rem;
  color: var(--gray-400);
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.auth-links a {
  color: var(--blue);
  font-weight: 500;
}

.auth-links a:hover { color: var(--blue-dark); text-decoration: underline; }

.auth-link-sep { color: var(--gray-200); }

/* ─── Pro / Upgrade UI ──────────────────────────────────────── */
.pro-lock-link {
  display: inline-block;
  font-size: .75rem;
  color: var(--gray-400);
  background: var(--gray-100);
  border-radius: 4px;
  padding: 2px 8px;
  transition: color .15s, background .15s;
}

.pro-lock-link:hover {
  color: var(--blue-dark);
  background: var(--blue-light);
}

.btn-upgrade-hint {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--blue);
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--white);
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.btn-upgrade-hint:hover {
  background: var(--blue);
  color: var(--white);
}

/* ─── Pricing Page ──────────────────────────────────────────── */
.pricing-page {
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 80px;
  background: linear-gradient(180deg, #eff6ff 0%, #f0f9ff 360px, #fafafa 720px);
}

/* ── HERO ──────────────────────────────────────────────────── */
.pricing-hero {
  width: 100%;
  max-width: 720px;
  text-align: center;
  padding: 64px 24px 48px;
}

.pricing-hero-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-dark, #1d4ed8);
  background: rgba(59, 130, 246, 0.1);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.pricing-hero-title {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 900;
  color: var(--gray-900, #111827);
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0 0 20px;
}
.pricing-hero-title-accent {
  background: linear-gradient(120deg, #3b82f6 0%, #1d4ed8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pricing-hero-sub {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--gray-600, #4b5563);
  max-width: 540px;
  margin: 0 auto 32px;
}

.pricing-interval-toggle--hero {
  margin: 0 auto 22px;
}

.pricing-hero-price {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin: 0;
}
.pricing-hero-price-currency {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--gray-700, #374151);
  align-self: flex-start;
  margin-top: 8px;
}
.pricing-hero-price-amount {
  font-size: clamp(3.4rem, 9vw, 4.8rem);
  font-weight: 900;
  color: var(--gray-900, #111827);
  letter-spacing: -.04em;
  line-height: 1;
}
.pricing-hero-price-period {
  font-size: 1.1rem;
  color: var(--gray-500, #6b7280);
  margin-left: 4px;
}

.pricing-hero-equivalent {
  font-size: .9rem;
  color: var(--blue-dark, #1d4ed8);
  font-weight: 600;
  margin: 8px 0 0;
}
.pricing-hero-equivalent[hidden] { display: none; }

.pricing-hero-cta { margin-top: 28px; }

.pricing-hero-button,
.pricing-hero-cta form .pricing-hero-button {
  display: inline-block;
  font-size: 1.05rem !important;
  font-weight: 700;
  padding: 16px 36px !important;
  border-radius: 12px;
  box-shadow: 0 10px 30px -10px rgba(29, 78, 216, 0.6);
  transition: transform .12s, box-shadow .12s;
}
.pricing-hero-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -10px rgba(29, 78, 216, 0.7);
}

.pricing-hero-trust {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--gray-500, #6b7280);
}

.pricing-hero-current {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-dark, #1d4ed8);
  margin-right: 14px;
}

/* ── BENEFIT CARDS ─────────────────────────────────────────── */
.pricing-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 1120px;
  padding: 0 24px;
  margin: 24px 0 64px;
}

.pricing-benefit {
  background: #fff;
  border-radius: 14px;
  padding: 24px 22px 22px;
  border: 1px solid var(--gray-100, #f3f4f6);
  box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.pricing-benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.pricing-benefit--blue   .pricing-benefit-icon { background: #dbeafe; }
.pricing-benefit--green  .pricing-benefit-icon { background: #d1fae5; }
.pricing-benefit--amber  .pricing-benefit-icon { background: #fef3c7; }
.pricing-benefit--purple .pricing-benefit-icon { background: #ede9fe; }

.pricing-benefit-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
  margin: 0;
}
.pricing-benefit-body {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gray-600, #4b5563);
  margin: 0;
}

@media (max-width: 1024px) {
  .pricing-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pricing-benefits { grid-template-columns: 1fr; }
}

/* ── MATRIX (feature-only, no CTA inside) ──────────────────── */
.pricing-matrix-wrap {
  width: 100%;
  max-width: 640px;
  padding: 0 24px;
  margin-bottom: 56px;
}
.pricing-matrix-heading {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-800, #1f2937);
  margin: 0 0 22px;
  letter-spacing: -.01em;
}

.pricing-interval-toggle {
  display: inline-flex;
  background: var(--gray-100, #f3f4f6);
  border-radius: 999px;
  padding: 3px;
  margin: 0 0 12px;
  gap: 2px;
}

.pricing-interval-pill {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s;
}

.pricing-interval-pill:hover {
  color: var(--gray-700, #374151);
}

.pricing-interval-pill.is-active {
  background: #fff;
  color: var(--gray-900, #111827);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.pricing-interval-save {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #d1fae5;
  color: #047857;
  padding: 2px 6px;
  border-radius: 999px;
}

.pricing-equivalent {
  font-size: .8rem;
  color: var(--gray-500, #6b7280);
  margin: -6px 0 0;
}

.pricing-interval-toggle--standalone {
  margin: 0 0 28px;
}

/* Comparison-matrix layout (single table, FREE vs PRO columns). */
.pricing-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white, #fff);
  border-radius: 16px;
  box-shadow: 0 8px 32px -12px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  table-layout: fixed;
}

.pricing-matrix th,
.pricing-matrix td {
  padding: 14px 18px;
  text-align: center;
  vertical-align: middle;
  font-size: .95rem;
}

.pricing-matrix thead th {
  background: var(--gray-50, #f9fafb);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  padding: 18px 18px 18px;
  vertical-align: top;
}

.pricing-matrix-feature-col {
  text-align: left !important;
  width: 44%;
  vertical-align: middle !important;
}

.pricing-matrix-tier-name {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-400, #9ca3af);
}

.pricing-matrix-tier--pro .pricing-matrix-tier-name {
  color: var(--blue, #1d4ed8);
  font-size: .9rem;
}

.pricing-matrix-tier-price {
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  font-variant-numeric: tabular-nums;
}
.pricing-matrix-tier--pro .pricing-matrix-tier-price {
  color: var(--gray-900, #111827);
  font-weight: 700;
}

.pricing-matrix-popular {
  display: block;
  margin: 0 auto 8px;
  background: var(--blue, #1d4ed8);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}

.pricing-matrix tbody th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--gray-700, #374151);
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
}

.pricing-matrix-cell {
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
  font-variant-numeric: tabular-nums;
}

.pricing-matrix-cell--pro {
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.6) 0%, rgba(239, 246, 255, 0.3) 100%);
  color: var(--gray-900, #111827);
}

.pricing-matrix-cell strong {
  color: var(--blue-dark, #1d4ed8);
  font-weight: 700;
}

.pricing-matrix-check {
  color: var(--blue, #3b82f6);
  font-weight: 800;
  font-size: 1.15rem;
}

.pricing-matrix-cell--pro .pricing-matrix-check {
  color: var(--blue-dark, #1d4ed8);
}

.pricing-matrix-cross {
  color: var(--gray-300, #d1d5db);
  font-weight: 700;
  font-size: 1.1rem;
}

/* FAQ — native <details>/<summary>. No JS. */
.pricing-faq {
  width: 100%;
  max-width: 640px;
  padding: 0 24px;
  margin: 0;
}

.pricing-faq-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-800, #1f2937);
  margin: 0 0 16px;
  text-align: center;
}

.pricing-faq-item {
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  padding: 0;
  margin: 0 0 10px;
  overflow: hidden;
}

.pricing-faq-q {
  font-size: .95rem;
  font-weight: 600;
  color: var(--gray-800, #1f2937);
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pricing-faq-q::-webkit-details-marker { display: none; }

.pricing-faq-q::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--gray-400, #9ca3af);
  transition: transform .15s;
}

.pricing-faq-item[open] .pricing-faq-q::after {
  content: "−";
}

.pricing-faq-q:hover { color: var(--blue-dark, #1d4ed8); }

.pricing-faq-a {
  padding: 0 18px 16px;
  font-size: .9rem;
  color: var(--gray-600, #4b5563);
  line-height: 1.55;
}

.pricing-faq-a p { margin: 0 0 10px; }
.pricing-faq-a p:last-child { margin-bottom: 0; }
.pricing-faq-a a { color: var(--blue-dark, #1d4ed8); text-decoration: underline; }

/* Homepage FAQ — same visual language as pricing-faq but wider container
   so the answers don't feel cramped on desktop. */
.home-faq { padding: 56px 16px 80px; background: var(--gray-50, #f9fafb); }
.home-faq-inner { max-width: 760px; margin: 0 auto; }
.home-faq-title {
  font-size: 1.5rem; font-weight: 700; color: var(--gray-800, #1f2937);
  margin: 0 0 24px; text-align: center;
}
.home-faq-item {
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  margin: 0 0 10px;
  overflow: hidden;
}
.home-faq-q {
  font-size: 1rem; font-weight: 600; color: var(--gray-800, #1f2937);
  padding: 16px 20px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.home-faq-q::-webkit-details-marker { display: none; }
.home-faq-q::after {
  content: "+"; font-size: 1.25rem; font-weight: 400;
  color: var(--gray-400, #9ca3af); flex-shrink: 0;
}
.home-faq-item[open] .home-faq-q::after { content: "−"; }
.home-faq-q:hover { color: var(--blue-dark, #1d4ed8); }
.home-faq-a {
  padding: 0 20px 18px; font-size: .95rem;
  color: var(--gray-700, #374151); line-height: 1.6;
}
.home-faq-a p { margin: 0; }

/* Mobile: tighten the matrix without breaking it. */
@media (max-width: 560px) {
  .pricing-matrix th,
  .pricing-matrix td {
    padding: 12px 10px;
    font-size: .85rem;
  }
  .pricing-matrix-popular { font-size: .58rem; padding: 3px 7px; }
  .pricing-matrix-tier-price { font-size: .72rem; }
  .pricing-hero { padding: 48px 20px 36px; }
}

/* Visually-hidden utility for screen readers (used by the matrix caption
   and the CTA row's row-header). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Upgrade-pitch modal (lib/upgrade_overlay.js). Free users hit this when
   they try to use a Pro-only feature inline — keeps them in context
   instead of full-page-redirecting to /upgrade. */
body.upgrade-overlay-open { overflow: hidden; }

.upgrade-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.upgrade-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.upgrade-overlay-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
  width: 100%;
  max-width: 440px;
  padding: 28px 28px 24px;
  text-align: center;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  animation: nl-upgrade-pop 160ms ease-out;
}

@keyframes nl-upgrade-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);    opacity: 1; }
}

.upgrade-overlay-close {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--gray-400, #9ca3af);
  cursor: pointer;
  padding: 6px 10px;
}
.upgrade-overlay-close:hover { color: var(--gray-700, #374151); }

.upgrade-overlay-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
  margin: 0 0 8px;
}

.upgrade-overlay-sub {
  font-size: .92rem;
  color: var(--gray-500, #6b7280);
  margin: 0 0 18px;
  line-height: 1.5;
}

.upgrade-overlay-preview {
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 20px;
  text-align: left;
}

.upgrade-overlay-preview-header {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-500, #6b7280);
  margin-bottom: 10px;
}

.upgrade-overlay-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  padding: 6px 0;
  border-top: 1px solid var(--gray-100, #f3f4f6);
}
.upgrade-overlay-preview-row:first-of-type { border-top: 0; }
.upgrade-overlay-preview-row--pro { color: var(--blue, #1d4ed8); }

.upgrade-overlay-preview-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.upgrade-overlay-preview-pill {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-500, #6b7280);
  padding: 2px 8px;
  border-radius: 999px;
}
.upgrade-overlay-preview-pill--pro {
  background: #dbeafe;
  color: #1d4ed8;
}

.upgrade-overlay-preview-foot {
  font-size: .75rem;
  color: var(--gray-400, #9ca3af);
  margin-top: 8px;
  font-style: italic;
}

.upgrade-overlay-pricing { margin-bottom: 14px; }

.upgrade-overlay-interval {
  display: inline-flex;
  background: var(--gray-100, #f3f4f6);
  border-radius: 999px;
  padding: 3px;
  margin: 0 0 12px;
  gap: 2px;
}

.upgrade-overlay-interval-pill {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.upgrade-overlay-interval-pill.is-active {
  background: #fff;
  color: var(--gray-900, #111827);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.upgrade-overlay-interval-save {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #d1fae5;
  color: #047857;
  padding: 1px 6px;
  border-radius: 999px;
}

.upgrade-overlay-price {
  margin: 0 0 4px;
}
.upgrade-overlay-price-amount {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--gray-900, #111827);
}
.upgrade-overlay-price-period {
  font-size: 1rem;
  color: var(--gray-500, #6b7280);
}

.upgrade-overlay-equivalent {
  font-size: .78rem;
  color: var(--gray-500, #6b7280);
  margin: 0 0 8px;
}

.upgrade-overlay-cta {
  display: block;
  width: 100%;
  padding: 12px 18px;
  background: var(--blue, #3b82f6);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}
.upgrade-overlay-cta:hover { background: #1d4ed8; }

.upgrade-overlay-dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  margin-top: 10px;
  font-size: .85rem;
  color: var(--gray-400, #9ca3af);
  cursor: pointer;
  text-decoration: underline;
}
.upgrade-overlay-dismiss:hover { color: var(--gray-700, #374151); }

.upgrade-overlay-signin {
  margin-top: 12px;
  font-size: .8rem;
  color: var(--gray-500, #6b7280);
}
.upgrade-overlay-signin a { color: var(--blue, #1d4ed8); text-decoration: underline; }

.pricing-current-plan {
  display: block;
  text-align: center;
  font-size: .9rem;
  color: var(--gray-400);
  font-weight: 600;
  padding: 12px;
  border: 1.5px dashed var(--gray-200);
  border-radius: var(--radius);
}

.btn-pro {
  background: var(--blue-dark);
}

.btn-pro:hover {
  background: #1e40af;
}

/* ─── Dashboard ─────────────────────────────────────────────── */
.dashboard-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.dashboard-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gray-800);
  letter-spacing: -.02em;
}

.search-usage-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 8px 16px;
  border-radius: 20px;
}

.pro-badge {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.btn-manage-subscription {
  display: inline-block;
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  font-size: .85rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
  transition: background .15s, color .15s;
}
.btn-manage-subscription:hover {
  background: var(--blue);
  color: var(--white);
}

.dashboard-section {
  margin-bottom: 40px;
}

.dashboard-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 16px;
}

.dashboard-section-desc {
  font-size: .875rem;
  color: var(--gray-500);
  margin-bottom: 20px;
  margin-top: -8px;
}

/* Dashboard alerts + watches */
.dashboard-alerts,
.dashboard-watches {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dashboard-alert,
.dashboard-watch {
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) minmax(160px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}
.dashboard-alert--inactive { opacity: 0.6; }
.dashboard-alert-route,
.dashboard-watch-airport {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dashboard-alert-route-link,
.dashboard-watch-link {
  color: var(--gray-800);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-alert-route-link:hover,
.dashboard-watch-link:hover { color: var(--blue); }
.dashboard-watch-name {
  font-weight: 400;
  color: var(--gray-500);
  font-size: 0.9rem;
}
.dashboard-alert-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-600);
}
.dashboard-alert-status--active       { background: #d1fae5; color: #047857; }
.dashboard-alert-status--expired      { background: var(--gray-100); color: var(--gray-500); }
.dashboard-alert-status--unsubscribed { background: #fee2e2; color: #b91c1c; }
.dashboard-alert-meta,
.dashboard-watch-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--gray-500);
  font-size: 0.85rem;
}
.dashboard-watch-freq {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.75rem;
  font-weight: 600;
}
.dashboard-watch-freq--instant { background: #fef3c7; color: #92400e; }
.dashboard-watch-freq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dashboard-watch-freq-toggle:hover { border-color: var(--blue); background: var(--white); }
.dashboard-watch-freq-toggle--instant { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.dashboard-watch-freq-toggle-hint {
  font-size: 0.7rem;
  color: var(--gray-500);
  font-weight: 500;
}
.dashboard-watch-freq-toggle:hover .dashboard-watch-freq-toggle-hint { color: var(--blue); }
.dashboard-alert-actions,
.dashboard-watch-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
.dashboard-alert-link {
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}
.dashboard-alert-link:hover { text-decoration: underline; }
.dashboard-alert-link--danger { color: #b91c1c; }
.dashboard-watch-remove {
  background: transparent;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.dashboard-watch-remove:hover { border-color: #fca5a5; color: #b91c1c; }
.dashboard-empty {
  padding: 18px 20px;
  background: var(--gray-50);
  border-radius: 10px;
  color: var(--gray-600);
  font-size: 0.9rem;
}
.dashboard-empty p { margin: 0 0 8px; }
.btn-link {
  color: var(--blue);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.btn-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .dashboard-alert, .dashboard-watch {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dashboard-alert-actions, .dashboard-watch-actions { justify-content: flex-start; }
}

.points-programs-form { }

.points-programs-groups {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.points-program-group {
  flex: 1;
  min-width: 200px;
}

.points-program-group-label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-400);
  margin-bottom: 10px;
}

.points-program-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.points-program-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--gray-700);
  cursor: pointer;
}

.points-program-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
  flex-shrink: 0;
  cursor: pointer;
}

.btn-save-programs {
  padding: 8px 20px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.btn-save-programs:hover { background: var(--blue-dark); }

/* Sign-up features list */
.auth-features {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-features li {
  font-size: .8rem;
  color: var(--gray-500);
}

.airport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.airport-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow .15s, border-color .15s;
}

.airport-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--blue);
}

.airport-card-iata {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--blue-dark);
  letter-spacing: -.02em;
}

.airport-card-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.3;
}

.airport-card-location {
  font-size: .78rem;
  color: var(--gray-400);
}

.empty-state-hint {
  margin-top: 8px;
  font-size: .875rem;
  color: var(--gray-400);
}

.empty-state-hint a {
  color: var(--blue);
  font-weight: 500;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Lock page to viewport so the map fills remaining space below the header */
  .airport-page {
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    min-height: 0;
    overflow: hidden;
  }

  /* Compact header — stacked columns, no search bar */
  .airport-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px;
  }

  .header-breadcrumb { display: none; }

  .header-col-identity {
    display: flex;
    align-items: center;
  }

  .airport-iata { font-size: 1.3rem; }
  .airport-name { font-size: .95rem; }
  .airport-location { font-size: .8rem; }
  .airport-summary { font-size: .78rem; }

  .header-col-status {
    justify-content: flex-start;
    gap: 10px;
    padding: 4px 0 0;
    font-size: .78rem;
  }
  .header-col-status .last-updated { display: none; }
  .header-col-status .info-bar-ontime { padding-right: 10px; }

  .header-col-actions { display: none; }
  .info-bar-link-text { display: none; }

  /* Compact FAA banner */
  .faa-delay-banner {
    margin: 0;
    padding: 6px 16px;
    border-radius: 0;
    font-size: .8rem;
  }
  .faa-delay-reason { display: none; }

  /* Compact section heading */
  .section-heading {
    padding: 6px 16px 0;
    font-size: .85rem;
  }

  /* Turbo-frame flex chain */
  .airport-page turbo-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Break min-height:auto through the flex chain so children fill space. */
  .airport-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .airport-body > [data-controller="route-filter"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .view-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .tab-panel {
    min-height: 0;
    overflow: hidden;
  }

  /* Hide sidebars on mobile — use bottom sheet instead */
  .filter-sidebar { display: none; }

  /* Filter button visible in tab bar on mobile */
  .tab-buttons {
    padding: 6px 12px;
  }

  .filter-sheet-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    min-height: 36px;
    margin-left: auto;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    white-space: nowrap;
  }

  /* Map fills available space */
  .map-layout { min-height: 0; }

  #tab-map { overflow: visible; }

  #route-map {
    flex: 1;
    min-height: 300px;
  }

  /* List */
  #tab-list { overflow-y: auto; }

  .list-search {
    padding: 10px 16px 8px;
  }

  .filter-input { max-width: 100%; }

  .route-cards {
    padding: 8px 12px;
    gap: 6px;
  }

  .route-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
  }

  .route-card-header { flex: 1 1 100%; }
  .route-card-body { flex: 1 1 100%; gap: 6px; }
  .route-card-meta { flex-wrap: wrap; }
  .route-card-actions { margin-left: auto; }

  /* tab-buttons padding set above in compact section */
  .schedule-panel { width: 100vw; }

  /* Navbar — hamburger on mobile */
  .navbar { padding: 0 16px; }

  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    z-index: 101;
    min-width: 40px;
    min-height: 40px;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2.5px;
    background: var(--gray-800);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .nav-toggle-checkbox:checked ~ .nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle-checkbox:checked ~ .nav-hamburger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle-checkbox:checked ~ .nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .navbar-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: 16px 24px;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 100;
  }
  .nav-toggle-checkbox:checked ~ .navbar-links {
    display: flex;
  }
  .navbar-links .navbar-link {
    font-size: 1rem;
    padding: 4px 0;
  }
  .navbar-links .navbar-btn {
    text-align: center;
    font-size: 1rem;
    padding: 10px 16px;
  }

  #airline-route-map { flex: 1; min-height: 0; }
  #city-route-map { flex: 1; min-height: 0; }

  /* Touch targets */
  .tab-btn { padding: 10px 18px; min-height: 44px; }
  .action-btn { padding: 8px 14px; min-height: 44px; }
}

/* ─── Airline Search Page ───────────────────────────────────── */
.airline-search-page {
  max-width: 640px;
  margin: 80px auto;
  padding: 0 24px;
  text-align: center;
}

.airline-search-header { margin-bottom: 32px; }

.airline-search-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 8px;
}

.airline-search-subtitle {
  font-size: 1.05rem;
  color: var(--gray-600);
}

.airline-search-note {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--gray-400);
}

/* ─── City Route Map ────────────────────────────────────────── */
#city-route-map {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 0;
}

/* ─── Airline Route Map ─────────────────────────────────────── */
#airline-route-map {
  flex: 1;
  min-width: 0;
  height: calc(100vh - 56px - 44px - 40px);
  position: relative;
  z-index: 0;
}

/* ─── Routes lazy-load spinner ─────────────────────────────── */
.routes-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 16px;
  color: var(--gray-400);
  font-size: .9rem;
}
.routes-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.dest-count-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--gray-600);
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ─── Partial data notice (OpenSky fallback) ───────────────── */
.partial-data-notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: var(--radius);
  font-size: .85rem;
  color: #854d0e;
}

/* ─── Airline List (grouped by origin) ─────────────────────── */
.airline-db-note {
  margin: 12px 24px;
  padding: 10px 14px;
  background: var(--blue-light);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--blue-dark);
}

.origin-group {
  margin: 0 24px 28px;
}

.origin-group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0 8px;
  border-bottom: 2px solid var(--blue-light);
  margin-bottom: 4px;
}

.origin-iata {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue-dark);
}

.origin-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
}

.origin-route-count {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--gray-400);
}

/* ─── Airline map popup ─────────────────────────────────────── */
.popup-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  margin: 6px 0 2px;
}

.popup-origins-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.popup-origin-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  padding: 3px 0;
  border-bottom: 1px solid var(--gray-100);
}

.popup-origin-iata {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--blue-dark);
  font-size: 0.75rem;
  min-width: 30px;
}

.popup-origin-city {
  flex: 1;
  min-width: 0;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-origin-meta {
  flex-shrink: 0;
  color: var(--gray-400);
  font-size: 0.75rem;
  white-space: nowrap;
}

.popup-extra {
  margin-top: 6px;
}

.popup-list-tab-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ─── Breadcrumbs (now inline in header-breadcrumb) ──────────── */
.breadcrumb-current { color: var(--gray-600); }

/* ─── Section heading ───────────────────────────────────────── */
.section-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-600);
  padding: 12px 24px 0;
}

/* Trust-signals strip — concrete numbers from the DB right above the
   Popular Airports grid. Cheap credibility lift for first-time visitors:
   they can see the system's actually been tracking routes and fares. */
.trust-signals {
  background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
  padding: 24px 16px 28px;
  border-top: 1px solid var(--gray-200);
}
.trust-signals-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px 28px;
  font-size: 0.92rem; color: var(--gray-600);
  text-align: center;
}
.trust-signal { line-height: 1.4; }
.trust-signal strong { color: var(--gray-900, #111827); font-weight: 700; }

/* ─── Popular airports (home page) ─────────────────────────── */
.popular-airports {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding: 40px 24px;
}
.popular-airports-inner {
  max-width: 900px;
  margin: 0 auto;
}
.popular-airports-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.popular-airports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.popular-airport-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-align: center;
}
.popular-airport-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.popular-airport-flag { font-size: 1.4rem; }
.popular-airport-iata {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-800);
}
.popular-airport-city {
  font-size: 0.75rem;
  color: var(--gray-400);
}

@media (max-width: 640px) {
  .popular-airports-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* breadcrumbs now inline in header */

  /* ── Homepage mobile fixes ── */
  .hero {
    min-height: auto;
    padding: 32px 16px 40px;
    align-items: flex-start;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .route-search-fields {
    flex-direction: column;
    gap: 12px;
  }

  .route-search-swap {
    display: none;
  }

  .features-section { padding: 40px 16px; }
  .pricing-block    { padding: 40px 16px 48px; }
  .pricing-title    { font-size: 1.35rem; }
  .pricing-body     { font-size: 0.95rem; }
}

/* ─── Admin ─────────────────────────────────────────────────── */
.navbar-link--admin {
  color: var(--blue);
  font-weight: 600;
}

.admin-page {
  min-height: calc(100vh - 56px);
  background: var(--gray-50);
}

.admin-nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-nav-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  margin-right: 12px;
}

.admin-nav-link {
  padding: 12px 14px;
  font-size: 0.875rem;
  color: var(--gray-600);
  border-bottom: 2px solid transparent;
}

.admin-nav-link:hover { color: var(--blue); }
.admin-nav-link.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 600;
}

.admin-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
}

.admin-alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 16px;
}

.admin-alert--warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}

.admin-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-count {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 99px;
}

.admin-muted { color: var(--gray-400); font-size: 0.8rem; margin-left: 4px; }

.delay-rating { font-weight: 600; }
.delay-excellent { color: #16a34a; }
.delay-good      { color: #65a30d; }
.delay-fair      { color: #ca8a04; }
.delay-poor      { color: #ea580c; }
.delay-bad       { color: #dc2626; }

.admin-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin-stat-group {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 20px 24px;
}

.admin-stat-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  margin-bottom: 16px;
}

.admin-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1;
}

.admin-stat-value.pro   { color: var(--blue); }
.admin-stat-value.warning { color: #f59e0b; }
.admin-stat-value.admin-stat-muted { color: var(--gray-400); }

.admin-bot-label {
  color: var(--gray-400);
  font-size: 0.8rem;
  font-style: italic;
}

.admin-stat-label {
  font-size: 0.8rem;
  color: var(--gray-400);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.875rem;
}

.admin-table th {
  text-align: left;
  padding: 10px 16px;
  background: var(--gray-50);
  color: var(--gray-600);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--gray-200);
}

.admin-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--gray-50); }

.admin-section {
  margin-top: 2rem;
}

.admin-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.75rem;
}

.admin-empty {
  color: var(--gray-500);
  font-size: 0.875rem;
}

.admin-stat-link {
  font-size: 0.8rem;
  color: var(--blue);
  text-decoration: none;
}

.admin-hint {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-bottom: 0.75rem;
}

.admin-filters { margin-bottom: 1rem; }
.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.admin-filter-label {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
  gap: 0.25rem;
}
.admin-filter-input,
.admin-filter-select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 0.85rem;
  background: var(--white);
}
.admin-filter-input { width: 180px; }
.admin-filter-btn {
  padding: 0.35rem 0.75rem;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.admin-filter-btn:hover { opacity: 0.9; }
.admin-filter-clear {
  font-size: 0.85rem;
  color: var(--gray-500);
  text-decoration: underline;
}
.admin-filter-link {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.85rem;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--gray-600);
  transition: background 0.15s, color 0.15s;
}
.admin-filter-link:hover { background: var(--gray-200); }
.admin-filter-link.active {
  background: var(--blue);
  color: var(--white);
}

.report-body {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 24px;
  line-height: 1.7;
}
.report-body h2 { font-size: 1.2rem; font-weight: 700; margin: 24px 0 8px; }
.report-body h2:first-child { margin-top: 0; }
.report-body h3 { font-size: 1rem; font-weight: 600; margin: 20px 0 6px; }
.report-body p { margin: 4px 0; font-size: 0.9rem; }
.report-body li { margin: 2px 0 2px 20px; font-size: 0.9rem; list-style: disc; }
.report-body .admin-table { margin: 8px 0 16px; }
.report-body .admin-table td { font-size: 0.85rem; padding: 6px 12px; }
.admin-pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: center;
}
.admin-page-link {
  font-size: 0.85rem;
  color: var(--primary);
  text-decoration: none;
}
.admin-page-link:hover { text-decoration: underline; }
.admin-page-info {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.admin-subsection-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 0.5rem;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.admin-section-header .admin-section-title {
  margin-bottom: 0;
}

.admin-section-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.api-day-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding-bottom: 1.5rem;
  position: relative;
}

.api-day-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}

.api-day-bar {
  width: 100%;
  background: var(--blue);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.api-day-count {
  font-size: 0.65rem;
  color: var(--gray-600);
  margin-bottom: 2px;
  line-height: 1;
}

.api-day-label {
  position: absolute;
  bottom: -1.4rem;
  font-size: 0.6rem;
  color: var(--gray-500);
  white-space: nowrap;
}

.admin-source-cell {
  font-size: 0.8rem;
  color: var(--gray-600);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-status-error {
  color: #991b1b;
  font-weight: 600;
}

.admin-iata-link {
  font-weight: 700;
  color: var(--blue);
}

.admin-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--blue);
  color: var(--white);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.admin-badge--green  { background: #16a34a; }
.admin-badge--blue   { background: var(--blue); }
.admin-badge--red    { background: #dc2626; }
.admin-badge--yellow { background: #d97706; }

.plan-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.plan-badge--pro  { background: var(--blue-light); color: var(--blue-dark); }
.plan-badge--free { background: var(--gray-100);   color: var(--gray-600); }

.sync-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.sync-status--fresh  { background: #d1fae5; color: #065f46; }
.sync-status--stale  { background: #fef3c7; color: #92400e; }
.sync-status--failed { background: #fee2e2; color: #991b1b; }

.btn-admin-refresh {
  font-size: 0.78rem;
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  cursor: pointer;
  color: var(--gray-600);
}
.btn-admin-refresh:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.btn-admin-refresh--sm {
  font-size: 0.7rem;
  padding: 2px 8px;
}

/* ─── Hero Social Proof ──────────────────────────────────────── */
.hero-social-proof {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* ─── Why Section ───────────────────────────────────────────── */
/* Homepage deals carousel — horizontal scroll-snap strip of routes whose
   current cheapest is well below their 90-day median. Server-rendered;
   no JS controller needed. Section silently hides when @deals is empty.
   `overflow-x: clip` contains the strip's negative-margin overflow so it
   doesn't leak document-level horizontal scroll on mobile WebKit. */
.deals-section {
  background: linear-gradient(180deg, #fff 0%, #f9fafb 100%);
  padding: 32px 0 40px;
  overflow-x: clip;
}
.deals-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.deals-header { margin-bottom: 18px; }
.deals-title  { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; color: var(--gray-900, #111827); }
.deals-sub    { margin: 0; color: var(--gray-600, #4b5563); font-size: 0.95rem; }

.deals-strip {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: 24px;
  padding: 4px 24px 16px 0;  /* breathing room for box-shadows + last card */
  margin: 0 -24px;            /* edge-to-edge scroll within .deals-inner padding */
  -webkit-overflow-scrolling: touch;
}
.deals-strip::-webkit-scrollbar { height: 6px; }
.deals-strip::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.deals-strip::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
.deals-strip > :first-child { margin-left: 24px; }  /* align first card with section header */

/* Canonical deal card (shared/_deal_card.html.erb) — used on the homepage
   strip, the airport-page Deals tab, and the dedicated /airports/:iata/deals
   page. Mirrors the search-card visual language (typography, padding,
   hover) so deal cards feel native, with deal-specific bits (savings
   badge, "was $X" strikethrough) layered on top.

   Layout in three rows: header (destination + savings badge), airlines,
   foot (dates + price column). Flex/grid keep content from truncating at
   reasonable widths (>= 260px); below that they stack vertically. */
.deal-card {
  flex: 0 0 280px;              /* used when parent is horizontal strip (scroll-snap) */
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--gray-200);
  text-decoration: none; color: inherit;
  transition: border-color 100ms, box-shadow 100ms, transform 100ms;
}
.deal-card:hover {
  border-color: var(--blue, #3b82f6);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12);
  transform: translateY(-1px);
}

/* Header: destination on the left, savings pill on the right */
.deal-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.deal-card-dest {
  display: flex; align-items: baseline; gap: 6px;
  font-weight: 700; font-size: 1rem; color: var(--gray-900);
  flex-wrap: wrap; min-width: 0;
  line-height: 1.25;
}
.deal-card-origin {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--gray-600);
}
.deal-card-arrow {
  color: var(--gray-400); font-size: 0.85rem; line-height: 1;
}
.deal-card-dest-label {
  flex-shrink: 1; min-width: 0;
}
.deal-card-savings {
  flex-shrink: 0;
  font-size: 0.78rem; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: #fef3c7; color: #92400e;          /* amber to match deal markers on map */
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Airlines: logo + name, optional second carrier for mixed itineraries */
.deal-card-airlines {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--gray-600);
  flex-wrap: wrap; min-width: 0;
}
.deal-card-airline-name {
  color: var(--gray-700); font-weight: 600;
  white-space: nowrap;
}
.deal-card-airline-sep { color: var(--gray-400); font-weight: 600; }

/* Foot: dates on the left, price + "was" stacked on the right */
.deal-card-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--gray-100);
  padding-top: 10px;
  margin-top: 2px;
}
.deal-card-dates {
  font-size: 0.88rem; color: var(--gray-700);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.deal-card-nights { color: var(--gray-500); font-weight: 400; }
.deal-card-prices {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; flex-shrink: 0;
}
.deal-card-price {
  font-size: 1.35rem; font-weight: 800; color: var(--gray-900); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.deal-card-vs {
  font-size: 0.74rem; color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .deals-section { padding: 32px 0 40px; }
  .deals-title   { font-size: 1.2rem; }
  .deals-sub     { font-size: 0.88rem; }
  .deal-card     { flex: 0 0 260px; }
  .deal-card-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .deal-card-prices { flex-direction: row; align-items: baseline; gap: 8px; }
}

/* Three feature cards under the hero — "No more X" framing per
   seats.aero pattern, but tied to our actual differentiators (live
   prices, flexible-dates search, free alerts). */
.features-section {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 40px 24px;
}
.features-inner { max-width: 1100px; margin: 0 auto; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.feature-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex; flex-direction: column;
  transition: border-color 100ms, box-shadow 100ms, transform 100ms;
}
.feature-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.08);
  transform: translateY(-1px);
}
.feature-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 12px; }
.feature-title {
  font-size: 1.15rem; font-weight: 700;
  color: var(--gray-900, #111827);
  margin: 0 0 4px;
}
.feature-tagline {
  font-size: 0.92rem; font-weight: 700;
  color: var(--gray-700, #374151);
  margin: 0 0 8px;
}
.feature-body {
  font-size: 0.92rem; color: var(--gray-600);
  line-height: 1.55; margin: 0 0 16px; flex: 1;
}
.feature-cta {
  display: inline-block;
  font-size: 0.88rem; font-weight: 600;
  color: var(--blue, #3b82f6);
  text-decoration: none;
  align-self: flex-start;
}
.feature-cta:hover { text-decoration: underline; }

/* "Free, forever" honest pricing block. Replaces the previous half-
   hidden Pro CTA with explicit free vs Pro framing. */
.pricing-block {
  background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
  padding: 40px 24px 44px;
}
.pricing-inner {
  max-width: 720px; margin: 0 auto; text-align: center;
}
.pricing-title {
  font-size: 1.6rem; font-weight: 700;
  color: var(--gray-900, #111827);
  margin: 0 0 14px;
}
.pricing-body {
  font-size: 1rem; color: var(--gray-700);
  line-height: 1.6; margin: 0 0 24px;
}
.pricing-body strong { color: var(--blue-dark, #1d4ed8); }
.pricing-actions { display: flex; justify-content: center; }
/* Renamed from .pricing-cta to .pricing-block-cta — the upgrade page
   uses .pricing-cta as a wrapper <div> around the Stripe button, and
   the link styling here was painting that wrapper blue. Distinct
   class avoids the collision. */
.pricing-block-cta {
  display: inline-block;
  padding: 12px 28px; border-radius: 999px;
  background: var(--blue, #3b82f6);
  color: #fff !important;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none;
  transition: filter 80ms;
}
.pricing-block-cta:hover { filter: brightness(0.95); }

/* ─── Route Pair Page ───────────────────────────────────────── */
.route-pair-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

/* No-direct-route recovery page — same outer .route-pair-page wrapper
   so the shared form partial inherits its layout, then a soft card +
   alternatives grid below. Tone is helpful, not error-y. */
.no-direct-page .no-direct-card {
  background: var(--blue-light, #eff6ff);
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 22px 24px;
  margin: 20px 0 28px;
  text-align: center;
}
.no-direct-headline {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
  margin: 0 0 8px;
}
.no-direct-headline strong { color: var(--blue-dark, #1d4ed8); }
.no-direct-sub {
  font-size: .92rem;
  color: var(--gray-700, #374151);
  margin: 0 0 10px;
}
.no-direct-arrow { color: var(--gray-400, #9ca3af); margin: 0 4px; }
.no-direct-distance { color: var(--gray-500, #6b7280); }
.no-direct-explain {
  font-size: .9rem;
  color: var(--gray-600, #4b5563);
  margin: 0 auto 16px;
  max-width: 520px;
  line-height: 1.5;
}
.no-direct-cta {
  display: inline-block;
  background: var(--blue, #3b82f6);
  color: #fff !important;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .95rem;
}
.no-direct-cta:hover { background: var(--blue-dark, #1d4ed8); }

.no-direct-alts-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
  margin: 0 0 4px;
}
.no-direct-alts-sub {
  font-size: .88rem;
  color: var(--gray-500, #6b7280);
  margin: 0 0 16px;
}
.no-direct-alts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.no-direct-alt-card {
  display: block;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.no-direct-alt-card:hover {
  border-color: var(--blue, #3b82f6);
  box-shadow: 0 2px 8px rgba(59,130,246,.08);
}
.no-direct-alt-city {
  font-weight: 600;
  font-size: .98rem;
  color: var(--gray-900, #111827);
  margin-bottom: 4px;
}
.no-direct-alt-meta {
  font-size: .82rem;
  color: var(--gray-500, #6b7280);
}
.no-direct-alt-iata {
  font-weight: 700;
  color: var(--blue-dark, #1d4ed8);
  font-variant-numeric: tabular-nums;
}
.no-direct-browse-all {
  display: inline-block;
  font-size: .92rem;
  font-weight: 600;
  color: var(--blue, #3b82f6);
  text-decoration: none;
}
.no-direct-browse-all:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .no-direct-page .no-direct-card { padding: 18px 16px; }
  .no-direct-headline { font-size: 1.1rem; }
}

@media (max-width: 760px) {
  .route-pair-page { padding: 14px 12px 40px; }
  .route-pair-header,
  .route-pair-header--compact { margin-bottom: 10px; }
  .route-pair-meta { margin-bottom: 14px; }
  .header-breadcrumb { font-size: .78rem; margin-bottom: 6px; }
}

.route-pair-header {
  margin-bottom: 16px;
}

.route-pair-header--compact {
  text-align: left;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.route-pair-header-actions {
  position: relative;
  flex-shrink: 0;
}

.route-pair-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
  background: var(--white);
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  font-family: inherit;
}
.route-pair-share-btn:hover {
  background: var(--gray-50, #f9fafb);
  border-color: var(--gray-400, #9ca3af);
  color: var(--gray-900, #111827);
}
.route-pair-share-btn:active { transform: translateY(1px); }
.route-pair-share-icon { display: block; }

.route-pair-share-toast {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  background: var(--gray-900, #111827);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  white-space: nowrap;
  z-index: 5;
}
.route-pair-share-toast.is-visible { opacity: 1; transform: translateY(0); }

.route-pair-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.route-pair-title-iata {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 0.5px;
}

.route-pair-title-cities {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-600);
}

@media (max-width: 480px) {
  .route-pair-title { gap: 4px; flex-direction: column; align-items: flex-start; }
  .route-pair-title-iata { font-size: 1.2rem; }
  .route-pair-title-cities { font-size: 0.88rem; }
}

.route-pair-meta {
  margin-bottom: 24px;
}

.route-pair-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.route-pill {
  font-size: 0.82rem;
  color: var(--gray-600);
  background: var(--gray-100);
  border-radius: 20px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.route-pair-pills .frequency-badge {
  padding: 4px 12px;
  font-size: 0.82rem;
}

.route-pair-airlines-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.route-pair-airline-chip {
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.route-pair-airline-chip + .route-pair-airline-chip::before {
  content: "·";
  color: var(--gray-300);
  margin-right: 3px;
}

.route-pair-airline-code {
  font-size: 0.75rem;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: 3px;
}

.route-pair-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 32px;
}

.route-pair-cta {
  display: inline-block;
  padding: 14px 32px;
  background: var(--blue);
  color: var(--white) !important;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius);
  transition: background 0.15s;
}

.route-pair-cta:hover {
  background: var(--blue-dark);
}

/* ─── Route pair inline schedule ───────────────────────────── */
.route-pair-schedule-section {
  margin-bottom: 32px;
}

.route-pair-schedule-section h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.route-pair-schedule-sub {
  font-size: 0.8rem;
  color: var(--gray-400);
  font-weight: 400;
  margin-left: 8px;
}

/* When the user runs a live date search, the form-controller adds .searched
   to the page wrapper. Hide the snapshot, alert CTA, schedule, explore, and
   airline-chips row so the live results have the user's full attention.
   Wedge inside results carries its own alert CTA, so nothing's lost.
   Reload the page to reset. */
.route-pair-page.searched .rtp-snapshot,
.route-pair-page.searched .route-pair-airlines-row,
.route-pair-page.searched .route-pair-alert-cta,
.route-pair-page.searched .route-pair-schedule-section,
.route-pair-page.searched .route-pair-explore { display: none; }

/* Once results are showing, the rest of the page is hidden — give the
   results layout more room than the 1100px we use for the snapshot/cta
   stack. 1400px keeps cards comfortable on a 1440px laptop without
   feeling oversized on a 1920px monitor. */
.route-pair-page.searched { max-width: 1400px; }

/* ── Deals strip ───────────────────────────────────────────── */

.route-pair-prices-section {
  margin-bottom: 32px;
}

.route-pair-prices-section h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

/* On-demand date-search panel — single-pair RapidAPI lookup */
.route-search {
  margin: 0 0 24px;
  padding: 20px 24px 22px;
  /* Subtle blue-tinted gradient so the search block reads as the primary
     action area on the page, not just another content card. */
  background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
  border: 1px solid var(--blue-200, #bfd4ff);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .06);
}
.route-search-heading {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--gray-900, #111827);
}
.route-search-tagline {
  margin: 0 0 16px;
  color: var(--gray-600, #4b5563);
  font-size: 0.9rem;
}
.route-search-form { /* shell — layout lives on .rp-search-fields below */ }

/* Trip controls — row of trip-type pills + travelers popover above the
   airport pickers. Mirrors the Google Flights "Trip type / passengers"
   row in feel. */
.rp-trip-controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 12px;
}
.rp-trip-type {
  display: inline-flex; gap: 4px;
  background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 999px; padding: 3px;
}
.rp-trip-type-pill {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--gray-700, #374151);
  cursor: pointer; user-select: none;
  transition: background 0.15s, color 0.15s;
}
.rp-trip-type-pill input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.rp-trip-type-pill.is-active {
  background: #fff; color: #1d4ed8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.rp-trip-type-pill:hover:not(.is-active) { color: #1f2937; }

.rp-pax { position: relative; }
.rp-pax-button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--gray-700, #374151);
  cursor: pointer;
}
.rp-pax-button:hover { border-color: #9ca3af; }
.rp-pax-caret { font-size: 0.7em; color: var(--gray-500, #6b7280); }
.rp-pax-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 280px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}
.rp-pax-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px 0;
}
.rp-pax-row + .rp-pax-row { border-top: 1px solid #f3f4f6; }
.rp-pax-row-label { font-size: 0.92rem; font-weight: 600; color: #111827; }
.rp-pax-row-sub   { font-size: 0.78rem; color: var(--gray-500, #6b7280); }
.rp-pax-stepper {
  display: inline-flex; align-items: center; gap: 8px;
}
.rp-pax-step {
  width: 28px; height: 28px; padding: 0;
  background: #fff; border: 1px solid #d1d5db; border-radius: 50%;
  font-size: 1rem; color: #1f2937; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.rp-pax-step:hover { border-color: #9ca3af; }
.rp-pax-step:disabled { opacity: 0.4; cursor: not-allowed; }
.rp-pax-value {
  min-width: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: #111827;
}
/* Cabin section inside the pax popover. Same popover real-estate as the
   pax steppers — saves a slot in the trip-controls row vs the old
   standalone .rp-cabin pill. cabin-select gates non-economy radios for
   free users; trip-controls listens for change and refreshes the button
   summary ("2 travelers · Business"). */
.rp-pax-cabin {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
  display: flex; flex-direction: column; gap: 4px;
}
.rp-pax-cabin-label {
  font-size: 0.78rem; font-weight: 700;
  color: var(--gray-500, #6b7280);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.rp-pax-cabin-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.9rem; color: var(--gray-800, #1f2937);
}
.rp-pax-cabin-opt:hover { background: #f9fafb; }
.rp-pax-cabin-opt input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--blue, #3b82f6);
  flex-shrink: 0;
}
.rp-pax-cabin-opt-label { flex: 1; }
.rp-pax-cabin-pro {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: #dbeafe; color: #1d4ed8;
  padding: 2px 6px; border-radius: 999px;
  flex-shrink: 0;
}

.rp-pax-done {
  margin-top: 10px; width: 100%;
  padding: 8px 12px;
  background: #1d4ed8; color: #fff; border: none; border-radius: 8px;
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.rp-pax-done:hover { background: #1e40af; }

/* Header line: "Search live prices" + tagline on the left, "Advanced
   flexible dates" toggle switch on the right. */
.route-search-headerline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.route-search-headerline > div { flex: 1; min-width: 0; }
.route-search-headerline .route-search-heading,
.route-search-headerline .route-search-tagline { margin-bottom: 0; }

/* Search-mode tabs — "Exact dates" vs "Flexible window". Sits at the
   top of the form because picking a tab swaps the date picker shape
   and adds/removes the nights + DOW chip fields below. The radio
   inputs are visually hidden; :has(input:checked) drives the active
   underline so we don't need JS to toggle a class. */
.rp-mode-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  margin: 0 0 14px;
}
.rp-mode-tab {
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;  /* overlap the container's border so active state lines up */
  transition: color .12s, border-color .12s;
}
.rp-mode-tab input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.rp-mode-tab:hover { color: var(--gray-800, #1f2937); }
.rp-mode-tab:has(input:checked) {
  color: var(--blue, #3b82f6);
  border-bottom-color: var(--blue, #3b82f6);
}
.rp-mode-tab:has(input:focus-visible) {
  outline: 2px solid var(--blue, #3b82f6);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (max-width: 640px) {
  /* Equal-width tabs so they fill the row evenly on mobile. */
  .rp-mode-tab { flex: 1; text-align: center; padding: 12px 8px; }
}

/* Advanced (Flexible dates) mode — sits below the always-visible airport
   pickers. Window uses the same dual-display pattern as the simple search
   for visual consistency; nights is a single row with a sep + helper text.
   `[hidden]` rules are explicit because the class selectors below would
   otherwise win over the UA stylesheet's `[hidden] { display: none }`. */
.rp-search-airports { display: flex; gap: 12px; flex-wrap: wrap; }
.rp-search-airports > .rp-search-airport { flex: 1 1 220px; min-width: 0; }
.rp-search-simple { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.rp-search-simple[hidden] { display: none; }
.rp-adv-fields { display: flex; flex-direction: column; gap: 18px; padding: 16px 0 4px; }
.rp-adv-fields[hidden] { display: none; }
.rp-adv-section { display: flex; flex-direction: column; gap: 8px; }
.rp-adv-section[hidden] { display: none; }

/* DoW filter — collapsed by default via <details>. The summary acts as
   the toggle; native <details> handles open/close with no JS. */
.rp-adv-dow > summary { list-style: none; }
.rp-adv-dow > summary::-webkit-details-marker { display: none; }
.rp-adv-dow-summary {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  padding: 6px 0;
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 500;
}
.rp-adv-dow-summary::before {
  content: "▸";
  color: var(--gray-500);
  font-size: 0.7rem;
  transition: transform .12s;
}
.rp-adv-dow[open] > .rp-adv-dow-summary::before { transform: rotate(90deg); }
.rp-adv-dow-summary:hover { color: var(--blue-dark, #1e3a8a); }
.rp-adv-dow-summary-hint {
  color: var(--gray-500);
  font-weight: 400;
  font-size: 0.82rem;
}
.rp-adv-dow[open] > * + * { margin-top: 8px; }

/* Attention pulse when alert-pair-preview auto-opens the DoW on
   over-cap — draws the eye so the user notices the filter just
   appeared. ~1.8s ease-out so it fades naturally. */
.rp-adv-dow--attention > .rp-adv-dow-summary { color: var(--blue-dark, #1e3a8a); }
.rp-adv-dow--attention {
  animation: rp-adv-dow-pulse 1.8s ease-out;
  border-radius: 8px;
}
@keyframes rp-adv-dow-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(59, 130, 246, 0.45); }
  35%  { box-shadow: 0 0 0 8px  rgba(59, 130, 246, 0.20); }
  100% { box-shadow: 0 0 0 0    rgba(59, 130, 246, 0);    }
}

/* Desktop compression: turn the route_pair search form into a 4-column
   grid so From / To / Date1 / Date2 share one row, with the rest
   (nights, DOW chips, submit) flowing below. Wrappers use
   `display: contents` so their children flow as direct grid items —
   keeps the existing partial structure intact while collapsing the
   vertical stack into a denser horizontal layout. */
@media (min-width: 821px) {
  .route-search-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 14px;
    align-items: end;
  }
  .route-search-form > .rp-mode-tabs,
  .route-search-form > .rp-trip-controls,
  .route-search-form > .route-search-headerline {
    grid-column: 1 / -1;
  }
  .route-search-form > .rp-search-airports { display: contents; }
  .route-search-form > .rp-search-airports > .rp-search-airport--from { grid-column: 1; flex: none; }
  .route-search-form > .rp-search-airports > .rp-search-airport--to   { grid-column: 2; flex: none; }

  /* Simple mode: date-range spans cols 3-4, submit gets its own full row.
     `:not([hidden])` scope is load-bearing — `display: contents` has
     the same specificity as the `[hidden]` UA rule + our
     `.rp-search-simple[hidden]` override and would override it,
     so the wrapper's children kept flowing into the grid even when
     the toggle hid the wrapper. */
  .route-search-form > .rp-search-simple:not([hidden]) { display: contents; padding-top: 0; }
  .route-search-form > .rp-search-simple:not([hidden]) > [data-controller="date-range"] {
    grid-column: 3 / 5;
    display: block;
    width: 100%;
    min-width: 0;
  }
  .route-search-form > .rp-search-simple:not([hidden]) > .route-search-submit {
    grid-column: 1 / -1;
  }

  /* Advanced mode: window section in cols 3-4 row 1, then nights | DOW
     on row 2, pair-count + submit full width. Help text inside the
     window section reads as noise next to the From/To inputs — hide it
     to keep the row visually balanced. `:not([hidden])` scoping
     matters here too — see comment on .rp-search-simple above. */
  .route-search-form > .rp-adv-fields:not([hidden]) { display: contents; padding: 0; }
  .route-search-form > .rp-adv-fields:not([hidden]) > .rp-adv-window {
    grid-column: 3 / 5;
  }
  .route-search-form > .rp-adv-fields:not([hidden]) > .rp-adv-window > .rp-adv-help,
  .route-search-form > .rp-adv-fields:not([hidden]) > .rp-adv-window > .rp-adv-label {
    display: none;
  }
  .route-search-form > .rp-adv-fields:not([hidden]) > .rp-adv-window [data-controller="date-range"] {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .route-search-form > .rp-adv-fields:not([hidden]) > .rp-adv-section[data-adv-search-target="advNightsSection"],
  .route-search-form > .rp-adv-fields:not([hidden]) > .rp-adv-dow {
    /* Top-align both refinement cells so the "Trip length" and "Days of
       week" labels sit on the same horizontal line. Without this, the
       form's `align-items: end` bottoms-out each section and the
       shorter Trip length floats below the DOW label. */
    align-self: start;
    text-align: left;
  }
  .route-search-form > .rp-adv-fields:not([hidden]) > .rp-adv-section[data-adv-search-target="advNightsSection"] {
    grid-column: 1;
  }
  /* DOW collapsed <details> spans cols 2-4 so the chips (when expanded)
     fit on one line alongside their Outbound / Return sublabel. Targeted
     by class because the element was changed from <div> to <details>
     (collapsed-by-default) and nth-of-type wouldn't match anymore. */
  .route-search-form > .rp-adv-fields:not([hidden]) > .rp-adv-dow {
    grid-column: 2 / 5;
  }
  .route-search-form > .rp-adv-fields:not([hidden]) > .alert-form-pair-count {
    grid-column: 1 / -1;
  }
  .route-search-form > .rp-adv-fields:not([hidden]) > .route-search-submit {
    grid-column: 1 / -1;
  }
}
.rp-adv-label { font-size: 0.85rem; font-weight: 600; color: var(--gray-800); }
.rp-adv-help  { font-size: 0.78rem; color: var(--gray-500); margin: -2px 0 4px; line-height: 1.4; }
.rp-adv-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rp-adv-row[hidden] { display: none; }
.rp-adv-sublabel { font-size: 0.78rem; font-weight: 600; color: var(--gray-700); margin-top: 8px; }

/* On desktop the DOW section sits in cols 2-4 of the compressed form
   grid — wide enough to put the Outbound/Return sublabel inline to
   the left of its chip row. Sublabel gets a fixed min-width so the
   two chip rows align flush vertically (chips start at the same X). */
@media (min-width: 821px) {
  .rp-adv-row { flex-direction: row; align-items: center; gap: 12px; }
  .rp-adv-row > .rp-adv-sublabel { margin-top: 0; min-width: 70px; }
}
.rp-adv-nights {
  display: flex; flex-direction: row;
  align-items: center; gap: 8px;
  flex-wrap: nowrap;
}
.rp-adv-nights-stepper {
  display: inline-flex; align-items: stretch; flex: 0 0 auto;
  border: 1px solid var(--gray-200); border-radius: 8px;
  overflow: hidden; background: var(--white);
}
.rp-adv-nights-stepper:focus-within {
  border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-light);
}
.rp-adv-nights-stepper input[type="number"] {
  width: 38px; text-align: center;
  padding: 8px 2px; border: 0; outline: none;
  font-size: 1rem; font-family: inherit; background: transparent;
  -moz-appearance: textfield;
}
.rp-adv-nights-stepper input[type="number"]::-webkit-outer-spin-button,
.rp-adv-nights-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.rp-adv-nights-btn {
  width: 32px; min-height: 36px;
  background: var(--gray-50, #f9fafb); border: 0; cursor: pointer;
  font-size: 1.1rem; font-weight: 600; color: var(--gray-700, #374151);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .12s;
}
.rp-adv-nights-btn:hover { background: var(--gray-100, #f3f4f6); }
.rp-adv-nights-btn:active { background: var(--gray-200, #e5e7eb); }
.rp-adv-nights-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rp-adv-nights-sep  { color: var(--gray-500); font-weight: 600; flex: 0 0 auto; }
.rp-adv-nights-unit { color: var(--gray-600); font-size: 0.9rem; flex: 0 0 auto; white-space: nowrap; }

/* Advanced search results — banner with spinner that swaps to a finished
   state when the background fetch completes. Cards reuse .search-card. */
.adv-results { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.adv-results-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 8px;
  background: #eff6ff; color: #1e40af; font-size: 0.9rem;
  border: 1px solid #bfdbfe;
}
.adv-results-banner.is-finished { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.adv-results-banner.is-error    { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.adv-results-banner-text { flex: 1; }
.adv-results-spinner {
  width: 14px; height: 14px; border-radius: 999px; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: adv-spin 0.9s linear infinite;
}
@keyframes adv-spin { to { transform: rotate(360deg); } }
.adv-results-empty { color: var(--gray-600); font-size: 0.92rem; line-height: 1.5; padding: 8px 0; }

/* Advanced-search card variant: outbound + nights pill + return in a 3-col
   grid. The pill replaces the legacy `.search-card-nights` text block and
   sits between the legs as a visual bridge. Color encodes trip length so
   users can scan durations at a glance.
   Selectors use `.search-card-legs.search-card-legs--bridge` (2 classes)
   to beat the base `.search-card-legs` rule defined later in the file
   without depending on source order. */
.search-card-legs.search-card-legs--bridge {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.search-card-leg--right { text-align: right; }
.search-card-leg--right .search-card-leg-times { text-align: right; }
.search-card-bridge { display: flex; justify-content: center; align-items: center; }
.search-card-nights-pill {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  white-space: nowrap; line-height: 1;
}
.search-card-nights-pill.nights-weekend  { background: #fef3c7; color: #92400e; }  /* ≤3n: amber */
.search-card-nights-pill.nights-week     { background: #dbeafe; color: #1e40af; }  /* 4–7n: blue */
.search-card-nights-pill.nights-long     { background: #d1fae5; color: #065f46; }  /* 8–13n: green */
.search-card-nights-pill.nights-extended { background: #ede9fe; color: #5b21b6; }  /* 14n+: purple */
.search-card-legs--bridge .search-card-leg-times { white-space: nowrap; }
.search-card-legs--bridge .search-card-leg-date  { white-space: nowrap; }

/* When the cards-list is rendered alongside the filter sidebar, the main
   column can get tight (~700px on a 1100px page minus a 220px sidebar).
   Stack the bridge to a 2-col grid below ~720px so the legs don't get
   crushed and the times don't wrap awkwardly. */
@media (max-width: 720px) {
  .search-card-legs.search-card-legs--bridge { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .search-card-legs--bridge .search-card-bridge {
    grid-column: 1 / -1; order: -1;        /* pill at the top of the legs block when stacked */
    justify-content: flex-start;
  }
  .search-card-nights-pill { padding: 3px 10px; font-size: 0.72rem; }
}

/* DOW chip filter — used in the advanced-search results sidebar. Reuses
   trip-filter-group spacing; chip styling matches the form-side weekday
   chips (.alert-form-chip). */
.trip-filter-dow-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trip-filter-dow-chip {
  display: inline-flex; align-items: center; padding: 5px 11px;
  border: 1px solid var(--gray-200); border-radius: 999px;
  background: var(--white); color: var(--gray-600);
  font-size: 0.78rem; cursor: pointer; user-select: none;
}
.trip-filter-dow-chip input { display: none; }
.trip-filter-dow-chip:has(input:checked) {
  background: var(--heat-bg, var(--blue-light));
  border-color: var(--heat-fg, var(--blue));
  color: var(--heat-fg, var(--blue-dark));
}

/* Specific-date chip filter (advanced search). Two-line chip: weekday
   abbreviation + day number on top, month abbrev underneath. */
.trip-filter-date-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; }
.trip-filter-date-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 4px 9px; min-width: 44px;
  border: 1px solid var(--gray-200); border-radius: 8px;
  background: var(--white); color: var(--gray-700);
  font-size: 0.78rem; cursor: pointer; user-select: none; line-height: 1.2;
}
.trip-filter-date-chip input { display: none; }
.trip-filter-date-chip-month { font-size: 0.66rem; color: var(--gray-500); }
.trip-filter-date-chip:has(input:checked) {
  background: var(--heat-bg, var(--blue-light));
  border-color: var(--heat-fg, var(--blue));
  color: var(--heat-fg, var(--blue-dark));
}
.trip-filter-date-chip:has(input:checked) .trip-filter-date-chip-month {
  color: var(--heat-fg, var(--blue-dark));
}

/* Nights range filter (advanced search). Two small number inputs in a row,
   sharing the trip-filter-group container. */
.trip-filter-nights { display: flex; align-items: center; gap: 8px; }
.trip-filter-nights-input {
  width: 56px; text-align: center;
  padding: 6px 6px; border: 1px solid var(--gray-200); border-radius: 6px;
  font-size: 0.9rem; font-family: inherit;
}
.trip-filter-nights-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-light); }
.trip-filter-nights-sep  { color: var(--gray-500); font-weight: 600; }
.trip-filter-nights-unit { color: var(--gray-600); font-size: 0.85rem; }

/* Advanced wedge — same shape as the simple-search wedge but with an
   "advanced"-flavoured CTA. */
.route-search-wedge--advanced { background: linear-gradient(135deg, #eff6ff 0%, #f3e8ff 100%); border: 1px solid #c7d2fe; }

/* Sticky compact summary bar — slides in from above once the full form
   scrolls out of view. Click anywhere to scroll back. Sits below the
   sticky navbar (top: 56px); higher z-index so it covers content. */
.route-search-sticky {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
  transform: translateY(-110%);
  transition: transform .18s ease;
  pointer-events: none;
  cursor: pointer;
}
.route-search-sticky.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.route-search-sticky-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
}
.route-search-sticky-route {
  font-weight: 600;
  color: var(--gray-900, #111827);
  font-size: .95rem;
  white-space: nowrap;
}
.route-search-sticky-arrow {
  color: var(--gray-400);
  margin: 0 4px;
}
.route-search-sticky-dates {
  flex: 1;
  color: var(--gray-700, #374151);
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.route-search-sticky-edit {
  background: var(--blue, #2563eb);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  pointer-events: none;  /* click bubbles to the bar's handler */
}
@media (max-width: 600px) {
  .route-search-sticky-inner { padding: 8px 12px; gap: 10px; }
  .route-search-sticky-route { font-size: .9rem; }
  .route-search-sticky-dates { font-size: .8rem; }
  .route-search-sticky-edit { padding: 5px 10px; font-size: .8rem; }
}

/* New 4-up layout: From | To | Depart-Return pair | Submit. All boxes
   are equal-height clickable surfaces with a label above.
   Note: classes prefixed `rp-search-*` to avoid colliding with the
   homepage's older `.route-search-fields` (flex layout). */
.rp-search-fields {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(220px, 2fr) minmax(280px, 2fr) auto;
  gap: 10px;
  align-items: stretch;
}
.rp-search-airport,
.rp-search-date-pair {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rp-search-label {
  position: absolute;
  top: 7px;
  left: 14px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-600, #4b5563);
  pointer-events: none;
  z-index: 2;
}
.rp-search-airport-input {
  width: 100%;
  padding: 22px 14px 8px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  color: var(--gray-900, #111827);
  font-family: inherit;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.rp-search-airport-input:hover { border-color: var(--gray-400, #9ca3af); }
.rp-search-airport-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18), 0 1px 2px rgba(15, 23, 42, .04);
  background: var(--white);
}
/* Empty-submit feedback: shake + red ring on the missing airport input,
   fired from route_search_form_controller when From or To is blank.
   Same treatment applies to the date-box button when a required date
   is missing — both use the rp-shake keyframes for visual parity. */
.rp-search-airport-input--invalid,
.rp-search-date-box--invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .18), 0 1px 2px rgba(15, 23, 42, .04) !important;
  animation: rp-shake .35s ease-in-out;
}
/* The date-pair container draws the visible border (each box is
   borderless inside). Flash the wrapper so the ring actually shows. */
.rp-search-date-pair:has(.rp-search-date-box--invalid) {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .18), 0 1px 2px rgba(15, 23, 42, .04);
  animation: rp-shake .35s ease-in-out;
}
@keyframes rp-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.rp-search-missing-hint {
  margin: 0 0 8px;
  color: #b91c1c;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* The autocomplete dropdown lives inside the airport-search container */
.rp-search-airport .autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 4px;
}

/* Dual-display date picker — two clickable boxes side by side, both
   trigger the same calendar panel. */
.rp-search-date-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.rp-search-date-pair:hover { border-color: var(--gray-400, #9ca3af); }
.rp-search-date-pair:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.18), 0 1px 2px rgba(15, 23, 42, .04); }
.rp-search-date-box {
  position: relative;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--gray-200);
  padding: 22px 14px 8px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  color: var(--gray-800);
  min-height: 56px;
}
.rp-search-date-pair > .rp-search-date-box:last-child { border-right: 0; }
.rp-search-date-box:hover { background: rgba(59,130,246,0.04); }
.dr-box-date { font-weight: 600; }
.dr-box-meta {
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue);
  background: rgba(59,130,246,0.10);
  padding: 2px 7px;
  border-radius: 999px;
}
.dr-box-placeholder { color: var(--blue); font-weight: 600; }

/* Dual-display variant of the picker: panel anchors below the pair */
.dr--dual { display: block; min-width: 0; }
.dr--dual .dr-panel { margin-top: 6px; }

@media (max-width: 760px) {
  .rp-search-fields {
    grid-template-columns: 1fr;
    grid-template-areas:
      "from"
      "to"
      "dates"
      "submit";
    gap: 10px;
  }
  .rp-search-airport--from { grid-area: from; }
  .rp-search-airport--to   { grid-area: to; }
  .rp-search-date-pair     { grid-area: dates; }
  .route-search-submit     { grid-area: submit; min-height: 52px; }
  .route-search { padding: 16px 14px 18px; margin-bottom: 16px; }
  .route-search-heading { font-size: 1.05rem; margin: 0 0 4px; }
  .route-search-tagline { font-size: .8rem; margin: 0 0 12px; }

  /* Date panel anchors to the form column (not the viewport) so it can't
     overflow the tinted form background. The .dr--dual parent is the
     full-width dates row on mobile, so left:0/right:0 sizes the panel
     to that row. */
  .dr--dual .dr-panel {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    min-width: 0;
    padding: 12px;
  }
  .rp-search-date-value { display: block; }
  .rp-search-date-box { min-height: 60px; }

  /* Tighten the form: drop the heading on small screens (the form layout
     is self-explanatory once defaults are visible), keep tagline as a hint. */
  .route-search-heading { display: none; }
  .route-search-tagline { font-size: .8rem; margin: 0 0 10px; color: var(--gray-600, #4b5563); }
  .route-search { padding: 14px 12px 16px; }
}
.route-search-submit {
  padding: 0 28px;
  min-height: 56px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .01em;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.route-search-submit:hover { filter: brightness(1.05); box-shadow: 0 4px 10px rgba(37, 99, 235, .32); }
.route-search-submit:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(37, 99, 235, .25); }
.route-search-results { margin-top: 20px; }
.route-search-results-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.route-search-results-count {
  background: var(--gray-100);
  color: var(--gray-700, #374151);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
.route-search-results-sub {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-400);
}

/* Top bar: heading on the left, mobile-only Filters toggle on the right. */
.route-search-results-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.route-search-results-topbar .route-search-results-heading { margin: 0; flex: 1; }

/* Mobile-only toggle — hidden on desktop where the sidebar is always visible. */
.result-filter-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
  cursor: pointer;
  white-space: nowrap;
}
.result-filter-toggle:hover { background: var(--gray-50, #f9fafb); }
.result-filter-toggle-badge {
  background: var(--blue);
  color: white;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 2px;
}

/* Desktop layout: sidebar (filters) + main (wedge + cards). The .has-filters
   modifier comes from the partial — when we have <5 results we skip the
   sidebar and run the main column full width. */
.route-search-results-layout { display: block; }
.route-search-results.has-filters .route-search-results-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}
.route-search-results-main { min-width: 0; }

/* Filter sidebar — sticks to the top while user scrolls cards. With the
   heat-mapped date chips the filter card can grow taller than the
   viewport, so cap it and let it scroll internally. */
.result-filter-sidebar {
  position: sticky;
  top: 70px;  /* navbar (56) + breathing room */
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
.result-filter-sheet-header,
.result-filter-sheet-overlay { display: none; }

/* Inside the desktop sidebar (220px wide), stack everything vertically —
   the default 2-column slider grid and horizontal airline chips don't
   read in a narrow column. The wrapping .trip-filter-sliders also drops
   its own border/background since the sidebar already provides chrome. */
@media (min-width: 920px) {
  .result-filter-sidebar .trip-filter-sliders {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    margin-bottom: 16px;
  }
  .result-filter-sidebar .trip-filter-airlines {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .result-filter-sidebar .trip-filter-group { margin-top: 16px; }
  .result-filter-sidebar .trip-filter-group-label { margin-bottom: 8px; }
}

/* Filter card itself — sliders + airline checkboxes. Reuses .trip-filter-*
   element styles. */
.result-filter {
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}
.result-filter-reset {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
  cursor: pointer;
}
.result-filter-reset:hover { background: var(--gray-100); }

/* Mobile: sidebar becomes a fullscreen sheet, toggle button shows. */
@media (max-width: 919px) {
  .result-filter-toggle { display: inline-flex; }
  .route-search-results.has-filters .route-search-results-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .result-filter-sidebar {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--white);
    transform: translateY(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .result-filter-sidebar.is-open { transform: translateY(0); }
  .result-filter-sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .result-filter-sheet-overlay.is-open { opacity: 1; pointer-events: auto; }
  .result-filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
  }
  .result-filter-sheet-title { font-size: 1rem; font-weight: 700; }
  .result-filter-sheet-close {
    background: transparent;
    border: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue);
    cursor: pointer;
    padding: 4px 8px;
  }
  /* Filter card inside the sheet runs full bleed, no nested border. */
  .result-filter-sidebar .result-filter {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 16px;
    flex: 1;
  }
}

.route-search-no-matches {
  margin-top: 16px;
  padding: 14px;
  background: var(--gray-50, #f9fafb);
  border: 1px dashed var(--gray-300);
  border-radius: 8px;
  text-align: center;
  color: var(--gray-700, #374151);
  font-size: .9rem;
}
.route-search-no-matches-link {
  background: transparent;
  border: 0;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.route-search-more-heading {
  margin: 18px 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

/* Unified flight result card — used for top + rest, single layout */
.search-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
/* 3-column card: airline | flight legs | action.
   - Airline column: logo + name; if outbound/return airlines differ,
     two rows stacked.
   - Legs column: per-leg date, departure time + IATA, duration + arrow,
     arrival time + IATA. Nights pill between outbound and return.
   - Action column: price + breakdown, Book button.
   Fixed minimum widths so longer airline names or 2-airline stacks don't
   reshape the row. Mobile (<720px) stacks all three columns vertically. */
/* Desktop: three fixed columns — airline (left), legs (middle),
   action (right). Same column geometry on every card so card-to-card
   alignment in a list stays consistent. Mobile (≤820px) stacks the
   three columns as three rows. */
.search-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(360px, 2.3fr) minmax(140px, 0.9fr);
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}
.search-card--top {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
  background: rgba(59, 130, 246, 0.03);
}

/* "Cheaper than usual" flag — outlined band that sits above the top
   search card when the cheapest result is ≥15% below the typical
   (median) price for this route. Honest framing: we're comparing to
   median across our price history, not to a previous price. */
.search-deal-flag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px solid #f59e0b;
  border-bottom: none;
  background: #fffbeb;
  border-radius: 12px 12px 0 0;
  margin-bottom: -1px;        /* overlap with card border so they read as one element */
}
.search-deal-flag-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}
.search-deal-flag-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.search-deal-flag-headline {
  font-size: .92rem;
  font-weight: 700;
  color: #92400e;
  line-height: 1.3;
}
.search-deal-flag-sub {
  font-size: .8rem;
  color: var(--gray-600, #4b5563);
}

/* When the deal flag is attached to the card, square off the card's
   top corners so the two visually fuse into one shape. */
.search-card--has-deal-flag {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-color: #f59e0b;
}

/* Column 1 — airline(s). Codeshare stacks vertically. */
.search-card-col--airline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.search-card-airline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.search-card-airline-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-700);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column 2 — flight legs */
.search-card-col--legs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.search-card-leg-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-card-leg-date {
  font-size: 0.76rem;
  color: var(--gray-500);
  font-weight: 600;
  text-align: center;
}
.search-card-leg-times {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 2fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  /* Pull the from/to columns away from the card edges — having the
     times flush against the card border read as cramped. */
  padding: 0 14px;
}
.search-card-leg-from,
.search-card-leg-to {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
/* Times point inward toward the duration/plane in the middle: the
   departure column right-aligns (text hugs the bridge), arrival
   column left-aligns. Reads as "depart → fly → arrive". */
.search-card-leg-from { align-items: flex-end;   text-align: right; }
.search-card-leg-to   { align-items: flex-start; text-align: left;  }
.search-card-leg-time {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.1;
}
.search-card-leg-iata {
  font-size: 0.78rem;
  color: var(--gray-500);
}
.search-card-leg-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Gap leaves room for the plane glyph to overhang above the line
     without overlapping the duration text above. */
  gap: 8px;
  min-width: 0;
}
.search-card-leg-duration {
  font-size: 0.74rem;
  color: var(--gray-500);
  line-height: 1;
}
/* Horizontal line spanning the bridge cell with a plane icon centered on
   it. Plane sits ON the line with a transparent background — the line
   passes visibly through the glyph (no opaque pill), so the row reads
   as one continuous flight path. */
.search-card-leg-arrow {
  width: 100%;
  height: 1px;
  background: var(--gray-400);
  position: relative;
}
.search-card-leg-arrow::after {
  content: "✈";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.95rem;
  color: var(--gray-500);
  background: transparent;
  padding: 0;
  line-height: 1;
}

/* Nights divider between outbound and return rows */
.search-card-nights-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4px 0;
}
.search-card-nights-divider::before,
.search-card-nights-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: calc(50% - 50px);
  background: var(--gray-200);
}
.search-card-nights-divider::before { left: 0; }
.search-card-nights-divider::after  { right: 0; }
.search-card-nights-pill {
  position: relative;
  z-index: 1;
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
}

/* Column 3 — action. Desktop: column with price up top and the
   Book button below; the inter-element margin gives them clear breathing
   room. */
.search-card-col--action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  white-space: nowrap;
}
.search-card-price {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--gray-800);
  line-height: 1;
}
.search-card--top .search-card-price { color: var(--blue); font-size: 1.7rem; }
.search-card-price-total {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--gray-500);
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.search-card-col--action .search-card-book { margin-top: 14px; }

@media (max-width: 820px) {
  .search-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    /* Breathing room between legs and the price/book action row. */
    row-gap: 16px;
    padding: 12px 14px;
  }
  .search-card-col--airline {
    grid-column: 1;
    grid-row: 1;
    /* Two airlines on a codeshare share one line on mobile instead of
       stacking — the card is already narrow, vertical stacking eats
     vertical space we'd rather use for the times. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .search-card-col--legs   { grid-column: 1; grid-row: 2; }
  /* Action on mobile: price (with breakdown under it) on the left,
     Book button on the right — both right-aligned within the row.
     Both elements scale up since the rest of the card has more room. */
  .search-card-col--action {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    text-align: right;
  }
  .search-card-col--action .search-card-price       { grid-column: 1; grid-row: 1; justify-self: end; font-size: 1.7rem; }
  .search-card-col--action .search-card-price-total { grid-column: 1; grid-row: 2; justify-self: end; }
  .search-card-col--action .search-card-book        { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; padding: 12px 22px; font-size: 1rem; }
  .search-card--top .search-card-col--action .search-card-price { font-size: 1.85rem; }
  /* On the narrow card, the times don't need extra inset — the card
     padding (14px) is already pulling them in enough. */
  .search-card-leg-times { padding: 0; }
}
.search-card-book {
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  border-radius: 6px;
}
.search-card-book:hover { filter: brightness(0.95); }

/* Mobile: stack to a single column so the Cheapest badge doesn't wrap into
   the airline row, and tighten everything to keep cards short — typical
   user has 4–6 cards to scan. The action row (price + book) becomes a
   horizontal strip at the bottom separated by a hairline. */
@media (max-width: 640px) {
  .search-card {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 12px;
  }
  .search-card-airline {
    font-size: 0.9rem;
    flex-wrap: wrap;
    gap: 4px;
  }
  .search-card-badge {
    margin-left: 0;
    margin-bottom: 2px;
    order: -1;
    align-self: flex-start;
    flex-basis: auto;
  }
  .search-card-legs {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 0.83rem;
  }
  .search-card-leg-label { font-size: 0.62rem; }
  .search-card-leg-date  { font-size: 0.78rem; }
  .search-card-action {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--gray-100);
  }
  .search-card-price             { font-size: 1.1rem; }
  .search-card--top .search-card-price { font-size: 1.2rem; }
  .search-card-book              { padding: 6px 12px; font-size: 0.82rem; }
}

/* Skeleton state — placeholder cards rendered into the Turbo Frame on submit
   so the user sees activity instead of an unchanged page during the 5–25s
   API call. Real results swap in atomically when Turbo replaces the frame. */
.search-card--skeleton { pointer-events: none; }
.search-card--skeleton .search-card-airline,
.search-card--skeleton .search-card-leg,
.search-card--skeleton .search-card-action { display: flex; flex-direction: column; gap: 6px; }
.search-card--skeleton .search-card-airline { flex-direction: row; align-items: center; gap: 8px; }
.search-card--skeleton .search-card-action { align-items: flex-end; }

.skel-bar {
  display: inline-block;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
}
.skel-bar--circle { width: 22px; height: 22px; border-radius: 50%; }

@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.route-search-results-heading--skeleton { display: flex; align-items: center; }
.route-search-results-heading--skeleton .skel-bar { display: block; }
.route-search-skeleton-note {
  font-size: 0.82rem;
  color: var(--gray-500);
  margin: 12px 0 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .skel-bar { animation: none; background: var(--gray-100); }
}

/* Collapsed-form bar — shown when .route-search.is-collapsed (set after
   the user has searched). Hides heading/tagline/form fields so live
   results sit above the fold, with an Edit button to re-expand. */
.route-search-collapsed {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 6px 4px 4px;
}
.route-search.is-collapsed { padding: 12px 16px; }
.route-search.is-collapsed > .route-search-heading,
.route-search.is-collapsed > .route-search-tagline,
.route-search.is-collapsed > .route-search-form { display: none; }
.route-search.is-collapsed > .route-search-collapsed { display: flex; }
.route-search-collapsed-route {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
}
.route-search-collapsed-arrow { color: var(--gray-400); margin: 0 4px; }
.route-search-collapsed-dates {
  flex: 1;
  font-size: .92rem;
  color: var(--gray-700, #374151);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.route-search-collapsed-edit {
  background: var(--blue);
  color: white;
  border: 0;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.route-search-collapsed-edit:hover { filter: brightness(1.05); }
@media (max-width: 600px) {
  .route-search-collapsed { gap: 10px; }
  .route-search-collapsed-route { font-size: .92rem; }
  .route-search-collapsed-dates { font-size: .82rem; }
  .route-search-collapsed-edit { padding: 5px 12px; font-size: .8rem; }
}
.route-search-rest-book {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--primary, #1f6feb);
  text-decoration: none;
}
.route-search-rest-book:hover { text-decoration: underline; }
.route-search-wedge {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}
.route-search-wedge--savings   { background: #ecfdf5; border-color: #6ee7b7; }
.route-search-wedge--competitive { background: #eff6ff; border-color: #bfdbfe; }
.route-search-wedge-line { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.5; }
.route-search-wedge-cta {
  display: inline-block;
  padding: 8px 14px;
  font-size: .88rem;
  font-weight: 700;
  background: var(--blue-dark, #1d4ed8);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}
.route-search-wedge-cta:hover { background: #1e40af; }

/* "Verified alternative day" card shown on the 0-results empty state
   when we found that the route operates on different days than the
   user picked AND a fresh GF check found a real fare on those days.
   Best-case empty state — promotes a concrete recommendation over the
   generic "set an alert" prompt. */
.route-search-verified-card {
  background: #ecfdf5;            /* soft green — positive outcome */
  border: 1.5px solid #6ee7b7;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 12px 0 8px;
  text-align: center;
}
.route-search-verified-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #047857;
  background: #d1fae5;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0 10px;
}
.route-search-verified-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: #064e3b;
  margin: 0 0 6px;
  line-height: 1.35;
}
.route-search-verified-arrow { color: #6ee7b7; margin: 0 4px; font-weight: 400; }
.route-search-verified-price {
  display: inline-block;
  margin-left: 8px;
  color: #047857;
  font-variant-numeric: tabular-nums;
}
.route-search-verified-sub {
  font-size: .88rem;
  color: #047857;
  margin: 0 auto 14px;
  max-width: 480px;
  line-height: 1.45;
}
.route-search-verified-cta {
  display: inline-block;
  background: #047857;
  color: #fff !important;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .95rem;
}
.route-search-verified-cta:hover { background: #065f46; }
.route-search-verified-alt {
  display: block;
  margin-top: 12px;
  font-size: .84rem;
  color: #047857;
  text-decoration: underline;
}
.route-search-verified-alt:hover { color: #065f46; }
@media (max-width: 640px) {
  .route-search-verified-card { padding: 16px 14px; }
  .route-search-verified-headline { font-size: .98rem; }
}

/* Sticky bottom-of-viewport "Track this route" bar. Appears only once the
   inline alert form has scrolled above the viewport — clicking it scrolls
   back to the form (focused on the email field for guests). */
.alert-sticky-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: -80px;                          /* hidden by default */
  z-index: 90;
  background: var(--white, #fff);
  border-top: 1px solid var(--gray-200, #e5e7eb);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  cursor: pointer;
  transition: bottom .25s ease-out;
}
.alert-sticky-bar.is-visible { bottom: 0; }
.alert-sticky-bar-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.alert-sticky-bar-icon { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.alert-sticky-bar-text {
  flex: 1;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gray-800, #1f2937);
  min-width: 0;
}
.alert-sticky-bar-cta {
  appearance: none;
  border: 0;
  padding: 9px 18px;
  background: var(--blue-dark, #1d4ed8);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.alert-sticky-bar-cta:hover { background: #1e40af; }

@media (max-width: 640px) {
  .alert-sticky-bar-text { font-size: .82rem; }
  .alert-sticky-bar-cta  { padding: 9px 14px; font-size: .85rem; }
}

/* Inline "Track this route" alert form. Sits above the results, pre-filled
   from search context. Signed-in users see just a submit button; guests
   see an email field + submit. Submission goes directly to AlertsController
   (no detour through /alerts/new). "Customize window" link below covers
   power users who want to widen / narrow the alert. */
.search-alert-cta {
  margin: 14px 0 18px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px 18px;
}
.search-alert-cta-body {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.search-alert-cta-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.search-alert-cta-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.search-alert-cta-text strong {
  font-size: 1rem;
  color: var(--gray-900, #111827);
  font-weight: 700;
}
.search-alert-cta-meta {
  font-size: .85rem;
  color: var(--gray-600, #4b5563);
  font-variant-numeric: tabular-nums;
}
.search-alert-cta-action {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.search-alert-cta-email {
  padding: 9px 12px;
  font-size: .9rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  width: 220px;
  font-family: inherit;
}
.search-alert-cta-email:focus {
  outline: none;
  border-color: var(--blue, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.search-alert-cta-email-readonly {
  font-size: .85rem;
  color: var(--gray-700, #374151);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-alert-cta-submit {
  appearance: none;
  border: 0;
  padding: 10px 18px;
  background: var(--blue-dark, #1d4ed8);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.search-alert-cta-submit:hover { background: #1e40af; }
.search-alert-cta-customize {
  grid-column: 1 / -1;
  justify-self: end;
  font-size: .78rem;
  color: var(--gray-500, #6b7280);
  text-decoration: none;
  margin-top: -4px;
}
.search-alert-cta-customize:hover {
  color: var(--blue-dark, #1d4ed8);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .search-alert-cta {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .search-alert-cta-action {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .search-alert-cta-email {
    width: 100%;
  }
  .search-alert-cta-submit {
    width: 100%;
    padding: 12px 18px;
  }
  .search-alert-cta-customize {
    justify-self: center;
  }
}
.route-search-results--empty,
.route-search-results--error {
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: 10px;
  border: 1px solid var(--gray-200);
}
.route-search-results-empty-body { margin: 6px 0 12px; color: var(--gray-600); font-size: 0.95rem; }
.route-search-error-line { margin: 0; color: #b91c1c; font-size: 0.95rem; }

@media (max-width: 640px) {
  .route-search { padding: 16px 14px; }
  .search-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "airline action"
      "legs    legs";
    row-gap: 12px;
  }
  .search-card-airline { grid-area: airline; }
  .search-card-action  { grid-area: action; }
  .search-card-legs    { grid-area: legs; }
}

/* Round-trip price snapshot — populated by prefetch job */
.rtp-snapshot {
  margin-bottom: 32px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.rtp-snapshot h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.rtp-snapshot-sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-400);
}
.rtp-snapshot-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 24px;
}
.rtp-snapshot-stat {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
}
.rtp-snapshot-stat--cheap {
  background: var(--blue-light);
  border-color: #dbeafe;
}
.rtp-snapshot-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-600);
  margin-bottom: 6px;
}
.rtp-snapshot-stat--cheap .rtp-snapshot-label { color: var(--blue-dark); }
.rtp-snapshot-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1;
}
.rtp-snapshot-best-heading {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 12px;
}
.rtp-snapshot-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.rtp-snapshot-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rtp-snapshot-card--best {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}
.rtp-snapshot-card-airline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-800);
}
.rtp-snapshot-best-badge {
  margin-left: auto;
  background: var(--blue);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.rtp-snapshot-card-dates {
  font-size: 0.85rem;
  color: var(--gray-600);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.rtp-snapshot-card-arrow {
  color: var(--gray-400);
}
.rtp-snapshot-card-leg {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gray-600);
  flex-wrap: wrap;
}
.rtp-snapshot-card-leg--return {
  border-top: 1px dashed var(--gray-200);
  padding-top: 6px;
}
.rtp-snapshot-card-leg-date {
  font-weight: 600;
  color: var(--gray-800);
  min-width: 80px;
}
.rtp-snapshot-card-leg-times {
  font-variant-numeric: tabular-nums;
}
.rtp-snapshot-card-nights {
  color: var(--gray-400);
  font-size: 0.78rem;
  margin-left: auto;
}
.rtp-snapshot-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.rtp-snapshot-card-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-800);
}
.rtp-snapshot-card-book {
  background: var(--blue);
  color: var(--white) !important;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
}
.rtp-snapshot-meta {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--gray-400);
}

/* Create-alert CTA on route-pair pages */
.route-pair-alert-cta {
  margin: 24px 0;
  padding: 18px 22px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border: 1px solid #dbeafe;
  border-radius: var(--radius);
  text-align: center;
}
@media (max-width: 760px) {
  .route-pair-alert-cta { margin: 16px 0; padding: 14px 16px; }
  .route-pair-alert-cta-heading { font-size: 1rem; margin: 0 0 4px; }
  .route-pair-alert-cta-sub { font-size: .85rem; margin: 0 0 10px; }
  .route-pair-alert-cta-btn { padding: 10px 20px; font-size: .9rem; }
}
.route-pair-alert-cta-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 6px;
}
.route-pair-alert-cta-sub {
  font-size: 0.92rem;
  color: var(--gray-600);
  margin: 0 0 16px;
  line-height: 1.5;
}
.route-pair-alert-cta-btn {
  display: inline-block;
  background: var(--blue);
  color: var(--white) !important;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Inline variant: sits directly under the search form, horizontal layout
   (text left, button right). Becomes stacked + centered on narrow screens. */
.route-pair-alert-cta--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  margin: 12px 0 20px;
}
.route-pair-alert-cta--inline .route-pair-alert-cta-text { flex: 1; min-width: 0; }
.route-pair-alert-cta--inline .route-pair-alert-cta-heading { margin-bottom: 4px; font-size: 1.05rem; }
.route-pair-alert-cta--inline .route-pair-alert-cta-sub    { margin: 0; }
@media (max-width: 640px) {
  .route-pair-alert-cta--inline { flex-direction: column; align-items: stretch; text-align: center; }
  .route-pair-alert-cta--inline .route-pair-alert-cta-btn { width: 100%; }
}

/* Alert form + result pages */
.alert-page { max-width: 1100px; margin: 24px auto; padding: 0 24px; }
@media (max-width: 760px) { .alert-page { padding: 0 14px; } }
.alert-form-wrap { margin-top: 24px; }
.alert-form-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; color: var(--gray-800); }
.alert-form-sub { font-size: 0.95rem; color: var(--gray-600); margin: 0 0 24px; line-height: 1.5; }
.alert-form-errors { background: #fee2e2; color: #991b1b; padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; }
.alert-form-errors ul { margin: 6px 0 0; padding-left: 20px; }
.alert-form-limit { background: #fef3c7; color: #92400e; padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; line-height: 1.5; }
.alert-form-limit-link { color: #92400e; text-decoration: underline; font-weight: 600; }
.alert-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.alert-form-row[hidden] { display: none; }
.alert-form-row label, .alert-form-label { font-size: 0.85rem; font-weight: 600; color: var(--gray-800); }

/* Spacing for the shared rp-search-airports row when nested inside the
   alert form (the homepage form uses a 4-col grid which provides its
   own row gaps; here we stack vertically and need explicit margin). */
.alert-form .rp-search-airports { margin-bottom: 16px; }
.alert-form .rp-search-airport { flex: 1 1 220px; min-width: 0; }
.alert-form .rp-search-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500, #6b7280);
  margin-bottom: 4px;
}
.alert-form-row input { padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 0.95rem; font-family: inherit; }
.alert-form-row input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-light); }
.alert-form-cabin {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 36px 10px 12px;
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 14px center;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--gray-800);
  cursor: pointer;
}
.alert-form-cabin:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-light); }
.alert-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alert-form-grid[hidden] { display: none; }
.alert-form-trip-controls { margin-bottom: 18px; }
.alert-form-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.alert-form-chip { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--gray-200); border-radius: 999px; font-size: 0.85rem; cursor: pointer; user-select: none; background: var(--white); color: var(--gray-600); }
.alert-form-chip input { margin-right: 6px; }
.alert-form-chip:has(input:checked) { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); }
.alert-form-actions { display: flex; gap: 8px; margin-top: 20px; }
.alert-form-pair-count { font-size: 0.85rem; color: var(--gray-600); margin: 4px 0 0; line-height: 1.5; }
.alert-form-pair-count.is-over { background: #fef3c7; color: #92400e; padding: 12px 14px; border-radius: 8px; margin-top: 12px; }
.alert-form-pair-count.is-over strong { display: block; margin-bottom: 4px; color: #78350f; }
.alert-form-pair-count-upgrade {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--blue-dark, #1d4ed8);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}
.alert-form-pair-count-upgrade:hover { color: #1e40af; }
.alert-form-actions .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* In-calendar upgrade hint. Rendered as a single thin line BELOW any
   month grid whose dates poke beyond max-value (e.g. for free users on
   route_pair flex search, any month past day 120). Markup comes from a
   <template data-date-range-target="horizonHint"> inside the host form.
   No banner box — the day grid is the focus, this is a footer nudge. */
.dr-month-hint {
  margin: 6px 0 4px;
  padding: 0 2px;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--gray-600, #4b5563);
  text-align: center;
}
.dr-month-hint-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-weight: 600;
  color: var(--blue, #3b82f6);
  cursor: pointer;
}
.dr-month-hint-link:hover { color: var(--blue-dark, #1d4ed8); text-decoration: underline; }

/* Date range picker — collapsed by default; .dr--open shows the panel.
   .dr is a relative wrapper so the absolute-positioned panel can drop down. */
.dr {
  position: relative;
  display: inline-block;
  min-width: 280px;
  max-width: 100%;
}
.dr-display {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 40px 12px 42px; /* room for icons */
  font-size: 0.95rem;
  font-family: inherit;
  text-align: left;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  cursor: pointer;
  color: var(--gray-800);
  transition: border-color 0.12s, box-shadow 0.12s;
}
/* Calendar icon (left) — pure CSS, no SVG dependency */
.dr-display::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><line x1='3' y1='10' x2='21' y2='10'/><line x1='8' y1='3' x2='8' y2='7'/><line x1='16' y1='3' x2='16' y2='7'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><line x1='3' y1='10' x2='21' y2='10'/><line x1='8' y1='3' x2='8' y2='7'/><line x1='16' y1='3' x2='16' y2='7'/></svg>") center / contain no-repeat;
}
/* Chevron (right) */
.dr-display::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border-right: 2px solid var(--gray-500);
  border-bottom: 2px solid var(--gray-500);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.dr--open .dr-display::after { transform: rotate(-135deg); margin-top: -3px; }
.dr-display:hover { border-color: var(--blue); }
.dr--open .dr-display { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.dr-display--empty { color: var(--gray-500); }
.dr-display-placeholder { font-weight: 500; }
/* Prominent variant — bigger feel, used as the page's primary CTA on route pages */
.dr--prominent { display: block; width: 100%; }
.dr--prominent .dr-display {
  padding: 16px 44px 16px 46px;
  font-size: 1rem;
  font-weight: 500;
  border: 2px solid var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.10);
}
.dr--prominent .dr-display:hover {
  background: rgba(59, 130, 246, 0.04);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.dr--prominent.dr--open .dr-display {
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22);
}
.dr--prominent .dr-display::before { opacity: 0.85; color: var(--blue); }
.dr--prominent .dr-display::after { border-color: var(--blue); }
.dr--prominent .dr-display--empty {
  color: var(--blue);
  font-weight: 600;
}
.dr-display strong { color: var(--gray-800); font-weight: 700; }
.dr-display em { color: var(--gray-400); font-style: normal; }
.dr-display-dates { flex: 1; min-width: 0; }
.dr-display-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  background: var(--gray-50);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.dr-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,0.10));
  padding: 14px 16px;
}
.dr-panel[hidden] { display: none; }

/* Mobile fullscreen overlay — the cramped dropdown variant (~270px tall)
   forced the user to tap month arrows 3+ times and remember her start
   date while picking the end. Fullscreen gives the calendar the entire
   viewport, lets the day grid breathe, and adds a sticky Done button. */
.dr-mobile-header { display: none; }

@media (max-width: 640px) {
  .dr--open > .dr-panel,
  .dr--open .dr-panel {
    position: fixed;
    inset: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    height: 100dvh;       /* dynamic viewport — avoids the URL-bar resize jump */
    height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 14px calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dr-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    padding: 14px 0 12px;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    margin: 0 0 12px;
    z-index: 1;
  }
  .dr-mobile-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
  }
  .dr-mobile-close {
    appearance: none;
    border: 0;
    padding: 8px 18px;
    background: var(--blue-dark, #1d4ed8);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
  }
  .dr-mobile-close:hover { background: #1e40af; }

  /* Bigger, easier tap targets in the fullscreen view */
  .dr--open .dr-cell { font-size: 1rem; }
  .dr--open .dr-month-label { font-size: 1.05rem; }
  .dr--open .dr-nav-btn { padding: 8px 16px; font-size: 1.2rem; }

  /* Short context line injected just under the sticky header in flex
     mode — "Your travel window — we'll search every date combination
     inside it." Scrolls away with the calendar (NOT sticky) because
     it's one-time info. */
  .dr-mobile-explainer {
    margin: 0 0 10px;
    padding: 0 4px;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--gray-500, #6b7280);
    text-align: center;
  }

  /* Round-trip / one-way segmented pill control injected inside the
     mobile picker. Mirrors the same toggle in the trip-controls row
     above the form so the user doesn't have to close the picker to
     change trip type. State drives + mirrors the real trip_type radios. */
  .dr-mobile-trip-pills {
    display: flex;
    background: var(--gray-100, #f3f4f6);
    border-radius: 999px;
    padding: 4px;
    margin: 0 auto 14px;
    gap: 4px;
    width: max-content;
  }
  .dr-trip-pill {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 18px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--gray-600, #4b5563);
    border-radius: 999px;
    cursor: pointer;
  }
  .dr-trip-pill.is-active {
    background: var(--white, #fff);
    color: var(--gray-900, #111827);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* Vertical-scroll calendar — all months stacked, no arrow nav.
     Sticky month labels so the user always knows what month they're
     scrolling through. Hide the prev/next arrows since the scroll IS
     the navigation. */
  .dr--open .dr-cal-nav { display: none; }
  .dr--open .dr-month {
    /* Leave room above for the sticky .dr-mobile-header when
       scrollIntoView lands on a month. */
    scroll-margin-top: 56px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    margin-bottom: 12px;
  }
  .dr--open .dr-month:last-child { border-bottom: 0; }
  .dr--open .dr-month-label {
    position: sticky;
    top: 56px;  /* below .dr-mobile-header (~52px sticky) */
    background: var(--white, #fff);
    padding: 8px 0;
    z-index: 1;
    text-align: left;
    font-weight: 700;
  }

  /* Lock background scroll while picker is open */
  body.dr-body-locked { overflow: hidden; }
}
.dr-cal-nav { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 6px; }
.dr-nav-btn { background: var(--white); border: 1px solid var(--gray-200); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--gray-600); }
.dr-nav-btn:hover { background: var(--gray-50); border-color: var(--blue); color: var(--blue); }
.dr-calendar { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) {
  .dr-calendar { grid-template-columns: 1fr 1fr; }
  .dr-panel { min-width: 560px; }
}
.dr-month { }
.dr-month-label { font-size: 0.9rem; font-weight: 600; color: var(--gray-800); margin-bottom: 8px; text-align: center; }
.dr-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dr-weekday { font-size: 0.7rem; color: var(--gray-400); text-align: center; padding: 4px 0; font-weight: 600; }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dr-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; }
.dr-cell--blank { /* empty */ }
.dr-day { background: transparent; border: none; cursor: pointer; color: var(--gray-800); border-radius: 6px; font-family: inherit; padding: 0; transition: background-color 0.1s; }
.dr-day:hover { background: var(--blue-light); }
.dr-day--disabled { color: var(--gray-200); cursor: default; }
.dr-day--in-range { background: var(--blue-light); border-radius: 0; }
.dr-day--start, .dr-day--end { background: var(--blue); color: var(--white); font-weight: 700; }
.dr-day--start.dr-day--end { /* same-day click — single dot */ }
.dr-day--range-edge-left  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dr-day--range-edge-right { border-top-left-radius: 0;  border-bottom-left-radius: 0; }
.dr-day--start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dr-day--start:not(.dr-day--end) + .dr-cell { /* nothing — handled by neighbour */ }

/* Calendar cells with snapshot prices: heat-coded background + tiny price label.
   Priced cells override the default aspect-ratio so the price label fits
   without clipping. */
.dr-cell.dr-day--priced {
  aspect-ratio: 1.05;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 4px 5px;
  font-size: 0.78rem;
}
.dr-day--priced .dr-cell-num { text-align: left; font-weight: 600; color: var(--gray-800); line-height: 1; }
.dr-day--priced .dr-cell-price { font-size: 0.7rem; font-weight: 700; color: var(--gray-800); text-align: right; line-height: 1; }
.dr-day--priced.dr-day--start .dr-cell-num,
.dr-day--priced.dr-day--end   .dr-cell-num,
.dr-day--priced.dr-day--start .dr-cell-price,
.dr-day--priced.dr-day--end   .dr-cell-price { color: var(--white); }
.dr-day--priced.dr-day--in-range .dr-cell-num,
.dr-day--priced.dr-day--in-range .dr-cell-price { color: var(--gray-800); }
.dr-day--priced:hover { transform: scale(1.04); z-index: 1; box-shadow: var(--shadow-sm); }

.dr-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--gray-500);
  padding: 4px 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--gray-100);
}
.dr-legend[hidden] { display: none; }
.dr-legend-bar { display: inline-block; flex: 1; max-width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(to right, hsl(140,65%,88%), hsl(60,65%,88%), hsl(0,65%,88%)); }
.dr-legend-label { white-space: nowrap; }

@media (max-width: 480px) {
  .dr-day--priced .dr-cell-num { font-size: 0.7rem; }
  .dr-day--priced .dr-cell-price { font-size: 0.62rem; }
}

.alert-page-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; color: var(--gray-800); }
.alert-page-meta { font-size: 0.9rem; color: var(--gray-600); margin: 0 0 24px; }

/* "Also get this on Telegram" card. Two states: CTA (link) and linked
   (confirmation). Compact card with icon left, copy center, optional
   chevron right. Sits between meta and result blocks. */
.alert-telegram-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; margin: 0 0 20px;
  border: 1px solid var(--gray-200); border-radius: 10px;
  background: var(--white); color: var(--gray-700);
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.alert-telegram-cta:hover {
  border-color: #0ea5e9; /* sky-500 — Telegram-ish blue */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.alert-telegram-card--linked {
  background: #ecfdf5; border-color: #a7f3d0; color: #065f46;
}
.alert-telegram-icon {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700;
  background: #e0f2fe; color: #0369a1; border-radius: 8px;
}
.alert-telegram-card--linked .alert-telegram-icon { background: #a7f3d0; color: #065f46; }
.alert-telegram-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.alert-telegram-body strong { color: var(--gray-800); font-weight: 600; }
.alert-telegram-card--linked .alert-telegram-body strong { color: #065f46; }
.alert-telegram-sub { font-size: 0.82rem; color: var(--gray-500); }
.alert-telegram-card--linked .alert-telegram-sub { color: #047857; }
.alert-telegram-sub code {
  background: rgba(0, 0, 0, .05); padding: 0 4px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}
.alert-telegram-arrow { color: var(--gray-400); font-size: 1.1rem; flex: 0 0 auto; }
.alert-telegram-cta:hover .alert-telegram-arrow { color: #0ea5e9; }

/* ─── Post-creation overlay ─────────────────────────────────────────
   Shown by show.html.erb when ?just_created=1. Centered modal with
   two stacked CTAs (Telegram + new search). Dismissable; controller
   strips the URL flag so reloads don't re-show. */
.post-alert-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: post-alert-fade-in .18s ease-out;
}
@keyframes post-alert-fade-in { from { opacity: 0; } to { opacity: 1; } }
.post-alert-overlay-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.post-alert-overlay-card {
  position: relative; z-index: 1;
  max-width: 420px; width: 100%;
  background: var(--white);
  border-radius: 16px;
  padding: 28px 24px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  text-align: center;
  animation: post-alert-slide-in .22s ease-out;
}
@keyframes post-alert-slide-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.post-alert-overlay-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--gray-400);
  padding: 4px 8px; border-radius: 6px;
}
.post-alert-overlay-close:hover { background: var(--gray-100); color: var(--gray-700); }
.post-alert-overlay-icon {
  width: 48px; height: 48px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: #d1fae5; color: #065f46;
  border-radius: 50%; font-size: 1.5rem; font-weight: 700;
}
.post-alert-overlay-title {
  margin: 0 0 6px; font-size: 1.35rem; font-weight: 700; color: var(--gray-800);
}
.post-alert-overlay-subtitle {
  margin: 0 0 22px; font-size: 0.92rem; color: var(--gray-600); line-height: 1.5;
}
.post-alert-overlay-ctas {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px;
}
.post-alert-overlay-cta {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--gray-200); border-radius: 10px;
  background: var(--white); color: var(--gray-800);
  text-decoration: none;
  transition: border-color .12s, transform .08s, box-shadow .12s;
  text-align: left;
}
.post-alert-overlay-cta:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 6px rgba(59, 130, 246, .12);
}
.post-alert-overlay-cta:active { transform: translateY(1px); }
.post-alert-overlay-cta--telegram { border-color: #bae6fd; background: #f0f9ff; }
.post-alert-overlay-cta--telegram:hover { border-color: #0ea5e9; }
.post-alert-overlay-cta-icon {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-700);
  border-radius: 8px; font-size: 1rem;
}
.post-alert-overlay-cta--telegram .post-alert-overlay-cta-icon {
  background: #e0f2fe; color: #0369a1;
}
.post-alert-overlay-cta-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.post-alert-overlay-cta-body strong { font-size: 0.96rem; font-weight: 600; }
.post-alert-overlay-cta-sub { font-size: 0.82rem; color: var(--gray-500); }
.post-alert-overlay-cta-arrow { color: var(--gray-400); font-size: 1.1rem; flex: 0 0 auto; }
.post-alert-overlay-cta:hover .post-alert-overlay-cta-arrow { color: var(--blue); }
.post-alert-overlay-cta--telegram:hover .post-alert-overlay-cta-arrow { color: #0ea5e9; }
.post-alert-overlay-linked-note {
  padding: 12px 14px;
  background: #ecfdf5; color: #065f46;
  border-radius: 8px;
  font-size: 0.88rem;
  text-align: left;
  display: flex; gap: 8px; align-items: center;
}
.post-alert-overlay-footer {
  margin: 0; font-size: 0.78rem; color: var(--gray-500); line-height: 1.5;
}
body.post-alert-overlay-open { overflow: hidden; }

.alert-page-empty, .alert-page-expired { background: var(--gray-50); border: 1px dashed var(--gray-200); border-radius: var(--radius); padding: 32px 24px; text-align: center; color: var(--gray-600); margin-bottom: 24px; }
.alert-page-empty h2 { font-size: 1.1rem; margin: 0 0 8px; color: var(--gray-800); }
.alert-page-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.alert-page-stat { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px 20px; }
.alert-page-stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-600); margin-bottom: 6px; }
.alert-page-stat-value { font-size: 1.8rem; font-weight: 800; color: var(--gray-800); line-height: 1; }
.alert-page-stat-sub { font-size: 0.82rem; color: var(--gray-400); margin-top: 6px; }
.alert-page-results { display: flex; flex-direction: column; gap: 6px; }
.alert-result-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; font-size: 0.9rem; }
.alert-result-row--best { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.alert-result-airline { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.alert-result-dates { color: var(--gray-600); }
.alert-result-nights { color: var(--gray-400); font-size: 0.8rem; }
.alert-result-price { font-weight: 700; color: var(--gray-800); font-size: 1.05rem; }
.alert-result-book { background: var(--blue); color: var(--white) !important; padding: 6px 12px; border-radius: 6px; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.alert-page-footer { margin-top: 32px; text-align: center; }
.alert-unsubscribe-link { color: var(--gray-400); font-size: 0.82rem; }
@media (max-width: 480px) {
  .alert-form-grid { grid-template-columns: 1fr; }
  .alert-page-summary { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rtp-snapshot-stats { grid-template-columns: 1fr; }
  .rtp-snapshot-value { font-size: 1.3rem; }
}

/* ─────────────────────────────────────────────────────────── */

/* "More nonstops from {origin}" strip — internal-link block that
   surfaces other route_pair pages from the same origin. Server-rendered;
   horizontal scroll-snap on mobile, wrap-grid on desktop.
   Internal linking helps the route_pair cluster's PageRank and gives
   users an obvious next click. */
.route-pair-related { margin: 24px 0; overflow-x: clip; }
.route-pair-related-title {
  font-size: 1.1rem; font-weight: 600;
  margin: 0 0 12px;
}
.route-pair-related-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.route-pair-related-card {
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; min-width: 140px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color 100ms, box-shadow 100ms, transform 100ms;
}
.route-pair-related-card:hover {
  border-color: var(--blue, #3b82f6);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.12);
  transform: translateY(-1px);
}
.route-pair-related-pair {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.95rem; font-weight: 700; color: var(--gray-900);
}
.route-pair-related-arrow { color: var(--gray-400); font-weight: 500; }
.route-pair-related-city { font-size: 0.82rem; color: var(--gray-600); }
.route-pair-related-meta { font-size: 0.7rem; color: var(--gray-500); margin-top: 2px; }

@media (max-width: 640px) {
  /* On narrow viewports prefer horizontal scroll over wrapping —
     keeps the section compact; scroll-snap makes flicking through cards
     feel native. */
  .route-pair-related-strip {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    margin: 0 -12px; padding: 4px 12px 12px;
  }
  .route-pair-related-card { scroll-snap-align: start; }
}

.route-pair-explore h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.route-pair-explore-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 480px) {
  .route-pair-explore-links { grid-template-columns: 1fr; }
}

.route-pair-explore-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s;
}

.route-pair-explore-card:hover {
  border-color: var(--blue);
}

.route-pair-explore-iata {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--blue);
}

.route-pair-explore-text {
  font-size: 0.85rem;
  color: var(--gray-600);
}

@media (max-width: 600px) {
  .route-pair-iata { font-size: 1.8rem; }
  .route-pair-airports { gap: 16px; }
}

/* ─── Site Footer ───────────────────────────────────────────── */
.site-footer {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding: 32px 24px;
}

.footer-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.footer-links a {
  font-size: 0.85rem;
  color: var(--gray-600);
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--blue);
}

.footer-airports {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin-bottom: 16px;
}

.footer-airports a {
  font-size: 0.8rem;
  color: var(--gray-400);
  transition: color 0.15s;
}

.footer-airports a:hover {
  color: var(--blue);
}

.footer-disclaimer {
  font-size: 0.8rem;
  color: var(--gray-400);
  line-height: 1.6;
}

/* ─── Legal Pages (Privacy / Terms) ────────────────────────── */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
}

.legal-inner h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.legal-updated {
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-bottom: 40px;
}

.legal-inner h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 32px 0 8px;
}

.legal-inner p,
.legal-inner li {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.7;
}

.legal-inner ul {
  padding-left: 20px;
  margin: 8px 0;
}

.legal-inner a {
  color: var(--blue);
}

/* ─── Browse Page ───────────────────────────────────────────── */
.browse-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px;
}

.browse-header {
  margin-bottom: 32px;
}

.browse-search {
  max-width: 520px;
  margin-top: 20px;
}

.browse-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.browse-subtitle {
  color: var(--gray-500);
  font-size: 1rem;
}

.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.browse-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.browse-card:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.browse-card-iata {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.03em;
}

.browse-card-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browse-card-country {
  font-size: 0.78rem;
  color: var(--gray-500);
}

.browse-card-routes {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 4px;
}

/* ─── Watch Button ───────────────────────────────────────────── */
.watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: #fff;
  color: var(--gray-700);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.watch-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.watch-btn--active { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.watch-btn--active:hover { border-color: #b91c1c; color: #b91c1c; background: #fee2e2; }

/* ─── Route Watches Page ─────────────────────────────────────── */
.watches-list {
  max-width: 640px;
  margin: 0 auto;
}
.watch-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
}
.watch-airport { flex: 1; }
.watch-airport a { text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.watch-iata { font-size: 1rem; font-weight: 700; color: var(--blue); }
.watch-name { font-size: 0.875rem; color: var(--gray-600); }
.watch-meta { display: flex; align-items: center; gap: 8px; }
.watch-frequency { font-size: 0.78rem; color: var(--gray-500); white-space: nowrap; }
.watch-actions { flex-shrink: 0; }
.upgrade-nudge {
  margin-top: 24px;
  padding: 12px 16px;
  background: var(--blue-light);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--gray-700);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.upgrade-nudge a { color: var(--blue); font-weight: 600; }

/* ─── Watch Frequency Toggle ─────────────────────────────────── */
.watches-col-header {
  display: flex;
  align-items: center;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 2px;
}
.watches-col-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); }
.watches-col-label--airport { flex: 1; }
.watches-col-label--freq { width: 160px; }
.watches-col-label--actions { width: 64px; }

.freq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: #fff;
  color: var(--gray-600);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.freq-toggle-hint {
  font-size: 0.72rem;
  color: var(--gray-400);
  opacity: 0;
  transition: opacity 0.15s;
  margin-left: 2px;
}
.freq-toggle:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.freq-toggle:hover .freq-toggle-hint { opacity: 1; }
.freq-toggle--instant { border-color: #7c3aed; color: #7c3aed; background: #ede9fe; }
.freq-toggle--instant:hover { border-color: var(--gray-400); color: var(--gray-600); background: #fff; }

.watch-remove-btn {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--gray-400);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.watch-remove-btn:hover { border-color: #fca5a5; color: #b91c1c; background: #fee2e2; }

/* ─── Admin Watch Pills ──────────────────────────────────────── */
.watch-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 1px 2px 1px 0;
  background: var(--blue-light);
  color: #1d4ed8;
}
.watch-admin-pill--instant { background: #ede9fe; color: #6d28d9; }
.watch-admin-freq { font-weight: 400; opacity: 0.75; }

/* ─── Trip Search ───────────────────────────────────────────── */
.trip-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.trip-header {
  text-align: center;
  margin-bottom: 32px;
}

.trip-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 8px;
}

.trip-subtitle {
  font-size: 1rem;
  color: var(--gray-600);
}

.trip-form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trip-preset-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.trip-preset-chip {
  padding: 8px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  background: var(--white);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.trip-preset-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.trip-preset-chip--active {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: 600;
}

.trip-airports-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.trip-dates-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.trip-nights-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.trip-airport-field,
.trip-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.trip-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.trip-date-input,
.trip-number-input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--gray-800);
  background: var(--white);
  width: 100%;
}

.trip-date-input:focus,
.trip-number-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}

.trip-custom-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}

.trip-dow-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.trip-dow-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.trip-dow-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--gray-700);
  cursor: pointer;
}

.trip-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}

.trip-submit-btn:hover {
  background: var(--blue-dark);
}

/* Results page */
.trip-results-header {
  margin-bottom: 24px;
}

.trip-results-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 4px;
}

.trip-results-meta {
  font-size: 0.9rem;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.trip-back-link {
  font-size: 0.875rem;
  color: var(--blue);
  font-weight: 500;
}

.trip-back-link:hover { text-decoration: underline; }

.trip-fetch-banner {
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.875rem;
  color: #713f12;
  margin-bottom: 20px;
}

.trip-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--gray-500);
}

.trip-result-count {
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-bottom: 12px;
}

.trip-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}

.trip-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.trip-results-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.trip-results-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

.trip-results-table tr:last-child td { border-bottom: none; }

.trip-results-table tr:hover td { background: var(--gray-50); }

.trip-row-cheapest td:first-child {
  border-left: 3px solid #22c55e;
}

.trip-cell-price {
  font-weight: 700;
  color: var(--gray-800);
  white-space: nowrap;
}

.trip-cheapest-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #dcfce7;
  color: #166534;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

.trip-date-dow {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-right: 2px;
}

/* ─── Trip result cards ──────────────────────────────────────── */

.trip-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trip-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px 20px;
  gap: 12px;
  transition: box-shadow 0.15s;
}

.trip-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.trip-card--best {
  border-color: #86efac;
  background: #f0fdf4;
}

.trip-card-flights {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12px;
  min-width: 0;
}

.trip-card-leg {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.trip-card-leg--return {
  flex-direction: row-reverse;
  text-align: right;
}

.trip-card-logo-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trip-card-logo-wrap .airline-logo {
  border-radius: 6px;
  object-fit: contain;
}

.trip-card-logo-wrap .airline-code-fallback {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: 6px;
  padding: 4px 5px;
  line-height: 1;
}

.trip-card-leg-info {
  min-width: 0;
}

.trip-card-leg-date {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.trip-card-leg-times {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: 2px;
  white-space: nowrap;
}
.trip-card-times-missing {
  font-style: italic;
  color: var(--gray-400);
}

.trip-card-nights-divider {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  color: var(--gray-400);
}

.trip-card-nights-line {
  width: 28px;
  height: 1px;
  background: var(--gray-300);
}

.trip-card-nights-badge {
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}

.trip-card-price {
  flex-shrink: 0;
  text-align: right;
  min-width: 90px;
}

.trip-card-total {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray-900);
  white-space: nowrap;
}

.trip-card-breakdown {
  font-size: 0.72rem;
  color: var(--gray-400);
  margin-top: 2px;
  white-space: nowrap;
}

.trip-card-book-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  background: var(--blue);
  color: white;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.trip-card-book-btn:hover {
  background: var(--blue-dark);
  color: white;
}

/* ─── Trip filter panel ──────────────────────────────────────── */

.trip-filter-section {
  margin-top: 8px;
}

.trip-filter-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 20px 24px 16px;
  margin-bottom: 12px;
}

.trip-filter-slider-label {
  font-size: 0.82rem;
  color: var(--gray-600);
  margin-bottom: 10px;
}

.trip-filter-slider-label strong {
  color: var(--gray-900);
}

/* ─── Dual-range slider ──────────────────────────────────────── */

.drs {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
}

.drs-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
}

.drs-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
}

.drs-input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
  outline: none;
}

.drs-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--blue);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.drs-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--blue);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  box-sizing: border-box;
}

.drs-endpoints {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--gray-400);
  margin-top: 4px;
}

.trip-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 16px;
}

.trip-filter-group-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.trip-filter-airlines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trip-filter-airline-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--gray-700);
  cursor: pointer;
}

.trip-filter-airline-opt input[type="checkbox"] {
  accent-color: var(--blue);
}

.trip-filter-nights {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trip-nights-sep {
  color: var(--gray-400);
  font-weight: 500;
}

@media (max-width: 640px) {
  .trip-airports-row,
  .trip-dates-row,
  .trip-dow-section {
    grid-template-columns: 1fr;
  }

  .trip-nights-row {
    grid-template-columns: 1fr 1fr;
  }

  .trip-page {
    padding: 20px 16px 40px;
  }

  .trip-filter-sliders {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 20px;
  }

  .trip-filter-row {
    padding: 14px 16px;
    gap: 16px;
  }

  .trip-card {
    flex-wrap: wrap;
    padding: 14px 16px;
  }

  .trip-card-flights {
    flex-wrap: wrap;
    gap: 8px;
  }

  .trip-card-leg--return {
    flex-direction: row;
    text-align: left;
  }

  .trip-card-nights-divider {
    width: 100%;
    justify-content: center;
  }

  .trip-card-price {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--gray-100);
    padding-top: 10px;
    margin-top: 2px;
  }

  .trip-card-price .trip-card-book-btn {
    margin-top: 0;
  }
}

/* ─── Trip fetch progress banner ────────────────────────────── */
.trip-fetch-banner {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 20px 20px 16px;
  margin-bottom: 24px;
}

.trip-fetch-progress {
  width: 100%;
  height: 6px;
  background: #e0f2fe;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}

.trip-fetch-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
  animation: trip-fetch-progress 300s ease-out forwards;
}

@keyframes trip-fetch-progress {
  0%   { width: 0%; }
  10%  { width: 15%; }
  30%  { width: 40%; }
  60%  { width: 65%; }
  80%  { width: 78%; }
  100% { width: 88%; }
}

.trip-fetch-status {
  font-size: 0.9rem;
  color: #0c4a6e;
  margin-bottom: 6px;
}

.trip-fetch-status strong {
  font-weight: 700;
}

.trip-fetch-explainer {
  font-size: 0.82rem;
  color: #0369a1;
  margin: 4px 0 8px;
  line-height: 1.5;
  opacity: 0.85;
}

.trip-fetch-meta {
  font-size: 0.78rem;
  color: #0369a1;
  opacity: 0.8;
}

.trip-notify-section {
  margin: 12px 0 4px;
  padding-top: 12px;
  border-top: 1px solid #bae6fd;
}

.trip-notify-prompt {
  font-size: 0.85rem;
  color: #0c4a6e;
  margin: 0 0 8px;
}

.trip-notify-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.trip-notify-input {
  flex: 1;
  max-width: 280px;
  padding: 7px 10px;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  font-size: 0.85rem;
  background: #fff;
  outline: none;
}

.trip-notify-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

.trip-notify-btn {
  padding: 7px 14px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.trip-notify-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.trip-notify-success {
  font-size: 0.85rem;
  color: #15803d;
  font-weight: 500;
  margin: 8px 0 0;
}

.trip-notify-error {
  font-size: 0.85rem;
  color: #b91c1c;
  margin: 6px 0 0;
}

/* ─── Trip type toggle (Return / One way) ────────────────────── */

.trip-type-toggle {
  display: flex;
  gap: 0;
  background: var(--gray-100);
  border-radius: 8px;
  padding: 3px;
  width: fit-content;
  margin-bottom: 20px;
}

.trip-type-opt {
  cursor: pointer;
}

.trip-type-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.trip-type-opt span {
  display: block;
  padding: 6px 18px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-500);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.trip-type-opt input[type="radio"]:checked + span {
  background: white;
  color: var(--gray-900);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Single slider panel (one-way) takes full width */
.trip-filter-sliders--single {
  grid-template-columns: 1fr;
  max-width: 420px;
}

/* ─────────────────────────────────────────────────────────────────────
   Find Deals (Pro) — multi-destination price-cap search
   ───────────────────────────────────────────────────────────────────── */
.deals-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 80px;
}

.deals-hero { margin-bottom: 28px; }
.deals-hero-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--gray-900, #111827);
  margin: 0 0 8px;
}
.deals-hero-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-600, #4b5563);
  margin: 0;
}

.deals-form {
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 14px;
  padding: 24px;
}
.deals-form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.deals-form-row { margin-bottom: 18px; }
.deals-form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-700, #374151);
  margin-bottom: 6px;
}
.deals-form-hint {
  font-weight: 500;
  color: var(--gray-400, #9ca3af);
  margin-left: 6px;
}
.deals-form-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1.5px solid var(--gray-300, #d1d5db);
  border-radius: 9px;
  background: var(--white, #fff);
  color: var(--gray-900, #111827);
}
.deals-form-input:focus {
  outline: none;
  border-color: var(--blue, #2563eb);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.deals-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.deals-form-grid .deals-form-row { margin-bottom: 0; }
@media (max-width: 560px) {
  .deals-form-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Destination chips */
.deals-dest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.deals-dest-chips:empty { margin-bottom: 0; }
.deals-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--blue, #2563eb);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
}
.deals-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.deals-chip-remove:hover { background: rgba(255, 255, 255, .45); }

.deals-price-input { position: relative; }
.deals-price-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-500, #6b7280);
  font-weight: 600;
  pointer-events: none;
}
.deals-form-input--price { padding-left: 24px; }

.deals-form-actions { margin-top: 8px; }
.deals-form-submit {
  width: 100%;
  padding: 13px 20px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: var(--blue, #2563eb);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .12s ease;
}
.deals-form-submit:hover { filter: brightness(1.06); }
.deals-form-submit:active { transform: translateY(1px); }

/* Results page */
.deals-results-header { margin-bottom: 20px; }
.deals-results-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gray-900, #111827);
  margin: 0 0 4px;
}
.deals-results-iata { color: var(--blue, #2563eb); }
.deals-results-meta {
  font-size: 0.9rem;
  color: var(--gray-600, #4b5563);
  margin: 0 0 6px;
}
.deals-results-cta-link { margin: 0; font-size: 0.9rem; }
.deals-link { color: var(--blue-dark, #1d4ed8); font-weight: 600; text-decoration: none; }
.deals-link:hover { text-decoration: underline; }

.deals-progress-block { margin-bottom: 22px; }
.deals-progress-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
  margin: 0 0 8px;
}
.deals-progress-bar {
  height: 8px;
  background: var(--gray-200, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}
.deals-progress-bar-fill {
  height: 100%;
  background: var(--blue, #2563eb);
  border-radius: 999px;
  transition: width .4s ease;
}

.deals-dest-block { margin-bottom: 26px; }
.deals-dest-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-800, #1f2937);
  margin: 0 0 10px;
}
.deals-dest-iata { color: var(--blue, #2563eb); font-weight: 800; }
.deals-dest-route { display: inline-flex; align-items: baseline; gap: 7px; }
.deals-dest-origin { color: var(--gray-700, #374151); font-weight: 800; }
.deals-dest-arrow { color: var(--gray-400, #9ca3af); font-weight: 400; }
.deals-dest-city {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--gray-600, #4b5563);
}
.deals-dest-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-400, #9ca3af);
  margin-left: auto;
}
.deals-list { list-style: none; margin: 0; padding: 0; }
.deals-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 8px;
}
.deals-card-route { flex: 1; min-width: 0; }
.deals-card-dates {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-600, #4b5563);
}
.deals-card-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gray-900, #111827);
  text-align: right;
}
.deals-card-rt {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray-400, #9ca3af);
}
.deals-card-book-link {
  display: inline-block;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: var(--blue, #2563eb);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.deals-card-book-link:hover { filter: brightness(1.06); }

.deals-empty-dests {
  font-size: 0.88rem;
  color: var(--gray-500, #6b7280);
  margin: 16px 0;
}

.deals-track-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 18px 22px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
}
.deals-track-cta-text { flex: 1; min-width: 220px; }
.deals-track-cta-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900, #111827);
  margin: 0 0 3px;
}
.deals-track-cta-sub {
  font-size: 0.88rem;
  color: var(--gray-600, #4b5563);
  margin: 0;
}
.deals-track-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.deals-track-email {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1.5px solid var(--gray-300, #d1d5db);
  border-radius: 9px;
}
.deals-track-submit {
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: var(--blue, #2563eb);
  border: none;
  border-radius: 9px;
  cursor: pointer;
}
.deals-track-submit:hover { filter: brightness(1.06); }

/* Find Deals — saved-alert show page */
.deals-flash-ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  border-radius: 9px;
  padding: 12px 16px;
  font-size: 0.92rem;
  margin-bottom: 18px;
}
.deals-status-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--gray-200, #e5e7eb);
  color: var(--gray-600, #4b5563);
}
.deals-status-pill--active { background: #ecfdf5; color: #047857; }
.deals-status-pill--paused { background: #fffbeb; color: #b45309; }
.deals-alert-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
  font-size: 0.9rem;
}
.deals-footer-sep { color: var(--gray-300, #d1d5db); }
.deals-footer-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--blue-dark, #1d4ed8);
  cursor: pointer;
}
.deals-footer-btn:hover { text-decoration: underline; }
.deals-footer-btn--danger { color: #b91c1c; }

/* Find Deals — Pro upsell card (shared/_deals_upsell) */
.deals-upsell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 24px 0;
  padding: 20px 22px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
}
.deals-upsell--compact { margin: 16px 0; padding: 14px 18px; }
.deals-upsell-body { flex: 1; min-width: 240px; }
.deals-upsell-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0 0 4px;
}
.deals-upsell--compact .deals-upsell-heading { font-size: 0.98rem; }
.deals-upsell-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1e40af;
  margin: 0;
}
.deals-upsell-cta {
  flex-shrink: 0;
  display: inline-block;
  padding: 11px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--blue, #2563eb);
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
}
.deals-upsell-cta:hover { filter: brightness(1.07); }

/* Homepage hero — Find Deals pill */
.hero-deals-pill-row { margin: 14px 0 0; }
.hero-deals-pill {
  display: inline-block;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e3a8a;
  background: rgba(255, 255, 255, .85);
  border: 1.5px solid #bfdbfe;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.hero-deals-pill:hover {
  background: #fff;
  border-color: var(--blue, #2563eb);
}

/* /upgrade — benefit-card inline link + matrix dash */
.pricing-benefit-link {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--blue-dark, #1d4ed8);
  text-decoration: none;
}
.pricing-benefit-link:hover { text-decoration: underline; }
.pricing-matrix-dash { color: var(--gray-300, #d1d5db); font-weight: 700; }

/* Find Deals — navbar locked tab */
.navbar-link--locked { opacity: 0.85; }
.navbar-lock { font-size: 0.85em; margin-right: 1px; }

/* Find Deals form — reuses the homepage .rp-search-* field components;
   these rules just handle the multi-row layout + spacing the homepage
   form (a single grid row) doesn't need. */
.deals-form .rp-search-airports { margin-bottom: 14px; }
.deals-form .rp-search-airport-input {
  /* date/number/select inputs sit in the same floating-label box as
     the airport inputs — keep the label clear of native UI chrome. */
  min-height: 52px;
}
.deals-form select.rp-search-airport-input { appearance: none; cursor: pointer; }
.deals-dest-hint {
  font-size: 0.82rem;
  color: var(--gray-500, #6b7280);
  margin: 2px 0 16px;
}
.deals-form .deals-dest-chips { margin-bottom: 4px; }
.deals-form .deals-form-actions { margin-top: 8px; }

/* Find Deals — destinations field (chips above the add-input so the
   selected state stays visible, esp. on mobile where the picker
   overlay closes over the input). */
.deals-dest-field {
  border: 1.5px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--gray-50, #f9fafb);
}
.deals-dest-fieldhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.deals-dest-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-600, #4b5563);
}
.deals-dest-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue, #2563eb);
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 999px;
  padding: 2px 9px;
}
.deals-dest-chips:empty { display: none; }
.deals-dest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.deals-dest-empty {
  font-size: 0.85rem;
  color: var(--gray-500, #6b7280);
  margin: 0 0 10px;
}
/* Bigger chips on touch screens — easier to read + remove. */
@media (max-width: 640px) {
  .deals-chip { font-size: 0.9rem; padding: 7px 8px 7px 14px; }
  .deals-chip-remove { width: 22px; height: 22px; }
}

/* Find Deals — "added so far" strip inside the mobile picker overlay
   (airport-search overlay covers the page; this keeps selections
   visible while you add more). */
.as-selected-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
}
.as-selected-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e40af;
}
.as-selected-chip {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--blue, #2563eb);
  border-radius: 999px;
  padding: 3px 10px;
}
.as-selected-empty {
  font-size: 0.82rem;
  color: var(--gray-500, #6b7280);
}

/* Find Deals — results filter bar + unified cheapest-first list */
.deals-filterbar { margin: 0 0 18px; }
.deals-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.deals-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-700, #374151);
  background: var(--white, #fff);
  border: 1.5px solid var(--gray-300, #d1d5db);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.deals-filter-pill:hover { border-color: var(--gray-400, #9ca3af); }
.deals-filter-pill.is-active {
  color: #fff;
  background: var(--blue, #2563eb);
  border-color: var(--blue, #2563eb);
}
.deals-filter-pill-meta {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.85;
}
.deals-filter-pill.is-active .deals-filter-pill-meta { opacity: 0.95; }

.deals-filter-airlines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.deals-filter-airlines-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500, #6b7280);
  margin-right: 2px;
}
.deals-airline-pill {
  padding: 5px 11px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-600, #4b5563);
  background: var(--gray-50, #f9fafb);
  border: 1.5px solid var(--gray-200, #e5e7eb);
  border-radius: 999px;
  cursor: pointer;
}
.deals-airline-pill.is-active {
  color: #fff;
  background: var(--gray-700, #374151);
  border-color: var(--gray-700, #374151);
}

.deals-result-list { display: flex; flex-direction: column; gap: 16px; }
.deals-result-item { display: flex; flex-direction: column; }
.deals-result-destline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 5px 2px;
}
.deals-result-route { font-size: 0.95rem; font-weight: 700; color: var(--gray-800, #1f2937); }
.deals-result-route strong { color: var(--blue, #2563eb); }
.deals-result-arrow { color: var(--gray-400, #9ca3af); font-weight: 400; }
.deals-result-city { font-size: 0.85rem; color: var(--gray-500, #6b7280); }
.deals-no-match {
  font-size: 0.92rem;
  color: var(--gray-500, #6b7280);
  text-align: center;
  padding: 20px 0;
}