/* ============================================================
   map.css — Mappa Leaflet, marker, popup
   ============================================================ */

.map-section { margin-bottom: 48px; }

/* ── Contenitore mappa ─────────────────────────────────────── */
#omMap {
  width:         100%;
  height:        340px; /* altezza ridotta su mobile */
  border-radius: var(--radius);
  border:        1px solid var(--border);
  overflow:      hidden;
  position:      relative;
  z-index:       1;
}

@media (min-width: 600px)  { #omMap { height: 420px; } }
@media (min-width: 900px)  { #omMap { height: 520px; } }

/* ── Placeholder loading ───────────────────────────────────── */
.map-loading {
  height:          340px;
  border-radius:   var(--radius);
  border:          1px solid var(--border);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  color:           var(--text-muted);
  font-family:     'DM Mono', monospace;
  font-size:       0.78rem;
  background:      var(--surface);
  gap:             12px;
}

@media (min-width: 600px) { .map-loading { height: 420px; } }
@media (min-width: 900px) { .map-loading { height: 520px; } }

/* ── Override Leaflet tema dark ────────────────────────────── */
.leaflet-container {
  background:  #0d1420 !important;
  font-family: 'Syne', sans-serif;
}

.leaflet-tile-pane {
  filter: brightness(0.75) saturate(0.6) hue-rotate(200deg);
}

/* ── Popup custom ──────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  background:    var(--surface) !important;
  border:        1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow:    0 8px 32px rgba(0,0,0,0.5) !important;
  color:         var(--text) !important;
}

.leaflet-popup-tip { background: var(--surface) !important; }

.leaflet-popup-content {
  margin:      12px 16px !important;
  font-family: 'Syne', sans-serif;
  min-width:   140px;
}

.map-popup-city {
  font-weight:   700;
  font-size:     0.95rem;
  margin-bottom: 4px;
  display:       flex;
  align-items:   center;
  gap:           6px;
  flex-wrap:     wrap;
}

.map-popup-temp {
  font-size:      1.4rem;
  font-weight:    800;
  letter-spacing: -0.03em;
}

.map-popup-desc {
  font-size:      0.75rem;
  color:          var(--text-dim);
  text-transform: capitalize;
  margin-top:     2px;
}

.map-popup-details {
  font-family: 'DM Mono', monospace;
  font-size:   0.62rem;
  color:       var(--text-muted);
  margin-top:  8px;
  display:     flex;
  gap:         10px;
  flex-wrap:   wrap;
}

/* ── Marker pin città ──────────────────────────────────────── */
.map-pin {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          max-content;
  cursor:         pointer;
}

.pin-label {
  background:     rgba(8, 12, 26, 0.82);
  color:          #dde4f0;
  font-family:    'DM Mono', monospace;
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding:        3px 7px;
  border-radius:  4px;
  white-space:    nowrap;
  box-shadow:     0 2px 8px rgba(0,0,0,0.45);
  transition:     background 0.15s;
}

.pin-dot {
  width:        6px;
  height:       6px;
  background:   #dde4f0;
  border:       1.5px solid rgba(8,12,26,0.85);
  border-radius:50%;
  margin-top:   3px;
  flex-shrink:  0;
  box-shadow:   0 1px 4px rgba(0,0,0,0.5);
}

.map-pin:hover .pin-label { background: rgba(0,212,255,0.75); color: #000; }
.map-pin:hover .pin-dot   { background: #00d4ff; border-color: rgba(0,100,150,0.6); }

/* ── Marker ricerca manuale ────────────────────────────────── */
.map-pin.custom .pin-label {
  background: rgba(200, 80, 30, 0.82);
  color:      #fff;
}
.map-pin.custom .pin-dot {
  background:   #ff6b35;
  border-color: rgba(200,80,30,0.7);
}
.map-pin.custom:hover .pin-label { background: rgba(255,107,53,0.9); }

/* ── Badge popup ───────────────────────────────────────────── */
.popup-badge {
  display:        inline-block;
  font-family:    'DM Mono', monospace;
  font-size:      0.52rem;
  background:     rgba(0,212,255,0.15);
  color:          var(--accent);
  border:         1px solid rgba(0,212,255,0.3);
  border-radius:  3px;
  padding:        1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

.popup-badge.custom {
  background:   rgba(255,107,53,0.15);
  color:        var(--accent2);
  border-color: rgba(255,107,53,0.3);
}

/* ── Controlli mappa (radar toggle) ───────────────────────── */
.map-controls {
  display:     flex;
  justify-content: flex-end;
  padding:     6px 0 0;
}

.radar-btn {
  font-family:    'DM Mono', monospace;
  font-size:      0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background:     var(--surface2);
  color:          var(--text-muted);
  border:         1px solid var(--border);
  border-radius:  6px;
  padding:        5px 12px;
  cursor:         pointer;
  transition:     background 0.2s, color 0.2s, border-color 0.2s;
}

.radar-btn:hover {
  background:   rgba(0,212,255,0.08);
  color:        var(--accent);
  border-color: rgba(0,212,255,0.3);
}

.radar-btn.active {
  background:   rgba(0,212,255,0.15);
  color:        var(--accent);
  border-color: rgba(0,212,255,0.5);
  box-shadow:   0 0 8px rgba(0,212,255,0.2);
}

/* ── Controlli zoom Leaflet su mobile ──────────────────────── */
.leaflet-control-zoom a {
  width:       36px !important;
  height:      36px !important;
  line-height: 36px !important;
  font-size:   18px !important;
}