input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
}

.recommended-centres-glider {
    scrollbar-width: none;
}

    .recommended-centres-glider ::-webkit-scrollbar {
        display: none;
    }

.glider-care-type {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .glider-care-type ::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }

/* Target Glider-specific elements to hide scrollbars */
.glider-track, .glider-contain, .glider {
    -ms-overflow-style: none !important; /* IE and Edge */
    scrollbar-width: none !important; /* Firefox */
}

    .glider-track::-webkit-scrollbar,
    .glider-contain::-webkit-scrollbar,
    .glider::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important; /* Chrome, Safari and Opera */
    }

/* CSS for our dynamic hide-scrollbar class */
.hide-scrollbar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.gm-style {
    font-family: 'Poppins', sans-serif;
}

.gm-style-iw-c {
    width: fit-content !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    top: 100% !important;
    bottom: auto;
}

.gm-style-iw-chr {
    display: none;
}

.gm-style .gm-style-iw-c {
    padding: 0;
    max-width: none;
    width: 100%
}

.gm-style .gm-style-iw-tc {
}

    .gm-style .gm-style-iw-tc::after {
        -webkit-clip-path: none !important;
        clip-path: none !important;
        content: none !important;
        width: auto !important;
        height: auto !important;
    }

.gm-style-iw-d {
    overflow: auto !important;
    padding: 0;
    background: none;
    box-shadow: none;
}

.isSelected {
    background-color: #5a60ec;
    .basic-badge

{
    background-color: #fff;
}

& > i {
    background-color: #fff;
    &>svg

{
    color: #5a60ec;
}

}

& > span {
    color: white;
}

& > svg {
    color: #5a60ec;
}

}

.isUnSelected {
    background-color: white;
    .basic-badge

{
    background-color: #B1AFAD;
}

& > i {
    background-color: #918EA2;
    &>svg

{
    color: white;
}

}

& > span {
    color: #272727;
}

& > svg {
    color: white;
}

}

.isPremium {
    background-color: white;
    &>i

{
    background-color: #CD08D4;
    &>svg

{
    color: white;
}

}

& > span {
    color: #272727;
}

& > svg {
    color: white;
}

}

.isPremium.isSelected {
    background-color: #CD08D4;
    &>i

{
    background-color: white;
    &>svg

{
    color: #CD08D4;
}

}

& > span {
    color: white;
}

& > svg {
    color: #CD08D4;
}

}

.isPremium.isUnSelected {
    background-color: white;
    &>i

{
    background-color: #918EA2;
    &>svg

{
    color: white;
}

}

& > span {
    color: #272727;
}

& > svg {
    color: white;
}

}

/* Styles for markers in the compare queue */
.isCompared {
    background-color: #5A60EC !important;
    & > i

{
    color: white !important;
}

& > span {
    color: white !important;
}

/* & > svg {
                                                                                        color: #5A60EC !important;
                                                                                        } */
}

/* Ensure compare markers aren't affected by selected/unselected styles */
.isCompared.isSelected, .isCompared.isUnSelected {
    background-color: #5A60EC !important;
}

/* Default style for favorite heart icon */
.isFavorite > .fa-heart {
    color: #CD08D4 !important;
}

/* Styles for favorite markers */
.isFavorite.isSelected {
    background-color: #CD08D4 !important;
    & > svg

{
    color: #CD08D4 !important;
}

& > .fa-heart {
    color: white !important;
    background-color: transparent !important;
}

& > span {
    color: white !important;
}

}

/* Ensure favorite markers take precedence over premium/basic styles when selected */
,
.isFavorite.isSelected.isUnSelected,
.isFavorite.isSelected.isPremium.isUnSelected {
    background-color: #CD08D4 !important;
    & > i.fa-heart
{
    color: white !important;
    background-color: transparent !important;
}

& > span {
    color: white !important;
}

& > svg {
    color: #CD08D4 !important;
}

}

.isFavorite.isSelected.isPremium{
  
    & > svg {
        color: white !important;
    }
& > span {
    color: white !important;
}
& > svg {
    color: #CD08D4 !important;
}
& > .fa-heart {
    color: white !important;
    background-color: transparent !important;
}
}

.queue-img img {
    height: 100%
}

@media (max-width:375px) {
    .truncate-custom {
        width: calc(50% - 2px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .truncate-name-suburb {
        width: calc(100% - 30px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #E3E1DD;
    color: #E3E1DD;
    animation: dot-flashing 0.5s infinite linear alternate;
    animation-delay: 0.25s;
}

    .dot-flashing::before, .dot-flashing::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
    }

    .dot-flashing::before {
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #E3E1DD;
        color: #E3E1DD;
        animation: dot-flashing 0.5s infinite alternate;
        animation-delay: 0s;
    }

    .dot-flashing::after {
        left: 15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #E3E1DD;
        color: #E3E1DD;
        animation: dot-flashing 0.5s infinite alternate;
        animation-delay: 0.5s;
    }

@keyframes dot-flashing {
    0% {
        background-color: #5A60EC;
    }

    50%, 100% {
        background-color: #E3E1DD;
    }
}

/*#center-circle {
    width: calc(100% - 24px)
}

@media only screen and (min-width:992px) {
    #center-circle {
        width: calc(100% - 230px)
    }
}*/

#center-circle {
    width: calc(100% - 24px);
}

@media (min-width: 992px) {
    #center-circle {
        width: calc(100% - 230px);
    }
}


body.modalMapFullscreen #center-circle {
    width: calc(100% - 16px);
}

@media (min-width: 992px) {
    body.modalMapFullscreen #center-circle {
        width: 720px;
    }
}

@media (min-width: 1200px) {
    body.modalMapFullscreen #center-circle {
        width: calc(100% - 550px);
    }
}

@media (min-width: 1368px) {
    body.modalMapFullscreen #center-circle {
        width: 720px;
    }
}


.input-range .range-slide {
    position: relative;
    margin: 20px;
    height: 4px;
}

.input-range .slide {
    position: absolute;
    top: 0;
    height: 4px;
    background: #ccc;
    left: 9px;
    right: 9px;
}

/* Add scrollbar-hide class */
.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

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

.input-range .line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background-color: #5A60EC;
}

.input-range .thumb {
    position: absolute;
    z-index: 2;
    border: 1px solid #B1AFAD;
    background-color: #FFFFFF;
    border-radius: 50%;
    outline: none;
    top: -7px;
    height: 18px;
    width: 18px;
    margin-left: -9px;
}

.input-range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    pointer-events: none;
    z-index: 3;
    height: 3px;
    top: 0;
    width: 100%;
    opacity: 0;
    margin: 0;
}

/* Hide spinner buttons for number inputs */
.input-range input[type="number"]::-webkit-inner-spin-button,
.input-range input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-range input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* Hide border on input focus */
#minInput:focus, #maxInput:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide container border when inputs are focused */
.input-range .display .flex:has(#minInput:focus),
.input-range .display .flex:has(#maxInput:focus) {
    border-color: transparent !important;
}

/* Alternate approach for browsers that don't support :has() */
#minInput:focus ~ .flex, #maxInput:focus ~ .flex,
#minInput:focus-within, #maxInput:focus-within {
    border-color: transparent !important;
}

.input-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    border-radius: 50%;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.input-range .display {
    margin: 24px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Add these styles to fix modal on mobile */
.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

#filterModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 102;
    background-color: rgba(21, 21, 21, 0.7);
    display: none; /* Hide by default */
}

    #filterModal.active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

@media (max-width: 768px) {
    #filterModal.active {
        align-items: flex-start;
    }

    #filterModal #filterForm {
        width: 100%;
        height: 100%;
    }

    #filterModal .modal-content {
        height: 100vh;
    }

    /* Optimize mobile spacing for filters */
    #filterModal .space-y-6 {
        padding-bottom: 20px; /* Add extra padding at the bottom */
    }

    /* Make day buttons better sized on small screens */
    #filterModal .flex.gap-2.p-1.justify-between {
        gap: 5px !important;
    }

        #filterModal .flex.gap-2.p-1.justify-between label span {
            width: 42px !important;
            height: 42px !important;
        }
}

@media (min-width: 769px) {
    #filterModal.active {
        padding: 20px;
    }

    #filterModal #filterForm {
        width: 100%;
        max-width: 710px;
        height: auto;
        max-height: 90vh;
        margin: 0 auto;
    }

    #filterModal .modal-content {
        max-height: 90vh;
        overflow: hidden;
    }
}

/* Modal visibility fix - make sure when visible it has these styles */
#filterModal:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Desktop styles */
@media (min-width: 769px) {
    #filterModal form {
        width: 100%;
        max-width: 710px;
        margin: 0 auto;
    }

    #filterModal .modal-content {
        max-height: 90vh;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    #filterModal form {
        width: 100%;
        height: 100%;
    }

    #filterModal .modal-content {
        height: 100%;
        max-height: 100%;
    }
}

/* Ensure the modal is always centered when visible */
#filterModal:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* On mobile, the modal should take full height */
@media (max-width: 768px) {
    #filterModal:not(.hidden) {
        align-items: flex-start !important;
    }
}

/* Fix the modal content for proper scrolling and sizing */
#filterModal .modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* Content section that needs to scroll */
    #filterModal .modal-content > div.overflow-y-auto {
        flex: 1;
        -webkit-overflow-scrolling: touch; /* For iOS */
    }

/* Fix for desktop layout to ensure proper centering and size */
@media (min-width: 769px) {
    #filterModal #filterForm {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.loader {
    display: inline-block; /* allow width/height to apply */
    width: 4px; /* updated to 24px */
    height: 4px; /* updated to 24px */
    font-size: 4px; /* updated to 24px to scale all those em-based box-shadows */
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    animation: mulShdSpin 1.1s infinite ease;
    transform: translateZ(0);
    vertical-align: middle; /* if you want it baseline-aligned */
}

@keyframes mulShdSpin {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #5A60EC, 1.8em -1.8em 0 0em #B1AFAD, 2.5em 0em 0 0em #B1AFAD, 1.75em 1.75em 0 0em #B1AFAD, 0em 2.5em 0 0em #B1AFAD, -1.8em 1.8em 0 0em #B1AFAD, -2.6em 0em 0 0em #B1AFAD, -1.8em -1.8em 0 0em #B1AFAD;
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em #B1AFAD, 1.8em -1.8em 0 0em #5A60EC, 2.5em 0em 0 0em #B1AFAD, 1.75em 1.75em 0 0em #B1AFAD, 0em 2.5em 0 0em #B1AFAD, -1.8em 1.8em 0 0em #B1AFAD, -2.6em 0em 0 0em #B1AFAD, -1.8em -1.8em 0 0em #B1AFAD;
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em #B1AFAD, 1.8em -1.8em 0 0em #B1AFAD, 2.5em 0em 0 0em #5A60EC, 1.75em 1.75em 0 0em #B1AFAD, 0em 2.5em 0 0em #B1AFAD, -1.8em 1.8em 0 0em #B1AFAD, -2.6em 0em 0 0em #B1AFAD, -1.8em -1.8em 0 0em #B1AFAD;
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em #B1AFAD, 1.8em -1.8em 0 0em #B1AFAD, 2.5em 0em 0 0em #B1AFAD, 1.75em 1.75em 0 0em #5A60EC, 0em 2.5em 0 0em #B1AFAD, -1.8em 1.8em 0 0em #B1AFAD, -2.6em 0em 0 0em #B1AFAD, -1.8em -1.8em 0 0em #B1AFAD;
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em #B1AFAD, 1.8em -1.8em 0 0em #B1AFAD, 2.5em 0em 0 0em #B1AFAD, 1.75em 1.75em 0 0em #B1AFAD, 0em 2.5em 0 0em #5A60EC, -1.8em 1.8em 0 0em #B1AFAD, -2.6em 0em 0 0em #B1AFAD, -1.8em -1.8em 0 0em #B1AFAD;
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em #B1AFAD, 1.8em -1.8em 0 0em #B1AFAD, 2.5em 0em 0 0em #B1AFAD, 1.75em 1.75em 0 0em #B1AFAD, 0em 2.5em 0 0em #B1AFAD, -1.8em 1.8em 0 0em #5A60EC, -2.6em 0em 0 0em #B1AFAD, -1.8em -1.8em 0 0em #B1AFAD;
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em #B1AFAD, 1.8em -1.8em 0 0em #B1AFAD, 2.5em 0em 0 0em #B1AFAD, 1.75em 1.75em 0 0em #B1AFAD, 0em 2.5em 0 0em #B1AFAD, -1.8em 1.8em 0 0em #B1AFAD, -2.6em 0em 0 0em #5A60EC, -1.8em -1.8em 0 0em #B1AFAD;
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em #B1AFAD, 1.8em -1.8em 0 0em #B1AFAD, 2.5em 0em 0 0em #B1AFAD, 1.75em 1.75em 0 0em #B1AFAD, 0em 2.5em 0 0em #B1AFAD, -1.8em 1.8em 0 0em #B1AFAD, -2.6em 0em 0 0em #B1AFAD, -1.8em -1.8em 0 0em #5A60EC;
    }
}

/* Custom vertical scrollbar styles */
.modal-content > div.overflow-y-auto {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #89888633 transparent;
    /* IE and Edge */
    -ms-overflow-style: auto;
    -ms-scrollbar-base-color: transparent;
    -ms-scrollbar-face-color: #89888633;
    -ms-scrollbar-track-color: transparent;
    -ms-scrollbar-arrow-color: transparent;
    -ms-scrollbar-highlight-color: transparent;
    -ms-scrollbar-shadow-color: transparent;
    -ms-scrollbar-3dlight-color: transparent;
    -ms-scrollbar-darkshadow-color: transparent;
}

    /* WebKit browsers (Chrome, Safari, Opera, Edge Chromium) */
    .modal-content > div.overflow-y-auto::-webkit-scrollbar {
        width: 6px;
        height: 6px; /* For horizontal scrollbars if needed */
    }

    .modal-content > div.overflow-y-auto::-webkit-scrollbar-track {
        background: transparent;
        -webkit-box-shadow: none;
    }

    .modal-content > div.overflow-y-auto::-webkit-scrollbar-thumb {
        background-color: #89888633;
        border-radius: 3px;
        -webkit-box-shadow: none;
    }

        .modal-content > div.overflow-y-auto::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.3);
        }

/* Edge Chromium specific */
@supports (-ms-ime-align: auto) {
    .modal-content > div.overflow-y-auto {
        scrollbar-color: #89888633 transparent;
    }
}

/* Safari specific */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .modal-content > div.overflow-y-auto::-webkit-scrollbar {
            width: 6px;
        }
    }
}