/* ════════════════════════════════════════════════════════════════════════════
   index.css — stili specifici di index.php (mappa mondiale)
   Richiede: common.css
   ════════════════════════════════════════════════════════════════════════════ */

/* Altezza mappa index (ora delegata a .map-wrapper in common.css) */

/* Sfondo mappa scuro */
.leaflet-container { background: var(--bg) !important; }

/* ── MAP CONTROLS ────────────────────────────────────────────────────────── */
.map-controls {
  margin-bottom: 16px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
/* Wrapper del selettore tipo mappa con larghezza specifica */
.map-type-wrap { flex: 1; max-width: 200px; }

#map-type-select {
  width: 100%;
  appearance: none;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-muted);
  font-family: var(--sans); font-size: .78rem; font-weight: 400;
  padding: 6px 28px 6px 10px; cursor: pointer;
  transition: border-color var(--trans), color var(--trans);
}
#map-type-select:hover,
#map-type-select:focus { border-color: var(--gold); color: var(--text); outline: none; }
#map-type-select option { background: var(--surface2); }

/* ── MARKERS ─────────────────────────────────────────────────────────────── */
.marker-base {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  cursor: pointer;
  transition: transform .2s, border-color .2s;
}
.marker-base:hover {
  transform: scale(1.4);
  border-color: rgba(255,255,255,.8);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .map-type-wrap { max-width: 100%; }
}

.map-empty-msg { color: var(--text-sub); }



/* ── CLUSTER CUSTOM ───────────────────────────────────────────────────────── */
.marker-cluster-custom {
  background: none; border: none;
}
.cluster-circle {
  width: 36px; height: 36px;
  background: var(--gold-dark);
  color: var(--black);
  border: 3px solid var(--gold);
  border-radius: 50%;
  display: flex !important;
  align-items: center; justify-content: center;
  font-family: var(--sans);
  font-weight: 700; font-size: 0.85rem;
  box-shadow: 0 0 15px rgba(201, 164, 74, 0.4), var(--shadow);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s, border-color 0.2s;
}
.leaflet-marker-icon:hover .cluster-circle {
  transform: scale(1.15);
  background: var(--gold);
  border-color: #fff;
  z-index: 999;
}