/* =========================================================================== booking.css — the booking layer =========================================================================== Inherits the --sp-* tokens from service-page.css, so light and dark come free and the booking sheet always matches the page it opened over. Everything is namespaced `bk-`. The sheet mounts as in-page content right below the site's own sticky header (see ensureRoot() in booking-flow.js) rather than as a modal overlay — the reference layout keeps the header visible, so `body.bk-inpage` hides the rest of the page instead of the flow sitting on top of it. `.bk-close` and `@keyframes bkRise` are declared further down, in the My Bookings section — that screen's detail view is a genuine modal overlay (`.mb-overlay`) and still uses both; nothing in the booking flow itself references them any more. =========================================================================== */ /* Still used by my-bookings.js for its own `.mb-overlay` detail modal (a genuine overlay, unlike the booking flow below). */ .bk-locked { overflow: hidden; } /* Everything else on the page hides while the flow is open — the header (and skip-link) stay, `#bkRoot` mounts right after the header (see ensureRoot() in booking-flow.js), and the flow itself becomes the page. Scoped to direct children of body so it needs no per-page selector: every service page's hero/results/footer sit there regardless of page. */ /* The Account Center is the exception: it is a genuine overlay that has to be able to open ON TOP of an in-progress booking, which is the whole point of account-center.js existing (the profile chip used to navigate away and lose the booking). It injects itself as a direct child of , so without these two exemptions it matches the rule above and opens invisibly - `.open` is set, the overlay measures 0x0, and nothing appears. */ /* #siteHeader is the LANDING SHELL's header id — flights.html wears that shell (see the comment at the top of that file), so without it here the site header vanished the moment a flight booking opened, on the one page where the reference shows it on every step. */ body.bk-inpage > *:not(#spHeader):not(#siteHeader):not(.skip-link):not(#bkRoot):not(#accountModalOverlay):not(#acctConfirmOverlay) { display: none; } .bk-root { display: none; } .bk-root.is-open { display: block; } .bk-sheet { max-width: 1200px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 0; color: var(--sp-ink, #0A2540); display: flex; flex-direction: column; } /* -------------------------------------------------------------------------- Page head — a back link plus the booking's own title, in place of the old dark modal bar. The site's header above this is untouched. -------------------------------------------------------------------------- */ .bk-pagehead { margin-bottom: 18px; } .bk-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 0; background: none; border: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--sp-muted, #5B6B82); transition: color .18s ease; } .bk-back:hover { color: var(--sp-accent, #FF4D4D); } .bk-back:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 3px; border-radius: 6px; } .bk-back svg { flex: none; } .bk-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-accent, #FF4D4D); } .bk-title { margin: 4px 0 0; font-size: 24px; line-height: 1.2; color: var(--sp-ink, #0A2540); } /* -------------------------------------------------------------------------- Flight summary — flights only, persistent above the stepper on every step -------------------------------------------------------------------------- */ .bk-flightsum { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-bottom: 18px; padding: 16px 20px; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line, rgba(10,37,64,.1)); border-radius: var(--sp-radius, 16px); } .bk-flightsum-airline { display: flex; align-items: center; gap: 12px; flex: none; } .bk-flightsum-airline b { display: block; font-size: 14px; } .bk-flightsum-airline span { display: block; font-size: 12px; color: var(--sp-muted, #5B6B82); margin-top: 2px; } .bk-flightsum-leg { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 260px; padding-left: 18px; border-left: 1px solid var(--sp-line, rgba(10,37,64,.1)); } .bk-flightsum-leg > div { display: flex; flex-direction: column; gap: 1px; } .bk-flightsum-leg b { font-size: 17px; font-variant-numeric: tabular-nums; } .bk-flightsum-leg span { font-size: 12px; color: var(--sp-muted, #5B6B82); } .bk-flightsum-leg .is-end { text-align: right; align-items: flex-end; } .bk-flightsum-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; font-size: 11.5px; color: var(--sp-muted, #5B6B82); min-width: 90px; } .bk-flightsum-mid i { display: block; width: 100%; height: 1px; background: var(--sp-line, rgba(10,37,64,.16)); position: relative; } .bk-flightsum-mid i::after { content: ''; position: absolute; right: -1px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-accent, #FF4D4D); transform: translateY(-50%); } /* -------------------------------------------------------------------------- Stepper -------------------------------------------------------------------------- */ .bk-rail { display: flex; gap: 0; margin: 0 0 20px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .bk-rail::-webkit-scrollbar { display: none; } .bk-rail-step { display: flex; align-items: center; gap: 8px; padding: 0 14px 0 0; white-space: nowrap; position: relative; } /* Connecting line between dots — sits behind them, filled up to the current step so progress reads at a glance. */ .bk-rail-step:not(:last-child)::after { content: ''; flex: 1 0 24px; height: 2px; margin: 0 8px; background: var(--sp-line, rgba(10,37,64,.14)); } .bk-rail-step.is-done:not(:last-child)::after { background: var(--sp-emerald, #12B76A); } .bk-rail-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; background: var(--sp-surface, #fff); color: var(--sp-muted, #5B6B82); border: 1.5px solid var(--sp-line, rgba(10,37,64,.1)); transition: all .25s ease; } .bk-rail-label { font-size: 13px; font-weight: 700; color: var(--sp-muted, #5B6B82); } .bk-rail-step.is-now .bk-rail-dot { background: var(--sp-accent, #FF4D4D); color: var(--on-accent, #12253F); border-color: var(--sp-accent, #FF4D4D); } .bk-rail-step.is-now .bk-rail-label { color: var(--sp-ink, #0A2540); } .bk-rail-step.is-done .bk-rail-dot { background: var(--sp-emerald, #12B76A); color: #fff; border-color: var(--sp-emerald, #12B76A); } /* -------------------------------------------------------------------------- Body -------------------------------------------------------------------------- */ .bk-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 32%); gap: 28px; flex: 1; align-items: start; } .bk-main { padding: 0 0 32px; min-width: 0; } .bk-side { padding: 0 0 32px; position: sticky; top: calc(var(--bk-header-h, 0px) + 16px); } /* Direction-aware entrance, so Back feels like going back. */ .bk-in { animation: bkNext .28s cubic-bezier(.22,1,.36,1); } .bk-in-back { animation: bkBack .28s cubic-bezier(.22,1,.36,1); } @keyframes bkNext { from { opacity: 0; transform: translateX(14px); } } @keyframes bkBack { from { opacity: 0; transform: translateX(-14px); } } .bk-step-title { margin: 0 0 6px; font-size: 21px; line-height: 1.25; } .bk-step-sub { margin: 0 0 20px; color: var(--sp-muted, #5B6B82); font-size: 14px; line-height: 1.6; } .bk-sub-h { margin: 22px 0 10px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--sp-muted); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .bk-pax { margin-bottom: 14px; padding: 16px 18px; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line, rgba(10,37,64,.1)); border-radius: var(--sp-radius, 16px); transition: border-color .18s ease; } .bk-pax.is-open { border-color: var(--sp-line-strong, rgba(10,37,64,.18)); } .bk-pax-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bk-pax.is-open .bk-pax-head { margin-bottom: 14px; } .bk-pax-toggle { display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; } .bk-pax-toggle h3 { margin: 0; font-size: 15px; } /* The icon itself (arrowUp) points up, so the resting/closed state — "click to open" — is the one that needs the 180deg flip to read as a down chevron; open removes it, so the arrow points up ("click to collapse") once expanded. */ .bk-pax-chev { display: inline-flex; color: var(--sp-muted); transition: transform .2s ease; flex: none; transform: rotate(180deg); } .bk-pax-chev .jpi { display: block; } .bk-pax.is-open .bk-pax-chev { transform: rotate(0deg); } .bk-pax-status { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--sp-muted); padding: 3px 10px; border-radius: 999px; background: var(--sp-surface-2, #F1F5F9); } .bk-pax-status.is-done { color: var(--sp-emerald, #12B76A); background: color-mix(in srgb, var(--sp-emerald, #12B76A) 14%, transparent); } .bk-pax-note { margin: 0 0 12px; font-size: 12px; color: var(--sp-muted); } .bk-pax-body { padding-top: 4px; } .bk-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--sp-surface-2, #F1F5F9); color: var(--sp-muted); font-size: 11px; font-weight: 700; } .bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .bk-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 8px; } .bk-field.is-wide { grid-column: 1 / -1; } .bk-field label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--sp-muted); margin-bottom: 6px; } .bk-opt { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .7; } .bk-field input, .bk-field select, .bk-field textarea { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--sp-line, rgba(10,37,64,.1)); background: var(--sp-surface, #fff); color: var(--sp-ink, #0A2540); /* 16px so iOS does not zoom the page when a field takes focus. */ font-size: 16px; font-family: inherit; outline: none; transition: border-color .18s ease; } .bk-field textarea { resize: vertical; min-height: 78px; } .bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus { border-color: var(--sp-accent, #FF4D4D); } .bk-field .is-invalid, .is-invalid { border-color: var(--sp-accent, #FF4D4D) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 18%, transparent); } /* -------------------------------------------------------------------------- Choice rows (rooms, cabins, departures, visa types) -------------------------------------------------------------------------- */ .bk-choices { display: grid; gap: 12px; } .bk-choice { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; background: var(--sp-surface, #fff); border: 1.5px solid var(--sp-line, rgba(10,37,64,.1)); border-radius: 14px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .bk-choice:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(10,37,64,.08); } .bk-choice.is-on { border-color: var(--sp-accent, #FF4D4D); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 14%, transparent); } .bk-choice:has(:focus-visible) { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } .bk-choice input { width: 18px; height: 18px; accent-color: var(--sp-accent); flex: none; } .bk-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .bk-choice-body b { font-size: 15px; } .bk-choice-meta { font-size: 12.5px; color: var(--sp-muted); } .bk-chips { display: flex; flex-wrap: wrap; gap: 5px; } .bk-chips i { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--sp-surface-2, #F1F5F9); color: var(--sp-muted); } .bk-scarce { font-size: 11.5px; font-weight: 800; color: var(--sp-accent, #FF4D4D); } .bk-choice-price { text-align: right; flex: none; } .bk-choice-price b { display: block; font-size: 17px; } .bk-choice-price span { font-size: 11px; color: var(--sp-muted); } /* -------------------------------------------------------------------------- Seat map -------------------------------------------------------------------------- */ .bk-seat-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-size: 12px; color: var(--sp-muted); } .bk-seat-legend span { display: inline-flex; align-items: center; gap: 6px; } .bk-seat-legend i { width: 18px; height: 18px; display: inline-block; } /* Sized to use the space the two-column layout actually gives it — the old 420px cap left the aircraft floating in a sea of blank card on any screen wider than a phone. It now fills the main column up to a sensible ceiling for seat-button legibility, and only scrolls internally past a generous height instead of being squeezed into a fixed small box. */ .bk-cabin { max-width: 640px; margin: 0 auto; padding: 22px 20px 26px; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line); border-radius: 28px 28px 16px 16px; max-height: 72vh; overflow: auto; } .bk-nose { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); padding-bottom: 18px; } .bk-seatrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .bk-seatrow.is-exit { border-top: 1px dashed color-mix(in srgb, var(--sp-emerald) 55%, transparent); padding-top: 8px; } .bk-seatno { width: 24px; font-size: 12px; font-weight: 700; color: var(--sp-muted); text-align: right; flex: none; } .bk-aisle { width: 24px; flex: none; } .bk-exit-tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--sp-emerald); margin-left: 4px; } .bk-seat { width: 44px; height: 44px; flex: none; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1.5px solid var(--sp-line); background: var(--sp-surface-2, #F1F5F9); color: var(--sp-ink); transition: transform .12s ease, background .18s ease, border-color .18s ease; } .bk-seat-letter { line-height: 1; } .bk-seat-price { font-size: 8.5px; font-weight: 700; line-height: 1; opacity: .75; font-variant-numeric: tabular-nums; } .bk-seat:hover:not(:disabled) { transform: scale(1.08); border-color: var(--sp-accent); z-index: 1; } .bk-seat:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; z-index: 1; } .bk-seat.is-window { background: color-mix(in srgb, var(--sp-sky, #2F80ED) 14%, transparent); } .bk-seat.is-aisle { background: color-mix(in srgb, var(--sp-emerald, #12B76A) 13%, transparent); } .bk-seat.is-taken { background: var(--sp-line); color: transparent; cursor: not-allowed; border-style: dashed; } .bk-seat.is-mine { background: var(--sp-accent, #FF4D4D); border-color: var(--sp-accent); color: var(--on-accent, #12253F); } .bk-seat-count { text-align: center; margin: 16px 0 0; font-size: 13.5px; font-weight: 700; color: var(--sp-muted); } @media (max-width: 560px) { .bk-cabin { padding: 16px 10px 20px; } .bk-seat { width: 36px; height: 36px; border-radius: 9px; } .bk-seat-letter { font-size: 12px; } .bk-seat-price { font-size: 7.5px; } .bk-seatno { width: 18px; font-size: 10.5px; } .bk-aisle { width: 14px; } } /* -------------------------------------------------------------------------- Add-ons + tick grids -------------------------------------------------------------------------- */ /* Selectable tiles in a responsive grid rather than stacked full-width rows — same markup, same checkbox semantics (booking-products.js is unchanged), just laid out as cards. The checkbox stays visible (top-right, small) so focus/keyboard behaviour is untouched; a "Selected" pill next to the price is the reference's visual confirmation. */ .bk-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .bk-addon { display: flex; flex-direction: column; gap: 10px; padding: 16px; cursor: pointer; background: var(--sp-surface, #fff); border: 1.5px solid var(--sp-line); border-radius: 14px; position: relative; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .bk-addon:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10,37,64,.08); } .bk-addon.is-on { border-color: var(--sp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 14%, transparent); } .bk-addon input { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; accent-color: var(--sp-accent); margin: 0; } .bk-addon-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--sp-surface-2, #F1F5F9); color: var(--sp-accent); display: grid; place-items: center; } .bk-addon-body { flex: 1; min-width: 0; padding-right: 26px; } .bk-addon-body b { display: block; font-size: 14px; margin-bottom: 2px; } .bk-addon-body span { display: block; font-size: 11.5px; color: var(--sp-muted); } .bk-addon-price { font-weight: 800; font-size: 15px; } .bk-addon.is-on .bk-addon-price::after { content: '✓ Added'; display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .02em; vertical-align: middle; background: color-mix(in srgb, var(--sp-accent) 14%, transparent); color: var(--sp-accent); } .bk-tickgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; } .bk-tickgrid.is-stack { grid-template-columns: 1fr; } .bk-tick { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; background: var(--sp-surface, #fff); border: 1.5px solid var(--sp-line); border-radius: 11px; font-size: 13.5px; } .bk-tick input { width: 17px; height: 17px; accent-color: var(--sp-accent); flex: none; } /* -------------------------------------------------------------------------- Panels, tables, itinerary -------------------------------------------------------------------------- */ .bk-panel { padding: 18px; margin-bottom: 14px; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line); border-radius: 14px; } .bk-panel h3 { margin: 0 0 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted); } .bk-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--sp-muted); } .bk-meta b { color: var(--sp-ink); } .bk-req { margin: 12px 0 0; font-size: 13px; color: var(--sp-muted); line-height: 1.6; } .bk-itin { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 14px; } .bk-itin span { display: block; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; } .bk-itin b { display: block; font-size: 12.5px; font-weight: 600; color: var(--sp-muted); margin-top: 2px; } .bk-itin .is-end { text-align: right; } .bk-itin-mid { display: grid; justify-items: center; gap: 3px; color: var(--sp-accent); } .bk-itin-mid span { font-size: 11.5px; font-weight: 700; color: var(--sp-muted); } .bk-table-wrap { overflow-x: auto; } .bk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .bk-table th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--sp-muted); padding: 6px 8px; border-bottom: 1px solid var(--sp-line); } .bk-table td { padding: 9px 8px; border-bottom: 1px solid var(--sp-line); } .bk-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; } .bk-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sp-line); } .bk-list li:last-child { border-bottom: none; } .bk-list li span { color: var(--sp-muted); } .is-muted { color: var(--sp-muted); } /* -------------------------------------------------------------------------- Price rail -------------------------------------------------------------------------- */ .bk-price { padding: 20px; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line); border-radius: var(--sp-radius, 16px); } .bk-price h3 { margin: 0 0 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted); } .bk-price-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; } .bk-price-line.is-muted { color: var(--sp-muted); } .bk-price-empty { font-size: 13px; color: var(--sp-muted); margin: 0; } .bk-price-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1.5px dashed var(--sp-line); font-size: 20px; font-weight: 800; color: var(--sp-ink); } .bk-price-note { margin: 12px 0 0; font-size: 11.5px; color: var(--sp-muted); line-height: 1.5; } /* -------------------------------------------------------------------------- Payment -------------------------------------------------------------------------- */ .bk-demo-note { display: flex; gap: 13px; padding: 14px 16px; margin-bottom: 18px; border-radius: 12px; background: color-mix(in srgb, var(--sp-gold, #FFB020) 13%, transparent); border: 1px dashed color-mix(in srgb, var(--sp-gold) 55%, transparent); } .bk-demo-note b { display: block; font-size: 13.5px; margin-bottom: 3px; } .bk-demo-note p { margin: 0; font-size: 12.5px; color: var(--sp-muted); line-height: 1.55; } .bk-demo-note .jpi { color: var(--sp-gold); } .bk-pays { display: grid; gap: 10px; margin-bottom: 18px; } .bk-pay { display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer; background: var(--sp-surface, #fff); border: 1.5px solid var(--sp-line); border-radius: 13px; transition: border-color .18s ease; } .bk-pay.is-on { border-color: var(--sp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 14%, transparent); } .bk-pay input { width: 18px; height: 18px; accent-color: var(--sp-accent); flex: none; } .bk-pay-body b { display: block; font-size: 14.5px; } .bk-pay-body span { font-size: 12px; color: var(--sp-muted); } .bk-paytotal { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: var(--sp-surface-2, #F1F5F9); border-radius: 13px; font-size: 14px; } .bk-paytotal b { font-size: 21px; } /* -------------------------------------------------------------------------- Confirmation -------------------------------------------------------------------------- */ .bk-done { text-align: center; max-width: 640px; margin: 0 auto; } .bk-done-mark { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: var(--sp-emerald, #12B76A); background: color-mix(in srgb, var(--sp-emerald, #12B76A) 14%, transparent); } .bk-done h2 { margin: 0 0 6px; font-size: 26px; } .bk-refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 20px 0; padding: 18px; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line); border-radius: 14px; text-align: left; } .bk-ref span { display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--sp-muted); } .bk-ref b { font-size: 15px; font-variant-numeric: tabular-nums; } .bk-done .bk-panel { text-align: left; } .bk-done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; } .bk-demo-foot { margin: 18px 0 0; font-size: 11.5px; color: var(--sp-muted); line-height: 1.5; } /* -------------------------------------------------------------------------- Footer, buttons, states -------------------------------------------------------------------------- */ .bk-foot { display: flex; align-items: center; gap: 14px; margin: 0 calc(-1 * clamp(16px, 3vw, 32px)) 0; padding: 16px clamp(16px, 3vw, 32px); background: var(--sp-surface, #fff); border-top: 1px solid var(--sp-line); position: sticky; bottom: 0; } .bk-foot-msg { flex: 1; font-size: 13px; font-weight: 700; text-align: center; } .bk-foot-msg.is-error { color: var(--sp-accent, #FF4D4D); } .bk-foot-msg.is-ok { color: var(--sp-emerald, #12B76A); } /* The mobile-only echo of the fare total (see paint() in booking-flow.js). Hidden on desktop, where the full breakdown sits in the always-sticky .bk-side panel instead — this exists only for the width where that panel stops being sticky (below) and could otherwise scroll out of view while Continue stays pinned. */ .bk-foot-total { display: none; } .bk-btn { padding: 12px 22px; border-radius: 11px; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; text-align: center; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; } .bk-btn:active { transform: translateY(1px); } .bk-btn:disabled { opacity: .6; cursor: default; } /* Every other interactive class in this file gets its own focus-visible ring (see .bk-back, .bk-disclose-btn, .bk-pax-remove, .bk-coupon-*…) — .bk-btn had been relying on the browser default, despite covering Continue, Back and Pay, the three highest-stakes controls in the whole flow. Same ring, same offset, so keyboard focus reads as one system rather than switching styles between a step's own controls and its Continue button. */ .bk-btn:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } .bk-btn-sm { padding: 8px 15px; font-size: 12.5px; border-radius: 999px; } .bk-btn-primary { background: var(--sp-accent, #FF4D4D); color: var(--on-accent, #12253F); } .bk-btn-primary:hover:not(:disabled) { background: var(--sp-accent-dk, #E63946); } .bk-btn-ghost { background: transparent; color: var(--sp-ink); border-color: var(--sp-line); } .bk-btn-ghost:hover { border-color: var(--sp-accent); color: var(--sp-accent); } .bk-btn-danger { background: #B3252F; color: #fff; } .bk-error { text-align: center; padding: 40px 20px; } .bk-error b { display: block; font-size: 16px; margin-bottom: 6px; } .bk-error p { color: var(--sp-muted); font-size: 13.5px; margin: 0 0 16px; } /* Skeleton — card-shaped, because cards are what is arriving. */ .bk-skeleton { display: grid; gap: 12px; } .bk-sk-card { padding: 18px; border-radius: 14px; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line); } .bk-sk-line { height: 11px; border-radius: 6px; margin-bottom: 10px; background: linear-gradient(90deg, var(--sp-surface-2) 25%, var(--sp-line) 37%, var(--sp-surface-2) 63%); background-size: 400% 100%; animation: bkShimmer 1.3s ease-in-out infinite; } .bk-sk-line:last-child { margin-bottom: 0; } .bk-sk-line.w40 { width: 40%; } .bk-sk-line.w55 { width: 55%; } .bk-sk-line.w70 { width: 70%; } @keyframes bkShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* Used only by the My Bookings detail overlay below (`.mb-detail .bk-close`, my-bookings.js) — the booking flow's own exit is the `.bk-back` link now. */ .bk-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.24); background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; flex: none; transition: background .18s ease; } .bk-close:hover { background: rgba(255,255,255,.14); } @keyframes bkRise { from { opacity: 0; transform: translateY(14px) scale(.99); } } /* =========================================================================== My Bookings =========================================================================== */ .mb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .mb-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--sp-line); background: var(--sp-surface); color: var(--sp-ink); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: border-color .18s ease, color .18s ease; } .mb-tab:hover { border-color: var(--sp-accent); } .mb-tab.is-on { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--on-accent, #12253F); } .mb-tab span { font-size: 11.5px; opacity: .75; font-variant-numeric: tabular-nums; } .mb-list { display: grid; gap: 12px; } .mb-card { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(10,37,64,.04), 0 8px 24px rgba(10,37,64,.05); transition: transform .18s ease, box-shadow .18s ease; } .mb-card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(10,37,64,.07), 0 16px 40px rgba(10,37,64,.1); } /* Cancelled rows stay in the list but stop competing for attention. */ .mb-card.is-cancelled { opacity: .68; } .mb-kind { display: grid; justify-items: center; gap: 5px; min-width: 74px; color: var(--sp-accent); } .mb-kind span { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-muted); } .mb-main { min-width: 0; } .mb-main h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; } .mb-main p { margin: 0 0 9px; font-size: 13px; color: var(--sp-muted); } .mb-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11.5px; color: var(--sp-muted); } .mb-facts b { display: block; font-size: 13.5px; color: var(--sp-ink); font-variant-numeric: tabular-nums; } .mb-right { text-align: right; display: grid; gap: 8px; justify-items: end; } .mb-status { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; } .mb-status.is-confirmed { color: var(--sp-emerald); background: color-mix(in srgb, var(--sp-emerald) 14%, transparent); } .mb-status.is-cancelled { color: var(--sp-accent); background: color-mix(in srgb, var(--sp-accent) 13%, transparent); } /* Shown where the Pay button would be, when a pending booking cannot be paid: its money was refunded, or the hold ran out. Quiet on purpose -- it explains an absence, and should not compete with the actions beside it. */ .mb-unpayable { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--sp-muted, #6b7280); align-self: center; padding: 4px 8px; border: 1px dashed currentColor; border-radius: 4px; white-space: nowrap; opacity: .85; } .mb-total { font-size: 19px; } .mb-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } .mb-actions .tx-btn { padding: 8px 13px; font-size: 12.5px; } .mb-actions .is-danger:hover { border-color: #B3252F; color: #B3252F; } .mb-empty { text-align: center; padding: 56px 24px; background: var(--sp-surface); border: 1px dashed var(--sp-line); border-radius: 16px; } .mb-empty-mark { color: var(--sp-muted); margin-bottom: 10px; } .mb-empty h2 { margin: 0 0 8px; font-size: 19px; } .mb-empty p { margin: 0 auto 20px; max-width: 42ch; color: var(--sp-muted); font-size: 14px; line-height: 1.6; } .mb-empty-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .mb-overlay { position: fixed; inset: 0; z-index: 300; display: none; padding: 24px; background: rgba(6,12,24,.55); backdrop-filter: blur(3px); overflow: auto; } .mb-overlay.is-open { display: block; } .mb-detail { max-width: 720px; margin: 0 auto; padding: 22px; border-radius: 18px; background: var(--sp-bg); box-shadow: 0 24px 70px rgba(0,0,0,.38); animation: bkRise .3s cubic-bezier(.22,1,.36,1); } .mb-detail header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .mb-detail h2 { margin: 6px 0 3px; font-size: 20px; } .mb-detail header p { margin: 0; color: var(--sp-muted); font-size: 13.5px; } .mb-detail .bk-close { border-color: var(--sp-line); color: var(--sp-ink); } .mb-detail .bk-close:hover { background: var(--sp-surface-2); } .mb-kind-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--sp-accent); } .mb-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } @media (max-width: 700px) { .mb-card { grid-template-columns: auto 1fr; } .mb-right { grid-column: 1 / -1; text-align: left; justify-items: start; } .mb-actions { justify-content: flex-start; } .mb-overlay { padding: 0; } .mb-detail { border-radius: 0; min-height: 100vh; } } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* The fare rail moves under the step instead of being squeezed to a sliver. Horizontal spacing already comes from .bk-sheet's own clamp() padding at every width, so nothing here needs to re-add it. */ .bk-body { grid-template-columns: 1fr; } .bk-side { position: static; padding: 0; } .bk-rail-label { display: none; } /* dots alone once space is tight */ .bk-rail-step.is-now .bk-rail-label { display: inline; } .bk-flightsum-leg { padding-left: 0; border-left: none; } .bk-foot-total { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; margin-right: auto; white-space: nowrap; } .bk-foot-total:empty { display: none; } .bk-foot-total-label { font-size: 11px; font-weight: 700; color: var(--sp-muted, #5B6B82); } .bk-foot-total-amt { font-size: 17px; font-weight: 800; color: var(--sp-ink, #0A2540); } } @media (max-width: 560px) { .bk-grid, .bk-inline, .bk-tickgrid { grid-template-columns: 1fr; } .bk-choice { flex-wrap: wrap; } .bk-choice-price { text-align: left; } .bk-done-actions .bk-btn { flex: 1 1 46%; } /* Seat sizing at this width is set once, above, alongside the rest of the cabin's mobile treatment (padding, label/price font sizes) — not repeated here, which is what silently overrode it back down to 27px before. */ .bk-foot { flex-wrap: wrap; } .bk-foot-msg { order: -1; flex-basis: 100%; text-align: left; } } @media (prefers-reduced-motion: reduce) { .bk-sheet, .bk-in, .bk-in-back { animation: none; } .bk-sk-line { animation: none; } .bk-choice:hover, .bk-seat:hover:not(:disabled) { transform: none; } } /* -------------------------------------------------------------------------- Traveller step — the split card -------------------------------------------------------------------------- Built from the tokens and shapes already in this file (.bk-pax, .bk-btn, .bk-field) rather than a new visual language: OTHER DETAILS is the same card one level in, and the disclosure button is a .bk-field-width row, not a widget. There is no stepper or timeline here — the horizontal .bk-rail above already says where we are. -------------------------------------------------------------------------- */ /* Helper line under a control, e.g. "Enter as mentioned on your passport". */ .bk-field-hint { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; color: var(--sp-muted, #5B6B82); } .bk-field.is-invalid-wrap .bk-field-hint { color: var(--sp-coral-dark, #C0392B); } /* The nested "OTHER DETAILS" card. */ .bk-subcard { margin-top: 16px; padding: 14px 16px; background: var(--sp-surface-2, #F1F5F9); border: 1px solid var(--sp-line, rgba(10, 37, 64, .1)); border-radius: 12px; } .bk-subcard-title { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted, #5B6B82); } /* Disclosure — "+ Passport details" / "+ Frequent flyer number". */ .bk-disclose { margin-top: 12px; } .bk-subcard .bk-disclose:first-of-type { margin-top: 0; } .bk-disclose-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; cursor: pointer; background: var(--sp-surface, #fff); border: 1px dashed var(--sp-line-strong, rgba(10, 37, 64, .22)); border-radius: 10px; font: inherit; color: var(--sp-ink, #0A2540); transition: border-color .2s ease, background .2s ease; } .bk-disclose-btn:hover { border-color: var(--sp-accent, #FF4D4D); } .bk-disclose-btn:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } .bk-disclose.is-open .bk-disclose-btn { border-style: solid; background: var(--sp-surface, #fff); } .bk-disclose-sign { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; font-weight: 800; line-height: 1; background: var(--sp-accent-soft, rgba(255, 77, 77, .12)); color: var(--sp-accent, #FF4D4D); } .bk-disclose-label { font-size: 14px; font-weight: 700; } .bk-disclose-hint { margin-left: auto; font-size: 12px; color: var(--sp-muted, #5B6B82); text-align: right; } .bk-disclose-panel { padding: 14px 2px 2px; } /* Opens with height, not opacity: the fields below must not jump. */ .bk-disclose.is-open .bk-disclose-panel { animation: bkDisclose .22s ease-out; } @keyframes bkDisclose { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* "Passenger details found" after a passport lookup. */ .bk-disclose-note { margin: 0 0 10px; font-size: 13px; color: var(--sp-muted, #5B6B82); } .bk-disclose-note:empty { display: none; } .bk-disclose-note.is-ok { color: var(--sp-emerald, #12B76A); font-weight: 700; } /* Passport scan — "Upload Passport" above the manual fields. The file input is visually hidden, not `hidden`, so it stays in the tab order: a keyboard user tabs to it and opens the file picker with Space/Enter exactly as a sighted mouse user clicks the label, and :focus-visible on the label (via the input->label sibling order in the markup) shows where they are. */ .bk-scan { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--sp-surface-2, #F1F5F9); border: 1px solid var(--sp-line, rgba(10, 37, 64, .1)); } .bk-scan-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .bk-scan-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--sp-header, #0A2540); background: var(--sp-surface, #FFFFFF); border: 1px solid var(--sp-line, rgba(10, 37, 64, .1)); transition: border-color .15s ease, color .15s ease; } .bk-scan-btn:hover { border-color: var(--sp-accent, #FF4D4D); color: var(--sp-accent, #FF4D4D); } .bk-scan-input:focus-visible + .bk-scan-btn { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } .bk-scan-btn.is-busy { cursor: progress; opacity: .75; } .bk-scan-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--sp-muted, #5B6B82); } .bk-scan-msg { margin: 0; font-size: 13px; font-weight: 700; } .bk-scan-msg.is-ok { color: var(--sp-emerald, #12B76A); } .bk-scan-msg.is-bad { margin-top: 8px; color: var(--sp-coral-dark, #C0392B); font-weight: 600; } .bk-scan.is-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .bk-scan.is-error { border-color: var(--sp-coral-dark, #C0392B); } /* Notice above the traveller list, e.g. the international passport rule. */ .bk-note { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; } .bk-note-info { background: var(--sp-info-soft, rgba(37, 99, 235, .08)); border: 1px solid var(--sp-info, rgba(37, 99, 235, .28)); color: var(--sp-ink, #0A2540); } /* Add / remove travellers. */ .bk-addpax { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .bk-pax-remove { margin-left: auto; padding: 4px 10px; cursor: pointer; background: none; border: 1px solid var(--sp-line, rgba(10, 37, 64, .1)); border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; color: var(--sp-muted, #5B6B82); } .bk-pax-remove:hover { border-color: var(--sp-coral-dark, #C0392B); color: var(--sp-coral-dark, #C0392B); } .bk-pax-remove:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } /* "Add these travellers to My Traveller List". */ .bk-savelist { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: var(--sp-surface-2, #F1F5F9); border: 1px solid var(--sp-line, rgba(10, 37, 64, .1)); cursor: pointer; } .bk-savelist input { margin-top: 2px; flex: none; } .bk-savelist b { display: block; font-size: 14px; color: var(--sp-ink, #0A2540); } .bk-savelist em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--sp-muted, #5B6B82); } /* -------------------------------------------------------------------------- Mobile — one column, per the existing 560px breakpoint above. -------------------------------------------------------------------------- */ @media (max-width: 560px) { .bk-disclose-btn { flex-wrap: wrap; } /* The hint drops under the label rather than being squeezed beside it. */ .bk-disclose-hint { margin-left: 32px; width: 100%; text-align: left; margin-top: 2px; } .bk-subcard { padding: 12px; } .bk-addpax .bk-btn { flex: 1 1 100%; } .bk-pax-remove { margin-left: 0; } .bk-pax-head { flex-wrap: wrap; gap: 6px; } } /* -------------------------------------------------------------------------- Seat states — Available / Selected / Occupied / Paid -------------------------------------------------------------------------- The legend now names the four states the SERVER returns, rather than the seat's physical position (window/middle/aisle), which was never a state a customer had to act on. The position tints stay underneath as a reading aid; these four sit on top of them. -------------------------------------------------------------------------- */ /* Available is the base .bk-seat — declared so the legend swatch has a fill. */ .bk-seat.is-available { background: var(--sp-surface-2, #F1F5F9); } /* Costs extra, still free to take. Dotted outline reads as "conditional". */ .bk-seat.is-paid { background: color-mix(in srgb, var(--sp-gold, #E9A23B) 20%, transparent); border-color: color-mix(in srgb, var(--sp-gold, #E9A23B) 55%, transparent); border-style: dotted; } .bk-seat.is-occupied { background: var(--sp-line); color: transparent; cursor: not-allowed; border-style: dashed; } .bk-seat.is-selected { background: var(--sp-accent, #FF4D4D); border-color: var(--sp-accent, #FF4D4D); color: var(--on-accent, #12253F); } /* Selected must win whatever else the seat is. */ .bk-seat.is-selected.is-paid { border-style: solid; } /* -------------------------------------------------------------------------- Per-traveller seat assignment -------------------------------------------------------------------------- */ .bk-seat-forwho { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted, #5B6B82); } .bk-paxseats { display: grid; gap: 8px; margin-bottom: 18px; } .bk-paxseat { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; cursor: pointer; font: inherit; background: var(--sp-surface, #fff); border: 1.5px solid var(--sp-line, rgba(10, 37, 64, .1)); border-radius: 12px; color: var(--sp-ink, #0A2540); transition: border-color .2s ease, background .2s ease; } .bk-paxseat:hover { border-color: var(--sp-accent, #FF4D4D); } .bk-paxseat:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } .bk-paxseat.is-active { border-color: var(--sp-accent, #FF4D4D); background: var(--sp-accent-soft, rgba(255, 77, 77, .08)); } .bk-paxseat-who b { display: block; font-size: 14px; } .bk-paxseat-who span { display: block; font-size: 12px; color: var(--sp-muted, #5B6B82); } .bk-paxseat-seat { text-align: right; flex: none; } .bk-paxseat-seat b { display: block; font-size: 15px; } .bk-paxseat-seat span { display: block; font-size: 12px; color: var(--sp-muted, #5B6B82); } /* -------------------------------------------------------------------------- Add-ons — grouped, with what the fare already includes -------------------------------------------------------------------------- */ .bk-addon-group { margin-bottom: 20px; } .bk-addon-group-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-muted, #5B6B82); } .bk-includes { display: grid; gap: 8px; } .bk-included { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--sp-surface-2, #F1F5F9); border: 1px solid var(--sp-line, rgba(10, 37, 64, .1)); border-radius: 12px; } .bk-included .bk-addon-body { flex: 1; min-width: 0; } .bk-included .bk-addon-body b { display: block; font-size: 14px; } .bk-included .bk-addon-body span { display: block; font-size: 12px; color: var(--sp-muted, #5B6B82); } .bk-included-tag { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--sp-emerald, #12B76A) 16%, transparent); color: var(--sp-emerald, #12B76A); } /* -------------------------------------------------------------------------- Review — panel headers with Edit, traveller cards, journey facts -------------------------------------------------------------------------- */ .bk-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .bk-panel-head h3 { margin: 0; } .bk-edit { margin-left: auto; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; background: none; border: 1px solid var(--sp-line, rgba(10, 37, 64, .1)); border-radius: 999px; color: var(--sp-accent, #FF4D4D); } .bk-edit + .bk-edit { margin-left: 0; } .bk-edit:hover { border-color: var(--sp-accent, #FF4D4D); } .bk-edit:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } .bk-review-paxlist { display: grid; gap: 10px; } .bk-review-pax { padding: 12px 14px; border-radius: 12px; background: var(--sp-surface-2, #F1F5F9); border: 1px solid var(--sp-line, rgba(10, 37, 64, .1)); } .bk-review-pax header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .bk-review-pax header b { display: block; font-size: 12px; color: var(--sp-muted, #5B6B82); } .bk-review-pax header span { font-size: 14px; font-weight: 700; } /* Definition list, two columns on desktop and stacked on mobile. */ .bk-review-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; } .bk-review-dl > div { min-width: 0; } .bk-review-dl dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-muted, #5B6B82); } .bk-review-dl dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; } .bk-journey { margin-top: 14px; } .bk-review-seats { display: grid; gap: 8px; } .bk-review-seat { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sp-surface-2, #F1F5F9); border: 1px solid var(--sp-line, rgba(10,37,64,.1)); border-radius: 12px; font-size: 13.5px; } .bk-review-seat > span:first-child { flex: 1; color: var(--sp-muted); } .bk-review-seat b { font-size: 14.5px; font-variant-numeric: tabular-nums; } .bk-review-seat > span:last-child:not(:first-child) { color: var(--sp-muted); font-size: 12px; } /* -------------------------------------------------------------------------- Coupon, inside the Fare Summary card -------------------------------------------------------------------------- */ .bk-coupon { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--sp-line, rgba(10, 37, 64, .18)); } .bk-coupon-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; } .bk-coupon-row { display: flex; gap: 8px; } .bk-coupon-row input { flex: 1; min-width: 0; padding: 9px 11px; font: inherit; font-size: 13px; text-transform: uppercase; background: var(--sp-surface, #fff); border: 1.5px solid var(--sp-line, rgba(10, 37, 64, .14)); border-radius: 9px; color: var(--sp-ink, #0A2540); } .bk-coupon-row input:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 1px; } .bk-coupon-apply { flex: none; padding: 9px 16px; font-size: 13px; } .bk-coupon-link { display: inline-block; margin-top: 9px; padding: 0; cursor: pointer; background: none; border: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--sp-accent, #FF4D4D); text-decoration: underline; } .bk-coupon-link:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } .bk-coupon-list { display: grid; gap: 6px; margin-top: 10px; } .bk-coupon-offer { display: block; width: 100%; padding: 9px 11px; text-align: left; cursor: pointer; font: inherit; background: var(--sp-surface-2, #F1F5F9); border: 1px dashed var(--sp-line-strong, rgba(10, 37, 64, .22)); border-radius: 9px; color: var(--sp-ink, #0A2540); } .bk-coupon-offer:hover { border-color: var(--sp-accent, #FF4D4D); border-style: solid; } .bk-coupon-offer:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } .bk-coupon-offer b { display: block; font-size: 13px; } .bk-coupon-offer span { display: block; font-size: 11.5px; color: var(--sp-muted, #5B6B82); } .bk-coupon-msg { margin: 8px 0 0; font-size: 12.5px; } .bk-coupon-msg:empty { display: none; } .bk-coupon-msg.is-ok { color: var(--sp-emerald, #12B76A); } .bk-coupon-msg.is-error { color: var(--sp-coral-dark, #C0392B); } .bk-coupon-note { margin: 8px 0 0; font-size: 12px; color: var(--sp-muted, #5B6B82); } .bk-coupon.is-applied .bk-coupon-applied { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px; background: color-mix(in srgb, var(--sp-emerald, #12B76A) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sp-emerald, #12B76A) 40%, transparent); } .bk-coupon-tag { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-muted, #5B6B82); } .bk-coupon-applied b { font-size: 13.5px; } .bk-coupon-remove { margin-left: auto; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; background: none; border: 1px solid var(--sp-line, rgba(10, 37, 64, .18)); border-radius: 999px; color: var(--sp-coral-dark, #C0392B); } .bk-coupon-remove:hover { border-color: var(--sp-coral-dark, #C0392B); } .bk-coupon-remove:focus-visible { outline: 2px solid var(--sp-accent, #FF4D4D); outline-offset: 2px; } /* -------------------------------------------------------------------------- Mobile — the flow at 375px. Single column, nothing off the side. -------------------------------------------------------------------------- */ @media (max-width: 640px) { /* The Fare Summary drops below the step instead of sitting beside it. Horizontal spacing comes from .bk-sheet's own clamp() padding. */ .bk-body { grid-template-columns: 1fr; } .bk-side { position: static; padding: 0; } } @media (max-width: 560px) { .bk-review-dl { grid-template-columns: 1fr; } .bk-paxseat { flex-wrap: wrap; } .bk-paxseat-seat { text-align: left; } .bk-coupon-row { flex-wrap: wrap; } .bk-coupon-apply { width: 100%; } .bk-panel-head { flex-wrap: wrap; } .bk-edit, .bk-edit + .bk-edit { margin-left: 0; } .bk-included { flex-wrap: wrap; } /* The cabin is the one thing that genuinely cannot shrink to 375px, so it scrolls inside its own box rather than pushing the page sideways. */ .bk-cabin { overflow-x: auto; } } /* ========================================================================== REVIEW SCREEN (flights) — built to the supplied reference -------------------------------------------------------------------------- Only .bk-rv and .rv-* live here, so the other four products keep the Review screen they had. Colours are the existing --sp-* tokens, which service-page.css already redefines under prefers-color-scheme: dark, so dark mode needs no second set of rules here. ========================================================================== */ .bk-rv { --rv-gap: 14px; } /* .bk-flightsum sets display:flex, which outranks the [hidden] attribute's UA display:none — so hiding it from JS needs this rule to actually take. */ .bk-flightsum[hidden] { display: none; } /* A slightly wider main column than the flow default, for the reference's roughly 70/30 split. MUST stay inside the min-width query. `.bk-body:has(.bk-rv)` outranks the plain `.bk-body { grid-template-columns: 1fr }` in the max-width:900px block below, so without this the two-column grid survives onto a phone and squeezes the main column to about 23px. */ @media (min-width: 901px) { .bk-body:has(.bk-rv) { grid-template-columns: minmax(0, 1fr) minmax(300px, 30%); gap: 20px; } } /* ---- itinerary strip ---- */ /* padding:0 is load-bearing — main.css carries a landing-page `section { padding: 110px 0 }` and every card on this screen is a
. */ .rv-itin { margin: 0 0 18px; padding: 0; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line); border-radius: 14px; overflow: hidden; } .rv-itin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sp-line); } .rv-itin-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--sp-ink); } .rv-chip { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--sp-surface-2, #F1F5F9); color: var(--sp-muted); } .rv-itin-segs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .rv-itin-segs > .rv-seg + .rv-seg { border-left: 1px solid var(--sp-line); } .rv-seg { padding: 14px 18px; min-width: 0; } .rv-seg-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .rv-seg-n { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--sp-accent-soft, rgba(255,77,77,.12)); color: var(--sp-accent-dk, #E63946); font-size: 11px; font-weight: 800; } .rv-seg-route { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--sp-ink); } .rv-seg-arrow { color: var(--sp-muted); } .rv-seg-when { font-size: 12.5px; color: var(--sp-muted); margin-bottom: 8px; } .rv-seg-air { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sp-muted); min-width: 0; flex-wrap: wrap; } .rv-seg-airline { font-weight: 700; color: var(--sp-ink); } .rv-logo { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--sp-surface-2, #F1F5F9); overflow: hidden; } .rv-logo img { width: 100%; height: 100%; object-fit: contain; } .rv-logo-fb { font-size: 10px; font-weight: 800; color: var(--sp-muted); } /* ---- title row ---- */ .rv-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 14px; } .rv-title { margin: 0 0 3px; font-size: 20px; font-weight: 800; color: var(--sp-ink); } .rv-sub { margin: 0; font-size: 13.5px; color: var(--sp-muted); } .rv-ghostbtn { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; background: var(--sp-surface, #fff); color: var(--sp-ink); border: 1px solid var(--sp-line); border-radius: 10px; transition: border-color .18s ease, color .18s ease; } .rv-ghostbtn:hover { border-color: var(--sp-accent, #FF4D4D); color: var(--sp-accent-dk, #E63946); } /* ---- cards ---- */ .rv-card { margin: 0 0 var(--rv-gap); padding: 0; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line); border-radius: 14px; overflow: hidden; } .rv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--sp-line); } .rv-card-head h3 { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 800; color: var(--sp-ink); text-transform: none; letter-spacing: 0; } .rv-head-right { display: flex; align-items: center; gap: 12px; } .rv-card-body { padding: 16px 18px; } .rv-verify { font-size: 12.5px; font-weight: 700; } .rv-verify.is-ok { color: var(--sp-emerald, #12B76A); } .rv-verify.is-warn { color: var(--sp-accent-dk, #E63946); } .rv-edit { padding: 2px 4px; background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--sp-accent-dk, #E63946); border-radius: 6px; } .rv-edit:hover { text-decoration: underline; } /* traveller */ .rv-pax { display: flex; align-items: flex-start; gap: 13px; } .rv-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--sp-accent-soft, rgba(255,77,77,.12)); color: var(--sp-accent-dk, #E63946); font-size: 13.5px; font-weight: 800; } .rv-avatar-sm { width: 30px; height: 30px; font-size: 11.5px; } .rv-pax-main { min-width: 0; } .rv-pax-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; } .rv-pax-name b { font-size: 15px; color: var(--sp-ink); } .rv-tag { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--sp-surface-2, #F1F5F9); color: var(--sp-muted); } .rv-pax-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--sp-muted); } .rv-pax-meta i { font-style: normal; opacity: .5; } .rv-warn { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--sp-accent-dk, #E63946); } .rv-pax-more { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--sp-line); } .rv-pax-more b { display: block; font-size: 14px; color: var(--sp-ink); } .rv-pax-more div span { font-size: 12.5px; color: var(--sp-muted); } /* rows (seats / add-ons) */ .rv-rows { padding: 0; } .rv-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; } .rv-row + .rv-row { border-top: 1px solid var(--sp-line); } .rv-row-lead { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; } .rv-row-lead b { display: block; font-size: 13.5px; color: var(--sp-ink); } .rv-row-lead > div > span { font-size: 12.5px; color: var(--sp-muted); } .rv-row-facts { display: flex; align-items: center; gap: 26px; flex: none; } .rv-row-facts > div { display: flex; flex-direction: column; gap: 2px; } .rv-row-facts span { font-size: 11.5px; color: var(--sp-muted); } .rv-row-facts b { font-size: 13.5px; color: var(--sp-ink); } .rv-row-facts b.rv-seat { color: var(--sp-accent-dk, #E63946); } .rv-row-amt { flex: none; font-size: 14px; font-weight: 800; color: var(--sp-ink); } /* contact */ .rv-contact { display: flex; gap: 46px; flex-wrap: wrap; } .rv-contact > div { display: flex; flex-direction: column; gap: 3px; } .rv-contact span { font-size: 11.5px; color: var(--sp-muted); } .rv-contact b { font-size: 13.5px; font-weight: 700; color: var(--sp-ink); } .rv-note { margin: 13px 0 0; font-size: 12.5px; font-weight: 600; color: var(--sp-emerald, #12B76A); } /* important information */ .rv-info-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .rv-info-list li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.55; color: var(--sp-muted); } .rv-info-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--sp-emerald, #12B76A); font-weight: 800; } /* ---- fare summary rail ---- */ .rv-fare-trip { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--sp-ink); } .rv-fare-trip span { font-weight: 600; color: var(--sp-muted); } .rv-fare-seg { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--sp-ink); } .rv-fare-seg > span:first-child { display: flex; align-items: center; gap: 7px; } .rv-fare-seg i { display: grid; place-items: center; width: 17px; height: 17px; flex: none; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; background: var(--sp-accent-soft, rgba(255,77,77,.12)); color: var(--sp-accent-dk, #E63946); } .rv-fare-addons { margin: 4px 0; border-top: 1px solid var(--sp-line); padding-top: 8px; } .rv-fare-addons summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sp-ink); list-style: none; } .rv-fare-addons summary::-webkit-details-marker { display: none; } .bk-price-line.is-sub { padding-left: 12px; font-size: 12.5px; color: var(--sp-muted); } .rv-fare-incl { margin: 2px 0 12px; font-size: 11.5px; color: var(--sp-muted); text-align: right; } /* benefit cards */ .rv-benefits { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .rv-benefits li { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--sp-surface, #fff); border: 1px solid var(--sp-line); border-radius: 12px; } .rv-benefits b { display: block; font-size: 13px; color: var(--sp-ink); } .rv-benefits span { font-size: 12px; color: var(--sp-muted); line-height: 1.45; } /* ---- wide bottom action bar ---- */ .bk-foot.is-rich { gap: 20px; padding-top: 12px; padding-bottom: 12px; } .bk-foot.is-rich .bk-foot-msg { flex: none; } .bk-foot-rich { display: flex; align-items: center; gap: 26px; flex: 1; min-width: 0; } .rv-foot-trust { display: flex; align-items: center; gap: 10px; flex: none; } .rv-foot-trust b { display: block; font-size: 12.5px; color: var(--sp-ink); } .rv-foot-trust span { font-size: 11.5px; color: var(--sp-muted); } .rv-foot-legs { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .rv-foot-legs::-webkit-scrollbar { display: none; } .rv-foot-leg { display: flex; align-items: center; gap: 8px; flex: none; } .rv-foot-leg b { display: block; font-size: 12.5px; color: var(--sp-ink); white-space: nowrap; } .rv-foot-leg > div > span { font-size: 11.5px; color: var(--sp-muted); white-space: nowrap; } .rv-foot-total { display: flex; flex-direction: column; align-items: flex-end; flex: none; } .rv-foot-total > span:first-child { font-size: 11.5px; color: var(--sp-muted); } .rv-foot-total b { font-size: 19px; font-weight: 800; line-height: 1.15; color: var(--sp-accent-dk, #E63946); } .rv-foot-total > span:last-child { font-size: 11px; color: var(--sp-muted); } .bk-foot-cta { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; } .bk-foot-note { font-size: 11px; color: var(--sp-muted); } .bk-foot-note:empty { display: none; } /* ---- responsive ---- */ @media (max-width: 1100px) { .bk-foot-rich .rv-foot-legs { display: none; } } @media (max-width: 880px) { .rv-itin-segs > .rv-seg + .rv-seg { border-left: none; border-top: 1px solid var(--sp-line); } .rv-titlerow { flex-direction: column; align-items: stretch; } .rv-ghostbtn { align-self: flex-start; } .bk-foot.is-rich { flex-wrap: wrap; gap: 10px; } /* flex-basis wins over width in a flex row, so `width:100%` alone leaves this sharing the line instead of becoming its own. */ .bk-foot-rich { order: -1; flex: 1 0 100%; justify-content: space-between; } .rv-foot-trust { display: none; } /* .bk-foot-total is the narrow-screen echo of the fare total; the rich bar already carries that total, so showing both prints it twice. */ .bk-foot.is-rich .bk-foot-total { display: none; } .bk-foot-cta { flex: 1; } .bk-foot-cta .bk-btn { width: 100%; } /* The message slot is flex:1 and keeps that width even with nothing in it, which is width taken from the primary action on the narrowest screens. */ .bk-foot.is-rich .bk-foot-msg:empty { display: none; } } @media (max-width: 560px) { .rv-row { flex-wrap: wrap; } .rv-row-facts { gap: 18px; } .rv-contact { gap: 22px; } /* "One Way Trip" + its chip + the button do not share one line at 375px; letting the title own a row stops both of them wrapping mid-phrase. */ .rv-itin-head { flex-wrap: wrap; gap: 10px; } .rv-itin-title { width: 100%; } } /* A refused quote is a problem to act on, not a footnote. */ .rv-fare .bk-price-note.is-error { margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: var(--sp-accent-soft, rgba(255,77,77,.12)); color: var(--sp-accent-dk, #E63946); font-weight: 700; }