/**
 * Booking Flow Layout Styles - Essential Layout Only
 * Minimal styles needed for basic page functionality
 */

@import url('./event-booking-typography.css');

/* BS-5865: single source of truth for the mobile side gutter shared by every homepage/rooms-page
   section (search strip, filters bar, hotel grid, announcement bar, footer, cart banner). */
:root {
    --event-mobile-gutter: 16px;
}

/* ========================================
   ESSENTIAL PAGE STRUCTURE
   ======================================== */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Main content wrapper */
.gdlr-content {
    width: 100%;
    flex: 1 0 auto;
    box-sizing: border-box;
}

/* Main content container - Compact spacing */
.main-content-container {
    padding: 16px 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.booking-flow--no-banner .main-search-from-container {
    margin: 16px auto 8px;
}

.booking-flow--no-banner #home-hotels {
    margin: 16px auto 0;
}

.booking-flow--no-banner #home-form {
    margin-top: 0;
}

/* Banner/Hero Image Container - Compact Design */
.main-search-form-image-container {
    margin: 0 auto 0;
    max-width: 1400px;
    /* BS-5865 R7: single source of truth for the hero's side inset, shared with the ::after
       scrim below so the two can't drift apart (they used to: the scrim hardcoded 20px while
       this padding varied 20-40px per breakpoint, so the scrim bled past the image edge). */
    --hero-inset: 40px; /* combined with .main-content-container's own side padding, the hero inset totals Figma's 80 at ≥1400px */
    padding: 0 var(--hero-inset);
    box-sizing: border-box;
}

.booking-flow-hero-frame {
    position: relative;
    /* BS-5865 round 6 (row 2): the frame clips the zoomed photo (see the global override below). */
    overflow: hidden;
    border-radius: 16px;
}

.booking-flow-hero-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    border-radius: 16px;
    box-sizing: border-box;
}

.booking-flow-hero-copy__content {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    max-width: 56rem;
    width: calc(100% - 64px);
    text-align: center;
}

/* BS-5865 round 10g (OL canvas row 75): the hero headline is the event type ramp's H1 — on LA28
   that is the Extended Bold cut, which only the font-stretch token selects. */
.booking-flow-hero-copy__title {
    margin: 0;
    font-family: var(--event-type-h1-family, var(--event-font-family, "DM Sans")), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--event-text-primary-color, #000000);
    font-size: clamp(1.375rem, 3.2vw, 2.75rem);
    font-weight: var(--event-type-h1-weight, 700);
    font-stretch: var(--event-type-h1-stretch, normal);
    line-height: 1.15;
    letter-spacing: 0.04em;
}

.booking-flow-hero-copy__subtitle {
    margin: 12px 0 0;
    font-family: var(--event-font-family, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--event-text-primary-color, #000000);
    font-size: clamp(0.875rem, 1.6vw, 1.125rem);
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* BS-5865 round 10g (OL canvas rows 11 + 75, Figma 1168-20059): the LA28 hero is an uppercase
   48px/32px Extended Bold headline over a 16px Body L Medium dates line. */
body.event-branding-preset-la28 .booking-flow-hero-copy__title {
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.event-branding-preset-la28 .booking-flow-hero-copy__subtitle {
    margin-top: 12px;
    font-family: var(--event-type-body-l-medium-family, var(--event-font-family, "DM Sans")), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--event-type-body-l-medium-size, 16px);
    font-weight: var(--event-type-body-l-medium-weight, 500);
    line-height: var(--event-type-body-l-medium-line-height, 1.5);
}

@media (max-width: 767px) {
    /* !important: global-v2.css caps every h1 at 24px !important under 768px. */
    body.event-branding-preset-la28 .booking-flow-hero-copy__title {
        font-size: 32px !important;
    }

    body.event-branding-preset-la28 .booking-flow-hero-copy__subtitle {
        margin-top: 8px;
    }
}


/* BS-5865 (OL sandbox QA row 2): Appearance → Hero Text Position "Upper" keeps the copy in the
   top band of the photo. Declared after the short-hero rule at every breakpoint so it wins.
   Round 6: the band starts where the Figma hero puts the title (y 117.5 of 450 = 26%), which
   with the 168% zoom is the middle of the sky; the shorter heroes start proportionally higher. */
.main-search-form-image-container[data-event-hero-copy="upper"] .booking-flow-hero-copy__content {
    top: 26%;
}

.main-search-form-image-container .csg_event_banner {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    box-shadow: none;
}

/* Desktop banner: visible at ≥992px only */
.main-search-form-image-container .csg_event_banner--desktop {
    display: none;
}
@media (min-width: 992px) {
    .main-search-form-image-container .csg_event_banner--desktop {
        display: block;
    }
    .main-search-form-image-container .csg_event_banner--mobile {
        display: none;
    }
}
/* Mobile banner: visible at <992px only; fallback to desktop image if mobile not set */
@media (max-width: 991px) {
    .main-search-form-image-container .csg_event_banner--mobile {
        display: block;
    }
}

/* Search Form Wrapper - overlap only when an event banner is present */
.main-search-from-container {
    margin: 16px auto 0;
    padding: 0 20px;
    width: 100%;
    max-width: 1400px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 100;
}

.booking-flow--has-banner .main-search-from-container {
    margin: -84px auto 0;
}

#home-hotels {
    margin: 16px auto 0;
    padding: 0 20px;
    max-width: 1400px;
    width: 100%;
    box-sizing: border-box;
}

/* BS-5865 S2: the legacy gdlr-hotel rule `.single-booking .gdlr-item-start-content` pads the
   search-strip container 70px at the bottom; the Figma strip-to-filters gap is 64 on desktop, so
   the container ends flush and #home-hotels carries the gap itself. */
.gdlr-content .main-content-container.gdlr-item-start-content {
    padding-bottom: 0;
}

@media (min-width: 1024px) {
    #home-hotels {
        margin-top: 64px;
    }

    /* The filters bar's own 16px top margin is the phone strip-to-bar gap (HotelGrid.css); on
       desktop #home-hotels already carries the 64px Figma gap, so the bar must not add to it. */
    #home-hotels .hotel-filters-bar {
        margin-top: 0;
    }
}

.booking-flow--has-banner #home-hotels {
    margin: -20px auto 0;
}

.gdlr-content + .public-booking-footer {
    margin-top: 0;
}

@media (max-width: 768px) {
    .gdlr-content + .public-booking-footer {
        margin-top: 0;
    }
}

/* ========================================
   BOOKING FLOW BANNER
   ======================================== */

/* BS-5643: flat bar under the nav, above the hero — not a caption on the hero scrim. */
.booking-flow-banner {
    width: 100%;
    background: var(--event-primary-darkest-color, #006AAD);
    padding: 12px 24px;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--event-font-family, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.booking-flow-banner__content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    color: var(--event-greyscale-lightest-color, #fff);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    box-sizing: border-box;
}

.booking-flow-banner__content p {
    margin: 0 0 8px 0;
    color: #ffffff;
}

.booking-flow-banner__content p:last-child {
    margin-bottom: 0;
}

.booking-flow-banner__content strong {
    font-weight: 600;
    color: #ffffff;
}

.booking-flow-banner__content a {
    color: #ffffff;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.booking-flow-banner__content a:hover {
    opacity: 0.8;
}

.booking-flow-banner__content ul,
.booking-flow-banner__content ol {
    margin: 8px 0;
    padding-left: 20px;
    text-align: left;
    display: inline-block;
}

.booking-flow-banner__content li {
    margin: 4px 0;
    color: #ffffff;
}

/* ========================================
   RESPONSIVE LAYOUT
   ======================================== */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .main-content-container {
        padding: 20px 40px;
    }
    
    .main-search-from-container,
    #home-hotels {
        padding: 0 40px;
    }
    
    .main-search-form-image-container {
        margin-bottom: 0;
    }
    
    .main-search-from-container {
        margin-top: -50px;
        margin-bottom: 4px;
    }
    
    .booking-flow-banner {
        padding: 20px 40px;
    }
    
    .booking-flow-banner__content {
        font-size: 16px;
    }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .main-content-container {
        padding: 18px 32px;
    }

    .main-search-from-container,
    #home-hotels {
        padding: 0 32px;
    }

    .main-search-form-image-container {
        --hero-inset: 32px;
        padding: 0 var(--hero-inset);
    }
}

/* Tablet (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .main-content-container {
        padding: 16px 24px;
    }

    .main-search-from-container,
    #home-hotels {
        padding: 0 24px;
    }

    .main-search-from-container {
        margin-top: -35px;
        margin-bottom: 4px;
    }

    .main-search-form-image-container {
        --hero-inset: 24px;
        padding: 0 var(--hero-inset);
        margin-bottom: 0;
    }
    
    .main-search-form-image-container .csg_event_banner {
        width: 100%;
        height: auto;
    }

    .booking-flow-hero-frame,
    .booking-flow-hero-copy {
        border-radius: 12px;
    }

    .booking-flow-hero-copy__content {
        top: calc(12% + 40px);
        width: calc(100% - 48px);
    }

    .booking-flow-hero-copy__title {
        font-size: clamp(1.125rem, 4.2vw, 1.75rem);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .booking-flow-hero-copy__subtitle {
        margin-top: 8px;
        -webkit-line-clamp: 2;
    }

    .main-search-form-image-container[data-event-hero-copy="upper"] .booking-flow-hero-copy__content {
        top: calc(20% + 8px);
    }

}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    .main-content-container {
        padding: 16px var(--event-mobile-gutter, 16px);
        overflow-x: hidden;
    }

    /* #home-hotels sits directly under .gdlr-content (single-layer inset), but
       .main-search-from-container is nested inside .main-content-container above — giving it its
       own side padding here would double the gutter, so it relies on the parent's alone. */
    #home-hotels {
        padding: 0 var(--event-mobile-gutter, 16px);
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-search-from-container {
        padding: 0;
        max-width: 100%;
        overflow-x: hidden;
        margin-top: -30px;
        margin-bottom: 4px;
    }

    .main-search-form-image-container {
        margin-bottom: 0;
        --hero-inset: 20px;
        padding: 0 var(--hero-inset);
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-search-form-image-container .csg_event_banner {
        border-radius: 12px;
        width: 100%;
        max-width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    .booking-flow-hero-frame,
    .booking-flow-hero-copy {
        border-radius: 12px;
    }

    .booking-flow-hero-copy__content {
        top: calc(10% + 24px);
        width: calc(100% - 40px);
    }


    .main-search-form-image-container[data-event-hero-copy="upper"] .booking-flow-hero-copy__content {
        top: calc(18% + 6px);
    }

    .booking-flow-banner {
        padding: 14px 0;
    }

    .booking-flow-banner__content {
        padding: 0 var(--event-mobile-gutter, 16px);
        font-size: 14px;
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .main-content-container {
        padding: 12px var(--event-mobile-gutter, 16px);
        overflow-x: hidden;
    }

    #home-hotels {
        padding: 0 var(--event-mobile-gutter, 16px);
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-search-from-container {
        padding: 0;
        max-width: 100%;
        overflow-x: hidden;
        margin-top: -20px;
        margin-bottom: 4px;
    }

    .main-search-form-image-container {
        --hero-inset: 16px;
        padding: 0 var(--hero-inset);
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-search-form-image-container .csg_event_banner {
        border-radius: 8px;
        width: 100%;
        max-width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    .booking-flow-hero-frame,
    .booking-flow-hero-copy {
        border-radius: 8px;
    }

    .booking-flow-hero-copy__content {
        top: calc(10% + 16px);
        width: calc(100% - 32px);
    }

    .main-search-form-image-container[data-event-hero-copy="upper"] .booking-flow-hero-copy__content {
        top: calc(18% + 4px);
    }

    .booking-flow-hero-copy__title {
        font-size: clamp(1rem, 5vw, 1.375rem);
        letter-spacing: 0.03em;
    }

    .booking-flow-hero-copy__subtitle {
        margin-top: 6px;
        font-size: 0.8125rem;
    }

    .booking-flow-banner {
        padding: 12px 0;
    }

    .booking-flow-banner__content {
        padding: 0 var(--event-mobile-gutter, 16px);
        font-size: 14px;
    }
}

/* ========================================
   GLOBAL BANNER OVERRIDES
   ======================================== */

.main-search-form-image-container img.csg_event_banner,
.gdlr-content img.csg_event_banner,
img.csg_event_banner.lazy-image {
    width: 100% !important;
    /* BS-5643: the upload never pushes the hero past half the viewport. */
    height: min(var(--event-hero-height, 450px), 50vh) !important;
    object-fit: cover !important;
    /* BS-5865: Settings → Booking Flow → Appearance "Hero Image Focal Point" picks the band the crop keeps. */
    object-position: center var(--event-hero-focal-y, center) !important;
    border-radius: 16px !important;
}

/* BS-5865 round 6 (row 2, Figma 1077:25067): Appearance "Hero Image Zoom" scales the photo up inside
   .booking-flow-hero-frame (which clips it) from the same focal edge the crop keeps, so a landscape
   upload can show its sky band the way the Figma hero does (168%, top). Frame-scoped on purpose: the
   single-booking banners share img.csg_event_banner but have no clipping frame. */
.booking-flow-hero-frame img.csg_event_banner {
    transform: scale(var(--event-hero-zoom, 1));
    transform-origin: center var(--event-hero-focal-y, center);
}

/* BS-5643: the hero keeps its own dark-bottom scrim independent of the announcement bar, which is
   now a flat strip above it, not a caption on the image. */
.main-search-form-image-container {
    position: relative;
}

.main-search-form-image-container::after {
    content: '';
    position: absolute;
    /* BS-5865 R7: matches the container's own --hero-inset padding at every breakpoint (was a
       flat 20px, so the scrim bled past the image edge wherever padding grew beyond 20px). */
    left: var(--hero-inset, 20px);
    right: var(--hero-inset, 20px);
    bottom: 0;
    height: 45%;
    background: var(--event-image-text-scrim, linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%));
    border-radius: 0 0 16px 16px;
    pointer-events: none;
}

/* ========================================
   ROOMS PAGE LAYOUT OPTIMIZATIONS
   ======================================== */

/* Compact layout for rooms page components */
.single-hotel-page.new-booking-components {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.booking_room_selection {
    margin-top: 0 !important;
}

.gdlr-booking-content {
    padding-top: 8px !important;
}


.hotel-booking-container {
    margin-top: -10px;
}

/* Responsive Banner Overrides */
@media (max-width: 768px) {
    /* Override plugin CSS on tablet */
    .main-search-form-image-container img.csg_event_banner,
    .gdlr-content img.csg_event_banner,
    img.csg_event_banner.lazy-image {
        width: 100% !important;
        height: min(var(--event-hero-height-tablet, 280px), 50vh) !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    .main-search-form-image-container::after {
        /* left/right inherit --hero-inset (20px at this breakpoint) from the container. */
        border-radius: 0 0 12px 12px;
    }
}

@media (max-width: 480px) {
    /* Override plugin CSS on mobile */
    .main-search-form-image-container img.csg_event_banner,
    .gdlr-content img.csg_event_banner,
    img.csg_event_banner.lazy-image {
        width: 100% !important;
        height: min(var(--event-hero-height-mobile, 200px), 50vh) !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    .main-search-form-image-container::after {
        /* left/right inherit --hero-inset (16px at this breakpoint) from the container. */
        border-radius: 0 0 8px 8px;
    }
}

/* BS-5865 (mobile hero rows): the hero grows ~40% on phones — the Figma trade for the shorter
   announcement header — while staying event-configurable. Scaling the resolved
   --event-hero-height-mobile token (rather than a fixed px) keeps a "short" preset event 40%
   taller too, not just the 200px default. This also fixes the 481-767px range reading off
   --event-hero-height-tablet above (280px default) despite being phones, not tablets — every
   width ≤767 now scales off the one "mobile" token. At the default 200px token and a 390×844
   viewport this renders 280px (below the 50vh=422px cap), leaving the two-row search card and
   its Search button above the fold. */
@media (max-width: 767px) {
    .main-search-form-image-container img.csg_event_banner,
    .gdlr-content img.csg_event_banner,
    img.csg_event_banner.lazy-image {
        height: min(calc(var(--event-hero-height-mobile, 200px) * 1.4), 50vh) !important;
    }
}

/* ========================================
   NO AVAILABILITY MESSAGE
   ======================================== */

.no-availability-container {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.no-availability-container .main-search-form-image-container {
    margin-bottom: 40px;
}

.no-availability-message {
    background: #23262F;
    padding: 60px 40px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #2A2D3A;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
    /* min-height: 300px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.no-availability-message h2 {
    color: #FFFFFF;
    font-family: var(--event-font-family, "DM Sans"), sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.no-availability-message p {
    color: #B1B5C3;
    font-family: var(--event-font-family, "DM Sans"), sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* Responsive adjustments - Match header/footer padding */
@media (min-width: 1400px) {
    .no-availability-container {
        padding: 0 24px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .no-availability-container {
        padding: 0 24px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .no-availability-container {
        padding: 0 24px;
    }
}

@media (max-width: 767px) {
    .no-availability-container {
        margin: 30px auto;
        padding: 0 20px;
    }
    
    .no-availability-message {
        padding: 48px 24px;
        min-height: 180px;
    }
    
    .no-availability-message h2 {
        font-size: 20px;
    }
    
    .no-availability-message p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .no-availability-container {
        margin: 20px auto;
        padding: 0 16px;
    }
    
    .no-availability-message {
        padding: 40px 20px;
        min-height: 160px;
    }
    
    .no-availability-message h2 {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .no-availability-message p {
        font-size: 13px;
    }
}

/* ========================================
   PAYMENT SESSION EXPIRED
   ======================================== */

/* BS-5865: fills the space between header and footer instead of leaving a short
   white band above the footer. */
.booking-payment-expired-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    box-sizing: border-box;
}

.booking-payment-expired {
    background: var(--event-surface-primary-color, #fff);
    border: 1px solid var(--event-hairline-color, #EAEAEC);
    border-radius: var(--event-button-radius, 8px);
    padding: 48px 40px;
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.booking-payment-expired__icon {
    width: 64px;
    height: 64px;
    background: color-mix(in srgb, var(--event-primary-color, #15AEE2) 12%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.booking-payment-expired__icon svg {
    width: 32px;
    height: 32px;
    color: var(--event-primary-color, #15AEE2);
}

.booking-payment-expired h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--event-text-primary-color, #1f1f1f);
    margin: 0 0 16px 0;
}

.booking-payment-expired p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--event-text-secondary-color, #6B7280);
    margin: 0 0 32px 0;
}

/* BS-5865 round 10c (OL canvas row 66, Figma 1157-18427): on the LA28 preset the card is a plain
   hairline outline, the icon is a bare outline glyph on the text colour, and the title is serif. */
body.event-branding-preset-la28 .booking-payment-expired {
    border-color: var(--event-hairline-color, #CBCDD3);
    border-radius: 8px;
}

body.event-branding-preset-la28 .booking-payment-expired__icon {
    background: transparent;
    width: auto;
    height: auto;
    margin-bottom: 20px;
}

body.event-branding-preset-la28 .booking-payment-expired__icon svg {
    width: 48px;
    height: 48px;
    color: var(--event-text-primary-color, #000);
}

/* event-booking-typography.css pins every heading to the sans stack with !important. */
html body.event-branding-preset-la28 .booking-payment-expired h2 {
    font-family: var(--event-type-subhead-l-family, var(--event-font-family, inherit)) !important;
    font-weight: 400;
    font-size: 28px;
}

/* The generic primary action reads the accent token; the Figma card's CTA is the event's button colour. */
body.event-branding-preset-la28 .booking-payment-expired .booking-action-btn--primary {
    background: var(--event-button-primary-bg, var(--event-cta-color, #15AEE2));
    color: var(--event-button-primary-text, var(--event-on-cta-color, #fff));
    box-shadow: none;
}

/* BS-5865: native <select> popups in dark mode. No stylesheet gave <option> a background and
   color-scheme was only inherited from :root, so the Nights / sort / checkout dropdown lists
   painted white with white text until hovered (Sustin, stg, 21 Sep). The select declares its
   scheme itself and its options get the flow's surface + text tokens; the rooms-page select
   already had its own copy of this (RoomsPageSearch.css). */
body.event-color-mode-dark .booking-search-form select,
body.event-color-mode-dark .hotel-filters-bar select,
body.event-color-mode-dark .booking-checkout__main select,
body.event-color-mode-dark .booking-extras-container select,
body.event-color-mode-dark .booking-rooms-container select {
    color-scheme: dark;
}

body.event-color-mode-dark .booking-search-form select option,
body.event-color-mode-dark .hotel-filters-bar select option,
body.event-color-mode-dark .booking-checkout__main select option,
body.event-color-mode-dark .booking-extras-container select option,
body.event-color-mode-dark .booking-rooms-container select option {
    background-color: var(--event-surface-secondary-color, #23262F);
    color: var(--event-text-primary-color, #FFFFFF);
}

body.event-color-mode-light .booking-search-form select,
body.event-color-mode-light .hotel-filters-bar select,
body.event-color-mode-light .booking-checkout__main select,
body.event-color-mode-light .booking-extras-container select,
body.event-color-mode-light .booking-rooms-container select {
    color-scheme: light;
}