/* Stili specifici delle pagine categoria / listing (isolati da main.css per il budget home mobile). */

@keyframes filtri-fondu {
  0%, 99% {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
  }
  100% {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* AG-07 ag-filtri-compatti: barra filtri mono-riga su desktop/tablet e appiccicata con dissolvenza su mobile */
.filtri.ag-filtri-compatti {
  padding: 8px var(--gutter);
}

.filtri.ag-filtri-compatti .filtri__riga {
  flex-wrap: nowrap;
  gap: 6px 8px;
  margin-block: -3px;
  padding-block: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  animation: filtri-fondu linear both;
  animation-timeline: scroll(self inline);
}

.filtri.ag-filtri-compatti .filtri__riga::-webkit-scrollbar {
  display: none;
}

.filtri.ag-filtri-compatti .filtri__campo,
.filtri.ag-filtri-compatti .chip,
.filtri.ag-filtri-compatti .vicino-a-me--filtri,
.filtri.ag-filtri-compatti .filtri__azzera {
  flex: 0 0 auto;
  white-space: nowrap;
}

.filtri.ag-filtri-compatti .filtri__campo {
  gap: 4px;
  font-size: var(--t-13);
}

.filtri.ag-filtri-compatti .filtri__campo select,
.filtri.ag-filtri-compatti .filtri__campo input {
  padding: 6px 8px;
  font-size: var(--t-13);
}

.filtri.ag-filtri-compatti .filtri__campo select[name="citta"] {
  width: 146px;
}

.filtri.ag-filtri-compatti .chip {
  padding-inline: 12px;
  font-size: var(--t-13);
}

@media (max-width: 719px) {
  .filtri.ag-filtri-compatti {
    position: static;
    margin: var(--spazio-sm) calc(-1 * var(--gutter)) 0;
    padding: 8px var(--gutter);
    border-bottom: 1px solid var(--linea);
    background: var(--bianco);
  }

  .filtri.ag-filtri-compatti .filtri__riga {
    padding-bottom: 3px;
  }
}

/* AG-08 data-ag-filtri-stato: conteggio filtri attivi e reset sempre visibile senza scorrimento orizzontale */
[data-ag-filtri-stato] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--grigio-100);
  font-size: var(--t-13);
}

[data-ag-filtri-stato][hidden] {
  display: none;
}

.filtri__stato-n {
  color: var(--grigio-700);
  font-weight: 600;
}

.filtri__azzera-pill {
  min-height: var(--tocco);
  padding: 0 14px;
  border-color: var(--nero);
  background: var(--grigio-100);
  color: var(--nero);
  font-weight: 600;
}

.filtri__azzera-pill:hover {
  background: var(--giallo);
}