/* ===========================================================================
   booking-ref.css — the flight booking screens, built to the supplied
   reference screenshots (Traveller Details / Seats / Add-ons / Review).
   ===========================================================================
   EVERY RULE HERE IS SCOPED TO `.bk-sheet.is-flight`. The booking engine is
   shared by five products (booking-flow.js), so an unscoped rule on .bk-rail
   or .bk-foot would redesign the hotel, cruise, package and visa flows too.
   `is-flight` comes from flow.kind in booking-flow.js's shellHtml(); the other
   four products never get it and keep booking.css exactly as it was.

   Colours are the page's own --sp-* tokens (bridged onto main.css's palette in
   booking-card.css) — nothing new is invented. This page is deliberately
   light-only; see the comment at the top of flights.html.
   =========================================================================== */

.bk-sheet.is-flight {
  /* The reference is full-width with a ~32px gutter, not a narrow centred
     column. 1560 is where it stops growing so a very wide monitor does not
     stretch the fare rail into a billboard. */
  max-width: 1560px;
  padding: 18px clamp(14px, 2.2vw, 32px) 0;
  --bkf-line: var(--sp-line, rgba(10,37,64,.10));
  --bkf-ink: var(--sp-ink, #0A2540);
  --bkf-muted: var(--sp-muted, #5B6B82);
  --bkf-red: var(--sp-accent-dk, #E63946);
  --bkf-red-soft: rgba(230,57,70,.09);
  --bkf-green: var(--sp-emerald, #12B76A);
  --bkf-green-ink: #0E8A52;
  --bkf-green-soft: rgba(18,183,106,.10);
  --bkf-card: 12px;
}

/* The reference has no back-link / kicker / booking title above the stepper —
   the stepper is the first thing under the site header. Leaving the flow is
   the itinerary card's "Modify Flights" (and Escape), both still wired. */
.bk-sheet.is-flight .bk-pagehead { display: none; }

/* ==========================================================================
   0. THE SITE HEADER, WHILE A BOOKING IS OPEN
   --------------------------------------------------------------------------
   flights.html wears the LANDING SHELL, whose header is a transparent overlay
   designed to sit on a dark hero: 128px tall, white links, no background
   (main.css `header { background: rgba(0,0,0,0) }`). The booking screens are
   light, so left alone it is white-on-white and it covers the stepper.

   The reference shows a solid white bar with dark navigation, so that is what
   it becomes — but only while `body.bk-inpage` is set, i.e. only while a
   booking is open. The landing page, the hero and the results list are all
   untouched.

   !important is load-bearing on the three properties bindScrollFade() writes
   as INLINE styles on every scroll event (hero-shell.js); nothing else here
   needs it.
   ========================================================================== */
body.bk-inpage #siteHeader {
  background-color: #fff !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(10,37,64,.10) !important;
  /* The bar's own ink, because `.pm-login` takes `color: inherit` from it
     (profile-menu.css) and main.css's `header` declares #fff for the state
     where the bar floats over the hero film. Painted white here, that would be
     white on white — the Login link vanishing the moment a booking opened. The
     three rules below name the elements that set their own colour; this is for
     everything that does not. flights.html keeps a NAVY bar through the
     booking and overrides this in flights-ref.css. */
  color: var(--navy, #0A2540);
}
body.bk-inpage #siteHeader nav.wrap { height: 72px; }
/* The booking bar keeps the mark a little tighter to the edge than the rest
   of the site — it is a working screen, and the row carries a stepper. It
   still grew with everything else. */
body.bk-inpage #siteHeader .logo { margin-left: 12px; }
body.bk-inpage #siteHeader .logo-mark-img { height: 64px; }
body.bk-inpage #siteHeader .navlinks a,
body.bk-inpage #siteHeader .nav-login { color: var(--navy, #0A2540); }
body.bk-inpage #siteHeader .navlinks a:hover { color: var(--coral, #FF4D4D); }
body.bk-inpage #siteHeader .nav-partner-mark {
  color: var(--navy, #0A2540); border-color: rgba(10,37,64,.18);
}
body.bk-inpage #siteHeader .hamburger span { background: var(--navy, #0A2540); }

/* The header is position:fixed, so the flow has to start below it. The height
   is measured live (setHeaderHeightVar in booking-flow.js) because the nav
   wraps on narrow widths. */
body.bk-inpage #bkRoot { padding-top: var(--bk-header-h, 72px); }

/* main.css sets `overflow-x: hidden` on <body>. That makes body a scroll
   container, and a scroll container that cannot scroll is where
   `position: sticky` goes to die — which is why the action bar sat at the end
   of the page instead of pinned to the bottom of the window. `clip` does the
   same job (no horizontal overflow) WITHOUT creating a scroll container, so
   the bar sticks and the fare rail follows the page again. */
body.bk-inpage { overflow-x: clip; overflow-y: visible; }

/* ==========================================================================
   1. STEPPER
   ========================================================================== */
.bk-sheet.is-flight .bk-rail {
  display: flex; align-items: center; gap: 0;
  margin: 0 0 16px; padding: 2px 0;
}
.bk-sheet.is-flight .bk-rail-step {
  display: flex; align-items: center; gap: 9px; padding: 0; flex: none;
  border: 1px solid transparent; border-radius: 999px;
}
/* The connector: a hairline that eats all the free space, so seven steps
   spread evenly across the full content width as they do in the reference. */
.bk-sheet.is-flight .bk-rail-step:not(:last-child) { flex: 1 1 auto; min-width: 0; }
/* …except the one you are on: its label is nowrap, so letting it shrink below
   its own content painted "Traveller Details" straight over the next dot on a
   375px screen. The rail already scrolls (booking.css) when the row cannot
   fit, and paint() scrolls the current step into view. */
.bk-sheet.is-flight .bk-rail-step.is-now { flex: none; }
.bk-sheet.is-flight .bk-rail-step:not(:last-child)::after {
  content: ''; flex: 1 1 auto; min-width: 16px; height: 1px; margin: 0 10px;
  background: var(--bkf-line); align-self: center;
}

.bk-sheet.is-flight .bk-rail-dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; flex: none; line-height: 1;
  background: #F1F3F7; color: #98A2B3; border: 1px solid var(--bkf-line);
}
.bk-sheet.is-flight .bk-rail-label {
  font-size: 13.5px; font-weight: 600; color: #98A2B3; white-space: nowrap;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}

/* Done — white disc, green ring, green tick. The connector stays neutral: in
   the reference every line between steps is the same hairline grey. */
.bk-sheet.is-flight .bk-rail-step.is-done .bk-rail-dot {
  background: #fff; color: var(--bkf-green); border: 1.5px solid var(--bkf-green);
  font-size: 13px;
}
.bk-sheet.is-flight .bk-rail-step.is-done:not(:last-child)::after { background: var(--bkf-line); }
.bk-sheet.is-flight .bk-rail-step.is-done .bk-rail-label { color: var(--bkf-ink); font-weight: 600; }

/* Current — solid red disc in a white pill, red label with a red underline. */
.bk-sheet.is-flight .bk-rail-step.is-now {
  background: #fff; border-color: var(--bkf-line); padding: 4px 14px 4px 4px;
  box-shadow: 0 1px 2px rgba(10,37,64,.05);
}
.bk-sheet.is-flight .bk-rail-step.is-now .bk-rail-dot {
  background: var(--sp-accent, #FF4D4D); border-color: var(--sp-accent, #FF4D4D); color: var(--on-accent, #12253F);
}
.bk-sheet.is-flight .bk-rail-step.is-now .bk-rail-label {
  color: var(--bkf-red); font-weight: 700; border-bottom-color: var(--bkf-red);
}
/* A cleared step is navigable — the reference shows no Back control in the
   action bar, so the stepper is what walks the traveller back. Identical
   pixels either way: this only makes the row a button. */
.bk-sheet.is-flight .bk-rail-go {
  display: flex; align-items: center; gap: 9px; padding: 0; margin: 0;
  background: none; border: none; font: inherit; cursor: pointer; color: inherit;
}
.bk-sheet.is-flight .bk-rail-go:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 4px; border-radius: 999px; }
.bk-sheet.is-flight .bk-rail-go:hover .bk-rail-label { color: var(--bkf-red); }

/* ==========================================================================
   2. ITINERARY CARD — persistent above every step
   ========================================================================== */
/* padding:0 is load-bearing: main.css carries a landing-page
   `section { padding: 110px 0 }` and these cards are <section>s. */
.bkf-itin {
  margin: 0 0 16px; padding: 0; background: #fff;
  border: 1px solid var(--bkf-line); border-radius: var(--bkf-card); overflow: hidden;
}
.bkf-itin-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--bkf-line);
}
.bkf-itin-titles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.bkf-itin-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--bkf-ink); line-height: 1.2; }
.bkf-itin.is-review .bkf-itin-title { color: var(--bkf-red); }
.bkf-chip {
  padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: #F1F3F7; color: var(--bkf-muted); white-space: nowrap;
}
.bkf-itin-meta { font-size: 13px; color: var(--bkf-muted); white-space: nowrap; }
.bkf-itin-meta i { font-style: normal; padding: 0 6px; opacity: .55; }

.bkf-itin-segs { display: flex; align-items: stretch; }
.bkf-itin-segs .bkf-seg { flex: 1 1 0; min-width: 0; padding: 14px 18px 16px; }
.bkf-itin-segs .bkf-seg + .bkf-seg { border-left: 1px solid var(--bkf-line); }

/* ---- the leg -------------------------------------------------------------
   Two ends and a path, because that is the shape of the thing being checked.
   See itineraryHtml() in booking-products.js for why it stopped being three
   stacked lines of grey.
   ------------------------------------------------------------------------- */
.bkf-seg-head {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding-bottom: 12px; margin-bottom: 13px;
  border-bottom: 1px dashed var(--bkf-line);
}
.bkf-n {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 999px; background: var(--bkf-red-soft); color: var(--bkf-red);
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
}
.bkf-seg-carrier { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.bkf-seg-carrier b {
  font-size: 13.5px; font-weight: 700; color: var(--bkf-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bkf-seg-carrier > span { font-size: 12px; color: var(--bkf-muted); white-space: nowrap; }
/* Pushed to the far end rather than floated: the header is a flex row and the
   date is the only thing in it that belongs on the right. */
.bkf-seg-date {
  margin-left: auto; flex: none;
  font-size: 12px; font-weight: 600; color: var(--bkf-muted); white-space: nowrap;
}

.bkf-seg-leg { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bkf-leg-end { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: none; }
.bkf-leg-end.is-to { text-align: right; }
/* THE TIME IS THE BIGGEST THING IN THE CARD. It is what a traveller reads
   first and checks hardest, and tabular numerals stop 06:15 and 07:15 from
   sitting at different widths under each other. */
.bkf-leg-time {
  font-size: 19px; font-weight: 800; line-height: 1.15; color: var(--bkf-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.bkf-leg-code { font-size: 12.5px; font-weight: 700; color: var(--bkf-ink); letter-spacing: .04em; }
.bkf-leg-city {
  font-size: 11.5px; color: var(--bkf-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The path. It eats the space between the two ends, so the ends stay put and
   only the middle stretches when the card is wide. */
.bkf-leg-path {
  flex: 1 1 auto; min-width: 60px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.bkf-leg-dur { font-size: 11.5px; font-weight: 600; color: var(--bkf-muted); white-space: nowrap; }
.bkf-leg-dur:empty { display: none; }
/* The rule itself is the ::before/::after pair; the plane rides between them,
   which is what keeps it centred at any width without a fixed size. */
.bkf-leg-line { display: flex; align-items: center; gap: 5px; width: 100%; color: #A9B3C1; }
.bkf-leg-line::before, .bkf-leg-line::after {
  content: ''; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .55;
}
.bkf-leg-line svg { width: 15px; height: 15px; flex: none; }
.bkf-leg-stops { font-size: 11.5px; font-weight: 600; color: var(--bkf-muted); white-space: nowrap; }
/* A direct flight is the good outcome, so it is the one that gets a colour. */
.bkf-leg-stops.is-direct { color: var(--bkf-green-ink); }
/* The little plane between two legs, exactly as the reference draws it: it
   straddles the divider rather than taking a column of its own. */
.bkf-seg-link { position: relative; width: 0; flex: none; }
.bkf-seg-link svg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; padding: 4px; color: #A9B3C1;
  background: #fff; border-radius: 50%;
}

.bkf-logo {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 6px; background: #F1F3F7; overflow: hidden;
}
.bkf-logo img { width: 100%; height: 100%; object-fit: contain; }
.bkf-logo-fb { font-size: 9.5px; font-weight: 800; color: var(--bkf-muted); }

/* The outline button used by "Modify Flights" / "Edit Search" / "Edit All". */
.bkf-obtn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  background: #fff; color: var(--bkf-ink);
  border: 1px solid var(--bkf-line); border-radius: 8px;
  transition: border-color .18s ease, color .18s ease;
}
.bkf-obtn:hover { border-color: var(--sp-accent); color: var(--bkf-red); }
.bkf-obtn:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.bkf-obtn svg { width: 14px; height: 14px; flex: none; }

/* ==========================================================================
   3. TWO-COLUMN BODY
   ========================================================================== */
@media (min-width: 981px) {
  .bk-sheet.is-flight .bk-body { grid-template-columns: minmax(0, 1fr) 25.4%; gap: 18px; }
}
.bk-sheet.is-flight .bk-main { padding: 0 0 26px; }
.bk-sheet.is-flight .bk-side { padding: 0 0 26px; }

/* ==========================================================================
   4. THE MAIN CARD (one per step) + shared bits
   ========================================================================== */
.bkf-card {
  margin: 0 0 14px; padding: 0; background: #fff;
  border: 1px solid var(--bkf-line); border-radius: var(--bkf-card); overflow: hidden;
}
.bkf-card:last-child { margin-bottom: 0; }
.bkf-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px 16px;
}
.bkf-card-head.has-rule { border-bottom: 1px solid var(--bkf-line); }
.bkf-h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--bkf-ink); line-height: 1.25; }
.bkf-sub { margin: 5px 0 0; font-size: 13px; color: var(--bkf-muted); line-height: 1.45; }
.bkf-card-body { padding: 18px 20px 20px; }

/* the "Passenger [ 1. Rahul Sharma v ]" control in the card head */
.bkf-paxpick { display: flex; align-items: center; gap: 10px; flex: none; }
.bkf-paxpick > span { font-size: 13px; color: var(--bkf-muted); }
.bkf-paxpick select {
  min-width: 178px; height: 40px; padding: 0 32px 0 12px; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--bkf-ink); background-color: #fff;
  border: 1px solid var(--bkf-line); border-radius: 8px; outline: none;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235B6B82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.bkf-paxpick select:focus { border-color: var(--sp-accent); }

/* section head inside a card: icon + title + right-hand note */
.bkf-sect-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.bkf-sect-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--bkf-ink); }
.bkf-sect-head .bkf-hint { font-size: 12px; color: var(--bkf-muted); font-weight: 500; }
.bkf-ic { display: inline-grid; place-items: center; flex: none; color: var(--bkf-red); }
.bkf-ic svg { width: 18px; height: 18px; display: block; }

/* notice strips */
.bkf-strip {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
  border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: var(--bkf-ink);
}
.bkf-strip svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.bkf-strip.is-warn { background: #FFF8E8; border: 1px solid #F6E2B4; color: #6B5320; }
.bkf-strip.is-warn svg { color: #E0A020; }
.bkf-strip.is-info { background: #EEF5FF; border: 1px solid #D6E5FB; color: #24405F; }
.bkf-strip.is-info svg { color: #2F80ED; }
.bkf-strip-x {
  margin-left: auto; flex: none; background: none; border: none; cursor: pointer;
  color: #8FA3BC; font-size: 17px; line-height: 1; padding: 0 2px;
}
.bkf-strip-x:hover { color: var(--bkf-ink); }
.bkf-strip b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }

/* ==========================================================================
   4b. FARE SELECTION (step 1)
   --------------------------------------------------------------------------
   The chooser between the results list and Traveller Details. One card per
   fare the itinerary carries — one today — so the grid is written for N and
   told to centre itself at 1 rather than stretching a lone card across the
   full content width, which reads as a layout that lost its siblings.

   The card is the .bkf-opt radio-tile pattern from Add-ons, widened: same
   hidden input, same .bkf-radio dot, same accent ring on the chosen one, so a
   traveller meets one selection idiom in this flow instead of two.
   ========================================================================== */
.bkf-ff-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* One fare: a readable column, left-aligned with the card it sits in, not a
   1100px-wide band with 40 characters in it. */
.bkf-ff-grid.is-single { grid-template-columns: minmax(0, 420px); }

.bkf-ff {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 16px; cursor: pointer; background: #fff;
  border: 1px solid var(--bkf-line); border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bkf-ff:hover { border-color: #C6CEDA; }
.bkf-ff.is-on { border-color: var(--sp-accent); box-shadow: 0 0 0 2px var(--bkf-red-soft); }
.bkf-ff input { position: absolute; opacity: 0; width: 0; height: 0; }
.bkf-ff:has(input:focus-visible) { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

.bkf-ff-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bkf-ff.is-on .bkf-radio { border-color: var(--sp-accent); }
.bkf-ff.is-on .bkf-radio::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--sp-accent);
}
.bkf-ff-name { font-size: 15px; font-weight: 700; color: var(--bkf-ink); }
.bkf-ff-tag {
  padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 700;
  background: #F1F3F7; color: var(--bkf-muted); white-space: nowrap;
}
.bkf-ff-tag.is-good { background: var(--bkf-green-soft); color: var(--bkf-green-ink); }

/* The figure is the server's booking total, so it is labelled as one — "per
   adult" here would be a second, unsourced number beside the rail's. */
.bkf-ff-price { display: block; padding-bottom: 2px; }
.bkf-ff-price b { display: block; font-size: 22px; font-weight: 800; color: var(--bkf-ink); line-height: 1.15; }
.bkf-ff-price > span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--bkf-muted); }

.bkf-ff-grp {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bkf-muted);
}
.bkf-ff-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.bkf-ff-line {
  position: relative; display: flex; align-items: baseline; gap: 8px;
  padding-left: 21px; font-size: 13px; line-height: 1.45; color: var(--bkf-ink);
}
.bkf-ff-line > span { flex: 1; min-width: 0; }
.bkf-ff-line b { font-weight: 700; white-space: nowrap; }
.bkf-ff-line::before {
  position: absolute; left: 0; top: -1px; font-size: 13px; font-weight: 700;
}
.bkf-ff-line.is-yes::before { content: '\2713'; color: var(--bkf-green); }
.bkf-ff-line.is-no::before { content: '\00D7'; color: var(--bkf-red); }
/* Not a tick and not a cross: the fare does not decide these, a later step
   does, and marking them either way would be an answer this screen has not
   got. */
.bkf-ff-line.is-later::before { content: '\2022'; color: #9AA5B4; }
.bkf-ff-line.is-later { color: var(--bkf-muted); }
.bkf-ff-line.is-later b { font-weight: 600; color: var(--bkf-muted); }

.bkf-ff-rules {
  display: block; padding-top: 10px; border-top: 1px solid var(--bkf-line);
  font-size: 12px; line-height: 1.5; color: var(--bkf-muted);
}

/* Reads as the button the reference puts on a fare card, but it is not one:
   the whole tile is the control, and the flow's own Continue is what moves
   forward. A real <button> inside the <label> would fight the radio. */
.bkf-ff-cta {
  display: block; margin-top: auto; padding: 10px 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 700; text-align: center;
  border: 1px solid var(--sp-accent); color: var(--sp-accent); background: #fff;
}
.bkf-ff-cta.is-on { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--on-accent, #12253F); }

/* ==========================================================================
   5. TRAVELLER DETAILS (step 2)
   ========================================================================== */
.bkf-pax { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--bkf-line); }
.bkf-pax:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.bkf-pax-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 0 0 16px;
}
.bkf-pax-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bkf-pax-who h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--bkf-ink); }
.bkf-pax-who .bkf-ic { color: var(--bkf-ink); }
.bkf-pill {
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--bkf-green-soft); color: var(--bkf-green-ink); white-space: nowrap;
}
.bkf-pax-right { display: flex; align-items: center; gap: 14px; flex: none; }
.bkf-pax-remove {
  background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--bkf-red); padding: 4px 6px; border-radius: 6px;
}
.bkf-pax-remove:hover { text-decoration: underline; }

/* the "Save to my profile" switch */
.bkf-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.bkf-switch > span { font-size: 12.5px; color: var(--bkf-muted); }
.bkf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bkf-switch i {
  position: relative; width: 38px; height: 21px; border-radius: 999px; flex: none;
  background: #D7DCE4; transition: background .2s ease; display: block;
}
.bkf-switch i::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10,37,64,.28);
  transition: transform .2s ease;
}
.bkf-switch input:checked + i { background: var(--sp-accent, #FF4D4D); }
.bkf-switch input:checked + i::after { transform: translateX(17px); }
.bkf-switch input:focus-visible + i { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

/* the four-column form grid */
/* EIGHT columns, not four, because the reference's rows are not all quarters:
   Title / First / Middle / Last and the row below it are, but Email ID and
   Mobile Number are wider than a quarter and together stop three-quarters of
   the way across the card. Two eighths is a quarter and three eighths is that
   wider field, so one template describes every row. */
.bkf-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 18px; }
.bkf-f { display: flex; flex-direction: column; min-width: 0; grid-column: span 2; }
.bkf-grid .span2 { grid-column: span 3; }
.bkf-grid .span3 { grid-column: span 4; }
.bkf-f > label {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--bkf-muted);
  margin-bottom: 6px; letter-spacing: 0; text-transform: none;
}
.bkf-f > label .req { color: var(--sp-accent, #FF4D4D); }
.bkf-f input, .bkf-f select {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--bkf-line); background-color: #fff; color: var(--bkf-ink);
  /* 16px so iOS does not zoom the page when a field takes focus. */
  font-size: 16px; font-family: inherit; font-weight: 500; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* `background` shorthand on a bare select tiles the caret across the control —
   background-image/-color are set separately for that reason. */
.bkf-f select {
  -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235B6B82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.bkf-f input[type="date"] { padding-right: 8px; }
.bkf-f input:focus, .bkf-f select:focus { border-color: var(--sp-accent); box-shadow: 0 0 0 3px var(--bkf-red-soft); }
.bkf-f input::placeholder { color: #A3ADBB; font-weight: 400; }
.bkf-f .is-invalid { border-color: var(--sp-accent) !important; box-shadow: 0 0 0 3px var(--bkf-red-soft); }
.bkf-f small { margin-top: 5px; font-size: 11.5px; color: var(--bkf-muted); }
.bkf-f .bkf-note { margin: 6px 0 0; font-size: 11.5px; color: var(--bkf-muted); }

/* mobile number = dial-code select + number, sharing one field slot */
.bkf-tel { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; }
.bkf-tel select { padding-left: 10px; padding-right: 26px; font-size: 14px; background-position: right 8px center; }

/* "+ Add Adult" — a rule with the link centred on it */
.bkf-add { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; }
.bkf-add::before, .bkf-add::after { content: ''; flex: 1 1 0; height: 1px; background: var(--bkf-line); }
.bkf-addbtn {
  flex: none; background: none; border: none; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 600; color: #2F6FD0; padding: 2px 6px; border-radius: 6px;
}
.bkf-addbtn:hover { text-decoration: underline; }
.bkf-addbtn:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

.bkf-group { margin-top: 22px; }
.bkf-group-head { display: flex; align-items: center; gap: 9px; }
.bkf-group-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--bkf-ink); }
.bkf-group-head .bkf-ic { color: var(--bkf-ink); }
.bkf-group .bkf-add { margin-top: 12px; }

/* the passport block — international itineraries only (see booking-products.js) */
.bkf-passport { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bkf-line); }
.bkf-passport .bkf-grid { margin-top: 12px; }

/* the passport-scan control, reusing the reference's card language */
.bkf-scan { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.bkf-scan input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.bkf-scan-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--bkf-ink);
  background: #fff; border: 1px dashed #C6CEDA; border-radius: 8px;
}
.bkf-scan-btn:hover { border-color: var(--sp-accent); color: var(--bkf-red); }
.bkf-scan-btn.is-busy { opacity: .65; cursor: progress; }
.bkf-scan-hint { font-size: 12px; color: var(--bkf-muted); }
.bkf-scan-msg { margin: 0; font-size: 12.5px; font-weight: 600; }
.bkf-scan-msg.is-ok { color: var(--bkf-green-ink); }
.bkf-scan-msg.is-bad { color: var(--bkf-red); }

/* ==========================================================================
   6. SEATS (step 3)
   ========================================================================== */
.bkf-seatwrap { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 20px; align-items: start; }
.bkf-seatside { display: grid; gap: 12px; }
.bkf-box { border: 1px solid var(--bkf-line); border-radius: 10px; padding: 14px; background: #fff; }
.bkf-box h4 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--bkf-ink); }

.bkf-seatpax {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px; margin-bottom: 8px; cursor: pointer; font: inherit;
  background: #fff; border: 1px solid transparent; border-radius: 8px;
}
.bkf-seatpax.is-active { border-color: var(--sp-accent); background: var(--bkf-red-soft); }
.bkf-seatpax:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.bkf-seatpax-body { flex: 1; min-width: 0; }
.bkf-seatpax-body b { display: block; font-size: 13px; font-weight: 600; color: var(--bkf-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkf-seatpax-body span { display: block; font-size: 11.5px; color: var(--bkf-muted); }
.bkf-seatpax-seat { flex: none; font-size: 13px; font-weight: 700; color: var(--bkf-red); }
.bkf-seatpax-seat.is-empty { color: #A3ADBB; font-weight: 500; font-size: 11.5px; }
.bkf-clear {
  width: 100%; padding: 9px 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--bkf-ink); background: #fff; border: 1px solid var(--bkf-line); border-radius: 8px;
}
.bkf-clear:hover { border-color: var(--sp-accent); color: var(--bkf-red); }

.bkf-legend { display: grid; gap: 9px; }
.bkf-legend > div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--bkf-muted); }
.bkf-legend i { width: 15px; height: 15px; border-radius: 4px; flex: none; display: block; }
.bkf-legend b { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--bkf-ink); }

/* seat colours — one source, used by the map and by the legend swatches */
.bkf-sw-selected  { background: #12B76A; }
.bkf-sw-available { background: #1F3B63; }
.bkf-sw-occupied  { background: #D7DCE4; }
.bkf-sw-preferred { background: #BBD3F5; }
.bkf-sw-legroom   { background: #B79BE8; }
.bkf-sw-blocked   { background: #EDEFF3; position: relative; }
.bkf-sw-blocked::after {
  content: '\00D7'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; color: #98A2B3; line-height: 1;
}

.bkf-cabin { display: grid; justify-items: center; }
.bkf-plane {
  width: 100%; max-width: 486px; padding: 0 0 20px;
  border: 2px solid #E3E7EE; border-top: none;
  border-radius: 0 0 26px 26px; background: #fff;
}
.bkf-nose {
  height: 78px; margin: 0 -2px; border: 2px solid #E3E7EE; border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #fff;
  display: grid; place-items: end center; padding-bottom: 8px;
}
.bkf-nose span {
  display: block; width: 52px; height: 13px; border-radius: 999px 999px 5px 5px;
  background: #F1F3F7; border: 1px solid #E3E7EE;
}
.bkf-cols, .bkf-seatrow2 {
  display: grid; grid-template-columns: 36px repeat(3, 38px) 44px repeat(3, 38px) 36px;
  justify-content: center; gap: 6px; align-items: center;
}
.bkf-cols { padding: 14px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--bkf-muted); text-align: center; }
.bkf-seatrow2 { margin-bottom: 6px; }
/* The map is 30 rows; the reference's card shows about seven of them and the
   fuselage runs off the bottom edge. Scrolling the rows (not the plane) keeps
   the nose and the column letters in place while that happens. */
.bkf-planerows { max-height: 372px; overflow-y: auto; scrollbar-width: thin; }
.bkf-rowno { font-size: 12.5px; color: var(--bkf-muted); text-align: center; }
.bkf-exit {
  font-size: 9px; font-weight: 700; letter-spacing: .04em; color: #6B7280;
  border: 1px solid var(--bkf-line); border-radius: 4px; padding: 3px 0; text-align: center;
  background: #F7F8FA;
}
.bkf-seat {
  width: 38px; height: 32px; border-radius: 6px; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; color: #fff; line-height: 1;
  display: grid; place-items: center; transition: transform .12s ease, filter .18s ease;
}
.bkf-seat:hover:not(:disabled) { transform: scale(1.08); filter: brightness(1.08); }
.bkf-seat:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.bkf-seat:disabled { cursor: not-allowed; }
.bkf-seat.is-occupied, .bkf-seat.is-preferred, .bkf-seat.is-legroom, .bkf-seat.is-available { color: transparent; }
.bkf-seat.is-selected { color: #fff; }

/* ==========================================================================
   7. ADD-ONS (step 4)
   ========================================================================== */
.bkf-tabs { display: flex; gap: 26px; padding: 0 20px; border-bottom: 1px solid var(--bkf-line); }
.bkf-tab {
  padding: 11px 0 10px; background: none; border: none; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; color: var(--bkf-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.bkf-tab:hover { color: var(--bkf-ink); }
.bkf-tab.is-on { color: var(--bkf-red); font-weight: 700; border-bottom-color: var(--bkf-red); }
.bkf-tab:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: -2px; }

.bkf-sect { padding: 18px 20px 8px; }
.bkf-sect + .bkf-sect { border-top: 1px solid var(--bkf-line); }
.bkf-sect:last-child { padding-bottom: 20px; }

/* the per-sector segmented control */
.bkf-sectors { display: flex; margin: 0 0 16px; border: 1px solid var(--bkf-line); border-radius: 8px; overflow: hidden; }
.bkf-sector {
  flex: 1 1 0; min-width: 0; padding: 10px 14px; cursor: pointer; font: inherit; text-align: left;
  background: #fff; border: none; border-left: 1px solid var(--bkf-line); color: var(--bkf-ink);
}
.bkf-sector:first-child { border-left: none; }
.bkf-sector b { display: block; font-size: 13.5px; font-weight: 700; }
/* `> span` for the same reason as .bkf-foot-leg above — the arrow lives in <b>. */
.bkf-sector > span { display: block; font-size: 11.5px; color: var(--bkf-muted); margin-top: 2px; }
.bkf-sector.is-on { background: var(--sp-accent, #FF4D4D); color: var(--on-accent, #12253F); }
.bkf-sector.is-on > span { color: rgba(255,255,255,.9); }
.bkf-sector:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: -3px; }

/* the option cards */
.bkf-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; }
.bkf-opt {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px;
  cursor: pointer; background: #fff; border: 1px solid var(--bkf-line); border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease; min-height: 150px;
}
.bkf-opt:hover { border-color: #C6CEDA; }
.bkf-opt.is-on { border-color: var(--sp-accent); box-shadow: 0 0 0 2px var(--bkf-red-soft); }
.bkf-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.bkf-opt:has(input:focus-visible) { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.bkf-opt-top { display: flex; align-items: flex-start; gap: 9px; }
.bkf-radio {
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #C6CEDA; flex: none;
  display: grid; place-items: center; margin-top: 1px; background: #fff;
}
.bkf-radio.is-box { border-radius: 5px; }
.bkf-opt.is-on .bkf-radio { border-color: var(--sp-accent); }
.bkf-opt.is-on .bkf-radio::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--sp-accent);
}
.bkf-opt.is-on .bkf-radio.is-box::after { border-radius: 2px; }
.bkf-opt-txt { min-width: 0; }
.bkf-opt-txt b { display: block; font-size: 14px; font-weight: 700; color: var(--bkf-ink); line-height: 1.25; }
.bkf-opt-txt span { display: block; font-size: 11.5px; color: var(--bkf-muted); margin-top: 3px; line-height: 1.4; }
.bkf-opt-art { display: grid; place-items: center; flex: 1; min-height: 48px; margin: 2px 0; }
.bkf-opt-art svg { display: block; }
.bkf-opt-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; }
.bkf-opt-price { font-size: 14px; font-weight: 700; color: var(--bkf-ink); }
.bkf-opt-price.is-free { color: var(--bkf-green-ink); font-weight: 600; }
.bkf-best {
  padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 700;
  background: var(--bkf-green-soft); color: var(--bkf-green-ink); white-space: nowrap;
}

/* "Apply to all flights" */
.bkf-applyall {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 11px 14px;
  background: #F7F8FA; border: 1px solid var(--bkf-line); border-radius: 8px;
}
.bkf-applyall > p { margin: 0; flex: 1; font-size: 12.5px; color: var(--bkf-ink); }
.bkf-applyall .bkf-bullet { width: 12px; height: 12px; border-radius: 50%; background: #9AA5B4; flex: none; }
.bkf-applyall .bkf-switch > span { color: var(--bkf-red); font-weight: 600; font-size: 13px; }

/* ==========================================================================
   8. REVIEW (step 5)
   ========================================================================== */
.bkf-rv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bkf-rv-head .bkf-h2 { font-size: 20px; }

.bkf-rvcard { margin: 0 0 12px; }
.bkf-rvcard .bkf-card-head {
  padding: 13px 18px; align-items: center; border-bottom: 1px solid var(--bkf-line);
}
.bkf-rvtitle { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 700; color: var(--bkf-ink); }
.bkf-rvright { display: flex; align-items: center; gap: 14px; flex: none; }
.bkf-verified { font-size: 12.5px; font-weight: 600; color: var(--bkf-green-ink); white-space: nowrap; }
.bkf-verified.is-warn { color: var(--bkf-red); }
.bkf-edit {
  padding: 2px 4px; background: none; border: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--bkf-red); border-radius: 6px;
}
.bkf-edit:hover { text-decoration: underline; }
.bkf-chev {
  background: none; border: none; cursor: pointer; padding: 2px; color: var(--bkf-muted);
  display: grid; place-items: center; border-radius: 6px;
}
.bkf-chev svg { width: 16px; height: 16px; transition: transform .2s ease; }
.bkf-rvcard.is-shut .bkf-chev svg { transform: rotate(180deg); }
.bkf-rvcard.is-shut .bkf-card-body { display: none; }

.bkf-rvpax { display: flex; align-items: flex-start; gap: 13px; }
.bkf-avatar {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; background: var(--bkf-red-soft); color: var(--bkf-red);
  font-size: 13.5px; font-weight: 700;
}
.bkf-avatar.is-sm { width: 30px; height: 30px; font-size: 11.5px; }
.bkf-rvpax-main { min-width: 0; flex: 1; }
.bkf-rvpax-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.bkf-rvpax-name b { font-size: 15px; font-weight: 700; color: var(--bkf-ink); }
.bkf-rvpax-meta { font-size: 13px; color: var(--bkf-muted); }
.bkf-rvpax-meta i { font-style: normal; padding: 0 5px; opacity: .55; }
.bkf-rvpax-contact { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 11px; font-size: 13px; color: var(--bkf-muted); }
.bkf-rvpax-contact span { display: inline-flex; align-items: center; gap: 7px; }
.bkf-rvpax-contact svg { width: 14px; height: 14px; color: var(--bkf-muted); flex: none; }
.bkf-rvpax-more { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--bkf-line); }
.bkf-rvpax-more b { display: block; font-size: 14px; color: var(--bkf-ink); }
.bkf-rvpax-more span { font-size: 12.5px; color: var(--bkf-muted); }
.bkf-warn { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--bkf-red); }

.bkf-rows { padding: 0; }
.bkf-row { display: flex; align-items: center; gap: 16px; padding: 13px 18px; }
.bkf-row + .bkf-row { border-top: 1px solid var(--bkf-line); }
.bkf-row-lead { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.bkf-row-lead b { display: block; font-size: 13.5px; font-weight: 700; color: var(--bkf-ink); }
.bkf-row-lead > div > span { display: block; font-size: 12.5px; color: var(--bkf-muted); margin-top: 2px; }
.bkf-row-facts { display: flex; align-items: center; gap: 34px; flex: none; }
.bkf-row-facts > div { display: flex; flex-direction: column; gap: 2px; }
.bkf-row-facts span { font-size: 11.5px; color: var(--bkf-muted); }
.bkf-row-facts b { font-size: 13.5px; font-weight: 700; color: var(--bkf-ink); }
.bkf-row-facts b.is-seat { color: var(--bkf-red); }
.bkf-row-amt { flex: none; font-size: 14px; font-weight: 700; color: var(--bkf-ink); min-width: 68px; text-align: right; }

.bkf-contact { display: flex; gap: 56px; flex-wrap: wrap; }
.bkf-contact > div { display: flex; flex-direction: column; gap: 4px; }
.bkf-contact span { font-size: 11.5px; color: var(--bkf-muted); }
.bkf-contact b { font-size: 13.5px; font-weight: 600; color: var(--bkf-ink); }
.bkf-okline { margin: 14px 0 0; font-size: 12.5px; font-weight: 500; color: var(--bkf-green-ink); }

.bkf-info-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bkf-info-list li { position: relative; padding-left: 24px; font-size: 13px; line-height: 1.5; color: var(--bkf-muted); }
.bkf-info-list li::before {
  content: '\2713'; position: absolute; left: 0; top: -1px; color: var(--bkf-green); font-weight: 700; font-size: 13px;
}
.bkf-info-list a { color: var(--bkf-red); font-weight: 600; text-decoration: none; }
.bkf-info-list a:hover { text-decoration: underline; }

/* ==========================================================================
   9. FARE SUMMARY RAIL — the same card on every flight step
   ========================================================================== */
.bk-sheet.is-flight .bk-price {
  padding: 16px 18px; border-radius: var(--bkf-card); border: 1px solid var(--bkf-line); background: #fff;
}
.bkf-fare-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.bk-sheet.is-flight .bk-price h3.bkf-fare-title {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--bkf-ink);
  text-transform: none; letter-spacing: 0;
}
.bkf-fare-trip { font-size: 13.5px; font-weight: 600; color: var(--bkf-ink); margin: 0 0 8px; }
.bkf-fare-seg { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--bkf-ink); }
.bkf-fare-seg > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bkf-fare-seg > span:last-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.bkf-fare-seg svg { width: 11px; height: 11px; color: var(--bkf-muted); flex: none; }
.bkf-rule { height: 1px; background: var(--bkf-line); margin: 11px 0; }
.bk-sheet.is-flight .bk-price-line { padding: 5px 0; font-size: 13.5px; color: var(--bkf-ink); }
.bk-sheet.is-flight .bk-price-line > span:first-child { color: var(--bkf-muted); }
.bk-sheet.is-flight .bk-price-line > span:last-child { font-weight: 500; }
.bk-sheet.is-flight .bk-price-line.is-sub { padding: 4px 0 4px 12px; font-size: 12.5px; }
.bk-sheet.is-flight .bk-price-line.is-sub > span:first-child::before { content: '\2022'; margin-right: 6px; color: #A3ADBB; }
.bk-sheet.is-flight .bk-price-line.is-discount > span:first-child,
.bk-sheet.is-flight .bk-price-line.is-discount > span:last-child { color: var(--bkf-green-ink); font-weight: 600; }

.bkf-fare-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--bkf-ink);
  padding: 5px 0; list-style: none;
}
.bkf-fare-group > summary::-webkit-details-marker { display: none; }
.bkf-fare-group > summary .bkf-amt { display: inline-flex; align-items: center; gap: 6px; }
.bkf-fare-group > summary svg { width: 11px; height: 11px; color: var(--bkf-muted); transition: transform .2s ease; }
.bkf-fare-group[open] > summary svg { transform: rotate(180deg); }

.bkf-coupon-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.bkf-coupon-tag {
  padding: 3px 9px; border-radius: 4px; font-size: 11.5px; font-weight: 600;
  background: var(--bkf-green-soft); color: var(--bkf-green-ink);
}
.bk-sheet.is-flight .bk-price-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--bkf-line);
  font-size: 15px; font-weight: 700; color: var(--bkf-ink);
}
/* THE MONEY IS READ, NOT ACTED ON. Every amount in the booking phases now
   carries the page's ink at full weight rather than the accent red: red is
   this sheet's ALERT colour (--bkf-red is also the invalid-field ring, the
   fare warning and the seat-taken cross), and spending it on the number a
   traveller is meant to check made a correct total look like a problem.
   Weight, not hue, is what makes it the biggest thing in the panel. */
.bk-sheet.is-flight .bk-price-total > span:last-child { font-size: 20px; font-weight: 800; color: var(--bkf-ink); }
.bkf-incl { margin: 3px 0 0; font-size: 11.5px; color: var(--bkf-muted); }

/* the coupon control, restyled to sit inside the reference's card */
.bk-sheet.is-flight .bk-coupon { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bkf-line); }
.bk-sheet.is-flight .bk-coupon-row input { height: 38px; border-radius: 8px; font-size: 13.5px; }
.bk-sheet.is-flight .bk-coupon-apply { padding: 9px 16px; border-radius: 8px; font-size: 13px; }

/* the green reassurance box + the benefit card, below the fare card */
.bkf-assure {
  display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 13px 15px;
  background: #EAF8F0; border: 1px solid #C9EAD8; border-radius: 10px;
}
.bkf-assure svg { width: 22px; height: 22px; color: var(--bkf-green-ink); flex: none; }
.bkf-assure b { display: block; font-size: 13px; font-weight: 700; color: #0E6E44; }
.bkf-assure span { display: block; font-size: 12px; color: #3E7A5E; margin-top: 1px; }

.bkf-benefits {
  margin: 12px 0 0; padding: 15px; list-style: none; display: grid; gap: 15px;
  background: #fff; border: 1px solid var(--bkf-line); border-radius: 10px;
}
.bkf-benefits li { display: flex; align-items: flex-start; gap: 11px; }
.bkf-benefits svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--bkf-red); }
.bkf-benefits b { display: block; font-size: 13px; font-weight: 700; color: var(--bkf-ink); }
.bkf-benefits span { display: block; font-size: 12px; color: var(--bkf-muted); margin-top: 2px; line-height: 1.4; }

/* ==========================================================================
   10. STICKY ACTION BAR
   ========================================================================== */
.bk-sheet.is-flight .bk-foot {
  gap: 0; padding: 8px clamp(14px, 2.2vw, 32px);
  margin: 0 calc(-1 * clamp(14px, 2.2vw, 32px));
  border-top: 1px solid var(--bkf-line); box-shadow: 0 -2px 12px rgba(10,37,64,.05);
}
/* No Back button in the reference — cleared steps in the stepper walk back. */
.bk-sheet.is-flight #bkBack { display: none; }
.bk-sheet.is-flight .bk-foot-rich { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; }
.bkf-foot-trust { display: flex; align-items: center; gap: 10px; flex: none; padding-right: 24px; }
.bkf-foot-trust svg { width: 22px; height: 22px; color: var(--bkf-green-ink); flex: none; }
.bkf-foot-trust b { display: block; font-size: 12.5px; font-weight: 700; color: var(--bkf-ink); }
.bkf-foot-trust span { display: block; font-size: 11.5px; color: var(--bkf-muted); }
.bkf-foot-legs { display: flex; align-items: center; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bkf-foot-legs::-webkit-scrollbar { display: none; }
.bkf-foot-leg {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding: 2px 22px; border-left: 1px solid var(--bkf-line);
}
.bkf-foot-leg b { display: block; font-size: 12.5px; font-weight: 700; color: var(--bkf-ink); white-space: nowrap; }
/* `> div >` is load-bearing: the route reads "HYD <span>→</span> DEL", so a bare
   `.bkf-foot-leg span { display: block }` turns that arrow into its own line and
   the leg becomes three rows tall. */
.bkf-foot-leg > div > span { display: block; font-size: 11.5px; color: var(--bkf-muted); white-space: nowrap; }
.bkf-foot-total {
  display: flex; flex-direction: column; flex: none; padding: 2px 26px;
  border-left: 1px solid var(--bkf-line); text-align: left;
}
.bkf-foot-total > span:first-child { font-size: 12px; color: var(--bkf-muted); }
.bkf-foot-total b { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--bkf-ink); }
.bkf-foot-incl { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--bkf-muted); }
.bkf-foot-incl svg { width: 12px; height: 12px; }

.bk-sheet.is-flight .bk-foot-cta { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.bk-sheet.is-flight .bk-foot-cta .bk-btn-primary {
  min-width: 218px; height: 44px; padding: 0 24px; border-radius: 8px;
  font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.bk-sheet.is-flight .bk-foot-cta .bk-btn-primary svg { width: 15px; height: 15px; }
.bk-sheet.is-flight .bk-foot-note { font-size: 11.5px; color: var(--bkf-muted); }
.bk-sheet.is-flight .bk-foot-msg { flex: none; padding: 0 14px; }
.bk-sheet.is-flight .bk-foot-msg:empty { display: none; }

/* ==========================================================================
   11. RESPONSIVE — the reference is a desktop screen; these keep the same
   screens usable below it without changing anything at desktop width.
   ========================================================================== */
@media (max-width: 1280px) {
  .bkf-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bkf-grid .span2, .bkf-grid .span3 { grid-column: span 3; }
  .bkf-foot-leg { padding: 2px 16px; }
  .bkf-foot-total { padding: 2px 18px; }
}
@media (max-width: 1100px) {
  .bk-sheet.is-flight .bkf-foot-legs { display: none; }
}
@media (max-width: 980px) {
  .bk-sheet.is-flight .bk-body { grid-template-columns: 1fr; }
  .bk-sheet.is-flight .bk-side { position: static; }
  .bkf-itin-segs { flex-wrap: wrap; }
  .bkf-itin-segs .bkf-seg { flex: 1 1 250px; }
  .bkf-seatwrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bkf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bkf-grid .span2, .bkf-grid .span3 { grid-column: span 4; }
  .bk-sheet.is-flight .bk-rail-label { display: none; }
  .bk-sheet.is-flight .bk-rail-step.is-now .bk-rail-label { display: inline; }
  .bkf-itin-meta { display: none; }
  .bkf-row { flex-wrap: wrap; }
  .bkf-row-facts { gap: 22px; }
  .bkf-contact { gap: 26px; }
  .bkf-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .bkf-sectors { flex-direction: column; }
  .bkf-sector { border-left: none; border-top: 1px solid var(--bkf-line); }
  .bkf-sector:first-child { border-top: none; }
}
@media (max-width: 560px) {
  .bkf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bkf-grid .bkf-f, .bkf-grid .span2, .bkf-grid .span3 { grid-column: span 2; }
  .bk-sheet.is-flight .bk-foot { flex-wrap: wrap; gap: 10px; }
  .bk-sheet.is-flight .bk-foot-rich { order: -1; flex: 1 0 100%; }
  .bkf-foot-trust { display: none; }
  .bkf-foot-total { padding-left: 0; border-left: none; }
  .bk-sheet.is-flight .bk-foot-cta { flex: 1; }
  .bk-sheet.is-flight .bk-foot-cta .bk-btn-primary { width: 100%; min-width: 0; }
  .bkf-card-head { flex-direction: column; gap: 12px; }
  .bkf-paxpick { width: 100%; }
  .bkf-paxpick select { flex: 1; min-width: 0; }
  .bkf-tel { grid-template-columns: 96px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .bkf-seat:hover:not(:disabled) { transform: none; }
}