/* ==========================================================================
   Brico Ecommerce — Pannello filtri del catalogo
   --------------------------------------------------------------------------
   Caricato solo sugli archivi del catalogo (inc/catalog-filters.php).
   Nessuna libreria: il pannello e' HTML e CSS, il JS serve solo al
   cassetto su telefono e al filtro dei reparti.
   ========================================================================== */

.brico-filtri {
	font-family: var(--brico-font-base);
	color: var(--brico-color-text);
}

.brico-filtri__testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.brico-filtri__titolo {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.01em;
}

.brico-filtri__chiudi {
	border: none;
	background: var(--brico-color-surface-alt);
	border-radius: var(--brico-radius-sm);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--brico-color-text);
	cursor: pointer;
	min-width: max(2.75rem, 44px);
	min-height: max(2.75rem, 44px);
}

/* --------------------------------------------------------------------
   I FILTRI ATTIVI, in cima

   Perche' esistono: chi filtra e non trova niente deve poter vedere
   *cosa* ha chiesto e toglierlo con un gesto. Senza, l'unica via
   d'uscita e' il tasto indietro — e a quel punto molti se ne vanno.
   -------------------------------------------------------------------- */
.brico-filtri__attivi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--brico-color-border);
}

.brico-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: var(--brico-color-secondary);
	color: #fff;
	border-radius: 999px;
	padding: 0.3em 0.5em 0.3em 0.85em;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
	transition: background var(--brico-transition);
}

.brico-chip:hover,
.brico-chip:focus-visible {
	background: var(--brico-color-secondary-dark);
	color: #fff;
}

.brico-chip__x {
	font-size: 1.15em;
	line-height: 1;
	opacity: 0.85;
}

/* --------------------------------------------------------------------
   I gruppi
   -------------------------------------------------------------------- */
.brico-filtri__gruppo {
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius);
	background: var(--brico-color-surface);
	padding: 0.9rem 1rem;
	margin: 0 0 0.75rem;
}

.brico-filtri__gruppo fieldset {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;   /* senza, un fieldset non si restringe mai sotto al contenuto */
}

.brico-filtri__gruppo-titolo {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--brico-color-text-muted);
	margin: 0 0 0.6rem;
	padding: 0;
	float: none;    /* un <legend> di default non e' un elemento normale */
	width: 100%;
}

/* Il titolo richiudibile e' un vero <button>: si raggiunge con la
   tastiera e dice il suo stato con aria-expanded, che una <div> con un
   onclick non fa. */
.brico-filtri__gruppo-titolo button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	min-height: max(2.75rem, 44px);
}

.brico-filtri__gruppo-titolo button::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--brico-transition);
}

.brico-filtri__gruppo-titolo button[aria-expanded="false"]::after {
	transform: rotate(-45deg) translate(-1px, 1px);
}

.brico-filtri__gruppo-titolo button[aria-expanded="false"] + .brico-filtri__corpo,
.brico-filtri__corpo[hidden] {
	display: none;
}

/* --------------------------------------------------------------------
   L'elenco dei reparti

   Righe intere cliccabili, numero a destra incolonnato. Il numero e'
   `$term->count`, una colonna gia' pronta in `term_taxonomy`: non
   costa una query.
   -------------------------------------------------------------------- */
.brico-filtri__cerca {
	width: 100%;
	border: 1px solid var(--brico-color-border);
	border-radius: var(--brico-radius-sm);
	padding: 0.5em 0.75em;
	margin-bottom: 0.5rem;
	font: inherit;
	font-size: 0.9rem;
	min-height: max(2.75rem, 44px);
}

.brico-filtri__voci {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 22rem;
	overflow-y: auto;
	overscroll-behavior: contain;   /* lo scorrimento non "sfonda" sulla pagina */
}

.brico-filtri__voci li + li {
	border-top: 1px solid var(--brico-color-border);
}

.brico-filtri__voci a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.25rem;
	min-height: max(2.75rem, 44px);
	color: var(--brico-color-text);
	text-decoration: none;
	font-size: 0.92rem;
	border-radius: var(--brico-radius-sm);
}

.brico-filtri__voci a:hover {
	background: var(--brico-color-surface-alt);
	color: var(--brico-color-secondary);
}

.brico-filtri__voci a[aria-current="page"] {
	font-weight: 700;
	color: var(--brico-color-secondary);
}

.brico-filtri__nome {
	overflow-wrap: anywhere;
}

/* Il conteggio e' un'informazione secondaria: monospaziato per
   incolonnarsi, spento per non competere col nome. */
.brico-filtri__n {
	flex: 0 0 auto;
	font-family: var(--brico-font-mono);
	font-size: max(0.75rem, 12px);
	color: var(--brico-color-text-muted);
	font-variant-numeric: tabular-nums;
}

.brico-filtri__altre {
	width: 100%;
	margin-top: 0.5rem;
	border: 1px solid var(--brico-color-border);
	background: var(--brico-color-surface-alt);
	border-radius: var(--brico-radius-sm);
	padding: 0.55em 1em;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--brico-color-secondary);
	cursor: pointer;
	min-height: max(2.75rem, 44px);
}

.brico-filtri__altre:hover {
	background: var(--brico-color-border);
}

/* Messaggio quando la ricerca fra i reparti non trova niente: senza,
   l'elenco si svuota e sembra rotto. */
.brico-filtri__vuoto {
	padding: 0.6rem 0.25rem;
	font-size: 0.88rem;
	color: var(--brico-color-text-muted);
}

/* --------------------------------------------------------------------
   Le caselle
   -------------------------------------------------------------------- */
.brico-filtri__check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.25rem;
	min-height: max(2.75rem, 44px);
	font-size: 0.92rem;
	cursor: pointer;
	border-radius: var(--brico-radius-sm);
}

.brico-filtri__check:hover {
	background: var(--brico-color-surface-alt);
}

.brico-filtri__check input {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--brico-color-secondary);
	flex: 0 0 auto;
}

.brico-filtri__azioni {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.brico-filtri__applica {
	flex: 1 1 auto;
	border: none;
	background: var(--brico-color-secondary);
	color: #fff;
	border-radius: var(--brico-radius-sm);
	padding: 0.7em 1.2em;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	min-height: max(2.75rem, 44px);
	transition: background var(--brico-transition);
}

.brico-filtri__applica:hover {
	background: var(--brico-color-secondary-dark);
}

/* --------------------------------------------------------------------
   AZZERA TUTTI I FILTRI

   Sta con i chip, in cima, non in fondo al pannello: chi vuole
   ricominciare lo cerca dove vede cosa ha applicato, non dopo aver
   scorso tutti i gruppi. E su telefono, dentro il cassetto, "in fondo"
   vuol dire fuori schermo.

   Volutamente NON uguale ai chip: quelli tolgono un filtro, questo li
   toglie tutti. Due gesti diversi non devono avere lo stesso aspetto,
   o si preme quello sbagliato. Da qui il contorno invece del pieno, e
   il rosso del brand — che qui e' il suo uso giusto, un'azione che
   annulla.
   -------------------------------------------------------------------- */
.brico-filtri__azzera-tutto {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border: 1px solid var(--brico-color-primary);
	border-radius: 999px;
	background: transparent;
	color: var(--brico-color-primary);
	padding: 0.3em 0.85em;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.4;
	min-height: max(2rem, 32px);
	transition: background var(--brico-transition), color var(--brico-transition);
}

.brico-filtri__azzera-tutto svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

.brico-filtri__azzera-tutto:hover,
.brico-filtri__azzera-tutto:focus-visible {
	background: var(--brico-color-primary);
	color: #fff;
}

/* --------------------------------------------------------------------
   IL PULSANTE E IL CASSETTO SU TELEFONO

   Su telefono la barra laterale finisce sotto ai prodotti, cioe' dopo
   ventiquattro schede: nessuno la trova. Il pannello diventa un
   cassetto che si apre dall'alto, e i filtri si applicano alla
   chiusura — non a ogni tocco, che vorrebbe dire N ricaricamenti di
   pagina in fila.

   Entrambi i pezzi nascono `hidden` e li accende il JavaScript: senza
   JavaScript resta la barra laterale normale, che funziona lo stesso.
   -------------------------------------------------------------------- */
.brico-filtri-apri {
	display: none;
	align-items: center;
	gap: 0.45em;
	border: 1px solid var(--brico-color-border);
	background: var(--brico-color-surface);
	border-radius: var(--brico-radius-sm);
	padding: 0.5em 1em;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--brico-color-text);
	cursor: pointer;
	min-height: max(2.75rem, 44px);
	vertical-align: middle;
	margin: 0 0 1.5rem 0.5rem;
}

.brico-filtri-apri svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 921px) {
	.brico-filtri-apri:not([hidden]) {
		display: inline-flex;
		margin-bottom: 5px;
	}

	/* Il cassetto. `position: fixed` e non un pannello nel flusso:
	   deve coprire la pagina, non spingerla in basso. */
	.brico-filtri {
		position: fixed;
		inset: 0 0 auto 0;
		z-index: 9999;
		max-height: 88vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--brico-color-surface);
		border-radius: 0 0 var(--brico-radius) var(--brico-radius);
		box-shadow: 0 18px 48px rgba(23, 25, 28, 0.28);
		padding: 1rem 1.1rem 1.4rem;
		transform: translateY(-101%);
		transition: transform 220ms ease;
		visibility: hidden;
	}

	.brico-filtri.e-aperto {
		transform: none;
		visibility: visible;
	}

	.brico-filtri__chiudi:not([hidden]) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Il velo dietro al cassetto */
	.brico-velo {
		position: fixed;
		inset: 0;
		z-index: 9998;
		background: rgba(23, 25, 28, 0.5);
		border: none;
		padding: 0;
		cursor: pointer;
	}

	.brico-filtri__voci {
		max-height: 40vh;
	}
}

/* Chi ha chiesto meno movimento non vede scorrere il cassetto. */
@media (prefers-reduced-motion: reduce) {
	.brico-filtri {
		transition: none;
	}
}