.filterMapContainer { 
  background-color: #fff; 
  padding: 1rem; 
  border-radius: 30px;
}
.filtLocations { 
  color: #1C78CA; 
  font-family: "Work Sans", sans-serif; 
  margin-bottom: .8rem; 
  display: block; 
}
.locationButton { 
  border-radius: 50px !important; 
  color: #fff !important; 
  padding-top: 0 !important; 
  padding-bottom: 0 !important; 
  min-width: 127px !important;
  border: 0 !important;
}
.specialtyInputLocation { 
  border-radius: 50px; 
  padding-left: 20px; 
  margin-right: 10px; 
  border: 0px; 
  color: #464F5B; 
  min-height: 45px; 
  width: 400px;  
  appearance: none; 
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none; /* Firefox */
  background: url('/wp-content/plugins/kyruus-token-status/assets/arrowSelectLocations.png') no-repeat right center #F7F9FA;
  background-position: calc(100% - 1.1rem) center !important;
  padding-right: 2rem; 
}
.searchInputLocation { 
  border-radius: 50px !important; 
  padding-left: 20px !important; 
  margin-right: 10px !important;  
  border: 0px !important; 
  background-color: #F7F9FA !important; 
  color: #464F5B !important; 
  min-height: 45px !important; 
  width: 400px !important; 
}
.kyruus-map-block { 
  display: grid; 
  gap: 12px; 
  border-radius: 30px; 
}
.titleBlock { 
  padding-left: 2rem;
 }
.kyruus-map-filters { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0rem; 
  padding-top: 2rem; 
  padding-left: 2rem; 
}
.kyruus-filter--specialty { 
  flex: 0 0 40%; 
  max-width: 36%;
}
@media (max-width: 768px) {
  .kyruus-filter--specialty,
  .kyruus-filter--search,
  .kyruus-filter--location-type {
    display: block !important;
    /*flex: 0 0 100%;*/
  }
}
.kyruus-filter--search { 
  flex: 0 0 60%; 
}
.kyruus-filter--location-type { 
  flex: 0 0 100%; 
  padding-top: 4rem; 
  display: flex;
  align-items: flex-start;   
  gap: 1rem; 
  flex-wrap: nowrap;
  padding-bottom: 4rem;
}
.kyruus-filter--location-type .filtLocations {
  flex: 0 0 auto; 
  margin: 0;
}
.kyruus-search-box { 
  display: flex; 
  gap: 6px; 
}
.kyruus-type-buttons {
  display: flex;
  flex-wrap: wrap; 
  gap: 1rem;
}
.kyruus-type-buttons button.active { 
  background-color: #F7F9FA;
  border-radius: 30px;
}
.kyruus-map-canvas { 
  width: 100%; 
  height: 420px; 
  border: 0; 
  border-radius: 30px; 
  width: 97.5%;
  margin: 0 auto;
  margin-bottom: 1rem;
}
.kyruus-locations-list { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 2.5rem;
  margin-top: 2.5rem; 
}
.kyruus-card { 
  background: #fff; 
  border: 0px solid #e5e7eb; 
  border-radius: 30px; 
  padding: 10px; 
  padding: 1.5rem;
  padding-bottom: 3rem;
}
.kyruus-pagination { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 10px; 
}
@media (max-width: 900px){
  .kyruus-map-filters { grid-template-columns: 1fr; }
  .kyruus-locations-list { grid-template-columns: 1fr; }
}
.locationCardTitle {
  text-transform: capitalize;
  color: #1C78CA;
  font-family: "Work Sans", sans-serif;
  margin-top: 2rem;
}
.address-line {
  display: flex;
  align-items: center; 
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem; 
}
.address-icon, .phone-icon, .getDirectionsIcon {
  width: 32px;  
  flex-shrink: 0; 
}
.address-text, .phone-text {
  display: inline-block;
}
.phone-line {
  display: flex;
  align-items: center;
  gap: 1rem; 
  padding-bottom: 1rem;
}

.directions-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
}

.directions-link a {
  color: #0066cc; 
  text-decoration: none;
  font-weight: 500;
}

.directions-link a:hover {
  text-decoration: underline;
}
.loc-image {
  position: relative;
  width: 100%;               
  max-width: 352px;          
  aspect-ratio: 352 / 235;   
  overflow: hidden;
  border-radius: 8px;        
  background-color: #f5f5f5;
  padding-bottom: 1rem; 
  margin: 0 auto;
}
.loc-image img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}
.locationCardTitle, .address-line, .phone-line, .directions-link, .loc-buttons {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
.btn-view, .btn-save {
  width: 100%;
  border-radius: 50px;
  border: 0 !important;
  text-transform: lowercase;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  margin-top: 18px !important;
  font-weight: 700;
}
.kyruus-infowindow {
  font-weight: normal;
}
.btn-loadmore {
  border-radius: 50px;
  border: 0 !important;
  text-transform: lowercase;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  margin-top: 85px !important;
  color: #fff;
  min-width: 150px !important;
}
.btn-loadmore:hover, .btn-view:hover {
  cursor: pointer;
} 

.kyruus-type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kyruus-type-buttons button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 0px solid #ccc;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  width: 124px; 
  text-align: center;
  transition: all 0.2s ease;
  font-size: .8rem;
  min-height: 117px;
}

.kyruus-type-buttons button img {
  width: 32px;  
  height: 32px;
  margin-bottom: 6px;
}

.kyruus-type-buttons button:hover {
  background: #f0f8ff;
  border-color: #0073e6;
}

/* RESPONSIVE MOBILE STYLES HERE */

@media (max-width: 1024px) {
  .kyruus-map-filters {
    flex-direction: column;
    align-items: stretch;
    padding-left: 0; 
  }

  .kyruus-filter--specialty,
  .kyruus-filter--search,
  .kyruus-filter--location-type {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .kyruus-map-canvas {
    width: 100%;
    height: 300px;
  }

  .kyruus-locations-list {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  .kyruus-type-buttons {
    justify-content: center;
    gap: 8px;
    flex-direction: column;
    gap: 12px;
    width: 100%; 
  }

  .kyruus-type-buttons button {
    flex-direction: row;      
    justify-content: flex-start; 
    align-items: center;        
    width: 100%;                
    min-height: 56px;           
    padding: 12px 16px;
    font-size: 1rem;
  }

  .kyruus-type-buttons button img {
    width: 28px;
    height: 28px;
    margin: 0 12px 0 0; 
  }
  .kyruus-type-buttons button span {
    flex-grow: 1;       
    text-align: left;   
  }
  .kyruus-filter--search {
    margin-top: 2rem;
  }

  .kyruus-search-box {
    display: block !important;   
  }
  .locationButton {
    margin-top: 2rem;
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
    width: 100%;
  }
  .filtLocations {
    margin-bottom: 1rem !important;
  }
  .kyruus-card {
    padding-top: 2rem  !important;
  }
  .specialtyInputLocation, .searchInputLocation {
    width: 100% !important;
  }
  .btn-loadmore {
    margin-top: 20px !important;
  }


  /* CSS ADJUSTMENTS FOR SELECT INPUT OF THE TABS MODULE, THAT WAS MOVED ON TOP FOR MOBILE, AND MOVED BACK TO ITS ORIGINAL POS INSIDE THE 'LOCATIONS TYPE' PAGES */
  .locationTabs > .cc-tabs__dropdown {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-left: 0 !important;
    background-color: #fff !important;
    color: #9262AC !important;
    font-weight: 700 !important;
    width: auto !important;
    border-color: #9262AC !important;
  }
 /* END CSS ADJUSTMENTS FOR SELECT INPUT OF THE TABS MODULE, THAT WAS MOVED ON TOP FOR MOBILE, AND MOVED BACK TO ITS ORIGINAL POS INSIDE THE 'LOCATIONS TYPE' PAGES */

}


/* ADJUSTMENT OF POPUP MAP DIMENTIONS FOR MOBILE LOCATIONS MAP */
@media (max-width: 1024px) and (orientation: portrait) {
  .gm-style-iw-c {
    width: 75vw !important;
    max-width: 75vw !important;
    max-height: 30vh !important;
  }

  .gm-style-iw-d {
    max-height: 30vh !important;
    overflow-y: auto !important;
  }
}
/* ADJUSTMENT OF POPUP MAP DIMENTIONS FOR WIDESCREEN LOCATIONS MAP */
@media (max-width: 1024px) and (orientation: landscape) {
  .gm-style-iw-c {
    width: 80vw !important;
    max-width: 80vw !important;
    max-height: 60vh !important;  
  }

  .gm-style-iw-d {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

}



/* END MOBILE STYLES HERE */

.locationCardTitle > a {
  text-decoration: none;
}
.proximity-info {
  padding-top: 1rem;
  padding-left: 1rem;
}
.proximity-message, 
.no-results-message {
  padding-left: 1rem;
}