/* Accordion */
.accordion-body {
    padding: 0.1rem 1rem !important;
}

.accordion-button {
    background-color: transparent !important;
    color: black !important;
    box-shadow: none !important;
    border: 1px !important;
}

    .accordion-button:not(.collapsed)::after {
        opacity: 0.7 !important;
        background-image: url('/new/images/Icons/minus.svg') !important;
    }

    .accordion-button::after {
        opacity: 0.7 !important;
        background-image: url("/new/images/Icons/plus.svg") !important;
    }

.accordion-item {
    background-color: #ffffff !important;
    border: none !important;
    width: 100%;
}

.fs-20 {
    font-size: 20px !important;
}

/* VSComp Options */
.vscomp-wrapper .checkbox-icon::after {
    border-radius: 3px;
    border-color: #bdbdbd;
}

/* Default state: no background, no filter */
.vscomp-option {
    outline: none;
    /*background-color: transparent;*/
    filter: none;
}

    /* Hover state */
    .vscomp-option:hover {
        background-color: #eaefff !important;
    }

    .vscomp-option:not(:hover) {
        background-color: transparent !important;
    }

    /* Selected state */
    .vscomp-option.selected {
        background-color: #eaefff !important;
    }

        /*    .vscomp-option.focused {
        background-color: transparent !important;
    }*/

        /* Selected checkbox icon filter */
        .vscomp-option.selected .checkbox-icon::after {
            filter: invert(16%) sepia(95%) saturate(7487%) hue-rotate(201deg) brightness(98%) contrast(101%) !important;
        }

    /* Group option padding */
    .vscomp-option.group-option {
        padding-left: 25px;
    }

/* VSComp Dropdown and Wrapper */
.vscomp-toggle-button {
    border-radius: 5px;
}

.vscomp-ele {
    max-width: 100%;
}

.vscomp-wrapper.keep-always-open .vscomp-dropbox,
.vscomp-dropbox,
.custom-dropbox-container {
    border: none;
    background-color: #f8f9fa;
    box-shadow: none;
}

.vscomp-options-container::-webkit-scrollbar {
    width: 4px;
    background-color: transparent;
}

.vscomp-options-container:hover::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.vscomp-wrapper.keep-always-open.focused,
.vscomp-wrapper.keep-always-open:focus,
.vscomp-wrapper.keep-always-open:hover {
    box-shadow: none;
}

/* Filters and icons */
.icon-text {
    font-size: 9px;
}

.filtered {
    filter: invert(27%) sepia(96%) saturate(748%) hue-rotate(199deg) brightness(98%) contrast(101%);
}

/* Buttons */
.btn:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0d6efd !important;
}

.border-design {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0d6efd;
    padding: 0.3rem .5rem;
}



.cRefNo1 {
    /*top: 10px;*/ /* distance from top */
    /*left: 10px;*/ /* distance from left */
    position: absolute;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    background-color: var(--color1--);
    color: #fff;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    z-index: 2; /* ensures it appears above the image */
}



.scrollable-section {
    height: calc(100vh - 20px); /* keep full viewport height minus header */
    overflow-y: auto; /* allow scrolling */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .scrollable-section::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

#responsiveFilter {
    position: sticky; /* keep sidebar visible */
    top: 20px; /* adjust for header */
    max-height: calc(100vh - 40px);
    overflow-y: auto; /* scroll inside sidebar if content is long */
}


@media (max-width: 991px) {
    #responsiveFilter {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 50vh;
        background: #f8f9fa;
        z-index: 9999;
        box-shadow: 0 -3px 10px rgba(0,0,0,0.2);
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
    }

    /* Prevent Bootstrap column from interfering */
    .col-xl-3.col-lg-4.mb-4 {
        position: static;
    }
}

#mobileFilterClose {
    background: transparent;
    color: #000; /* black cross */
    border: none; /* no border */
    font-size: 24px; /* adjust size */
    /* font-weight: bold; */
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px; /* little horizontal padding */
    margin-right: 5px; /* space from right edge */
}

    /* Hover effect */
    #mobileFilterClose:hover,
    #mobileFilterClose:focus {
        color: #555;
        outline: none;
    }

/* Hide on desktop */
@media (min-width: 992px) {
    #mobileFilterClose {
        display: none;
    }
}

/*#filterWrapper {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scroll-behavior: smooth;
}*/

/* Hide custom toggle button */
.custom-toggle-button {
    display: none !important;
}

/* Optional overlay when filter section is updating */
#filterWrapper.loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none; /* Prevent interaction while loading */
    transition: opacity 0.2s ease;
}




.vscomp-options-container {
    max-height: 200px; /* or whatever height is correct */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* Firefox */
}


    /* Chrome, Safari, Opera */
    .vscomp-options-container::-webkit-scrollbar {
        width: 4px !important;
        background-color: transparent !important;
    }

    .vscomp-options-container::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
    }

    .vscomp-options-container:hover::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

#filterWrapper {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

    /* WebKit scrollbar for filterWrapper */
    #filterWrapper::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    #filterWrapper::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
    }

    #filterWrapper:hover::-webkit-scrollbar-thumb {
        background: rgba(136, 136, 136, 0.7);
    }

    /* Firefox hover scrollbar color */
    #filterWrapper:hover {
        scrollbar-color: rgba(136, 136, 136, 0.7) transparent;
    }




/* Accordion */
.accordion-body {
    padding: 0.1rem 1rem !important;
}

.accordion-button {
    background-color: transparent !important;
    color: black !important;
    box-shadow: none !important;
    border: 1px !important;
}

    .accordion-button:not(.collapsed)::after {
        opacity: 0.7 !important;
        background-image: url('/new/images/Icons/minus.svg') !important;
    }

    .accordion-button::after {
        opacity: 0.7 !important;
        background-image: url("/new/images/Icons/plus.svg") !important;
    }

.accordion-item {
    background-color: #f8f9fa;
    border: none !important;
    width: 100%;
}

.fs-20 {
    font-size: 20px !important;
}

/* VSComp Options */
.vscomp-wrapper .checkbox-icon::after {
    border-radius: 3px;
    border-color: #bdbdbd;
}

/* Default state: no background, no filter */
.vscomp-option {
    outline: none;
    /*background-color: transparent;*/
    filter: none;
}

    /* Hover state */
    .vscomp-option:hover {
        background-color: #eaefff !important;
    }

    .vscomp-option:not(:hover) {
        background-color: transparent !important;
    }

    /* Selected state */
    .vscomp-option.selected {
        background-color: #eaefff !important;
    }

        /*    .vscomp-option.focused {
        background-color: transparent !important;
    }*/

        /* Selected checkbox icon filter */
        .vscomp-option.selected .checkbox-icon::after {
            filter: invert(16%) sepia(95%) saturate(7487%) hue-rotate(201deg) brightness(98%) contrast(101%) !important;
        }

    /* Group option padding */
    .vscomp-option.group-option {
        padding-left: 25px;
    }

/* VSComp Dropdown and Wrapper */
.vscomp-toggle-button {
    border-radius: 5px;
}

.vscomp-ele {
    max-width: 100%;
}

.vscomp-wrapper.keep-always-open .vscomp-dropbox,
.vscomp-dropbox,
.custom-dropbox-container {
    border: none;
    /*background-color: #f8f9fa;*/
    background-color: #ffffff !important;
    box-shadow: none;
}

.vscomp-options-container {
    max-height: 200px; /* or whatever height is correct */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* Firefox */
}

    /* Chrome, Safari, Opera */
    .vscomp-options-container::-webkit-scrollbar {
        width: 4px !important;
        background-color: transparent !important;
    }

    .vscomp-options-container::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
    }

    .vscomp-options-container:hover::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }


.vscomp-wrapper.keep-always-open.focused,
.vscomp-wrapper.keep-always-open:focus,
.vscomp-wrapper.keep-always-open:hover {
    box-shadow: none;
}

/* Filters and icons */
.icon-text {
    font-size: 9px;
}

.filtered {
    filter: invert(27%) sepia(96%) saturate(748%) hue-rotate(199deg) brightness(98%) contrast(101%);
}

/* Buttons */
.btn:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0d6efd !important;
}

.border-design {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0d6efd;
    padding: 0.3rem .5rem;
}


.cRefNo1 {
    /*top: 10px;*/ /* distance from top */
    /*left: 10px;*/ /* distance from left */
    position: absolute;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    background-color: var(--color1--);
    color: #fff;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    z-index: 2; /* ensures it appears above the image */
}



.scrollable-section {
    height: calc(100vh - 20px); /* keep full viewport height minus header */
    overflow-y: auto; /* allow scrolling */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .scrollable-section::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

#responsiveFilter {
    position: sticky; /* keep sidebar visible */
    top: 20px; /* adjust for header */
    max-height: calc(100vh - 40px);
    overflow-y: auto; /* scroll inside sidebar if content is long */
}


@media (max-width: 991px) {
    #responsiveFilter {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 50vh;
        background: #f8f9fa;
        z-index: 9999;
        box-shadow: 0 -3px 10px rgba(0,0,0,0.2);
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
    }

    /* Prevent Bootstrap column from interfering */
    .col-xl-3.col-lg-4.mb-4 {
        position: static;
    }
}

#mobileFilterClose {
    background: transparent;
    color: #000; /* black cross */
    border: none; /* no border */
    font-size: 24px; /* adjust size */
    /* font-weight: bold; */
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px; /* little horizontal padding */
    margin-right: 5px; /* space from right edge */
}

    /* Hover effect */
    #mobileFilterClose:hover,
    #mobileFilterClose:focus {
        color: #555;
        outline: none;
    }

/* Hide on desktop */
@media (min-width: 992px) {
    #mobileFilterClose {
        display: none;
    }
}

/*#filterWrapper {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scroll-behavior: smooth;
}*/

/* Hide custom toggle button */
.custom-toggle-button {
    display: none !important;
}

/* Optional overlay when filter section is updating */
#filterWrapper.loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none; /* Prevent interaction while loading */
    transition: opacity 0.2s ease;
}

.dropdown-menu {
    /*max-height: 99px*/ /* adjust 2rem to match your item height */ /*!important;*/
    overflow-y: auto !important;
}

#pricedropdown {
    max-height: 99px !important;
}

#filterWrapper {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

    /* WebKit scrollbar for filterWrapper */
    #filterWrapper::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    #filterWrapper::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
    }

    #filterWrapper:hover::-webkit-scrollbar-thumb {
        background: rgba(136, 136, 136, 0.7);
    }

    /* Firefox hover scrollbar color */
    #filterWrapper:hover {
        scrollbar-color: rgba(136, 136, 136, 0.7) transparent;
    }