/* Compact result cards and a lighter results header. Loaded last on the home page.
   Card face: what differs between options. "Flight details": cabin by flight, baggage, reasoning. */

/* Card ------------------------------------------------------------------------ */
#results .rc-card,
#baseline-result .rc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px !important;
}
.rc-card .search-result-content { padding: 16px 20px 6px; min-width: 0; }
.rc-card .card-header-bar { display: block; margin: 0 0 10px; }
.rc-card .card-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rc-card .result-label { font-size: 12px; padding: 4px 9px; line-height: 1.3; }
.rc-tags { display: contents; }
.rc-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
}
.rc-tag.accent { border-color: #c7d2fe; background: var(--pale, #eef2ff); color: #3730a3; }

/* Airline: logo and name only; flight numbers are in Flight details. */
.rc-card .carrier-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 4px; }
.rc-card .carrier { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; }
.rc-card .carrier-logo, .rc-card .carrier-mark { width: 24px; height: 24px; }
.rc-card .carrier strong { font-size: 13px; }
.rc-card .carrier small { display: none; }

/* Schedule: one line per direction. */
.rc-card .card-face-schedule { margin: 0; padding: 0; border: 0; background: transparent; gap: 0; }
.rc-card .direction-date-row {
  display: grid;
  grid-template-columns: 68px minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  padding: 7px 0;
  border: 0;
}
.rc-card .direction-date-row + .direction-date-row { border-top: 1px solid #f1f5f9; margin: 0; padding-top: 7px; }
.rc-card .direction-date-label { padding: 0; font-size: 12px; color: var(--muted, #475569); text-transform: none; letter-spacing: 0; }
.rc-card .segment-times { gap: 8px; margin: 0; font-size: 15px; }
.rc-card .segment-endpoint { font-size: 15px; font-weight: 600; }
.rc-card .direction-schedule-meta { grid-column: auto; font-size: 13px; color: var(--muted, #475569); white-space: nowrap; }
/* Cabin by flight is listed in Flight details; the face warns when a cabin is masked. */
.rc-card .card-face-schedule .direction-cabin-summary { display: none; }

.rc-compare { margin: 6px 0 0; font-size: 13px; color: #334155; }
.rc-card .preference-signals { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.rc-card .preference-signals .warning {
  padding: 4px 8px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

/* Flight details disclosure */
.rc-card .cabin-details { margin: 6px 0 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.rc-card .cabin-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 44px;
  padding: 0;
  color: var(--blue, #4f46e5);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.rc-card .cabin-details > summary::-webkit-details-marker { display: none; }
.rc-card .cabin-details > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.rc-card .cabin-details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.rc-card .cabin-details[open] { padding-bottom: 12px; }
.rc-details-extra { display: grid; gap: 10px; margin-top: 12px; }
.rc-card .result-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.rc-card .result-why { margin: 0; padding: 12px; border: 0; border-radius: 8px; background: #f8fafc; }
.rc-card .result-why strong { font-size: 12px; }
.rc-card .result-why span { font-size: 13px; line-height: 1.5; }
.rc-matches { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-matches span { padding: 3px 8px; border-radius: 6px; background: #ecfdf5; color: #065f46; font-size: 12px; font-weight: 600; }

/* Price and actions column */
.rc-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-left: 1px solid #f1f5f9;
  background: #fcfcfd;
}
.rc-card .card-header-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.rc-card .result-price-top { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rc-card .result-price-context { font-size: 12px; color: var(--muted, #475569); }
.rc-card .card-header-savings { margin-top: 4px; font-size: 12px; }
.rc-card .effective-price-note { max-width: 170px; font-size: 11.5px; color: var(--muted, #475569); }
.rc-card .result-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.rc-card .check-booking { width: 100%; min-height: 44px; height: auto; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
.rc-card .compare-choice { justify-content: center; min-height: 44px; margin: 0; font-size: 13px; gap: 8px; cursor: pointer; }

/* Requested trip */
#baseline-result .rc-card { border-color: #c7d2fe !important; }
.baseline-result-kicker { margin: 0 0 8px; }

/* Results header ------------------------------------------------------------- */
body.results-mode .results-view-header { padding: 18px 24px; }
body.results-mode .results-view-header h2 { font-size: clamp(22px, 2.4vw, 30px); }
.result-tools .sort-explainer { display: none; }
body.results-mode .result-heading { padding: 4px 4px 8px; }

@media (max-width: 899px) {
  /* A 176px-tall sticky toolbar hid the cards on phones; it scrolls with the page instead. */
  body.results-mode .result-tools { position: static; box-shadow: none; }
  .result-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .result-filters button { flex: 0 0 auto; }
}

@media (max-width: 768px) {
  /* The two floating buttons sit side by side at the bottom, with room left below the last card. */
  body.results-mode { padding-bottom: 84px; }
  body.results-mode .mobile-filter-trigger-wrapper { bottom: 16px !important; justify-content: flex-start !important; padding-left: 12px; }
  body.results-mode .comparison-sheet-trigger-wrapper:not([hidden]) { bottom: 16px !important; justify-content: flex-end !important; padding-right: 12px; }
  body.results-mode .mobile-filter-btn, body.results-mode .comparison-sheet-trigger-btn { padding: 10px 14px; font-size: 13px; }
}

@media (max-width: 640px) {
  #results .rc-card,
  #baseline-result .rc-card { grid-template-columns: minmax(0, 1fr); }
  .rc-card .search-result-content { padding: 14px 16px 4px; }
  .rc-card .direction-date-row { grid-template-columns: 56px minmax(0, 1fr); }
  .rc-card .direction-schedule-meta { grid-column: 2; }
  /* Price on the left, booking on the right, Compare under the button. */
  .rc-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    border-left: 0;
  }
  .rc-card .card-header-price { align-items: flex-start; text-align: left; min-width: 0; }
  .rc-card .result-actions { min-width: 0; }
  .rc-card .check-booking { width: auto; font-size: 13.5px; }
  .rc-card .compare-choice { min-height: 36px; }
}

/* Older #results article rules (ux-polish-v3.css) style actions as a padded two-column bar;
   scope these by id so the card's price-and-booking column wins. */
:is(#results, #baseline-result) .rc-card .result-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
:is(#results, #baseline-result) .rc-card .check-booking { flex: none; width: 100%; height: auto; padding-inline: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  :is(#results, #baseline-result) .rc-card .rc-side { grid-template-columns: minmax(0, 1fr) auto; }
  :is(#results, #baseline-result) .rc-card .result-actions { width: auto; }
  :is(#results, #baseline-result) .rc-card .check-booking { width: auto; }
  .rc-card .result-price-context { white-space: nowrap; }
}

/* Per-flight rows under Flight details: on phones the old grid collapsed its first column to 0px,
   so route, cabin and chips stack instead. */
@media (max-width: 640px) {
  .rc-card .timeline-segment { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .rc-card .timeline-segment > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .rc-card .timeline-segment .segment-times { display: flex; flex-wrap: wrap; gap: 2px 8px; }
  .rc-card .timeline-segment .seat-features { display: flex; flex-wrap: wrap; gap: 6px; }
  .rc-card .timeline-segment .seat-features span,
  .rc-card .timeline-segment .seat-badge { width: auto; white-space: nowrap; }
  .rc-card .timeline-segment .btn-inspect-seat-map { width: auto; white-space: nowrap; }
}

/* ==========================================================================
   Gateway Price Breakdown Bar (Country & Regional Scopes)
   ========================================================================== */
.gateway-price-bar-container {
  margin: 0 0 16px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.gateway-price-bar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.gateway-bar-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.gateway-bar-subtitle {
  font-size: 12px;
  color: #64748b;
}

.gateway-price-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.gateway-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.gateway-pill:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.gateway-pill.is-active {
  background: #1e293b;
  border-color: #1e293b;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(30, 41, 59, 0.2);
}

.gateway-pill.gateway-pill-lowest:not(.is-active) {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.gateway-pill.gateway-pill-lowest:not(.is-active):hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.gateway-lowest-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #10b981;
  color: #ffffff;
  margin-left: 2px;
}

.gateway-pill.is-active .gateway-lowest-badge {
  background: #34d399;
  color: #064e3b;
}

/* ==========================================================================
   Card-Face Cabin Truth & Fleet Swap Risk Badges
   ========================================================================== */
.card-face-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 4px;
}

.card-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}

.card-feature-badge svg.wz-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Lie-Flat Bed */
.card-feature-badge.badge-lieflat {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}

/* Wi-Fi Variants */
.card-feature-badge.badge-starlink {
  background: #ecfeff;
  border-color: #a5f3fc;
  color: #0e7490;
}

.card-feature-badge.badge-viasat,
.card-feature-badge.badge-wifi {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

.card-feature-badge.badge-no-wifi {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* Fleet Swap Risk */
.card-feature-badge.badge-swap-low {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.card-feature-badge.badge-swap-med {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.card-feature-badge.badge-swap-high {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.badge-icon-warn {
  font-size: 12px;
}

.badge-icon-neutral {
  font-size: 10px;
}