/**
 * Filtri della Loop Grid: ricerca e risultati per pagina.
 *
 * Layout minimo e neutro: colori e tipografia arrivano dai token condivisi, così
 * i controlli seguono il tema senza imporre uno stile proprio.
 */

.attelbrg-loop-filters {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --attelbrg-space-2, 0.5rem );
}

/*
 * Selettore volutamente ripetitivo. Il kit di Elementor stila i campi con
 * `.elementor-kit-N input:not([type="button"]):not([type="submit"])`, che vale
 * (0,3,1) di specificità: una regola a due classi perde, e il raggio del kit
 * (4px) prevarrebbe. Ripetendo le classi si arriva a (0,4,0), che vince senza
 * ricorrere a `!important` — quest'ultimo bloccherebbe anche i controlli di
 * stile del pannello, che devono poter sovrascrivere questi valori.
 */
.attelbrg-loop-filters.attelbrg-loop-filters .attelbrg-loop-filters__input.attelbrg-loop-filters__input,
.attelbrg-loop-filters.attelbrg-loop-filters .attelbrg-loop-filters__select.attelbrg-loop-filters__select {
	background: var( --attelbrg-surface, #fff );
	border: 1px solid var( --attelbrg-border, #d4d4d4 );
	/* Stesso raggio del pulsante di azzeramento: i tre controlli stanno in fila. */
	border-radius: var( --attelbrg-loop-field-radius, 8px );
	/* Stessa altezza del pulsante di azzeramento, così la fila resta allineata. */
	min-height: var( --attelbrg-loop-control-height, 44px );
	color: var( --attelbrg-text, #1a1a1a );
	font: inherit;
	padding: 0.5em 0.75em;
}

.attelbrg-loop-filters__input {
	min-width: 12rem;
	width: 100%;
}

/*
 * Campo e azzeramento sulla stessa riga, con lo spazio del pulsante **sempre**
 * riservato: nascondendolo dal flusso il campo si allargherebbe e si
 * restringerebbe a ogni ricerca.
 */
.attelbrg-loop-filters__field {
	align-items: center;
	display: inline-flex;
	gap: var( --attelbrg-space-2, 0.5rem );
	max-width: 100%;
}

.attelbrg-loop-filters__reset.is-hidden {
	visibility: hidden;
}

/*
 * Colore ereditato dal contesto: un grigio fisso sparisce sui temi scuri, ed è
 * esattamente ciò che accadeva qui (testo #555 su fondo nero).
 *
 * Selettore doppio: il kit di Elementor colora le etichette con
 * `.elementor-kit-N label`, che batterebbe una classe sola per specificità.
 */
.attelbrg-loop-filters .attelbrg-loop-filters__label {
	color: inherit;
	flex: 0 0 auto;
	font-size: 0.875em;
	white-space: nowrap;
}

/*
 * Etichetta e selettore restano sulla stessa riga, allineati a destra: in un
 * contenitore stretto il wrap mandava l'etichetta sopra il controllo.
 */
.attelbrg-loop-filters--per-page {
	flex-wrap: nowrap;
	justify-content: flex-end;
}

.attelbrg-loop-filters--per-page .attelbrg-loop-filters__select {
	flex: 0 0 auto;
	width: auto;
}

.attelbrg-loop-filters__submit {
	background: none;
	border: 1px solid var( --attelbrg-border, #d4d4d4 );
	border-radius: var( --attelbrg-radius-sm, 4px );
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0.5em 0.9em;
	text-decoration: none;
}

/*
 * Azzeramento come pulsante-icona. Dimensione minima 44px: sotto quella soglia
 * un bersaglio tattile diventa difficile da centrare.
 */
.attelbrg-loop-filters__reset {
	align-items: center;
	background: var( --attelbrg-loop-reset-bg, #808381 );
	border: 0;
	border-radius: var( --attelbrg-loop-reset-radius, 8px );
	color: var( --attelbrg-loop-reset-color, #fff );
	/* Il riempimento dell'icona è fisso nel markup: qui resta solo il colore del
	   testo alternativo, se un tema sostituisse l'icona. */
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	min-height: var( --attelbrg-loop-control-height, 44px );
	min-width: var( --attelbrg-loop-control-height, 44px );
	padding: 0.5rem;
	text-decoration: none;
}

.attelbrg-loop-filters__reset:hover,
.attelbrg-loop-filters__reset:focus-visible {
	background: var( --attelbrg-loop-reset-bg-hover, #6d706e );
}

.attelbrg-loop-filters__reset-icon {
	display: block;
	height: auto;
	width: 1.3125rem;
}

.attelbrg-loop-filters__submit:focus-visible,
.attelbrg-loop-filters__reset:focus-visible,
.attelbrg-loop-filters__input:focus-visible,
.attelbrg-loop-filters__select:focus-visible {
	outline: 2px solid var( --attelbrg-focus, #005fcc );
	outline-offset: 2px;
}

.attelbrg-loop-filters__notice {
	color: var( --attelbrg-text-muted, #555 );
	font-size: 0.875em;
	margin: 0;
}

/*
 * `hidden` deve valere anche dentro i temi che impostano un `display` sui
 * bottoni.
 */
.attelbrg-loop-filters [hidden] {
	display: none !important;
}

/*
 * Il pulsante di invio del per-page nasce nascosto e non viene nascosto dal JS:
 * lo script è in fondo alla pagina, quindi fra il disegno dell'HTML e la sua
 * esecuzione il pulsante sarebbe visibile per un istante. Serve solo a chi non
 * ha JavaScript, e in quel caso lo rimette in scena il `<noscript>` stampato
 * accanto al controllo.
 */
.attelbrg-loop-filters__submit--auto {
	display: none;
}