/* VOYAGER_THEME_APP_CSS_V1
   Core stylesheet for the voyager public theme: reset, header/nav,
   footer, buttons/inputs, product-tile rail + coming-soon state,
   hero/search shell. Page-specific CSS (search results, calendar,
   passenger popover, book/payment/status) lives in its own file per
   templates/public/themes/voyager/_sections/shared_styles.html include
   list, kept apart so no single file becomes another 5000-line app.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overscroll-behavior-x:none}
body.voyager-app{
  margin:0;background:var(--voy-color-bg);color:var(--voy-color-ink);
  font-family:var(--voy-font-body);font-size:var(--voy-font-size-base);
  line-height:var(--voy-line-base);overscroll-behavior-x:none;
}
.voyager-app img{max-width:100%;display:block}
.voyager-app a{color:inherit;text-decoration:none}
.voyager-app :focus-visible{outline:2px solid var(--voy-color-focus);outline-offset:2px}
.voyager-app h1,.voyager-app h2,.voyager-app h3{
  font-family:var(--voy-font-display);font-weight:600;margin:0;color:var(--voy-color-ink);
  letter-spacing:-.01em;
}
.voyager-app button{font-family:inherit;cursor:pointer}

.voy-container{max-width:var(--voy-container);margin:0 auto;padding:0 clamp(16px,2vw,24px)}
@media (max-width:760px){.voy-container{padding:0 16px}}

.voy-visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================= HEADER ============================= */
/* VOYAGER_HEADER_NAV_REVISION_V1: the product nav is the header's whole
   job - a real icon set (Lucide, see the SVGs below) replaces the earlier
   hand-drawn ones, and the tile treatment moves from a bubbly full pill
   to a quieter rounded-rect with a precise 2px underline for "current
   page" - closer to how a boarding-pass/airline nav reads than a chip. */
.voy-header{
  position:sticky;top:0;z-index:40;background:var(--voy-color-surface);
  border-bottom:1px solid var(--voy-color-border);height:var(--voy-header-h);
}
/* P1_HEADER_FULLWIDTH_V1 (correction 2026-09-15): the header
   must span the full viewport width with its own small fixed
   padding (not the shared .voy-container clamp every other section
   uses) - the previous shared-clamp width left large empty bands on
   both edges of the header specifically while the search card/hero/
   offers below it (still on .voy-container, untouched) stayed exactly
   where they were. Logo/nav sit left, utilities are pushed to the far
   right via margin-left:auto on .voy-header-actions instead of the
   nav stretching to fill the gap - no absolute positioning anywhere
   in this header any more, since the nav no longer needs to center on
   the search card (that requirement is explicitly superseded). */
.voy-header-inner{
  position:relative;max-width:none;width:100%;margin:0;padding:0 28px;height:100%;
  display:flex;align-items:center;gap:28px;
}
/* P0_NAV_ALIGN_V1 (correction 2026-09-15): the nav group must
   sit at the search card's own left edge, not just after the logo -
   the two only coincided by accident before because both used the
   same shared .voy-container clamp; P1_HEADER_FULLWIDTH_V1 above
   decoupled the header from that clamp, breaking the alignment. This
   overlay spans the header full-bleed (inset:0, ignoring the logo/
   nav flex flow entirely) and its own child reuses the .voy-container
   CLASS directly (not a re-typed calc() copy of its formula) so the
   nav's left edge is guaranteed identical to the search card's own
   left edge at any viewport, dynamically, with zero duplicated
   math. pointer-events:none on the overlay/inner wrapper keeps them
   from blocking clicks on the logo or utility controls, which sit
   outside the nav tiles but technically underneath this full-bleed
   box - only the real .voy-nav-tile elements get clicks back. */
.voy-nav-products{
  position:absolute;
  left:max(
    calc((100% - min(1240px, 100% - 48px)) / 2 + clamp(16px,2vw,24px)),
    calc(28px + 153.5625px + 24px)
  );
  top:50%;transform:translateY(-50%);
}
.voy-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.voy-brand img{height:44px;width:auto}
.voy-brand-text{font-family:var(--voy-font-display);font-size:clamp(17px,1.4vw,21px);font-weight:700;color:var(--voy-color-ink)}

/* HEADER_NAV_RESTORED_V1 (correction 2026-09-15): the admin
   reopened the header-simplification decision - the product nav row
   must be visible and functional above the search card at desktop and
   tablet widths, not folded into the hamburger. The hamburger stays for
   the width where the row genuinely does not fit (<=760px, this
   stylesheet own established mobile breakpoint - see .voy-container
   above) - its own duplicate links in .voy-mobile-sheet-panel already
   cover that case. */
.voy-nav-products{display:flex;align-items:stretch;gap:4px;flex:0 0 auto;min-width:0;height:100%}
.voy-nav-tile{
  display:flex;align-items:center;gap:9px;padding:0 16px;border-radius:var(--voy-radius-sm);
  font-size:14px;font-weight:600;color:var(--voy-color-ink-soft);white-space:nowrap;position:relative;
  align-self:center;height:44px;
}
.voy-nav-tile::after{
  content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;border-radius:2px;
  background:var(--voy-color-primary);opacity:0;transform:scaleX(.6);transition:opacity .15s ease,transform .15s ease;
}
/* VOYAGER_HEADER_NAV_REVISION_V1: a precise underline (not a filled pill)
   reads as "current tab" the way a real airline/booking nav does - bold
   label + tinted icon carry the rest of the emphasis, calmly. */
.voy-nav-tile[data-active="true"]{color:var(--voy-color-primary-dark);font-weight:700}
.voy-nav-tile[data-active="true"]::after{opacity:1;transform:scaleX(1)}
.voy-nav-tile[data-active="true"] .voy-icon{color:var(--voy-color-primary)}
.voy-nav-tile:not([data-active="true"]):hover{background:var(--voy-color-surface-alt)}
.voy-nav-tile .voy-icon{width:20px;height:20px;flex-shrink:0;color:var(--voy-color-muted)}
.voy-nav-tile[data-coming-soon]{color:var(--voy-color-muted);cursor:pointer}
.voy-soon-pill{
  font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  background:transparent;color:var(--voy-color-muted);
  border:1px solid var(--voy-color-border);border-radius:var(--voy-radius-pill);
  padding:2px 7px;line-height:1.4;
}

/* P0_CORRECTIVE_HOTFIX_V1: .voy-header-actions' own margin-left:auto is
   the LAST-KNOWN-GOOD, unconditional mechanism (P1_HEADER_FULLWIDTH_V1)
   that keeps the theme/language/login/menu cluster pinned to the far
   right at every width, independent of anything else in the row - a
   prior pass (BOOKING_FLOW_UI_CORRECTION_V1) moved this margin onto the
   new .voy-header-contacts sibling instead, which broke completely
   whenever .voy-header-contacts was display:none (its default at
   narrower widths): a display:none element contributes NO margin to
   the flex layout at all, so with nobody left holding an active
   margin-left:auto, .voy-header-actions collapsed back to normal flow
   position immediately after .voy-nav-products - visually overlapping
   it (confirmed live via a real screenshot at 1696px: theme/language/
   login rendering jammed against the "Fluturime" nav tile). Restored
   here unconditionally so .voy-header-actions can never again depend on
   a sibling's visibility. */
.voy-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
/* P0_CORRECTIVE_HOTFIX_V1: header contact line (Germany/Switzerland/
   Kosovo phone numbers + email). .voy-nav-products is position:absolute
   with a FIXED left offset that stays constant (~206-252px across the
   761-1696px range this line targets) and a fixed own content width
   (~635px, 4 tiles), so its right edge sits at a near-constant ~841-888px
   regardless of viewport in that range (see P0_NAV_ALIGN_V1 above).
   Below ~1620px there simply is not enough free space in the header row
   for a full, LEGIBLE 3-phone+email line without either overlapping the
   nav tiles or crushing the text unreadably small - confirmed by direct
   measurement, not a guess - so this block stays out of flow (display:
   none) below that width, and the SAME contact links remain reachable
   from the hamburger menu instead (.voy-mobile-menu-trigger has been
   visible at every width, not just mobile, since
   P0_REGRESSION_REPAIR_V1) - the own explicit "compact row or
   existing menu" fallback instruction, applied down through every width
   below this line's own safe minimum rather than only below the 760px
   mobile breakpoint.
   At >=1620px this block switches to flex and takes over the
   right-pinning duty FROM .voy-header-actions via its OWN
   margin-left:auto (see the media query below, which also zeroes out
   .voy-header-actions' margin so the two never fight over the same
   free space) - both elements then sit flush against each other at the
   header's right edge, with the auto-margin landing this block's own
   left edge safely clear of the nav tiles (verified live at 1696px,
   the width the own screenshot used, with room to spare). */
.voy-header-contacts{display:none;align-items:center;gap:14px;white-space:nowrap}
.voy-header-contact{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--voy-color-ink-soft)}
.voy-header-contact:hover{color:var(--voy-color-primary-dark)}
.voy-header-contact .voy-icon{width:13px;height:13px;flex-shrink:0}
/* FLAG_ICON_V1 (correction, 2026-09-19): real flag image assets
   replace both the old emoji flags here (unreliable cross-platform -
   Windows Chrome/Edge render an unsupported flag emoji as its bare
   regional-indicator letter pair, e.g. "DE", not a blank glyph -
   confirmed via the own screenshot) and the mobile sheet's old
   phone-icon + two-letter text-code combo below, which is now removed
   entirely in favor of the same flag-only convention. */
.voy-header-contact-flag{width:18px;height:12px;flex-shrink:0;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.voy-header-contact-flag-mobile{width:24px;height:16px;border-radius:3px}
@media (min-width:1620px){
  .voy-header-actions{margin-left:0}
  .voy-header-contacts{display:flex;margin-left:auto}
}
/* Mobile/tablet home for the same contact links, per the admin's
   "move into a compact row or the existing menu" fallback - reuses the
   existing .voy-nav-tile look so it fits the sheet's established list
   style instead of introducing a second visual language there. */
.voy-mobile-sheet .voy-header-contact{width:100%;padding:10px 12px;font-size:14px;color:var(--voy-color-ink)}
.voy-mobile-sheet .voy-header-contact .voy-icon{width:18px;height:18px;color:var(--voy-color-primary)}
/* VOYAGER_DARK_MODE_V1 (item 5): same visual language as
   .voy-mobile-menu-trigger (pill icon button) - only rendered when the
   operator has Operator.public_dark_mode_enabled set, exactly like every
   other theme's own toggle button. */
.voy-theme-toggle{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;
  border-radius:var(--voy-radius-pill);border:1px solid var(--voy-color-border);
  background:var(--voy-color-surface);font-size:16px;line-height:1;color:var(--voy-color-ink-soft);
}
.voy-theme-toggle:hover{border-color:var(--voy-color-border-strong)}
.voy-theme-moon{display:none}
:root[data-public-theme="dark"] .voy-theme-sun{display:none}
:root[data-public-theme="dark"] .voy-theme-moon{display:inline}
.voy-mobile-sheet .voy-theme-toggle{width:100%;height:auto;padding:12px;gap:10px;justify-content:flex-start;border-radius:var(--voy-radius-md);font-size:15px;font-weight:600;color:var(--voy-color-ink)}
.voy-lang-select{
  appearance:none;background:var(--voy-color-surface-alt);border:1px solid var(--voy-color-border);
  border-radius:var(--voy-radius-pill);padding:8px 30px 8px 14px;font-size:13px;font-weight:600;
  color:var(--voy-color-ink-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23707b76' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.voy-header-link-btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--voy-radius-pill);
  font-size:13px;font-weight:700;border:1px solid var(--voy-color-border);color:var(--voy-color-ink);
  background:var(--voy-color-surface);
}
.voy-header-link-btn:hover{border-color:var(--voy-color-border-strong)}
/* P0_REGRESSION_REPAIR_V1 (correction 2026-09-15): the admin's
   header spec always wanted 4 controls in the right-hand utility
   zone (theme toggle, language, login, menu) - this trigger was
   display:none at every width above 760px, so the 4th control never
   actually appeared on desktop/tablet, only on real mobile. It stays
   visible at every width now; the extra sheet content (Check-in,
   Kushtet, data-deletion, my-bookings) is otherwise unreachable from
   the header on wider screens. */
.voy-mobile-menu-trigger{
  display:inline-flex;width:40px;height:40px;border-radius:var(--voy-radius-pill);border:1px solid var(--voy-color-border);
  background:var(--voy-color-surface);align-items:center;justify-content:center;
}

@media (max-width:760px){
  .voy-header{height:var(--voy-header-h-mobile)}
  .voy-header-inner{padding:0 16px;gap:12px}
  .voy-brand img{height:32px}
  .voy-nav-products{display:none}
  .voy-header-link-btn span{display:none}
  .voy-mobile-menu-trigger{display:inline-flex}
}

/* HOTFIX_6_HEADER_NAV_CENTER_V1 (correction 2026-09-15): the
   nav row's own left-packed flex:1 box had no relation to the search
   card's actual center, and had no width limit, so at >=1200px the
   tiles simply started right after the logo instead of centering above
   the card, and at narrower tablet widths (761-1199px) they overflowed
   past .voy-header-actions entirely (confirmed pre-existing on live
   production, unrelated to HEADER_NAV_RESTORED_V1 above). Two separate
   treatments, since the shared .voy-container/.voy-header-inner padding
   clamp only becomes viewport-independent at >=1200px:

   - 761-1199px: nav stays visible and functional (per the own
     HEADER_NAV_RESTORED_V1 decision above - it must not fold into the
     hamburger at tablet widths), but becomes a compact, horizontally
     scrollable row instead of silently overflowing into the utility
     controls.
   - >=1200px: the nav is taken out of flow and centered on the search
     card's own left edge (24px = the header's own resolved padding at
     this range) and 600px width (the card's own fixed width at this
     range) - both measured live against .voy-search-panel and proven
     to land within 0.01px of the card's true center at 1366/1440/1920px. */
@media (min-width:761px) and (max-width:1199px){
  /* P0_CORRECTIVE_HOTFIX_V1: the flex:1/overflow-x:auto pair below was
     written assuming .voy-nav-products participates in the flex layout
     - it does not (position:absolute, set unconditionally above), so
     neither property ever had any effect and the tiles simply rendered
     at their natural content width (~522-635px), overlapping
     .voy-header-actions at the narrow end of this range (confirmed live
     at 768px: actions rendered at x=488-725 while nav's real right edge
     was x=728). max-width IS respected by an absolutely-positioned
     element, so this is what actually enforces "compact, horizontally
     scrollable row instead of silently overflowing" - the min(...) form
     keeps a viewport-proportional cap without ever exceeding a sensible
     fixed ceiling. */
  .voy-nav-products{
    flex:1 1 auto;min-width:0;max-width:min(420px, calc(100vw - 520px));overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .voy-nav-products::-webkit-scrollbar{display:none}
  .voy-nav-tile{flex:0 0 auto;padding:0 10px;gap:6px;font-size:13px;height:40px}
  .voy-nav-tile .voy-icon{width:17px;height:17px}
  .voy-soon-pill{font-size:9px;padding:1px 5px}
}

/* Mobile product/menu sheet */
/* PANEL_OPEN_CLOSE_ANIMATION_V1 follow-up (item 3 continued): was a bare
   display:none/block toggle - the same zero-transition class of bug
   already fixed for .voy-calendar-pop/.voy-pax-pop/.voy-combo-pop above.
   Kept in the layout permanently (display never toggles), driven by
   visibility/pointer-events + the backdrop's opacity and the panel's own
   transform - same visibility-with-transition-delay convention as the
   others, so it stays interactive/visible for the full close animation
   and only leaves the accessibility tree once it would have finished.
   tokens.css's global `*{transition:none!important}` under
   prefers-reduced-motion already covers every selector below - nothing
   theme-specific to add for that here. */
.voy-mobile-sheet{
  position:fixed;inset:0;z-index:70;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .26s;
}
.voy-mobile-sheet[data-open="true"]{visibility:visible;pointer-events:auto;transition-delay:0s}
.voy-mobile-sheet-backdrop{position:absolute;inset:0;background:rgba(22,35,31,.4);opacity:0;transition:opacity .22s ease}
.voy-mobile-sheet[data-open="true"] .voy-mobile-sheet-backdrop{opacity:1}
.voy-mobile-sheet-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:var(--voy-color-surface);
  padding:20px;box-shadow:var(--voy-shadow-lg);display:flex;flex-direction:column;gap:18px;overflow-y:auto;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.2,.78,.25,1);
}
.voy-mobile-sheet[data-open="true"] .voy-mobile-sheet-panel{transform:translateX(0)}
.voy-mobile-sheet-close{align-self:flex-end;width:36px;height:36px;border-radius:var(--voy-radius-pill);
  border:1px solid var(--voy-color-border);background:var(--voy-color-surface);}
.voy-mobile-sheet .voy-nav-tile{width:100%;height:auto;justify-content:flex-start;padding:12px;font-size:15px;border-radius:var(--voy-radius-md)}
.voy-mobile-sheet .voy-nav-tile::after{display:none}
.voy-mobile-sheet .voy-nav-tile .voy-icon{color:var(--voy-color-primary)}

/* ============================= BUTTONS/INPUTS ============================= */
.voy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--voy-radius-md);font-size:15px;font-weight:700;
  border:1px solid transparent;line-height:1.2;
}
.voy-btn-primary{background:var(--voy-color-primary);color:#fff}
.voy-btn-primary:hover{background:var(--voy-color-primary-dark)}
/* VOYAGER_POLISH_V1: a flat accent button read as "just another button" -
   a soft gradient + a shadow tinted to the accent color (not a generic
   grey shadow) plus a 1px hover lift gives the primary booking action
   some real weight, without any bounce/gimmick - a single quick
   transition, matching the "small professional transitions only" rule. */
/* SKYEXPRESS_UX_V1 (item G): the search CTA no longer uses the strong
   saturated orange accent gradient - a calmer, SkyExpress-slate tone
   keeps it clearly clickable without dominating the whole page. Only
   .voy-search-cta uses .voy-btn-accent anywhere in this theme. */
.voy-btn-accent{
  background:linear-gradient(180deg,var(--voy-color-cta) 0%,var(--voy-color-cta-dark) 100%);
  color:#fff;font-weight:800;box-shadow:0 1px 2px rgba(24,38,54,.12),0 6px 16px rgba(63,111,143,.22);
}
.voy-btn-accent:hover{background:linear-gradient(180deg,var(--voy-color-cta-dark) 0%,var(--voy-color-cta-dark) 100%);
  box-shadow:0 2px 4px rgba(24,38,54,.16),0 8px 20px rgba(63,111,143,.28);transform:translateY(-1px)}
.voy-btn-accent:active{transform:translateY(0)}
.voy-btn-ghost{background:var(--voy-color-surface);color:var(--voy-color-ink);border-color:var(--voy-color-border)}
.voy-btn-ghost:hover{border-color:var(--voy-color-border-strong)}
.voy-btn-block{width:100%}
.voy-btn:disabled,.voy-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

.voy-field{
  display:flex;flex-direction:column;gap:4px;
  padding:10px 14px;border-radius:var(--voy-radius-md);border:1px solid var(--voy-color-border);
  background:var(--voy-color-surface);cursor:pointer;
}
.voy-field:hover{border-color:var(--voy-color-border-strong)}
.voy-field[data-open="true"]{border-color:var(--voy-color-primary);box-shadow:0 0 0 3px var(--voy-color-primary-tint)}
.voy-field-label{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--voy-color-muted)}
.voy-field-value{font-size:15px;font-weight:700;color:var(--voy-color-ink)}
.voy-field-value[data-empty="true"]{color:var(--voy-color-muted);font-weight:500}
.voy-field select,.voy-field input{border:0;background:transparent;font:inherit;color:inherit;width:100%;padding:0}
.voy-field select:focus,.voy-field input:focus{outline:none}

/* ============================= FOOTER ============================= */
/* FOOTER_BRAND_TRANSPARENT_V1 (correction 2026-09-14): the admin
   rejected a solid orange bar as too heavy/tall - the footer must be
   transparent (shows the page own background, adapting naturally to
   light/dark like every other surface - no more hardcoded always-dark-
   bar override) with brand/link text mixing the primary blue and the
   operator own orange accent. Kept as one compact flowing row - brand
   left, links right, wrapping only if truly needed - plus a slim
   copyright line, both with reduced padding versus the earlier pass. */
.voy-footer{background:transparent;color:var(--voy-color-ink-soft);margin-top:16px;border-top:1px solid var(--voy-color-border)}
.voy-footer-inner{
  max-width:var(--voy-container);margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;
}
.voy-footer-brand{font-family:var(--voy-font-display);font-size:15px;font-weight:700;color:var(--voy-color-primary);flex-shrink:0}
.voy-footer-brand img{height:24px;width:auto;display:block}
.voy-footer-brand span{font-family:var(--voy-font-display);font-size:15px;font-weight:700;color:var(--voy-color-primary)}
.voy-footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.voy-footer-links a{font-size:13px;color:var(--voy-color-primary-dark);padding:2px 0}
.voy-footer-links a:hover{color:var(--voy-color-primary)}
/* BOOKING_FLOW_UI_CORRECTION_V1 (item 6): .voy-footer-bottom (the
   "© {year} {brand}" row) removed along with its markup in base.html -
   the footer is one row now, .voy-footer-inner above. */
@media (max-width:760px){
  .voy-footer-inner{flex-direction:column;align-items:flex-start;padding:12px 16px 10px;gap:6px}
  .voy-footer-links{gap:4px 14px}
}

/* ============================= COMING SOON MODAL ============================= */
/* PANEL_OPEN_CLOSE_ANIMATION_V1 follow-up (item 3 continued): was a bare
   display:none/flex toggle (plus a redundant [hidden] attribute the JS
   also flipped - removed from both the markup and openSoon/closeSoon in
   base.html, since it fought the same "author display always beats UA
   [hidden]{display:none}" gotcha documented elsewhere in this theme
   rather than doing anything useful once display stopped toggling here).
   Same permanently-in-layout, visibility+opacity+transform pattern as
   .voy-mobile-sheet above. */
.voy-soon-modal{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility 0s linear .2s;
}
.voy-soon-modal[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.voy-soon-modal-backdrop{position:absolute;inset:0;background:rgba(22,35,31,.45)}
.voy-soon-modal-card{
  position:relative;background:var(--voy-color-surface);border-radius:var(--voy-radius-lg);
  padding:32px;max-width:360px;text-align:center;box-shadow:var(--voy-shadow-lg);
  transform:translateY(14px) scale(.98);
  transition:transform .22s cubic-bezier(.2,.78,.25,1);
}
.voy-soon-modal[data-open="true"] .voy-soon-modal-card{transform:translateY(0) scale(1)}
.voy-soon-modal-card .voy-soon-pill{margin-bottom:14px;display:inline-block}
.voy-soon-modal-card p{color:var(--voy-color-ink-soft);font-size:14px;margin:8px 0 20px}

/* ===================================================================
   VOYAGER_PHOTO_CHANGER_V1 - background behind <main> only (below the
   header, above the footer), spanning both the hero/search section AND
   the offers section since both are children of the SAME <main> (see
   home.html). Same stacked-crossfade-<img> contract as Flori's own
   hero and the earlier SkyExpress Photo Changer precedent. Only when a
   background is actually configured does the plain grey page colour
   give way, and an adjustable readability overlay (0 = none, the
   default) sits between the photo and the search card / offer cards.
   =================================================================== */
main.public-content.voy-photo-bg{
  position:relative;isolation:isolate;background:var(--voy-color-bg);
}
main.public-content.voy-photo-bg>.voy-bg-layer{
  position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:var(--voy-color-bg);
}
main.public-content.voy-photo-bg>.voy-bg-layer .voy-bg-photo{
  position:absolute;inset:0;width:100%;height:100%;display:block;border:0;
  object-fit:cover;object-position:center center;
  opacity:0;transition:opacity 1.4s ease;will-change:opacity;
}
main.public-content.voy-photo-bg>.voy-bg-layer .voy-bg-photo.is-active{opacity:1}
/* VOYAGER_PHOTO_CHANGER_HERO_MASK_FIX: .voy-hero (search.css) has its
   own opaque gradient background for the 0-images default state - that
   must become transparent ONLY while the shared photo behind it is
   actually showing, so the same photo is visible immediately below the
   header (behind/around the search card), not just starting at the
   offers section below it. */
main.public-content.voy-photo-bg .voy-hero{background:transparent}
/* Readability overlay: --voy-overlay-opacity (0-100, from Operator.
   hero_photo_overlay_opacity, set inline on <main>) as a plain black
   veil alpha - 0 renders nothing, matching every operator that never
   touches this new field. */
main.public-content.voy-photo-bg>.voy-bg-layer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(0,0,0,calc(var(--voy-overlay-opacity,0)/100));
}
@media(prefers-reduced-motion:reduce){
  main.public-content.voy-photo-bg>.voy-bg-layer .voy-bg-photo{transition:none}
}