/* Stores map (/map). Ported from the "Ewasila Map.html" mockup; everything is
   scoped under .map-screen so nothing leaks into the shared navbar/footer. */
body{margin:0;background:#f6f7f9}
.map-screen{height:100vh;height:100dvh;display:flex;flex-direction:column}
.map-screen *{box-sizing:border-box}

.layout{flex:1;min-height:0;display:grid;grid-template-columns:360px minmax(0,1fr);font-family:Inter,system-ui,sans-serif;color:#111827;-webkit-font-smoothing:antialiased}
.layout button,.layout input{font-family:inherit}
.layout [hidden]{display:none!important}
.layout aside{background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;min-height:0}
.ahead{padding:20px 20px 16px;border-bottom:1px solid #eef0f3;display:flex;flex-direction:column;gap:14px}
.ahead h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.sub{margin:4px 0 0;font-size:13px;color:#6b7280}
.search{display:flex;align-items:center;gap:8px;border:1px solid #e5e7eb;border-radius:8px;padding:0 12px;height:40px;color:#9ca3af}
.search:focus-within{border-color:#2b5ba8}
.search input{border:0;outline:0;flex:1;font-size:14px;color:#111827;background:transparent;min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:500;color:#4b5563;cursor:pointer}
.chip:hover{border-color:#c7d4ea}
.chip.on{background:#2b5ba8;border-color:#2b5ba8;color:#fff}
.ascroll{flex:1;overflow-y:auto;min-height:0}
.sec{padding:16px 20px 8px;font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center}
.sec button{border:0;background:none;color:#2b5ba8;font-size:12px;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0;padding:0}
.govs{display:flex;flex-direction:column;padding:0 12px}
.gov{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:8px;padding:9px 8px;cursor:pointer;text-align:left;font-size:14px;color:#374151;width:100%}
.gov:hover{background:#f3f6fb}
.gov.on{background:#e8eefa;color:#2b5ba8;font-weight:600}
.gov .n{margin-left:auto;font-size:12px;color:#6b7280;font-variant-numeric:tabular-nums}
.gov.on .n{color:#2b5ba8}
.gov .sw{width:10px;height:10px;border-radius:3px;border:1.5px solid #2b5ba8;background:rgba(43,91,168,.12);flex-shrink:0}
.stores{display:flex;flex-direction:column;padding:0 12px 20px}
.store{display:flex;gap:12px;align-items:center;border:0;background:transparent;border-radius:8px;padding:10px 8px;cursor:pointer;text-align:left;width:100%}
.store:hover{background:#f3f6fb}
.store .ic{width:36px;height:36px;border-radius:8px;background:#e8eefa;color:#2b5ba8;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.store .tx{min-width:0}
.store .t{font-size:14px;font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store .m{font-size:12px;color:#6b7280;margin-top:2px}
.empty{padding:24px 20px;font-size:13px;color:#6b7280}
.empty button{border:1px solid #2b5ba8;background:#fff;color:#2b5ba8;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;margin-left:6px}

.mapwrap{position:relative;min-height:0}
#map{position:absolute;inset:0;background:#cfe0f2}

.mapwrap .leaflet-container{font-family:Inter,system-ui,sans-serif}
.mapwrap .leaflet-control-layers{border:none!important;border-radius:10px!important;box-shadow:0 2px 8px rgba(0,0,0,.15)!important;padding:6px 10px!important;font-size:13px}
.mapwrap .leaflet-control-layers-base label{display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer}
.ctrl{position:absolute;top:16px;left:16px;right:60px;z-index:500;display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none}
.ctrl>*{pointer-events:auto}
.pill{background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(17,24,39,.08);display:flex;align-items:center;gap:8px;color:#111827}
.pill button{border:0;background:none;color:#6b7280;cursor:pointer;padding:0;font-size:13px}
.pill button:hover{color:#111827}
.pill.near{cursor:pointer}
.pill.near:hover{border-color:#c7d4ea}
.pill.near.on{background:#2b5ba8;border-color:#2b5ba8;color:#fff}
.pill.near:disabled{opacity:.6;cursor:default}
.pill.msg{font-weight:500;color:#4b5563}
.legend{position:absolute;bottom:28px;right:12px;z-index:500;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;font-size:12px;color:#4b5563;box-shadow:0 2px 8px rgba(17,24,39,.08);display:flex;flex-direction:column;gap:6px}
.legend div{display:flex;align-items:center;gap:8px}
.lg-gov{width:14px;height:10px;border:1.5px solid #2b5ba8;background:rgba(43,91,168,.1);border-radius:2px}
.lg-store{width:14px;height:14px;border-radius:50%;background:#2b5ba8;border:2px solid #fff;box-shadow:0 0 0 1px #c7d4ea}

.pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#2b5ba8;border:2px solid #fff;box-shadow:0 2px 6px rgba(17,24,39,.3);display:flex;align-items:center;justify-content:center}
.pin i{transform:rotate(45deg);color:#fff;font-size:12px}
.pin.hot{background:#1e4585;transform:rotate(-45deg) scale(1.2)}
.cl{border-radius:50%;background:rgba(43,91,168,.18);display:flex;align-items:center;justify-content:center}
.cl span{border-radius:50%;background:#2b5ba8;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(17,24,39,.25);font-variant-numeric:tabular-nums}
.glabel{background:transparent;border:0;box-shadow:none;color:#1f3a66;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.08em;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff;padding:0;white-space:nowrap}
.glabel::before{display:none}
.mapwrap .leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 8px 24px rgba(17,24,39,.15)}
.mapwrap .leaflet-popup-content{margin:14px 16px;font-size:13px;line-height:1.4;min-width:200px}
.pp h3{margin:0;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.pp .m{color:#6b7280;margin:3px 0 12px}
.pp a.btn{display:inline-flex;align-items:center;gap:6px;background:#2b5ba8;color:#fff;border-radius:8px;padding:7px 12px;font-weight:600;font-size:12px;text-decoration:none}
.pp a.btn:hover{background:#1e4585}

@media (max-width:860px){
  /* Map on top at 60vh, list below at its natural height; the page scrolls. */
  .map-screen{height:auto}
  .layout{flex:none;grid-template-columns:1fr;grid-template-rows:60vh auto}
  .mapwrap{order:-1}
  .layout aside{border-right:0;border-top:1px solid #e5e7eb}
}