/* Trip2World — B2C booking-flow enhancements (assets/js/booking-enhance.js). Uses the booking overlay's own tokens. */
/* Results layout: filter sidebar beside the results (wide screens), a "Filters" disclosure above them (narrow screens). */
.bkx-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-3, 24px); align-items: start; }
.bkx-layout.is-bare { grid-template-columns: minmax(0, 1fr); }
.bkx-main { min-width: 0; }
.bkx-toolbar { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin;
  border: 1px solid var(--line); border-radius: 14px; background: var(--void-2, #0A0B0E); font-size: 13px; color: var(--mist-dim); }
.bkx-toolbar[hidden] { display: none; }
.bkx-side-head { list-style: none; padding: 14px 16px 6px; font-size: 15px; font-weight: 700; color: var(--paper, #fff); }
.bkx-side-head::-webkit-details-marker { display: none; }
.bkx-side-body { padding: 0 16px 14px; }
.bkx-group { border: 0; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.bkx-group:first-child { border-top: 0; }
.bkx-group legend { padding: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--text-muted, #9A9CA1); }
.bkx-group .bkx-check { display: flex; width: 100%; padding: 4px 0; cursor: pointer; }
.bkx-check-label { color: var(--mist, #EAE8E3); }
.bkx-hint { margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--text-muted, #9A9CA1); white-space: nowrap; }
.bkx-group select { width: 100%; }
.bkx-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bkx-slot { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12px;
  background: transparent; border: 1px solid var(--line); color: var(--mist, #EAE8E3); }
.bkx-slot small { font-size: 11px; color: var(--text-muted, #9A9CA1); }
.bkx-slot:hover { border-color: rgba(255,255,255,0.2); }
.bkx-slot[aria-pressed="true"] { border-color: var(--gold); background: rgba(212,175,55,0.08); color: var(--gold); }
.bkx-side-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Sort tabs: each names what that order puts first. */
.bkx-sorts { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); margin: 0 0 var(--sp-2, 16px);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--void-2, #0A0B0E); }
.bkx-sorts[hidden] { display: none; }
.bkx-sort { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; cursor: pointer; text-align: left; font: inherit;
  background: transparent; border: 0; border-left: 1px solid var(--line); border-bottom: 2px solid transparent; border-radius: 0; color: var(--mist-dim); }
.bkx-sort:first-child { border-left: 0; }
.bkx-sort:hover { background: rgba(255,255,255,0.03); }
.bkx-sort-name { font-size: 14px; font-weight: 600; color: var(--mist, #EAE8E3); }
.bkx-sort-sub { font-size: 12px; white-space: nowrap; }
.bkx-sort[aria-pressed="true"] { background: rgba(212,175,55,0.06); border-bottom-color: var(--gold); }
.bkx-sort[aria-pressed="true"] .bkx-sort-name, .bkx-sort[aria-pressed="true"] .bkx-sort-sub { color: var(--gold); }
/* Nearby-date strip (flights). */
.bkx-dates { display: flex; gap: 6px; margin: 0 0 var(--sp-2, 16px); overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bkx-dates[hidden] { display: none; }
.bkx-dates[aria-busy="true"] { opacity: .55; pointer-events: none; }
.bkx-date { flex: 1 0 92px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; cursor: pointer; font: inherit;
  background: var(--void-2, #0A0B0E); border: 1px solid var(--line); color: var(--mist, #EAE8E3); }
.bkx-date:hover { border-color: rgba(255,255,255,0.2); }
.bkx-date-day { font-size: 12px; font-weight: 600; white-space: nowrap; }
.bkx-date-price { font-size: 12px; color: var(--mist, #EAE8E3); white-space: nowrap; }
.bkx-date-price.is-quiet { color: var(--text-muted, #9A9CA1); }
.bkx-date.is-low .bkx-date-price { color: var(--success, #7FD6A4); }
.bkx-date[aria-current] { border-color: var(--gold); background: rgba(212,175,55,0.08); cursor: default; }
.bkx-date[aria-current] .bkx-date-price { color: var(--gold); font-weight: 700; }
.bkx-slot:focus-visible, .bkx-sort:focus-visible, .bkx-date:focus-visible, .bkx-side-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.bkx-ctl { display: inline-flex; align-items: center; gap: 8px; }
.bkx-ctl select { background: transparent; color: var(--paper, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; }
.bkx-ctl select option { background-color: #17181B; color: #EAE8E3; }
.bkx-check input { accent-color: var(--gold); width: 16px; height: 16px; }
.bkx-count { margin-right: auto; font-size: 12px; }
.bkx-reset { background: none; border: 1px solid var(--line); color: inherit; border-radius: 100px; padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer; }
.bkx-reset:hover, .bkx-reset:focus-visible { color: var(--gold); border-color: rgba(212,175,55,0.4); }
.bk-result-card[hidden] { display: none !important; }
.bkx-breakdown { margin: var(--sp-3, 16px) 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.02); }
.bkx-bd-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: 8px; font-weight: 600; }
.bkx-bd-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.bkx-bd-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 700; color: var(--paper, #fff); }
.bkx-terms { align-items: flex-start; margin: var(--sp-2, 12px) 0; line-height: 1.5; }
.bkx-terms a { color: var(--gold); }
/* Result-card details and the fare comparison (booking design Stage 1). Status colours are the shared component tokens
   (components.css) with the same values as fallbacks, because the homepage overlay does not load components.css:
   green = confirmed positive (refundable, free cancellation), amber = restriction to note (non-refundable),
   blue = information (fare family, meal plan), neutral = not provided by the supplier. */
.bkx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bkx-na { color: var(--text-muted, #9A9CA1); font-style: italic; }
.bkx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bkx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; line-height: 1.6;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--mist, #EAE8E3); }
.bkx-chip[data-tone="success"] { background: var(--success-soft, rgba(127,214,164,0.12)); color: var(--success, #7FD6A4); border-color: rgba(127,214,164,0.3); }
.bkx-chip[data-tone="warning"] { background: var(--warning-soft, rgba(212,175,55,0.12)); color: #E9CD72; border-color: rgba(212,175,55,0.35); }
.bkx-chip[data-tone="info"] { background: var(--info-soft, rgba(62,107,176,0.18)); color: var(--info, #8FB4EA); border-color: rgba(62,107,176,0.45); }
.bkx-chip[data-tone="neutral"] { color: var(--text-muted, #9A9CA1); font-weight: 500; }
.bkx-chip[data-tone="demo"] { background: transparent; color: var(--text-muted, #9A9CA1); border-style: dashed; font-weight: 500; }
.bkx-fc, .bkx-hc { margin-top: 8px; font-size: 13px; color: var(--mist-dim); }
/* Each direction as a timeline: departure | duration, line, stops | arrival. */
.bkx-fc-leg { padding: 6px 0 2px; }
.bkx-fc-leg + .bkx-fc-leg { margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 10px; }
.bkx-fc-dir { display: block; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--text-muted, #9A9CA1); }
.bkx-fc-times { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; grid-template-areas: "dep mid arr"; align-items: center; gap: 14px; max-width: 520px; color: var(--mist, #EAE8E3); }
.bkx-fc-times strong { color: var(--paper, #fff); font-size: 18px; font-weight: 700; font-family: 'Inter Tight', sans-serif; }
.bkx-tl-dep { grid-area: dep; }
.bkx-tl-arr { grid-area: arr; text-align: right; }
.bkx-tl-dep, .bkx-tl-arr { display: flex; flex-direction: column; line-height: 1.25; }
.bkx-tl-code { font-size: 12px; color: var(--mist-dim); }
.bkx-tl-mid { grid-area: mid; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--mist-dim); text-align: center; }
.bkx-tl-line { position: relative; display: block; width: 100%; height: 1px; background: var(--graphite, #3E4045); }
.bkx-tl-line::before, .bkx-tl-line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--graphite, #3E4045); }
.bkx-tl-line::before { left: 0; }
.bkx-tl-line::after { right: 0; background: var(--mist-dim); }
.bkx-fc-shift { font-size: 11px; font-weight: 700; color: #E9CD72; vertical-align: super; }
/* The card's own summary line repeats what the timeline shows (time, duration, stops, cabin, return date), so it gives way
   to it on decorated cards; undecorated cards keep it. */
.bk-flight-main:has(.bkx-fc) .bk-flight-meta { display: none; }
.bk-flight-main:has(.bkx-fc) .bk-flight-route { font-size: 17px; }
.bkx-tags { display: flex; gap: 6px; margin-bottom: 8px; }
.bk-flight-card:has(.bkx-fc) .bk-flight-side { align-self: stretch; justify-content: center; min-width: 150px; padding-left: var(--sp-3, 24px); border-left: 1px dashed var(--line); }
.bkx-fc-fares { margin-top: 8px; color: var(--mist, #EAE8E3); }
.bkx-fc-fares strong { color: var(--gold); }
.bkx-fc-tax { margin-top: 4px; font-size: 12px; color: var(--text-muted, #9A9CA1); }
.bkx-hc-am { margin-top: 8px; }
.bkx-hc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--text-muted, #9A9CA1); margin-right: 4px; }
.bk-result-card [data-select]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bkx-ctl select:focus-visible, .bkx-check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bkx-cmp { margin-top: var(--sp-3, 16px); }
.bkx-cmp-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 600; }
.bkx-cmp .bk-fineprint { margin: 4px 0 8px; }
.bkx-cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.bkx-cmp-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bkx-cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--mist, #EAE8E3); }
.bkx-cmp-table th, .bkx-cmp-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 118px; }
.bkx-cmp-table tr:last-child th, .bkx-cmp-table tr:last-child td { border-bottom: 0; }
.bkx-cmp-table thead th { color: var(--paper, #fff); font-weight: 700; background: rgba(255,255,255,0.03); }
.bkx-cmp-table tbody th { color: var(--text-muted, #9A9CA1); font-weight: 600; font-size: 12px; min-width: 92px; position: sticky; left: 0; background: #141518; }
.bkx-cmp-table thead th:first-child { position: sticky; left: 0; background: #17181B; min-width: 92px; }
.bkx-cmp-table .is-selected { background: rgba(212,175,55,0.07); }
.bkx-cmp-table td strong { color: var(--gold); white-space: nowrap; }
.bkx-cmp-sel { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--gold); }
/* Flight results use almost the whole screen width. Scoped to the /flights/ page (body.site-page; the homepage overlay's body
   has no class) and to its results screen only -- search, booking and payment screens keep the 1280 px column
   (booking-shell.css). Browsers without :has() keep the column as before. */
body.site-page #bkPanels:has(> .bk-panel.active[data-panel="flights"] > .bk-flow > .bk-screen.active[data-screen="results"]) {
  max-width: min(1760px, 100%);
}
/* The breadcrumbs and the page heading widen with the results, so all three share one left edge. Above 900 px the results
   take the site's own 64 px page margin (--padding-desktop, the header's and the heading's margin); tablets and phones keep
   the booking shell's own margins. site.css is not changed. */
body.site-page:has(#bkPanels > .bk-panel.active[data-panel="flights"] > .bk-flow > .bk-screen.active[data-screen="results"]) :is(.page-hero-content, .t2w-breadcrumbs) {
  max-width: min(1760px, 100%);
}
@media (min-width: 901px) {
  body.site-page #bkPanels:has(> .bk-panel.active[data-panel="flights"] > .bk-flow > .bk-screen.active[data-screen="results"]) {
    padding-left: var(--padding-desktop, 64px); padding-right: var(--padding-desktop, 64px);
  }
}
/* Fare tiles inside each flight card: a full-width row under the itinerary and price. Up to four per row, never sideways
   scrolling: tiles wrap, and phones stack them. */
.bk-flight-card .bkx-fares { grid-column: 1 / -1; padding-top: var(--sp-2, 16px); border-top: 1px dashed var(--line); }
.bkx-fare-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(200px, calc((100% - 30px) / 4))), 1fr)); gap: 10px; align-items: start; }
.bkx-fare { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.02); }
.bkx-fare[hidden] { display: none; }
.bkx-fare:hover { border-color: rgba(255,255,255,0.2); }
.bkx-fare:focus-within { border-color: rgba(212,175,55,0.45); }
.bkx-fare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bkx-fare-name { color: var(--paper, #fff); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.bkx-fare-price { color: var(--gold); font-weight: 800; font-size: 16px; white-space: nowrap; font-family: 'Inter Tight', sans-serif; }
.bkx-fare-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.bkx-fare-facts .bkx-chip { white-space: normal; border-radius: 10px; }
.bkx-fare-rules { font-size: 12px; color: var(--mist-dim); }
.bkx-fare-rules summary { cursor: pointer; color: var(--mist, #EAE8E3); padding: 2px 0; }
.bkx-fare-rules summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.bkx-fare-rules dl { margin: 6px 0 0; display: grid; gap: 2px 0; }
.bkx-fare-rules dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-muted, #9A9CA1); margin-top: 6px; }
.bkx-fare-rules dd { margin: 0; color: var(--mist, #EAE8E3); line-height: 1.45; overflow-wrap: anywhere; }
.bkx-fare-pick { margin-top: auto; align-self: stretch; padding: 8px 14px; border-radius: 100px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  background: transparent; color: var(--gold); border: 1px solid rgba(212,175,55,0.55); }
.bkx-fare-pick:hover { background: rgba(212,175,55,0.1); }
.bkx-fare-pick:focus-visible, .bkx-fare-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bkx-fare-more { margin-top: 10px; padding: 6px 14px; border-radius: 100px; cursor: pointer; font: inherit; font-size: 13px; background: none; color: var(--mist, #EAE8E3); border: 1px solid var(--line); }
.bkx-fare-more:hover { border-color: rgba(212,175,55,0.4); color: var(--gold); }
/* The outcome of choosing a fare from a tile, above the fare options on the booking screen. */
.bkx-fare-note { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; border: 1px solid var(--line); }
.bkx-fare-note[hidden] { display: none; }
.bkx-fare-note[data-tone="info"] { background: var(--info-soft, rgba(62,107,176,0.18)); border-color: rgba(62,107,176,0.45); color: #C3D6F3; }
.bkx-fare-note[data-tone="success"] { background: var(--success-soft, rgba(127,214,164,0.12)); border-color: rgba(127,214,164,0.35); color: var(--success, #7FD6A4); }
.bkx-fare-note[data-tone="warning"] { background: var(--warning-soft, rgba(212,175,55,0.12)); border-color: rgba(212,175,55,0.35); color: #E9CD72; }
.bkx-fare-note:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bkx-note-actions { margin-top: 8px; }
.bkx-keep { padding: 6px 14px; border-radius: 100px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; background: transparent; color: var(--paper, #fff); border: 1px solid rgba(255,255,255,0.35); }
.bkx-keep:hover { border-color: var(--gold); color: var(--gold); }
.bkx-keep:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* While sending is held (a fare chosen on a result card is not settled yet): the fare options and the Send button read as
   waiting. The page's own script still enforces the hold; this is only how it looks. */
.bk-panel[data-bkx-hold] [data-el="wsSubmit"][aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.bk-panel[data-bkx-hold="pending"] [data-el="wsFares"] { opacity: .6; }
/* Fares the supplier gave one shared reference, and fares outside the active fare filters. */
.bkx-fare-dupnote { margin: 0 0 10px; font-size: 12px; color: #E9CD72; }
.bkx-fare-dup { margin: 0; font-size: 12px; color: var(--text-muted, #9A9CA1); line-height: 1.45; }
.bkx-fare.is-unmatched { opacity: .55; }
.bkx-fare-unmatched { font-size: 11px; color: var(--text-muted, #9A9CA1); }
/* Tablets and phones: one column. The filters fold into a "Filters" disclosure above the results (closed by default, so
   the first result stays near the top), the sort tabs scroll sideways inside their own frame. */
@media (max-width: 900px) {
  .bkx-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2, 16px); }
  .bkx-toolbar { position: static; max-height: none; overflow: visible; }
  .bkx-side-head { padding: 12px 16px; cursor: pointer; display: flex; justify-content: space-between; }
  .bkx-side-head::after { content: "+"; color: var(--gold); }
  .bkx-side[open] .bkx-side-head::after { content: "\2212"; }
  .bkx-sorts { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .bkx-sorts[hidden] { display: none; }
  .bkx-sort { flex: 1 0 auto; }
  .bk-flight-card:has(.bkx-fc) .bk-flight-side { min-width: 0; padding-left: 0; border-left: 0; border-top: 1px dashed var(--line); padding-top: 12px; }
}
@media (min-width: 901px) {
  .bkx-side-head { pointer-events: none; }
}
@media (max-width: 600px) {
  .bkx-date { flex: 0 0 84px; }
  .bkx-fc-times { gap: 10px; }
  .bkx-fc-times strong { font-size: 16px; }
  /* Two fares fit a 375 px screen without sideways scrolling; three or more scroll inside the table's own frame. */
  .bkx-cmp-table th, .bkx-cmp-table td { padding: 8px; min-width: 100px; }
  .bkx-cmp-table tbody th, .bkx-cmp-table thead th:first-child { min-width: 76px; }
  .bkx-fare-list { grid-template-columns: minmax(0, 1fr); }   /* fare tiles stack */
}