/* =====================================================================
   Beyond Journey - Flight booking experience
   ---------------------------------------------------------------------
   Design system for the post-search journey (results -> fare -> traveller
   -> review -> payment -> confirmation).

   Uses the Beyond Journey palette and the site's inherited font family
   only - no new typefaces are introduced here. Spacing follows an 8px
   grid via the --s* tokens.
   ===================================================================== */

.bjb {
  /* brand */
  --navy: #17233e;
  --navy-700: #22315a;
  --orange: #f5761a;
  --orange-600: #dd660f;
  --orange-50: #fff6ee;
  --orange-100: #fdf1e6;

  /* neutrals */
  --ink: #17233e;
  --muted: #56607a;
  --faint: #8a93a8;
  --line: #e7e6e1;
  --line-soft: #f0efea;
  --surface: #ffffff;
  --canvas: #f7f6f2;

  /* status */
  --ok: #1a7f4b;
  --ok-bg: #edf8f1;
  --ok-line: #bfe3cd;
  --warn: #9a6b00;
  --warn-bg: #fff8ed;
  --warn-line: #f3d4a8;
  --err: #c0392b;
  --err-bg: #fdefed;
  --err-line: #f2c4bd;

  /* 8px spacing grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 40px; --s8: 56px;

  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* elevation */
  --e1: 0 1px 2px rgba(23, 35, 62, .06), 0 1px 3px rgba(23, 35, 62, .05);
  --e2: 0 2px 4px rgba(23, 35, 62, .05), 0 6px 16px -8px rgba(23, 35, 62, .18);
  --e3: 0 4px 8px rgba(23, 35, 62, .06), 0 16px 32px -12px rgba(23, 35, 62, .24);
  --e4: 0 24px 56px -20px rgba(23, 35, 62, .38);
  --ring: 0 0 0 3px rgba(245, 118, 26, .16);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------
   Layout shell
   --------------------------------------------------------------- */
.bjb-wrap { background: var(--canvas); padding: var(--s5) 0 var(--s8); min-height: 60vh; }

/* The site stylesheet applies `section { padding: 4.5rem 0 5rem }` globally,
   which injects large blank bands inside any <section> we use as a card.
   :where() carries zero specificity, so this cancels the global rule while
   letting any component class below set its own padding or margin without
   needing to out-specify us. */
.bjb :where(section, aside) { padding: 0; margin: 0; }
.bjb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e1); }
.bjb-pad { padding: var(--s5); }
.bjb h2, .bjb h3, .bjb h4, .bjb h5 { color: var(--ink); }
.bjb-muted { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.bjb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Page-transition: each screen fades up as it mounts. */
.bjb-screen { animation: bjbIn .32s var(--ease) both; }
@keyframes bjbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------
   Notices
   --------------------------------------------------------------- */
.bjb-notice {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.55; border: 1px solid; margin-bottom: var(--s4);
}
.bjb-notice i { margin-top: 2px; flex: 0 0 auto; }
.bjb-notice--dev { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.bjb-notice--info { background: #eef3fb; border-color: #cbd9ef; color: #24395f; }
.bjb-notice--err { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.bjb-notice--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }

/* ---------------------------------------------------------------
   Progress stepper (sticks under the header while scrolling)
   --------------------------------------------------------------- */
.bjb-stepper {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: var(--s1);
  margin: 0 auto var(--s5); padding: var(--s3) var(--s2);
  background: rgba(247, 246, 242, .88);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto; scrollbar-width: none;
}
.bjb-stepper::-webkit-scrollbar { display: none; }
.bjb-step { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
.bjb-step__dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800;
  background: var(--surface); border: 2px solid var(--line); color: var(--faint);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.bjb-step__label { font-size: 12.5px; font-weight: 700; color: var(--faint); white-space: nowrap; }
.bjb-step__bar { width: 22px; height: 2px; background: var(--line); flex: 0 0 auto; border-radius: 2px; }

/* The step name under the stepper is a phone-only aid; above the
   breakpoint every step already carries its own label. */
.bjb-stepnow { display: none; }
.bjb-step.is-done .bjb-step__dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.bjb-step.is-done .bjb-step__label { color: var(--navy); }
.bjb-step.is-active .bjb-step__dot { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: var(--ring); }
.bjb-step.is-active .bjb-step__label { color: var(--ink); }

/* ---------------------------------------------------------------
   Search summary bar
   --------------------------------------------------------------- */
.bjb-tripbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-700) 100%);
  border-radius: var(--r-lg); padding: var(--s4) var(--s5); margin-bottom: var(--s5);
  box-shadow: var(--e2);
}
.bjb-tripbar__route { color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 2px; }
.bjb-tripbar__route i { color: var(--orange); margin: 0 var(--s2); font-size: 15px; }
.bjb-tripbar__meta { color: rgba(255, 255, 255, .8); font-size: 13px; }
.bjb-tripbar__meta span { white-space: nowrap; }
.bjb-tripbar__meta span + span::before { content: "|"; margin: 0 var(--s2); opacity: .45; }
.bjb-tripbar__acts { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.bjb-tripbar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px var(--s4); border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .1); color: #fff !important;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; font-family: inherit;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.bjb-tripbar__btn:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); transform: translateY(-1px); }
.bjb-tripbar__btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.bjb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 12px var(--s5); border: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-600) 100%);
  color: #fff !important; font-size: 15px; font-weight: 800; letter-spacing: .2px;
  font-family: inherit; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(245, 118, 26, .5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease);
}
.bjb-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(245, 118, 26, .6); }
.bjb-btn:active:not(:disabled) { transform: translateY(0); }
.bjb-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bjb-btn--ghost { background: var(--surface); color: var(--ink) !important; border: 1px solid var(--line); box-shadow: none; }
.bjb-btn--ghost:hover:not(:disabled) { border-color: var(--orange); color: var(--orange) !important; box-shadow: none; }
.bjb-btn--navy { background: var(--navy); box-shadow: 0 6px 18px -6px rgba(23, 35, 62, .5); }
.bjb-btn--sm { padding: 9px var(--s4); font-size: 13px; }
.bjb-btn--block { width: 100%; }
.bjb-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--orange); font-size: 13px; font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px;
}
.bjb-linkbtn:hover { color: var(--orange-600); }
.bjb :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------------------------------------------------------------
   Loading / skeleton / empty
   --------------------------------------------------------------- */
.bjb-loading { text-align: center; padding: var(--s7) var(--s4) var(--s5); }
.bjb-loading__plane {
  width: 60px; height: 60px; margin: 0 auto var(--s4); border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); font-size: 23px; animation: bjbPulse 1.5s var(--ease) infinite;
}
@keyframes bjbPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 118, 26, .32); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(245, 118, 26, 0); }
}
.bjb-loading h3 { font-size: 20px; margin-bottom: var(--s1); }
.bjb-skel { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); padding: var(--s5); margin-bottom: var(--s3); }
.bjb-skel__line {
  height: 12px; border-radius: 6px; margin-bottom: var(--s3);
  background: linear-gradient(90deg, #eeece7 25%, #f7f6f3 37%, #eeece7 63%);
  background-size: 400% 100%; animation: bjbShimmer 1.4s ease infinite;
}
@keyframes bjbShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.bjb-empty { text-align: center; padding: var(--s7) var(--s5); }
.bjb-empty__icon {
  width: 64px; height: 64px; margin: 0 auto var(--s4); border-radius: 50%;
  background: var(--orange-100); color: var(--orange);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}

/* ---------------------------------------------------------------
   Results: filters + list
   --------------------------------------------------------------- */
.bjb-results { display: grid; grid-template-columns: 280px 1fr; gap: var(--s5); align-items: start; }

.bjb-filters {
  position: sticky; top: 76px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-lg); box-shadow: var(--e2);
}
.bjb-filters__group { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); }
.bjb-filters__group:last-child { border-bottom: 0; }
.bjb-filters__group h4 { font-size: 13.5px; margin: 0 0 var(--s3); letter-spacing: .2px; }
.bjb-check {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
  font-size: 13.5px; color: var(--muted); cursor: pointer; padding: 3px 0;
  transition: color .2s var(--ease);
}
.bjb-check:hover { color: var(--ink); }
.bjb-check input { accent-color: var(--orange); width: 16px; height: 16px; cursor: pointer; }
.bjb-check span.count { margin-left: auto; font-size: 12px; color: var(--faint); }
.bjb-range { width: 100%; accent-color: var(--orange); }

.bjb-sortbar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3) var(--s4); margin-bottom: var(--s3);
}
.bjb-sortbar__label { font-size: 13px; font-weight: 700; color: var(--ink); }
.bjb-sort {
  padding: 7px var(--s4); border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.bjb-sort:hover { border-color: var(--orange); color: var(--orange); }
.bjb-sort.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.bjb-sortrail { display: flex; align-items: center; gap: var(--s2); }
.bjb-count { margin-left: auto; font-size: 13px; color: var(--muted); }

.bjb-filterbtn { display: none; }
.bjb-sheet-backdrop {
  position: fixed; inset: 0; z-index: 1200; background: rgba(23, 35, 62, .45);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.bjb-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }


/* ---------------------------------------------------------------
   Results chrome: search strip, fare calendar, column header
   --------------------------------------------------------------- */
.bjb-srch__h1 {
  font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px;
  margin: 0 0 var(--s3); line-height: 1.25;
}
.bjb-srch__h1 span {
  display: block; font-size: 13px; font-weight: 400; color: var(--muted);
  letter-spacing: 0; margin-top: 2px;
}

.bjb-srch {
  display: flex; align-items: stretch; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e1);
  padding: var(--s2); margin-bottom: var(--s3);
}
.bjb-srch__cells {
  flex: 1; display: grid; align-items: stretch;
  grid-template-columns: 1fr 34px 1fr 1fr 1fr 1.15fr;
  min-width: 0;
}
.bjb-srch__cell {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: none; border: 0; border-radius: var(--r-md);
  padding: 9px var(--s3); min-width: 0;
  transition: background .18s var(--ease);
}
.bjb-srch__cell + .bjb-srch__cell::before,
.bjb-srch__swap + .bjb-srch__cell::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--line-soft);
}
.bjb-srch__cell:hover { background: var(--canvas); }
.bjb-srch__cell .k {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--faint);
}
.bjb-srch__cell strong {
  display: block; font-size: 17px; font-weight: 800; color: var(--ink);
  line-height: 1.25; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bjb-srch__cell strong .add { color: var(--orange); font-size: 15px; }
.bjb-srch__cell .s {
  display: block; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bjb-srch__swap {
  align-self: center; justify-self: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--navy); font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .25s var(--ease);
}
.bjb-srch__swap:hover { border-color: var(--orange); color: var(--orange); transform: rotate(180deg); }
/* Orange belongs to Select flight on this page. Modifying the search is
   a secondary move, so the strip's button steps back to navy. */
.bjb-srch__go {
  align-self: center; flex: 0 0 auto; white-space: nowrap;
  background: var(--navy); border-color: var(--navy);
}
.bjb-srch__go:hover { background: var(--navy-700); border-color: var(--navy-700); }

/* open state: the same fields the search screen uses */
.bjb-srch--open { display: block; padding: var(--s4) var(--s5) var(--s5); }
.bjb-srch__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4);
}
.bjb-srch__headx { display: flex; align-items: center; gap: var(--s4); }
/* Bottom-aligning these rows made every field hang off the tallest
   airport hint, so From sat 25px lower than To. Align the tops and
   hold the hint to one line so the row is a row. */
.bjb-srch__grid {
  display: grid; gap: var(--s3);
  grid-template-columns: minmax(0, 1fr) 42px repeat(4, minmax(0, 1fr));
  align-items: start;
}
.bjb-srch__f .bjb-field { margin-bottom: 0; }
.bjb-srch__f .bjb-hint {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bjb-srch__x { display: flex; align-items: flex-start; justify-content: center; padding-top: 30px; }
.bjb-srch__pax { margin-top: var(--s3); }
.bjb-srch__pax .bjb-field { margin-bottom: 0; }
/* A return date on a one-way search is off, and should look off. */
.bjb-input:disabled, .bjb-select:disabled {
  background: var(--canvas); color: var(--faint); cursor: not-allowed; border-style: dashed;
}
.bjb-srch__submit { display: flex; align-items: flex-end; }

/* ---- fare calendar ---- */
.bjb-fcal {
  display: flex; align-items: stretch; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e1);
  padding: var(--s2); margin-bottom: var(--s4);
}
.bjb-fcal__k {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s4) 0 var(--s3); border-right: 1px solid var(--line-soft);
  flex: 0 0 auto; color: var(--ink);
}
.bjb-fcal__k i, .bjb-fcal__k svg { color: var(--orange); font-size: 13px; }
.bjb-fcal__k span { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.bjb-fcal__k small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.bjb-fcal__rail { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; min-width: 0; }
.bjb-fcal__d {
  text-align: center; cursor: pointer; font-family: inherit;
  background: none; border: 1px solid transparent; border-radius: var(--r-md);
  padding: 7px 4px; transition: background .18s var(--ease), border-color .18s var(--ease);
}
.bjb-fcal__d:hover { background: var(--canvas); }
.bjb-fcal__d .wd { display: block; font-size: 11px; color: var(--muted); }
.bjb-fcal__d .dt { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.bjb-fcal__d .fr { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 1px; }
.bjb-fcal__d.is-best .fr { color: var(--ok); }
.bjb-fcal__d.is-best { border-color: var(--ok-line); background: var(--ok-bg); }
.bjb-fcal__d.is-now {
  background: var(--navy); border-color: var(--navy);
}
.bjb-fcal__d.is-now .wd { color: rgba(255, 255, 255, .7); }
.bjb-fcal__d.is-now .dt, .bjb-fcal__d.is-now .fr { color: #fff; }
/* a placeholder that is obviously a placeholder, not a missing price */
.bjb-fcal__wait {
  display: inline-block; width: 34px; height: 9px; border-radius: 4px;
  background: linear-gradient(90deg, #efeee9 25%, #f7f6f3 50%, #efeee9 75%);
  background-size: 200% 100%; animation: bjbShim 1.2s linear 8;
}
@keyframes bjbShim { to { background-position: -200% 0; } }

/* ---- column header over the cards ---- */
.bjb-thead {
  display: grid; grid-template-columns: 1.4fr 2.35fr 1.15fr; gap: var(--s4);
  padding: 0 20px 8px; margin-top: 2px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--faint);
}
.bjb-thead__mid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); }
.bjb-thead__mid > span:nth-child(2) { text-align: center; min-width: 112px; }
.bjb-thead__mid > span:nth-child(3) { text-align: left; }
.bjb-thead__p { text-align: right; }

/* ---- filter panel: popular chips, time tiles, fares beside counts ---- */
.bjb-filters__top { display: flex; align-items: center; justify-content: space-between; }
.bjb-filters__top h4 { margin: 0; }
.bjb-filters__n {
  display: inline-block; background: var(--orange); color: #fff;
  border-radius: var(--r-pill); font-size: 11px; padding: 1px 7px; font-weight: 800;
  vertical-align: 1px; margin-left: 2px;
}
.bjb-popgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bjb-pop, .bjb-tw { display: block; cursor: pointer; }
.bjb-pop input, .bjb-tw input { position: absolute; opacity: 0; width: 0; height: 0; }
.bjb-pop > span {
  display: block; padding: 7px 9px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.bjb-pop b { display: block; font-size: 12px; font-weight: 700; color: var(--ink); }
.bjb-pop small { display: block; font-size: 11.5px; color: var(--muted); }
.bjb-pop > span:hover { border-color: rgba(245, 118, 26, .5); }
.bjb-pop input:checked + span {
  border-color: var(--orange); background: var(--orange-50);
}
.bjb-pop input:checked + span b { color: var(--orange-600); }
.bjb-pop input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

.bjb-twgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bjb-tw > span {
  display: block; text-align: center; padding: 9px 6px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.bjb-tw i, .bjb-tw svg { display: block; margin: 0 auto 4px; font-size: 14px; color: var(--faint); }
.bjb-tw b { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.bjb-tw small { display: block; font-size: 11px; color: var(--muted); }
.bjb-tw > span:hover { border-color: rgba(245, 118, 26, .5); }
.bjb-tw input:checked + span { border-color: var(--orange); background: var(--orange-50); }
.bjb-tw input:checked + span i, .bjb-tw input:checked + span svg { color: var(--orange); }
.bjb-tw input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

.bjb-check .lbl { flex: 1; min-width: 0; }
.bjb-check .fare { font-size: 12px; font-weight: 700; color: var(--ink); }
.bjb-check.is-empty { opacity: .45; cursor: default; }
.bjb-rangeout {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 12.5px; color: var(--muted);
}
.bjb-rangeout strong { color: var(--ink); }
/* ---------------------------------------------------------------
   Flight card
   --------------------------------------------------------------- */
.bjb-flight {
  margin-bottom: 10px; overflow: hidden;
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.bjb-flight:hover { border-color: rgba(245, 118, 26, .45); box-shadow: var(--e3); transform: translateY(-2px); }
.bjb-flight.is-chosen { border-color: var(--orange); box-shadow: var(--ring), var(--e2); }
.bjb-flight__ribbons { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 20px 0; }
.bjb-flight__main { display: grid; grid-template-columns: 1.4fr 2.35fr 1.15fr; gap: var(--s4); align-items: center; padding: 14px 20px; }

.bjb-air { display: flex; align-items: center; gap: var(--s3); }
.bjb-air__logo {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-md);
  background: var(--canvas); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--navy); letter-spacing: .3px;
}
.bjb-air__logo[data-air="6E"] { color: #0b2d71; background: #eef2fa; border-color: #dbe3f4; }
.bjb-air__logo[data-air="AI"] { color: #b3122a; background: #fdeef0; border-color: #f7d5da; }
.bjb-air__logo[data-air="SG"] { color: #b8123a; background: #fdedf2; border-color: #f7d3de; }
.bjb-air__logo[data-air="QP"] { color: #c25000; background: #fff3e8; border-color: #fadfc7; }
.bjb-air__logo[data-air="UK"] { color: #4a2764; background: #f4eefa; border-color: #e5d8f0; }
.bjb-air__logo[data-air="EK"] { color: #a8121b; background: #fdeeef; border-color: #f6d4d6; }
.bjb-air__logo[data-air="QR"] { color: #5c0632; background: #f9ecf2; border-color: #eed3e0; }
.bjb-air__logo[data-air="SQ"] { color: #14406b; background: #ecf3f9; border-color: #d5e4f0; }
.bjb-air__name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.bjb-air__num { font-size: 12px; color: var(--muted); }

.bjb-times { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; }
.bjb-times__t { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -.3px; }
.bjb-times__c { font-size: 12px; color: var(--muted); }
.bjb-path { text-align: center; min-width: 112px; }
.bjb-path__dur { font-size: 12px; font-weight: 700; color: var(--ink); }
.bjb-path__line { position: relative; height: 2px; background: var(--line); margin: 10px 0 12px; border-radius: 2px; }
.bjb-path__line::before, .bjb-path__line::after {
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--line); transform: translateY(-50%);
}
.bjb-path__line::before { left: 0; }
.bjb-path__line::after { right: 0; }
.bjb-path__line i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); padding: 0 6px; color: var(--orange); font-size: 12px;
}
.bjb-path__stops { font-size: 11.5px; color: var(--muted); }
.bjb-path__stops.nonstop { color: var(--ok); font-weight: 700; }

.bjb-fare { text-align: right; }
.bjb-fare__amt { font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1.1; letter-spacing: -.4px; }
.bjb-fare__was { font-size: 12.5px; color: var(--faint); text-decoration: line-through; margin-right: 5px; }
.bjb-fare__sub { font-size: 11.5px; color: var(--muted); margin-bottom: var(--s2); }

.bjb-flight__foot {
  display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap;
  padding: 8px 20px; border-top: 1px solid var(--line-soft); background: #fcfbf9;
}
/* The always-true facts, stated once and quietly, instead of four pills
   that looked identical on every card in the list. */
.bjb-inc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bjb-inc i, .bjb-inc svg { color: var(--faint); font-size: 11px; width: 11px; }
.bjb-inc b { font-weight: 400; color: var(--faint); margin: 0 1px; }
.bjb-flight__det { margin-left: auto; }
.bjb-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px;
}
.bjb-tag i { color: var(--orange); font-size: 10px; }
.bjb-tag--ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.bjb-tag--ok i { color: var(--ok); }
.bjb-tag--hot { color: var(--err); border-color: var(--err-line); background: var(--err-bg); }
.bjb-tag--hot i { color: var(--err); }

.bjb-ribbon {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.bjb-ribbon--cheap { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.bjb-ribbon--fast { background: #eef3fb; color: #24395f; border: 1px solid #cbd9ef; }
.bjb-ribbon--drop { background: linear-gradient(90deg, var(--orange) 0%, var(--orange-600) 100%); color: #fff; }

/* ---------------------------------------------------------------
   Slide-up detail drawer
   --------------------------------------------------------------- */
.bjb-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
  max-height: 88vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--e4); transform: translateY(101%);
  transition: transform .38s var(--ease);
  /* The site stylesheet sets `section { padding: 4.5rem 0 5rem }`, which
     would push the drawer header 72px down. Own the padding outright. */
  margin: 0; padding: 0 0 var(--s5);
}
.bjb-drawer.is-open { transform: none; }
.bjb-drawer__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: var(--s2) auto 0; }
.bjb-drawer__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5); background: var(--surface); border-bottom: 1px solid var(--line-soft);
}
.bjb-drawer__title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.bjb-drawer__close {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); cursor: pointer; font-size: 14px; font-family: inherit;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.bjb-drawer__close:hover { background: var(--err-bg); color: var(--err); }
.bjb-drawer__body { padding: var(--s5); }
.bjb-drawer h5 {
  font-size: 12px; font-weight: 800; color: var(--ink);
  margin: 0 0 var(--s3); text-transform: uppercase; letter-spacing: .6px;
}

@media (min-width: 992px) {
  /* On desktop the drawer reads better as a right-hand panel. */
  .bjb-drawer {
    left: auto; top: 0; bottom: 0; width: 520px; max-height: none;
    border-radius: var(--r-xl) 0 0 var(--r-xl); transform: translateX(101%);
  }
  .bjb-drawer.is-open { transform: none; }
  .bjb-drawer__grip { display: none; }
}

/* Airport timeline */
.bjb-tl { position: relative; padding-left: var(--s5); }
.bjb-tl::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.bjb-tl__node { position: relative; padding-bottom: var(--s5); }
.bjb-tl__node:last-child { padding-bottom: 0; }
.bjb-tl__node::before {
  content: ""; position: absolute; left: calc(-1 * var(--s5) + 2px); top: 6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--orange);
}
.bjb-tl__node--mid::before { border-color: var(--line); }
.bjb-tl__time { font-size: 15px; font-weight: 800; color: var(--ink); }
.bjb-tl__place { font-size: 13.5px; color: var(--ink); font-weight: 700; }
.bjb-tl__sub { font-size: 12px; color: var(--muted); }
.bjb-layover {
  font-size: 12.5px; color: var(--warn); background: var(--warn-bg);
  border: 1px dashed var(--warn-line); border-radius: var(--r-sm);
  padding: 7px var(--s3); margin: var(--s2) 0;
}
.bjb-rules { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.bjb-rules strong { color: var(--ink); }

/* ---------------------------------------------------------------
   Fare family cards
   --------------------------------------------------------------- */
.bjb-fares { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.bjb-farecard {
  position: relative; display: flex; flex-direction: column; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); text-align: left; font-family: inherit;
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.bjb-farecard:hover { border-color: rgba(245, 118, 26, .5); transform: translateY(-3px); box-shadow: var(--e3); }
.bjb-farecard.is-selected { border-color: var(--orange); box-shadow: var(--ring), var(--e2); background: var(--orange-50); }
.bjb-farecard__flag {
  position: absolute; top: -11px; left: var(--s5);
  padding: 3px 12px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-600) 100%);
  color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.bjb-farecard__name { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.bjb-farecard__tag { font-size: 12.5px; color: var(--muted); margin-bottom: var(--s4); min-height: 34px; }
.bjb-farecard__price { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; }
.bjb-farecard__per { font-size: 11.5px; color: var(--muted); margin-bottom: var(--s4); }
.bjb-farecard__list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.bjb-farecard__list li {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-size: 12.5px; color: var(--muted); margin-bottom: 7px; line-height: 1.5;
}
.bjb-farecard__list li i { margin-top: 2px; font-size: 11px; flex: 0 0 auto; }
.bjb-farecard__list li.yes i { color: var(--ok); }
.bjb-farecard__list li.no i { color: var(--faint); }
.bjb-farecard__pick {
  margin-top: auto; text-align: center; padding: 10px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); font-size: 13px; font-weight: 800; color: var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.bjb-farecard:hover .bjb-farecard__pick { border-color: var(--orange); color: var(--orange); }
.bjb-farecard.is-selected .bjb-farecard__pick {
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-600) 100%);
  border-color: transparent; color: #fff;
}

/* ---------------------------------------------------------------
   Forms - floating labels
   --------------------------------------------------------------- */
.bjb-field { position: relative; margin-bottom: var(--s4); }
.bjb-input, .bjb-select {
  width: 100%; padding: 20px var(--s3) 7px; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  outline: none; font-family: inherit; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bjb-select { padding-top: 19px; }
.bjb-input:focus, .bjb-select:focus { border-color: var(--orange); box-shadow: var(--ring); }
.bjb-input::placeholder { color: transparent; }
.bjb-float {
  position: absolute; left: 13px; top: 14px; font-size: 14px; color: var(--faint);
  pointer-events: none; transform-origin: left top;
  transition: transform .18s var(--ease), color .18s var(--ease), font-size .18s var(--ease);
}
.bjb-input:focus ~ .bjb-float,
.bjb-input:not(:placeholder-shown) ~ .bjb-float,
.bjb-select:focus ~ .bjb-float,
.bjb-select ~ .bjb-float,
.bjb-input[type="date"] ~ .bjb-float {
  transform: translateY(-9px); font-size: 11px; color: var(--muted); font-weight: 700;
}
.bjb-input:focus ~ .bjb-float, .bjb-select:focus ~ .bjb-float { color: var(--orange); }
.bjb-float .req { color: var(--orange); }
.bjb-input.is-invalid, .bjb-select.is-invalid { border-color: var(--err); background: #fffbfa; }
.bjb-err { display: block; font-size: 12px; color: var(--err); margin-top: var(--s1); }
.bjb-hint { font-size: 12px; color: var(--muted); margin-top: var(--s1); }

/* Plain-label variant (search screen, lookup form) */
.bjb-field--plain .bjb-input, .bjb-field--plain .bjb-select { padding: 11px var(--s3); }
.bjb-field--plain label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }

/* Traveller cards */
.bjb-pax-block {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); margin-bottom: var(--s4); background: var(--surface);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bjb-pax-block:focus-within { border-color: rgba(245, 118, 26, .5); box-shadow: var(--e2); }
.bjb-pax-block__head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.bjb-pax-block__badge {
  width: 34px; height: 34px; border-radius: var(--r-md); flex: 0 0 34px;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.bjb-pax-block__head h4 { margin: 0; font-size: 15px; }
.bjb-pax-block__head span { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------
   Add-ons
   --------------------------------------------------------------- */
.bjb-section-title {
  font-size: 12px; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .6px; margin: var(--s5) 0 var(--s3);
}
/* Three headings inside the add-ons card each carried their own inline
   style. A rule keeps them identical and lets a divider separate the
   groups, which is what made the card read as one undifferentiated run. */
.bjb-subhead {
  font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink); margin: var(--s5) 0 var(--s3);
  padding-top: var(--s5); border-top: 1px solid var(--line-soft);
}
.bjb-subhead--first { margin-top: 0; padding-top: 0; border-top: 0; }
.bjb-addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: var(--s2); }
.bjb-addon {
  display: flex; align-items: flex-start; gap: var(--s2); cursor: pointer;
  padding: var(--s3) var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); transition: border-color .22s var(--ease), background .22s var(--ease);
}
.bjb-addon:hover { border-color: rgba(245, 118, 26, .5); background: var(--orange-50); }
.bjb-addon input { accent-color: var(--orange); margin-top: 3px; }
.bjb-addon strong { display: block; font-size: 13.5px; color: var(--ink); }
.bjb-addon span { font-size: 12px; color: var(--muted); }
.bjb-addon.is-selected { border-color: var(--orange); background: var(--orange-50); }

/* Seat map */
/* The cabin is 6 seats wide whatever the column is, so on its own it
   left most of the card blank. Putting the key alongside fills that
   space with something useful and caps how far an optional widget can
   push the Continue button down the page. */
.bjb-seatmap {
  display: grid; grid-template-columns: max-content 178px;
  gap: var(--s5); align-items: start; justify-content: center;
  padding: var(--s3) 0;
}
.bjb-seatmap > div:first-child { max-height: 452px; overflow-y: auto; overflow-x: auto; scrollbar-width: thin; }
.bjb-seat-cabin {
  min-width: 320px; max-width: 400px; margin: 0 auto;
  padding: var(--s4) var(--s3) var(--s5);
  border: 1px solid var(--line); border-radius: 60px 60px var(--r-lg) var(--r-lg);
  background: linear-gradient(180deg, #fbfaf8 0%, #fff 22%);
}
.bjb-seat-nose { text-align: center; font-size: 10.5px; color: var(--faint); margin-bottom: var(--s3); letter-spacing: 1px; text-transform: uppercase; }
.bjb-seat-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; }
.bjb-seat-row__no { width: 22px; font-size: 10.5px; color: var(--faint); text-align: right; }
.bjb-seat-aisle { width: 18px; }
.bjb-seat {
  width: 30px; height: 30px; border-radius: 7px 7px var(--r-sm) var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: 10px; font-weight: 700; color: var(--ink); cursor: pointer; font-family: inherit;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .14s var(--ease);
}
.bjb-seat:hover:not(:disabled) { border-color: var(--orange); transform: translateY(-2px); }
.bjb-seat.is-occupied { background: #ecebe7; color: #b3aea4; cursor: not-allowed; border-color: #ecebe7; }
.bjb-seat.is-selected { background: var(--orange); border-color: var(--orange); color: #fff; animation: bjbPop .28s var(--ease); }
@keyframes bjbPop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.bjb-seat.is-exit { border-color: var(--ok-line); background: var(--ok-bg); }
.bjb-seat.is-exit.is-selected { background: var(--orange); border-color: var(--orange); }
.bjb-seat-legend {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
  font-size: 12px; color: var(--muted); margin-top: var(--s4);
  padding: var(--s4); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--canvas);
}
.bjb-seat-legend b { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.bjb-seat-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; vertical-align: -2px; margin-right: 5px; border: 1px solid var(--line); }

/* ---------------------------------------------------------------
   Fare summary
   --------------------------------------------------------------- */
.bjb-summary { position: sticky; top: 76px; }
.bjb-summary h4 { font-size: 15px; margin: 0 0 var(--s4); display: flex; align-items: center; gap: var(--s2); }
.bjb-line { display: flex; justify-content: space-between; gap: var(--s3); font-size: 13.5px; color: var(--muted); margin-bottom: var(--s2); }
.bjb-line strong { color: var(--ink); font-weight: 700; }
.bjb-line--sub { padding-left: var(--s3); font-size: 12.5px; color: var(--faint); }
.bjb-line--discount, .bjb-line--discount strong { color: var(--ok); }
.bjb-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--s3); margin-top: var(--s2); border-top: 2px solid var(--line-soft);
}
.bjb-total span { font-size: 14px; font-weight: 800; color: var(--ink); }
.bjb-total strong { font-size: 23px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; }

.bjb-coupon { display: flex; gap: var(--s2); margin-top: var(--s4); align-items: flex-start; }
.bjb-coupon .bjb-field { flex: 1; margin-bottom: 0; }
.bjb-coupon-msg { font-size: 12.5px; margin-top: 7px; }
.bjb-coupon-msg.ok { color: var(--ok); }
.bjb-coupon-msg.err { color: var(--err); }

.bjb-trust { display: flex; flex-direction: column; gap: 7px; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.bjb-trust div { display: flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--muted); }
.bjb-trust i { color: var(--ok); font-size: 12px; }

.bjb-mobilebar { display: none; }

/* ---------------------------------------------------------------
   Review
   --------------------------------------------------------------- */
.bjb-review-sec { border-bottom: 1px solid var(--line-soft); padding: var(--s5) 0; }
.bjb-review-sec:first-of-type { padding-top: 0; }
.bjb-review-sec:last-child { border-bottom: 0; }
.bjb-review-sec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.bjb-review-sec__head h4 { margin: 0; font-size: 15px; }
.bjb-kv { display: grid; grid-template-columns: 148px 1fr; gap: 6px var(--s4); font-size: 13.5px; margin: 0; }
.bjb-kv dt { color: var(--muted); }
.bjb-kv dd { color: var(--ink); font-weight: 600; margin: 0; }

.bjb-terms { display: flex; align-items: flex-start; gap: var(--s2); font-size: 13px; color: var(--muted); margin-bottom: var(--s2); line-height: 1.6; cursor: pointer; }
.bjb-terms input { accent-color: var(--orange); margin-top: 3px; width: 17px; height: 17px; flex: 0 0 17px; cursor: pointer; }
.bjb-terms a { color: var(--orange); text-decoration: underline; }

.bjb-leglabel {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--s3); padding: 4px var(--s3); border-radius: var(--r-pill);
  background: var(--orange-100); color: var(--orange);
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Payment
   --------------------------------------------------------------- */
.bjb-pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); gap: var(--s2); margin-bottom: var(--s5); }
.bjb-pay-method {
  display: flex; align-items: center; gap: var(--s3); cursor: pointer;
  padding: var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); transition: border-color .22s var(--ease), background .22s var(--ease);
}
.bjb-pay-method:hover { border-color: rgba(245, 118, 26, .5); }
.bjb-pay-method.is-selected { border-color: var(--orange); background: var(--orange-50); }
.bjb-pay-method i { color: var(--orange); font-size: 17px; }
.bjb-pay-method strong { font-size: 13.5px; color: var(--ink); }
.bjb-pay-panel { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); background: #fcfbf9; }

.bjb-processing { text-align: center; padding: var(--s8) var(--s5); }
.bjb-spinner {
  width: 46px; height: 46px; margin: 0 auto var(--s4); border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--orange); animation: bjbSpin .9s linear infinite;
}
@keyframes bjbSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   Confirmation + e-ticket
   --------------------------------------------------------------- */
.bjb-confirm-hero { text-align: center; padding: var(--s6) var(--s5) var(--s5); }
.bjb-confirm-hero__icon {
  position: relative;
  width: 84px; height: 84px; margin: 0 auto var(--s4); border-radius: 50%;
  background: var(--ok-bg); border: 2px solid var(--ok-line); color: var(--ok);
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  animation: bjbSuccess .6s var(--ease) both;
}
@keyframes bjbSuccess {
  0% { transform: scale(.4); opacity: 0; }
  55% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.bjb-confirm-hero__icon::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--ok-line); animation: bjbRipple 1.5s var(--ease) .4s 2;
}
@keyframes bjbRipple { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.65); opacity: 0; } }
.bjb-confirm-hero h2 { font-size: 28px; margin-bottom: var(--s2); }

.bjb-refbox {
  display: flex; align-items: center; justify-content: center; gap: var(--s6); flex-wrap: wrap;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-700) 100%);
  border-radius: var(--r-lg); padding: var(--s4) var(--s5); margin: var(--s5) auto 0; max-width: 660px;
  box-shadow: var(--e2);
}
.bjb-refbox div { text-align: center; }
.bjb-refbox span { display: block; font-size: 11px; color: rgba(255, 255, 255, .68); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.bjb-refbox strong { display: block; font-size: 19px; color: #fff; font-weight: 800; letter-spacing: .5px; }
.bjb-refbox .ok { color: #7ee2a8; }

.bjb-ticket { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--e2); }
.bjb-ticket__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5); background: linear-gradient(120deg, var(--navy) 0%, var(--navy-700) 100%);
}
.bjb-ticket__head img { height: 34px; }
.bjb-ticket__head .pnr { color: #fff; font-size: 12.5px; text-align: right; }
.bjb-ticket__head .pnr strong { display: block; font-size: 18px; letter-spacing: 1.5px; }
.bjb-ticket__body { padding: var(--s5); }
.bjb-ticket__route { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s4); align-items: center; padding-bottom: var(--s4); border-bottom: 1px dashed var(--line); margin-bottom: var(--s4); }
.bjb-ticket__stub { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s3); }
.bjb-ticket__stub div span { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.bjb-ticket__stub div strong { font-size: 14px; color: var(--ink); }

.bjb-actions { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; margin-top: var(--s5); }

/* ---------------------------------------------------------------
   Round trip
   --------------------------------------------------------------- */
.bjb-triptype { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }

.bjb-legtabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s5); }
.bjb-legtab {
  text-align: left; cursor: pointer; font-family: inherit;
  padding: var(--s4) var(--s5); border-radius: var(--r-lg);
  background: var(--surface); border: 1.5px solid var(--line);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.bjb-legtab:hover { border-color: rgba(245, 118, 26, .5); transform: translateY(-2px); }
.bjb-legtab.is-active { border-color: var(--orange); box-shadow: var(--ring); }
.bjb-legtab__k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }
.bjb-legtab__r { display: inline-block; font-size: 16px; font-weight: 800; color: var(--ink); margin-right: var(--s2); }
.bjb-legtab__d { font-size: 12.5px; color: var(--muted); }
.bjb-legtab__sel { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.bjb-legtab__sel i { margin-right: 4px; }
.bjb-legtab__sel--none { color: var(--faint); font-weight: 400; }

.bjb-rtbar {
  position: sticky; bottom: var(--s3); z-index: 20;
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  margin-top: var(--s4); padding: var(--s3) var(--s5);
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-700) 100%);
  border-radius: var(--r-lg); box-shadow: var(--e4);
}
.bjb-rtbar__leg span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255, 255, 255, .65); }
.bjb-rtbar__leg strong { font-size: 14px; color: #fff; }
.bjb-rtbar__leg strong.none { color: rgba(255, 255, 255, .5); font-weight: 400; }
.bjb-rtbar__total { margin-left: auto; text-align: right; }
.bjb-rtbar__total span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255, 255, 255, .65); }
.bjb-rtbar__total strong { font-size: 21px; font-weight: 800; color: #fff; }
.bjb-rtbar__total strong.none { color: rgba(255, 255, 255, .5); }
.bjb-rtbar .bjb-btn:disabled { opacity: 1; background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .6) !important; }

/* Combined trip summary */
/* auto-fit, not a fixed pair: a one-way trip has a single leg, and a
   hard 1fr 1fr left the other half of the column blank. */
.bjb-combo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.bjb-combo__air { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bjb-combo__date { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* One leg reads better as a band across the column than as a tall card
   with three quarters of its width empty. */
.bjb-combo__card:only-child {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s3) var(--s5); padding: var(--s4) var(--s5);
}
.bjb-combo__card:only-child .bjb-leglabel,
.bjb-combo__card:only-child .bjb-combo__air { margin-bottom: 0; }
.bjb-combo__card:only-child .bjb-times { flex: 1 1 300px; }
.bjb-combo__card:only-child .bjb-combo__date { margin: 0 0 0 auto; }
.bjb-combo__card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); background: var(--surface); box-shadow: var(--e1); }

/* ---------------------------------------------------------------
   Manage booking
   --------------------------------------------------------------- */
.bjb-manage-form { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-start; }
.bjb-manage-form .bjb-field { flex: 1 1 200px; margin-bottom: 0; }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1199px) {
  .bjb-results { grid-template-columns: 248px 1fr; gap: var(--s4); }
  .bjb-srch__cells { grid-template-columns: 1fr 30px 1fr 1fr 1fr 1.1fr; }
  .bjb-srch__cell { padding: 8px 10px; }
  .bjb-srch__cell strong { font-size: 15px; }
  .bjb-srch__grid { grid-template-columns: minmax(0, 1fr) 38px repeat(4, minmax(0, 1fr)); gap: var(--s2); }
  .bjb-fares { gap: var(--s3); }
  .bjb-farecard { padding: var(--s4); }
}

@media (max-width: 991px) {
  .bjb-results { grid-template-columns: 1fr; }

  /* Six cells side by side stop being readable well before they stop
     fitting. Two up keeps every value at full size. */
  .bjb-srch { flex-wrap: wrap; }
  .bjb-srch__cells { flex: 1 1 100%; grid-template-columns: 1fr 1fr; }
  .bjb-srch__swap { display: none; }
  .bjb-srch__cell:nth-child(6) { grid-column: 1 / -1; }
  .bjb-srch__cell:nth-child(odd)::before { content: none; }
  .bjb-srch__go { flex: 1 1 100%; justify-content: center; margin-top: var(--s2); padding: 10px var(--s4); font-size: 13.5px; }
  .bjb-srch__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bjb-srch__x { grid-column: 1 / -1; justify-content: flex-start; padding: 0; }
  .bjb-srch__h1 { font-size: 18px; }

  .bjb-fcal__k { display: none; }
  .bjb-fcal__rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 33.33%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .bjb-fcal__rail::-webkit-scrollbar { display: none; }
  .bjb-fcal__d { scroll-snap-align: center; }

  .bjb-thead { display: none; }
  .bjb-summary { position: static; }
  .bjb-flight__main { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .bjb-fare {
    grid-column: 1 / -1; text-align: left;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    border-top: 1px solid var(--line-soft); padding-top: var(--s3);
  }
  .bjb-fare__sub { margin-bottom: 0; }
  .bjb-step__label { display: none; }
  .bjb-step__bar { width: 14px; }
  .bjb-fares { grid-template-columns: 1fr; }
  .bjb-farecard__tag { min-height: 0; }
  .bjb-combo { grid-template-columns: 1fr; }
  .bjb-seatmap { grid-template-columns: 1fr; gap: 0; }
  .bjb-seatmap > div:first-child { max-height: 400px; }
  /* Nine one-per-row option cards ran to about 600px before the seat
     map even started. Two up halves that. */
  .bjb-addon-grid { grid-template-columns: 1fr 1fr; }
  .bjb-addon { padding: 10px var(--s3); }
  .bjb-addon strong { font-size: 12.5px; }
  .bjb-addon span { font-size: 11.5px; }
  .bjb-seat-legend { flex-direction: row; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
  .bjb-seat-legend b { flex: 1 1 100%; }
  .bjb-combo__card:only-child { display: block; padding: var(--s5); }
  .bjb-combo__card:only-child .bjb-leglabel,
  .bjb-combo__card:only-child .bjb-combo__air { margin-bottom: var(--s3); }
  .bjb-combo__card:only-child .bjb-combo__date { margin: 10px 0 0; }

  /* Filters move into a bottom sheet */
  .bjb-filterbtn {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: 9px var(--s4); border-radius: var(--r-pill);
    border: 1px solid var(--line); background: var(--surface);
    font-size: 13px; font-weight: 700; color: var(--ink); font-family: inherit; cursor: pointer;
  }
  .bjb-filterbtn .n { background: var(--orange); color: #fff; border-radius: var(--r-pill); font-size: 11px; padding: 1px 7px; font-weight: 800; }
  .bjb-filters {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1250;
    max-height: 82vh; overflow-y: auto; border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(101%); transition: transform .34s var(--ease);
    background: var(--surface); border: 0; box-shadow: var(--e4);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .bjb-filters.is-open { transform: none; }
  .bjb-filters__sheethead {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft);
    position: sticky; top: 0; background: var(--surface); z-index: 2;
  }
  .bjb-filters__done { padding: var(--s4) var(--s5); position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line-soft); }
}

@media (min-width: 992px) {
  .bjb-filters__sheethead, .bjb-filters__done { display: none; }
}

@media (max-width: 767px) {
  .bjb-wrap { padding: var(--s4) 0 96px; }   /* clears the sticky mobile bar */
  .bjb-pad { padding: var(--s4); }
  .bjb-srch { padding: 6px; margin-bottom: var(--s2); }
  .bjb-srch__cell { padding: 7px 9px; }
  .bjb-srch__cell strong { font-size: 14.5px; }
  .bjb-srch__cell .s { font-size: 11px; }
  .bjb-srch--open { padding: var(--s4); }
  .bjb-srch__grid { grid-template-columns: 1fr; }
  .bjb-fcal { padding: 4px; margin-bottom: var(--s3); }
  .bjb-flight__main { grid-template-columns: 1fr; gap: 10px; padding: 14px var(--s4); }
  .bjb-flight__ribbons { padding: 10px var(--s4) 0; }
  .bjb-times__t { font-size: 18px; }
  .bjb-air__logo { width: 38px; height: 38px; flex-basis: 38px; }
  .bjb-fare { padding-top: 10px; }
  .bjb-flight__foot { padding: 4px var(--s4); }
  .bjb-inc { font-size: 11.5px; }
  /* Cabin and fare type are already stated in the trip bar and again
     on the fare step; dropping them here keeps the meta line short
     enough to share its row with View details. */
  .bjb-inc b, .bjb-inc__fare { display: none; }

  /* Filters, the sort chips and the count used to stack into three
     rows of chrome above the results. One scrolling row plus a thin
     count line gives the list back roughly 45px of screen. */
  .bjb-sortbar {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 6px var(--s3); align-items: center; padding: 10px var(--s4);
  }
  .bjb-sortbar__label { display: none; }
  .bjb-sortrail {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .bjb-sortrail::-webkit-scrollbar { display: none; }
  .bjb-sort { flex: 0 0 auto; padding: 7px var(--s3); }
  .bjb-count { grid-column: 1 / -1; margin-left: 0; font-size: 12px; }

  .bjb-tripbar { padding: var(--s3) var(--s4); }
  .bjb-tripbar__route { font-size: 17px; }
  /* Four flexed buttons wrapped 3 + 1, which made Edit search the
     widest thing on the bar. An even 2x2 reads as a deliberate set. */
  .bjb-tripbar__acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .bjb-tripbar__btn { justify-content: center; }
  .bjb-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .bjb-kv dd { margin-bottom: var(--s2); }
  .bjb-confirm-hero h2 { font-size: 22px; }
  .bjb-refbox { gap: var(--s4); padding: var(--s3) var(--s4); }
  .bjb-ticket__route { grid-template-columns: 1fr; text-align: left; }
  .bjb-actions .bjb-btn { flex: 1 1 100%; }
  .bjb-legtabs { grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s3); }
  .bjb-legtab { padding: var(--s3); }
  .bjb-legtab__r { font-size: 14px; margin-right: 0; display: block; }
  .bjb-legtab__d, .bjb-legtab__sel { font-size: 11.5px; }
  .bjb-rtbar { gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); }
  .bjb-rtbar__total { margin-left: 0; text-align: left; }
  .bjb-rtbar .bjb-btn { flex: 1 1 100%; }

  /* Sticky bottom fare bar with an expandable breakdown */
  .bjb-mobilebar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px -10px rgba(23, 35, 62, .35);
  }
  .bjb-mobilebar__row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); }
  .bjb-mobilebar__amt { flex: 1; }
  .bjb-mobilebar__amt span { display: block; font-size: 11px; color: var(--muted); }
  .bjb-mobilebar__amt strong { font-size: 19px; font-weight: 800; color: var(--ink); }
  .bjb-mobilebar__detail { display: none; padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft); max-height: 46vh; overflow-y: auto; }
  .bjb-mobilebar__detail.is-open { display: block; }

  /* The bar is position:fixed, so it sits on top of the page rather than
     in it - the last flight card was ending underneath it and its Select
     button could not be reached. Reserve its height at the foot of the
     screen. 118px covers the row plus the sticky ONWARD/RETURN summary
     the round trip adds above it. */
  .bjb-screen { padding-bottom: 118px; }

  /* The step name, only where the labels are hidden. */
  .bjb-stepnow {
    display: block;
    margin: 10px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
  }

  .bjb-stepnow b { color: var(--ink); font-size: 13px; }

  /* ---- tap targets ------------------------------------------------
     Everything here is meant to be hit with a thumb. Apple and Google
     both ask for 44px; these were coming out at 28-34. */
  .bjb-sortbtn,
  .bjb-chip,
  .bjb-tripbar__btn,
  .bjb-filters__clear,
  .bjb-flight__details {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .bjb-filters label,
  .bjb-check {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  .bjb-drawer__close,
  .bjb-linkbtn,
  .bjb-flight__toggle {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .bjb-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .bjb-screen, .bjb-confirm-hero__icon, .bjb-confirm-hero__icon::after,
  .bjb-seat.is-selected, .bjb-loading__plane, .bjb-skel__line { animation: none !important; }
  .bjb-btn, .bjb-flight, .bjb-farecard, .bjb-legtab, .bjb-drawer, .bjb-filters { transition: none !important; }
}

/* ---------------------------------------------------------------
   Print: e-ticket only
   --------------------------------------------------------------- */
@media print {
  body * { visibility: hidden !important; }
  #bjbTicket, #bjbTicket * { visibility: visible !important; }
  #bjbTicket { position: absolute; left: 0; top: 0; width: 100%; border: 0; box-shadow: none; }
  .bjb-noprint, .bjb-mobilebar, .bjb-stepper { display: none !important; }
}

/* =====================================================================
   "My Booking" in the header
   ---------------------------------------------------------------------
   Only one-day.html and round-trip.html carry this - they are the two
   pages a booking is actually made on, and bj-flight-journey.js reads
   ?manage= to reopen one already in progress. Every other page in the
   site has no booking to manage, so the button would be a dead end.

   Styled as a quiet outline next to the orange Special Offers pill: two
   filled buttons side by side in a header read as a choice between
   equals, and this is the secondary of the two.
   ===================================================================== */
.bjb-mybooking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  padding: 9px 16px;
  border: 1px solid rgba(23, 35, 62, .2);
  border-radius: 999px;
  background: #fff;
  color: #17233e !important;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color .22s ease, background-color .22s ease, color .22s ease;
}

/* fontawesome.min.js swaps <i class="fa"> for an <svg>, so the glyph has
   to be addressed both ways or it stops being sized once the page settles. */
.bjb-mybooking i,
.bjb-mybooking svg {
  width: 13px;
  height: 13px;
  font-size: 12px;
  color: #f5761a;
  fill: currentColor;
}

.bjb-mybooking:hover {
  border-color: #f5761a;
  background: rgba(245, 118, 26, .07);
  color: #17233e !important;
}

/* The header row is tight below 1200px; the label goes and the ticket
   stays, the same way Special Offers drops its own text. */
@media (max-width: 1199px) {
  .bjb-mybooking { padding: 9px 12px; margin-right: 8px; }
  .bjb-mybooking span { display: none; }
}

@media (max-width: 991px) {
  .bjb-mybooking { display: none; }
}

/* =====================================================================
   Header on the two flight-booking pages
   ---------------------------------------------------------------------
   These carry one button the other 33 pages do not - My Booking - and
   the header row had no room to spare. Measured on round-trip.html:

       1600 / 1440   nav 442px, right group 532px   -> one row
       1366 and down                                 -> TWO rows

   Everywhere else the row holds together to about 1150px. My Booking
   added roughly 150px to the right group and moved the break 200px up
   the scale, which puts it inside the most common laptop widths.

   The phone block is what gives. It is 180px of "CALL US / +91 93115
   11338" repeating a number that is already in the navy strip directly
   above it, so below 1400px it collapses to its icon - still a tap
   target, still tel:, just not spelt out twice on one screen.

   Scoped to .bjb-flightpage because hotel-listing.html and three other
   pages load this stylesheet too, and none of them have My Booking or
   this problem.
   ===================================================================== */
@media (max-width: 1399px) and (min-width: 992px) {
  .bjb-flightpage .main_header_area .bjh-call__txt { display: none; }

  .bjb-flightpage .main_header_area .bjh-call {
    padding: 0;
    gap: 0;
  }

  /* the label goes before the whole button does */
  .bjb-flightpage .bjb-mybooking {
    padding: 8px 13px;
    font-size: 12px;
    margin-right: 8px;
  }

  .bjb-flightpage .main_header_area .navbar-flex { gap: 12px; }
}

/* Tighter still where the row is narrowest before the burger takes over. */
@media (max-width: 1199px) and (min-width: 992px) {
  .bjb-flightpage .main_header_area .icon-nav > li > a { padding-left: 10px; padding-right: 10px; }
  .bjb-flightpage .main_header_area .register-login .nir-btn { padding: 8px 14px; font-size: 12px; }
}