/*
 * Revie Travels — Design Tokens
 * Based on Revie Design System v1.0
 * All values match the official design system exactly.
 */

/* ── CRITICAL: hidden always wins ── */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

:root {
  /* ── Brand colours ── */
  --revie-blue-50:  #E6F4FA;
  --revie-blue-100: #C2E4F2;
  --revie-blue-300: #4DB3D6;
  --revie-blue-500: #0492C2;   /* PRIMARY */
  --revie-blue-700: #035F80;

  /* ── Semantic colour aliases ── */
  --color-primary:       #0492C2;
  --color-primary-hover: #035F80;
  --color-primary-soft:  #E6F4FA;

  /* ── Neutral palette ── */
  --neutral-25:  #FAFBFC;   /* page background */
  --neutral-50:  #F3F5F7;
  --neutral-100: #E7EBEF;   /* hairline borders */
  --neutral-200: #CDD3D9;
  --neutral-300: #A8B2BC;
  --neutral-400: #8C96A0;   /* placeholder text */
  --neutral-500: #667380;
  --neutral-600: #4A5560;
  --neutral-700: #353D45;   /* body text */
  --neutral-900: #0E1318;   /* footer / nav dark */

  /* ── Semantic status ── */
  --color-success:       #1B8A4A;
  --color-success-soft:  #E8F5EE;
  --color-warning:       #B8770A;
  --color-warning-soft:  #FDF4E3;
  --color-error:         #C62828;
  --color-error-soft:    #FDEAEA;
  --color-info:          #0492C2;
  --color-info-soft:     #E6F4FA;

  /* ── Surface ── */
  --surface-page:  #FAFBFC;
  --surface-card:  #FFFFFF;
  --surface-raised: #FFFFFF;

  /* ── Border ── */
  --border-subtle: #E7EBEF;
  --border-default: #CDD3D9;
  --border-strong: #8C96A0;

  /* ── Text ── */
  --text-primary:   #0E1318;
  --text-secondary: #353D45;
  --text-tertiary:  #667380;
  --text-placeholder: #8C96A0;
  --text-disabled:  #A8B2BC;
  --text-inverse:   #FFFFFF;
  --text-brand:     #0492C2;

  /* ── Typography ── */
  --font-sans: Arial, Helvetica, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Font sizes */
  --fs-12: 0.75rem;     /* 12px — caption, labels */
  --fs-13: 0.8125rem;   /* 13px — helper */
  --fs-14: 0.875rem;    /* 14px — body-sm */
  --fs-15: 0.9375rem;   /* 15px — body */
  --fs-16: 1rem;        /* 16px — body-lg */
  --fs-18: 1.125rem;    /* 18px — h4 */
  --fs-20: 1.25rem;     /* 20px — h3 */
  --fs-24: 1.5rem;      /* 24px — h2 */
  --fs-32: 2rem;        /* 32px — h1 */

  /* ── Spacing (4px base grid) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border radius ── */
  --radius-sm: 4px;
  --radius-md: 6px;   /* inputs, buttons */
  --radius-lg: 10px;  /* cards */
  --radius-xl: 16px;  /* heroes */
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(14,19,24,0.08), 0 1px 2px rgba(14,19,24,0.04);
  --shadow-md: 0 4px 12px rgba(14,19,24,0.10), 0 2px 4px rgba(14,19,24,0.06);
  --shadow-lg: 0 8px 24px rgba(14,19,24,0.12), 0 4px 8px rgba(14,19,24,0.06);

  /* ── Transitions ── */
  --t: 0.18s ease;
}

/* ════════════════════════════════════════
   BASE
════════════════════════════════════════ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
  background: var(--surface-page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ════════════════════════════════════════
   TYPOGRAPHY SCALE (r- prefix = Revie DS)
════════════════════════════════════════ */
.r-h1 { font-size: var(--fs-32); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1.2; letter-spacing: -0.01em; }
.r-h2 { font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1.3; }
.r-h3 { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1.35; }
.r-h4 { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1.4; }
.r-lead   { font-size: var(--fs-16); color: var(--text-secondary); line-height: 1.6; }
.r-body   { font-size: var(--fs-15); color: var(--text-secondary); }
.r-helper { font-size: var(--fs-13); color: var(--text-tertiary); }
.r-caption{ font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }

/* ════════════════════════════════════════
   BUTTONS  (r-btn)
════════════════════════════════════════ */
.r-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px var(--space-6);
  background: var(--color-primary);
  color: var(--text-inverse);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.r-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 2px 8px rgba(4,146,194,0.25);
}
.r-btn:active:not(:disabled) { transform: translateY(1px); }
.r-btn:disabled { background: var(--neutral-200); border-color: var(--neutral-200); color: var(--text-disabled); cursor: not-allowed; }
.r-btn:focus-visible { outline: 3px solid var(--revie-blue-300); outline-offset: 2px; }

.r-btn--secondary { background: transparent; color: var(--color-primary); }
.r-btn--secondary:hover:not(:disabled) { background: var(--color-primary-soft); border-color: var(--color-primary); box-shadow: none; }
.r-btn--ghost { background: transparent; border-color: var(--border-default); color: var(--text-secondary); }
.r-btn--ghost:hover:not(:disabled) { border-color: var(--neutral-400); background: var(--neutral-50); box-shadow: none; }
.r-btn--danger { background: var(--color-error); border-color: var(--color-error); }
.r-btn--danger:hover:not(:disabled) { background: #A32020; border-color: #A32020; }
.r-btn--sm { padding: 6px var(--space-4); font-size: var(--fs-13); }
.r-btn--lg { padding: 14px var(--space-8); font-size: var(--fs-16); }
.r-btn--block { width: 100%; }
.r-btn.is-loading { opacity: 0.75; cursor: wait; pointer-events: none; }

/* ════════════════════════════════════════
   FORM FIELDS  (r-field, r-input)
════════════════════════════════════════ */
.r-field { display: flex; flex-direction: column; gap: var(--space-1); }
.r-field__label {
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.r-required { color: var(--color-error); margin-left: 2px; }
.r-field__hint  { font-size: var(--fs-12); color: var(--text-tertiary); }
.r-field__error { font-size: var(--fs-12); color: var(--color-error); font-weight: var(--fw-medium); }
.r-field.has-error .r-input { border-color: var(--color-error); }

.r-input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  color: var(--text-primary);
  background: var(--surface-card);
  transition: border-color var(--t), box-shadow var(--t);
  appearance: auto;
}
.r-input::placeholder { color: var(--text-placeholder); }
.r-input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px rgba(4,146,194,0.15); }
.r-input:disabled { background: var(--neutral-50); color: var(--text-disabled); cursor: not-allowed; }

/* Grid layout for forms */
.r-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: var(--space-4); }
.r-form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.r-form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.r-col-span-2 { grid-column: span 2; }
.r-col-full   { grid-column: 1 / -1; }

/* Checkbox / radio */
.r-check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--fs-14); color: var(--text-secondary); }
.r-check input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-primary); cursor: pointer; }

/* ════════════════════════════════════════
   CARDS  (r-card)
════════════════════════════════════════ */
.r-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.r-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.r-card__title  { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--text-primary); margin: 0; }
.r-card--compact { padding: var(--space-4); }
.r-card--flush   { padding: 0; overflow: hidden; }
.r-divider { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-4) 0; }

/* ════════════════════════════════════════
   BADGES  (r-badge)
════════════════════════════════════════ */
.r-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  background: var(--neutral-100);
  color: var(--text-secondary);
  white-space: nowrap;
}
.r-badge--brand   { background: var(--revie-blue-50);      color: var(--color-primary); }
.r-badge--success { background: var(--color-success-soft); color: var(--color-success); }
.r-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.r-badge--error   { background: var(--color-error-soft);   color: var(--color-error); }
.r-badge--info    { background: var(--color-info-soft);    color: var(--color-info); }

/* ════════════════════════════════════════
   ALERTS  (r-alert)
════════════════════════════════════════ */
.r-alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-info-soft);
  border: 1px solid var(--revie-blue-100);
  color: var(--color-primary);
  font-size: var(--fs-14);
  line-height: 1.5;
}
.r-alert__icon  { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.r-alert__title { display: block; font-weight: var(--fw-bold); margin-bottom: 2px; }
.r-alert--success { background: var(--color-success-soft); border-color: #C7E6D4; color: var(--color-success); }
.r-alert--warning { background: var(--color-warning-soft); border-color: #F5DFA0; color: var(--color-warning); }
.r-alert--error   { background: var(--color-error-soft);   border-color: #F2C6C6; color: var(--color-error); }
.r-alert__close { margin-left: auto; flex-shrink: 0; background: none; border: none; cursor: pointer; color: inherit; opacity: .6; font-size: 16px; line-height: 1; padding: 0; }

/* ════════════════════════════════════════
   PROGRESS STEPS  (r-steps)
════════════════════════════════════════ */
.r-steps { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; }
.r-steps__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-13); color: var(--text-tertiary); font-weight: var(--fw-medium); }
.r-steps__item.is-complete { color: var(--color-success); }
.r-steps__item.is-current  { color: var(--color-primary); font-weight: var(--fw-bold); }
.r-steps__dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-12); font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.r-steps__item.is-complete .r-steps__dot { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.r-steps__item.is-current  .r-steps__dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.r-steps__bar { flex: 1; height: 2px; background: var(--border-subtle); min-width: 24px; }
.r-steps__label { white-space: nowrap; }

/* ════════════════════════════════════════
   PRICE SUMMARY  (r-summary)
════════════════════════════════════════ */
.r-summary { }
.r-summary__head  { margin-bottom: var(--space-3); }
.r-summary__title { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-primary); margin: 0; }
.r-summary__body  { display: flex; flex-direction: column; gap: 0; }
.r-summary__line  { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-14); }
.r-summary__line:last-of-type { border-bottom: none; }
.r-summary__line-label { color: var(--text-secondary); }
.r-summary__line-label small { display: block; font-size: var(--fs-12); color: var(--text-tertiary); }
.r-summary__line-value { font-weight: var(--fw-medium); color: var(--text-primary); }
.r-summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-3) 0 0;
  margin-top: var(--space-2);
  border-top: 2px solid var(--border-default);
}
.r-summary__total-label { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text-primary); }
.r-summary__total-value { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--text-primary); }
.r-summary__note  { font-size: var(--fs-12); color: var(--text-tertiary); margin-top: var(--space-2); }

/* ════════════════════════════════════════
   SEARCH FORM WIDGET
════════════════════════════════════════ */
.r-search-widget {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

/* Trip type toggle */
.r-trip-toggle { display: flex; margin-bottom: var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; width: fit-content; }
.r-trip-toggle__label {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 20px;
  font-size: var(--fs-14); font-weight: var(--fw-medium);
  cursor: pointer; color: var(--text-secondary);
  background: var(--surface-card);
  transition: all var(--t);
  user-select: none;
}
.r-trip-toggle__label input[type="radio"] { display: none; }
.r-trip-toggle__label:has(input:checked),
.r-trip-toggle__label.is-active { background: var(--color-primary); color: #fff; }

/* Search row — Google Flights style: all fields on one horizontal bar */
.r-search-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  flex-wrap: nowrap;
}
.r-search-field       { display: flex; flex-direction: column; gap: var(--space-1); }
.r-search-field--airport { flex: 2 1 200px; min-width: 160px; }
.r-search-field--date    { flex: 1 1 140px; min-width: 130px; }
.r-search-field--pax     { flex: 1 1 160px; min-width: 150px; }
.r-search-field--cabin   { flex: 1 1 140px; min-width: 130px; }
.r-search-field--btn     { flex: 0 0 auto; }
.r-field-label-upper { font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: var(--space-1); }

/* Swap button */
.r-swap-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); flex-shrink: 0;
  align-self: flex-end; margin-bottom: 2px;
  transition: all var(--t);
}
.r-swap-btn:hover { border-color: var(--color-primary); color: var(--color-primary); transform: rotate(180deg); }

/* Airport typeahead */
.r-typeahead { position: relative; }
.r-typeahead__input { cursor: text; }
.r-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 280px; max-height: 300px; overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 500;
}
.r-dropdown__item {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-4);
  cursor: pointer; gap: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t);
}
.r-dropdown__item:last-child { border-bottom: none; }
.r-dropdown__item:hover, .r-dropdown__item.focused { background: var(--revie-blue-50); }
.r-dropdown__name { font-size: var(--fs-14); color: var(--text-primary); font-weight: var(--fw-medium); }
.r-dropdown__country { font-size: var(--fs-12); color: var(--text-tertiary); margin-top: 1px; }
.r-dropdown__code { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--color-primary); flex-shrink: 0; }
.r-dropdown__empty { padding: var(--space-4); font-size: var(--fs-14); color: var(--text-tertiary); text-align: center; }

/* Passenger dropdown (Google Flights style) */
.r-pax-trigger {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 15px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--fs-15);
  color: var(--text-primary); background: var(--surface-card);
  transition: border-color var(--t);
  user-select: none;
}
.r-pax-trigger:hover { border-color: var(--color-primary); }
.r-pax-trigger__chevron { color: var(--text-tertiary); font-size: 12px; }
.r-pax-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  min-width: 260px; z-index: 400;
}
.r-pax-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.r-pax-row:last-of-type { border-bottom: none; }
.r-pax-row__info strong { display: block; font-size: var(--fs-14); color: var(--text-primary); }
.r-pax-row__info small  { font-size: var(--fs-12); color: var(--text-tertiary); }
.r-pax-stepper { display: flex; align-items: center; gap: var(--space-3); }
.r-pax-stepper__btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: var(--surface-card); cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: all var(--t);
}
.r-pax-stepper__btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.r-pax-stepper__btn:disabled { opacity: .4; cursor: not-allowed; }
.r-pax-stepper__val { font-size: var(--fs-16); font-weight: var(--fw-bold); min-width: 20px; text-align: center; }
.r-pax-panel__done { width: 100%; margin-top: var(--space-3); }

/* Advanced options */
.r-adv-toggle { margin-top: var(--space-3); }
.r-adv-link { background: none; border: none; color: var(--color-primary); font-size: var(--fs-13); cursor: pointer; padding: 0; font-family: var(--font-sans); }
.r-adv-link:hover { text-decoration: underline; }
.r-adv-panel { margin-top: var(--space-3); padding: var(--space-4); background: var(--neutral-50); border-radius: var(--radius-md); display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

/* ════════════════════════════════════════
   LOADER OVERLAY
════════════════════════════════════════ */
.r-loader-overlay {
  position: fixed; inset: 0;
  background: rgba(14,19,24,0.55);
  backdrop-filter: blur(3px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.r-loader-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-12);
  text-align: center;
  min-width: 280px;
  box-shadow: var(--shadow-lg);
}
.r-loader-plane {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  animation: r-soar 1.8s ease-in-out infinite;
}
@keyframes r-soar {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(4deg); }
}
.r-loader-msg { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-2); }
.r-loader-sub { font-size: var(--fs-13); color: var(--text-tertiary); margin-bottom: var(--space-5); }
.r-loader-bar { height: 4px; background: var(--neutral-100); border-radius: var(--radius-pill); overflow: hidden; }
.r-loader-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); animation: r-progress 2.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes r-progress { 0%{width:0;transform:translateX(-100%)} 100%{width:100%;transform:translateX(350%)} }

/* ════════════════════════════════════════
   FLIGHT RESULT CARDS
════════════════════════════════════════ */
.r-result-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.r-result-count { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--text-primary); }

/* Sort + filter bar */
.r-sort-tabs  { display: flex; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.r-sort-tab   { padding: 7px 16px; font-size: var(--fs-13); font-weight: var(--fw-medium); border: none; background: var(--surface-card); color: var(--text-secondary); cursor: pointer; border-right: 1px solid var(--border-subtle); font-family: var(--font-sans); transition: all var(--t); }
.r-sort-tab:last-child { border-right: none; }
.r-sort-tab.is-active { background: var(--color-primary); color: #fff; }
.r-sort-tab:hover:not(.is-active) { background: var(--neutral-50); }
.r-filter-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.r-chip { padding: 5px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-default); background: var(--surface-card); font-size: var(--fs-13); color: var(--text-secondary); cursor: pointer; transition: all var(--t); font-family: var(--font-sans); }
.r-chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.r-chip:hover:not(.is-active) { border-color: var(--color-primary); color: var(--color-primary); }

/* Flight card */
.r-flight-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
  transition: box-shadow var(--t), transform var(--t);
  overflow: hidden;
}
.r-flight-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.r-flight-card--hidden { display: none; }
.r-flight-card--filtered { display: none; }

/* Card main row */
.r-flight-main { display: flex; align-items: stretch; }

/* Leg (flight route display) */
.r-leg { flex: 1; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.r-leg + .r-leg { border-top: 1px dashed var(--border-subtle); }
.r-leg-row { display: flex; align-items: center; gap: var(--space-4); }
.r-leg-point { text-align: center; min-width: 64px; flex-shrink: 0; }
.r-leg-point__time { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1; }
.r-leg-point__code { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--color-primary); }
.r-leg-point__city { font-size: var(--fs-12); color: var(--text-tertiary); margin-top: 2px; }
.r-leg-point__date { font-size: var(--fs-11, 0.6875rem); color: var(--text-tertiary); }
.r-leg-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.r-airline-strip { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-12); color: var(--text-tertiary); font-weight: var(--fw-medium); }
.r-airline-logo  { height: 14px; width: auto; max-width: 36px; object-fit: contain; }
.r-leg-dur { font-size: var(--fs-12); color: var(--text-tertiary); font-weight: var(--fw-medium); }
.r-leg-line { position: relative; width: 100%; height: 16px; display: flex; align-items: center; }
.r-leg-line::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--border-default); }
.r-leg-plane { position: absolute; left: 50%; transform: translateX(-50%); background: var(--surface-card); padding: 0 4px; color: var(--color-primary); font-size: 13px; }
.r-leg-stops { font-size: var(--fs-12); }
.r-leg-stops--direct { color: var(--color-success); font-weight: var(--fw-bold); }
.r-leg-stops--warn   { color: var(--color-warning); font-weight: var(--fw-bold); }

/* Return divider */
.r-return-label { font-size: var(--fs-11, 0.6875rem); font-weight: var(--fw-bold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-2) var(--space-5); background: var(--neutral-25); border-top: 1px dashed var(--border-subtle); border-bottom: 1px dashed var(--border-subtle); }

/* Price column */
.r-flight-price {
  flex: 0 0 190px;
  border-left: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--space-4);
  gap: var(--space-2); text-align: center;
}
.r-price-amount { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--text-primary); }
.r-price-sub    { font-size: var(--fs-12); color: var(--text-tertiary); }
.r-price-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }

/* Expanded details — compact TravelBank/Wakanow style */
.r-flight-details {
  border-top: 1px solid var(--border-subtle);
  background: var(--neutral-25);
  padding: var(--space-4) var(--space-5);
}
.r-seg-list { display: flex; flex-direction: column; gap: var(--space-2); }
.r-seg {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.r-seg-row {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center; gap: var(--space-3);
}
.r-seg-ep { text-align: center; }
.r-seg-ep__time { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--text-primary); }
.r-seg-ep__code { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--color-primary); }
.r-seg-ep__city { font-size: var(--fs-11, 0.6875rem); color: var(--text-tertiary); }
.r-seg-ep__date { font-size: var(--fs-11, 0.6875rem); color: var(--text-tertiary); }
.r-seg-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.r-seg-mid__line { width: 100%; height: 1px; background: var(--border-default); position: relative; }
.r-seg-mid__dur  { font-size: var(--fs-12); color: var(--text-tertiary); }
.r-seg-meta { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--border-subtle); display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-12); color: var(--text-tertiary); }
.r-seg-meta span { display: flex; align-items: center; gap: 4px; }
.r-layover { text-align: center; padding: var(--space-2) 0; font-size: var(--fs-12); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.r-layover--short { color: var(--color-warning); }
.r-layover__icon  { font-size: 14px; }
.r-seg-group-label { font-size: var(--fs-11, 0.6875rem); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: var(--space-2); }

/* ════════════════════════════════════════
   FARE RULES MODAL
════════════════════════════════════════ */
.r-modal-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.r-modal-backdrop { position: fixed; inset: 0; background: rgba(14,19,24,0.6); backdrop-filter: blur(4px); z-index: 8999; }
.r-modal {
  background: var(--surface-card); border-radius: var(--radius-xl);
  width: 100%; max-width: 640px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); position: relative; z-index: 9001;
  animation: r-modal-in 0.2s ease;
}
@keyframes r-modal-in { from { opacity:0; transform:scale(.96) translateY(12px); } to { opacity:1; transform:none; } }
.r-modal__header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.r-modal__title  { font-size: var(--fs-18); font-weight: var(--fw-bold); margin: 0; color: var(--text-primary); }
.r-modal__close  { background: var(--neutral-100); border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background var(--t); }
.r-modal__close:hover { background: var(--neutral-200); }
.r-modal__body   { overflow-y: auto; padding: var(--space-5) var(--space-6); flex: 1; }

/* Fare rule accordion */
.r-fr-summary { background: var(--revie-blue-50); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.r-fr-summary h4 { font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); margin-bottom: var(--space-2); }
.r-fr-summary ul { padding-left: var(--space-4); font-size: var(--fs-13); }
.r-fr-summary li { margin-bottom: var(--space-1); }
.r-fr-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); }
.r-fr-route { font-weight: var(--fw-bold); margin-bottom: var(--space-2); font-size: var(--fs-15); }
.r-fr-iata { color: var(--color-primary); }
.r-fr-airline { font-size: var(--fs-13); color: var(--text-tertiary); margin-bottom: var(--space-3); }
.r-fr-cat { border-bottom: 1px solid var(--border-subtle); }
.r-fr-cat:last-child { border-bottom: none; }
.r-fr-cat-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; background: none; border: none; cursor: pointer; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text-primary); font-family: var(--font-sans); text-align: left; }
.r-fr-cat-btn:hover { color: var(--color-primary); }
.r-fr-chevron { font-size: 14px; color: var(--text-tertiary); transition: transform var(--t); }
.r-fr-cat-btn[aria-expanded="true"] .r-fr-chevron { transform: rotate(90deg); }
.r-fr-cat-body { font-size: var(--fs-13); color: var(--text-tertiary); padding-bottom: var(--space-3); line-height: 1.6; }
.r-fr-empty { text-align: center; color: var(--text-tertiary); font-size: var(--fs-14); padding: var(--space-6); }

/* ════════════════════════════════════════
   RECENT SEARCHES
════════════════════════════════════════ */
.r-recent { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.r-recent__label { font-size: var(--fs-12); color: var(--text-tertiary); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.r-recent-chip { padding: 4px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); font-size: var(--fs-13); color: var(--text-secondary); cursor: pointer; transition: all var(--t); font-family: var(--font-sans); }
.r-recent-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ════════════════════════════════════════
   LAYOUT UTILITIES
════════════════════════════════════════ */
.r-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.r-page-body  { padding: var(--space-6) 0 var(--space-16); }
.r-grid  { display: grid; gap: var(--space-4); }
.r-grid--2 { grid-template-columns: repeat(2, 1fr); }
.r-grid--3 { grid-template-columns: repeat(3, 1fr); }
.r-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ════════════════════════════════════════
   RESPONSIVE — Mobile-first
════════════════════════════════════════ */

/* Tablet: 900px and below */
@media (max-width: 900px) {
  .r-flight-main { flex-direction: column; }
  .r-flight-price {
    flex: none; border-left: none; border-top: 1px solid var(--border-subtle);
    flex-direction: row; flex-wrap: wrap; justify-content: space-between;
    align-items: center; padding: var(--space-3) var(--space-4); gap: var(--space-3);
  }
  .r-price-amount { font-size: var(--fs-18); }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
  /* Container no horizontal overflow */
  .r-container { overflow-x: hidden; }

  /* Search widget: everything stacks, full width, no overflow */
  .r-search-widget { padding: var(--space-4); }
  .r-search-row {
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    overflow: hidden;
  }
  /* ALL search field wrappers go full width */
  .r-search-field,
  .r-search-field--airport,
  .r-search-field--date,
  .r-search-field--pax,
  .r-search-field--cabin,
  .r-search-field--btn,
  .r-search-dates-row,
  .r-search-pax-cabin-row {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Within dates row: side by side, each half width */
  .r-search-dates-row {
    display: flex !important;
    gap: var(--space-2);
  }
  .r-search-dates-row .r-search-field--date {
    flex: 1 !important;
    width: auto !important;
  }
  /* Within pax+cabin row: side by side */
  .r-search-pax-cabin-row {
    display: flex !important;
    gap: var(--space-2);
  }
  .r-search-pax-cabin-row .r-search-field--pax,
  .r-search-pax-cabin-row .r-search-field--cabin {
    flex: 1 !important;
    width: auto !important;
  }
  /* Date inputs must not overflow */
  .r-input[type="date"] { width: 100%; min-width: 0; }
  /* Search button full width */
  .r-search-field--btn { align-self: stretch !important; }
  .r-search-field--btn .r-btn { width: 100%; height: 48px; font-size: var(--fs-16); }

  /* Swap button rotated for vertical layout */
  .r-swap-btn { align-self: center; transform: rotate(90deg); }
  .r-swap-btn:hover { transform: rotate(270deg); }

  /* Pax panel: full-width bottom sheet on mobile */
  .r-pax-panel {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 80vh; overflow-y: auto;
    padding: var(--space-6);
    z-index: 600;
    box-shadow: 0 -4px 24px rgba(14,19,24,0.15);
  }
  /* Dropdown: bottom sheet on mobile */
  .r-dropdown {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    max-height: 60vh; overflow-y: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: 700;
    box-shadow: 0 -4px 24px rgba(14,19,24,0.15);
  }

  /* Result bar: stack on mobile */
  .r-result-bar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .r-sort-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .r-sort-tab { flex: 1; text-align: center; }
  .r-filter-chips { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: var(--space-1); }

  /* Flight card legs on mobile */
  .r-leg { padding: var(--space-3) var(--space-4); }
  .r-leg-row { gap: var(--space-2); }
  .r-leg-point { min-width: 54px; }
  .r-leg-point__time { font-size: var(--fs-18); }

  /* Flight price row on mobile: horizontal */
  .r-flight-price { gap: var(--space-2); }

  /* Modal: full screen on mobile */
  .r-modal { max-width: 100% !important; max-height: 100vh; border-radius: 0; }
  .r-modal-overlay { padding: 0; align-items: flex-end; }

  /* Segment detail more compact */
  .r-seg-row { grid-template-columns: 52px 1fr 52px; gap: var(--space-2); }
  .r-seg-ep__time { font-size: var(--fs-15); }
  .r-flight-details { padding: var(--space-3); }
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
  .r-container { padding: 0 var(--space-3); }
  .r-search-widget { padding: var(--space-3); border-radius: var(--radius-lg); }
  .r-card { padding: var(--space-4); }
  .r-price-amount { font-size: var(--fs-16); }
  .r-trip-toggle__label { padding: 8px 14px; font-size: var(--fs-13); }
}