@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');

body, html { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  }

.locator-container * {
    font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.locator-container { 
      display: flex;
    height: calc(100vh - 67px - 30px);
    min-height: 600px;
    position: relative;
    z-index: 1;
  }

/* --- Sidebar --- */
#sidebar { width: 380px; display: flex; flex-direction: column; padding-right: 20px; }
.sidebar-header { }
.sidebar-header input { width: 100%; padding: 0.75rem; border: 1px solid #ced4da; border-radius: 0.3rem; box-sizing: border-box; font-size: 14px; height: 42px; }
.sidebar-header button { width: 100%; padding: 0.75rem; margin-top: 0.5rem; background-color: #007bff; color: white; border: none; border-radius: 0.3rem; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; }
.sidebar-header button:hover { background-color: #0056b3; }

/* --- Location List --- */
#location-list { overflow-y: auto; flex-grow: 1; margin-right: -15px; padding-right: 15px; }
.location-card { padding: 1rem; border-bottom: 1px solid #e9ecef; cursor: pointer; display: flex; gap: 9px; transition: all 0.3s ease; margin: 9px 0; border: 1px solid #dcdcdc; border-radius: 6px; }
.location-card:hover { background-color: #e9ecef; }
.location-card.active { box-shadow: inset 0px 0 0 1px #0196cf; border-color: #0196cf; }
.location-card .index { font-weight: bold; color: #fff; flex-shrink: 0; height: 26px; width: 26px; display: flex; align-items: center; justify-content: center; background: #0196cf; font-size: 12px; border-radius: 100%; }
.location-card .details h3 { font-size: 1.1rem; color: #0196cf; margin: 0; }
.location-card .details p { margin: 0; font-size: 13px; color: #000; }
.location-card.hidden { display: none; }
.location-card .details p + p { }
.location-card .details { width: 100%; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 0 0 5px; }

/* --- Map --- */
#map { flex-grow: 1; border-radius: 10px; }

/* Custom Marker Icon Style */
.leaflet-div-icon { width: 25px !important; height: auto !important; background: transparent; border: none; color: #0196cf; }
.leaflet-div-icon * { fill: currentColor; transition: all 0.3s ease; }
.leaflet-div-icon  span { position: absolute; transform: translate(-50%, -50%); z-index: 1; line-height: 1; top: 50%; left: 50%; color: #fff; font-weight: 700; font-size: 14px; margin-top: -4px; }
.pin-wrapper { position: relative; z-index: 1; line-height: 0; }
.leaflet-div-icon:hover * { fill: #006085; }

/* Infobox / Popup Style */

/* --- Styling for the Sidebar Header --- */
.sidebar-header { padding: 0; border-bottom: 0; }
#search-title { margin-top: 0; margin-bottom: 1rem; font-size: 1.5rem; }
.search-controls { display: flex; gap: 0.5rem; /* Space between input and button */ }
.search-controls input { flex-grow: 1; /* Input takes up available space */ }

/* Update button styling to match screenshot */
#update-btn:hover { background-color: #005f83; }

/* "Use my current location" link styling */
#use-location-btn { display: block; margin-top: 7px; color: #0196cf; text-decoration: none; font-weight: 400; font-size: 14px; }
#use-location-btn:hover { text-decoration: underline; }
.radius-control { margin-top: 1rem; display: none; }
.radius-control label { margin-right: 0.5rem; font-weight: 500; }
#radius-select { padding: 0.5rem; border-radius: 0.3rem; border: 1px solid #ced4da; }
a#use-location-btn.disabled { opacity: 0.5; pointer-events: none; }
.autocomplete-suggestions { position: absolute; top: 100%; background: #fff; z-index: 1; margin-top: -3px; width:100%; }
.autocomplete-suggestions ul { padding: 0; margin: 0; list-style: none; border: 1px solid #bebebe; width:100%; border-top: 0; }
.autocomplete-suggestions ul li { padding: 5px 15px; transition: all 0.3s ease; font-size: 13px; background: #fff; cursor: pointer; margin:0; color:#000; }
.autocomplete-suggestions ul li + li { border-top: 1px solid #d9d9d9; }
.autocomplete-suggestions ul li:hover { background: #0196cf; color: #fff; }
.search-box-wrapper { width: calc(100% - 81px); position: relative; }
#update-btn { background-color: #0196cf; /* Blue color */ color: white; border: none; border-radius: 0.3rem; font-size: 14px; cursor: pointer; transition: background-color 0.2s; width: 72px; height: 42px; margin: 0; }
.search-controls { flex-wrap: wrap; }
.card-buttons { display: flex; flex-wrap: wrap; gap: 15px; }
.card-buttons > a { flex: 1; padding: 8px 15px; border: 2px solid #0196cf; text-align: center; color: #0196cf; text-decoration: none; border-radius: 4px; margin-top: 9px; transition: all 0.3s ease; background: #fff; font-size: 14px; font-weight: 500; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.card-buttons > a svg { width: 24px; }
.card-buttons > a svg path { fill: currentColor; }
.card-buttons > a:hover { background: #0196cf; color: #fff; }
.search-title-wrapper { padding: 0 0 10px; }
.search-title-wrapper h2#search-title { display: inline; margin: 0; }
div#reset { display: inline-block;  margin-left: 5px; cursor: pointer; }
div#reset svg { width: 20px; height: 20px; }
.leaflet-popup-content { margin: 0 !important; min-width: 100%; }
.leaflet-popup-content .infobox-details { padding: 12px 15px 19px; line-height: normal; font-size: 14px; display: flex; flex-direction: column; gap: 5px; }
.infobox-details h4 { margin: 0; color: #0196cf; font-size: 20px; }
.infobox-inner { line-height: 0; width: 100%; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border: none; }
.leaflet-popup-content-wrapper { width: 100%; padding: 0 !important; }
.infobox-inner img#image_url { width: 100%; }
.leaflet-popup-content .infobox-details a { margin: 4px 0 0 !important; }
.leaflet-container a.leaflet-popup-close-button { background: #fff !important; border-radius: 0 0 0px 11px; }
.location-card:last-child { margin-bottom: 0; }
.leaflet-bottom.leaflet-right { display: none; }
  .card-buttons>a span {
    display: block;
    position: relative;
    top: 2px;
}
.sidebar-header input::placeholder {
    color: #5b5b5b;
}

.sidebar-header input {
    border-color: #bebebe;
}

.infobox-inner div#address {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding-top: 4px;
    font-weight: 500;
    flex-wrap: wrap;
}

.infobox-inner div#address svg {
    height: auto;
    width: 23px;
}

.infobox-inner div#address svg + div {
    width: calc(100% - 23px - 10px);
}
  
  @media(max-width: 991px){
     #sidebar { width: 280px; }
     .locator-container { min-height: 470px; }
     .search-title-wrapper h2#search-title { font-size: 20px; }
     div#reset svg { }
     div#reset { vertical-align: middle; }
}
@media(max-width:767px){
    .locator-container{height:auto;min-height:auto;flex-direction:column-reverse;}
    #map{height:370px;}
    #sidebar{width:100%;padding:30px 0 0;}
    #location-list{display:flex;flex-wrap:wrap;padding:0;gap:15px;margin:0;padding:20px 0 0;}
    .location-card{width:calc(50% - 8px);margin:0;}
}
  @media(max-width:550px) {
    .location-card { width: 100%; }
}