/* --- Style Section 1 --- */
/* Hide back button on Step 1 (Filters) - No previous step to navigate back to */
    .tb-sidebar-root .tb-btn-back-action-mobile,
    .tb-sidebar-root .tb-btn-back-action,
    .tb-sidebar-root .tb-sidebar-footer,
    #bookingBackButtonIdMobile,
    #bookingBackButtonId {
        display: none !important;
    }

    .frmSearch {
        border: 1px solid var(--tb-border);
        background-color: var(--tb-bg-canvas);
        margin: 2px 0px;
        padding: 24px;
        border-radius: var(--tb-radius-md);
    }

    #location-list {
        float: left;
        list-style: none;
        margin-top: -3px;
        padding: 0;
        width: 190px;
        position: absolute;
    }

        #location-list li {
            padding: 10px;
            background: #f0f0f0;
            border-bottom: #bbb9b9 1px solid;
        }

            #location-list li:hover {
                background: #ece3d2;
                cursor: pointer;
            }

    .search-box {
        padding: 10px;
        border: #a8d4b1 1px solid;
        border-radius: 4px;
    }

    /* Cities Expand / Collapse Mechanism */
    .city-card.is-hidden-by-limit {
        display: none !important;
    }

    .city-card.is-extra-city:not(.is-hidden-by-limit) {
        animation: tbCityFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes tbCityFadeIn {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .cities-expand-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 18px;
        width: 100%;
    }

    .btn-toggle-cities-expand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 10px 22px;
        background: #ffffff;
        border: 1.5px solid #e2e8f0;
        border-radius: 9999px;
        font-family: 'Outfit', sans-serif;
        font-size: 13.5px;
        font-weight: 700;
        color: #334155;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        user-select: none;
        outline: none;
    }

    .btn-toggle-cities-expand:hover {
        border-color: #ffd2cb;
        background: #fff8f6;
        color: #ff523b;
        box-shadow: 0 6px 18px rgba(255, 82, 59, 0.12);
        transform: translateY(-1px);
    }

    .btn-toggle-cities-expand:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(255, 82, 59, 0.1);
    }

    .btn-toggle-cities-expand .btn-expand-text {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-toggle-cities-expand .btn-expand-prefix-icon {
        color: #ff7965;
        font-size: 13px;
        transition: transform 0.25s ease;
    }

    .btn-toggle-cities-expand:hover .btn-expand-prefix-icon {
        transform: scale(1.1);
    }

    .btn-toggle-cities-expand .btn-expand-chevron-wrap {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #f1f5f9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: #64748b;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-toggle-cities-expand:hover .btn-expand-chevron-wrap {
        background: #ffebe7;
        color: #ff523b;
    }

    .btn-toggle-cities-expand.is-expanded {
        background: #fff5f3;
        border-color: #ffd2cb;
        color: #ff523b;
    }

    .btn-toggle-cities-expand.is-expanded .btn-expand-chevron-wrap {
        background: #ffebe7;
        color: #ff523b;
        transform: rotate(180deg);
    }

    /* ==========================================================================
       1. Font Unification: Use Wishes & Filter font ('Outfit') across 1-Filters
       ========================================================================== */
    #main,
    #content,
    #filter,
    #filtermobile,
    .frmSearch,
    .block-title,
    .content,
    .content p,
    .content span,
    .content div,
    .content label,
    .radio-pill-group,
    .radio-pill-group label,
    .radio-pill-group span,
    .checklist,
    .checklist h2,
    .checklist .expand,
    .checklist label,
    .checklist span,
    .BookingTables,
    .BookingTables td,
    .BookingTables th,
    .wishFilterTable,
    .wishFilterTable td,
    .wishFilterTable th,
    .wish-text,
    .holidayFilterTable,
    .holidayFilterTable td,
    .holidayFilterTable th,
    .holiday-filter-text,
    .city-card,
    .city-card-title,
    .search-action-title,
    .search-action-subtitle,
    .search-btn-text,
    .trust-badge span {
        font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    }

    /* ==========================================================================
       2. Modern Nee & Ja Radio Pill Buttons
       ========================================================================== */
    .radio-pill-group {
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
    }

    .radio-pill-group label.radio-pill-label,
    .radio-pill-group label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 18px !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 9999px !important;
        cursor: pointer !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        margin: 0 !important;
        user-select: none !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    }

    .radio-pill-group label.radio-pill-label:hover,
    .radio-pill-group label:hover {
        border-color: #ffd2cb !important;
        background: #fff8f6 !important;
        color: #ff523b !important;
    }

    .radio-pill-group label.radio-pill-label.is-active,
    .radio-pill-group label:has(input[type="radio"]:checked) {
        border-color: #ff7965 !important;
        background: #fff5f3 !important;
        color: #ff523b !important;
        box-shadow: 0 2px 8px rgba(255, 121, 101, 0.15) !important;
    }

    .radio-pill-group input[type="radio"] {
        accent-color: #ff7965 !important;
        width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
        cursor: pointer !important;
        vertical-align: middle !important;
    }

    /* ==========================================================================
       3. Cities Scroll:
          - Mobile (<= 767px): if more than 3 cities, show max 3 cities and scroll
          - Desktop (>= 768px): if more than 9 cities, show max 9 cities (3 rows x 3 columns) and scroll
          - Show and hide buttons removed completely
       ========================================================================== */
    .cities-expand-wrapper {
        display: none !important;
    }

    .city-card.is-extra-city.is-hidden-by-limit {
        display: flex !important;
    }

    @media (max-width: 767px) {
        #citiesGridLayout.has-mobile-scroll,
        #citiesGridLayout.is-expanded,
        #citiesGridLayout.has-active-search {
            max-height: 330px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            padding-right: 6px !important;
            padding-bottom: 4px !important;
            scroll-behavior: smooth !important;
            scrollbar-width: thin !important;
            scrollbar-color: #cbd5e1 #f1f5f9 !important;
        }
    }

    @media (min-width: 768px) {
        #citiesGridLayout.has-desktop-scroll,
        #citiesGridLayout.is-expanded,
        #citiesGridLayout.has-active-search {
            max-height: 330px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            padding-right: 8px !important;
            padding-bottom: 6px !important;
            scroll-behavior: smooth !important;
            scrollbar-width: thin !important;
            scrollbar-color: #cbd5e1 #f1f5f9 !important;
        }
    }

    #citiesGridLayout::-webkit-scrollbar,
    #citiesGridLayout.has-mobile-scroll::-webkit-scrollbar,
    #citiesGridLayout.has-desktop-scroll::-webkit-scrollbar,
    #citiesGridLayout.is-expanded::-webkit-scrollbar,
    #citiesGridLayout.has-active-search::-webkit-scrollbar {
        width: 6px;
    }

    #citiesGridLayout::-webkit-scrollbar-track,
    #citiesGridLayout.has-mobile-scroll::-webkit-scrollbar-track,
    #citiesGridLayout.has-desktop-scroll::-webkit-scrollbar-track,
    #citiesGridLayout.is-expanded::-webkit-scrollbar-track,
    #citiesGridLayout.has-active-search::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 9999px;
    }

    #citiesGridLayout::-webkit-scrollbar-thumb,
    #citiesGridLayout.has-mobile-scroll::-webkit-scrollbar-thumb,
    #citiesGridLayout.has-desktop-scroll::-webkit-scrollbar-thumb,
    #citiesGridLayout.is-expanded::-webkit-scrollbar-thumb,
    #citiesGridLayout.has-active-search::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 9999px;
    }

    #citiesGridLayout::-webkit-scrollbar-thumb:hover,
    #citiesGridLayout.has-mobile-scroll::-webkit-scrollbar-thumb:hover,
    #citiesGridLayout.has-desktop-scroll::-webkit-scrollbar-thumb:hover,
    #citiesGridLayout.is-expanded::-webkit-scrollbar-thumb:hover,
    #citiesGridLayout.has-active-search::-webkit-scrollbar-thumb:hover {
        background: #ff7965;
    }

    /* ==========================================================================
       4. Eliminate excessive bottom spacing below content
       ========================================================================== */
    .booking-search-action-card {
        margin-bottom: 12px !important;
    }

    /* ==========================================================================
       5. Calendar Popup Modal for Desktop & Mobile
       ========================================================================== */
    body.tb-calendar-popup-open {
        overflow: hidden !important;
        position: relative !important;
    }

    #calendarCollapsibleWrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        z-index: 999999 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        display: none;
        align-items: center !important;
        justify-content: center !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #calendarCollapsibleWrapper:focus,
    #calendarPopupDialog:focus,
    #unifiedCalendar:focus {
        outline: none !important;
    }

    .calendar-popup-dialog {
        background: #ffffff !important;
        border-radius: 24px !important;
        width: 100% !important;
        max-height: 94vh !important;
        max-height: 94dvh !important;
        overflow-y: auto !important;
        box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35) !important;
        margin: auto !important;
        box-sizing: border-box !important;
        position: relative !important;
        animation: tbCalendarPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    @keyframes tbCalendarPopIn {
        from {
            opacity: 0;
            transform: scale(0.94) translateY(12px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    /* Desktop modal width & layout (fits both calendar months side-by-side) */
    @media (min-width: 768px) {
        .calendar-popup-dialog {
            max-width: 720px !important;
            padding: 24px 28px !important;
        }

        .calendar-popup-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding-bottom: 14px !important;
            margin-bottom: 14px !important;
            border-bottom: 1px solid #fee2dc !important;
        }

        .calendar-popup-title {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            font-size: 17px !important;
            font-weight: 700 !important;
            color: var(--tb-text-dark, #0f172a) !important;
        }

        .calendar-popup-title i {
            color: var(--tb-primary, #ff7965) !important;
            font-size: 18px !important;
        }

        .btn-calendar-popup-close {
            width: 36px !important;
            height: 36px !important;
            border-radius: 50% !important;
            background: #f1f5f9 !important;
            border: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #64748b !important;
            font-size: 15px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }

        .btn-calendar-popup-close:hover {
            background: #fee2dc !important;
            color: #ff523b !important;
            transform: rotate(90deg) !important;
        }

        .calendar-popup-summary-bar {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 10px 18px !important;
            background: #fff7f5 !important;
            border: 1px solid #fed7cc !important;
            border-radius: 14px !important;
            margin-bottom: 16px !important;
        }

        .calendar-popup-date-badge {
            display: flex !important;
            flex-direction: column !important;
            gap: 2px !important;
        }

        .calendar-popup-date-badge .label {
            font-size: 11px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            font-weight: 700 !important;
            color: #64748b !important;
        }

        .calendar-popup-date-badge strong {
            font-size: 14px !important;
            color: #0f172a !important;
            font-weight: 700 !important;
        }

        .calendar-popup-nights-badge {
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            padding: 5px 14px !important;
            background: #ffffff !important;
            border: 1px solid #fed7cc !important;
            border-radius: 9999px !important;
            font-size: 12.5px !important;
            font-weight: 700 !important;
            color: #ff7965 !important;
            box-shadow: 0 2px 6px rgba(255, 121, 101, 0.12) !important;
        }

        .btn-calendar-apply {
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            padding: 8px 22px !important;
            background: linear-gradient(135deg, #ff7965 0%, #ff523b 100%) !important;
            color: #ffffff !important;
            border: none !important;
            border-radius: 9999px !important;
            font-weight: 700 !important;
            font-size: 13.5px !important;
            cursor: pointer !important;
            box-shadow: 0 3px 12px rgba(255, 82, 59, 0.28) !important;
            transition: all 0.2s ease !important;
        }

        .btn-calendar-apply:hover {
            box-shadow: 0 5px 18px rgba(255, 82, 59, 0.42) !important;
            transform: translateY(-1px) !important;
        }

        /* 2 calendar months side-by-side in popup */
        #unifiedCalendar .ui-datepicker-multi {
            width: 100% !important;
            display: flex !important;
            gap: 16px !important;
        }

        #unifiedCalendar .ui-datepicker-group {
            flex: 1 1 50% !important;
            width: 50% !important;
        }
    }

    /* Mobile modal adjustments (1 month) */
    @media (max-width: 767px) {
        .calendar-popup-dialog {
            max-width: 380px !important;
            padding: 16px 14px !important;
        }
    }

/* --- Style Section 2 --- */
body {
        background-color: #fff
    }

    body, h3, #book tr#aboutdate td, .result .right table tr td, .result > table tr td, #filter form > table tr td, #zoekopdracht table tr td, #yourselection table tr td, .priceoverview table tr td, #yourdata table tr td, .wl-table tr td {
        color: #1e293b !important
    }

    a {
        color: #ff7a65
    }

    #topcontainer, #book input[type=submit], #zoekopdracht h4, #filtertitle, #overview a#bekijkkaart:hover, #searchoutput, #yourdata h4, #bookthisroom:hover {
        background-color: #ff7a65
    }

    #filter form > table tr td, #zoekopdracht table tr td, #yourdata form > table tr td {
        background-color: #f1f3f6
    }

    #lang ul li a, .selector ul li a {
        background-color: #ff7a65;
        border-bottom: none !important
    }

        #lang ul li a:hover, .selector ul li a:hover {
            background-color: #f9b5b2
        }

    #book h3, #book tr#aboutdate td {
    }

    #book input[type=text].datepicker, #yourdata input.datepicker[type="text"], .datepicker-wrapper input.datepicker[type="text"] {
        background: #ff7a65 url("/Content/Whitelabel/images/cal.png") right center no-repeat
    }

    .priceoverview input[type=text].datepicker {
        background: #f9b5b2 url("/Content/Whitelabel/images/cal.png") right center no-repeat !important
    }

    .priceoverview input[type=submit], #viewlocation {
        background-color: #ff7a65 !important
    }

        .priceoverview input[type=submit]:hover, #viewlocation:hover {
            background-color: #cfd8e5 !important
        }

    #zoekopdracht {
        margin-bottom: 20px
    }

        #zoekopdracht ul {
            margin: 20px 0 0 20px
        }

    #book {
        background-color: #f1f3f6
    }

        #overview a#bekijkkaart, .filtersubtitle, #book input[type=submit]:hover, #vvvwireframe input[type="submit"]:hover, .wl_btn, .side-title {
            background-color: #f9b5b2 !important
        }

    #filter {
        background-color: #f1f3f6
    }

    #filtermobile {
        background-color: #cfd8e5
    }

    #arrow {
        border-top: 16px solid #cfd8e5
    }

    .result .count {
        background-color: #fff;
        color: #ff7a65
    }

    .pagenav {
        background-color: #f9b5b2
    }

        .pagenav:hover {
            background-color: #ff7a65
        }

    .result:nth-child(2n+1) {
        background-color: #f1f3f6
    }

    #ddlStars {
        background-color: #f1f3f6
    }

    .result h1, .result h1 a, #logismanager_vvv .hotelname, #hoteldescription a:hover, .page .wl-h1 {
        color: #ff7a65 !important
    }

    #pagination a.active, #pagination a:hover {
        color: #ff7a65;
        text-decoration: underline
    }

    #footer a, #wl_breadcrumb a {
        color: #ff7a65 !important
    }

        #footer a:hover {
            color: #48423a
        }

    .result .right table tr td .persons, .result > table tr td .persons {
        color: #ff7a65
    }

    .result .right table tr td a.booknow, .result > table tr td a.booknow, {
        color: #ff7a65
    }

    #vvvwireframe {
        background-color: #f1f3f6
    }

    .hoteldetail_right h1 {
        color: #f9b5b2
    }

    .navigation a {
        background-color: #f9b5b2
    }

        .navigation a.active, .navigation a:hover {
            background-color: #ff7a65
        }

    #book .wl_btn, #book input.wl_btn[type="submit"], #yourdata input[type=submit], .wl_btn {
        background-color: #f9b5b2 !important
    }

    ._datePicker {
        background: none repeat scroll 0 0 #ff7a65 !important
    }

    #book .wl_btn:hover, #book input.wl_btn[type="submit"]:hover, #yourdata input[type=submit]:hover, .wl_btn:hover {
        background-color: #cfd8e5 !important
    }

    .wl_c1 {
        color: #ff7a65 !important
    }

    .wl_c2 {
        color: #cfd8e5 !important
    }

    .wl_c3 {
        color: #f1f3f6 !important
    }

    .wl_c4 {
        color: #f9b5b2 !important
    }

    .wl_back_c1 {
        background-color: #ff7a65 !important
    }

    .wl_back_c2 {
        background-color: #cfd8e5 !important
    }

    .wl_back_c3 {
        background-color: #f1f3f6 !important
    }

    .wl_back_c4 {
        background-color: #f9b5b2 !important
    }

    #bookingsteps a.active .stepnumber {
        background-color: #ff7a65 !important
    }

    #bookingsteps a.notclickable .stepnumber {
        background-color: #f9b5b2 !important
    }

    @media(max-width:500px) {
        #logo_portalbooker {
            background-size: 270px 22px;
            width: 270px;
            height: 22px
        }

        .result .right table tr td .persons, .result > table tr td .persons {
            background: url("/Content/Whitelabel/images/person_brown.png") no-repeat center left;
            background-size: 10px 14px
        }

        #book input[type=text].datepicker {
            background-image: none
        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx) {
        #logo_portalbooker {
            background: url("/Content/Whitelabel/images/logo_portalbooker_2x_brown.png") right center no-repeat
        }

        .result .right .stars.five {
            background: url("/Content/Whitelabel/images/stars_five_2x_brown.png") no-repeat
        }

        .result .right .stars.four {
            background: url("/Content/Whitelabel/images/stars_four_2x_brown..png") no-repeat
        }

        .result .right .stars.three {
            background: url("/Content/Whitelabel/images/stars_three_2x_brown..png") no-repeat
        }

        .result .right .stars.two {
            background: url("/Content/Whitelabel/images/stars_two_2x_brown..png") no-repeat
        }

        .result .right .stars.one {
            background: url("/Content/Whitelabel/images/stars_one_2x_brown..png") no-repeat
        }

        .result .right table tr td .persons, .result > table tr td .persons {
            background: url("/Content/Whitelabel/images/person_2x_brown.png") no-repeat center left
        }

        #book input[type=text].datepicker {
            background-image: none
        }
    }

    @media only screen and (max-width:500px) and (-webkit-min-device-pixel-ratio:2),(min--moz-device-pixel-ratio:2),(-o-min-device-pixel-ratio:2/1),(min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx) {
        #logo_portalbooker {
            background: url("/Content/Whitelabel/images/logo_portalbooker_2x_brown.png") right center no-repeat;
            background-size: 270px 22px
        }

        .result .right table tr td .persons, .result > table tr td .persons {
            background: url("/Content/Whitelabel/images/person_2x_brown.png") no-repeat center left;
            background-size: 10px 14px
        }
    }

    ;

/* --- Style Section 3 --- */
.fieldlabel {
        width: 150px;
    }

    .nrofpersons {
        width: 60px;
    }

    .container span {
        display: inline-block;
    }

    .expand {
        cursor: pointer;
    }

    .ui-state-highlight {
        border: 1px solid #c5c5c5 !important;
        background: #f6f6f6 !important;
        font-weight: normal !important;
        color: #454545 !important;
    }

    .error-border {
        outline: 2px solid #ef4444 !important;
        outline-offset: -2px;
    }

    .careTable, .recoveryStay {
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
        display: none;
        margin-top: 16px;
        overflow-x: auto;
    }

    .checkbox-row {
        text-align: center;
    }

    button:disabled {
        cursor: not-allowed;
    }