/* =========================================================
   LOCATION — Pixel perfect + LEFT LIST ALWAYS VISIBLE
   (No class changes, no inline styles)
   Paste this AFTER your current location CSS
   ========================================================= */

.location-section{ padding:56px 0; background:#f5f5f5; }
.location-section .hl-container{ max-width:1240px; margin:0 auto; }

/* ---------- Intro ---------- */
.location-intro{ max-width:920px; }
.location-intro__kicker{
  display:flex; 
  align-items:center; 
  gap:10px;
  font-size:20px; 
  font-weight:700; 
  letter-spacing:.02em;
  margin:0 0 14px !important;
}
.location-btn-wrappers-c {
    display: flex;
    align-items: center;
	width: fit-content;
    gap: 10px;
}
.lcoation-phone-icon img {
    width: 14px;
}
.lcoation-phone-icon  a {
    color: #000 !important;
    text-decoration: none;
    font-size: 15px;
}
.loc-more {
    display: flex;
    align-items: center;
    gap: 20px;
}
.location-intro__icon{ display:inline-flex; align-items:center; line-height:1; }
.location-intro__icon img{ width:24px; height:auto; display:block; }
.location-intro__title{
  font-size:32px; 
  line-height:1.05;
  margin:0 0 14px !important; 
  font-weight:700;
}
.location-intro__highlight{ position:relative; display:inline-block;color:#DE232A; }
.location-intro__highlight::after{
  content:""; position:absolute; left:0; right:0;
  height:2px; bottom:-6px; background:#DE232A; border-radius:99px;
}
.location-intro__desc{
  margin:0 0 26px !important;
  font-size:18px; line-height:1.55; color:#1a1a1a !important;
  max-width:760px;
}

/* ---------- Top red bar ---------- */
.location-trust-bar-main-wrapper{
	max-width: 1240px;
    margin: 0 auto;
    border: 2px solid #b9b9b9;
    border-radius: 14px;
}
.location-trust-bar{ margin-top:0px; }
.lcoation-trust-bar-wrap{
  background:#DE232A;
  color:#fff;
  border:2px solid #DE232A;
  border-radius:12px 12px 0 0;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:14px;
}
.location-trust-bar__icon{ display:inline-flex; align-items:center; line-height:1; }
.location-trust-bar__icon img{ width:16px; height:auto; display:block; }
.location-trust-bar__text{
	    font-weight: 700;
    font-size: 13px;
}
/* ---------- Whole card under red bar ---------- */
.locator-card{
  overflow:hidden;
  background:#DE232A;
  border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Big heading inside card */
.search-zip-code-wrap {
    padding: 27px 22px 27px;
    border-bottom: 1px solid #DE232A;
	background:#000;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.search-zip-code-wrap-text-main{
  display:block;
  font-size:30px;
  font-weight:bold;
  line-height:1.25;
  color:#fff;
}
.search-zip-code-wrap-text-main span{ color:#DE232A; }

/* ---------- Search row ---------- */
.locator-header{
  border:none !important;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  margin-top: -10px;
  background:#fff !important;
  padding:18px 22px !important;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap;
  border-bottom:1px solid #878787!important;
}
.locator-header__label{
  min-width:130px;
  font-weight:800;
  font-size:14px;
  color:#111;
  white-space:nowrap;
  margin:0 !important;
}
.locator-header__inputwrap{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
  min-width:0;
}
#searchBox{
  height:52px;
    border: 1px solid #8c8989 !important;
    border-radius: 5px !important;
  padding:0 16px !important;
  font-size:14px;
	width:100% !important;
	background:#fff;
}
#searchBox::placeholder{
  color: #111;
 font-weight:800;
}
#searchBtn{
  height:52px;
  padding:0 22px !important;
  border-radius:12px !important;
  border:2px solid #DE232A !important;
  background:#DE232A !important;
  color:#fff !important;
  font-weight:700 !important;
}
#searchBtn:hover{
	border-color:  #DE232A !important;
    background: #fff !important;
    color: #DE232A !important;
}
#clearFilterBtn{
  height:52px;
  padding:0 22px !important;
  border-radius:12px !important;
  border:2px solid #DE232A !important;
  background:#fff !important;
  color:#DE232A !important;
  font-weight:700 !important;
}
#clearFilterBtn:hover{
    background: #DE232A  !important;
    color: #fff !important;
}
.btn-directions:hover{
    background: #DE232A  !important;
    color: #fff !important;
}
.btn-select-location:hover{
	border: 2px solid #DE232A !important;
    background: #fff !important;
    color: #DE232A !important;
}
/* IMPORTANT: list/map toggle should NEVER show */
.locator-toggle{ display:none !important; }

/* ---------- Map area layout (2 columns always) ---------- */
.locator{
  display:flex !important;
  gap:0px;
  border:none !important;
  border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  background:#fff !important;
  height:660px !important;
  align-items:stretch;
}

/* Left list always visible (never overlay, never hide) */
.locator__left{
width: 380px !important;
    flex: 0 0 380px !important;
    background: #efefef;
    border: none;
    overflow: auto;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
	padding:20px 10px;
}
	
.locator__left::-webkit-scrollbar{
  width: 10px;
}

.locator__left::-webkit-scrollbar-track{
  background: #efefef;
}

.locator__left::-webkit-scrollbar-thumb{
background: #7f7f7f;
  border-radius: 10px;
  border: 2px solid #efefef;
}

.locator__left::-webkit-scrollbar-corner{
  background: #efefef;
}
/* Right map column */
.locator__right{
  flex:1 1 auto !important;
  min-width:0;
}
.map{
  width:100% !important;
  height:100% !important;
  border-radius:12px !important;
  overflow:hidden;
}
.locator__right .map{
	border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
.leaflet-control-attribution {
	display: none;
}
/* ---------- List item styling ---------- */
.locations_detail_wrap{
  border-radius:0 !important;
	border:2px solid transparent !important;
  padding:20px !important;
  margin:0 0 18px !important;
  box-shadow:none !important;
  background:transparent !important;
  cursor:pointer;
}
.locations_detail_wrap:last-child{ margin-bottom:0 !important; }

.locations_detail h4{
  margin:0 0 10px !important;
  font-size:18px;
  font-weight:bold;
  color:#111;
}
.btn-select-location {
    background: #DE232A;
    font-size: 12px;
    font-weight: bold;
    border-radius: 7px;
	border:2px solid #DE232A;
}
.locations_detail p{
  margin:0 0 8px !important;
  font-size:14px;
  color:#111;
  line-height:1.35;
}

.loc-more {
    border-bottom: 1px solid #111!important;
    padding-top: 14px !important;
    margin-top: 12px !important;
    padding-bottom: 25px;
}
.locations_detail_wrap.active{
	border: 2px solid #DE232A !important;
	border-radius:14px !important;
}
.btn-directions {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-top: 0;
    padding: 10px 12px !important;
    border: 2px solid #DE232A !important;
    color: #DE232A !important;
    border-radius: 7px !important;
    font-weight: 700 !important;
    background: #fff !important;
    text-decoration: none !important;
}
.dealer-website-link a{ font-size:14px; }

/* ---------- Responsive (still always shows list, just stacked) ---------- */
@media (max-width: 900px){
  .location-section{ padding:38px 0; }
  .location-intro__title{ font-size:23px; }
  .search-zip-code-wrap-text-main{ font-size:15px; }
.location-intro__kicker {
    font-size: 15px !important;

}
	.lcoation-trust-bar-wrap {

    font-size: 11px;
}
	.locator-header__inputwrap {
    display: flex;
    flex-direction: column;
}
	.location-intro__desc {

    font-size: 15px;

}
	
	.location-intro__icon img {
    width: 18px;

}
  .locator-header{ flex-wrap:wrap; gap:12px; }
  .locator-header__label{ min-width:100%; }

  /* Stacked on mobile (list still visible, not hidden) */
  .locator{
    flex-direction:column !important;
    height:auto !important;
    padding:14px !important;
   gap: 15px;
  }
  .locator__left{
    width:100% !important;
    flex:0 0 auto !important;
    max-height:420px !important;
    box-shadow:none !important;
	
  }

  .locator__right{
    height:420px !important;
  }
  .map{
    min-height:420px !important;
  }
	.evanston-ready-oil-changereviews-card{
		flex: 0 0 100% !important;
	}
	.evanston-ready-oil-changereviews-section{
		padding: 3rem 0px !important;
	}
	.evanston-ready-oil-changereviews-inner .evanston-ready-oil-changereviews-desc{
		font-size:13px !important;
	}
	.evanston-ready-oil-changereviews-main-heading {
		font-size:25px !important;
		margin-bottom:10px !important;
	}
.location-section:before {
    top: 0px !important;
	height: 188px !important;
	}
	.evanston-customers-review-content p{
		font-size: 13px;
	}
	.location-trust-bar-main-wrapper{
		border:none !important;
	}
	.lcoation-trust-bar-wrap{
		border:none;
		padding-bottom:24px;
	}
	.locator-card {
        border-top: none !important;
        margin-top: -10px;
        background: transparent;
        border: 1px solid #929292ee;
	}
	.locator__right .map {
	border-radius:0px !important;	
	}
	.jw-trust__title{
		    font-size: 15px;
	}
	.location-intro__highlight {
		line-height: 1.5;
	}
	.location-intro__highlight::after{
		bottom: 0px;
	}
}