/* 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: 12.5px;
  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: #f8fafc; --cb-line: #cbd5e1; }
.cabin-badge--unknown { --cb-ink: #475569; --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: #fffbeb;
  --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: 12px;
  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: #f1f5f9; --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: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.rc-delta--less { color: #166534; background: #dcfce7; }
.rc-delta--more { color: #3730a3; background: #e0e7ff; }
.rc-delta--same { color: #334155; background: #f1f5f9; }

/* 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: 11px; font-weight: 700; }
.carrier-mark[data-tone="0"] { background: #e0f2fe; color: #075985; }
.carrier-mark[data-tone="1"] { background: #e0e7ff; color: #3730a3; }
.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: #f1f5f9;
}

.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: #0f172a; }
.results-options-lede { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: #475569; }
.cabin-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.cabin-key-label { margin-right: 2px; font-size: 13px; font-weight: 600; color: #475569; }

/* 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; }
}