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