/* Coverage map: shared by the public "Where we deliver" page and the admin Areas page. */

.cov-map {
  position: relative; z-index: 0;            /* keeps the map's layers beneath menus and dialogs */
  background: #F1F3F4;
}
.cov-map.leaflet-container { font-family: var(--font); font-size: 0.75rem; }
/* The site caps images and drawings at their container's width. The map's own layers must not be capped. */
.cov-map .leaflet-pane svg, .cov-map .leaflet-pane canvas, .cov-map .leaflet-pane img { max-width: none; max-height: none; }
.cov-map.leaflet-container a { color: var(--ink-2); }
.cov-map .leaflet-tile-pane { filter: grayscale(1) contrast(0.88) brightness(1.08); }   /* a quiet backdrop for the orange network */
.cov-map .leaflet-control-attribution { background: rgba(255, 255, 255, 0.85); color: var(--ink-2); padding: 2px 8px; }
.cov-map .leaflet-bar { border: 1px solid var(--line-2); box-shadow: 0 1px 3px rgba(36, 40, 41, 0.14); }
.cov-map .leaflet-bar a { color: var(--ink); width: 34px; height: 34px; line-height: 34px; }
.cov-map .leaflet-bar a:hover { color: var(--ink); background: var(--paper); }
.cov-map .leaflet-interactive:focus { outline: none; }

/* Area names. Each sits on whichever side of its dot has room. */
.cov-label span {
  position: absolute; white-space: nowrap;
  font: 600 0.75rem/1.25 var(--font); color: var(--ink);
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff;
}
.cov-label.is-right span { left: var(--gap, 10px); top: 0; transform: translateY(-50%); }
.cov-label.is-left span { right: var(--gap, 10px); top: 0; transform: translateY(-50%); }
.cov-label.is-top span { left: 0; bottom: var(--gap, 10px); transform: translateX(-50%); }
.cov-label.is-bottom span { left: 0; top: var(--gap, 10px); transform: translateX(-50%); }
.cov-label.is-tr span { left: var(--diag, 7px); bottom: var(--diag, 7px); }
.cov-label.is-br span { left: var(--diag, 7px); top: var(--diag, 7px); }
.cov-label.is-tl span { right: var(--diag, 7px); bottom: var(--diag, 7px); }
.cov-label.is-bl span { right: var(--diag, 7px); top: var(--diag, 7px); }
.cov-label.is-off span { visibility: hidden; }
.cov-label.is-peek { z-index: 10000 !important; }
.cov-label.is-off.is-peek span {
  visibility: visible; background: var(--ink); color: #fff; text-shadow: none;
  padding: 4px 8px; border-radius: var(--r-s);
}
.cov-label--muted span { color: var(--ink-3); font-weight: 500; }
.cov-label--depot span { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; }

.cov-depot::after {
  content: ""; position: absolute; inset: 1px;
  background: var(--ink); border: 2.5px solid #fff; border-radius: 3px; transform: rotate(45deg);
}

/* The lines draw themselves in once, growing outwards from the middle. */
.cov-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cov-draw 0.55s ease-out forwards; }
@keyframes cov-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cov-draw { animation: none; stroke-dashoffset: 0; } }