/* Fills main's flexed height exactly, so the map can grow to the footer
   without ever exceeding the viewport and pushing the footer down. */
.map-page-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.page-header {
  margin-bottom: 24px;
  flex-shrink: 0;
}

.page-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 13px;
  color: var(--text-3);
}

/* ── Map container ── */
/* Breaks out of main's 1100px content cap so the map's left/right inset
   matches the navbar/footer's 24px padding instead of main's centered
   margin, which is much wider on large screens. */
.crossings-map {
  width: calc(100vw - 48px);
  position: relative;
  left: 50%;
  margin-left: calc(24px - 50vw);
  flex: 1;
  min-height: 320px;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  /* Establish a stacking context so Leaflet's internal panes (z-index ~400) and
     controls (~1000) stay trapped inside the map instead of escaping into the
     root stacking context and painting over the fixed navbar / mobile menu. */
  z-index: 0;
}

/* ── Pins ── */
/* Classic teardrop marker built from a rotated rounded square, so the
   silhouette reads as "a location" at a glance instead of a plain dot. */
.map-pin-teardrop {
  position: absolute;
  top: 0;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.map-pin-teardrop-dot {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
/* Saturated marker colors, distinct from the muted --low/med/high-text
   badge colors, so pins stay visible against busy green terrain tiles. */
.map-pin-low .map-pin-teardrop    { background: #00c853; }
.map-pin-medium .map-pin-teardrop { background: #ffab00; }
.map-pin-high .map-pin-teardrop   { background: #ff1f1f; }
.map-pin-none .map-pin-teardrop   { background: #6b7280; }

/* ── Popup content ── */
.leaflet-popup-content-wrapper {
  border-radius: 8px;
}
.leaflet-popup-content {
  margin: 12px 14px;
  min-width: 220px;
}

.map-popup-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.map-popup-dir {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}
.leaflet-popup-content a.map-popup-dir,
.leaflet-popup-content a.map-popup-dir:hover {
  color: inherit;
}
.map-popup-dir:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.map-popup-countries {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-2);
}

.map-popup-dir .dir-arrow {
  color: var(--text-3);
  opacity: 0.5;
  flex-shrink: 0;
}

.map-popup-stats {
  display: flex;
  gap: 14px;
  padding: 2px 0 6px;
}

.map-popup-stat {
  display: flex;
  flex-direction: column;
  font-size: 11px;
}

.map-popup-stat-label {
  color: var(--text-3);
}

.map-popup-stat-value {
  font-weight: 600;
}

.map-popup-stat-sub {
  color: var(--text-3);
}

.map-popup-updated {
  font-size: 11px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 6px;
}

/* ── Directions handover (opens Google Maps) ── */
.map-popup-directions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 32px;
  margin-top: 8px;
  background: var(--accent);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
}
/* Leaflet's own .leaflet-container a rule (color: #0078A8) outranks a plain
   single-class selector, so this must match its specificity to win. */
.leaflet-popup-content a.map-popup-directions,
.leaflet-popup-content a.map-popup-directions:hover {
  color: #fff;
}
.map-popup-directions:hover {
  background: var(--accent-hover);
  text-decoration: none;
}

/* ── Quieter-alternative suggestion ── */
.map-popup-alt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-2);
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: 8px;
}

.map-popup-alt-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-3);
}

.map-popup-alt-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.map-popup-alt-link:hover { color: var(--accent); text-decoration: none; }
.map-popup-alt-link .wait-pill { padding: 2px 7px; font-size: 11px; }

.map-popup-alt-nodata .map-popup-alt-link {
  font-weight: 400;
  color: var(--text-2);
}
.map-popup-alt-nodata .map-popup-alt-link:hover { color: var(--accent); }

/* ── Radius filter control (Leaflet top-right control) ── */
.map-radius-control {
  background: var(--surface);
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

.map-radius-body {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
}

/* Collapsed handle: only shown on mobile (see @media below); hidden on desktop
   where the body is always visible. */
.map-radius-toggle {
  display: none;
  box-sizing: border-box;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 11px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.map-radius-toggle-icon { color: var(--accent); flex-shrink: 0; }
.map-radius-toggle-label { flex: 1; text-align: left; }
.map-radius-toggle-chevron {
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.map-radius-control.map-radius-open .map-radius-toggle-chevron {
  transform: rotate(180deg);
}

.map-radius-input {
  width: 64px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
}
.map-radius-input:focus { outline: none; border-color: var(--accent); }

.map-radius-btn,
.map-radius-clear {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
}
.map-radius-btn:hover,
.map-radius-clear:hover { border-color: var(--border-strong); color: var(--text); }
.map-radius-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Radius filter tooltip ── */
.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0 2px;
  cursor: default;
  color: var(--text-3);
  line-height: 1;
  flex-shrink: 0;
}
.tip:hover { color: var(--text-2); }
.tip-box {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.13);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2);
  white-space: normal;
  width: 220px;
  z-index: 200;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  pointer-events: none;
}
.tip:hover .tip-box,
.tip:focus .tip-box,
.tip.tip-open .tip-box { display: block; }
.tip.tip-flip .tip-box { right: auto; left: 0; }

.map-popup-camera {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

/* ── Wait pills (matches home page severity colors) ── */
.wait-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.wait-low    { background: var(--low-bg);   color: var(--low-text); }
.wait-medium { background: var(--med-bg);   color: var(--med-text); }
.wait-high   { background: var(--high-bg);  color: var(--high-text); }
.wait-none   { background: var(--surface-2); color: var(--text-3); }

/* iOS bottom-nav fix. The map page is the ONLY page whose content fits the
   viewport exactly, so on mobile it can't scroll — and on iOS a fixed bottom-nav
   sitting on a non-scrollable page drifts a few px up off the true bottom,
   exposing a strip of body background beneath it. Scrollable pages never show
   this because Safari pins fixed elements to the visual-viewport bottom once a
   page can scroll (which is why home/countries are fine). So instead of letting
   the map flex-fill to exactly the viewport, give it a definite near-full-screen
   height: header + map + footer + nav-clearance then run taller than the screen,
   the page scrolls like every other page, and the fixed nav re-seats correctly.
   The 150px reserves the navbar (62) + main top padding (20) + header (~68) so
   the map still fills the first screen down to the fold; the footer below the
   fold supplies the scroll slack (its own bottom-nav clearance lives in
   base.css). Applied at the 700px bottom-nav breakpoint, not 600px.

   The extra 58px + 24px shrinks the map so its bottom edge clears the fixed
   bottom-nav (58px) and leaves a 24px gap above it — matching the map's 24px
   left/right inset (width: 100vw - 48px, centered), so the map is evenly
   framed on all three sides. */
@media (max-width: 700px) {
  .map-page-body { height: auto; }
  .crossings-map { flex: none; height: calc(100dvh - 150px - 58px - 24px); }
  main { padding-bottom: 20px; }
}

@media (max-width: 600px) {
  .crossings-map {
    border-radius: 6px;
  }

  .leaflet-popup-content {
    min-width: 180px;
  }

  .map-popup-stats {
    gap: 10px;
  }

  .map-popup-alt-link {
    font-size: 12px;
  }

  /* Collapsed-by-default radius filter: show only the labeled handle; reveal the
     input/buttons when the user taps it (JS toggles .map-radius-open). */
  .map-radius-toggle { display: flex; }

  .map-radius-body { display: none; padding: 0 6px 6px; }
  .map-radius-control.map-radius-open .map-radius-body { display: flex; }

  .map-radius-input {
    width: 48px;
    height: 32px;
    font-size: 13px;
  }

  .map-radius-btn,
  .map-radius-clear {
    height: 32px;
    padding: 0 8px;
    font-size: 11px;
  }

  .tip-box { width: 180px; }
}