/* Pretcurent outage map — scoped to .pcp-outage-map */

.pcp-outage-map {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--color-bg-muted, #eef1f5);
}

.pcp-outage-map__placeholder {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: blur(2px);
}

.pcp-outage-map__container {
  width: 100%;
  background: var(--color-bg-muted, #eef1f5);
}

.pcp-outage-map__container .leaflet-control-attribution {
  font-size: 0.7rem;
}

/* Engagement state (v1.8.7) — visitor clicked into the map and scroll-wheel
   zoom is now active. Subtle 2px brand-blue inset outline confirms the
   state without introducing any visible text. Disengages on mouseleave. */
.pcp-outage-map--engaged .pcp-outage-map__container {
  outline: 2px solid rgba(59, 91, 219, 0.45);
  outline-offset: -2px;
  transition: outline-color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .pcp-outage-map--engaged .pcp-outage-map__container {
    transition: none;
  }
}

.pcp-outage-map__noscript {
  padding: 1rem;
  text-align: center;
  color: var(--color-text-muted, #6b7280);
  font-size: 0.95rem;
}

/* Rich popup for visitor reports */
.pcp-outage-map__popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  border: 1px solid #CDDBFA;
}

.pcp-outage-map__popup .leaflet-popup-content {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
}

.pcp-outage-map__popup .leaflet-popup-tip {
  background: #FFFFFF;
  border: 1px solid #CDDBFA;
}

.pcp-outage-map__popup-inner {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pcp-outage-map__popup-title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.3;
}

.pcp-outage-map__popup-street {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  line-height: 1.4;
}

.pcp-outage-map__popup-meta {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #3B5BDB;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pcp-outage-map__popup-meta::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* --pcp-dot is set inline per-popup so the dot matches the marker layer
     (red=user, orange=accidental, blue=planned). Falls back to red. */
  background: var(--pcp-dot, #c13c3c);
}

/* ─── Fallback banner — civic-blue accent pill (v1.8.6) ───────────────────
   Floats inside the rounded map wrapper, anchored top-center on desktop and
   inset on all sides on mobile. White surface + 3px blue accent stripe on
   the left + info icon → reads as a "map system notice" rather than page
   chrome. The map wrapper is `position: relative; overflow: hidden;` so
   the banner is clipped to the rounded corners. */
.pcp-outage-map__fallback-banner {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid #CDDBFA;
  border-left: 3px solid #3B5BDB;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
  line-height: 1.4;
  pointer-events: auto;
  animation: pcp-map-fade-in 200ms ease-out;
}

.pcp-outage-map__fallback-icon {
  flex-shrink: 0;
  color: #3B5BDB;
  display: block;
}

.pcp-outage-map__fallback-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* On screens ≥720px the banner becomes a centered floating pill capped at
   640px wide. Below that it stretches edge-to-edge minus 12px inset so the
   text never wraps into a tiny narrow column. */
@media (min-width: 720px) {
  .pcp-outage-map__fallback-banner {
    max-width: 640px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    animation: pcp-map-fade-in-centered 200ms ease-out;
  }
}

@media (max-width: 480px) {
  .pcp-outage-map__fallback-banner {
    top: 8px; left: 8px; right: 8px;
    padding: 10px 12px;
    font-size: 12px;
    gap: 8px;
  }
}

@keyframes pcp-map-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pcp-map-fade-in-centered {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── Legend — data key with hierarchy (v1.8.6) ───────────────────────────
   Top-right corner via Leaflet's `topright` control slot. Header label
   "LEGENDĂ" + 3 marker rows. Marker dimensions + 1.5px stroke mirror the
   actual L.circleMarker rendering so the legend accurately previews the
   real markers. */
.pcp-outage-map__legend {
  background: #FFFFFF;
  border: 1px solid #E5E9F0;
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 156px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
  font-family: 'Inter', system-ui, sans-serif;
  margin: 10px;
  animation: pcp-map-fade-in 250ms ease-out 50ms both;
}

.pcp-outage-map__legend-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #64748B;
  text-transform: uppercase;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid #F1F5F9;
}

.pcp-outage-map__legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2.5px 0;
}

.pcp-outage-map__legend-marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-style: solid;
  border-width: 1.5px;
  flex-shrink: 0;
}

.pcp-outage-map__legend-label {
  font-size: 12px;
  font-weight: 500;
  color: #1F2937;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .pcp-outage-map__legend {
    padding: 8px 10px;
    min-width: 0;
    margin: 8px;
  }
  .pcp-outage-map__legend-marker { width: 10px; height: 10px; }
  .pcp-outage-map__legend-label { font-size: 11px; }
  .pcp-outage-map__legend-header { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcp-outage-map__fallback-banner,
  .pcp-outage-map__legend {
    animation: none;
  }
}