/* Service-area map. area.js inserts leaflet.css (cdnjs 1.9.4) just before this file when the map
   nears the viewport. Until then the empty box holds the map's exact size, so nothing shifts. */
[data-np-area]:empty { height: clamp(340px, 52vw, 560px); background: #F2F2F2; border-top: 3px solid #FF2D7A; }
.np-area { position: relative; }
.np-area-map {
  height: clamp(340px, 52vw, 560px);
  background: #F2F2F2;
  border-top: 3px solid #FF2D7A;
  font-family: 'Circular Std', 'Circular', system-ui, sans-serif;
}
.np-area .leaflet-container { font-family: inherit; background: #F2F2F2; }
.np-area .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .8); }
.np-area .leaflet-control-zoom a { color: #111111; }

.np-area-label { white-space: nowrap; pointer-events: none; }
.np-area-label span {
  display: inline-block; transform: translate(-50%, -50%);
  font-weight: 700; font-size: 12px; letter-spacing: -.01em; line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}
.np-area-label.in span { color: #111111; }
.np-area-label.out span { color: #6B6B6B; font-weight: 500; }
.np-area-label.zone-name span { color: #FF2D7A; font-weight: 900; font-size: 14px; }
/* Zoomed out, the eleven village names crowd each other; the pink shape carries one name instead. */
.np-area.np-area-far .np-area-label.in { display: none; }
.np-area:not(.np-area-far) .np-area-label.zone-name { display: none; }

.np-area-views {
  position: absolute; z-index: 500; top: 14px; left: 50%; transform: translateX(-50%);
  display: inline-flex; background: #fff; border: 1px solid rgba(20, 20, 20, .12);
  border-radius: 999px; padding: 4px; box-shadow: 0 6px 20px rgba(20, 20, 20, .12);
}
.np-area-views button {
  font: 700 .8rem/1 'Circular Std', 'Circular', system-ui, sans-serif;
  border: 0; background: none; color: #141414; padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.np-area-views button[aria-pressed="true"] { background: #141414; color: #fff; }
.np-area-views button:focus-visible { outline: 2px solid #FF2D7A; outline-offset: 2px; }
/* The live base sets img{max-width:100%}, which breaks Leaflet's tile grid (seams and offset tiles). */
.np-area img { max-width: none !important; }