/*
 * 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-title-iata {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--blue-dark, #1d4ed8);
  background: rgba(59, 130, 246, 0.12);
  border-radius: 6px;
  vertical-align: middle;
}

/* Card grid for the dedicated /airports/:iata/deals page. Reuses the
   canonical .deal-card markup. */
.airport-deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.airport-deals-grid > .deal-card { width: 100%; }

/* "Find more deals from XYZ" Pro upsell at the foot of the page. */
.airport-deals-more {
  margin: 32px 0 16px;
}
.airport-deals-more-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  text-decoration: none;
  color: var(--gray-900, #111827);
  transition: transform .15s ease, box-shadow .15s ease;
}
.airport-deals-more-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.15);
}
.airport-deals-more-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.airport-deals-more-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.airport-deals-more-sub  {
  font-size: .82rem;
  color: var(--gray-600, #4b5563);
  font-weight: 500;
}
.airport-deals-more-arrow {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue-dark, #1d4ed8);
  transition: transform .2s ease;
}
.airport-deals-more-cta:hover .airport-deals-more-arrow { transform: translateX(3px); }

.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; }

/* ─── Airport Info tab ─────────────────────────────────────── */
/* Lives inside .tab-panel#tab-info; holds secondary metadata moved out
   of the header status column (website / wikipedia / flightradar /
   routes-data freshness / ICAO). Simple definition-list pairs. */
.airport-info-panel {
  padding: 20px 16px;
  max-width: 560px;
}
.airport-info-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.airport-info-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}
.airport-info-row:last-child { border-bottom: 0; }
.airport-info-label {
  font-size: .85rem;
  color: var(--gray-600);
  margin: 0;
  font-weight: 500;
}
.airport-info-value {
  font-size: .95rem;
  color: var(--gray-900);
  margin: 0;
}
.airport-info-link {
  color: var(--blue);
  text-decoration: none;
}
.airport-info-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .airport-info-row {
    grid-template-columns: 110px 1fr;
    gap: 8px;
  }
}

/* ─── 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;
}
/* Date suffix on the results heading. Duplicates the collapsed search bar
   above, so hide on mobile to keep the first card above the fold. */
.route-search-results-heading-dates { display: inline; }
@media (max-width: 760px) {
  .route-search-results-heading-dates { display: none; }
}
.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;
    /* Override the desktop sticky-sidebar's max-height cap. Without this
       the sheet's height is clamped to (100vh - 90px); `translateY(100%)`
       then only shifts by the clamped height, so the sheet's top header
       (~60px) pokes into the bottom of the viewport when "closed." */
    max-height: none;
    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 while the flex search
   streams results in (5–90s). Real cards swap in atomically on each
   adv_search_poll tick once results land. Mirrors the live card's
   3-column layout so the user has visual continuity. */
.search-card--skeleton { pointer-events: none; }
.search-card--skeleton .search-card-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.search-card--skeleton .search-card-col--airline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.search-card--skeleton .search-card-col--action {
  align-items: flex-end;
}
.skel-bar--airline-name { width: 70px; height: 12px; }
.skel-bar--leg          { width: 100%; height: 26px; }
.skel-bar--price        { width: 64px; height: 22px; }
.skel-bar--button       { width: 78px; height: 30px; border-radius: 8px; }

.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; }
}

/* Always-visible sticky bottom CTA on /airports/X/to/Y/search results.
   Replaces both the old inline alert form AND the alert-sticky-bar that
   the (now-deleted) alert_sticky_cta_controller used to build. Audit
   2026-05-25 confirmed every real signup came via /alerts/new — this
   sends users straight there. */
.alert-cta-sticky {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--blue-dark, #1d4ed8);
  color: #fff;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.alert-cta-sticky:hover, .alert-cta-sticky:focus-visible {
  background: #1e3a8a;
  color: #fff;
}
.alert-cta-sticky-icon { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.alert-cta-sticky-text { flex: 0 1 auto; }
.alert-cta-sticky-arrow {
  margin-left: 4px;
  font-weight: 700;
  transition: transform .2s ease;
}
.alert-cta-sticky:hover .alert-cta-sticky-arrow { transform: translateX(3px); }

/* Pad the results page so the last card isn't hidden behind the sticky CTA. */
.route-search-results-page { padding-bottom: 80px; }
@media (max-width: 600px) {
  .alert-cta-sticky { font-size: .9rem; padding: 13px 14px calc(13px + env(safe-area-inset-bottom)); }
  .route-search-results-page { padding-bottom: 72px; }
}

.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;
}