html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
html, body, main, .container-fluid, .row, .map {
  height: 100%;
}
#map-canvas {
  width: 100%;
  height: 100%;
  height: calc(100% - 0px);
}
.map {
  height: 100%;
  height: calc(100% - 0px);
}
ul#categoria_list_id li {
  list-style: none;
  cursor: pointer;
  margin: 10px 0;
}
ul#categoria_list_id li.smart_autocomplete_highlight {
  background-color: #cccccc;
}
ul#categoria_list_id {
  margin: 10px 0;
  padding: 5px;
  background-color: #eeeeee;
}
.input_container ul {
  width: 206px;
  border: 1px solid #eaeaea;
  position: absolute;
  z-index: 9;
  background: #f3f3f3;
  list-style: none;
}
.input_container ul li {
  padding: 2px;
}
.input_container ul li:hover {
  background: #eaeaea;
}
#categoria_list_id {
  display: none;
}
fieldset {
  padding: 0 10px;
}
#filtro {
  text-decoration: none;
}
.card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.card-header span {
  position: absolute;
  right: 10px;
}
.card-body {
  padding: 10px;
}

@media (max-width: 767px) {
  .container-fluid.non-printable,
  .container-fluid.non-printable > .row,
  .container-fluid.non-printable > .row > .col-sm-12 {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ================= test3 — mappa Leaflet, elenco, accessibilità ================= */

/* --- Layout pagina mappa: altezza calcolata via JS, niente catene 100% fragili --- */
body.mappa #map-canvas { width: 100%; z-index: 0; background: #e8e4ea; }
body.mappa .container-fluid.non-printable { padding: 0; }
body.mappa .container-fluid.non-printable > .row { margin: 0; }
body.mappa .container-fluid.non-printable > .row > .map { padding: 0; width: 100%; }

/* --- Marker: le tip-*.png sono già a forma di goccia, nessun contenitore --- */
.leaflet-marker-icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.leaflet-marker-icon:focus { outline: 3px solid #111; outline-offset: 3px; }

/* --- Popup --- */
.pop-n { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.pop-s { font-size: 13px; color: #4a4f5c; margin-bottom: 6px; }
.pop-tag { display: inline-block; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.pop-dist { font-size: 13px; color: var(--magenta); font-weight: 700; margin-top: 6px; }
.pop-acc { display: flex; gap: 6px; margin-top: 8px; }
.pop-acc img { width: 26px; height: 26px; }

/* --- Icone accessibilità (elenco) --- */
.acc-ic { width: 28px; height: 28px; margin-right: 4px; }

/* --- Salta la mappa: link per chi naviga da tastiera/screen reader --- */
.skip-map {
  position: absolute; left: -9999px;
  background: #fff; color: var(--magenta); font-weight: 700;
  padding: 10px 16px; border-radius: 8px; z-index: 1200;
}
.skip-map:focus { left: 10px; top: 60px; outline: 3px solid #111; }

/* --- Focus sempre visibile e robusto (ipovedenti / navigazione da tastiera) --- */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #111 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
.elenco-top a:focus-visible, .elenco-top button:focus-visible,
.footer a:focus-visible, header a:focus-visible, header button:focus-visible {
  outline: 3px solid #fff !important;
}

/* --- Tap target minimi 44px (WCAG 2.5.5) --- */
.filtri-btn, .gps-btn, .loc-card-header, .footer .toolbar-inner a { min-height: 44px; }
.gps-btn, .filtri-btn { padding-top: 8px; padding-bottom: 8px; }

/* --- Schede elenco: nome sempre leggibile, indirizzo per distinguerle --- */
.loc-card-header { width: 100%; text-align: left; background: #fff; border: 0; }
.loc-name { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--pietra); }
.loc-meta { display: block; font-size: 12.5px; color: #5a6072; margin-top: 2px; }
/* Le icone tip-*-k.png e cat-*-c.png sono gia' a colori: sotto ci va uno
   sfondo chiaro, non il pallino della macrocategoria, che le spegnerebbe.
   La categoria resta leggibile dall'etichetta colorata dentro la scheda. */
.loc-badge-dot { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px; background: #f2f2f4; }
.loc-badge-dot img { width: 28px; height: 28px; object-fit: contain; }

/* --- Preferenze di sistema: contrasto e movimento --- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  .loc-card { border: 2px solid #111; }
  .loc-meta { color: #333; }
}

/* ============================================================
   GRAPPOLI DI MARKER (leaflet.markercluster)
   Il foglio di stile di serie colora i grappoli verde/giallo/arancio a
   seconda di quanti punti contengono. Qui il colore non conta quanti sono:
   e' il rosa del sito, con l'anello esterno piu' trasparente e il numero
   nero sopra (7,6:1 su #ee7982, oltre l'AA anche per i testi piccoli).
   La dimensione del grappolo resta l'unico indicatore della quantita',
   insieme al numero: il colore non e' mai l'unica informazione.
   ============================================================ */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background-color: rgba(238, 121, 130, .40); }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div { background-color: rgba(238, 121, 130, .92); }
.marker-cluster div { color: #1a1a1a; font-weight: 700; }