/* ==========================================================================
   Trip2World — Flights & Hotels demo flow
   These rules extend the EXISTING booking overlay (.booking-overlay /
   .booking-modal / .bk-header / .bk-tabs / .bk-panels / .bk-panel /
   .bk-title / .bk-grid / .bk-field are all defined in index.html and are
   NOT redefined here). Everything below uses the same CSS custom
   properties (--void, --gold, --paper, --mist, --mist-dim, --line, --sp-*,
   --ease) so the search/results/details/passengers/review/confirmation
   screens look like native parts of the overlay, not a separate app.
   ========================================================================== */

/* Dark native controls inside the booking application -- on the PHP pages (components.css sets the same on :root) and
   on the homepage overlay, which does not load components.css. color-scheme makes the browser draw the open option
   list, the date picker and autofill in the dark theme; the option colours below are honoured by Chromium/Firefox
   on Windows and Linux (macOS / mobile draw their own native, already-themed pickers). */
.bk-panels, .t2w-popover { color-scheme: dark; }
.bk-panels select option, .bk-panels select optgroup { background-color: #17181B; color: #EAE8E3; }
.bk-panels select option:checked { background-color: #2A2B30; color: #FAFAF7; }
.bk-panels select option:disabled { color: #7C7F85; }
.bk-field select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239A9CA1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center / 12px 8px;
}
.bk-field:focus-within { border-color: rgba(212,175,55,0.55); }
.bk-field input:-webkit-autofill { -webkit-text-fill-color: #FAFAF7; -webkit-box-shadow: 0 0 0 1000px #0E0F12 inset; caret-color: #FAFAF7; }

/* Each product panel (Flights / Hotels) contains a sequence of screens.
   Only one screen is visible at a time — same show/hide pattern already
   used by .bk-panel.active and .planner-step.active elsewhere on the page. */
.bk-flow { width: 100%; }
.bk-screen { display: none; }
.bk-screen.active { display: block; animation: fadeInUp .4s var(--ease); }

/* Trip type sub-tabs (Round Trip / One Way / Multi City) — a smaller pill
   row nested inside the Flights panel, styled like the outer .bk-tabs but
   at a lighter visual weight so the outer gold tab bar stays dominant. */
.bk-subtabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.bk-subtabs::-webkit-scrollbar { display: none; }
.bk-subtab {
  white-space: nowrap; padding: 9px 20px; font-size: 13px; font-weight: 600;
  color: var(--mist-dim); background: rgba(255,255,255,0.02); border: 1px solid var(--line);
  border-radius: 100px; cursor: pointer; transition: all .3s var(--ease); font-family: 'Inter', sans-serif;
}
.bk-subtab:hover { color: var(--paper); border-color: rgba(255,255,255,0.2); }
.bk-subtab.active { background: rgba(212,175,55,0.1); color: var(--gold); border-color: rgba(212,175,55,0.3); }

.bk-search-form[hidden] { display: none; }

/* From / swap / To row, sat above the main field grid */
.bk-route-row { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-3); }
.bk-route-row .bk-field { flex: 1; min-width: 0; }
.bk-swap-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 1px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.02); color: var(--paper);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .3s var(--ease);
}
.bk-swap-btn:hover { border-color: var(--gold); color: var(--gold); transform: rotate(180deg); }

.bk-checkbox-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.bk-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mist-dim); cursor: pointer; user-select: none; }
.bk-check input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }

.bk-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: var(--sp-2); }
.bk-actions.wide { justify-content: stretch; }
.bk-actions.wide > * { flex: 1; text-align: center; }

/* Multi-city segments */
.bk-multi-segments { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.bk-segment-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--sp-2); align-items: end;
  background: rgba(255,255,255,0.015); border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-2);
}
.bk-segment-row .bk-field { background: none; border: none; padding: 0; }
.bk-segment-label { grid-column: 1 / -1; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 600; }
.bk-remove-segment {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--mist-dim); cursor: pointer; font-size: 14px; transition: all .3s var(--ease);
}
.bk-remove-segment:hover { border-color: #F2795C; color: #F2795C; }
.bk-add-segment { align-self: flex-start; }

/* Results screen */
.bk-flow-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); justify-content: space-between; }
.bk-flow-head .bk-title { margin-bottom: 0; }
.bk-banner {
  background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.25); color: var(--gold);
  font-size: 13px; line-height: 1.5; padding: 14px 18px; border-radius: 12px; margin-bottom: var(--sp-3);
}
.bk-empty { padding: var(--sp-6) var(--sp-3); text-align: center; color: var(--mist-dim); font-size: 14px; }

.bk-results { display: flex; flex-direction: column; gap: var(--sp-2); }
.bk-result-card {
  background: var(--void-2); border: 1px solid var(--line); border-radius: 16px; padding: var(--sp-3);
  transition: border-color .3s var(--ease), transform .3s var(--ease); cursor: default;
}
.bk-result-card:hover { border-color: rgba(255,255,255,0.2); }

.bk-flight-card { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: center; }
.bk-flight-airline { font-size: 13px; color: var(--mist-dim); font-weight: 600; margin-bottom: 4px; }
.bk-flight-route { font-size: 20px; color: var(--paper); font-weight: 700; margin-bottom: 4px; }
.bk-flight-route .bk-arrow { color: var(--mist-dim); font-weight: 400; margin: 0 6px; }
.bk-flight-meta { font-size: 13px; color: var(--mist-dim); }
.bk-flight-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.bk-hotel-card { display: grid; grid-template-columns: 140px 1fr auto; gap: var(--sp-3); align-items: center; }
.bk-hotel-image { width: 140px; height: 112px; object-fit: cover; border-radius: 12px; grid-row: span 1; }
.bk-hotel-name { font-size: 18px; color: var(--paper); font-weight: 700; margin-bottom: 4px; }
.bk-hotel-name .bk-rating { color: var(--gold); font-size: 13px; font-weight: 600; margin-left: 6px; }
.bk-hotel-loc { font-size: 13px; color: var(--mist-dim); margin-bottom: 6px; }
.bk-hotel-meta, .bk-hotel-cancel { font-size: 13px; color: var(--mist-dim); }
.bk-hotel-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.bk-price { color: var(--gold); font-size: 20px; font-weight: 800; font-family: 'Inter Tight', sans-serif; white-space: nowrap; }

/* Details / review read-only value blocks — reuse .bk-field's look */
.bk-value { font-size: 17px; color: var(--paper); font-weight: 500; }
.bk-value-price { color: var(--gold); font-weight: 800; }
.bk-detail-image { width: 100%; max-height: 260px; object-fit: cover; border-radius: 16px; margin-bottom: var(--sp-3); }
.bk-fineprint { font-size: 13px; color: var(--mist-dim); line-height: 1.6; margin: var(--sp-2) 0; }
.bk-error { font-size: 13px; color: #F2795C; margin-top: var(--sp-2); display: none; }
.bk-error.show { display: block; }
.bk-summary-line { font-size: 16px; color: var(--mist); margin-bottom: var(--sp-3); line-height: 1.6; }

/* Passenger fieldsets */
.bk-passenger-block { padding-top: var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--line); }
.bk-passenger-block:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.bk-passenger-block legend, .bk-passenger-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold);
  font-weight: 600; margin-bottom: var(--sp-2); display: block;
}

/* Confirmation screen */
.bk-confirmation { text-align: center; max-width: 520px; margin: var(--sp-6) auto; padding: var(--sp-3); }
.bk-confirmation-icon {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(212,175,55,0.4); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto var(--sp-3);
  background: rgba(212,175,55,0.08);
}
.bk-confirmation .bk-title { margin-bottom: var(--sp-2); }
.bk-confirmation p { color: var(--mist-dim); font-size: 15px; line-height: 1.6; margin-bottom: var(--sp-2); }
.bk-ref { color: var(--gold); font-weight: 700; }
.bk-confirmation .bk-actions { justify-content: center; margin-top: var(--sp-4); }

/* Loading state */
.bk-flow.is-loading { opacity: .55; pointer-events: none; transition: opacity .2s var(--ease); }

/* ---------- Responsive: mirror the breakpoints already used by the rest
   of the booking overlay (900px / 600px) so nothing here clips or scrolls
   sideways on mobile. ---------- */
@media (max-width: 900px) {
  .bk-route-row { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .bk-swap-btn { align-self: center; margin: 0; }
  .bk-flight-card { grid-template-columns: 1fr; }
  .bk-flight-side { align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; margin-top: var(--sp-2); }
  .bk-hotel-card { grid-template-columns: 1fr; }
  .bk-hotel-image { width: 100%; height: 160px; }
  .bk-hotel-side { align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; margin-top: var(--sp-2); }
  .bk-segment-row { grid-template-columns: 1fr; }
  .bk-remove-segment { justify-self: flex-end; }
  .bk-actions { flex-direction: column; align-items: stretch; }
  .bk-actions .btn-primary, .bk-actions .btn-secondary, .bk-actions button { width: 100%; }
  .bk-flow-head { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Booking workspace (one screen per booking): itinerary / stay, fares, rules,
   travellers, contact and price breakdown in one continuous form, with a
   sticky summary beside it on wide screens and a collapsible summary on top
   on narrow ones. Same tokens as the rest of the overlay.
   ========================================================================== */
.bk-ws { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-4); align-items: start; }
.bk-ws-main { min-width: 0; }
.bk-ws-section { background: var(--void-2); border: 1px solid var(--line); border-radius: 16px; padding: var(--sp-3); margin-bottom: var(--sp-3); }
.bk-ws-h { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 700; margin: 0 0 var(--sp-2); }
.bk-ws-na { color: var(--mist-dim); font-style: italic; font-weight: 400; font-size: 14px; }
.bk-ws-sub { font-size: 13px; color: var(--mist-dim); margin-top: 2px; }
.bk-ws-quote:empty { display: none; }

.bk-ws-journey + .bk-ws-journey { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.bk-ws-journey-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: var(--sp-2); color: var(--paper); }
.bk-ws-journey-head span { color: var(--mist-dim); font-size: 14px; }
.bk-ws-segments { list-style: none; margin: 0; padding: 0; }
.bk-ws-segment { border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-2); }
.bk-ws-seg-top { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.bk-ws-seg-flight { color: var(--paper); font-weight: 700; }
.bk-ws-seg-op { color: var(--mist-dim); font-size: 13px; }
.bk-ws-seg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--sp-2); }
.bk-ws-seg-grid .bk-value { font-size: 15px; }
.bk-ws-connection { margin: 8px 0; padding: 8px 12px; border-left: 2px dashed rgba(212,175,55,0.5); color: var(--gold); font-size: 13px; }

.bk-ws-fares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-2); }
.bk-ws-fare { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: var(--sp-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.bk-ws-fare:hover { border-color: rgba(255,255,255,0.25); }
.bk-ws-fare.is-selected { border-color: var(--gold); background: rgba(212,175,55,0.07); }
.bk-ws-fare input { accent-color: var(--gold); width: 18px; height: 18px; margin: 0; }
.bk-ws-fare-name { color: var(--paper); font-weight: 700; }
.bk-ws-fare-price { color: var(--gold); font-weight: 800; white-space: nowrap; }
.bk-ws-fare-meta { grid-column: 2 / -1; color: var(--mist-dim); font-size: 13px; }
.bk-ws-fare:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.bk-ws-rules-for { font-size: 14px; color: var(--mist-dim); margin: 0 0 var(--sp-2); }
.bk-ws-rules .bk-value { font-size: 15px; line-height: 1.5; }
.bk-ws-list { margin: 0; padding-left: 18px; }
.bk-ws-list li { margin: 2px 0; }
.bk-ws-image { max-height: 220px; }

.bk-ws-account { font-size: 14px; color: var(--mist); line-height: 1.6; margin-bottom: var(--sp-2); padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); }
.bk-ws-account:empty { display: none; }
.bk-ws-account[data-state="error"], .bk-ws-account[data-state="travellers_error"] { border-color: rgba(242,121,92,0.4); }
.bk-ws-account a { color: var(--gold); }
.bk-link-btn { background: none; border: none; padding: 0; color: var(--gold); text-decoration: underline; cursor: pointer; font: inherit; }
.bk-ws-picker[hidden] { display: none; }
.bk-ws-picker select { width: 100%; }

/* Saved traveller selection: selector -> pending preview -> explicit "Use these details" (see mountSavedTraveller). */
.bk-st { margin: 0 0 var(--sp-2); padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.015); }
.bk-st .bk-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--mist-dim); font-weight: 600; display: block; margin-bottom: 8px; }
.bk-st-row { max-width: 460px; }
.bk-st-pending, .bk-st-confirm, .bk-st-linked { margin-top: 12px; }
.bk-st-pending[hidden], .bk-st-confirm[hidden], .bk-st-linked[hidden], .bk-st-missing[hidden], .bk-st-identity[hidden], .bk-st-legal[hidden] { display: none; }
.bk-st-preview, .bk-st-confirm p, .bk-st-linked p { font-size: 14px; color: var(--mist); line-height: 1.55; margin: 0; }
.bk-st-preview strong, .bk-st-confirm strong, .bk-st-linked strong { color: var(--paper); }
.bk-st-confirm { padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(212,175,55,0.4); background: rgba(212,175,55,0.07); }
.bk-st-linked { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.bk-st-linked > p:first-child { flex: 1 1 260px; }
.bk-st-linked .bk-st-missing, .bk-st-linked .bk-st-identity { flex: 1 1 100%; }
.bk-st-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; }
.bk-st-linked .bk-st-actions { margin-top: 0; }
.bk-st-actions .btn-primary, .bk-st-actions .btn-secondary { padding: 9px 16px; font-size: 13px; }
.bk-st-missing { font-size: 13px; color: var(--gold); margin: 4px 0 0; }
.bk-st-identity { margin-top: 10px; max-width: 460px; }
.bk-st-legal { font-size: 13px; color: var(--mist); margin: 8px 0 0; }
.bk-st-note { font-size: 13px; color: var(--mist-dim); margin: 8px 0 0; }
.bk-st-note:empty { display: none; }
.bk-ws-guest + .bk-ws-guest { margin-top: var(--sp-3); }
.bk-ws-guest-label { display: block; font-size: 14px; color: var(--paper); font-weight: 600; margin-bottom: 10px; }
.bk-ws-guest .bk-grid, .bk-passenger-block .bk-grid { margin-bottom: 0; }
.bk-ws-section .bk-grid { gap: var(--sp-2); margin-bottom: 0; }
.bk-ws-section .bk-field { padding: 14px 16px; }
.bk-ws-section .bk-field input, .bk-ws-section .bk-field select { font-size: 16px; }

.bk-ws-breakdown .bkx-bd-title { color: var(--paper); font-weight: 700; margin-bottom: 8px; }
.bk-ws-breakdown .bkx-bd-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--mist); font-size: 15px; }
.bk-ws-breakdown .bkx-bd-total { border-bottom: none; color: var(--gold); font-weight: 800; font-size: 17px; }

.bk-ws-summary { position: sticky; top: var(--sp-2); background: var(--void-2); border: 1px solid rgba(212,175,55,0.3); border-radius: 16px; padding: var(--sp-3); }
.bk-ws-sum-title { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 700; margin-bottom: var(--sp-2); }
.bk-ws-dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.bk-ws-dl dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mist-dim); margin-top: 8px; }
.bk-ws-dl dd { margin: 0; color: var(--paper); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.bk-ws-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); color: var(--mist); }
.bk-ws-sum-total strong { color: var(--gold); font-size: 20px; }

.bk-ws-mobile { display: none; margin-bottom: var(--sp-3); background: var(--void-2); border: 1px solid rgba(212,175,55,0.3); border-radius: 14px; }
.bk-ws-mobile > summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; color: var(--paper); font-weight: 600; list-style: none; }
.bk-ws-mobile > summary::-webkit-details-marker { display: none; }
.bk-ws-mobile > summary::after { content: '▾'; color: var(--gold); margin-left: 8px; }
.bk-ws-mobile[open] > summary::after { content: '▴'; }
.bk-ws-mobile-total { color: var(--gold); font-weight: 800; margin-left: auto; }
.bk-ws-mobile-body { padding: 0 16px 14px; }
.bk-ws-mobile-body .bk-ws-sum-title { display: none; }

@media (max-width: 900px) {
  .bk-ws { grid-template-columns: 1fr; }
  .bk-ws-summary { display: none; }
  .bk-ws-mobile { display: block; }   /* sticky only on standalone pages, below the fixed header (see the end of this file) */
  .bk-ws-section { padding: var(--sp-2); }
}

/* Price change approval (wsPriceGate): shown above the terms; the request cannot be sent until it is accepted. */
.bk-ws-pricegate { margin: var(--sp-2) 0; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(212,175,55,0.5); background: rgba(212,175,55,0.08); }
.bk-ws-pricegate[hidden] { display: none; }
.bk-ws-pricegate p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mist); }
.bk-ws-pricegate strong { color: var(--paper); }
.bk-actions button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 600px) {
  .bk-st { padding: 12px; }
  .bk-st-actions .btn-primary, .bk-st-actions .btn-secondary { flex: 1 1 auto; }
}
/* Standalone pages have the fixed site header (88px / 72px): keep the sticky summary below it. */
body.site-page .bk-ws-summary { top: 104px; }

/* Standalone /flights/ and /hotels/ only (body.site-page; the homepage overlay is untouched). Browsers without :has()
   keep the previous layout. */
/* Once a search has run, the page introduction gives way to the results: title only, less padding. */
body.site-page:has(#bkPanels .bk-panel.active .bk-screen.active:not([data-screen="search"])) .page-hero { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
body.site-page:has(#bkPanels .bk-panel.active .bk-screen.active:not([data-screen="search"])) .page-hero-content p { display: none; }
@media (max-width: 900px) {
  body.site-page:has(#bkPanels .bk-panel.active .bk-screen.active:not([data-screen="search"])) .page-hero-content h1 { font-size: 26px; margin: 6px 0 0; }
  /* The collapsed trip total stays in view while the booking form scrolls, just below the fixed header (57px here).
     Open, it scrolls with the page so its details never cover the form. */
  body.site-page .bk-ws-mobile:not([open]) { position: sticky; top: 64px; z-index: 50; box-shadow: 0 8px 20px rgba(0,0,0,0.45); }
  /* A field reached by keyboard or "scroll into view" lands below the header and that total, never under them. */
  html:has(body.site-page #bkPanels .bk-panel.active .bk-screen.active[data-screen="review"]) { scroll-padding-top: 150px; }
  /* Results: room below the last card so the fixed bottom dock never covers it. */
  body.site-page:has(#bkPanels .bk-panel.active .bk-screen.active[data-screen="results"]) #bkPanels { padding-bottom: 96px; }
}
/* While a booking is being reviewed or paid, the bottom dock steps aside so it cannot cover fields, the total or the
   send button (WCAG 2.4.11). It returns on every other screen and page. */
body.site-page:has(#bkPanels .bk-panel.active .bk-screen.active:is([data-screen="review"], [data-screen="payment"], [data-screen="confirmation"])) .glass-dock { display: none; }
.bk-st-row[hidden] { display: none; }

/* Flight passenger composition: per-type note, age-on-travel-date hint, and the "kept aside" notice for passengers a new
   search no longer includes (their details are only discarded on the customer's request). */
.bk-pax-note { margin: -8px 0 12px; font-size: 13px; color: var(--mist-dim); line-height: 1.5; }
.bk-pax-age { display: block; margin-top: 6px; font-size: 12px; color: var(--mist-dim); line-height: 1.4; min-height: 0; }
.bk-pax-age:empty { display: none; }
.bk-pax-aside { margin-top: var(--sp-3); padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(212,175,55,0.35); background: rgba(212,175,55,0.06); }
.bk-pax-aside[hidden] { display: none; }
.bk-pax-aside p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mist); }
.bk-pax-aside strong { color: var(--paper); }
@media (max-width: 600px) { .bk-pax-aside { padding: 12px; } }