/*
 * Homepage styles: search form, results, booking and comparison.
 *
 * Loaded on index.html after styles.css and the stylesheets the homepage shares
 * with other pages (home-discovery, results-cards, marketing-ux, trip-shortlist),
 * and before site-nav.css. Sections keep their original cascade order, because
 * later sections deliberately refine earlier ones: add new rules to the section
 * they belong to rather than appending overrides at the end.
 *
 * Colors use the palette tokens in styles.css (:root) wherever a token exists.
 */
/* ==========================================================================
   Results list and result cards: base layout, comparison modal, seat confidence
   (formerly results-ux.css)
   ========================================================================== */

.results {
  grid-template-columns: 1fr;
  gap: 10px;
}
.results article {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}
.results article.featured {
  border-width: 2px;
  box-shadow: 0 12px 28px #2f6fed0e;
}
.results article:hover {
  transform: translateY(-1px);
}
.compact-flight-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: stretch;
}
.compact-flight-main {
  min-width: 0;
  padding: 14px 16px;
}
.compact-flight-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.compact-flight-heading h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}
.compact-flight-heading .result-label {
  flex: 0 0 auto;
}
.compact-flight-main .carrier-row {
  margin: 9px 0 0;
}
.compact-flight-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.compact-flight-facts > span {
  padding: 5px 8px;
  border-radius: 7px;
  color: var(--muted);
  background: #f7f7f5;
  font-size: 14px;
  font-weight: 700;
}
.compact-flight-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border-left: 1px solid var(--line);
  background: #fcfcfb;
  text-align: center;
}
.compact-flight-actions .result-price {
  color: var(--navy);
  font-size: 24px;
  letter-spacing: -0.04em;
}
.result-label {
  margin: 0;
  padding: 4px 8px;
  font-size: 14px;
}
.carrier {
  padding: 3px 7px 3px 3px;
  border: 1px solid #e9e7e1;
  border-radius: 9px;
  background: #fff;
}
.carrier-mark {
  width: 27px;
  height: 27px;
  border-radius: 7px;
}
.carrier strong {
  font-size: 14px;
}
.carrier small {
  font-size: 14px;
}
.cabin-details {
  margin-top: 7px;
}
.cabin-details summary {
  width: fit-content;
  padding: 3px 0;
  font-size: 14px;
}
.check-booking {
  min-width: 0;
  min-height: 44px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
}
.result-tools {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fffffff2;
}
.coverage-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 8px 0 6px;
  padding: 9px 11px;
  border: 1px solid #d9e4f7;
  border-radius: 10px;
  color: var(--navy);
  background: #f5f8ff;
  font-size: 14px;
  line-height: 1.4;
}
.coverage-summary span {
  color: var(--muted);
  font-size: 14px;
}
.coverage-no-improvement {
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid var(--teal);
  border-radius: 0 8px 8px 0;
  color: var(--navy);
  background: var(--success-pale);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.date-options-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 6px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--navy);
  background: #fbfbfa;
}
.date-options-strip > strong {
  font-size: 14px;
}
.date-options-strip > small {
  color: var(--muted);
  font-size: 14px;
}
.date-options-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.date-option-chip {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 84px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--navy);
  background: white;
  font: inherit;
  cursor: pointer;
}
.date-option-chip:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--pale);
}
.date-option-chip:disabled {
  border-color: var(--blue);
  background: var(--pale);
  cursor: default;
  opacity: 1;
}
.date-option-chip.cheapest {
  border-color: var(--teal);
}
.date-option-date {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.date-option-price {
  font-size: 14px;
}
.date-option-tag {
  color: var(--success-ink);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.result-heading {
  padding-top: 20px;
}
.result-heading strong {
  font-size: 15px;
}
.empty-state {
  padding: 30px 18px;
  text-align: center;
}
.zero-result-relaxations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.zero-result-relaxations button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--blue);
  border-radius: 9px;
  color: var(--blue);
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.zero-result-relaxations button:hover {
  background: #eff6ff;
}
.zero-result-relaxations button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.search-retry {
  margin-top: 12px;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--blue);
  border-radius: 9px;
  color: #fff;
  background: var(--blue);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.airport-scope-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.airport-scope-header strong {
  font-size: 14px;
}
.airport-scope-header small,
.airport-scope-help,
.airport-scope-note {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.airport-scope-help {
  display: block;
  margin-bottom: 7px;
}
.airport-scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.airport-scope-chip {
  display: flex !important;
  align-items: center;
  gap: 5px;
  width: auto !important;
  min-height: 44px;
  padding: 5px 7px !important;
  border: 1px solid #dfe4ee;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.airport-scope-chip input {
  width: 13px !important;
  height: 13px;
  margin: 0;
  accent-color: var(--blue);
}
.airport-scope-chip strong {
  font-size: 14px;
}
.airport-scope-chip span {
  max-width: 115px;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.airport-scope-chip small {
  padding: 2px 4px;
  border-radius: 4px;
  color: #7a5200;
  background: #fff2cf;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}
.airport-scope-chip.excluded {
  opacity: 0.48;
  background: #f5f5f3;
  text-decoration: line-through;
}
.airport-scope-note {
  display: block;
  margin-top: 7px;
}
@media (max-width: 760px) {
  .compact-flight-card {
    grid-template-columns: 1fr !important;
  }
  .compact-flight-main {
    padding: 13px 14px 10px;
  }
  .compact-flight-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .compact-flight-heading h3 {
    font-size: 16px;
  }
  .compact-flight-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 14px 14px;
    border-top: 1px solid var(--line);
    border-left: 0;
    text-align: left;
  }
  .compact-flight-actions .result-price {
    font-size: 22px;
  }
  .compact-flight-actions .check-booking {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
  }
  .result-tools {
    align-items: stretch;
    flex-direction: column;
  }
  .result-tools label {
    justify-content: space-between;
  }
  .result-tools select {
    flex: 1;
  }
  .result-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .result-filters::-webkit-scrollbar {
    display: none;
  }
  .result-filters button {
    flex: 0 0 auto;
  }
  .airport-scope-chip span {
    max-width: 90px;
  }
}
@media (max-width: 480px) {
  .compact-flight-facts {
    gap: 5px;
  }
  .compact-flight-facts > span {
    font-size: 14px;
  }
  .airport-scope-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .airport-scope-chip span {
    display: none;
  }
}

.seat-confidence {
  margin-top: 4px;
  color: #65728a;
}

/* ===================================================
   Enhanced Search Skeleton Loading UI
   =================================================== */
.search-skeleton-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  min-height: 190px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.search-skeleton-card:nth-child(2) {
  animation-delay: 0.15s;
}
.search-skeleton-card:nth-child(3) {
  animation-delay: 0.3s;
}

.skeleton-main {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.skeleton-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-left: 1px solid var(--line);
  background: #fafaf9;
}
.skeleton-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.skeleton-airline-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.skeleton-schedule-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.skeleton-metrics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.skeleton-bone {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line-light) 25%, var(--line) 50%, var(--line-light) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s infinite ease-in-out;
}
@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-pill-sm {
  width: 85px;
  height: 16px;
  border-radius: 9999px;
}
.skeleton-title-bar {
  width: 220px;
  height: 18px;
}
.skeleton-logo-circle {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
}
.skeleton-airline-name {
  width: 140px;
  height: 14px;
}
.skeleton-time-bar {
  width: 260px;
  height: 22px;
  max-width: 100%;
}
.skeleton-metric-pill {
  width: 70px;
  height: 22px;
  border-radius: 6px;
}
.skeleton-price-block {
  width: 80px;
  height: 28px;
}
.skeleton-btn-block {
  width: 130px;
  height: 40px;
  border-radius: 10px;
}

[data-theme="dark"] .search-skeleton-card {
  background: var(--ink);
  border-color: #334155;
}
[data-theme="dark"] .skeleton-actions {
  background: #0b1120;
  border-color: #334155;
}
[data-theme="dark"] .skeleton-bone {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-bone {
    animation: none;
    opacity: 0.65;
  }
}

/* ===================================================
   Flight Itinerary Timeline & Layover Experience
   =================================================== */
.itinerary-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafaf9;
}
[data-theme="dark"] .itinerary-timeline {
  background: #111827;
  border-color: #1f2937;
}

.timeline-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.timeline-group-header strong {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue, #3b82f6);
}

.timeline-segment {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
}
[data-theme="dark"] .timeline-segment {
  background: #1e293b;
  border-color: #334155;
}

.timeline-layover-connector {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 4px 18px;
  padding: 8px 12px;
  border-left: 2px dashed #94a3b8;
  border-radius: 0 8px 8px 0;
  background: var(--canvas);
  font-size: 14px;
}
[data-theme="dark"] .timeline-layover-connector {
  background: var(--ink);
  border-left-color: var(--muted);
}
.timeline-layover-connector.tight-layover {
  background: var(--amber-pale);
  border-left-color: #f59e0b;
  color: #92400e;
}
.timeline-layover-connector.long-layover {
  background: #f0fdf4;
  border-left-color: #10b981;
  color: #065f46;
}
.timeline-layover-connector.airport-change {
  background: var(--danger-pale);
  border-left-color: #ef4444;
  color: #991b1b;
}

/* ===================================================
   Floating Comparison Bar
   =================================================== */
.floating-compare-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-radius: 9999px;
  background: var(--navy, #0f172a);
  color: white;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.35),
    0 8px 10px -6px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  font-weight: 600;
  animation: slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 92vw;
}
@keyframes slide-up {
  from {
    transform: translate(-50%, 40px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
.floating-compare-bar[hidden] {
  display: none !important;
}
.floating-compare-btn {
  padding: 8px 16px;
  border: 0;
  border-radius: 9999px;
  background: var(--blue, #3b82f6);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.floating-compare-btn:hover {
  background: var(--blue-hover, #2563eb);
}
.floating-compare-clear {
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--line-strong);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}
.floating-compare-clear:hover {
  color: white;
}

/* ===================================================
   Unified Sticky Side-by-Side Comparison Modal (Task 6)
   =================================================== */
.flight-comparison-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 920px);
  max-height: 88vh;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper, #ffffff);
  color: var(--ink);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  overflow-y: auto;
  z-index: 1000;
}
.flight-comparison-modal::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}
.comparison-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.comparison-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.comparison-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.comparison-modal-close:hover {
  background: var(--line-light);
}
.comparison-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.compare-modal-column {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
  transition: border-color 0.15s ease;
}
.compare-modal-column:hover {
  border-color: var(--line-strong);
}
.compare-modal-col-header h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}
.compare-modal-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue, #2563eb);
  margin-bottom: 6px;
}
.compare-modal-delta {
  margin-bottom: 14px;
}
.badge-lowest-fare {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9999px;
  background: var(--success-pale);
  color: var(--success-ink);
  font-size: 14px;
  font-weight: 700;
}
.badge-price-delta {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9999px;
  background: #fef3c7;
  color: var(--amber);
  font-size: 14px;
  font-weight: 700;
}
.compare-modal-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  flex-grow: 1;
}
.compare-modal-specs dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.compare-modal-specs dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.btn-modal-select-flight {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--blue, #2563eb);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
}
.btn-modal-select-flight:hover {
  background: #1d4ed8;
}
.comparison-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.btn-clear-modal-compare {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: white;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-clear-modal-compare:hover {
  background: var(--canvas);
  color: var(--ink);
}
.btn-close-modal-footer {
  padding: 8px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.btn-close-modal-footer:hover {
  background: #1e293b;
}

/* ===================================================
   Interactive Facet Filters Bar
   =================================================== */
.facet-filters-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfbfa;
}
[data-theme="dark"] .facet-filters-bar {
  background: #111827;
  border-color: #1f2937;
}
.facet-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.facet-filter-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.facet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy, #0f172a);
  cursor: pointer;
  transition: all 0.15s ease;
}
.facet-chip:hover {
  border-color: var(--blue, #3b82f6);
  background: var(--canvas);
}
.facet-chip.active {
  border-color: var(--blue, #3b82f6);
  background: #eff6ff;
  color: var(--blue, #3b82f6);
}
.facet-chip-count {
  font-size: 14px;
  opacity: 0.7;
}
.facet-reset-btn {
  padding: 3px 8px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted, #64748b);
  cursor: pointer;
  text-decoration: underline;
}
.facet-reset-btn:hover {
  color: var(--navy, #0f172a);
}

/* ===================================================
   Route Map Discovery Teaser
   =================================================== */
.route-map-teaser {
  margin: 6px 0 12px;
}
.route-map-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  color: #166534;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.15s ease;
}
.route-map-link:hover {
  background: #dcfce7;
  border-color: #86efac;
}
.route-map-badge {
  background: #15803d;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.route-map-icon {
  font-size: 15px;
}
.route-map-text strong {
  color: #14532d;
}

/* ===================================================
   Recent Searches History Bar
   =================================================== */
.recent-searches-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
  font-size: 14px;
}
.recent-searches-label {
  font-weight: 600;
  color: var(--muted, #64748b);
  white-space: nowrap;
}
.recent-searches-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.recent-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy, #0f172a);
  cursor: pointer;
  transition: all 0.15s ease;
}
.recent-search-chip:hover {
  background: #eff6ff;
  border-color: var(--blue, #3b82f6);
  color: var(--blue, #3b82f6);
}
.recent-searches-clear {
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--muted, #64748b);
  cursor: pointer;
  padding: 2px 6px;
  text-decoration: underline;
}
.recent-searches-clear:hover {
  color: #ef4444;
}

/* ===================================================
   Share Search Deep Link Action
   =================================================== */
.result-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-share-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy, #0f172a);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
}
.btn-share-search:hover {
  border-color: var(--blue, #3b82f6);
  color: var(--blue, #3b82f6);
  background: var(--canvas);
}
.btn-share-search.copied {
  border-color: #22c55e;
  background: #f0fdf4;
  color: #15803d;
}

/* ===================================================
   In-line Seat Map Inspector & Modal
   =================================================== */
.btn-inspect-seat-map {
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--line-light);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy, #0f172a);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  width: fit-content;
}
.btn-inspect-seat-map:hover {
  background: var(--line);
  border-color: #94a3b8;
  color: #0284c7;
}

dialog.seat-inspector-modal:not([open]) {
  display: none;
}
dialog.seat-inspector-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  max-width: 640px;
  width: 92vw;
  max-height: 88vh;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 1000;
}
dialog.seat-inspector-modal::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}
.seat-inspector-shell {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  height: 100%;
  max-height: 88vh;
  overflow: hidden;
}
.seat-inspector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
.seat-inspector-title-group h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy, #0f172a);
}
.seat-inspector-title-group p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted, #64748b);
}
.seat-inspector-close-btn {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--muted, #64748b);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.seat-inspector-close-btn:hover {
  background: var(--line);
  color: var(--navy, #0f172a);
}
.seat-inspector-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Specs Grid */
.cabin-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.spec-box {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafaf9;
  text-align: center;
}
.spec-box small {
  display: block;
  font-size: 14px;
  color: var(--muted, #64748b);
  margin-bottom: 2px;
}
.spec-box strong {
  display: block;
  font-size: 14px;
  color: var(--navy, #0f172a);
}

/* Equipment Swap Risk Stability Banner */
.swap-risk-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.swap-risk-banner.low {
  background: var(--success-pale);
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.swap-risk-banner.medium {
  background: var(--amber-pale);
  border: 1px solid #fde68a;
  color: #92400e;
}
.swap-risk-banner.high {
  background: var(--danger-pale);
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* 2D Visual Seat Grid */
.visual-seat-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.visual-seat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy, #0f172a);
}
.visual-seat-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  align-items: center;
}
.seat-grid-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.row-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted, #64748b);
  width: 22px;
  text-align: right;
}
.seat-cell {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy, #0f172a);
  cursor: default;
  transition: transform 0.1s ease;
}
.seat-cell:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.seat-cell.aisle-space {
  width: 14px;
  height: 32px;
  border: 0;
  background: transparent;
}
.seat-cell.throne,
.seat-cell.suite {
  background: #fdf4ff;
  border-color: #d8b4fe;
  color: #7e22ce;
}
.seat-cell.lie-flat {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.seat-cell.extra-legroom {
  background: var(--success-pale);
  border-color: #a7f3d0;
  color: var(--teal-hover);
}
.seat-cell.middle {
  background: var(--danger-pale);
  border-color: #fecaca;
  color: #b91c1c;
}
.seat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--muted, #64748b);
  margin-top: 4px;
  justify-content: center;
}
.seat-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.seat-legend-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
}
.seat-inspector-disclaimer {
  font-size: 14px;
  color: var(--muted, #64748b);
  line-height: 1.4;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* ==========================================================================
   Search depth and decision helpers
   (formerly ux-next-10.css)
   ========================================================================== */
.breadth-options,
.preference-shortcuts {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.breadth-options button,
.preference-shortcuts button {
  border: 1px solid rgba(20, 40, 55, 0.16);
  background: #fff;
  border-radius: 999px;
  padding: 8px 11px;
  cursor: pointer;
  font: inherit;
}
.breadth-options button.active,
.preference-shortcuts button.active {
  background: #132f3a;
  color: #fff;
  border-color: #132f3a;
}
.preference-shortcuts {
  padding: 14px 0 4px;
}
.best-choice-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  margin: -2px -2px 12px;
  border-radius: 12px 12px 6px 6px;
  background: #edf6f1;
}
.best-choice-label span {
  font-size: 14px;
  color: #53666d;
}
.cabin-clarity {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 9px 11px;
  border-radius: 10px;
  background: #f7f8f8;
  font-size: 14px;
}
.cabin-clarity span {
  color: #66757c;
}
.compare-choice {
  gap: 6px;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  cursor: pointer;
}
.compare-drawer {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #102d38;
  color: #fff;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22);
}
.compare-drawer[hidden] {
  display: none;
}
.compare-drawer span {
  font-size: 14px;
  opacity: 0.75;
}
.compare-drawer button {
  border: 0;
  border-radius: 9px;
  padding: 8px 11px;
  font-weight: 700;
  cursor: pointer;
}
.compare-drawer button:disabled {
  opacity: 0.45;
}
.compare-drawer button:not(:disabled) {
  background: #fff;
  color: #102d38;
}
@media (max-width: 720px) {
  .best-choice-label {
    align-items: flex-start;
    flex-direction: column;
  }
  .compare-drawer {
    width: calc(100% - 28px);
    box-sizing: border-box;
    gap: 10px;
  }
  .compare-drawer button {
    margin-left: auto;
  }
}

/* ==========================================================================
   Travel preferences panel and side-by-side option comparison
   (formerly preferences-friendly.css)
   ========================================================================== */

.friendly-preferences {
  padding: 16px 0 4px;
}
.friendly-pref-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.friendly-pref-head strong,
.friendly-pref-head small {
  display: block;
}
.friendly-pref-head small {
  margin-top: 3px;
  color: #6c7a80;
}
.pref-reset {
  border: 0;
  background: transparent;
  text-decoration: underline;
  color: #6c7a80;
  cursor: pointer;
}
.friendly-pref-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.friendly-pref-grid section {
  padding: 13px;
  border: 1px solid rgba(20, 40, 55, 0.1);
  border-radius: 14px;
  background: #fafbfb;
}
.friendly-pref-grid h4 {
  margin: 0 0 9px;
  font-size: 14px;
}
.friendly-pref-grid button {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(20, 40, 55, 0.11);
  background: #fff;
  border-radius: 11px;
  padding: 10px 11px;
  margin-top: 7px;
  font: inherit;
  cursor: pointer;
}
.friendly-pref-grid button > small {
  display: block;
  margin-top: 2px;
  color: #728087;
  font-size: 14px;
}
.friendly-pref-grid button.active {
  border-color: #183b47;
  background: #eef5f3;
  box-shadow: inset 3px 0 0 #183b47;
}
.friendly-pref-grid button.active > small {
  color: #53676e;
}
.friendly-time {
  display: flex;
  gap: 10px;
  padding: 12px 0;
}
.friendly-time label {
  font-size: 14px;
}
.friendly-time input {
  display: block;
  margin-top: 5px;
}
.friendly-pref-summary {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f4f7f7;
  font-size: 14px;
}
.advanced-pref-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 40, 55, 0.08);
  opacity: 0.72;
}
.advanced-pref-controls:before {
  content: "Advanced controls";
  display: block;
  grid-column: 1/-1;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7b878c;
  margin-bottom: 4px;
}
@media (max-width: 700px) {
  .friendly-pref-grid {
    grid-template-columns: 1fr;
  }
  .friendly-pref-head {
    align-items: flex-start;
  }
  .friendly-time {
    flex-direction: column;
  }
}

/* ==========================================================================
   Fare comparison notes
   (formerly fare-comparison.css)
   ========================================================================== */
.fare-badge {
  display: inline-flex;
  width: max-content;
  margin: 5px 0 7px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 750;
  background: #eef1f2;
}
.seller-option {
  position: relative;
}
.seller-option:hover {
  box-shadow: 0 8px 24px rgba(18, 45, 56, 0.08);
}

/* ==========================================================================
   Trip type switch
   (formerly trip-options.css)
   ========================================================================== */

.trip-option-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.trip-type {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #f0f3f3;
}
.trip-type button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 13px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  color: #64747a;
}
.trip-type button.active {
  background: #fff;
  color: #153641;
  font-weight: 700;
  box-shadow: 0 1px 5px rgba(20, 45, 55, 0.1);
}
@media (max-width: 600px) {
  .trip-option-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .trip-type {
    width: max-content;
  }
}

/* ==========================================================================
   Search workspace: search depth, multi-city builder
   (formerly search-workspace.css)
   ========================================================================== */

.search-workspace {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #d9e0ea;
  border-radius: 15px;
  background: linear-gradient(180deg, #fbfcff, #f7f9fc);
}
.search-depth-head,
.permission-head,
.multi-city-head,
.progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.search-depth-head strong,
.search-depth-head small,
.multi-city-head strong,
.multi-city-head small {
  display: block;
}
.search-depth-head small,
.multi-city-head small,
.permission-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
}
.search-depth {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.search-depth button {
  position: relative;
  min-height: 68px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--navy);
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.search-depth button b,
.search-depth button small {
  display: block;
}
.search-depth button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
}
.search-depth button em {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--success-ink);
  background: var(--success-pale);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}
.search-depth button.active {
  border-color: var(--blue);
  background: var(--pale);
  box-shadow: 0 0 0 2px #2f6fed16;
}
.search-depth button.active:after {
  content: "✓";
  position: absolute;
  right: 10px;
  bottom: 9px;
  color: var(--blue);
  font-weight: 900;
}
.search-envelope-summary {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--muted);
  background: #fff;
  font-size: 14px;
  line-height: 1.45;
}
.search-envelope-summary strong {
  color: var(--navy);
}
.multi-city-builder {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #cbd8eb;
  border-radius: 13px;
  background: #f8faff;
}
.multi-city-head button {
  padding: 7px 10px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.multi-city-head button:disabled {
  opacity: 0.45;
}
.primary-leg-note span,
.leg-number {
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.journey-leg {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) 150px 44px;
  gap: 8px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #dce4f0;
}
.journey-leg input {
  min-height: 44px;
}
.remove-leg {
  width: 44px;
  height: 44px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: #e9edf3;
  font-size: 20px;
  cursor: pointer;
}
.strategy-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  background: #f7f9fc;
}
.strategy-label strong {
  font-size: 14px;
}
.strategy-label span {
  color: var(--muted);
  font-size: 14px;
  text-align: right;
}
.best-choice > .strategy-label,
.featured > .strategy-label {
  background: #eef3ff;
}
.itinerary-compare {
  position: sticky;
  top: 10px;
  z-index: 12;
  box-shadow: 0 18px 45px #1322381a;
}
.compare-choice,
#compare-drawer {
  display: none !important;
}
@keyframes workspace-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 760px) {
  .search-depth-head,
  .permission-head,
  .multi-city-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .search-depth {
    grid-template-columns: 1fr;
  }
  .search-depth button {
    min-height: 58px;
  }
  .journey-leg {
    grid-template-columns: 42px 1fr 34px;
  }
  .journey-leg label {
    grid-column: 2;
  }
  .journey-leg .leg-number {
    grid-column: 1;
    grid-row: 1/4;
    align-self: start;
  }
  .journey-leg .remove-leg {
    grid-column: 3;
    grid-row: 1;
  }
  .strategy-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .strategy-label span {
    text-align: left;
  }
}
/* Multi-city flight rows: same city/airport search and calendar as the main route fields */
.journey-leg {
  align-items: start;
}
.journey-leg .leg-number {
  align-self: start;
  margin-top: 36px;
}
.journey-leg .remove-leg {
  margin-top: 22px;
  margin-bottom: 0;
}
.journey-leg .location-suggestions {
  top: 72px;
}
.journey-leg .coverage-preview {
  min-height: 0;
  padding: 8px 10px;
  margin-top: 6px;
  text-transform: none;
  letter-spacing: normal;
}
.journey-leg .coverage-preview:empty {
  display: none;
}
.journey-leg .coverage-preview > strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 6px;
}
.journey-leg .airport-choices {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.journey-leg .airport-choices .airport-choice {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 36px;
  width: auto;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid #cbd6de;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.journey-leg .airport-choice:has(input:checked) {
  background: #e5f1ed;
  border-color: #639281;
  color: #173e32;
}
.journey-leg .airport-choice:focus-within {
  outline: 2px solid #3279b4;
  outline-offset: 2px;
}
.journey-leg .airport-choice input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: #28584a;
}
.journey-leg .airport-choice span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 700;
}
.journey-leg .airport-choice span small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}
.journey-leg .airport-details {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
}
.journey-leg .leg-date {
  cursor: pointer;
}
@media (max-width: 760px) {
  .journey-leg .leg-number {
    margin-top: 17px;
  }
  .journey-leg .remove-leg {
    margin-top: 0;
  }
}

/* ==========================================================================
   Hero, search panel and focus polish
   (formerly ux-polish-v3.css)
   ========================================================================== */

:root {
  --focus-ring: #2f6fed;
  --soft-ink: #304563;
}

/* Put the product in the first viewport without losing the editorial introduction. */

.hero-copy {
  max-width: 900px;
}

h1 {
  font-size: clamp(48px, 6vw, 76px);
  line-height: 0.98;
}

.lede {
  max-width: 760px;
  margin-top: 18px;
  font-size: clamp(17px, 1.65vw, 20px);
  line-height: 1.48;
}

.search-panel {
  border-radius: 22px;
  box-shadow: 0 22px 56px #13223812;
}

#search-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px #2f6fed25;
}

/* One clear reason per result. Supporting evidence stays inside the card. */
#results article {
  border-color: #d7dce4;
}

#results article.featured,
#results article.best-choice {
  border-color: #8fb0e8;
  background: linear-gradient(180deg, #f8faff 0, #fff 132px);
  box-shadow: 0 14px 34px #2f6fed12;
}

#results article > .best-choice-label {
  padding: 11px 160px 11px 15px;
  border-bottom: 1px solid #dfe6f1;
  background: #eef3ff;
}

#results article > .best-choice-label strong,
#results article > .best-choice-label span {
  display: block;
}

#results article > .best-choice-label strong {
  color: var(--navy);
  font-size: 14px;
}

#results article > .best-choice-label span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}

#results article .result-label {
  display: inline-block;
  margin-bottom: 8px;
}

#results article .compare-toggle,
#results article .itinerary-compare-toggle {
  width: auto;
  min-width: 88px;
}

#results article > div:not([class]) {
  padding: 16px 17px 13px;
}

#results article h3 {
  margin: 0 0 7px;
  font-size: 18px;
}

#results article .carrier-row {
  margin: 9px 0;
}

#results article .result-metrics {
  gap: 6px;
  margin-top: 10px;
}

#results article .result-metrics span {
  padding: 8px 9px;
  border: 1px solid #eceef1;
  background: #fafaf8;
}

#results article > .cabin-clarity {
  margin: 0 17px 12px;
  padding: 9px 11px;
  border: 1px solid #eadfbd;
  border-radius: 9px;
  color: #604b1d;
  background: #fffaf0;
}

#results article > .cabin-clarity strong,
#results article > .cabin-clarity span {
  display: block;
}

#results article > .cabin-clarity strong {
  font-size: 14px;
}

#results article > .cabin-clarity span {
  margin-top: 2px;
  font-size: 14px;
}

#results article .result-actions {
  margin-top: 0;
  padding: 12px 16px 15px;
  border-top: 1px solid #e6e9ee;
  background: #fcfcfb;
}

#results article .result-price {
  color: var(--navy);
  font-size: 25px;
  letter-spacing: -0.045em;
}

#results article .check-booking {
  min-height: 44px;
  padding-inline: 16px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus-ring) 28%, transparent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 28px, 1180px);
  }

  .nav {
    height: 70px;
  }

  h1 {
    font-size: clamp(42px, 13vw, 60px);
  }

  .lede {
    font-size: 16px;
  }

  .search-panel {
    border-radius: 18px;
  }

  #results article > .best-choice-label {
    padding: 10px 14px;
  }

  #results article > div:not([class]) {
    padding: 14px;
  }

  #results article .result-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr);
    gap: 8px 10px;
    padding: 12px 14px 14px;
  }

  #results article .result-price {
    grid-column: 1;
    grid-row: 1;
  }

  #results article .compare-toggle,
  #results article .itinerary-compare-toggle {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  #results article .check-booking {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
  }

  #results article > .cabin-clarity {
    margin: 0 14px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Result transparency: card header, dates, schedules, seat-map dialog
   (formerly result-transparency-v4.css)
   ========================================================================== */
.result-card,
article.result-card,
#results article {
  position: relative;
  border-radius: 20px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.05),
    0 2px 4px -2px rgba(15, 23, 42, 0.05) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease !important;
}
#results article:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong) !important;
  box-shadow:
    0 12px 24px -4px rgba(15, 23, 42, 0.08),
    0 4px 8px -4px rgba(15, 23, 42, 0.03) !important;
}
.seat-confidence {
  display: inline-flex;
  align-items: center;
  margin: 6px 6px 0 0;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.seat-confidence.confirmed {
  background: var(--success-pale);
  color: var(--teal-hover);
  border: 1px solid #a7f3d0;
}
.seat-confidence.confirmed:before {
  content: "✓";
  margin-right: 4px;
}
.seat-confidence.likely {
  background: var(--amber-pale);
  color: #b45309;
  border: 1px solid #fde68a;
}
.seat-confidence.likely:before {
  content: "~";
  margin-right: 4px;
}
.seat-confidence.unknown {
  background: var(--line-light);
  color: var(--muted-light);
  border: 1px solid var(--line);
}
.seat-confidence.unknown:before {
  content: "?";
  margin-right: 4px;
}
.result-price {
  letter-spacing: -0.03em;
}
.result-actions button,
.result-actions a {
  border-radius: 12px !important;
}
.result-tools {
  align-items: flex-start !important;
}
.result-filters {
  gap: 8px !important;
}
.result-filters button {
  border-radius: 999px !important;
  padding: 8px 14px !important;
}
.result-filters button.active {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
@media (max-width: 700px) {
  #results article:hover {
    transform: none;
  }
}
.segment-times {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
}
.segment-endpoint {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: var(--ink);
}
.segment-endpoint time {
  font-weight: 700;
  color: var(--ink);
}
.segment-times-arrow {
  color: #94a3b8;
  font-size: 14px;
}
.day-offset-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--amber-pale);
  color: #b45309;
  border: 1px solid #fde68a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.day-offset-badge:before {
  content: "▲ ";
}
.sr-only {
  padding: 0;
  margin: -1px;
  border: 0;
}
#search-freshness {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#search-freshness time {
  font-weight: 700;
}
@media (max-width: 700px) {
  .segment-times {
    gap: 6px;
  }
  .segment-endpoint {
    font-size: 14px;
  }
}
.itinerary-date-summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}
.direction-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.direction-date-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-light);
  min-width: 54px;
}
.ladder-row-dates {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.comparison-grid-dates {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.freshness-note {
  display: block;
  margin-top: 10px;
  color: var(--muted-light);
  font-size: 14px;
}
.freshness-note time {
  font-weight: 700;
}
@media (max-width: 700px) {
  .direction-date-row {
    gap: 6px;
  }
  .direction-date-label {
    min-width: 44px;
    font-size: 14px;
  }
}
.card-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.card-header-meta {
  flex: 1;
  min-width: 0;
}
.card-header-price {
  text-align: right;
  flex-shrink: 0;
}
.result-price-top {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.card-header-savings {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-hover);
  background: var(--success-pale);
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 3px 9px;
  margin-top: 4px;
  text-align: right;
  white-space: nowrap;
}
.card-face-schedule {
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.card-face-schedule .segment-endpoint time {
  font-weight: 700;
  color: var(--ink);
}
.card-face-schedule .direction-date-label {
  font-weight: 800;
}
.direction-schedule-meta {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-light);
}
@media (max-width: 700px) {
  .result-price-top {
    font-size: 24px;
  }
  .card-face-schedule {
    padding: 10px 12px;
  }
}
.btn-view-seat-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-view-seat-map:hover {
  background: var(--line-light);
  border-color: #94a3b8;
  transform: translateY(-1px);
  color: var(--ink);
}
.btn-view-route-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-view-route-map:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
  transform: translateY(-1px);
  color: #0369a1;
}
dialog.seat-map-dialog {
  padding: 0;
  border: none;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
  max-width: 1040px;
  width: 94vw;
  max-height: 90vh;
  background: #fff;
  overflow: hidden;
  margin: auto;
}
dialog.seat-map-dialog::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.seat-map-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.seat-map-dialog-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.seat-map-dialog-header-title strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.seat-map-dialog-header-title a {
  font-size: 14px;
  font-weight: 600;
  color: #0284c7;
  text-decoration: none;
  padding: 5px 12px;
  background: #e0f2fe;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.seat-map-dialog-header-title a:hover {
  background: #bae6fd;
}
.seat-map-dialog-close {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: var(--muted-light);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.seat-map-dialog-close:hover {
  background: var(--line);
  color: var(--ink);
}
.seat-map-dialog-body {
  padding: 26px;
  overflow-y: auto;
  max-height: calc(90vh - 76px);
}

/* Airline Intelligence Dossier Modal */
dialog.airline-intel-dialog {
  padding: 0;
  border: none;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
  max-width: 900px;
  width: 94vw;
  max-height: 90vh;
  background: #fff;
  overflow: hidden;
  margin: auto;
}
dialog.airline-intel-dialog::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.airline-intel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.airline-intel-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.airline-intel-close-btn {
  background: none;
  border: none;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--muted-light);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 10px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.airline-intel-close-btn:hover {
  background: var(--line);
  color: var(--ink);
}
.airline-intel-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 76px);
}
.intel-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  margin-top: 16px;
}
.intel-modal-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.intel-modal-card h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.intel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--canvas);
  font-size: 14px;
}
.intel-row:last-child {
  border-bottom: none;
}
.intel-row-label {
  color: var(--muted-light);
  font-weight: 500;
}
.intel-row-val {
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.partner-tag-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--line-light);
  border: 1px solid var(--line-strong);
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin: 2px;
}
.intel-modal-dir-link {
  font-size: 14px;
  font-weight: 600;
  color: #0284c7;
  text-decoration: none;
  padding: 6px 12px;
  background: #e0f2fe;
  border-radius: 8px;
  transition: background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.intel-modal-dir-link:hover {
  background: #bae6fd;
}

/* ==========================================================================
   Comparison ladder
   (formerly comparison-ladder.css)
   ========================================================================== */

.results-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comparison-ladder-panel[hidden] {
  display: none;
}
.comparison-ladder-panel {
  border: 1px solid #cbd8e9;
  border-radius: 14px;
  background: #f9fbfe;
  box-shadow: 0 10px 28px rgba(19, 45, 85, 0.08);
}
.comparison-ladder-panel details {
  padding: 12px 14px;
}
.comparison-ladder-panel summary {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}
.comparison-ladder-panel summary::-webkit-details-marker {
  display: none;
}
.comparison-ladder-panel summary span {
  color: #112c50;
  font-size: 14px;
  font-weight: 800;
}
.comparison-ladder-panel summary small {
  color: #60718a;
  font-size: 14px;
}
.ladder-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.ladder-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid #dde5ef;
  border-radius: 10px;
  background: white;
  text-align: left;
  font-family: inherit;
  min-height: 44px;
}
button.ladder-row {
  cursor: pointer;
}
button.ladder-row:hover,
button.ladder-row:focus-visible {
  border-color: #2f69d9;
  background: #eaf1ff;
}
button.ladder-row.unavailable {
  opacity: 0.7;
}
.ladder-row strong {
  color: #112c50;
  font-size: 14px;
}
.ladder-row-price {
  color: #0e4cb6;
  font-size: 14px;
  font-weight: 800;
}
.ladder-row-delta {
  color: #1c7a4c;
  font-weight: 700;
}
.ladder-row-unavailable {
  color: #8a94a3;
  font-weight: 700;
}
.ladder-row-reason {
  color: #0e4cb6;
  font-size: 14px;
  font-weight: 700;
}
.ladder-row-action {
  color: #2f69d9;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}
.ladder-row-rate-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 14px;
  font-weight: 800;
  width: fit-content;
  margin: 2px 0;
}
.ladder-row-metric {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.coach-badge-metric strong {
  color: var(--amber) !important;
}
.ladder-row-meta {
  color: #60718a;
  font-size: 14px;
}
button.ladder-row:disabled {
  cursor: default;
  opacity: 0.6;
}
@media (min-width: 900px) {
  .results-layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .comparison-ladder-panel {
    flex: 0 0 260px;
    position: sticky;
    top: 16px;
  }
  .results-layout > #results {
    flex: 1;
    min-width: 0;
  }
}
.ladder-more {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ladder-more > summary {
  cursor: pointer;
  padding: 8px 4px;
  color: #4b5b73;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}
.ladder-more > summary::-webkit-details-marker {
  display: none;
}
.ladder-more > summary::after {
  content: " +";
  color: #2f69d9;
}
.ladder-more[open] > summary::after {
  content: " −";
}

/* ==========================================================================
   Quick search options and switches
   (formerly search-controls.css)
   ========================================================================== */

.quick-search-options {
  display: grid;
  border-top: 1px solid #dce4e8;
}
.quick-search-options .quick-choice:last-of-type,
.quick-options-hint {
  grid-column: 1/-1;
}
.quick-choice {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #243d49;
}
.quick-choice[hidden],
.quick-choice select[hidden] {
  display: none !important;
}
.quick-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quick-segments button {
  min-height: 44px;
  flex: 1 1 auto;
  padding: 10px 14px;
  border: 1px solid #c8d5db;
  border-radius: 10px;
  background: #fff;
  color: #304650;
  font: inherit;
  cursor: pointer;
}
.quick-segments button[aria-pressed="true"] {
  background: #e5f1ed;
  border-color: #28584a;
  color: #173e32;
  box-shadow: inset 0 0 0 1px #28584a;
}
.quick-segments button:focus-visible,
.quick-switch input:focus-visible {
  outline: 3px solid #3279b4;
  outline-offset: 3px;
}
.quick-segments button:disabled {
  opacity: 0.5;
  cursor: default;
}
.quick-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #243d49;
}
.quick-switch input {
  appearance: none !important;
  width: 44px !important;
  min-width: 44px;
  height: 26px !important;
  padding: 0 !important;
  border: 1px solid #80929a !important;
  border-radius: 20px !important;
  background: #dce4e8 !important;
  position: relative;
  cursor: pointer;
}
.quick-switch input:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0003;
}
.quick-switch input:checked {
  background: #28584a !important;
  border-color: #28584a !important;
}
.quick-switch input:checked:before {
  left: 21px;
}
@media (max-width: 600px) {
  .quick-search-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .quick-segments button {
    padding: 10px;
  }
  .quick-switch {
    justify-content: space-between;
    flex-direction: row-reverse;
  }
}
@media (forced-colors: active) {
  .quick-switch input {
    appearance: auto !important;
  }
  .quick-switch input:before {
    display: none;
  }
  .quick-segments button[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }
}

/* Compact route choices keep every optional airport visible without tall lists. */
.route-fields .coverage-preview {
  margin-top: 8px;
  text-transform: none;
  letter-spacing: normal;
}
.route-fields .coverage-preview > strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.route-fields .airport-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.route-fields .airport-choices .airport-choice {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 44px;
  width: auto;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #cbd6de;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.route-fields .airport-choice:has(input:checked) {
  background: #e5f1ed;
  border-color: #639281;
  color: #173e32;
}
.route-fields .airport-choice:focus-within {
  outline: 2px solid #3279b4;
  outline-offset: 2px;
}
.route-fields .airport-choice input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: #28584a;
}
.route-fields .airport-choice span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 700;
}
.route-fields .airport-choice span small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}
.route-fields .airport-details {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
}
.route-fields .airport-details summary {
  cursor: pointer;
  min-height: 28px;
  line-height: 28px;
  color: #526773;
}
.route-fields .airport-details small {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  margin: 6px 0;
  text-transform: none;
  letter-spacing: normal;
}
.quick-search-options {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px 16px;
  padding: 12px 0;
  margin-top: 10px;
}
.quick-search-options .quick-choice:last-of-type {
  grid-column: auto;
}
@media (max-width: 760px) {
  .quick-search-options {
    grid-template-columns: minmax(0, 1fr);
  }
  .quick-search-options .quick-choice:last-of-type {
    grid-column: 1;
  }
  .route-fields .coverage-preview {
    padding: 8px;
  }
  .route-fields .airport-choices .airport-choice {
    padding: 6px 8px;
  }
}

/* ==========================================================================
   Travel date picker (date-picker.js)
   (formerly date-picker.css)
   ========================================================================== */

/* Wayzuno travel date picker: one Dates field and its calendar (date-picker.js). */

.dp-replaced {
  display: none !important;
}

.trip-fields.has-dp {
  position: relative;
}

/* Dates field --------------------------------------------------------------- */
.dp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.dp-field[hidden] {
  display: none;
}
.dp-field-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dp-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dp-trigger:hover {
  border-color: var(--line-strong);
  background: #fff;
}
.dp-trigger:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.dp-trigger[aria-expanded="true"] {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.14);
}
.dp-trigger-icon {
  display: flex;
  color: var(--blue);
  flex: 0 0 auto;
}
.dp-trigger-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dp-trigger-text strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-trigger-text small {
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
}
.dp-trigger-text small:empty {
  display: none;
}

/* Calendar ------------------------------------------------------------------ */
.dp-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  /* Below the sticky site nav (1000) so the calendar slides under it on scroll. */
  z-index: 990;
  width: min(720px, calc(100vw - 32px));
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 24px 48px -16px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  animation: dpIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.dp-pop[hidden] {
  display: none;
}
@keyframes dpIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dp-pop {
    animation: none;
  }
}

.dp-pop button {
  font: inherit;
  color: inherit;
}
.dp-pop button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.dp-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dp-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dp-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.dp-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 132px;
  min-height: 48px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.dp-tab[hidden],
.dp-tab-sep[hidden] {
  display: none;
}
.dp-tab small {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dp-tab strong {
  font-size: 15px;
  font-weight: 600;
}
.dp-tab[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--pale);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.dp-tab[aria-pressed="true"] small {
  color: var(--blue-hover);
}
.dp-tab-sep {
  width: 14px;
  height: 1.5px;
  background: var(--line-strong);
  flex: 0 0 auto;
}
.dp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted) !important;
  cursor: pointer;
}
.dp-close:hover {
  background: var(--line-light);
  color: var(--ink) !important;
}

.dp-hint {
  margin: 12px 0 4px;
  font-size: 14px;
  color: var(--muted);
  min-height: 18px;
}

.dp-body {
  position: relative;
}
.dp-nav {
  position: absolute;
  top: 2px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}
.dp-nav:hover:not(:disabled) {
  background: var(--canvas);
  border-color: var(--line-strong);
}
.dp-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.dp-prev {
  left: 0;
}
.dp-next {
  right: 0;
}

.dp-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.dp-month-title {
  margin: 0 0 6px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}
.dp-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
  table-layout: fixed;
}
.dp-grid th {
  height: 26px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-light);
  text-align: center;
}
.dp-grid td {
  padding: 0;
}

.dp-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.dp-day-num {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.dp-day-price {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted-light);
}
.dp-day.is-low .dp-day-price {
  color: var(--teal-hover);
  font-weight: 700;
}
@media (hover: hover) {
  .dp-day:hover:not(:disabled):not(.is-depart):not(.is-return) {
    background: var(--line-light);
  }
}
.dp-day.is-today .dp-day-num {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.dp-day.is-disabled {
  color: var(--line-strong);
  cursor: default;
}

/* Days the search also checks around the chosen dates. */
.dp-day.in-flex {
  outline: 1.5px dashed #7dd3fc;
  outline-offset: -4px;
}

.dp-day.in-range {
  border-radius: 0;
  background: var(--pale);
  color: #0c4a6e;
}
.dp-day.is-preview-end {
  background: var(--pale);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.dp-day.is-depart,
.dp-day.is-return {
  background: var(--blue);
  color: #fff;
}
.dp-day.is-depart:not(.is-solo) {
  border-radius: 10px 0 0 10px;
}
.dp-day.is-return {
  border-radius: 0 10px 10px 0;
}
.dp-day.is-depart .dp-day-price,
.dp-day.is-return .dp-day-price {
  color: rgba(255, 255, 255, 0.88);
}
.dp-day.is-other-leg::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.6;
}
.dp-day:focus-visible {
  z-index: 1;
}

/* Footer -------------------------------------------------------------------- */
.dp-foot {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.dp-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}
.dp-flex,
.dp-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.dp-flex[hidden],
.dp-presets[hidden] {
  display: none;
}
.dp-options-label {
  margin-right: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.dp-chip {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14px !important;
  font-weight: 500;
  cursor: pointer;
}
.dp-chip:hover {
  border-color: var(--line-strong);
  background: var(--canvas);
}
.dp-chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--pale);
  color: #0c4a6e !important;
  font-weight: 600;
}
.dp-price-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.dp-price-note[hidden] {
  display: none;
}
.dp-price-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex: 0 0 auto;
}
.dp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.dp-summary {
  font-size: 14px;
  font-weight: 600;
}
.dp-done {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer;
}
.dp-done:hover {
  background: #1e293b;
}

/* A flight row's calendar sits under that row. */
.journey-leg {
  position: relative;
}
.journey-leg .leg-date-button {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.journey-leg .leg-date-button.is-empty {
  color: var(--muted, #64748b);
  font-weight: 500;
}
.journey-leg > .dp-pop {
  top: calc(100% + 6px);
  left: auto;
  right: 0;
}

/* Tablet: Dates and Cabin stack. */

/* Phone: the calendar is a full-height sheet with a fixed footer. */
@media (max-width: 640px) {
  html.dp-sheet-open,
  html.dp-sheet-open body {
    overflow: hidden;
  }
  html.dp-sheet-open body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(15, 23, 42, 0.45);
  }
  .dp-pop,
  .journey-leg > .dp-pop {
    position: fixed;
    z-index: 1002; /* the phone sheet covers the nav, above its backdrop */
    top: 24px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 0;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    animation-name: dpSheet;
  }
  .dp-pop[hidden] {
    display: none;
  }
  @keyframes dpSheet {
    from {
      transform: translateY(24px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  .dp-tab {
    min-width: 0;
    flex: 1;
  }
  .dp-hint {
    margin: 10px 0 2px;
  }
  .dp-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -16px;
    padding: 0 16px;
  }
  .dp-months {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .dp-nav {
    top: 4px;
  }
  .dp-prev {
    left: 16px;
  }
  .dp-next {
    right: 16px;
  }
  .dp-day {
    height: 48px;
  }
  .dp-foot {
    margin: 0 -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -8px 16px -12px rgba(15, 23, 42, 0.25);
  }
  .dp-options {
    gap: 8px;
  }
  .dp-chip {
    min-height: 44px;
  }
  .dp-actions {
    margin-top: 12px;
  }
  .dp-done {
    flex: 0 0 auto;
    min-width: 120px;
  }
}

@media (forced-colors: active) {
  .dp-day.is-depart,
  .dp-day.is-return,
  .dp-tab[aria-pressed="true"],
  .dp-chip[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }
  .dp-day.in-range {
    outline: 1px solid Highlight;
  }
}

/* ==========================================================================
   Home search form layout
   (formerly search-form.css)
   ========================================================================== */

/* Home search form: the form starts in the first screen, airports read as one line,
   and Search sits on the Dates row. Loaded after search-controls.css and date-picker.css. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hero ---------------------------------------------------------------------- */
.hero {
  padding: 36px 0 64px;
}
.hero-copy {
  margin-bottom: 26px;
}
.hero-copy .eyebrow {
  margin-bottom: 12px;
}
.hero h1 {
  font-size: clamp(36px, 4.2vw, 54px);
  line-height: 1.05;
}
.hero .lede {
  max-width: 680px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
}
.search-panel {
  padding: 24px 28px 22px;
}

/* Trip type and travelers share one line ------------------------------------ */
.trip-option-controls {
  align-items: center;
  margin: 0 0 16px;
}

/* Airports: one summary line, chips on demand -------------------------------- */
.route-fields .coverage-preview {
  padding: 4px 6px 4px 12px;
}
.coverage-preview .airport-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
}
.coverage-preview .airport-summary::-webkit-details-marker {
  display: none;
}
.coverage-preview .airport-summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 8px;
}
.coverage-preview .airport-summary-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.coverage-preview .airport-summary-text strong {
  font-size: 14px;
  line-height: 1.3;
}
.coverage-preview .airport-summary-text span {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.coverage-preview .airport-summary-action {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 8px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.coverage-preview .airport-summary-action::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}
.coverage-preview .airport-picker[open] .airport-summary-action::after {
  transform: translateY(2px) rotate(-135deg);
}
.coverage-preview .airport-picker[open] {
  padding-bottom: 8px;
}
/* An older rule stacks the chips in a column; they wrap in rows. */
.coverage-preview .airport-choices {
  flex-direction: row;
  margin-top: 4px;
}

/* Dates, Cabin and Search on one row ----------------------------------------- */
.trip-fields.has-dp {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: end;
}
.trip-fields #search-button {
  min-width: 0;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 12px;
  white-space: nowrap;
}

/* The budget-airline switch is a switch with its words beside it, not a 52px-tall input. */
.quick-switch input {
  min-height: 0 !important;
}
.flight-search .quick-switch {
  flex-direction: row;
  align-self: end;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #243d49;
}

/* Search options are already on the page; the floating filter button is for results. */
body:not(.results-mode) .mobile-filter-trigger-wrapper {
  display: none !important;
}

/* Tactile tap states and transitions */
.dp-trigger {
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background-color 0.15s,
    transform 0.1s ease;
}
.dp-trigger:active {
  transform: scale(0.985);
}
#search-button {
  transition:
    transform 0.12s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
#search-button:active {
  transform: scale(0.98);
}
.swap-route {
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.swap-route:active,
.swap-route.is-swapping {
  transform: rotate(180deg) scale(0.92);
  background-color: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.location-option {
  transition:
    background-color 0.1s ease,
    transform 0.08s ease;
}
.location-option:active {
  background: var(--pale);
  transform: scale(0.99);
}

@media (max-width: 760px) {
  .hero {
    padding: 24px 0 48px;
  }
  .hero .lede {
    font-size: 15px;
  }
  .search-panel {
    padding: 16px;
  }
  /* Enforce 16px on mobile inputs so iOS Safari never zooms the viewport on focus */
  .flight-search input,
  .flight-search select,
  .location-field input {
    font-size: 16px !important;
  }
  .trip-option-controls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .trip-type {
    width: auto;
  }
  .trip-fields.has-dp {
    grid-template-columns: minmax(0, 1fr);
  }
  .trip-fields #search-button {
    width: 100%;
  }
  /* Swap overlaps the gap between From and To instead of taking its own row. */
  .route-fields {
    position: relative;
  }
  .route-fields .swap-route {
    position: relative;
    z-index: 2;
    justify-self: end;
  }
}

@media (max-width: 640px) {
  /* Visual drag handle on top of mobile date picker sheet */
  .dp-pop::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: var(--line-strong);
    flex-shrink: 0;
  }
  html.dp-sheet-open body::after {
    cursor: pointer;
  }
}

/* Keep the first decision close to the route on small screens. */
@media (max-width: 760px) {
  .hero {
    padding-top: 20px;
  }
  .hero h1 {
    font-size: clamp(30px, 7vw, 44px);
    line-height: 1.12;
  }
}
.airline-filter-field input {
  text-transform: uppercase;
}
.airline-filter-field small {
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 400;
}

/* Expose advanced fields to the preference grid instead of nesting a narrow column. */
.constraint-grid > .advanced-preferences {
  display: contents;
}
.coverage-preview > strong,
.coverage-preview > span,
.coverage-preview > small {
  display: block;
}
.coverage-preview > span {
  margin-top: 4px;
}
.coverage-preview > small {
  margin-top: 4px;
  line-height: 1.45;
}

/* Allow the homepage controls and five-column footer to shrink at phone widths. */
.footer-columns {
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
}
.footer-columns > * {
  min-width: 0;
}
@media (max-width: 760px) {
  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand p,
  .footer-column a {
    overflow-wrap: anywhere;
  }
  .journey-leg {
    grid-template-columns: minmax(0, 1fr) 44px;
  }
  .journey-leg .leg-number {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    align-self: center;
  }
  .journey-leg .remove-leg {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  .journey-leg > label {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

/* ==========================================================================
   Result cards: one price, journey rows, details on demand
   (formerly results-presentation.css)
   ========================================================================== */

/* Result cards: one price, readable journey rows, details on demand. */
.results .search-result-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px !important;
}
#results .search-result-card.featured {
  border-color: #8aafe8 !important;
  box-shadow: 0 0 0 1px #8aafe8 !important;
}
.search-result-card .card-header-bar {
  gap: 16px;
}
.search-result-card .card-header-meta h3 {
  font-size: 18px;
  line-height: 1.4;
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}
.search-result-card .result-label {
  font-size: 14px;
  padding: 5px 9px;
  line-height: 1.3;
}
.search-result-card .result-price-context {
  display: block;
  margin-top: 5px;
}
.search-result-card .card-header-savings {
  white-space: normal;
  font-size: 14px;
}
.search-result-card .carrier strong {
  font-size: 14px;
}
.search-result-card .carrier small {
  font-size: 14px;
}
.search-result-card .card-face-schedule {
  border-radius: 0;
}
.search-result-card .direction-date-label {
  min-width: 0;
}
.search-result-card .segment-times {
  min-width: 0;
}
.search-result-card .segment-endpoint {
  font-size: 15px;
  flex-wrap: wrap;
}
.search-result-card .segment-endpoint time {
  font-variant-numeric: tabular-nums;
}
.search-result-card .direction-schedule-meta {
  font-weight: 400;
}
.search-result-card .direction-cabin-summary {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.search-result-card .direction-cabin {
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  background: var(--line-light);
  padding: 4px 7px;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.search-result-card .direction-cabin.long-economy {
  color: #92400e;
  background: var(--amber-pale);
  border: 1px solid #fde68a;
}
.search-result-card .result-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.search-result-card .result-metrics > span {
  padding: 8px 10px;
  flex: 0 1 auto;
  min-width: 0;
}
.search-result-card .result-metrics small {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.search-result-card .result-metrics strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.search-result-card .cabin-explanation {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 10px;
}
.search-result-card .result-why strong {
  font-size: 14px;
}
.search-result-card .result-why span {
  font-size: 14px;
  line-height: 1.5;
}
.search-result-card .preference-signals span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 6px;
}
.search-result-card .timeline-segment,
.search-result-card .timeline-segment-equipment {
  font-size: 14px;
  line-height: 1.5;
}
.search-result-card .result-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--canvas);
}
.search-result-card .result-actions:empty {
  display: none;
}
.search-result-card .compare-choice {
  align-items: center;
}
.search-result-card .compare-choice input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}
.search-result-card :is(button, input, summary):focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
.result-filters button {
  font-size: 14px;
  min-height: 44px;
}
.result-tools select {
  min-height: 44px;
  font-size: 14px;
}
@media (max-width: 600px) {
  .search-result-card .card-header-bar {
    flex-wrap: wrap;
  }
  .search-result-card .card-header-meta {
    flex: 1 1 160px;
  }
  .search-result-card .card-header-price {
    text-align: left;
  }
  .search-result-card .direction-date-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .search-result-card .direction-date-label {
    padding-top: 0;
  }
  .search-result-card .direction-schedule-meta,
  .search-result-card .direction-cabin-summary {
    grid-column: 1;
  }
  .search-result-card .result-actions {
    padding: 12px 16px;
  }
  .search-result-card .check-booking {
    flex: 1 1 160px;
  }
  .search-result-card .effective-price-note {
    flex-basis: 100%;
  }
  .result-heading,
  .result-heading-actions {
    flex-wrap: wrap;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .results .search-result-card {
    transition: none !important;
  }
  #results .search-result-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Results visual language: cabin classes, option kinds, gains and trade-offs (must follow results-cards.css)
   (formerly results-visuals.css)
   ========================================================================== */

/* Results visual language (issue #180, design canvas "Wayzuno Search & Results Redesign").
   Cabin classes, option kinds and gains / trade-offs get their own color and icon. Every color
   pairs with a word, and each cabin differs in lightness as well as hue, so nothing depends on
   color alone. Cabin colors are reserved for cabins; option kinds use a separate family.
   Loaded after results-cards.css. */

:root {
  /* Cabin classes */
  --wz-cabin-economy-ink: #334155;
  --wz-cabin-economy-bg: #ffffff;
  --wz-cabin-economy-line: #64748b;
  --wz-cabin-premium-ink: #134e4a;
  --wz-cabin-premium-bg: #ccfbf1;
  --wz-cabin-premium-line: #14b8a6;
  --wz-cabin-business-ink: #ffffff;
  --wz-cabin-business-bg: #1e3a8a;
  --wz-cabin-first-ink: #ffffff;
  --wz-cabin-first-bg: #581c87;
  /* Gains and trade-offs */
  --wz-good-ink: #14532d;
  --wz-good-bg: #f0fdf4;
  --wz-good-line: #bbf7d0;
  --wz-good-icon: #15803d;
  --wz-trade-ink: #7c2d12;
  --wz-trade-bg: #fff7ed;
  --wz-trade-line: #fed7aa;
  --wz-trade-icon: #b45309;
}

.rz-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
}
.rz-icon svg {
  display: block;
}

/* Cabin-class badges ------------------------------------------------------------ */
.cabin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
/* Each class sets its colors as variables; the rules below apply them with enough specificity
   to win over the older .search-result-card .direction-cabin styles. */
.cabin-badge--economy {
  --cb-ink: var(--wz-cabin-economy-ink);
  --cb-bg: var(--wz-cabin-economy-bg);
  --cb-line: var(--wz-cabin-economy-line);
}
.cabin-badge--premium_economy {
  --cb-ink: var(--wz-cabin-premium-ink);
  --cb-bg: var(--wz-cabin-premium-bg);
  --cb-line: var(--wz-cabin-premium-line);
}
.cabin-badge--business {
  --cb-ink: var(--wz-cabin-business-ink);
  --cb-bg: var(--wz-cabin-business-bg);
  --cb-line: var(--wz-cabin-business-bg);
}
.cabin-badge--first {
  --cb-ink: var(--wz-cabin-first-ink);
  --cb-bg: var(--wz-cabin-first-bg);
  --cb-line: var(--wz-cabin-first-bg);
}
.cabin-badge--other {
  --cb-ink: #334155;
  --cb-bg: var(--canvas);
  --cb-line: var(--line-strong);
}
.cabin-badge--unknown {
  --cb-ink: var(--muted);
  --cb-bg: #ffffff;
  --cb-line: #94a3b8;
  border-style: dashed;
}
.cabin-badge,
.search-result-card .card-face-schedule .direction-cabin.cabin-badge {
  color: var(--cb-ink, #334155);
  background: var(--cb-bg, #ffffff);
  border-color: var(--cb-line, #cbd5e1);
}

/* Card face: one badge per direction, or one per flight when a direction mixes cabins. */
.search-result-card .card-face-schedule .direction-cabin-summary {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 0;
}
.search-result-card .card-face-schedule .direction-cabin {
  padding: 3px 10px 3px 8px;
  overflow-wrap: normal;
  white-space: normal;
}
/* An economy flight of 6+ hours inside a mixed trip keeps its warning outline. */
.search-result-card .card-face-schedule .direction-cabin.cabin-badge.long-economy {
  --cb-bg: var(--amber-pale);
  --cb-line: #f59e0b;
}
/* The verified lie-flat chip from the seat-truth row uses the business color, not First's purple. */
.card-feature-badge.badge-lieflat {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #bfdbfe;
}

/* Schedule: takeoff / landing icons and a green "Nonstop". The label column makes room for the icon. */
@media (min-width: 641px) {
  .rc-card .direction-date-row {
    grid-template-columns: 96px minmax(0, auto) minmax(0, 1fr);
  }
}
.rc-card .direction-date-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.rc-card .direction-date-label .direction-icon {
  color: #1d4ed8;
}
.direction-stops.is-nonstop {
  color: #166534;
  font-weight: 600;
}

/* Option kinds: icon tile + matching label color ---------------------------------- */
.rc-card .card-header-meta {
  gap: 6px 10px;
}
.rc-kind-tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--kind-ink, #334155);
  background: var(--kind-bg, #f1f5f9);
}
.rc-card .result-label[class*="rc-kind--"] {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kind-ink, #334155);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* ux-polish-v3.css gives #results labels a bottom margin; the tile row needs them centered. */
#results .rc-card .result-label[class*="rc-kind--"],
#baseline-result .rc-card .result-label[class*="rc-kind--"] {
  margin: 0;
}
.rc-kind--airport {
  --kind-bg: #e0f2fe;
  --kind-ink: #075985;
}
.rc-kind--dates {
  --kind-bg: #dcfce7;
  --kind-ink: #166534;
}
.rc-kind--upgrade {
  --kind-bg: #ede9fe;
  --kind-ink: #5b21b6;
}
.rc-kind--mixed {
  --kind-bg: #ffedd5;
  --kind-ink: #9a3412;
}
.rc-kind--nonstop,
.rc-kind--fast {
  --kind-bg: #fef3c7;
  --kind-ink: #92400e;
}
.rc-kind--save {
  --kind-bg: #dcfce7;
  --kind-ink: #166534;
}
.rc-kind--tickets {
  --kind-bg: #ffe4e6;
  --kind-ink: #9f1239;
}
.rc-kind--best {
  --kind-bg: #dbeafe;
  --kind-ink: #1d4ed8;
}
.rc-kind--baseline,
.rc-kind--other {
  --kind-bg: var(--line-light);
  --kind-ink: #334155;
}

/* Gains and trade-offs ------------------------------------------------------------ */
.rc-tag {
  gap: 5px;
}
.rc-tag.good {
  color: var(--wz-good-ink);
  background: var(--wz-good-bg);
  border-color: var(--wz-good-line);
}
.rc-tag.good .rc-tag-icon {
  color: var(--wz-good-icon);
}
.rc-tag.trade {
  color: var(--wz-trade-ink);
  background: var(--wz-trade-bg);
  border-color: var(--wz-trade-line);
}
.rc-tag.trade .rc-tag-icon {
  color: var(--wz-trade-icon);
}

/* Price change versus the searched trip, by the price. */
.rc-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.rc-delta--less {
  color: #166534;
  background: #dcfce7;
}
.rc-delta--more {
  color: #0c4a6e;
  background: #e0f2fe;
}
.rc-delta--same {
  color: #334155;
  background: var(--line-light);
}

/* Airline marks when a logo is unavailable: a stable tint per airline. */
.carrier-mark[data-tone] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.carrier-mark[data-tone="0"] {
  background: #e0f2fe;
  color: #075985;
}
.carrier-mark[data-tone="1"] {
  background: #e0f2fe;
  color: #0c4a6e;
}
.carrier-mark[data-tone="2"] {
  background: #fce7f3;
  color: #9d174d;
}
.carrier-mark[data-tone="3"] {
  background: #fef9c3;
  color: #854d0e;
}
.carrier-mark[data-tone="4"] {
  background: #dcfce7;
  color: #166534;
}
.carrier-mark[data-tone="5"] {
  background: #ffedd5;
  color: #9a3412;
}

/* Section headings ------------------------------------------------------------------ */
.baseline-result-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
}
.baseline-result-kicker .results-section-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #334155;
  background: var(--line-light);
}

.results-options-heading {
  margin: 18px 0 10px;
}
.results-options-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.results-options-tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #1d4ed8;
  background: #dbeafe;
}
.results-options-heading h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.results-options-lede {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.cabin-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.cabin-key:focus-visible {
  outline: 2px solid var(--blue, #3b82f6);
  outline-offset: 2px;
  border-radius: 6px;
}
.cabin-key-label {
  margin-right: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

/* Phones ------------------------------------------------------------------------------ */
@media (max-width: 640px) {
  /* One column on phones: label, then times, then stops and the cabin badges. */
  .rc-card .direction-date-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .rc-card .direction-schedule-meta,
  .search-result-card .card-face-schedule .direction-cabin-summary {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .rc-kind-tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .search-result-card .card-face-schedule .direction-cabin-summary {
    grid-column: 1 / -1;
  }
  .results-options-heading h2 {
    font-size: 20px;
  }
  .cabin-key {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .cabin-key > li {
    flex: none;
  }
}

/* ==========================================================================
   Five-field search, results Filters panel and the simpler result card
   (formerly search-simple.css)
   ========================================================================== */

/* Five-field homepage search (From, To, Dates, Travelers & cabin, Search), the results Filters
   panel, and the simpler result card. Loaded last, after search-form.css and trip-shortlist.css. */

/* Trip type: Round trip / One way inside the calendar, Multi-city as a link ------- */
.trip-option-controls[hidden] {
  display: none;
}
.dp-trip[hidden] {
  display: none;
}
.dp-trip {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 999px;
  background: var(--line-light);
}
.dp-trip-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px !important; /* .flight-search sets 16px on phones */
  font-weight: 600;
  cursor: pointer;
}
.dp-trip-btn[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.dp-trip-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.trip-mode-link {
  min-height: 36px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.trip-mode-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Travelers & cabin in one field ------------------------------------------------- */
.party-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.party-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.party-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.party-trigger span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.party-trigger::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
}
.party-trigger:hover {
  border-color: var(--line-strong);
  background: #fff;
}
.party-trigger:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.party-trigger[aria-expanded="true"] {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.14);
}
.party-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 990;
  display: grid;
  gap: 12px;
  width: min(300px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.party-pop[hidden] {
  display: none;
}
.party-done {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.party-done:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Airports inside the From / To field: "All 5 airports · LAX · BUR …  Change" ----- */
.route-fields .location-field:has(.airport-picker) > input {
  min-height: 78px;
  padding-top: 2px;
  padding-bottom: 30px;
}
.route-fields .coverage-preview:has(.airport-picker) {
  position: relative;
  z-index: 1;
  min-height: 0;
  margin: -34px 0 0;
  padding: 0 8px 0 18px;
  border: 0;
  background: transparent;
}
.route-fields .coverage-preview .airport-summary {
  min-height: 28px;
  gap: 8px;
}
.route-fields .coverage-preview .airport-summary-text {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.route-fields .coverage-preview .airport-summary-text strong {
  flex: 0 0 auto;
  color: var(--navy);
  font-size: 14px;
}
.route-fields .coverage-preview .airport-summary-text span {
  font-size: 14px;
}
.route-fields .coverage-preview .airport-summary-text span::before {
  content: "· ";
}
.route-fields .coverage-preview .airport-summary-action {
  padding: 0 6px;
  font-size: 14px;
}
.route-fields .coverage-preview .airport-picker[open] {
  padding-bottom: 0;
}
.route-fields .coverage-preview .airport-picker[open] .airport-choices {
  margin: 14px 0 0 -18px;
}
.route-fields .coverage-preview .airport-picker[open] .airport-details {
  margin-left: -18px;
}
/* No place chosen yet: no empty airport box under the field. */
.route-fields .coverage-preview:empty {
  display: none;
}
/* While suggestions are open the line would describe the previous place. */
.route-fields .location-field:has(.location-suggestions:not([hidden])) .coverage-preview {
  visibility: hidden;
}
.route-fields .location-field:has(.location-suggestions:not([hidden])) .coverage-preview.is-tentative {
  display: none;
}

/* Filters panel (results): the search preferences moved out of the homepage form ---- */
.filter-sheet-controls {
  padding: 0;
  border: 0;
}
/* Results mode hides the homepage form (.flight-search); the panel borrows its field styles. */
body.results-mode .flight-search.filter-sheet-controls {
  display: block;
}
.filter-sheet-controls .quick-search-options {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
}
.filter-sheet-controls .quick-search-options .quick-choice:last-of-type {
  grid-column: auto;
}
.filter-sheet-controls .quick-switch {
  justify-content: space-between;
  flex-direction: row-reverse;
}
.filter-sheet-controls .traveler-controls {
  margin-top: 18px;
  background: #fff;
}
.filter-sheet-controls .constraint-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.results-filters-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.results-filters-button:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
.results-filters-button .mobile-filter-badge[hidden] {
  display: none;
}

.budget-airlines-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}
.budget-airlines-notice[hidden] {
  display: none;
}
.budget-airlines-notice button {
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (min-width: 769px) {
  /* A centered panel on wide screens instead of a bottom sheet. */
  dialog.mobile-filter-sheet {
    margin: auto;
    border-radius: 20px;
  }
  dialog.mobile-filter-sheet .sheet-drag-handle-zone {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Phones use the floating Filters button. */
  .results-filters-button {
    display: none;
  }
}

@media (max-width: 760px) {
  .party-pop {
    left: 0;
    right: 0;
    width: auto;
  }
  /* Swap sits beside the "To" label, clear of the From field's Change link. */
  .route-fields .swap-route {
    margin: -4px 12px -40px;
  }
  .hero-copy {
    margin-bottom: 14px;
  }
  .hero .lede {
    margin-top: 8px;
  }
}

@media (max-width: 640px) {
  .dp-head {
    flex-wrap: wrap;
  }
  .dp-trip {
    order: -1;
  }
  .dp-tabs {
    order: 1;
    flex-basis: 100%;
  }
  .dp-head .dp-close {
    margin-left: auto;
  }
  .filter-sheet-controls .constraint-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Before a search the results area has nothing to show: no placeholder heading, empty card,
   notices or freshness line. "My trip" stays when it holds saved options. */
body:not(.results-mode) .search-panel > .result-heading > div:first-child,
body:not(.results-mode) #search-freshness,
body:not(.results-mode) .search-panel > .ftc-disclosure-banner,
body:not(.results-mode) .search-panel > .results-layout,
body:not(.results-mode) .search-panel > .trust {
  display: none;
}
body:not(.results-mode):not(.has-saved-trip) .search-panel > .result-heading {
  display: none;
}
body:not(.results-mode) .search-panel > .result-heading {
  justify-content: flex-end;
  padding-top: 12px;
}

/* Result card: one main button; Share and Save as a small row under it ---------------- */
.rc-card .result-secondary-actions {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.rc-card .result-secondary-actions .btn-share-deal,
.rc-card .result-secondary-actions .btn-save-trip {
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
}
.rc-card .result-secondary-actions button:hover {
  background: var(--line-light);
}
.carrier-intel-btn {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 640px) {
  /* Phones: what changes and the flights first, then price and booking at the bottom,
     in thumb reach (results redesign, Nov 2026). */
  #results .rc-card .rc-side,
  #baseline-result .rc-card .rc-side {
    order: 1;
    border-top: 1px solid var(--line-light);
    border-bottom: 0;
  }
  .rc-card .result-secondary-actions {
    justify-content: flex-end;
  }
}

/* Long airline names wrap onto a second line instead of being cut off, and the
   airline info button inside the name is not clipped (its tap area extends past it). */
.rc-card .carrier strong {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Touch targets on phones: at least 44 × 44px (WCAG 2.5.5, UX plan §7.2)
   ========================================================================== */

@media (max-width: 768px) {
  .rc-card .result-secondary-actions .btn-share-deal,
  .rc-card .result-secondary-actions .btn-save-trip,
  .btn-toggle-results-mode,
  .budget-airlines-notice button,
  .trip-mode-link,
  .dp-trip-btn,
  .search-retry {
    min-height: 44px;
  }
  .dp-nav,
  .seat-inspector-close-btn,
  .airline-intel-close-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* At 14px the luggage buttons no longer fit on one line beside their label. */
  .luggage-calc-group {
    flex-wrap: wrap;
    border-radius: 16px;
  }
  .luggage-btn {
    white-space: nowrap;
  }
  /* Disclosure rows: title above its explanation instead of squeezed beside it. */
  .search-envelope summary,
  .traveler-controls summary,
  .exclusions-panel summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
  }
  .search-envelope summary small,
  .traveler-controls summary small,
  .exclusions-panel summary small {
    grid-column: 1;
  }
  .search-envelope summary::after,
  .traveler-controls summary::after,
  .exclusions-panel summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  /* The airline info button keeps its small icon; its tap area grows instead. */
  .carrier-intel-btn {
    position: relative;
  }
  .carrier-intel-btn::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
}

/* Travelers field: the lap-infant rule note. */
.party-note {
  font-size: 14px;
  color: var(--muted, #64748b);
}

/* "My trip (0)" must stay on one line next to Share search. */
[data-open-trip] {
  white-space: nowrap;
}


/* Launch usability: choices first, details available on demand. */
.pre-search-preferences { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; padding:12px 0; }
.pre-search-preferences > label { display:flex; align-items:center; gap:8px; font-size:.875rem; font-weight:600; }
.pre-search-preferences input[type=checkbox] { width:20px; height:20px; accent-color:#0369a1; }
.pre-search-preferences select { min-height:44px; max-width:100%; padding:8px; border:1px solid #cbd5e1; border-radius:8px; background:var(--surface,#fff); color:inherit; }
.pre-search-preferences [hidden] { display:none; }
body.results-mode .pre-search-preferences { display:none; }
.hero > .route-map-teaser { display:flex; flex-wrap:wrap; gap:10px; width:100%; padding:0 4px; margin-top:12px; }
.hero > .route-map-teaser .route-map-link { flex:1 1 260px; margin:0; background:transparent; border-color:#dce0e8; color:inherit; }
.hero > .route-map-teaser .route-map-badge { display:none; }
body.results-mode .hero > .route-map-teaser { display:none; }
.card-travel-dates { margin:4px 0 10px; font-size:.875rem; font-weight:650; color:inherit; }
.timing-variants { display:flex; flex-wrap:wrap; gap:6px 12px; margin:8px 0; font-size:.875rem; }
.timing-variants select { width:100%; max-width:100%; min-height:44px; padding:8px; border:1px solid #d7dce5; border-radius:8px; color:inherit; background:var(--surface,#fff); }
.points-estimate-details { margin-top:8px; max-width:100%; font-size:.875rem; line-height:1.5; }
.points-estimate-details summary { cursor:pointer; }
#search-coverage-details { margin:20px 0; padding:14px; border:1px solid #dce0e8; border-radius:12px; min-width:0; }
#search-coverage-details > summary { cursor:pointer; font-weight:650; min-height:32px; }
#search-coverage-details > section { margin-top:12px; }
.coverage-omissions { font-weight:650; }
.booking-panel { scroll-margin-top:90px; }
.booking-selected-trip, .booking-selected-cabin { font-weight:650; }
.booking-status .neutral { background:#f1f5f9; color:#334155; }
.seller-cabin { display:block; font-size:1rem; }
.seller-option .booking-warning { margin:0; font-size:.875rem; }
.other-seller-cabins { grid-column:1/-1; }
.other-seller-cabins > summary { cursor:pointer; padding:14px 0; font-weight:650; }
.other-seller-cabins .seller-option { margin-top:10px; }
@media(max-width:600px) {
  .pre-search-preferences { gap:10px; }
  .pre-search-preferences > label { flex:1 1 100%; }
  .pre-search-preferences select { flex:1; min-width:0; }
  .results-view-actions { flex-wrap:wrap; }
  .card-travel-dates { font-size:.875rem; }
  .seller-option, .booking-panel { min-width:0; overflow-wrap:anywhere; }
  .booking-panel .booking-link { width:100%; min-height:44px; }
}

.flight-search .pre-search-preferences > label { display:flex; flex-direction:row; align-items:center; }
.flight-search .pre-search-preferences input[type=checkbox] { flex:none; width:20px; height:20px; margin:0; }
.flight-search .route-fields, .flight-search .location-field, .flight-search .coverage-preview { min-width:0; }
.flight-search .location-field { width:100%; max-width:100%; }
.flight-search .airport-summary-text { min-width:0; flex:1; overflow:hidden; }
.flight-search .airport-summary-action { flex:none; }
body:not(.results-mode) #baseline-result, body:not(.results-mode) #results-options-heading, body:not(.results-mode) #search-coverage-details { display:none; }
@media(max-width:680px) {
  .flight-search .route-fields { grid-template-columns:minmax(0,1fr); }
  .flight-search .location-field input { width:100%; min-width:0; max-width:100%; }
}

/* ==========================================================================
   Navigator's desk (redesign stage 2): the homepage search sits on the deep
   navy ground used by the article covers, so the first viewport reads as the
   tool itself. Results mode keeps its light working surface.
   ========================================================================== */
/* The navy is painted on the hero itself and bled to the screen edges with a border-image
   outset. Unlike clip-path, isolation or a z-indexed pseudo-element, this creates no stacking
   context, so the phone date sheet and other overlays inside the hero still stack above their
   page-level backdrops. */
body:not(.results-mode) .hero {
  background: var(--navy-shell);
  border-image: linear-gradient(var(--navy-shell), var(--navy-shell)) fill 0 / 0 / 0 100vmax;
}
body:not(.results-mode) .hero-copy h1 {
  color: #ffffff;
}
body:not(.results-mode) .hero-copy .lede {
  color: var(--on-navy-muted);
}
body:not(.results-mode) .hero-copy .example-links,
body:not(.results-mode) .hero-copy .example-links a {
  color: var(--on-navy-accent);
}
body:not(.results-mode) .hero > .route-map-teaser .route-map-link {
  border-color: rgba(203, 213, 225, 0.28);
  color: var(--on-navy-muted);
}
body:not(.results-mode) .hero > .route-map-teaser .route-map-link strong {
  color: #ffffff;
}
body:not(.results-mode) .hero > .route-map-teaser .route-map-icon {
  display: none;
}
body:not(.results-mode) .search-panel {
  box-shadow: 0 24px 48px -12px rgba(2, 6, 23, 0.55);
}

/* Polish (redesign stage 3): before a search the form ends at its last control.
   The divider and bottom padding only separate the form from results. */
body:not(.results-mode) .search-panel > .flight-search {
  padding-bottom: 0;
  border-bottom: 0;
}
/* Checkbox labels read as options, not section headers. */
.flight-search .pre-search-preferences > label {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
}

/* Homepage below the form (redesign, Nov 2026) ------------------------------------ */
.together-switch { display: inline-flex; align-items: center; gap: 4px; margin-left: 20px; }
.tradeoff-option .opt-change { margin: 12px 0 0; color: #0f172a; font-size: 14px; font-weight: 600; line-height: 1.45; }
.tradeoff-option.baseline-option .opt-change { color: #475569; font-weight: 500; }
.home-doors { width: min(860px, calc(100% - 32px)); margin: 72px auto; }
.home-doors h2 { margin: 0 0 20px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; }
.home-doors-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line, #e2e8f0); }
.home-doors-list li { border-bottom: 1px solid var(--line, #e2e8f0); }
.home-doors-list a { display: grid; gap: 4px; padding: 18px 40px 18px 4px; color: inherit; text-decoration: none; position: relative; }
.home-doors-list a::after { content: "→"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--blue, #0369a1); font-size: 20px; }
.home-doors-list a:hover strong, .home-doors-list a:focus-visible strong { color: var(--blue, #0369a1); }
.home-doors-list strong { font-size: 18px; color: #0f172a; }
.home-doors-list span { color: #475569; font-size: 16px; line-height: 1.5; }
.home-doors-more { margin: 16px 0 0; color: #475569; font-size: 15px; }
@media (max-width: 640px) {
  .together-switch { margin-left: 0; display: flex; }
  .home-doors { margin: 48px auto; }
  .home-doors-list a { padding-right: 32px; }
}