/* Remove browser focus outline on Leaflet SVG paths */
.leaflet-interactive:focus {
  outline: none;
}

/* Zone popup only — scoped via className */
.ov-zone-popup .leaflet-popup-content-wrapper {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.ov-zone-popup .leaflet-popup-content {
  margin: 0 !important;
  font-family: var(--ov-font-sans);
}
.ov-zone-popup .leaflet-popup-tip-container {
  display: none !important;
}
.ov-zone-popup .leaflet-popup-close-button {
  color: #fff !important;
  top: 6px !important;
  right: 6px !important;
}

/* MapView container */
.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: var(--ov-radius-lg);
  overflow: hidden;
}

/* Legend */
.map-legend {
  position: absolute;
  bottom: var(--ov-space-8);
  left: var(--ov-space-4);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--ov-radius-md);
  padding: var(--ov-space-3) var(--ov-space-4);
  box-shadow: var(--ov-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2);
  z-index: 1000;
  min-width: 220px;
}
.map-legend-title {
  font-size: var(--ov-fs-xs);
  font-family: var(--ov-font-sans);
  font-weight: 700;
  color: var(--ov-navy);
  margin-bottom: 2px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: var(--ov-space-2);
  font-size: var(--ov-fs-xs);
  font-family: var(--ov-font-sans);
  color: var(--ov-steel);
}
.map-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.map-legend-hint {
  font-size: 10px;
  color: var(--ov-slate);
  font-family: var(--ov-font-sans);
  margin-top: 2px;
  font-style: italic;
}

/* Weather widget */
.weather-widget {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--ov-radius-md);
  padding: var(--ov-space-3) var(--ov-space-4);
  box-shadow: var(--ov-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-1);
  min-width: 140px;
  font-family: var(--ov-font-sans);
}
.weather-widget--loading { color: var(--ov-slate); font-size: var(--ov-fs-sm); }
.weather-temp { font-size: var(--ov-fs-h3); font-weight: 700; color: var(--ov-navy); }
.weather-wind, .weather-label { font-size: var(--ov-fs-xs); color: var(--ov-steel); }
.weather-status { font-size: var(--ov-fs-xs); margin-top: var(--ov-space-1); }

/* NOTAM panel */
.notam-panel {
  position: absolute;
  top: 52px;
  right: var(--ov-space-4);
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-radius: var(--ov-radius-md);
  box-shadow: var(--ov-shadow-md);
  z-index: 1000;
}
.notam-panel-header {
  padding: var(--ov-space-3) var(--ov-space-4);
  font-family: var(--ov-font-sans);
  font-weight: 600;
  font-size: var(--ov-fs-sm);
  color: var(--ov-navy);
  border-bottom: 1px solid var(--ov-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.96);
}
.notam-item {
  padding: var(--ov-space-3) var(--ov-space-4);
  border-bottom: 1px solid var(--ov-line);
  font-family: var(--ov-font-sans);
}
.notam-item:last-child { border-bottom: none; }
.notam-id { font-size: var(--ov-fs-xs); font-weight: 600; color: #E03345; }
.notam-title { font-size: var(--ov-fs-sm); color: var(--ov-navy); margin-top: 2px; }
.notam-desc { font-size: var(--ov-fs-xs); color: var(--ov-slate); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Layers button ── */
.map-layers-btn {
  position: absolute;
  top: var(--ov-space-4);
  right: 56px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--ov-line);
  border-radius: var(--ov-radius-md);
  font-family: var(--ov-font-sans);
  font-size: var(--ov-fs-xs);
  font-weight: 600;
  color: var(--ov-navy);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s;
}
.map-layers-btn:hover { background: rgba(255,255,255,1); border-color: var(--ov-blue); }
.map-layers-btn.active { border-color: var(--ov-blue); color: var(--ov-blue); }

/* ── Layers panel ── */
.map-layers-panel {
  position: absolute;
  top: 52px;
  right: 56px;
  z-index: 1001;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md);
  box-shadow: var(--ov-shadow-md);
  padding: var(--ov-space-3) var(--ov-space-4);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2);
}

.map-layers-panel__title {
  font-family: var(--ov-font-sans);
  font-size: var(--ov-fs-xs);
  font-weight: 700;
  color: var(--ov-navy);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: var(--ov-space-2);
  border-bottom: 1px solid var(--ov-line);
  margin-bottom: var(--ov-space-1);
}

.map-layers-panel__row {
  display: flex;
  align-items: center;
  gap: var(--ov-space-3);
  cursor: pointer;
  padding: var(--ov-space-1) 0;
  user-select: none;
}

.map-layers-panel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.map-layers-panel__label {
  font-family: var(--ov-font-sans);
  font-size: var(--ov-fs-xs);
  font-weight: 500;
  color: var(--ov-steel);
  flex: 1;
}

.map-layers-panel__check {
  width: 16px;
  height: 16px;
  accent-color: var(--ov-blue);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── NOTAM button ── */
.map-notams-btn {
  position: absolute;
  top: calc(var(--ov-space-4) + 44px);
  right: 56px;
  z-index: 1000;
  padding: 6px 12px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--ov-line);
  border-radius: var(--ov-radius-md);
  font-family: var(--ov-font-sans);
  font-size: var(--ov-fs-xs);
  font-weight: 600;
  color: #E03345;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, border-color 0.15s;
}
.map-notams-btn:hover { background: rgba(255,255,255,1); border-color: #E03345; }

/* Spot markers (injected DOM elements) */
.spot-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ov-blue);
  border: 3px solid var(--ov-white);
  box-shadow: var(--ov-shadow-sm);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.spot-marker:hover { transform: scale(1.2); }
.spot-marker[data-difficulty="BEGINNER"] { background: #00B894; }
.spot-marker[data-difficulty="INTERMEDIATE"] { background: #F5A623; }
.spot-marker[data-difficulty="ADVANCED"] { background: #FF4D5E; }