/* no promo checkbox */ 
#sb_terms_and_conditions > div > div.promotions-letter-flag.v2{
display:none!important;
}
 
	/* no header and book button */


#main-buttons .wrapper .bar {
display:none!important;
}
#header .nav-trigger.toggle-mnu {
display:none!important;
}

#main #main-buttons .column .wrapper .inner .company-name {
display:none!important;
} 

@media (min-width: 1000px) {
#sb_sidebar_container {
display: flex !important;
    visibility: visible !important;
    width: 25%;
bottom: 530px;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step .col-md-9.col-md-12 {
    padding: 0 5px;
    width: 75%;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step>[class*=col-] {
    width: fit-content;
}}
@media (max-width: 1000px) {
    /* 1. Set main container to Flex and Column */
    #sb_datetime_step_container {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Move the entire second container (Sidebar + Times) to the TOP for now */
    #sb_datetime_step_container > div:nth-child(2) {
        display: contents !important; /* This breaks the container div so its children can be ordered globally */
    }

    /* 3. The Sidebar (Inside div 2) - PLACE AT TOP */
    #sb_sidebar_container {
        order: 1 !important;
        display: block !important; /* Force visibility */
        width: 100% !important;
    }

    /* 4. The Original Top Div (Calendar) - PLACE IN MIDDLE */
    #sb_datetime_step_container > div:nth-child(1) {
        order: 2 !important;
        width: 100% !important;
    }

    /* 5. The Time Slots Container (Inside div 2) - PLACE AT BOTTOM */
    #sb_datetime_step_container > div:nth-child(2) .col-md-9 {
        order: 3 !important;
        width: 100% !important;
    }

    /* Clean up Bootstrap row layout */
    #sb_datetime_step_container > div:nth-child(2) > .row {
        display: contents !important;
    }
}   

/* This targets both the names of the days and the date blocks */
#sb_dateview_container .calendar .weeks-name > div,
#sb_dateview_container .calendar .weeks-date > div {
    width: 100% !important;
    float: none !important;
    display: block !important;
    clear: both !important;
}
/*prev or next month */
div.date.prev-or-next-month{
visibility:hidden!important;
}
/* Ensure the 'hidden' classes don't accidentally hide the 
   extra weeks now that we are stacking them */
#sb_dateview_container .calendar .hidden-xs,
#sb_dateview_container .calendar .hidden-sm {
    display: block !important;
}

/* Optional: Add a little spacing between the stacked weeks 
   so they don't look like one giant list */
#sb_dateview_container .calendar .weeks-date > div {
    margin-bottom: 20px;
}


/* 1. Hide the 2nd and 3rd week name containers */
#sb_dateview_container .weeks-name > div:nth-child(2),
#sb_dateview_container .weeks-name > div:nth-child(3) {
    display: none !important;
}


/* 3. Ensure the 1st week takes up the full width */
#sb_dateview_container .weeks-name > div:nth-child(1),
#sb_dateview_container .weeks-date > div:nth-child(1) {
    width: 100% !important;
    display: block !important;
}

/*available slot color*/
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper #sb_time_slots_container .slot a { 
    background: #F6F6F5;
}
#sb_timeview_container > div > div > div > div > div.time-legend{
display:none!important;
}

/*calendar colors*/
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .day-off {
    color: #d3d3d3!important;
}

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .inner.selected, #sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected {
    background: #bd9999!important;
}

/* 1. Hide years after 2031 (2032 to 2046) */
.year_select option[value="2032"],
.year_select option[value="2033"],
.year_select option[value="2034"],
.year_select option[value="2035"],
.year_select option[value="2036"],
.year_select option[value="2037"],
.year_select option[value="2038"],
.year_select option[value="2039"],
.year_select option[value="2040"],
.year_select option[value="2041"],
.year_select option[value="2042"],
.year_select option[value="2043"],
.year_select option[value="2044"],
.year_select option[value="2045"],
.year_select option[value="2046"] {
    display: none !important;
}

/* 2. Hide years before 2026 (1906 to 2025) */
/* Using a attribute range selector for the 1900s and early 2000s */
.year_select option[value^="19"],
.year_select option[value^="200"],
.year_select option[value^="201"],
.year_select option[value="2020"],
.year_select option[value="2021"],
.year_select option[value="2022"],
.year_select option[value="2023"],
.year_select option[value="2024"],
.year_select option[value="2025"] {
    display: none !important;
}

.date-input-group {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to a second line */
}

.calendar-toggle { 
    order: -1;       /* Moves it to the top */
    margin-bottom: 10px;
}

.date_select {
    margin-right: 5px; /* Spacing between the dropdowns */
}
#sb_additional_fields .form-group .date-input-group .calendar-toggle { 
    width: 100%; 
}
#sb_additional_fields .form-group .date-input-group .calendar-toggle__icon { 
    width: 50px; 
    margin-bottom: 20px;
}
/*time step make padding of calendar box smaller & hide white line before read more */
.section-pd {
    padding: 10px;
}

#sb-timeline #steps #steps-content #sb_booking_content .provider-item .excerpt-info .read-more:before {
display:none!important;
} 

/*last step*/
#push-subscribe-region{
display:none!important;
} 

/*navigation*/ 
    #sb-timeline #steps-nav ul li.passed {
        display: none !important;
    }
@media (min-width: 1599px) {
    #sb-timeline #steps-nav ul li {
        display: block !important;
        height: 50px;
        text-align: left;
    }
}
#sb-timeline #steps-nav ul li.active:before, #sb-timeline #steps-nav ul li.passed+li:not(.passed):before {
        display: block !important;
        position: absolute;
        content: "";
        width: calc(100% - 10px);
        height: 1px;
        bottom: 0;
        left: 10px;
    }
    #sb-timeline #steps-nav ul {
        table-layout: auto!important;
    }
    #sb-timeline #steps-nav #sb_booking_info ul {
        display: block!important;
        position: absolute!important;
        top: 0px!important;
        transform: rotate(0deg)!important; 
    }
    #sb-timeline #steps-nav #sb_booking_info ul .step_info_item.filled, #sb-timeline #steps-nav #sb_booking_info ul .step_info_item.passed{
    display: none !important;
}
#sb-timeline #steps-nav {
        margin-bottom: 100px!important;
    } 
    #sb-timeline #steps-nav {
        box-shadow: none!important;
        margin-top: 25px!important;
    } 
}