/**
 * Booking Search Form Component Styles - Safari Compatible
 * Self-contained styles for the booking search form component
 */

/* Import component variables */
/* @import url('../css/components/booking-search-variables.css'); - Commented out, variables inlined */

/* ========================================
   BOOKING SEARCH FORM COMPONENT
   ======================================== */

/* Prevent Global Style Conflicts - Specific Reset (NO WILDCARD) */
/* Apply resets only to direct form elements, not nested components */
.booking-search-form > *,
.booking-search-form__form > *,
.booking-search-form__field > *,
.booking-search-form input,
.booking-search-form select,
.booking-search-form button:not(.room-selector__counter-btn),
.booking-search-form label,
.modern-search-container > *,
.modern-search-container input,
.modern-search-container select,
.modern-search-container label {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Reset positioning and floats for only our form primitives (avoid affecting popups) */
.booking-search-form .search-field,
.booking-search-form .booking-search-form__field,
.booking-search-form .booking-search-form__input-wrapper,
.booking-search-form .booking-search-form__label,
.modern-search-container .search-field {
    position: relative !important;
    float: none !important;
    clear: none !important;
}

.booking-search-form,
.modern-search-container {
    position: relative !important;
    isolation: isolate;
}

.booking-search-form__field,
.search-field {
    position: relative !important;
    float: none !important;
    clear: none !important;
    isolation: isolate;
}

#home-form {
    position: relative;
    z-index: 10;
    margin-top: 0;
    padding: 0 40px;
}

.booking-flow--has-banner #home-form {
    margin-top: -84px;
}

/* Elementor widget compatibility */
.elementor-widget-container .gdlr-reservation-bar input { 
    box-sizing: content-box; 
}
.single .elementor-widget-container .gdlr-reservation-bar { 
    margin-left: auto; 
    float: none; 
    width: auto; 
    margin-right: auto; 
}
.single .elementor-widget-container .gdlr-hotel-room-info-new-style { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    border: none; 
}

/* BookingSearch component container - self-contained positioning */
.booking-search-container {
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (min-width: 1400px) {
    .booking-search-container {
        padding: 0 40px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .booking-search-container {
        padding: 0 32px;
    }
}

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

@media (max-width: 767px) {
    .booking-search-container {
        padding: 0 8px;
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media (max-width: 480px) {
    .booking-search-container {
        padding: 0 4px;
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Container - Safari Compatible */
.booking-search-form.modern-search-container {
    display: inline-block !important;
    background: var(--event-surface-secondary-color, #ffffff);
    border-radius: 24px;
    box-shadow: none;
    padding: 32px;
    border: none;
    margin: 0 auto;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
    position: relative !important;
    z-index: 1000;
    overflow: visible !important;
    isolation: isolate;
    vertical-align: top;
    
    /* Safari GPU acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* BS-5865 (mobile hero rows): the title row is a plain pass-through everywhere except ≤767 —
   `display: contents` drops the wrapper from layout so its children (the title, hidden here,
   and the Event Dates pill) sit exactly where they did before it existed. */
.booking-search-form__title-row {
    display: contents;
}

.booking-search-form__title {
    display: none;
}

/* Event Dates Display - Top Right Corner */
.booking-search-form__event-dates {
    position: absolute;
    top: -20px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--event-greyscale-darkest-color, #000);
    background: var(--event-highlight-secondary-color, var(--event-accent-color, #FDB9EB));
    padding: 2px 8px;
    border-radius: 4px;
    border: none;
    z-index: 10;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.booking-search-form__event-dates::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / 16px no-repeat;
    background-color: var(--event-greyscale-darkest-color, #000);
}

.booking-search-form__event-dates-label {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--event-greyscale-darkest-color, #000);
}

.booking-search-form__event-dates-value {
    font-weight: 500;
    color: var(--event-greyscale-darkest-color, #000);
}

.booking-search-form__required {
    color: var(--event-cta-color, #4323FF);
    margin-left: 2px;
    font-weight: 700;
}

/* BS-5865 round 3 (Lola mobile review): the pill stretched to the form's full width; it
   should hug its own content, not stretch. Round 4 (mobile hero rows) moves it off its own
   centred row into the title row next to "Find your stay" — space-between there does the
   placement, so the pill drops the auto-centering margin but keeps the fit-content sizing. */
@media (max-width: 767px) {
    .booking-search-form__title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        grid-column: 1 / -1;
        margin: 0 0 16px;
    }

    .booking-search-form__title {
        display: block;
        flex: 1 1 auto;
        margin: 0;
        font-family: var(--event-type-subhead-m-family, inherit);
        font-weight: var(--event-type-subhead-m-weight, 700);
        font-size: var(--event-type-subhead-m-size, 18px);
        line-height: var(--event-type-subhead-m-line-height, 1.2);
        color: var(--event-text-primary-color, #000);
    }

    .booking-search-form__event-dates {
        position: relative;
        top: 0;
        right: 0;
        margin: 0 0 0 auto; /* BS-5865 round 6: stays on the right when the title is hidden */
        width: fit-content;
        flex: 0 0 auto;
    }
}

/* BS-5865 (OL sandbox QA row 6): the search card has no hover state — the lifted card with a CTA-tinted shadow was off-brand. */
.booking-search-form__form.modern-search-form {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    align-items: flex-end !important;
    justify-content: flex-start;
    position: relative !important;
    isolation: isolate;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: visible !important;
}

/* S11: on the full desktop row the tag sits flush with the panel's own top padding (was
   top:-20px, straddling the panel's rounded top edge) and the field row makes room for it
   below instead of the two overlapping. There's a second unconditional "padding: 0" rule
   for .booking-search-form__form.modern-search-form further down this file (the duplicate
   "Default Desktop Styles" section) that always wins on file position alone, so this rule
   is scoped through the form's real .booking-search-form.modern-search-container ancestor
   to outrank both same-specificity rules instead of depending on where it sits. */
@media (min-width: 1081px) {
    .booking-search-form__event-dates {
        top: 0;
    }

    .booking-search-form.modern-search-container .booking-search-form__form.modern-search-form {
        padding-top: 28px;
    }
}

/* Field Components - Safari Compatible */
.booking-search-form__field.search-field:not(.booking-search-form__field--rooms) {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 160px !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    font-family: inherit;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.booking-search-form__field:nth-child(1),
.booking-search-form__field:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 160px !important;
    width: 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.booking-search-form__field:nth-child(3) {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    min-width: 100px !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* BS-5865: the two date fields are 176px on desktop, not 160px. A 160px field with 16px input
   padding leaves 126px for the value, and "Sun. Nov 22, 2026" set in On Location's FS Industrie
   measures 132px at 16px, so the year clipped to "202" (Sustin, stg, 21 Sep). The Figma width fit
   only because LA28 Sans is narrower. The fields are picked by the input they hold (the title
   row is the form's first child, so nth-child counts are off by one) and :has(#id) outranks the
   !important 160px pins above. */
@media (min-width: 1024px) {
    .booking-search-form__field:has(#gdlr-check-in),
    .booking-search-form__field:has(#gdlr-check-out) {
        flex: 0 0 176px !important;
        width: 176px !important;
        min-width: 176px !important;
        max-width: 176px !important;
    }
}

/* Desktop-only rules for rooms field width */
@media (min-width: 1024px) {
    .booking-search-form__field--rooms {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 320px !important;
        min-width: 240px !important;
        position: relative !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* DatePicker Component inside field - constrain to field width */
.booking-search-form__field .datepicker-component {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

.booking-search-form__field .datepicker__input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 16px !important;
}

/* Mobile optimizations for datepicker inputs */
@media (max-width: 1023px) {
    .booking-search-form__field .datepicker__input {
        padding: 0 14px !important; /* Match mobile input padding */
        height: 48px !important; /* Match mobile input height */
    }
}

@media (max-width: 480px) {
    .booking-search-form__field .datepicker__input {
        padding: 0 12px !important; /* Ultra compact padding */
        height: 48px !important; /* BS-5865 S13: match the other ≤480 fields, not 44 */
        font-size: 16px !important; /* Prevent iOS zoom */
    }
}

/* Ensure datepicker popup doesn't affect field sizing */
.booking-search-form__field .datepicker__popup {
    position: absolute !important;
    left: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
    top: calc(100% + 8px) !important;
}

/* Mobile datepicker positioning override */
@media (max-width: 768px) {
    .booking-search-form__field .datepicker__popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 64px) !important;
        z-index: 10020 !important;
    }
}

/* Room Selector Field - constrain properly */
.booking-search-form__field--rooms {
    overflow: visible !important;
    cursor: pointer;
}

.booking-search-form__field--rooms .room-selector {
    width: 100% !important;
    max-width: 100% !important;
    min-width: max-content !important; /* Size to content */
}

.booking-search-form__field--rooms .room-selector__trigger {
    width: 100% !important;
    min-width: max-content !important; /* Allow trigger to expand based on content */
}

/* BS-5865 round 7 (OL canvas row 13): RoomSelector.css gives the rooms wrapper flex: 1 1 0%, so
   inside the column-flex field it stretched to its 48px trigger plus its own 2px border and sat
   2px taller than Nights. Size it like every other wrapper and let the trigger fill its box. */
.booking-search-form__field--rooms .booking-search-form__input-wrapper {
    flex: 0 0 auto !important;
}

.booking-search-form__field--rooms .booking-search-form__input-wrapper > .room-selector-component {
    height: 100%;
}

.booking-search-form__field--rooms .booking-search-form__input-wrapper .room-selector__trigger {
    height: 100% !important;
    min-height: 0 !important;
}

/* BS-5865 round 10 (OL canvas row 53): on desktop the Rooms trigger is the same 52px / 16px /
   12px 16px as the search, date and Nights inputs (RoomSelector.css locks those at 52px), instead
   of 100% of the 1px-bordered wrapper. Below 1081px the wrapper-following rule above still holds. */
@media (min-width: 1081px) {
    .booking-search-form__field--rooms .booking-search-form__input-wrapper .room-selector__trigger {
        height: 52px !important;
        min-height: 52px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }
}

/* Add chevron using same method as nights dropdown */
.booking-search-form__field--rooms .booking-search-form__input-wrapper:not(.booking-search-form__capacity-message-box)::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

/* Prevent column flex from affecting room selector popup */
.booking-search-form__field--rooms .room-selector__popup {
    position: absolute !important;
    flex-direction: initial;
}

.booking-search-form__field--rooms .room-selector__popup * {
    flex-direction: initial;
}

.booking-search-form__capacity-message {
    cursor: default;
}

.booking-search-form__capacity-message .booking-search-form__label {
    color: #6b7280 !important;
}

.booking-search-form__capacity-message-box {
    display: flex;
    align-items: center;
    min-height: 48px;
    height: 48px;
    max-height: 48px;
    padding: 0 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: default;
    pointer-events: none;
    overflow: hidden;
}

.booking-search-form__capacity-message-text {
    color: #9a3412 !important;
    -webkit-text-fill-color: #9a3412;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-search-form--at-capacity .booking-search-form__button {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Labels - Safari Compatible */
.booking-search-form .booking-search-form__label.search-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--event-text-secondary-color, #6b7280);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: normal;
    font-family: inherit;
    line-height: 1.4;
    display: block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Input Wrappers - Safari Compatible */
.booking-search-form__input-wrapper.search-input-wrapper {
    display: flex;
    align-items: center;
    position: relative !important;
    background: var(--event-surface-primary-color, #f9fafb);
    border: 1px solid var(--event-control-border-color, var(--event-secondary-color, #d1d5db));
    border-radius: 8px;
    height: 52px;
    -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    margin: 0;
    padding: 0;
    width: 100%;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    box-sizing: border-box;
    float: none !important;
    clear: none !important;
}

.booking-search-form__input-wrapper:hover {
    border-color: var(--event-primary-color, #4323FF);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.booking-search-form__input-wrapper:focus-within {
    border-color: var(--event-primary-color, #4323FF);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--event-cta-color, #4323FF) 10%, transparent);
}

/* Input Fields - Safari Compatible */
.booking-search-form .booking-search-form__input.search-input,
.booking-search-form .booking-search-form__select.search-select {
    width: 100%;
    height: 100%;
    padding: 0 16px;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 400;
    color: var(--event-text-primary-color, #374151);
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    margin: 0;
    text-transform: none;
    cursor: pointer;
    pointer-events: auto;
    -webkit-user-select: auto;
    user-select: auto;
    font-family: inherit;
    -webkit-text-fill-color: var(--event-text-primary-color, #374151);
    opacity: 1;
    box-sizing: border-box;
}

.booking-search-form .booking-search-form__select.search-select {
    padding-right: 40px;
    position: relative;
    z-index: 1;
}

.booking-search-form__input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Dropdown Arrow */
.booking-search-form__input-wrapper.has-select::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

/* Rooms Field Specific - Safari Compatible */
.booking-search-form__rooms-wrapper.search-rooms-wrapper {
    cursor: pointer;
}

.booking-search-form__field--rooms:hover .booking-search-form__rooms-wrapper {
    border-color: var(--event-primary-color, #4323FF);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--event-cta-color, #4323FF) 10%, transparent);
}

.booking-search-form__submit.search-submit {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    flex: 0 0 auto;
    min-width: 0;
    position: relative !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.booking-search-form__submit.search-submit::before {
    content: none;
    display: none;
}

.booking-search-form__button.search-button {
    position: relative;
    top: 0;
    background: var(--event-primary-color, #4323FF);
    color: var(--event-on-primary-color, #ffffff);
    border: none;
    border-radius: var(--event-button-radius, 8px);
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    box-shadow: none;
    flex: 0 0 auto;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    width: auto;
    min-width: 0;
    font-family: inherit;
    white-space: nowrap;
    box-sizing: border-box;
    
    /* Safari GPU acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* BS-5865 round 10 (OL canvas row 54): hover is a colour change only - no lift, no shadow. */
.booking-search-form__button:hover,
.booking-search-form__button:active {
    box-shadow: none;
    background: var(--event-primary-darkest-color, var(--event-cta-hover, #4323FF));
    color: #ffffff;
}

.booking-search-form__button:disabled {
    background: #9ca3af;
    color: #d1d5db;
    cursor: not-allowed;
    -webkit-transform: none;
    transform: none;
    box-shadow: none;
}

/* Loading State */
.booking-search-form__button.loading::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: booking-search-spin 1s linear infinite;
    display: inline-block;
    margin-left: 8px;
}

@keyframes booking-search-spin {
    0% { 
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg); 
    }
    100% { 
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg); 
    }
}

/* Form States */
.booking-search-form.form-loading {
    opacity: 0.8;
    pointer-events: none;
}

.booking-search-form__input-wrapper.validation-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Validation Messages */
.booking-search-form__validation {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #dc2626;
    font-size: 14px;
    display: none;
}

.booking-search-form__validation.show-validation {
    display: block;
    animation: booking-search-fade-in 0.3s ease;
}

.booking-search-form__validation.error-type {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.booking-search-form__validation-popover {
    position: absolute;
    top: auto;
    bottom: calc(100% + 10px);
    left: 0;
    width: 460px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid #fbc7c7;
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
    color: #334155;
    padding: 11px 14px 11px 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 9px;
    row-gap: 6px;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-family: inherit;
}

.booking-search-form__validation-popover.show-validation {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.booking-search-form__validation-popover::before {
    content: '';
    position: absolute;
    top: auto;
    bottom: -7px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-bottom: 1px solid #fbc7c7;
    border-right: 1px solid #fbc7c7;
    transform: rotate(45deg);
}

.booking-search-form__validation-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dc2626;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
}

.booking-search-form__validation-content {
    min-width: 0;
    font-size: 13px;
    line-height: 1.3;
}

.booking-search-form__validation-content strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: #b91c1c;
}

.booking-search-form__validation-content ul {
    margin: 0;
    padding-left: 18px;
}

.booking-search-form__validation-content li {
    margin: 0;
    color: #dc2626;
    line-height: 1.2;
}

.booking-search-form__validation-close {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.booking-search-form__validation-close:hover {
    background: rgba(100, 116, 139, 0.12);
    color: #334155;
}

.booking-search-form__validation-close:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--event-cta-color, #4323FF) 35%, transparent);
    outline-offset: 1px;
}

@media (max-width: 767px) {
    #field-checkout .booking-search-form__validation-popover {
        left: 50%;
        width: 420px;
        max-width: calc(100vw - 20px);
        transform: translate(-50%, -6px);
    }

    #field-checkout .booking-search-form__validation-popover.show-validation {
        transform: translate(-50%, 0);
    }

    #field-checkout .booking-search-form__validation-popover::before {
        left: calc(50% - 6px);
    }
}

@keyframes booking-search-fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Design - Mobile-First with Desktop Override */

/* Default Desktop Styles (1024px+) - Restored original compact layout */
.booking-search-form.modern-search-container {
    display: inline-block !important;
    background: var(--event-surface-secondary-color, #ffffff);
    border-radius: 24px;
    box-shadow: none;
    padding: 32px;
    border: none;
    margin: 0 auto;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
    position: relative !important;
    z-index: 1000;
    overflow: visible !important;
    isolation: isolate;
    vertical-align: top;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.booking-search-form__form.modern-search-form {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    align-items: flex-end !important;
    justify-content: flex-start;
    position: relative !important;
    isolation: isolate;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: visible !important;
}

.booking-search-form__field.search-field:not(.booking-search-form__field--rooms),
.booking-search-form__field:nth-child(1),
.booking-search-form__field:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 160px !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    font-family: inherit;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.booking-search-form__field:nth-child(3) {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    font-family: inherit;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Desktop-only rules for rooms field width (duplicate for layout context) */
@media (min-width: 1024px) {
    .booking-search-form__field--rooms {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 320px !important;
        min-width: 240px !important;
        position: relative !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

.booking-search-form__input-wrapper.search-input-wrapper {
    height: 52px;
    width: 100%;
}

.booking-search-form .booking-search-form__input.search-input,
.booking-search-form .booking-search-form__select.search-select {
    font-size: 16px !important;
    padding: 0 16px;
}

.booking-search-form__button.search-button {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
}

.booking-search-form__submit.search-submit {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    align-self: flex-end;
}

/* Mobile Overrides (up to 1023px) - Compact Version */
@media (max-width: 1023px) {
    .booking-search-form.modern-search-container {
        display: block !important;
        padding: 16px; /* Figma: 16 panel padding */
        margin: 0 12px; /* Reduced from 0 16px */
        width: calc(100% - 24px); /* Adjusted for new margins */
        border-radius: 16px; /* Figma: ~16 panel radius */
        max-width: none;
    }
    
    .booking-search-form__form.modern-search-form {
        flex-direction: column !important;
        gap: 12px; /* Reduced from 16px */
        align-items: stretch !important;
        width: 100%;
    }
    
    .booking-search-form__field.search-field:not(.booking-search-form__field--rooms),
    .booking-search-form__field:nth-child(1),
    .booking-search-form__field:nth-child(2),
    .booking-search-form__field:nth-child(3),
    .booking-search-form__field--rooms {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    
    /* Compact labels */
    .booking-search-form .booking-search-form__label.search-label {
        font-size: 12px;
        margin-bottom: 6px; /* Reduced from 8px */
        font-weight: 500;
        letter-spacing: normal;
    }

    .booking-search-form__input-wrapper.search-input-wrapper {
        height: 48px;
        width: 100%;
    }
    
    /* Ensure rooms wrapper matches other fields on mobile */
    .booking-search-form__rooms-wrapper.search-input-wrapper,
    .booking-search-form__field--rooms .booking-search-form__input-wrapper {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    
    .booking-search-form .booking-search-form__input.search-input,
    .booking-search-form .booking-search-form__select.search-select {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 0 14px; /* Reduced from 0 16px */
    }
    
    .booking-search-form__button.search-button {
        height: 48px;
        min-height: 48px;
        flex: 0 0 auto;
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        padding: 12px 24px;
        margin-top: 4px; /* Add small top margin for visual separation */
    }
    
    .booking-search-form__submit.search-submit {
        width: 100%;
        margin-top: 0;
        align-self: stretch;
        flex: 0 0 auto;
    }

    .booking-search-form__submit.search-submit::before {
        display: none;
    }
}

/* BS-5865 gutters: phones (≤767) share the site-wide 16px gutter with the filters bar, grid, and
   footer — the margin/width pair above otherwise stacked a redundant inset on top of
   #home-hotels' own padding (booking-flow-layout.css). Tablets (768–1023px) keep their spacing. */
@media (max-width: 767px) {
    .booking-search-form.modern-search-container {
        margin: 0;
        width: 100%;
    }

    /* BS-5865 (mobile hero rows): two-column field grid — Check In/Check Out then
       Nights/Rooms — with the title row and Search each spanning the full width, replacing
       the single-column stack so the shorter announcement header still leaves Search above
       the fold. The field width/flex resets a few rules up (max-width: 1023px) still apply —
       100%/none/0 all resolve against the grid cell, not the row, so they don't need repeating. */
    .booking-search-form__form.modern-search-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .booking-search-form__submit.search-submit {
        grid-column: 1 / -1;
    }
}

/* Small Mobile (480px and below) - Ultra Compact */
@media (max-width: 480px) {
    .booking-search-form.modern-search-container {
        padding: 16px; /* Figma: 16 panel padding */
        margin: 0;
        width: 100%;
        border-radius: 16px; /* Figma: ~16 panel radius */
    }

    .booking-search-form__form {
        gap: 10px; /* Tighter spacing */
    }

    /* Ultra compact labels */
    .booking-search-form .booking-search-form__label.search-label {
        font-size: 12px;
        margin-bottom: 4px; /* Minimal spacing */
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: normal;
    }

    .booking-search-form__input-wrapper {
        height: 48px;
    }

    /* Ensure rooms wrapper matches other fields on ultra-compact mobile */
    .booking-search-form__rooms-wrapper.search-input-wrapper,
    .booking-search-form__field--rooms .booking-search-form__input-wrapper {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 48px !important;
    }

    .booking-search-form .booking-search-form__input.search-input,
    .booking-search-form .booking-search-form__select.search-select {
        font-size: 16px; /* Keep 16px to prevent zoom */
        padding: 0 12px; /* Reduced padding */
    }

    .booking-search-form__button {
        height: 48px;
        font-weight: 500;
        font-size: 16px;
        padding: 12px 24px;
        margin-top: 2px; /* Minimal top margin */
    }
}

/* Tablet Layout (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1080px) {
    .booking-search-form.modern-search-container {
        display: inline-block !important;
        padding: 24px;
        margin: 0 20px;
        width: calc(100% - 40px);
        max-width: 750px;
        border-radius: 18px;
    }

    .booking-search-form__event-dates {
        top: -38px;
    }
    
    .booking-search-form__form.modern-search-form {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        width: 100%;
        flex-direction: row !important;
    }

    .booking-search-form__submit.search-submit {
        align-self: flex-end !important;
    }
    
    #field-checkin.booking-search-form__field {
        flex: 1 1 150px !important;
    }
    
    #field-checkout.booking-search-form__field {
        flex: 1 1 150px !important;
    }
    
    #field-nights.booking-search-form__field {
        flex: 1 1 10px !important;
        min-width: 94px !important;
        width: 94px !important;
    }
    
    #field-rooms.booking-search-form__field {
        flex: 1 1 175px !important;
    }
    
    .booking-search-form__input-wrapper {
        height: 48px;
    }
    
    .booking-search-form .booking-search-form__input.search-input,
    .booking-search-form .booking-search-form__select.search-select {
        font-size: 14px;
        padding: 0 12px;
    }
    
    .booking-search-form__button {
        flex: 0 0 auto !important;
        height: 48px;
        min-height: 48px;
        max-height: 48px;
        width: auto;
        min-width: 100px;
        font-size: 13px;
        padding: 12px 20px;
    }
}

/* Desktop (1024px+) - Ensure compact layout */
@media (min-width: 1024px) {
    .booking-search-form.modern-search-container {
        display: inline-block !important;
        padding: 32px !important;
        margin: 0 auto !important;
        width: auto !important;
        max-width: calc(100% - 40px) !important;
        border-radius: 24px !important;
    }
    
    .booking-search-form__form.modern-search-form {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        align-items: flex-end !important;
    }
    
    .booking-search-form__field:nth-child(1),
    .booking-search-form__field:nth-child(2) {
        flex: 0 0 160px !important;
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }
    
    .booking-search-form__field:nth-child(3) {
        flex: 0 0 100px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }
    
    .booking-search-form__field--rooms {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 240px !important;
        max-width: 320px !important;
    }
    
    .booking-search-form__submit {
        flex: 0 0 auto !important;
        width: auto !important;
        align-self: flex-end !important;
    }
    
    .booking-search-form__input-wrapper {
        height: 52px !important;
    }

    .booking-search-form .booking-search-form__input.search-input,
    .booking-search-form .booking-search-form__select.search-select {
        font-size: 16px !important;
        padding: 0 16px !important;
    }

    .booking-search-form__button {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        padding: 12px 24px !important;
    }
}

/* Large Desktop (1200px+) - Enhanced spacing */
@media (min-width: 1200px) {
    .booking-search-form.modern-search-container {
        padding: 32px !important;
    }
    
    .booking-search-form__form {
        gap: 16px !important;
    }
    
    .booking-search-form__field:nth-child(1),
    .booking-search-form__field:nth-child(2) {
        flex: 0 0 180px !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
    
    .booking-search-form__field:nth-child(3) {
        flex: 0 0 110px !important;
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
    }
    
    .booking-search-form__field--rooms {
        min-width: 260px !important;
        max-width: 340px !important;
    }
}

/* Touch-friendly enhancements for mobile - Compact Version */
@media (hover: none) and (pointer: coarse) {
    .booking-search-form__input-wrapper {
        min-height: 48px; /* Reduced from 56px but still touch-friendly */
    }
    
    .booking-search-form__button {
        min-height: 48px; /* Reduced from 56px */
        padding: 12px 20px; /* Reduced from 16px 24px */
    }
    
    .booking-search-form .booking-search-form__label {
        font-size: 12px; /* Reduced from 14px */
        font-weight: 600;
        margin-bottom: 6px; /* Reduced from 8px */
    }
    
    /* Compact touch targets for room selector */
    .booking-search-form__field--rooms .room-selector__trigger {
        min-height: 48px; /* Reduced from 56px */
        padding: 12px; /* Reduced from 16px */
    }
    
    /* Ultra-small mobile adjustments */
    @media (max-width: 480px) {
        .booking-search-form__input-wrapper {
            min-height: 44px; /* Even more compact on small screens */
        }
        
        .booking-search-form__button {
            min-height: 44px;
            padding: 10px 16px;
        }
        
        .booking-search-form__field--rooms .room-selector__trigger {
            min-height: 44px;
            padding: 10px;
        }
        
        .booking-search-form .booking-search-form__label {
            font-size: 11px;
            margin-bottom: 4px;
        }
    }
}


/* Accessibility & Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .booking-search-form.modern-search-container,
    .booking-search-form__button,
    .booking-search-form__input-wrapper {
        -webkit-transition: none;
        transition: none;
        animation: none;
    }
    
    .booking-search-form.modern-search-container,
    .booking-search-form__button,
    .booking-search-form__button:hover {
        -webkit-transform: none;
        transform: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .booking-search-form .booking-search-form__label {
        color: #000000;
        font-weight: 700;
    }
    
    .booking-search-form .booking-search-form__input-wrapper {
        border-width: 2px;
        border-color: #000000;
    }
    
    .booking-search-form .booking-search-form__button {
        border: 2px solid #000000;
    }
}

/* ========================================
   SELECT2 DROPDOWN STYLING (Booking Flow)
   ======================================== */

/* Address Field Select2 */
.address-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: block;
    top: 17px;
}

/* Billing Address Dropdowns */
.card-billing-address-state-dropdown input.select2-search__field,
.card-billing-address-state-dropdown .select2-search--dropdown,
.card-billing-address-country-dropdown input.select2-search__field,
.card-billing-address-country-dropdown .select2-search--dropdown {
    display: block;
    background-color: #313440;
    color: #fff;
    font-size: 13px;
    padding: 5px 16px;
    border-width: 1px 0px 0px 0px;
    border-color: #3c3c3c;
    border-style: solid;
}

.select2-container--open .card-billing-address-state-dropdown,
.select2-container--open .card-billing-address-country-dropdown {
    background: #313440;
    border-radius: 0;
}

.select2-container--default .card-billing-address-state-dropdown .select2-results__option--selectable:last-child,
.select2-container--default .card-billing-address-country-dropdown .select2-results__option--selectable:last-child {
    border-bottom: 1px solid #3c3c3c;
}

/* Multi-Room Select2 Dropdown */
.multiple-room-select + .select2-container {
    height: 44px;
    border-radius: 6px;
    background-color: #23262F;
    width: 300px;
    max-width: 100%;
}

.select2-selection {
    background-color: #23262F;
    border-radius: 6px;
}

.select2-container--open .multi-room-dropdown {
    background-color: #313440;
    margin: 0;
    color: #fff;
    border-radius: 0px 0px 6px 6px;
    border: 0;
}

.multiple-room-select + .select2-container .select2-selection__rendered {
    font-size: 14px;
    color: #fff;
    border-radius: 6px;
    text-transform: capitalize;
    font-weight: 500;
}

.select2-container--default .multi-room-dropdown .select2-results__option {
    text-align: left;
    font-size: 14px;
    padding-left: 15px;
    text-transform: capitalize;
    font-weight: 500;
}

.select2-container--default .multi-room-dropdown .select2-results__option--selected {
    background-color: #313440;
}

.select2-container--default .multi-room-dropdown .select2-results__option:hover {
    background-color: var(--event-secondary-color, #4FF6B1);
    color: #1D1D1F;
}

.multiple-room-select:after {
    position: absolute;
    right: 0;
    width: 20px;
    height: 20px;
    background-image: url('../../images/caret-down.svg');
}

.select2-selection__rendered:after {
    content: '';
    position: absolute;
    right: 15px;
    width: 10px;
    top: 15px;
    height: 10px;
}

.multi-room-label {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    margin: 20px 0 -26px;
}

.select2-container--default .multi-room-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--event-secondary-color, #4FF6B1);
    color: #1D1D1F;
}

.select2-container--default .multi-room-dropdown .select2-results__option:last-child {
    border-radius: 0px 0px 6px 6px;
}
/* Global override for room field to expand based on content - Desktop only */
@media (min-width: 1024px) {
    .booking-search-form__field--rooms {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 240px !important;
        max-width: 340px !important;
    }
}

/* BS-5865 round 4 (OL canvas row 13): the Nights value is the same 16px as the Rooms trigger
   beside it (the 14px here was the only field in the strip at a different size). */
#gdlr-night{
    line-height: initial !important;
    font-size: 16px !important;
}

/* Force hard refresh - Fri Oct  3 14:27:00 EDT 2025 */
/* Cache bust: 1759516020 */

/* Cache bust: 1759516020 */

/* Jordan (Figma 798:18587, 16 Sep): the desktop card is Neutral/50 at 90% so the hero shows
   through where the card overlaps it — the mobile frame (712:91538) is opaque, so this is
   desktop-only and sits after every base rule for the selector (CodeRabbit on #18900: the
   duplicated base rule further down re-set it opaque). The R7 "band" was this same overlap, which the Figma frame also has. */
@media (min-width: 768px) {
    .booking-search-form.modern-search-container {
        /* BS-5865 (OL sandbox QA row 5, Figma 1077:24704): 80% over a 24px backdrop blur. */
        background: color-mix(in srgb, var(--event-surface-secondary-color, #f5f5f5) 80%, transparent);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
    }
}