/* =============================================================================
   filtri.css — filtri dei rifugi (section#filtri)
   =============================================================================
   Posizione di base in base.css. Mobile first: sotto 768px un foglio
   dall'alto aperto dal pulsante "Filtri"; da 768px un pannello compatto in
   alto a sinistra. Solo variabili di base.css, nessun colore scritto a mano.
   ========================================================================== */

.filtri {
  /* Sopra l'avviso dei dati di esempio, che sta nella stessa fascia in alto */
  z-index: calc(var(--livello-sovrapposto) + 1);
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 2 * var(--spazio-2));
  color: var(--colore-testo);
  box-shadow: var(--ombra-3);
}

/* Chiuso: il pannello non si vede. Si apre dal pulsante "Filtri" della barra. */
.filtri:not(.filtri--aperto) {
  display: none;
}

/* -----------------------------------------------------------------------------
   Testata del pannello: titolo e pulsante di chiusura
   -------------------------------------------------------------------------- */

.filtri__testata {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  padding: var(--spazio-2) var(--spazio-2) var(--spazio-2) var(--spazio-4);
  border-bottom: 1px solid var(--colore-bordo);
}

.filtri__titolo {
  color: var(--colore-brand);
  font-size: 1.0625rem;
  line-height: var(--interlinea-stretta);
}

.filtri__chiudi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  color: var(--colore-testo);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--durata-base) var(--curva-standard);
}

.filtri__chiudi:hover {
  background: var(--colore-sfondo);
}

.filtri__icona {
  width: 22px;
  height: 22px;
}

/* -----------------------------------------------------------------------------
   Modulo: il corpo scorre, il piede resta fisso in fondo
   -------------------------------------------------------------------------- */

.filtri__modulo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.filtri__corpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
  min-height: 0;
  padding: var(--spazio-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.filtri__gruppo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
}

/* fieldset senza il riquadro predefinito */
.filtri__insieme {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filtri__etichetta {
  padding: 0;
  color: var(--colore-testo);
  font-size: var(--dimensione-piccola);
  font-weight: 600;
}

.filtri__nota {
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
}

/* -----------------------------------------------------------------------------
   Campi
   -------------------------------------------------------------------------- */

/* Audit P1.1: --colore-bordo su superficie è 1,39:1 (bordo quasi invisibile a
   riposo), sotto il 3:1 di WCAG 1.4.11; --colore-secondario raggiunge 4,48:1
   (stesso fix di moduli.css per i campi dei moduli). */
.filtri__campo {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--spazio-3);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  border: 1px solid var(--colore-secondario);
  border-radius: var(--raggio-piccolo);
  font: inherit;
}

.filtri__campo:focus {
  border-color: var(--colore-brand);
}

.filtri__campo::placeholder {
  color: var(--colore-testo-secondario);
}

/* Quota: "da" e "a" affiancati, con l'unità di misura */
.filtri__riga {
  display: flex;
  align-items: flex-end;
  gap: var(--spazio-2);
}

.filtri__estremo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
}

.filtri__estremo .filtri__etichetta {
  font-weight: 400;
  color: var(--colore-testo-secondario);
}

.filtri__unita {
  line-height: 44px;
  color: var(--colore-testo-secondario);
}

/* Tipo: caselle in riga, ogni etichetta alta 44px */
.filtri__caselle {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--spazio-4);
}

.filtri__casella {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: 44px;
  cursor: pointer;
}

.filtri__casella input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--colore-brand);
  cursor: pointer;
}

/* Servizi: caselle come pastiglie selezionabili (come in pannello.css).
   L'etichetta è l'area di tocco alta 44px; la casella vera resta nel DOM per
   tastiera e lettori di schermo, ma non si vede. */
.filtri__pastiglie {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--spazio-2);
}

.filtri__pastiglia {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

.filtri__pastiglia input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.filtri__pastiglia span {
  padding: var(--spazio-1) var(--spazio-3);
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  font-size: var(--dimensione-piccola);
  transition: background-color var(--durata-transizione) var(--curva-transizione);
}

.filtri__pastiglia input:checked + span {
  background: var(--colore-brand);
  color: var(--colore-testo-su-brand);
  border-color: var(--colore-brand);
}

.filtri__pastiglia input:focus-visible + span {
  outline: 3px solid var(--colore-brand);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Piede: contatore e pulsanti
   -------------------------------------------------------------------------- */

.filtri__piede {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  padding: var(--spazio-3) var(--spazio-4) var(--spazio-4);
  border-top: 1px solid var(--colore-bordo);
}

.filtri__contatore {
  font-weight: 600;
}

.filtri__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.filtri__pulsante {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 var(--spazio-4);
  background: var(--colore-brand);
  color: var(--colore-testo-su-brand);
  border: 1px solid var(--colore-brand);
  border-radius: var(--raggio-piccolo);
  cursor: pointer;
  transition: background-color var(--durata-transizione) var(--curva-transizione);
}

.filtri__pulsante:hover:not(:disabled) {
  background: var(--colore-secondario-hover);
  border-color: var(--colore-secondario-hover);
}

.filtri__pulsante--secondario {
  background: var(--colore-superficie);
  color: var(--colore-brand);
}

.filtri__pulsante--secondario:hover:not(:disabled) {
  background: var(--colore-sfondo);
  border-color: var(--colore-brand);
}

.filtri__pulsante:disabled {
  background: var(--colore-sfondo);
  color: var(--colore-testo-secondario);
  border-color: var(--colore-bordo);
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Sotto 850px (mobile e fascia intermedia 768-849px): il foglio a piena
   larghezza lascia vedere la parte bassa della mappa. Tra 768 e 849px i
   filtri aperti chiudono comunque la scheda (filtri.js, soglia 850px), quindi
   qui il foglio non deve convivere con la colonna della scheda.
   -------------------------------------------------------------------------- */

@media (max-width: 849px) {
  .filtri--aperto {
    max-height: calc(100% - 10rem);
  }
}

/* -----------------------------------------------------------------------------
   Da 850px: pannello compatto in alto a sinistra; "Mostra la mappa" non serve
   -------------------------------------------------------------------------- */

@media (min-width: 850px) {
  .filtri__mostra-mappa {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   Filtri rapidi (#filtri-rapidi): una sola riga compatta sopra la mappa. I chip
   scorrono nello spazio flessibile a sinistra; il contatore "N rifugi" e il
   pulsante "Tutti i filtri" (spostato dalla barra, stesso id) restano fissi a
   destra, mai scorrevoli. Un'unica riga: così la fascia resta bassa e la mappa
   guadagna area utile (offset dipendenti in base.css, --altezza-filtri-rapidi).
   -------------------------------------------------------------------------- */

.filtri-rapidi {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Sopra la scheda (--livello-sovrapposto): da 768px la colonna della scheda
     parte comunque sotto (--altezza-filtri-rapidi), ma questo z-index più alto
     garantisce che "Tutti i filtri" resti cliccabile in ogni caso. Pari al
     foglio dei filtri aperto, che, essendo dopo nel DOM, lo copre quando serve. */
  z-index: var(--z-filtri);
  padding: var(--spazio-2);
  background: var(--colore-superficie);
  box-shadow: var(--ombra-1);
}

/* Unica riga: chip a sinistra (scorrono), contatore + "Tutti i filtri" a destra */
.filtri-rapidi__riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  min-width: 0;
}

.filtri-rapidi__chips {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Scorrimento orizzontale senza scrollbar invadente (i chip restano
     trascinabili/scorrevoli al touch e con la rotella) */
  scrollbar-width: none;
}

.filtri-rapidi__chips::-webkit-scrollbar {
  display: none;
}

.filtri-rapidi__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  min-height: 44px;
  padding: 0 var(--spazio-3);
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-pillola);
  font-size: var(--dimensione-piccola);
  cursor: pointer;
  transition: background-color var(--durata-transizione) var(--curva-transizione),
    color var(--durata-transizione) var(--curva-transizione),
    border-color var(--durata-transizione) var(--curva-transizione);
}

.filtri-rapidi__chip-icona {
  width: 18px;
  height: 18px;
}

.filtri-rapidi__chip[aria-pressed="true"] {
  background: var(--colore-brand);
  color: var(--colore-testo-su-brand);
  border-color: var(--colore-brand);
}

.filtri-rapidi__chip:focus-visible {
  outline: 3px solid var(--colore-brand);
  outline-offset: 2px;
}

/* Pulsante "Tutti i filtri": stesso id/comportamento di prima (app.js),
   nuova classe perché ora sta su sfondo chiaro e non più sulla barra scura */
.filtri-rapidi__tutti {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  min-height: 44px;
  padding: 0 var(--spazio-3);
  background: var(--colore-superficie);
  color: var(--colore-brand);
  border: 1px solid var(--colore-brand);
  border-radius: var(--raggio-piccolo);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--durata-transizione) var(--curva-transizione);
}

.filtri-rapidi__tutti:hover {
  background: var(--colore-sfondo);
}

.filtri-rapidi__tutti:focus-visible {
  outline: 3px solid var(--colore-brand);
  outline-offset: 2px;
}

.filtri-rapidi__icona {
  width: 20px;
  height: 20px;
}

.filtri-rapidi__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--spazio-1);
  background: var(--colore-accento-caldo);
  color: var(--colore-testo);
  border-radius: var(--raggio-pillola);
  font-size: var(--testo-xs);
  font-weight: 700;
}

/* Contatore "N rifugi": sulla stessa riga, fisso a destra tra i chip e il
   pulsante, non si restringe e non va a capo */
.filtri-rapidi__contatore {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--colore-testo-secondario);
  font-size: var(--testo-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}