:root{
  --accent:#1a73e8;
  --panel-bg: rgba(255,255,255,0.98);
}
html,body{height:100%;margin:0;font-family:Inter, Arial, Helvetica, sans-serif;-webkit-font-smoothing:antialiased;}
#map{position:absolute;top:72px;left:0;right:0;bottom:0;}

#header{
  position:fixed; top:0; left:0; right:0; z-index:14000;
  background:var(--panel-bg);
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  padding:8px 10px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  justify-content:space-between; min-height:56px;
}
.maps_left-row { display:flex; align-items:center; gap:8px; min-width:0; }
.maps_logo-wrap { flex:0 0 auto; display:flex; align-items:center; }
.maps_site-logo {
  width:150px; max-width:36vw; height:auto; display:block; border-radius:6px;
  transform-origin:center;
  animation: logo-pop .72s cubic-bezier(.2,.9,.3,1) 1;
}
@keyframes logo-pop{ 0%{transform:scale(.65);opacity:0} 60%{transform:scale(1.06);opacity:1} 100%{transform:scale(1)} }

.maps_search-wrap { flex:1; min-width:110px; display:flex; align-items:center; gap:8px; position:relative; }
#searchBox { flex:1; width:100%; }
#searchInput {
  width:100%; padding:8px 12px; border-radius:12px; border:1px solid #d8dce0; font-size:14px; box-sizing:border-box;
}
#autoList {
  position:absolute; top:44px; left:0; right:0; max-height:260px; overflow:auto; background:#fff; border-radius:8px;
  border:1px solid #e7e7e7; display:none; z-index:15000; box-shadow:0 8px 24px rgba(15,20,30,0.08);
}
.maps_acItem { padding:8px 10px; border-bottom:1px solid #f2f2f2; cursor:pointer; font-size:14px; }
.maps_acItem:hover{ background:#f3f8ff; }

.maps_controls { display:flex; align-items:center; gap:12px; flex:0 0 auto; min-width:0; }
#banner { background:var(--accent); color:#fff; padding:8px 12px; font-weight:700; border-radius:12px; font-size:13px; white-space:nowrap; }
#radiusContainer { display:flex; align-items:center; gap:8px; font-size:13px; color:#222; }
#radiusSlider{ width:140px; }

.maps_greeting-bubble {
  background:var(--accent); color:#fff; padding:6px 12px; border-radius:14px; font-weight:700; font-size:13px;
  box-shadow:0 8px 20px rgba(25,35,55,0.12); white-space:nowrap;
  transform-origin:center;
}

#listButtonWrap { position:fixed; right:12px; bottom:12px; z-index:14000; }
#listToggleBtn { width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:0; display:flex; align-items:center; justify-content:center; font-weight:800; box-shadow:0 6px 18px rgba(0,0,0,0.18); cursor:pointer; }

#listPanel { position:fixed; left:0; right:0; bottom:0; z-index:13900; pointer-events:none; }
#listCard {
  width:100%; max-width:760px; margin:0 auto; pointer-events:auto;
  background:#fff; border-top-left-radius:16px; border-top-right-radius:16px;
  box-shadow:0 -12px 30px rgba(12,18,30,0.12); padding:12px; transform:translateY(96%); transition:transform .35s ease;
}
#listCard.maps_open { transform:translateY(0%); }

#listHead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#listContent { margin-top:10px; max-height:220px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.maps_card { display:flex; gap:12px; align-items:center; padding:10px; border-radius:16px; background:#f7f8fb; min-height:84px; }
.maps_thumb { width:120px; height:88px; border-radius:16px; overflow:hidden; flex:0 0 auto; }
.maps_thumb img { width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; }

.maps_card .maps_meta { flex:1; font-size:13px; color:#222; }
.maps_card .maps_meta .maps_title { font-weight:700; margin-bottom:6px; }
.maps_card .maps_meta .maps_price { color:var(--accent); font-weight:700; margin-bottom:4px; }
.maps_card .maps_meta .maps_distance { color:#666; font-size:12px; }

@media (max-width:640px){
  #header{ padding:6px 8px; min-height:52px; }
  .maps_site-logo{ width:100px; }
  #radiusSlider{width:96px;}
  #map{ top:72px; }
  .maps_thumb{ width:84px; height:64px; }
  #listCard{ max-width:100%; padding:10px; border-radius:12px; }
  #listToggleBtn{ width:52px; height:52px; }
}

.leaflet-top.leaflet-left { top: 78px !important; }
@media(max-width:640px){ .leaflet-top.leaflet-left { top: 94px !important; } }
.maps_greeting-label {}