/* ==========================================================================
   MoonWalk — PAGE widget: Leaflet route map
   The source styled #leaflet-map-container by id; that is now the
   .moonwalk-map-canvas class so several maps can share a page.
   ========================================================================== */

.moonwalk-route-map {
  --moonwalk-map-height: 420px;
  --moonwalk-map-height-mobile: 320px;
  --moonwalk-map-panel-bg: var(--bg-card);
}

.moonwalk-route-map .map-section-container {
  background: var(--moonwalk-map-panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  width: 100%;
}

.moonwalk-route-map .map-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.moonwalk-route-map .map-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.moonwalk-route-map .legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.moonwalk-route-map .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.moonwalk-route-map .legend-dot.start {
  background: #00e676;
}

.moonwalk-route-map .legend-dot.stage {
  background: var(--moon-grad-orange);
}

.moonwalk-route-map .legend-dot.end {
  background: #ff1744;
}

.moonwalk-route-map .legend-dot.astronomy {
  background: #29b6f6;
}

.moonwalk-route-map .legend-dot--custom {
  background: var(--moonwalk-legend-dot, var(--moon-grad-orange));
}

.moonwalk-route-map .moonwalk-map-canvas {
  width: 100%;
  height: var(--moonwalk-map-height);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  z-index: 10;
  background: #060a18;
}

/* --------------------------------------------------------------------------
   Leaflet dark overrides — global by necessity, Leaflet renders popups and
   markers outside the widget subtree.
   -------------------------------------------------------------------------- */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgba(10, 17, 40, 0.95) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 87, 34, 0.4);
  border-radius: 10px;
}

.leaflet-popup-content {
  margin: 10px 12px;
  font-size: 0.8rem;
}

.leaflet-popup-content h4 {
  font-size: 0.95rem;
  color: #ffab91;
  margin-bottom: 3px;
  font-family: var(--font-display);
}

.custom-leaflet-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0a1128;
  border: 2px solid var(--moon-grad-orange);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255, 87, 34, 0.6);
  font-family: var(--font-display);
}

.custom-leaflet-pin .icon-full-moon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

.custom-leaflet-pin.start-pin {
  border-color: #00e676;
  color: #00e676;
}

.custom-leaflet-pin.end-pin {
  border-color: #ff1744;
  color: #ff1744;
}

.custom-leaflet-pin.astro-pin {
  border-color: #29b6f6;
  color: #29b6f6;
}

@media (max-width: 768px) {
  .moonwalk-route-map .moonwalk-map-canvas {
    height: var(--moonwalk-map-height-mobile);
  }
}