:root {
    --borderRadius: 20px;
    --fontSize: 16px;
    --fontSizeLarge: 20px;
    --orange: var(--elderOrange);
}

/* Overrides */
.container {width: 100% !important; left: 0% !important; padding: 0px 20px !important; margin: 0px !important;}

.third {display: flex; justify-content: space-between; flex-direction: column; box-sizing: border-box; width: calc((100% / 1.75) - 10px); margin: 0px;}
.nearbyProvider {padding: 20px; border: 1px solid #ddd; background: #fff; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; flex-direction: row-reverse;}
    .nearbyProvider:hover {background: #fafafa; cursor: pointer;}
#nearbyProviders {max-height: calc(100vh - 277px); height: 100%; -ms-overflow-style: none; box-sizing: border-box; width: 100%; padding: 0px 5px 0px 0px; border-top: 1px solid var(--grey);}
.hidden {display: none !important;}
#map {height: calc(100vh - 277px);}
label {text-align: left; font-weight: 600;}
.providerName, .address {text-transform: capitalize; font-size: var(--fontSize); text-align: left; font-family: 'Open Sans', sans-serif;}
.providerInfo {display: flex; justify-content: flex-start; align-items: center; gap: 10px; flex-direction: column;}
.providerName {font-size: var(--fontSize); text-align: left; margin-left: 3px; font-weight: bold;}
.address {width: calc(100% - 32px);}
.nearbyProvider .place {color: #1aa7ec;}
.facilityTypeIcon {margin-top:0;margin-right:10px;font-size: var(--fontSizeLarge) !important;}
.film {background: rgba(0,0,0,50%); top: 80px;}
.popupHeading {font-family: 'Open Sans', sans-serif; font-size: var(--fontSize);}
.gm-style-iw.gm-style-iw-c {max-width: 300px !important;}
.listInfoParent {display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; align-items: center; padding: 10px 20px; background: #fafafa; border: 1px solid #ddd;}
.fullListInfo {display: flex; gap: 10px; justify-content: space-between; align-items: center;}
    .fullListInfo h1 {font-size: var(--fontSize); margin: 0px;}
    .fullListInfo p {font-size: 12px; margin: 0px;}
.searchResultsCont {display: flex; align-items: flex-start; justify-content: space-between;}
.typeLabel {width: auto; margin-top: 0px; font-size: var(--fontSize);}

/* Google Map Styling */
.modern-popup-card {display: flex; gap: 10px; flex-direction: column; justify-content: flex-start; align-items: center; padding: 0px 0px 0px 20px;}
.modern-popup-address {font-size: var(--fontSize);}
.modern-popup-title {cursor: pointer; font-size: var(--fontSizeLarge);}
.modern-popup-row {display: flex; justify-content: flex-start; align-items: center; gap: 10px;}
.gm-style-iw-d {padding: 0px !important;}

/* Scrollbar */
a {color: #fb9315;}
.scrollbar {float: left; overflow-y: auto; padding-right: 10px;}
.style-1::-webkit-scrollbar-track {border-radius: var(--borderRadius); background-color: #f1f1f1;}
.style-1::-webkit-scrollbar {width: 25px; background-color: #f1f1f1; color: #fb9315; border-radius: var(--borderRadius);}
.style-1::-webkit-scrollbar-thumb {border-radius: var(--borderRadius); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #fb9315;}

/* ----------------- Search Filter Subheading ----------------- */
.searchFilterSubHead {display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 10px 20px;}
.filterableOptions, .controlOptions {display: flex; justify-content: flex-start; align-items: center; gap: 10px;}
.controlOptions {justify-content: flex-end;}
.searchContainer {max-width: 500px; border-radius: var(--borderRadius); border: 1px solid var(--grey); display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0px 10px; background: white; height: 35.33px; position: relative;}
.searchContainer:has(#searchDropdown) {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

/* Search autocomplete dropdown */
.searchDropdown {position: absolute; top: 100%; left: -0.5px; width: calc(100% + 1px); background: #fff; border: 1px solid var(--grey); border-top: none; border-radius: 0 0 var(--borderRadius) var(--borderRadius); box-shadow: 0 6px 16px rgba(0,0,0,0.12); z-index: 500; overflow: hidden;}
.searchDropdownItem {display: flex; flex-direction: column; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; gap: 2px;}
.searchDropdownItem:last-child {border-bottom: none;}
.searchDropdownItem:hover {background: #fffaf3;}
.ddName {font-size: var(--fontSize); font-weight: 600; text-transform: capitalize; color: #222;}
.ddAddress {font-size: 12px; color: #888; text-transform: capitalize;}
.searchInputValue {height: 31px; border: none !important; margin: 0px; outline: none; padding: 8px 12px; width: 400px;}
.filterWrapper {position: relative; display: inline-block; max-width: 200px;}
.filterTitle {font-weight: bold; font-size: 13px; padding: 8px 12px; border: 1px solid var(--grey); border-radius: var(--borderRadius); background: #fff; cursor: pointer; display: flex; align-items: center; gap: 8px; min-width: 200px; justify-content: space-between;}
.filterTitle::after {content: '▼'; font-size: 10px; flex-shrink: 0;}
.filterTitleLeft {display: flex; align-items: center; gap: 6px;}
.filterCount {display: none; align-items: center; justify-content: center; background: var(--elderOrange, #f59619); color: #fff; border-radius: 50%; min-width: 18px; height: 18px; font-size: 11px; font-weight: 700; padding: 0 3px; line-height: 1; box-sizing: border-box;}
.filterCount.active {display: inline-flex;}
.filterGroup {display: none; position: absolute; top: 100%; left: 0; background: white; border: 1px solid var(--grey); border-radius: 0px 0px var(--borderRadius) var(--borderRadius); padding: 10px; max-height: 250px; overflow-y: auto; overflow-x: hidden; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 200px;}
.filterWrapper:hover .filterGroup,
.filterWrapper:focus-within .filterGroup {display: flex; justify-content: flex-start; align-items: flex-start; gap: 10px; flex-direction: column;}
.filterWrapper:hover .filterTitle {border-color: var(--elderOrange, #f59619); border-radius: var(--borderRadius) var(--borderRadius) 0px 0px;}
.filterGroup input {width: auto; margin: 3px 10px 0px 0px;}
.filterGroup label {display: flex; justify-content: flex-start; align-items: flex-start;}

/* Filter / Sort Buttons */
.clearFiltersBtn {font-weight: bold; font-size: 13px; padding: 8px 14px; border: 1px solid #e53935; border-radius: var(--borderRadius); background: #fff; color: #e53935; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; height: 35.33px; box-sizing: border-box;}
.sortFiltersBtn {border: 1px solid #354fe5; color: #354fe5;}
.saveFiltersBtn {border: 1px solid #287a2c; color: #287a2c;}
.allFiltersBtn {border: 1px solid var(--grey); color: #333;}
    .clearFiltersBtn:hover {background: #fdecea;}
    .sortFiltersBtn:hover {background: #eaedfd;}
    .saveFiltersBtn:hover {background: #eafdea;}
    .allFiltersBtn:hover {border: 1px solid var(--elderOrange); background: #fff; color: #333;}
.clearFiltersBtn .clearIcon {font-size: 15px;}

/* Sort Dropdown */
.sortWrapper .sortTrigger {min-width: unset;}
.sortWrapper:hover .sortTrigger,
.sortWrapper:focus-within .sortTrigger {background: #eaedfd; border-color: #354fe5;}
.sortGroup {left: auto; right: 0; min-width: 240px;}
.sortWrapper:hover .filterGroup,
.sortWrapper:focus-within .filterGroup {display: flex;}
.sortOption {display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 2px; border-radius: 4px; width: 100%;}
.sortOption:hover {background: #f0f4ff;}
.sortOption input[type="radio"] {width: auto; margin: 0; accent-color: #354fe5; cursor: pointer;}
.sortOption.selected {font-weight: bold; color: #354fe5;}

/* All Filters Popup */
.allFiltersOverlay {display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center;}
.allFiltersOverlay.open {display: flex;}
.allFiltersModal {background: #fff; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.18); width: min(860px, 95vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;}
.allFiltersModalHeader {display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--grey, #ddd); flex-shrink: 0;}
.allFiltersModalHeader h2 {margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px;}
.allFiltersCloseBtn {background: none; border: none; cursor: pointer; color: #666; display: flex; align-items: center; padding: 4px; border-radius: 8px;}
.allFiltersCloseBtn:hover {background: #f0f0f0; color: #333;}
.allFiltersModalBody {padding: 20px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 24px;}
.allFiltersSection {display: flex; flex-direction: column; gap: 10px;}
.allFiltersSectionTitle {font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin-top: 5px;}
.allFiltersCheckboxGrid {display: flex; flex-wrap: wrap; gap: 8px;}
.allFiltersCheckboxGrid label {display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; padding: 5px 10px; border: 1px solid var(--grey, #ddd); border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.allFiltersCheckboxGrid label:hover {border-color: var(--elderOrange, #f59619); background: #fffaf3;}
.allFiltersCheckboxGrid label:has(input:checked) {border-color: var(--elderOrange, #f59619); background: #fff5e6; font-weight: 600;}
.allFiltersCheckboxGrid input[type="checkbox"] {width: auto; margin: 0; accent-color: var(--elderOrange, #f59619);}
.filterSubsection, .filterSubsectionFill {display: flex; gap: 10px; justify-content: flex-start; align-items: flex-start;}
.filterSubsectionFill {flex-direction: column; gap: 20px;}

/* Complaints Slider */
.complaintsSliderWrap {display: flex; flex-direction: column; gap: 12px;}
.complaintsDirectionBtns {display: flex; gap: 8px;}
.complaintsDirectionBtn {flex: 1; padding: 8px 14px; border: 1.5px solid var(--grey, #ddd); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; color: #555;}
.complaintsDirectionBtn:hover, .complaintsDirectionBtn.active {border-color: var(--elderOrange, #f59619); background: #fffaf3;}
.complaintsSliderRow {display: flex; align-items: center; gap: 14px;}
.complaintsSlider {flex: 1; accent-color: var(--elderOrange); height: 4px; cursor: pointer;}
.complaintsSliderValue {font-size: 15px; font-weight: 700; color: var(--elderOrange); min-width: 28px; text-align: center;}
.complaintsSliderSummary {font-size: 12px; color: #888; margin-top: 2px;}
.complaintsSliderSummary span {font-weight: 700; color: var(--elderOrange);}

/* Sort Options (All Filters Popup) */
.allFiltersSortGrid {display: flex; flex-wrap: wrap; gap: 8px;}
.allFiltersSortOption {display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; padding: 5px 12px; border: 1.5px solid var(--grey, #ddd); border-radius: 8px; white-space: nowrap;}
.allFiltersSortOption:hover {border-color: var(--elderOrange, #f59619); background: #fffaf3;}
.allFiltersSortOption:has(input:checked) {border-color: var(--elderOrange, #f59619); background: #fffaf3; font-weight: 700; color: var(--elderOrange);}
.allFiltersSortOption input[type="radio"] {width: auto; margin: 0; accent-color: var(--elderOrange);}
.allFiltersModalFooter {display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--grey, #ddd); flex-shrink: 0;}

/* Range Input */
input[type="range"] {font-size: var(--fontSize); width: 12em; padding: 0; border-radius: var(--borderRadius); border: none; position: relative; background: #fff0; overflow: hidden; color: var(--orange); --thumb-height: 1.125em; --track-height: 0.225em; --track-color: #a6a6a6; --brightness-hover: 120%; --brightness-down: 95%; --clip-edges: 0.125em; border-color: #333;}
input[type="range"].win10-thumb {color: var(--orange); --thumb-height: 1.375em; --thumb-width: 1.375em; --clip-edges: 0.0125em; padding: 10px 20px; background-color: #f1f1f1; height: 40px; border-color: #333 !important; width: 100%; margin: 0; border: none;}
@media (prefers-color-scheme: dark) {
    html {background-color: #000;}
    html::before {background: radial-gradient(circle at center, #101112, #000);}
    input[type=range] {color: #f07167; --track-color: #a6a6a6;}
    input[type=range].win10-thumb {color: var(--orange);}
}
input[type=range]:active {cursor: grabbing;}
input[type=range]:disabled {filter: grayscale(1); opacity: .3; cursor: not-allowed;}
input[type=range], input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; transition: all ease .1s; height: var(--thumb-height);}
input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {position: relative;}
input[type=range]::-webkit-slider-thumb {--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px); --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px); --clip-bottom: calc(var(--thumb-height) - var(--clip-top)); --clip-further: calc(100% + 1px); --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor; width: var(--thumb-width, var(--thumb-height)); background: linear-gradient(currentColor 0 0) scroll no-repeat left center/50% calc(var(--track-height)); background-color: currentColor; box-shadow: var(--box-fill); border-radius: var(--thumb-width, var(--thumb-height)); filter: brightness(100%); clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));}
input[type=range]:hover::-webkit-slider-thumb {filter: brightness(var(--brightness-hover)); cursor: grab;}
input[type=range]:active::-webkit-slider-thumb {filter: brightness(var(--brightness-down)); cursor: grabbing;}
input[type=range]::-webkit-slider-runnable-track {background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center/100% calc(var(--track-height));}
input[type=range]:disabled::-webkit-slider-thumb {cursor: not-allowed;}
input[type=range], input[type=range]::-moz-range-thumb, input[type=range]::-moz-range-track {appearance: none; transition: all ease .1s; height: var(--thumb-height);}
input[type=range]::-moz-range-progress, input[type=range]::-moz-range-thumb, input[type=range]::-moz-range-track {background: #fff0;}
input[type=range]::-moz-range-thumb {background: currentColor; border: 0; width: var(--thumb-width, var(--thumb-height)); border-radius: var(--thumb-width, var(--thumb-height)); cursor: grab;}
input[type=range]:active::-moz-range-thumb {cursor: grabbing;}
input[type=range]::-moz-range-track {width: 100%; background: var(--track-color);}
input[type=range]::-moz-range-progress {appearance: none; background: currentColor; transition-delay: 30ms;}
input[type=range]::-moz-range-progress, input[type=range]::-moz-range-track {height: var(--track-height); border-radius: var(--track-height);}
input[type=range]::-moz-range-progress, input[type=range]::-moz-range-thumb {filter: brightness(100%);}
input[type=range]:hover::-moz-range-progress, input[type=range]:hover::-moz-range-thumb {filter: brightness(var(--brightness-hover));}
input[type=range]:active::-moz-range-progress, input[type=range]:active::-moz-range-thumb {filter: brightness(var(--brightness-down));}
input[type=range]:disabled::-moz-range-thumb {cursor: not-allowed;}

.resetBtn {padding: 10px 20px; background: var(--darkOrange); font-size: var(--fontSize); color: #fff; border-radius: var(--borderRadius); display: inline-block; margin-top: 10px;}

body.noScroll {overflow-y: hidden !important;}
input {border-color: #ddd; border-radius: 7px;}
input:focus {border: var(--darkOrangeBorder);}
.loadMask {padding-top: 1vh;}

.lds-ripple {display: inline-block; position: relative; width: 80px; height: 80px; left: 50%; margin-left: -40px;}
.lds-ripple div {position: absolute; border: 4px solid var(--secondaryColor); opacity: 1; border-radius: var(--borderRadius); animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;}
.lds-ripple div:nth-child(2) {animation-delay: -0.5s;}

/* Mobile Helpers */
.mobShow {display: none;}

@keyframes lds-ripple {
    0% {top: 36px; left: 36px; width: 0; height: 0; opacity: 0;}
    4.9% {top: 36px; left: 36px; width: 0; height: 0; opacity: 0;}
    5% {top: 36px; left: 36px; width: 0; height: 0; opacity: 1;}
    100% {top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0;}
}

@media only screen and (max-width: 1440px) {
    .mainContainer {padding-left: 40px !important; padding-right: 40px !important;}
    .searchFilterSubHead {flex-wrap: wrap;}
    .searchInputContainer {width: 300px;}
}

@media only screen and (max-width: 1200px) {
    body {height: 110vh;}
    #nearbyProviders {max-height: 100% !important;}
    .nearbyProvider .place {top: 17px;}
    #map {height: 250px; margin-top: 0px !important;}
    .third {width: 100% !important; margin-top: 0px !important; justify-content: flex-start;}
    .address {width: calc(100% - 34px) !important;}
    .mainContainer {display: flex; flex-direction: column-reverse;}
    .film {background: rgba(3,3,3,0.2) !important;}
    .searchResultsCont {flex-direction: column;}
    .searchFilterSubHead {justify-items: flex-start; align-items: flex-start;}
    .filterableOptions {overflow-x: auto; overflow-y: visible; flex-wrap: nowrap; width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch;}
    .filterableOptions .filterGroup {position: fixed; top: auto; left: auto; z-index: 1000;}
    .filterSubsection {flex-direction: column;}
    .filterSubsectionFill {max-width: 100%;}
    .searchInputValue {justify-content: space-between;}
    .searchDropdown {display: none !important;}
    .searchInputContainer {border-radius: var(--borderRadius) !important;}

    /* Mobile Helpers */
    .mobShow {display: flex;}
    .mobHide {display: none;}
}

@media only screen and (max-width: 800px) {
    /* #map {height: calc(100vh - 643px); margin-top: 20px;} */
    .mainContainer {padding-left: 20px !important; padding-right: 20px !important;}
    .logo {width: 135px !important; height: 30px;}
    #nearbyProviders {max-height: calc(100vh - 150px) !important;}
    #map, .resultsAndMap {height: calc(100vh - 150px);}

    .resultsAndMap[data-view="list"] .mapContainer {display: none;}
    .resultsAndMap[data-view="list"] .third {display: block; height: 90vh;}
    .resultsAndMap[data-view="map"] .mapContainer {display: block; height: 50vh;}
    .resultsAndMap[data-view="map"] .third {display: none;}
}

@media only screen and (max-width: 600px) {
    .searchInputValue {width: 250px;}
}

@media only screen and (max-width: 500px) {
    .nearbyProvider div {padding-left: 0px !important;}
    .nearbyProvider div i {padding-left: 0px !important;}
    .mobBook, .facilityTypeIcon {margin-right: 15px !important; text-align: left;}
    .address {width: calc(100% - 39px) !important;  text-align: left;}
    .typeLabel {width: calc(100% - 39px) !important; text-align: left;}
    .mobTop {margin-bottom: 2px !important; margin-top: 2px !important; text-align: left;} 
    .mainContainer {max-height: calc(100vh - 61px);}
    .searchInputValue {width: 150px;}
}