.coverage-map-shell {
  position: relative;
  width: 100%;
  height: 510px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(36, 39, 36, .08);
  border-radius: 20px;
  background: #e8e7df;
}

#coverage-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#map-placeholder {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 28px 158px;
  text-align: center;
  color: var(--ink, #242724);
  background: radial-gradient(ellipse at 25% 30%, rgba(172, 195, 178, .48), transparent 55%),
    repeating-linear-gradient(25deg, transparent 0 76px, rgba(247, 247, 242, .45) 77px 79px, transparent 80px 160px),
    #e8e7df;
}

#map-placeholder[hidden] { display: none; }
#map-placeholder > svg { width: 48px; height: 48px; color: var(--accent, #da3832); }
#map-placeholder h3 { margin: 0; font-size: clamp(20px, 3vw, 27px); letter-spacing: -.03em; }
#map-placeholder p { max-width: 365px; margin: 0; color: #586158; font-size: 14px; line-height: 1.6; }

#load-map {
  min-height: 44px;
  margin-top: 5px;
  padding: 12px 22px;
  border: 0;
  border-radius: 9px;
  background: var(--ink, #242724);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#load-map:disabled { opacity: .65; cursor: wait; }
.coverage-map-shell.is-map-loading #load-map::before {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 9px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  content: '';
  animation: coverage-spinner .85s linear infinite;
}

.map-location-card {
  position: absolute;
  z-index: 4;
  left: 22px;
  bottom: 28px;
  width: min(288px, calc(100% - 100px));
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 14px;
  background: rgba(247, 247, 242, .96);
  color: var(--ink, #242724);
  box-shadow: 0 8px 28px rgba(38, 53, 43, .09);
  backdrop-filter: blur(12px);
}

.map-location-card > .eyebrow { margin: 0 0 8px; font-size: 9px; letter-spacing: .14em; }
#map-city-name { margin: 0; font-size: 25px; font-weight: 500; line-height: 1.18; letter-spacing: -.045em; }
#map-city-region { margin: 6px 0 13px; color: var(--muted, #697169); font-size: 12px; }
.map-location-card a { font-size: 11px; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.map-location-card a + a { margin-left: 10px; }
#map-city-page { color: var(--accent, #da3832); }
#map-city-directions { color: var(--ink, #242724); }

.coverage-map-toolbar {
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#map-toggle-3d,
#map-reset {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(36, 39, 36, .09);
  border-radius: 9px;
  background: rgba(247, 247, 242, .97);
  color: var(--ink, #242724);
  box-shadow: 0 3px 12px rgba(38, 53, 43, .07);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

#map-toggle-3d[aria-pressed='true'] { background: var(--ink, #242724); color: #fff; }
.coverage-map-shell .maplibregl-control-container { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.coverage-map-shell .maplibregl-ctrl { pointer-events: auto; }
.coverage-map-shell .maplibregl-ctrl-top-right { top: 14px; right: 13px; }
.coverage-map-shell .maplibregl-ctrl-group { overflow: hidden; border-radius: 10px; box-shadow: 0 3px 14px rgba(38, 53, 43, .1); }
.coverage-map-shell .maplibregl-ctrl-group button { width: 40px; height: 40px; background-color: #f7f7f2; }
.coverage-map-shell .maplibregl-ctrl-group button:hover { background-color: #e6e9df; }
.coverage-map-shell .maplibregl-ctrl-attrib { max-width: calc(100vw - 55px); font-size: 9px; line-height: 17px; background: rgba(247, 247, 242, .94); }
.coverage-map-shell .maplibregl-ctrl-attrib a { color: #445447; }
.coverage-map-shell .maplibregl-cooperative-gesture-screen { font-size: 14px; }

.coverage-city-marker {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(218, 56, 50, .25);
  border-radius: 50%;
  background: rgba(218, 56, 50, .14);
  cursor: pointer;
}

.coverage-city-marker-dot {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent, #da3832);
  box-shadow: 0 1px 5px rgba(89, 30, 22, .24);
}

.coverage-city-marker.is-active { width: 45px; height: 45px; background: rgba(218, 56, 50, .22); }
.coverage-city-marker.is-active .coverage-city-marker-dot { width: 15px; height: 15px; }
.coverage-city-marker:focus-visible,
.coverage-map-shell button:focus-visible,
.coverage-map-shell a:focus-visible,
.coverage-map-shell canvas:focus-visible { outline: 3px solid #b92722; outline-offset: 4px; }
.coverage-map-shell:fullscreen,
.coverage-map-shell.maplibregl-pseudo-fullscreen { width: 100%; height: 100%; border-radius: 0; }

@keyframes coverage-spinner { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .coverage-map-shell { height: 480px; border-radius: 15px; }
  .coverage-map-toolbar { top: 14px; left: 13px; gap: 5px; }
  #map-toggle-3d, #map-reset { padding: 10px 11px; font-size: 10px; }
  .map-location-card { left: 14px; bottom: 30px; padding: 15px 17px; width: min(266px, calc(100% - 80px)); }
  #map-city-name { font-size: 23px; }
  #map-placeholder { padding-bottom: 150px; }
  .coverage-map-shell .maplibregl-ctrl-top-right { top: 7px; right: 5px; }
  .coverage-map-shell .maplibregl-ctrl-group button { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .coverage-map-shell.is-map-loading #load-map::before { animation: none; }
}