/* =========================
   MAP PAGE
========================= */
.map-page {
  position: relative;
  width: 100%;
  height: 650px;
  /*margin-top: 80px; /* matches desktop header height */
}
.map-container,
#leaflet-map {
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* =========================
   CSS VARIABLES
========================= */
:root {
  --header-height: 80px; /* global header height */
}
/* =========================
   FILTER PANEL
========================= */
.map-filters {
  width: 220px;
  background: #b8d9b8;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  margin: 10px;
}
.map-filters h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: bold;
}
.map-filters select {
  width: 100%;
  padding: 10px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: #fff;
}
.map-filters select:last-child {
  margin-bottom: 0;
}
/* =========================
   MAP LEGEND
========================= */
.map-legend {
  width: 180px;
  background: #e8f5e8;
  padding: 18px 20px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  margin: 10px;
}
.map-legend h4 {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}
.legend-item:last-child {
  margin-bottom: 0;
}
.legend-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot.red   { background-color: #e53935; }
.legend-dot.green { background-color: #43a047; }
.legend-dot.blue  { background-color: #42a5f5; }
.legend-line {
  width: 22px;
  height: 3px;
  background-color: #757575;
  border-radius: 2px;
  flex-shrink: 0;
}
/* =========================
   LEAFLET MARKER COLOR OVERRIDES
========================= */
.leaflet-interactive.marker-blocked {
  stroke: #e53935 !important;
  fill: #e53935 !important;
}
.leaflet-interactive.marker-evacuation {
  stroke: #43a047 !important;
  fill: #43a047 !important;
}
.leaflet-interactive.marker-location {
  stroke: #42a5f5 !important;
  fill: #42a5f5 !important;
}
/* =========================
   MOBILE VIEW
========================= */
@media (max-width: 900px) {
  .map-filters {
    width: 160px;
    padding: 14px;
    margin: 6px;
  }
  .map-filters h3 {
    font-size: 15px;
  }
  .map-filters select {
    padding: 8px;
    font-size: 13px;
  }
  .map-legend {
    width: 150px;
    padding: 14px 16px;
    margin: 6px;
  }
}