#installer_locator {height:100vh;width:100%;display:flex;flex-direction:column;position:relative;background-color:#f2f2f2;}
#installer_map {flex:0.3;width:100%;position:relative;border-bottom:2px solid #231f20;}



#installers {flex:0.6;width:100%;max-width:645px;background:white;z-index:3;border-bottom:0.3em solid #000;overflow:hidden;display:flex;flex-direction:column;position:relative;}
#installers_list {flex:1;overflow-y:auto;max-height:calc(100% - 60px);margin:0;padding:0;list-style:none;}
#installers  li {margin:0;line-height:1.5;position:relative;color:#231f20;font-size:clamp(1rem, 1.2vw, 1.3rem);transition:0.3s ease;padding:1rem;border-bottom:1px solid #231f20;}




#installers li a{color:#231f20}
#installer li .gStars{font-size:1rem !important}
.gStars {font-size:1.1rem !important}

.shopTop{position:relative;padding-block:1.5rem 0;display:block;}
#installers li .shopTop:after {font-weight: normal;transition: .5s ease-in-out;font-family: '1stAuto';margin-block: 0;float: right;font-size: 2rem;content: '\e911';transform: translateY(-50%) rotate(90deg);display: inline-block;
position: absolute;right: 1.5rem;top: 55%;cursor:pointer;}
#installers li.viewAble .shopTop:after  {transform: translateY(-50%) rotate(-90deg);}
#installers li.active {background-color:#fff200;border-left:5px solid #231f20;color:#231f20;padding-left:10px;transition:background-color 0.3s ease, border-left 0.3s ease;}


.store {display:block; font-size:clamp(.9rem, 5vw, 1.2rem);text-transform:capitalize;line-height:1.2;margin-bottom:0;}
.store a {letter-spacing:0.42px;font-weight:600;text-decoration:none;transition:color 0.5s ease;}
.store a:hover {color:#FF5733}
.store_distance {font-size:clamp(.9rem, 4vw, .9rem);position:absolute;top:0}

.indiv_installer{position:relative;padding-top:.5rem}
.indiv_installer p{margin:0;padding:0;font-size:clamp(.9rem, 5vw, 1rem);line-height:1.8;}
.indiv_installer ul{position:absolute;top:.7rem;right:0;cursor:pointer;font-size:inherit;display:flex;flex-direction:column;background:transparent}
.indiv_installer ul li{border:0;display:inlie-flex;align-items:center;line-height:1;margin-block:0 1rem;padding:0;font-size:clamp(.9rem, 5vw, 1rem);background:transparent}
.indiv_installer li:before{font-family:'1stAuto';font-size:1.2rem;margin-right:.2rem}
 
#installers_list .indiv_installer ul{position:absolute;top:.7rem;right:0;cursor:pointer;font-size:inherit;display:flex;flex-direction:column;background:transparent}
#installers_list .indiv_installer ul li{border:0;display:inline-flex;align-items:center;line-height:1;margin-block:0 1rem;padding:0;font-size:clamp(.9rem, 5vw, 1rem);background:transparent}
#installers_list .indiv_installer li:before{font-family:'1stAuto';font-size:1.2rem;margin-right:.2rem}

/*
.cta_links {margin:1rem 0 0 0;padding:0;display:flex;justify-content:center;list-style:none;gap:1rem;}
#installer_cards .cta_links {gap:2rem;margin-top:2rem}
.cta_links li {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin:0;border:0;line-height:1;background:transparent;border:0 !important}
#installers li a{text-decoration:none;}
.cta_links li a::before {font-family:'1stAuto';font-size:1.5rem;display:block;content:'';margin-bottom:0.1rem;text-align:center;}
.cta_links li a.ctaAPPT::before {content:'\e98a';}
.cta_links li a.ctaEST::before {content:'\e935';}
.cta_links li a.ctaDIA::before {content:'\e91d';}
.cta_links li a.world::before{content:'\e9b9';}
.cta_links li a {text-decoration:none;color:inherit;font-size:clamp(.9rem, 4vw, 1.1rem);line-height:1.2;display:block;text-align:center;}
*/

 .installer_status{font-size:clamp(.7rem, 4vw, 1rem);margin:0;}
 .installer_status span{font-weight:700}
.now_open{color:green;}
.now_closed{color:red;}
 .indiv_installer li.viewMap:before{content:'\e968'}

#installers p#shopView{margin-block:.5rem;line-height:1;display:none;}

#installers ul.shopContact{display: flex;flex-direction:column;align-content:flex-start;margin-block:1rem 0;max-height: 0;opacity: 0;overflow: hidden;transition: max-height 1s ease, opacity 1s ease;}
#installers .shopContact.show {max-height: 500px;opacity: 1;}
ul.shopContact li{border:0;margin-block:0 .5rem !important;padding:0 !important;font-size:1rem !important;line-height:1.2;border:0 !important}
ul.shopContact li ul{flex-direction:row;display:flex;flex-wrap:wrap;justify-content:flex-start;}
ul.shopContact li ul li{width:50%;}
ul.shopContact li a, #installers ul.shopContact li.viewTel span{text-decoration:underline !important;text-underline-offset: 4px;}
ul.shopContact li.viewTel a{text-decoration:none !important;}
ul.shopContact li:before{font-family:'1stAuto';font-size:1.2rem;display:inline-block;margin-bottom:0.1rem;text-align:center;margin-right:.5rem}
ul.shopContact li.shopADD:before{content:'\e968';}
ul.shopContact li.viewTel{content:'\e934';cursor:pointer;}
ul.shopContact li.viewTel:before{content:'\e934';}
ul.shopContact li.shopStatus:before{content:'\e915';}
ul.shopContact li.shopAppt:before{content:'\e98a';}
ul.shopContact li.shopEst:before{content:'\e935';}
ul.shopContact li.shopDiag:before{content:'\e91d';}

.place-box {z-index:1000;margin-bottom:0;padding:10px;}
.place-box input {width:100%;padding:10px 10px 10px 40px;font-size:16px;border:2px solid #231f20;border-radius:5px;outline:none;background:url('/gMap/images/search.svg') no-repeat left 10px center;background-size:20px;}
.place-box .h4{margin-block:0;font-size: clamp(.9rem, 5vw, 1.8rem);}
.place-box p{margin-block:.5rem 1rem;line-height:1.5;font-size: clamp(1rem, 1.5vw, 1rem);}
.view-btn {flex:1;display:flex;align-items:center;justify-content:center;padding:.8rem;font-size:1rem;border-radius:5px;cursor:pointer;transition:background-color 0.3s ease;text-align:center;}
.view-btn + .view-btn {margin-left:10px;}
.view-btn span {display: flex;align-items: center; }
.view-btn span::before {margin-right:.5rem;font-size:1.4rem;font-family:'1stAuto';  display: inline-block;vertical-align: middle;}
.list-icon:before {content:"\e970";}
.map-icon:before {content:"\e936";}


#installer_locator #viewList{height:40px;flex: none;position: absolute;right: 5rem;top: 1rem;background-color:#fff200;color:#231f20;border:2px solid #231f20;width:130px;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);}
#viewMap{float:right;background-color: transparent;color: #231f20;border: none;width: 140px;padding:.5rem 0;justify-content:right;flex:none}


.custom-select {position:relative;display:inline-block;width:100%;max-width:400px;padding-block:1rem;}
#states {width:100%;padding:10px 15px;font-size:1.2rem;color:#231f20;background-color:#f8f8f8;border:1px solid #231f20;border-radius:0.2rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none;cursor:pointer;transition:border-color 0.3s, box-shadow 0.3s;}
.custom-select::after {content:"\e911";font-family:'1stAuto';position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:1rem;color:#666;transition:transform 0.3s ease;  }
#states:hover {box-shadow:0 0 5px rgba(70, 67, 68, 0.5);  }
#states:focus {box-shadow:0 0 8px rgba(70, 67, 68, 0.8);  }
.custom-select:focus-within::after {transform:translateY(-50%) rotate(90deg);  }
#states:not(:focus) + .custom-select::after {transform:translateY(-50%) rotate(0deg);  }
#loader-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.8);display:flex;align-items:center;justify-content:center;z-index:999;}
#loader-overlay img {width:50px;height:50px;}
.fade-out {opacity:0;transition:opacity 0.5s ease-out;pointer-events:none;}
#installers ul::-webkit-scrollbar {height:12px;width:12px;background:#2d2d34;}
#installers ul::-webkit-scrollbar-thumb {background:#fff100;box-shadow:0 1px 2px rgba(0, 0, 0, 0.75);}

#custom-zoom {position:absolute;top:1rem;right:1rem;z-index:100;display:flex;flex-direction:column;background-color:rgba(255, 255, 255, 0.5);border-radius:8px;padding:0.5rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.2);border:1px solid rgba(0, 0, 0, 0.1);}
#custom-zoom button {display:flex;justify-content:center;align-items:center;width:39px;height:39px;border:none;background-color:transparent;cursor:pointer;padding:0;position:relative;overflow:visible;}
#custom-zoom button:first-of-type {margin-bottom:0}
#custom-zoom button::before {content:'';display:block;width:30px;height:30px;background-repeat:no-repeat;background-position:center;background-size:contain;position:absolute;}
#zoom-in::before {background-image:url('/gMap/images/mapPlus.svg');}
#zoom-out::before {background-image:url('/gMap/images/mapMinus.svg');}
#directory{display:none}
#directory #page_wrapper > p:first-of-type{margin-block:0 1rem;line-height:1.5}

#installer_cards {list-style:none;margin:0;padding:0 0 5em 0;clear:both}
#installer_cards > li{width:100%;border:1px solid #2d2d34;padding:2em 1em;margin:1em 0;display:inline-block;border-radius:8px;min-height:200px;background:#fff}
#installer_cards li.stateHead{box-shadow:none;background-color:#fff;color:#2d2d34;width:100%;min-height:auto;float:none;clear:both;padding:0 0 .5em 0;border-radius:0;font-weight:700;border:0;border-bottom:1px solid #2d2d34;flex: 0 0 100%;}
#installer_cards li.stateHead img{width:35px;vertical-align:middle;margin-right:.5em;}
#installer_cards li.stateHead p{font-size:clamp(.7rem, 4vw, 1.2rem);text-transform:uppercase;margin:0;padding:0}
#installer_cards li.viewMap{display:none;}
#installer_cards a{color:#231f20;text-decoration:none}


@media (min-width:767px) {
#installer_locator {max-height:calc(100vh - 5.61em);flex-direction:row-reverse;}
#installer_cards {display:flex;flex-wrap:wrap;justify-content:space-between;}
#installer_cards > li{min-height:200px;width:45%;margin:2%;min-height:410px}
#installer_cards .indiv_installer ul {position:absolute;top:.7rem;right:0;cursor:pointer;font-size:inherit;display:flex;flex-direction:column;background:transparent;}
#installer_cards .indiv_installer ul li {border:0;align-items:center;line-height:1;margin-block:0 1rem;padding:0;font-size:clamp(.9rem, 5vw, 1.2rem);background:transparent;}
#installer_cards .indiv_installer li.viewTel:before {content:'\e934';}
#installer_cards .indiv_installer li:before {font-family:'1stAuto';font-size:1.2rem;margin-right:.2rem;}
.place-box{width:38%;float:right;position:relative;}
.place-box input{padding-left:2em;width:100%}
.viewType{top:.5em;right:.5em}
.viewType a {display:block;}
#states {display:block;margin:.5em auto;}
}




@media (min-width:1024px) {
#installer_locator {flex-direction:row-reverse;}
#installer_map {flex:1;}
#custom-zoom {gap:1rem;}
#custom-zoom button {width:40px;height:40px;}
#custom-zoom button::before {width: 40px;height: 40px;}


#installers {flex:none;width:400px;}
.place-box{border-right:1px solid #2d2d34;}
#installer_cards > li {min-height:200px;width:45%;margin:1.5em 1em;min-height:320px;box-shadow:0 0 5px rgba(45,45,52,0.5);justify-content:flex-start;gap:1rem}
#dirHeader span{font-size:2em;padding:0 0 .5em 0;}
.place-box{width:100%;float:none;}
.view-switch{display:none;}
#mapControls{display:flex;flex-direction:row-reverse;gap:0;padding:2rem;background: #fff200;border: 1px solid #231f20;border-radius: 5px;width:auto;float:right;}
#mapControls .view-switch{width:20%;height:43px}
#mapControls .custom-select{padding:0;margin:0;}
#mapControls #states{margin:0;float:right;width:100%}
#viewMap{flex:none}



}

@media (min-width:1279px) {
#installer_cards > li {width:29%;min-height:305px;}

}


@media (min-width:1359px) {
.place-box label {font-size:1em;}
#installer_cards > li {min-height:290px;}
}




#installers li.highlighted {background-color:#FFFB80;border-left:4px solid #231f20;}












#installer_cards {
list-style: none;
margin: 1rem 0 0 0;
padding: 0 0 5em 0;
display: flex;
flex-wrap: wrap;
gap: 2%; /* Space between items */
justify-content: flex-start; /* Align items to the left */
  }
  
  #installer_cards > li {
width: calc(33.333% - 2%); /* Default: 3 items per row */
border: 1px solid #2d2d34;
padding: 2em 1em;
margin: 0;
display: inline-block;
border-radius: 8px;
min-height: 200px;
background: #fff;
box-sizing: border-box;
margin-bottom:3rem;
  }
  
  #installer_cards li.stateHead {
box-shadow: none;
background-color: #fff;
color: #2d2d34;
width: 100%; /* Ensures full width */
min-height: auto;
float: none;
clear: both;
padding: 0 0 0.5em 0;
border-radius: 0;
font-weight: 700;
border: 0;
border-bottom: 1px solid #2d2d34;
flex: 0 0 100%; /* Forces it to span full width in flex container */
margin-bottom:2rem;
  }
  
  #installer_cards li.stateHead img {
width: 35px;
vertical-align: middle;
margin-right: 0.5em;
  }
  
  #installer_cards li.stateHead p {
font-size: clamp(0.7rem, 4vw, 1.2rem);
text-transform: uppercase;
margin: 0;
padding: 0;
  }
  
  @media (max-width: 767px) {
/* Mobile: All list items span 100% width */
#installer_cards > li {
  width: 100%;
  min-height: auto; /* Optional: Adjust as needed for mobile */
}
  }
  
  @media (min-width: 767px) and (max-width: 1278px) {
/* Tablet: Two items per row */
#installer_cards > li {
  width: calc(50% - 2%);
  min-height: 410px;
}
  }
  
  @media (min-width: 1279px) {
/* Desktop: Three items per row */
#installer_cards > li {
  width: calc(33.333% - 2%);
  min-height: 305px;
}
  }
  
  @media (min-width: 1359px) {
#installer_cards > li {
  min-height: 290px;
  position:relative;
}
  }