/* Mayfair Jets brand palette, verified on mayfairjets.com, 29 October 2026. */
:root {
  --primary: #6b4691;
  --primary-dark: #50316f;
  --secondary: #92408b;
  --brand-light: #a382bc;
  --brand-wash: #f4eff8;
  --brand-border: #e5daed;
  --navy: #6b4691;
  --navy-deep: #50316f;
  --gold: #92408b;
  --gold-dark: #76336f;
  --gold-pale: #f2e9f5;
  --paper: #f7f4fa;
  --ink: #444444;
  --muted: #797180;
  --line: #e8e1ed;
  --green: #466f61;
}

body { background: var(--paper); color: var(--ink); }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline-color: var(--secondary); }
.preview-bar { background: #eee7f3; color: #665476; font-size: 11px; }
.site-header {
  background: linear-gradient(110deg, #343658 0%, #624784 54%, #92408b 100%);
  border-bottom: 1px solid #ffffff24;
}
.header-inner { height: 77px; }
.brand small, .header-inner nav { color: #eee7f4; }
.header-inner nav a { font-size: 12px; }
.header-inner nav a:hover, .header-inner nav .active { border-bottom-color: #efc7ee; }
.header-help { color: #f3eaf6; }
.header-help .icon, .header-help small { color: white; }
.search-hero { background: #fff; color: var(--ink); padding: 23px 0 21px; border-bottom: 1px solid var(--line); }
.hero-top { margin-bottom: 15px; align-items: center; }
.hero-top h1 { font-size: 29px; color: #3f2c50; }
.hero-top h1 > span { color: var(--secondary); margin: 0 12px; }
.hero-top .gold, .eyebrow.gold { color: var(--secondary); }
.hero-subtitle { color: #82768c; font-size: 12px; margin-top: 9px; }
.hero-subtitle > span { color: #a59aaf; }
.hero-note { color: #82758b; font-size: 11px; }
.hero-note .icon { color: var(--primary); }
.search-form { border: 1px solid var(--brand-border); box-shadow: 0 3px 15px #6b469106; border-radius: 9px; }
.field-label { color: #81758c; font-size: 10px; }
.search-field select, .field-value { font-size: 13px; }
.field-value .icon { color: var(--primary); }
.swap-button { color: #8b719b; border-color: var(--brand-border); }
.search-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; border: 0; border-bottom: 2px solid var(--secondary); background: #fff;
  padding: 11px 0; margin: 0 0 14px; font-size: 12px; font-weight: 650; color: var(--primary);
}
.search-toggle .icon { width: 16px; height: 16px; }
.search-hero.collapsed .hero-top { margin-bottom: 0; }
.search-error { color: #933e76; background: #f8edf4; padding: 11px 13px; border-radius: 6px; }
.button { border-radius: 7px; font-size: 12px; min-height: 44px; }
.gold-button, .primary-button { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.gold-button:hover, .primary-button:hover { background: #7e3478; border-color: #7e3478; }
.navy-button { background: var(--primary); color: #fff; }
.navy-button:hover { background: var(--primary-dark); }
.outline-button { color: var(--primary); border-color: #d8c9e3; }
.outline-button:hover { color: var(--primary-dark); background: #f6effa; border-color: #b196c5; }
.text-button { color: var(--secondary); }
.main-content { padding-top: 0; padding-bottom: 44px; }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; align-items: start; }
.booking-primary { min-width: 0; }

/* Six-step journey mirrors the supplier flow while staying in FLYMFJ. */
.booking-primary .journey-steps, #bookingSteps {
  width: 100%; height: auto; min-height: 113px; padding: 24px 0 20px;
  margin: 0; border: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 0;
}
.step-button {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 10px; border: 0; padding: 0 3px; background: transparent; color: #9b87ac;
  font-size: 11px; font-weight: 650; text-align: center; min-width: 0;
}
.step-button:not(:last-child)::after {
  content: ''; position: absolute; height: 1px; width: 100%; top: 21px; left: 50%;
  background: #cfb9df; z-index: 0;
}
.step-icon {
  width: 43px; height: 43px; flex-shrink: 0; border-radius: 50%; background: #e5d9ef;
  color: #85669e; display: grid; place-items: center; position: relative; z-index: 1;
  border: 3px solid var(--paper); transition: background .15s, color .15s;
}
.step-icon .icon { width: 19px; height: 19px; stroke-width: 1.8; }
.step-number { display: none; }
.step-name { display: block; line-height: 1.5; max-width: 112px; min-height: 17px; }
.step-button.current, .step-button[aria-current="step"] { color: var(--secondary); }
.step-button.current .step-icon, .step-button[aria-current="step"] .step-icon { background: var(--secondary); color: #fff; }
.step-button.step-complete, .step-button.completed { color: var(--primary); }
.step-button.step-complete .step-icon, .step-button.completed .step-icon { background: var(--primary); color: #fff; }
.step-button:disabled { opacity: 1; cursor: default; }
.step-button:not(:disabled):hover .step-icon { box-shadow: 0 0 0 3px #92408b1a; }
.journey-steps > i { display: none; }

.week-navigation { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 3px 0 13px; }
.week-navigation h2, .week-navigation h3 { margin: 0; font: 700 18px/1.4 var(--heading); color: #46324f; letter-spacing: -.4px; }
.week-navigation button { display: inline-flex; gap: 5px; align-items: center; border: 0; background: none; color: var(--primary); font-size: 11px; padding: 6px 0; }
.week-navigation button .icon { width: 16px; height: 16px; }
.week-navigation .reverse, #previousWeek .icon { transform: rotate(180deg); }
.date-section { padding: 6px; gap: 7px; border-radius: 9px; border-color: var(--brand-border); margin-bottom: 18px; background: #fff; }
.date-strip { min-width: 0; }
.day-button { color: #7b6a87; font-size: 10px; padding: 12px 6px; min-height: 72px; gap: 10px; }
.day-button strong { font-size: 12px; color: #8b7d94; font-weight: 500; }
.day-button.selected { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.day-button.selected strong { color: #fff; font-weight: 700; }
.day-button.selected::after { background: #efd5ed; }
.day-button:hover:not(.selected) { background: #f4edf8; }
.calendar-button { min-width: 82px; padding: 10px 11px; color: var(--primary); background: #f3edf7; font-size: 10px; }
.calendar-button .icon { color: var(--primary); }
.calendar-button:hover { background: #e9dff1; }

/* Filters stay available without competing with the reservation column. */
.content-grid { display: block; }
.filters { margin-bottom: 21px; }
.filter-title { display: none; }
.mobile-filter-toggle { display: flex; border: 1px solid var(--brand-border); background: #fff; width: 100%; min-height: 38px; padding: 9px 13px; border-radius: 7px; gap: 8px; align-items: center; color: var(--primary); font-size: 11px; }
.mobile-filter-toggle .icon { width: 16px; height: 16px; }
.mobile-filter-toggle .chevron { margin-left: auto; transform: rotate(90deg); }
.filters.open .mobile-filter-toggle { border-radius: 7px 7px 0 0; border-bottom-color: transparent; }
.filters.open .mobile-filter-toggle .chevron { transform: rotate(-90deg); }
.filter-body { display: none; }
.filters.open .filter-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 23px; padding: 0 18px 12px; background: #fff; border: 1px solid var(--brand-border); border-top: 0; border-radius: 0 0 7px 7px; }
.filter-body fieldset { padding: 15px 0; }
.filter-body legend { font-size: 11px; margin-bottom: 12px; }
.check-row { color: #6d6076; font-size: 11px; }
.check-row input, .price-range { accent-color: var(--primary); }
.filter-number { color: #8e8099; }
.price-range-label, .range-ends { color: #887892; }
.time-filters button { color: #6c577e; font-size: 10px; border-color: #e4d9eb; padding: 8px 4px; }
.time-filters button span { color: #9273a5; }
.time-filters button small { color: #867492; font-size: 8px; }
.time-filters button[aria-pressed="true"] { background: #f0e7f7; border-color: #ac88c5; }
.help-card { display: none; }
.results-heading { margin-bottom: 15px; }
.results-heading .eyebrow { color: var(--secondary); font-size: 10px; }
.results-heading h2 { font-size: 22px; color: #46324f; }
.result-count { color: #8b7c96; font-size: 11px; }
.sort-options { background: #ede6f2; }
.sort-options button { font-size: 11px; color: #8a7698; padding: 8px 13px; }
.sort-options button.selected { color: var(--primary); background: #fff; }
.local-times { color: #8a7e92; font-size: 10px; }
.flight-card { border-color: var(--brand-border); border-radius: 10px; box-shadow: 0 4px 17px #6b469105; }
.fare-area { border-top: 0; border-bottom: 1px solid var(--brand-border); background: #fff; padding: 16px; }
.fare-area-head { margin-bottom: 16px; }
.fare-area-head h3 { font-size: 12px; color: var(--primary); }
.fare-area-head span { font-size: 10px; color: #8b7c95; }
.fare-grid { gap: 11px; }
.fare-card {
  background: var(--primary); border: 1px solid var(--primary); border-radius: 7px;
  padding: 17px 14px 14px; color: #fff; box-shadow: 0 3px 8px #6b469116;
  display: flex; flex-direction: column; gap: 0;
}
.fare-card:nth-child(1) { background: #77438f; border-color: #77438f; }
.fare-card:nth-child(3) { background: #81609e; border-color: #81609e; }
.fare-card.selected { background: #69347f; border-color: #92408b; box-shadow: 0 0 0 2px #92408b, 0 5px 12px #92408b22; }
.fare-card .recommended-label { color: #f6dff6; font-size: 8px; letter-spacing: .5px; margin: 0 0 8px; min-height: 11px; }
.fare-name { color: #fff; font-size: 15px; margin-bottom: 14px; }
.fare-price { color: #fff; font-size: 23px; letter-spacing: -.6px; margin-bottom: 4px; }
.fare-price small { color: #eadcef; font-size: 10px; }
.fare-price-note { color: #e2d4eb; font-size: 10px; margin-bottom: 18px; }
.fare-features { color: #f0e6f5; font-size: 11px; line-height: 1.7; gap: 10px; }
.fare-features strong { color: #fff; font-weight: 650; }
.fare-features .icon { color: #e9daee; width: 14px; height: 14px; }
.fare-card .select-fare { background: #fff; color: var(--primary); border-color: #fff; font-size: 11px; min-height: 36px; margin-top: 3px; }
.fare-card .select-fare:hover { background: #f5eafa; }
.fare-card.selected .select-fare { background: var(--secondary); color: #fff; border-color: #d3a0ce; }
.flight-card-top { padding: 20px; }
.flight-brand-row { margin-bottom: 20px; }
.airline-name { font-size: 13px; }
.airline-subtitle { color: #8c7d95; font-size: 10px; }
.airline-logo { background: #f3eaf6; color: var(--secondary); }
.flight-badge { background: #eee8f5; color: var(--primary); font-size: 10px; }
.itinerary { gap: 20px; }
.time { color: #41304f; font-size: 28px; }
.airport-code { font-size: 12px; color: #514259; }
.city-name { font-size: 11px; color: #86758f; }
.flight-path { color: #8e7e99; font-size: 11px; }
.path-line { color: #9c80b2; }
.path-line::before { border-color: #cdbada; }
.path-line::after { border-color: #baa1cb; }
.flight-path > .direct-label { color: var(--primary); font-size: 10px; }
.from-price small, .from-price span:last-child { color: #8e7c99; font-size: 10px; }
.from-price strong { color: #4a305e; }
.flight-bottom { border-color: #eee6f3; margin-top: 18px; }
.details-link { color: var(--primary); font-size: 11px; }
.compare-toggle { font-size: 11px; }
.fare-option-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.fare-price-option { border: 1px solid #e3d7eb; background: #fff; border-radius: 6px; padding: 13px 9px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--primary); font-size: 11px; line-height: 1.4; min-width: 0; }
.fare-price-option strong { font: 750 16px var(--heading); color: #41304f; }
.fare-price-option small { font-size: 10px; color: #85708f; }
.fare-price-option:hover { background: #f6eef9; border-color: #c2a5d3; }
.fare-price-option.selected, .fare-price-option[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.fare-price-option.selected strong, .fare-price-option[aria-pressed="true"] strong,
.fare-price-option.selected small, .fare-price-option[aria-pressed="true"] small { color: #fff; }
.results-footnote { color: #887a93; }
.results-footnote p { font-size: 10px; }
.booking-summary { border-color: #cbb3dd; background: #fff; }
.booking-summary .eyebrow { color: var(--secondary); }
.booking-summary p, .summary-price span { color: #867491; font-size: 11px; }
.summary-price strong { color: #49305d; }
.trust-row { color: #8b7d95; font-size: 10px; }
.trust-row .icon { color: var(--primary); }

/* The booking stays visible as the customer moves through the six stages. */
.reservation-sidebar { position: sticky; top: 24px; margin-top: 24px; background: #fff; border: 1px solid #e2d6eb; border-radius: 11px; overflow: hidden; box-shadow: 0 6px 22px #6b469106; }
.reservation-head { background: var(--primary); color: #fff; padding: 20px 21px; }
.reservation-head h2, .reservation-head h3 { font: 700 15px var(--heading); margin: 0; }
.reservation-head > span { display: block; color: #e2d1ed; font-size: 11px; margin-top: 7px; }
.reservation-head p, .reservation-head small { color: #e2d1ed; font-size: 11px; line-height: 1.6; margin: 7px 0 0; }
.reservation-body { padding: 21px; }
.reservation-route { font: 750 20px/1.5 var(--heading); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #4d3264; }
.reservation-route .icon { width: 22px; height: 22px; color: #a183b8; }
.reservation-route span { min-width: 0; }
.reservation-route small { display: block; font: 400 11px/1.6 var(--font); color: #8c7b96; }
.reservation-route h3 { font: 750 18px/1.5 var(--heading); margin: 0; color: #4d3264; }
.reservation-query > p { color: #8c7b96; font-size: 11px; line-height: 1.8; margin: 9px 0 0; }
.reservation-flight { padding: 18px 0; margin: 16px 0 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.8; color: #7e6c8b; }
.reservation-flight strong { color: #493651; font-weight: 650; }
.reservation-flight p { margin: 5px 0; }
.reservation-flight .icon { width: 16px; height: 16px; color: var(--primary); }
.reservation-totals { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 15px; display: flex; flex-direction: column; gap: 10px; }
.reservation-totals > div, .reservation-totals > p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-size: 11px; color: #8a7896; }
.reservation-totals strong { font-weight: 600; color: #54435f; }
.reservation-total { border-top: 1px solid var(--line); margin-top: 6px!important; padding-top: 15px; }
.reservation-totals .reservation-total { font-size: 12px; color: #594363; }
.reservation-total strong { font: 750 22px var(--heading); letter-spacing: -.5px; color: #4b315e; }
#sidebarContinue { width: 100%; margin-top: 20px; min-height: 44px; font-size: 12px; }
.summary-status { color: #8e7c99; font-size: 10px; line-height: 1.8; margin: 12px 0 0; }
.reservation-support { border-top: 1px solid var(--line); padding-top: 15px; margin: 17px 0 0; color: #927c9e; font-size: 10px; line-height: 1.9; }
.reservation-support a { color: var(--primary); font-weight: 650; }
.reservation-empty { padding: 18px 0 7px; color: #8a7995; font-size: 12px; line-height: 1.9; }

/* Shared form and service styling for each subsequent step. */
.flow-panel { min-width: 0; padding-top: 7px; }
.flow-card { background: #fff; border: 1px solid var(--brand-border); border-radius: 10px; padding: 27px; margin-bottom: 18px; }
.flow-card h2 { margin: 0 0 12px; color: #49305c; font: 750 24px/1.4 var(--heading); letter-spacing: -.6px; }
.flow-card h3 { font: 700 15px/1.5 var(--heading); color: #50365f; margin: 0 0 15px; }
.flow-card-head { padding-bottom: 23px; margin-bottom: 23px; border-bottom: 1px solid var(--line); }
.flow-card-head .flow-title { margin-bottom: 9px; }
.flow-card-head p { color: #907b9c; font-size: 12px; line-height: 1.9; margin: 0; }
.flow-traveller { border: 0; padding: 0; margin: 0 0 22px; }
.flow-traveller legend { padding: 0; margin-bottom: 18px; font: 700 14px var(--heading); color: #624274; }
.flow-traveller legend span { margin-left: 8px; font: 400 11px var(--font); color: #a089ad; }
.flow-card > p { color: #84718f; font-size: 12px; line-height: 1.9; margin: 0 0 22px; }
.flow-eyebrow { color: var(--secondary); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; margin: 0 0 11px; }
.flow-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 20px; }
.flow-grid2 label, .flow-card .form-field { display: flex; flex-direction: column; gap: 9px; font-size: 12px; line-height: 1.6; color: #715d7d; }
.flow-grid2 .full-width, .flow-grid2 .span-2 { grid-column: 1 / -1; }
.form-input, .form-select, .flow-card input:not([type="checkbox"]):not([type="radio"]), .flow-card select, .flow-card textarea { width: 100%; min-height: 44px; border: 1px solid #ded1e7; border-radius: 6px; padding: 11px 12px; color: #483551; background: #fff; font-size: 13px; outline-offset: 2px; }
.form-input::placeholder, .flow-card input::placeholder { color: #b09dbb; }
.flow-card input:focus, .flow-card select:focus, .flow-card textarea:focus { border-color: #ad82c6; }
.flow-card textarea { min-height: 94px; resize: vertical; }
.field-error { color: #a13d6e; font-size: 11px; line-height: 1.7; margin: 5px 0 0; }
.flow-card [aria-invalid="true"] { border-color: #ae4b7d!important; background: #fff9fc!important; }
.stage-note { background: #f5eff9; border: 1px solid #e8dcee; color: #816b90; border-radius: 7px; padding: 13px 15px; font-size: 11px; line-height: 1.9; margin: 20px 0 0; display: flex; align-items: flex-start; gap: 10px; }
.stage-note .icon { width: 17px; height: 17px; margin-top: 2px; color: var(--primary); }
.stage-note p { margin: 0; }
.flow-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 8px; margin-bottom: 20px; }
.flow-actions .button { min-width: 135px; }
.flow-actions .button .icon { width: 16px; height: 16px; }
.flow-actions .text-button { font-size: 12px; }
.flow-actions > div { display: flex; align-items: center; gap: 18px; }
.service-options { display: grid; gap: 12px; }
.service-choice { display: flex; gap: 13px; align-items: flex-start; padding: 18px; border: 1px solid #e3d7ea; border-radius: 8px; background: #fff; cursor: pointer; }
.service-choice:has(input:checked) { border-color: #af84c7; background: #faf5fd; box-shadow: 0 0 0 1px #af84c7; }
.service-choice input { margin: 4px 0 0; width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.service-choice > span, .service-choice > div { flex: 1; min-width: 0; }
.service-choice strong { display: block; color: #563a66; font-size: 13px; line-height: 1.7; margin-bottom: 5px; }
.service-choice p, .service-choice small { display: block; color: #927c9f; font-size: 11px; line-height: 1.9; margin: 0; }
.service-choice > .icon { color: var(--primary); margin-top: 3px; }
.service-choice-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #f1e6f7; color: var(--primary); flex: 0 0 34px!important; }
.service-choice-icon .icon { width: 18px; height: 18px; }
.service-choice em { display: block; color: #a18aad; font-size: 10px; line-height: 1.8; font-style: normal; margin-top: 7px; }
.service-price { font-weight: 650; color: #785087; font-size: 11px; white-space: nowrap; }
.seat-map { max-width: 365px; margin: 25px auto; padding: 38px 25px 25px; border: 1px solid #dfd3e9; background: #faf7fc; border-radius: 95px 95px 24px 24px; }
.seat-row { display: grid; grid-template-columns: repeat(3, 1fr) 20px repeat(3, 1fr); gap: 7px; margin-bottom: 9px; align-items: center; }
.seat-row .aisle { display: grid; place-items: center; color: #aa95b8; font-size: 10px; }
.seat-button { width: 100%; aspect-ratio: .93; min-height: 35px; border: 1px solid #d0bbdf; border-radius: 7px 7px 10px 10px; background: #fff; color: #856398; font-size: 10px; font-weight: 600; box-shadow: inset 0 -3px 0 #eee5f3; }
.seat-button:hover { border-color: var(--secondary); background: #f4eaf7; }
.seat-button.selected, .seat-button[aria-pressed="true"] { background: var(--secondary); border-color: var(--secondary); color: #fff; box-shadow: inset 0 -3px 0 #742e70; }
.seat-button:disabled { background: #e9e3ed; color: #b3a7bb; border-color: #e0d7e6; box-shadow: none; }
.seat-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; font-size: 11px; color: #8d799a; margin-top: 20px; }
.seat-legend span { display: inline-flex; align-items: center; gap: 7px; }
.seat-legend i { width: 12px; height: 12px; border: 1px solid #ceb7de; border-radius: 3px; background: #fff; }
.seat-legend .selected { background: var(--secondary); border-color: var(--secondary); }
.seat-selection-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: start; gap: 25px; }
.seat-map-note { font-size: 11px; color: #967da3; line-height: 1.9; padding-top: 25px; }
.seat-map-note strong { color: #704786; }
.seat-label-row { display: grid; grid-template-columns: repeat(3, 1fr) 20px repeat(3, 1fr); gap: 7px; text-align: center; margin-bottom: 14px; color: #a489b5; font-size: 10px; }
.seat-row-number { font-size: 9px; color: #ab94b9; align-self: center; text-align: center; }
.details-block { border: 1px solid #e6dcec; border-radius: 8px; padding: 20px; margin: 16px 0; background: #fcfaff; }
.details-block h3 { margin-bottom: 12px; }
.details-block-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.details-block-heading h3 { margin: 0; }
.details-block-heading .text-button { font-size: 11px; }
.details-route { font: 700 18px/1.5 var(--heading); color: #654178; margin: 12px 0; }
.passenger-review { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.passenger-review li { color: #917b9f; font-size: 12px; line-height: 1.8; }
.passenger-review strong { color: #68457b; }
.optional-label { color: #aa93b5; font-size: 10px; font-weight: 400; margin-left: 5px; }
.review-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.review-list > div, .review-list > li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; color: #897494; font-size: 12px; line-height: 1.7; }
.review-list strong, .review-list dd { color: #54375f; font-weight: 600; margin: 0; text-align: right; overflow-wrap: anywhere; }
.review-list dt { color: #927b9e; }
.details-block .fare-features { color: #86708f; margin: 0; }
.details-block .fare-features strong { color: #5e436c; }
.details-block .fare-features .icon { color: var(--primary); }
.payment-preview { border: 1px solid #e4d7ec; border-radius: 9px; padding: 22px; background: #fcf9fe; }
.payment-preview h3 { margin-bottom: 14px; }
.payment-method { display: flex; align-items: center; gap: 12px; width: 100%; padding: 17px; margin-bottom: 10px; border: 1px solid #e0d1e8; border-radius: 7px; background: #fff; color: #8e789c; font-size: 12px; }
.payment-method .icon { color: #a489b5; }
.payment-method small { margin-left: auto; font-size: 10px; }
.payment-preview .button { width: 100%; margin-top: 14px; }
.payment-preview .button:disabled { opacity: .5; }
.payment-total { border-bottom: 1px solid var(--line); padding: 0 0 24px; margin-bottom: 23px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: baseline; }
.payment-total > span { font-size: 12px; color: #8d749b; }
.payment-total > strong { color: #56336b; font: 750 28px var(--heading); letter-spacing: -.7px; }
.payment-total > small { width: 100%; font-size: 11px; color: #a18aaa; line-height: 1.8; }
.payment-methods { display: grid; gap: 10px; }
.payment-methods .payment-method { margin-bottom: 0; }
.payment-boundary { margin: 20px 0 0; padding: 15px; border-radius: 7px; background: #f0e6f6; color: #8a6c9c; font-size: 11px; line-height: 1.9; }
.payment-security { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #917b9e; line-height: 1.8; margin-top: 16px; }
.payment-security .icon { color: var(--primary); width: 17px; }

.site-footer { background: #eee8f3; border-top-color: #e1d5ea; color: #8a7896; }
.footer-brand strong { color: var(--primary); }
.footer-brand span { color: #947da1; }
.footer-inner a:hover { color: var(--secondary); }
.empty-icon { background: #f1e6f7; color: var(--secondary); }
.empty-state { border-color: var(--brand-border); }
.empty-state h3 { color: #4c325f; }
.empty-state p { color: #8a7398; }
.spinner { border-color: #e4d5ee; border-top-color: var(--secondary); }
dialog { color: #493452; box-shadow: 0 30px 100px #39204b40; }
dialog::backdrop { background: #27163780; }
.dialog-top .eyebrow { color: var(--secondary); }
.dialog-top h2 { color: #513060; }
.icon-button { border-color: #e3d7eb; color: var(--primary); }
.icon-button:hover { background: #f4e9f9; border-color: #c5a7d7; }
.calendar-route { color: #917a9f; }
.month-nav h3 { color: var(--primary); }
.weekdays { color: #9a84a6; }
.calendar-day { background: #f8f4fb; color: #7d648e; }
.calendar-day small { color: #a995b5; }
.calendar-day.available { background: #efe4f6; border-color: #ddc9e9; }
.calendar-day.available small { color: var(--primary); }
.calendar-day.selected { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.calendar-day.selected small { color: #fff; }
.calendar-day:hover:not(:disabled) { border-color: #ad80c3; }
.calendar-legend { color: #967da4; }
.calendar-legend i { background: var(--primary); }
.calendar-notice { background: #f5eff9; color: #927a9f; }
.calendar-bottom { color: #674775; }
.timeline-path, .timeline-path span { color: var(--primary); border-color: #b594cb; }
.timeline-middle, .timeline-airport p, .detail-fare-rule { color: #90799c; }
.detail-fare-rule h3 { color: #5b3c6c; }
.review-trip { background: #f5edf9; }
.review-trip p { color: #8f749e; }
.review-note { background: #f4eaf8; }
.review-note .icon { color: var(--secondary); }
.review-note p { color: #886b96; }
.review-dialog .fare-features { color: #866e93; }
.review-dialog .fare-features strong { color: #533a62; }
.review-dialog .fare-features .icon { color: var(--primary); }
.noscript { background: #f2e6f8; color: #6b467e; }

@media (min-width: 1600px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
  .fare-card { padding: 20px 18px 17px; }
  .fare-features { font-size: 12px; }
}
@media (max-width: 1100px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr) 245px; gap: 20px; }
  .reservation-head, .reservation-body { padding: 18px; }
  .reservation-total strong { font-size: 19px; }
  .step-button { font-size: 10px; }
  .step-icon { width: 39px; height: 39px; }
  .step-button:not(:last-child)::after { top: 19px; }
  .fare-card { padding: 15px 11px 12px; }
  .fare-name { font-size: 13px; }
  .fare-price { font-size: 19px; }
  .fare-features { font-size: 10px; }
  .fare-option-strip { gap: 6px; }
  .fare-price-option strong { font-size: 14px; }
  .itinerary { grid-template-columns: 1fr 1fr 1fr; }
  .from-price { display: none; }
  .calendar-button { min-width: 68px; font-size: 9px; }
  .day-button { font-size: 9px; padding-inline: 3px; }
  .day-button strong { font-size: 10px; }
}
@media (max-width: 900px) {
  .booking-layout { grid-template-columns: 1fr; gap: 0; }
  .reservation-sidebar { position: static; margin-top: 0; margin-bottom: 26px; }
  .reservation-head { padding: 16px 20px; }
  .reservation-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; padding: 20px; }
  .reservation-route { align-self: start; max-width: 285px; }
  .reservation-flight { margin-top: 0; padding-top: 0; border-top: 0; }
  .reservation-totals { grid-column: 1; }
  #sidebarContinue { grid-column: 2; align-self: end; margin-top: 10px; }
  .summary-status { grid-column: 2; }
  .fare-name { font-size: 15px; }
  .fare-price { font-size: 23px; }
  .fare-features { font-size: 11px; }
  .filters.open .filter-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step-button { font-size: 11px; }
  .step-icon { width: 43px; height: 43px; }
  .step-button:not(:last-child)::after { top: 21px; }
  .week-navigation h2, .week-navigation h3 { font-size: 18px; }
  .itinerary { grid-template-columns: 1fr 1.25fr 1fr 1fr; }
  .from-price { display: block; }
}
@media (max-width: 650px) {
  .header-inner { height: 69px; }
  .search-hero { padding: 19px 0 18px; }
  .hero-top h1 { font-size: 24px; }
  .hero-top h1 > span { margin: 0 6px; }
  .hero-subtitle { font-size: 11px; }
  .search-toggle { font-size: 11px; }
  .booking-primary .journey-steps, #bookingSteps { min-height: 102px; padding: 21px 0 17px; }
  .step-button { font-size: 9px; gap: 8px; }
  .step-icon { width: 36px; height: 36px; border-width: 2px; }
  .step-icon .icon { width: 16px; height: 16px; }
  .step-button:not(:last-child)::after { top: 18px; }
  .step-name { max-width: 80px; line-height: 1.5; min-height: 27px; }
  .week-navigation { flex-wrap: wrap; gap: 7px 12px; }
  .week-navigation h2, .week-navigation h3 { font-size: 17px; }
  .week-navigation button { font-size: 10px; }
  .week-navigation > h2, .week-navigation > h3 { flex-basis: 100%; }
  .date-section { margin-bottom: 16px; }
  .date-strip { grid-template-columns: repeat(7, minmax(68px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .day-button { min-height: 67px; font-size: 10px; }
  .day-button strong { font-size: 10px; }
  .calendar-button { min-width: 60px; max-width: 60px; font-size: 9px; padding: 7px; }
  .filters { margin-bottom: 19px; }
  .filters.open .filter-body { grid-template-columns: 1fr 1fr; padding: 0 14px 10px; gap: 0 16px; }
  .sort-options button { font-size: 10px; padding: 8px 10px; }
  .results-heading h2 { font-size: 21px; }
  .fare-area { padding: 14px; }
  .fare-area-head h3 { font-size: 11px; }
  .fare-area-head span { font-size: 9px; }
  .fare-grid { grid-template-columns: 1fr; gap: 11px; }
  .fare-card { padding: 18px 16px; display: grid; grid-template-columns: 1fr auto; gap: 0 12px; }
  .fare-card .recommended-label { grid-column: 1/-1; min-height: 0; margin-bottom: 10px; font-size: 8px; }
  .fare-name { grid-column: 1; font-size: 15px; margin-bottom: 10px; }
  .fare-price { grid-column: 2; grid-row: 1/3; font-size: 23px; align-self: start; text-align: right; }
  .fare-card:has(.recommended-label) .fare-price { grid-row: 2/4; }
  .fare-price-note { grid-column: 2; grid-row: 3; font-size: 9px; text-align: right; margin-bottom: 0; }
  .fare-card:has(.recommended-label) .fare-price-note { grid-row: 4; }
  .fare-features { grid-column: 1; grid-row: 2/6; font-size: 11px; line-height: 1.8; gap: 7px; margin: 0; }
  .fare-card:has(.recommended-label) .fare-features { grid-row: 3/7; }
  .fare-features li:nth-child(n+4) { display: flex; }
  .fare-card .select-fare { grid-column: 2; grid-row: 5/7; align-self: end; min-width: 95px; margin-top: 15px; font-size: 11px; }
  .fare-card:has(.recommended-label) .select-fare { grid-row: 6/8; }
  .flight-card-top { padding: 18px 16px; }
  .airline-name { font-size: 12px; }
  .airline-subtitle { font-size: 10px; }
  .itinerary { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .time { font-size: 27px; }
  .from-price { display: none; }
  .flight-path { font-size: 10px; }
  .city-name { font-size: 10px; }
  .fare-option-strip { gap: 6px; margin-top: 17px; }
  .fare-price-option { font-size: 10px; padding: 11px 6px; gap: 7px; }
  .fare-price-option strong { font-size: 13px; }
  .fare-price-option small { font-size: 9px; }
  .flow-card { padding: 21px 18px; }
  .flow-card h2 { font-size: 22px; }
  .flow-card > p { font-size: 12px; }
  .flow-grid2 { grid-template-columns: 1fr; gap: 17px; }
  .flow-grid2 .full-width, .flow-grid2 .span-2 { grid-column: 1; }
  .form-input, .form-select, .flow-card input:not([type="checkbox"]):not([type="radio"]), .flow-card select { font-size: 14px; min-height: 46px; }
  .flow-actions { gap: 10px; }
  .flow-actions .button { min-width: 0; font-size: 11px; padding: 11px 15px; }
  .service-choice { padding: 16px 13px; gap: 10px; }
  .service-choice strong { font-size: 13px; }
  .service-price { white-space: normal; text-align: right; max-width: 90px; font-size: 10px; }
  .stage-note { font-size: 11px; padding: 12px; }
  .seat-map { padding: 34px 20px 22px; }
  .seat-row { gap: 6px; grid-template-columns: repeat(3, 1fr) 15px repeat(3, 1fr); }
  .seat-button { font-size: 10px; }
  .details-block { padding: 17px; }
  .review-list > div, .review-list > li { font-size: 11px; gap: 12px; }
  .payment-preview { padding: 17px; }
  .payment-method { padding: 15px 12px; font-size: 11px; }
  .reservation-body { display: block; padding: 19px; }
  .reservation-flight { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .reservation-route { max-width: none; }
  .reservation-totals { margin-top: 0; }
  .reservation-total strong { font-size: 23px; }
  .reservation-head { padding: 17px 19px; }
  .reservation-head h2, .reservation-head h3 { font-size: 15px; }
  #sidebarContinue { margin-top: 17px; }
  .summary-status { font-size: 11px; }
  .results-footnote p { font-size: 10px; }
  .trust-row { font-size: 10px; gap: 15px; line-height: 1.8; }
  .footer-inner { font-size: 11px; }
  .footer-inner > div { font-size: 11px; }
  .footer-inner small { font-size: 10px; }
  .calendar-day small { font-size: 8px; }
  .calendar-legend, .calendar-notice { font-size: 10px; }
}
@media (max-width: 380px) {
  .step-button { font-size: 8px; }
  .step-icon { width: 32px; height: 32px; }
  .step-button:not(:last-child)::after { top: 16px; }
  .fare-card { padding: 16px 12px; gap: 0 9px; }
  .fare-name { font-size: 14px; }
  .fare-features { font-size: 10px; }
  .fare-price { font-size: 21px; }
  .fare-card .select-fare { min-width: 86px; font-size: 10px; }
}

/* The reference matrix shows fare rules above aligned flight-price cells. */
.fare-family-1, .fare-family-2, .fare-family-3 { display: flex; flex-direction: column; }
.fare-family-1 .fare-features, .fare-family-2 .fare-features, .fare-family-3 .fare-features { margin: 0; flex: 1; }
.fare-family-1 .fare-name, .fare-family-2 .fare-name, .fare-family-3 .fare-name { padding-bottom: 13px; margin-bottom: 15px; border-bottom: 1px solid #ffffff30; }
.fare-price-option strong small { color: inherit; font: 500 9px var(--font); }
.flight-card:has(.fare-option-strip) .itinerary { grid-template-columns: 1fr 1.5fr 1fr; }
@media (max-width: 1100px) {
  .seat-selection-layout { grid-template-columns: 1fr; gap: 0; }
  .seat-map-note { padding-top: 0; }
}
@media (max-width: 650px) {
  .fare-grid { display: flex; overflow-x: auto; gap: 12px; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #c5acd7 #f0e6f6; }
  .fare-card.fare-family-1, .fare-card.fare-family-2, .fare-card.fare-family-3 { display: flex; flex-direction: column; flex: 0 0 85%; padding: 19px 17px; scroll-snap-align: start; min-width: 0; }
  .fare-card .fare-name { font-size: 15px; }
  .fare-card .fare-features { display: flex; flex-direction: column; font-size: 11px; gap: 9px; }
  .fare-card .fare-features li:nth-child(n+4) { display: flex; }
  .fare-card .fare-features strong { font-weight: 650; }
  .flow-actions > div { gap: 12px; }
  .flow-actions .text-button { font-size: 11px; }
  .service-choice-icon { width: 30px; height: 30px; flex-basis: 30px!important; }
  .service-choice em { font-size: 10px; }
  .seat-label-row { grid-template-columns: repeat(3, 1fr) 15px repeat(3, 1fr); gap: 6px; }
  .details-route { font-size: 17px; }
  .payment-total > strong { font-size: 25px; }
  .reservation-body .reservation-route h3 { font-size: 18px; }
}

/* Row number, A–C, aisle, D–F: keep all six example seats on one row. */
.seat-map{width:min(100%,365px)}
.seat-row,.seat-label-row{grid-template-columns:14px repeat(3,minmax(0,1fr)) 18px repeat(3,minmax(0,1fr))}
.flow-actions [data-flow-action="back"] .icon{transform:rotate(180deg)}
@media(max-width:650px){.seat-row,.seat-label-row{grid-template-columns:12px repeat(3,minmax(0,1fr)) 12px repeat(3,minmax(0,1fr));gap:5px}}

.reservation-support{display:flex;align-items:center;gap:10px;padding:15px 20px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.reservation-support .icon{width:16px;height:16px;color:var(--primary)}
.reservation-support strong{display:block;margin-top:4px;font-size:12px;color:var(--primary)}
.fare-price-option strong small{margin-right:4px}
.payment-method:disabled,.primary-button:disabled{cursor:not-allowed}
.step-button:disabled{cursor:default}

/* Supplier fare classes are data, not a fixed three-column assumption. */
.fare-grid,.fare-option-strip{grid-template-columns:repeat(var(--fare-columns,3),minmax(0,1fr))}
@media(max-width:650px){.fare-card[class*="fare-family-"]{display:flex;flex-direction:column;flex:0 0 85%;padding:19px 17px;scroll-snap-align:start;min-width:0}.fare-option-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Contact and passenger details follow the supplied BRAVO step-two reference. */
.flow-grid3 { display: grid; grid-template-columns: minmax(90px,.55fr) repeat(2,minmax(0,1fr)); gap: 18px 20px; }
.flow-grid3 label, .flow-documents label { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.6; color: #715d7d; }
.flow-card input, .flow-card select { min-width: 0; }
.flow-card select {
  text-overflow: ellipsis; -webkit-appearance: none; appearance: none; height: 44px;
  background-image: linear-gradient(45deg,transparent 50%,#846495 50%),linear-gradient(135deg,#846495 50%,transparent 50%);
  background-position: calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px;
}
.flow-contact { border: 0; border-bottom: 1px solid var(--line); padding: 0 0 27px; margin: 25px 0 30px; min-width: 0; }
.flow-contact legend { padding: 0 0 18px; color: #50365f; font: 700 17px/1.5 var(--heading); }
.flow-contact .flow-grid3, .flow-contact .flow-grid2, .flow-traveller .flow-grid3, .flow-traveller .flow-grid2 { margin-bottom: 18px; }
.flow-traveller { min-width: 0; padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.flow-traveller legend { padding: 7px 13px; background: var(--brand-wash); border-radius: 5px; margin-bottom: 20px; font-size: 13px; color: var(--primary); }
.flow-traveller legend span { color: var(--primary); }
.flow-documents { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.15fr) minmax(0,1.2fr) repeat(2,minmax(150px,1fr)); gap: 14px; min-width: 0; }
.flow-documents input, .flow-documents select { padding-inline: 9px; }
.flow-checkline { display: flex; align-items: flex-start; gap: 10px; color: #715d7d; font-size: 12px; line-height: 1.7; margin: 15px 0; cursor: pointer; }
.flow-checkline input { flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--primary); }
.flow-checkline span { min-width: 0; }
.flow-checkline small { display: block; color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 2px; }
.flow-card .input-error { color: #a13d6e; font-size: 11px; line-height: 1.6; }
.flow-document-note { color: #84718f; font-size: 11px; line-height: 1.8; margin: 0 0 16px; }
.flow-card .required-note { color: var(--muted); font-size: 11px; margin: 0 0 18px; }
.flow-card .field-error:not([hidden]) { padding: 12px 14px; border: 1px solid #eac8da; background: #fff8fc; border-radius: 6px; margin-bottom: 16px; }
.contact-review { overflow-wrap: anywhere; }
@media(max-width:1100px) { .flow-documents { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } }
@media(max-width:650px) {
  .flow-grid3 { grid-template-columns: 1fr; gap: 15px; }
  .flow-documents { grid-template-columns: 1fr; gap: 15px; }
  .flow-contact { margin-top: 22px; padding-bottom: 22px; }
  .flow-traveller { padding-bottom: 22px; margin-bottom: 22px; }
  .flow-contact legend { font-size: 16px; }
  .flow-grid3 label, .flow-documents label { font-size: 13px; }
}

/* R10: a dedicated refinement column leaves the flight comparison in view. */
.main-content.shell { width: min(1600px, calc(100% - 64px)); }
.content-grid { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 22px; align-items: start; }
.filters { min-width: 0; margin: 0; padding: 19px 17px 0; background: #fff; border: 1px solid var(--brand-border); border-radius: 11px; }
.filter-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.filter-title > div { display: flex; align-items: center; gap: 8px; color: var(--primary); }
.filter-title h2 { margin: 0; color: var(--primary-dark); font: 700 16px var(--heading); }
.filter-title .icon { width: 18px; height: 18px; }
.filter-title .text-button { padding: 5px 0; font-size: 11px; }
.mobile-filter-toggle { display: none; }
.filter-body, .filters.open .filter-body { display: block; border: 0; border-radius: 0; padding: 0; background: transparent; }
.filter-body fieldset { min-width: 0; border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 18px 0; }
.filter-body legend { float: left; width: 100%; padding: 0; margin: 0 0 13px; font-size: 12px; color: #4d3a5c; font-weight: 700; }
.filter-body legend + * { clear: both; }
.filter-options { display: grid; gap: 11px; }
.filters .check-row { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; line-height: 1.55; margin: 0; }
.filters .check-row input { width: 16px; height: 16px; flex: 0 0 auto; margin: 1px 0 0; }
.filters .check-row > span:not(.filter-number) { min-width: 0; overflow-wrap: anywhere; }
.filters .filter-number { margin-left: auto; padding-left: 5px; font-size: 10px; }
.price-range-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; gap: 8px; }
.price-range-label strong { color: #5d456d; font-size: 11px; text-align: right; }
.filters .price-range { width: 100%; margin: 17px 0 9px; }
.filters .range-ends { display: flex; justify-content: space-between; gap: 5px; font-size: 9px; }
.filter-hint { color: #908297; font-size: 10px; line-height: 1.65; margin: 8px 0 0; }
.time-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-width: none; }
.time-filters button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 76px; padding: 9px 3px; gap: 5px; border: 1px solid #e6daee; border-radius: 7px; background: #fff; font-size: 10px; line-height: 1.3; }
.time-filters button span { display: block; margin: 0; font-size: 20px; line-height: 1; }
.time-filters button small { display: block; font-size: 8px; }
.time-filters button:hover { border-color: #b398c7; background: #faf7fc; }
.time-filters button[aria-pressed="true"] { color: var(--primary-dark); border-color: var(--primary); background: #f1e8f7; box-shadow: inset 0 0 0 1px var(--primary); }
.filter-help { display: flex; align-items: flex-start; gap: 8px; color: #8a7698; padding: 17px 0; font-size: 10px; line-height: 1.6; }
.filter-help .icon { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; }
.filter-help strong { display: block; color: var(--primary); font-weight: 650; }
.results-column { min-width: 0; }
#filterCount:not(:empty) { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 20px; background: #f1e7f6; color: var(--primary); font-size: 10px; }
.fare-grid { align-items: stretch; }
.fare-card[class*="fare-family-"] { display: flex; flex-direction: column; min-width: 0; padding: 0; border-radius: 7px; overflow: hidden; background: var(--primary); border-color: #e6dbed; }
.fare-card[class*="fare-family-"] .fare-name { margin: 0; padding: 13px 9px; min-height: 49px; display: flex; align-items: center; justify-content: center; text-align: center; background: #fff; color: var(--primary); border: 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.fare-card[class*="fare-family-"] .fare-features { margin: 0; padding: 15px 12px 18px; flex: 1; font-size: 10px; line-height: 1.65; }
.fare-card[class*="fare-family-"] .fare-features li { gap: 7px; }
.fare-card[class*="fare-family-"] .fare-features li:nth-child(n) { display: flex; }
.fare-card[class*="fare-family-"] .fare-features .icon { width: 12px; height: 12px; flex-shrink: 0; }
.fare-card[class*="fare-family-"] .fare-features strong { color: #fff; }
.fare-card.selected { box-shadow: 0 0 0 2px var(--secondary); }
.fare-price-option { overflow-wrap: anywhere; }
@media (min-width: 1500px) {
  .content-grid { grid-template-columns: 238px minmax(0, 1fr); gap: 26px; }
  .filters { padding: 21px 20px 0; }
  .fare-card[class*="fare-family-"] .fare-features { font-size: 11px; padding: 17px 14px 20px; }
  .fare-card[class*="fare-family-"] .fare-name { font-size: 15px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr); }
  .reservation-sidebar { position: static; margin: 24px 0 0; }
  .reservation-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
  .reservation-body .reservation-query, .reservation-body .reservation-route, .reservation-body #summaryTitle, .reservation-body #sidebarDate, .reservation-body #sidebarFlight, .reservation-body #summaryFare { grid-column: 1; }
  .reservation-totals { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
  #sidebarContinue, #reviewSelection, .summary-status { grid-column: 2; }
}
@media (max-width: 900px) {
  .main-content.shell { width: calc(100% - 36px); }
  .content-grid { display: block; }
  .filters { padding: 0; margin-bottom: 21px; }
  .filter-title { display: none; }
  .mobile-filter-toggle { display: flex; min-height: 46px; padding: 12px 15px; border: 0; border-radius: 10px; font-size: 12px; }
  .filters.open .mobile-filter-toggle { border-bottom: 1px solid var(--line); }
  .filter-body { display: none; }
  .filters.open .filter-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 0 18px; }
  .filters .filter-body fieldset { padding: 18px 0; }
  .filters .check-row { font-size: 12px; }
  .filter-help { grid-column: 1/-1; }
  .fare-card[class*="fare-family-"] .fare-features { font-size: 11px; }
  .fare-card[class*="fare-family-"] .fare-name { font-size: 14px; }
}
@media (max-width: 560px) {
  .main-content.shell { width: calc(100% - 28px); }
  .filters.open .filter-body { grid-template-columns: 1fr; padding: 0 16px; }
  .fare-grid { display: flex; }
  .fare-card[class*="fare-family-"] { flex: 0 0 86%; padding: 0; }
  .fare-card[class*="fare-family-"] .fare-name { justify-content: flex-start; padding: 15px; }
  .fare-card[class*="fare-family-"] .fare-features { padding: 16px; }
}

/* Traveller entry keeps provider dates in ISO while presenting DD / MM / YYYY. */
.dial-code-field { min-width: 0; }
.dial-code-field select { width: 100%; min-width: 0; text-overflow: ellipsis; padding-right: 28px; }
.dial-code-field small[data-dial-hint] { display: block; font-size: 10px; line-height: 1.6; color: #8b7a98; margin-top: 6px; }
.date-field-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.6; color: #715d7d; }
.segmented-date { position: relative; display: flex; align-items: center; gap: 3px; width: 100%; height: 44px; min-height: 44px; padding: 6px 10px; border: 1px solid #d9c9e4; border-radius: 7px; background: #fff; color: #594267; box-sizing: border-box; }
.segmented-date:focus-within { outline: 2px solid var(--secondary); outline-offset: 2px; }
.segmented-date:has([aria-invalid="true"]) { border-color: #ac386b; }
.flow-card .segmented-date input.date-part { flex: 0 0 2.7ch; width: 2.7ch; min-width: 0; max-width: none; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; box-shadow: none; color: #594267; font: 400 13px/24px var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: center; outline: 0; }
.date-part::placeholder { color: #ac95ba; opacity: 1; }
.flow-card .segmented-date input.date-part:focus { background: #f2e9f7; outline: none; }
.flow-card .segmented-date input.date-year { flex-basis: 5ch; width: 5ch; }
.date-divider { font-size: 12px; color: #a18bac; user-select: none; }
.date-calendar-button { position: relative; margin-left: auto; display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border: 0; border-radius: 4px; background: #f3edf7; color: var(--primary); padding: 4px; }
.date-calendar-button:hover { background: #e9dff0; }
.date-calendar-button .icon { width: 15px; height: 15px; }
.flow-card .segmented-date input.date-picker-input { position: absolute; right: 12px; top: 31px; width: 1px; max-width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.flow-documents .segmented-date { gap: 2px; padding-inline: 8px; }
@media (max-width: 650px) {
  .date-field-group { font-size: 13px; }
  .segmented-date { height: 46px; min-height: 46px; }
  .flow-card .segmented-date input.date-part { font-size: 16px; }
  .date-calendar-button { width: 28px; height: 28px; }
}
@media (min-width: 901px) {
  .filters { position: sticky; top: 20px; max-height: calc(100dvh - 40px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d3c1df transparent; }
}
.mobile-filter-reset { display: none; }
@media (max-width: 900px) {
  .mobile-filter-reset { display: block; grid-column: 1/-1; justify-self: start; margin: 14px 0 0; padding: 7px 0; font-size: 12px; }
}

.ancillary-loading { display: flex; align-items: center; gap: 12px; padding: 28px 0; font-size: 12px; color: #887493; }
.ancillary-status { padding: 22px; border: 1px solid var(--brand-border); border-radius: 8px; background: #faf7fc; font-size: 12px; line-height: 1.8; color: #826e8d; }
.ancillary-status p { margin-top: 0; }
.live-service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: 640px; overflow: auto; padding: 2px 8px 5px 2px; scrollbar-width: thin; }
.live-service-card { display: flex; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid var(--brand-border); border-radius: 8px; background: #fff; min-width: 0; }
.live-service-card .service-choice-icon { width: 32px; height: 32px; flex: 0 0 auto; }
.live-service-card h3 { margin: 0 0 8px; font: 650 13px/1.5 var(--heading); color: #543965; overflow-wrap: anywhere; }
.live-service-card p { margin: 4px 0; font-size: 11px; line-height: 1.6; color: #8a7894; }
.live-service-card .availability-available { color: #467361; }
.live-service-card .availability-unavailable { color: #9b6b78; }
.live-service-card .ancillary-price { color: #715681; font-weight: 550; }
.ancillary-notices { margin: 19px 0 0; padding: 14px 17px; border-radius: 7px; background: #f7f2fa; }
.ancillary-notices p { margin: 4px 0; font-size: 10px; line-height: 1.75; color: #8a7896; }
.live-seat-layout { border: 1px solid var(--brand-border); border-radius: 12px; background: #faf7fc; padding: 18px; }
.live-seat-scroll { overflow: auto; max-height: 640px; padding: 16px 5px; scrollbar-width: thin; scrollbar-color: #cbb6da #f5eef8; }
.live-seat-map { min-width: 450px; width: max-content; max-width: 100%; margin: 0 auto; border: 2px solid #ded1e8; border-radius: 80px 80px 28px 28px; padding: 40px 15px 22px; background: #fff; }
.live-seat-row { display: grid; grid-template-columns: repeat(var(--seat-columns), minmax(26px, 1fr)); gap: 5px; margin: 5px 0; }
.live-seat-cell { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 36px; min-height: 38px; padding: 5px 1px; border: 1px solid #ab8bbe; border-bottom-width: 3px; border-radius: 6px 6px 3px 3px; background: #f2e9f7; color: #6b4691; font: 600 9px/1.2 var(--font); box-sizing: border-box; }
.live-seat-cell small { display: block; margin-top: 4px; font: 400 7px/1.2 var(--font); white-space: nowrap; }
.seat-occupied { background: repeating-linear-gradient(135deg,#e9e5ed,#e9e5ed 5px,#f1edf4 5px,#f1edf4 10px); border-color: #d2cad9; color: #9c91a5; }
.seat-blocked { background: #eeeaf1; border-color: #d7cedd; color: #b1a7b9; }
.seat-unknown { background: #fff; border-style: dashed; border-color: #cfc0da; color: #a997b6; }
.seat-empty, .seat-facility { display: flex; align-items: center; justify-content: center; width: 36px; min-height: 34px; }
.seat-facility { font: 500 8px var(--font); color: #9d8da8; text-align: center; }
.live-seat-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; padding-top: 18px; font-size: 10px; color: #8b7896; }
.live-seat-legend > span { display: flex; align-items: center; gap: 6px; }
.live-seat-legend i { display: inline-block; width: 12px; height: 12px; border: 1px solid #ae8dc2; border-radius: 3px; background: #f2e9f7; }
.live-seat-legend i.seat-occupied { background: #e4dfe9; border-color: #c6bdce; }
.live-seat-legend i.seat-blocked { background: #eeeaf1; border-color: #d7cedd; }
.live-seat-legend i.seat-unknown { background: #fff; border-style: dashed; }
@media (max-width: 650px) {
  .live-service-list { grid-template-columns: 1fr; max-height: 520px; }
  .live-seat-layout { padding: 10px; }
  .live-seat-scroll { max-height: 500px; }
  .live-seat-legend { gap: 10px; font-size: 9px; }
}

/* R11: choose a flight first, then compare the fares underneath it. */
.flight-summary-toggle { display: block; width: 100%; border: 0; background: #fff; color: inherit; text-align: left; padding: 21px 22px 17px; cursor: pointer; }
.flight-summary-toggle:hover { background: #fcf9fe; }
.flight-summary-toggle:focus-visible { outline: 2px solid var(--secondary); outline-offset: -4px; border-radius: 9px; }
.flight-summary-toggle .airline-name, .flight-summary-toggle .airline-subtitle,
.flight-summary-toggle .time, .flight-summary-toggle .airport-code, .flight-summary-toggle .city-name { display: block; }
.flight-summary-toggle .flight-brand-row { display: flex; margin-bottom: 20px; }
.flight-summary-content { display: grid; grid-template-columns: minmax(0, 1fr) 145px; gap: 25px; align-items: center; }
.flight-accordion .itinerary { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 15px; min-width: 0; }
.flight-summary-toggle .time { font-size: 27px; }
.flight-summary-action { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.flight-summary-price { text-align: right; }
.flight-summary-price > small { display: block; color: #96839f; font-size: 10px; line-height: 1.5; }
.flight-summary-price > strong { display: block; color: #55376b; font: 750 22px/1.5 var(--heading); letter-spacing: -.4px; white-space: nowrap; }
.flight-summary-price strong small { font: 500 10px var(--font); letter-spacing: 0; margin-right: 5px; }
.flight-fares-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 39px; padding: 9px 16px; background: var(--primary); color: #fff; border-radius: 6px; font-size: 11px; font-weight: 650; }
.flight-fares-trigger .icon { width: 14px; height: 14px; transform: rotate(90deg); }
.fares-open .flight-fares-trigger .icon { transform: rotate(-90deg); }
.flight-summary-details { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px 15px; border-top: 1px solid #f0eaf4; font-size: 9px; color: #9b8aa5; }
.selected-fare-hint { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); }
.selected-fare-hint .icon { width: 13px; height: 13px; }
.flight-fares-panel[hidden] { display: none!important; }
.flight-fares-panel { border-top: 1px solid var(--brand-border); }
.flight-fares-panel .fare-area { border: 0; }
.flight-fares-panel .fare-card .fare-price-option { width: calc(100% - 22px); margin: 6px 11px 12px; padding: 13px 7px; min-height: 89px; background: #fff; border: 1px solid #ece1f2; border-radius: 6px; }
.flight-fares-panel .fare-price-option > span { display: block; font-size: 11px; }
.flight-fares-panel .fare-price-option strong { display: block; margin: 6px 0 3px; }
.flight-fares-panel .fare-price-option strong small { margin-right: 4px; }
.flight-fares-panel .fare-price-option.selected { background: var(--secondary); border-color: #c49ac3; }
.flight-fares-panel .fare-price-option.selected > span,
.flight-fares-panel .fare-price-option.selected strong,
.flight-fares-panel .fare-price-option.selected small { color: #fff; }
.flight-fares-panel .fare-price-option .icon { width: 12px; height: 12px; margin-left: 4px; }
.fare-continue-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 20px; border-top: 1px solid var(--brand-border); background: #fbf8fd; }
.fare-continue-row p { margin: 0; font-size: 11px; line-height: 1.6; color: #8a7397; }
.fare-continue-row p strong { color: #614274; }
.fare-continue-row .button { font-size: 11px; }
@media (max-width: 650px) {
  .flight-summary-toggle { padding: 18px 16px 14px; }
  .flight-summary-content { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .flight-summary-toggle .time { font-size: 27px; }
  .flight-summary-action { flex-direction: row; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid #eee5f3; }
  .flight-summary-price { text-align: left; }
  .flight-summary-price > strong { font-size: 22px; }
  .flight-fares-trigger { min-height: 40px; font-size: 11px; }
  .flight-summary-details { padding: 12px 16px; font-size: 8px; }
  .flight-summary-details > span { max-width: 60%; text-align: right; }
  .fare-continue-row { flex-direction: column; align-items: stretch; padding: 16px; }
  .fare-continue-row .button { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .flight-fares-panel:not([hidden]) { animation: reveal-fares .18s ease-out; }
  @keyframes reveal-fares { from { opacity: .5; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
}