/**
 * Componenti condivisi del redesign.
 *
 * Ogni blocco qui serve ad almeno due aree (home, ricerca, profilo, blog,
 * area utente). Le pagine vengono ridisegnate in parallelo: definire card,
 * chip e stati una volta sola evita che ogni pagina ne inventi una propria,
 * cosa che il brief esclude ("card e stati coerenti").
 *
 * Solo variabili --ags-*: nessun valore colore letterale.
 */

/** CONTENITORE PUBBLICO **/

.ags-container
{
	width:          100%;
	max-width:      1240px;
	margin-inline:  auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

/** SEZIONI **/

.ags-section
{
	padding-block: var(--ags-space-7);
}

.ags-section--sand
{
	background: var(--ags-sand);
}

.ags-section__head
{
	max-width:     65ch;
	margin:        0 auto var(--ags-space-5);
	text-align:    center;
}

.ags-section__eyebrow
{
	color:         var(--ags-green);
	font-size:     13px;
	font-weight:   600;
	margin-bottom: var(--ags-space-1);
}

.ags-section__title
{
	font-size:     clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	margin-bottom: var(--ags-space-2);
}

.ags-section__lead
{
	color:  var(--ags-muted);
	margin: 0;
}

@media (max-width: 767.98px)
{
	.ags-section
	{
		padding-block: var(--ags-space-6);
	}
}

/** CARD — uniforma la .card Bootstrap già presente nel markup **/

.card
{
	--bs-card-bg:            var(--ags-white);
	--bs-card-border-color:  var(--ags-border);
	--bs-card-border-radius: var(--ags-radius-container);
	--bs-card-box-shadow:    none;

	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-container);
	box-shadow:       none;
}

/** CHIP — competenze, categorie, filtri attivi **/

.ags-chip
{
	align-items:   center;
	background:    var(--ags-sand);
	border-radius: var(--ags-radius-control);
	color:         var(--ags-ink);
	display:       inline-flex;
	font-size:     13px;
	font-weight:   600;
	gap:           6px;
	line-height:   1.4;
	max-width:     100%;
	overflow-wrap: anywhere;
	padding:       4px 10px;
}

.ags-chip--green
{
	background: var(--ags-green-soft);
	color:      var(--ags-forest);
}

/** IMMAGINI A RAPPORTO FISSO — niente altezze fisse senza rapporto **/

.ags-media
{
	aspect-ratio: 4 / 3;
	background:   var(--ags-sand);
	display:      block;
	-o-object-fit:   cover;
	   object-fit:   cover;
	width:        100%;
}

.ags-media--square
{
	aspect-ratio: 1 / 1;
}

.ags-avatar
{
	background:    var(--ags-sand);
	border-radius: var(--ags-radius-control);
	flex-shrink:   0;
	height:        56px;
	-o-object-fit:    cover;
	   object-fit:    cover;
	width:         56px;
}

.ags-avatar--lg
{
	height: 96px;
	width:  96px;
}

/**
 * CARD PERSONA — stessa gerarchia in home e nei risultati di ricerca.
 * Ordine atteso nel markup: media, nome, ruolo, zona, al massimo due
 * chip di competenza, azione "Vedi profilo".
 */

.ags-person-card
{
	background:     var(--ags-white);
	border:         1px solid var(--ags-border);
	border-radius:  var(--ags-radius-container);
	display:        flex;
	flex-direction: column;
	height:         100%;
	overflow:       hidden;
	transition:     border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Al passaggio la card si solleva appena, con un'ombra verde tenue. */
.ags-person-card:hover
{
	border-color: var(--ags-moss);
	box-shadow:   0 16px 32px -18px color-mix(in srgb, var(--ags-forest) 35%, transparent);
	transform:    translateY(-4px);
}

.ags-person-card:focus-within
{
	border-color: var(--ags-green);
}

.ags-person-card__media
{
	aspect-ratio: 4 / 3;
	background:   var(--ags-sand);
	-o-object-fit:   cover;
	   object-fit:   cover;
	width:        100%;
}

.ags-person-card__body
{
	display:        flex;
	flex:           1;
	flex-direction: column;
	gap:            var(--ags-space-1);
	padding:        var(--ags-space-3);
}

.ags-person-card__name
{
	font-size: 1.0625rem;
	margin:    0;
}

.ags-person-card__role
{
	color:       var(--ags-green);
	font-size:   13px;
	font-weight: 600;
	margin:      0;
}

.ags-person-card__place
{
	align-items: center;
	color:       var(--ags-muted);
	display:     flex;
	font-size:   14px;
	gap:         6px;
	margin:      0;
}

.ags-person-card__tags
{
	display:    flex;
	flex-wrap:  wrap;
	gap:        6px;
	margin-top: var(--ags-space-1);
}

.ags-person-card__action
{
	margin-top:  auto;
	padding-top: var(--ags-space-2);
}

/**
 * STATI — nessun risultato, errore, successo, azione riservata agli utenti
 * autenticati. Un blocco editoriale, non una riga "Nessun elemento".
 */

.ags-state
{
	align-items:    center;
	background:     var(--ags-sand);
	border-radius:  var(--ags-radius-container);
	display:        flex;
	flex-direction: column;
	gap:            var(--ags-space-2);
	padding:        var(--ags-space-6) var(--ags-space-4);
	text-align:     center;
}

.ags-state--compact
{
	padding: var(--ags-space-4);
}

.ags-state__icon
{
	background:    var(--ags-white);
	border-radius: var(--ags-radius-control);
	color:         var(--ags-forest);
	display:       grid;
	font-size:     20px;
	height:        48px;
	place-items:   center;
	width:         48px;
}

.ags-state__title
{
	font-size: 1.125rem;
	margin:    0;
}

.ags-state__text
{
	color:     var(--ags-muted);
	margin:    0;
	max-width: 48ch;
}

.ags-state__actions
{
	display:         flex;
	flex-wrap:       wrap;
	gap:             var(--ags-space-2);
	justify-content: center;
	margin-top:      var(--ags-space-1);
}

.ags-state--error .ags-state__icon
{
	color: var(--ags-danger);
}

.ags-state--success .ags-state__icon
{
	color: var(--ags-green);
}

.ags-state .spinner-border
{
	color: var(--ags-green);
}

/**
 * CAMPI FORM — etichetta sopra il campo, obbligatorietà con asterisco (non con un bordo
 * rosso permanente, vedi ags-tokens.css), input con icona. Nati nella modale di login,
 * promossi qui perché li usa anche il modulo di registrazione.
 */

.ags-field
{
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.ags-field__label
{
	color:       var(--ags-ink);
	font-size:   0.8125rem;
	font-weight: 600;
}

.ags-field__obbligatorio
{
	color: var(--ags-danger);
}

.ags-form__nota
{
	color:     var(--ags-muted);
	font-size: 0.75rem;
	margin:    -4px 0 0;
}

/* Errori di un singolo campo (es. requisiti della password): sotto il campo, non in un alert. */
.ags-form__errori
{
	color:      var(--ags-danger);
	font-size:  0.8125rem;
	list-style: none;
	margin:     6px 0 0;
	padding:    0;
}

.ags-input-group
{
	align-items: stretch;
	display:     flex;
}

.ags-input-group .form-control
{
	border-left:   0;
	border-radius: 0;
	padding-left:  4px;
}

.ags-input-group__icon,
.ags-input-group__toggle
{
	align-items:     center;
	background:      var(--ags-white);
	border:          1px solid var(--ags-border);
	color:           var(--ags-muted);
	display:         flex;
	justify-content: center;
	transition:      border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
	width:           44px;
}

.ags-input-group__icon
{
	border-radius: var(--ags-radius-control) 0 0 var(--ags-radius-control);
	border-right:  0;
}

.ags-input-group__toggle
{
	border-left:   0;
	border-radius: 0 var(--ags-radius-control) var(--ags-radius-control) 0;
	cursor:        pointer;
}

.ags-input-group:has(.ags-input-group__icon):not(:has(.ags-input-group__toggle)) .form-control
{
	border-radius: 0 var(--ags-radius-control) var(--ags-radius-control) 0;
}

.ags-input-group:focus-within .ags-input-group__icon,
.ags-input-group:focus-within .ags-input-group__toggle
{
	border-color: var(--ags-green);
}

/**
 * CARD DI AUTENTICAZIONE — recupero e reimpostazione password: una sola colonna
 * centrata sopra la fascia fotografica, stessa gerarchia della modale di login.
 */

.ags-auth-card
{
	box-shadow:    0 24px 60px -24px color-mix(in srgb, var(--ags-ink) 45%, transparent);
	margin-inline: auto;
	max-width:     440px;
}

.ags-auth-card__logo
{
	display: block;
	height:  40px;
	margin:  0 auto var(--ags-space-3);
}

.ags-auth-card__title
{
	font-size:     1.375rem;
	margin-bottom: var(--ags-space-2);
	text-align:    center;
}

.ags-auth-card__lead
{
	color:         var(--ags-muted);
	font-size:     0.9375rem;
	margin-bottom: var(--ags-space-4);
	text-align:    center;
}

/** PULSANTE DI LOGOUT — un <button> in un modulo POST al posto del vecchio link (componente
    pulsante-logout): prende le classi della voce che sostituisce; qui solo ciò che un pulsante non
    eredita da solo, perché resti alto come le voci di menu accanto. **/

.ags-logout-form
{
	margin: 0;
}

.ags-logout-form > button
{
	line-height: inherit;
}

/** PULSANTE DI CONTORNO — azione secondaria accanto a un .ags-btn-cta **/

.ags-btn-outline
{
	align-items:     center;
	background:      transparent;
	border:          1px solid var(--ags-forest);
	border-radius:   var(--ags-radius-control);
	color:           var(--ags-forest);
	display:         inline-flex;
	font-weight:     600;
	justify-content: center;
	min-height:      44px;
	padding:         10px 20px;
	text-decoration: none;
	transition:      background-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.ags-btn-outline:hover
{
	background: var(--ags-forest);
	color:      var(--ags-white);
}

/** ALERT — conferme ed errori dei form **/

.alert
{
	border-radius: var(--ags-radius-control);
}

.alert-success
{
	background:   var(--ags-green-soft);
	border-color: var(--ags-green-soft);
	color:        var(--ags-forest);
}

.alert-danger
{
	background:   var(--ags-danger-soft);
	border-color: var(--ags-danger-soft);
	color:        var(--ags-danger);
}

/** FINESTRE DI CONFERMA (SweetAlert2) — stesso riquadro, stessa tipografia, stessi
    pulsanti e stesse icone del resto del sito: di fabbrica la libreria restava sul suo
    tema blu/viola. Le variabili --swal2-* sono quelle esposte dal pacchetto stesso, così
    la correzione vale una volta sola per ogni finestra del sito, comprese quelle che non
    passano già una classe o un colore propri. **/

.swal2-container
{
	--swal2-border-radius:                    var(--ags-radius-container);
	--swal2-color:                            var(--ags-muted);
	--swal2-confirm-button-background-color:  var(--ags-forest);
	--swal2-confirm-button-border-radius:     var(--ags-radius-control);
	--swal2-cancel-button-background-color:   var(--ags-ink);
	--swal2-cancel-button-border-radius:      var(--ags-radius-control);
	--swal2-deny-button-background-color:     var(--ags-danger);
	--swal2-deny-button-border-radius:        var(--ags-radius-control);
}

/* Formato compatto: di fabbrica SweetAlert2 occupa 32em (512px) con icona e
   spaziature pensate per contenuti lunghi. Le conferme di questo sito sono
   quasi sempre una domanda breve: un riquadro più piccolo e denso legge
   come un componente dell'interfaccia, non come un'interruzione a schermo
   intero. */
.swal2-popup
{
	width:       23rem;
	padding:     1.75rem 1.75rem 1.5rem;
	box-shadow:  0 24px 48px -20px color-mix(in srgb, var(--ags-ink) 55%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--ags-ink) 25%, transparent);
	font-family: var(--ags-font);
}

/* Icona: stesso cerchio, un terzo più piccolo. Le linee interne (spunta,
   croce, anello di successo) sono in em relativi a questo elemento, quindi
   scalano di conseguenza con il solo font-size. */
.swal2-icon
{
	font-size:   0.6em;
	margin:      0 auto 0.9rem;
}

.swal2-icon .swal2-icon-content
{
	font-size: 2.5em;
}

/* Il titolo arriva a volte come testo semplice, a volte già avvolto in un <h3>
   (per un peso diverso da quello di default): stessa resa in entrambi i casi. */
.swal2-title,
.swal2-title h3
{
	color:          var(--ags-ink);
	font-size:      1.125rem;
	font-weight:    700;
	letter-spacing: -0.01em;
	margin:         0;
	padding:        0;
}

.swal2-html-container
{
	color:     var(--ags-muted);
	font-size: 0.9375rem;
	margin:    0.5rem 0 0;
}

.swal2-styled
{
	font-family: var(--ags-font);
	font-size:   0.875rem;
	font-weight: 600;
	padding:     9px 20px;
}

.swal2-styled:focus
{
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ags-forest) 35%, transparent);
}

/* Spaziatura fra i pulsanti dell'azione e tinta di rifinitura sull'hover, al posto
   del filtro di schiarimento generico di libreria (che sul verde del brand risultava
   slavato). Nessuna animazione: solo una breve transizione di colore. */
.swal2-actions
{
	gap:        0.625rem;
	margin-top: 1.25rem;
}

.swal2-confirm.swal2-styled:hover
{
	background-color: var(--ags-green) !important;
}

.swal2-cancel.swal2-styled:hover
{
	background-color: color-mix(in srgb, var(--ags-ink) 85%, white) !important;
}

.swal2-deny.swal2-styled:hover
{
	background-color: color-mix(in srgb, var(--ags-danger) 85%, black) !important;
}

/* Icone di successo/errore/avviso nel verde e nel rosso del brand invece di quelli di
   libreria: l'avviso (usato prima di un'azione distruttiva, es. "Elimina") condivide
   il rosso perché in questo sito non esiste un terzo colore dedicato. */
.swal2-icon.swal2-success
{
	border-color: var(--ags-forest);
	color:        var(--ags-forest);
}

.swal2-icon.swal2-warning
{
	border-color: var(--ags-danger);
	color:        var(--ags-danger);
}

.swal2-icon.swal2-info
{
	border-color: var(--ags-forest);
	color:        var(--ags-forest);
}

.swal2-icon.swal2-success .swal2-success-ring
{
	border-color: color-mix(in srgb, var(--ags-forest) 30%, transparent);
}

.swal2-icon.swal2-success [class^="swal2-success-line"]
{
	background-color: var(--ags-forest);
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"]
{
	background-color: var(--ags-danger);
}

/** CONFERMA DI AMICIZIA (SweetAlert2, chiediConfermaAmicizia() in common.js) — protagonista è la
    richiesta: la domanda sulla referenza è una riga piccola e facoltativa, con due pastiglie Sì/No,
    e la spiegazione resta dietro l'icona "?". **/

.ags-amicizia__testo
{
	margin:    0;
	text-wrap: balance;
}

.ags-amicizia__testo b
{
	color: var(--ags-ink);
}

.ags-amicizia__domanda
{
	margin-top: 1rem;
}

.ags-amicizia__riga
{
	align-items:     center;
	display:         flex;
	flex-wrap:       wrap;
	gap:             0.375rem 0.5rem;
	justify-content: center;
}

.ags-amicizia__legenda
{
	color:     var(--ags-muted);
	font-size: 0.8125rem;
}

.ags-amicizia__info
{
	align-items:     center;
	background:      none;
	border:          1px solid var(--ags-border);
	border-radius:   50%;
	color:           var(--ags-muted);
	cursor:          pointer;
	display:         inline-flex;
	flex:            none;
	font-size:       0.6875rem;
	font-weight:     700;
	height:          18px;
	justify-content: center;
	line-height:     1;
	padding:         0;
	position:        relative;
	transition:      border-color 0.15s ease, color 0.15s ease;
	width:           18px;
}

/* Zona di tocco più ampia dell'icona disegnata */
.ags-amicizia__info::after
{
	content:  "";
	inset:    -13px;
	position: absolute;
}

.ags-amicizia__info:hover,
.ags-amicizia__info[aria-expanded="true"]
{
	border-color: var(--ags-forest);
	color:        var(--ags-forest);
}

.ags-amicizia__info:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

.ags-amicizia__scelte
{
	display: inline-flex;
	gap:     0.375rem;
}

.ags-amicizia__scelta
{
	cursor:   pointer;
	margin:   0;
	position: relative;
}

/* Il radio vero resta nella pagina (tastiera, lettori di schermo) ma invisibile: si vede la pastiglia */
.ags-amicizia__scelta input
{
	cursor:   pointer;
	inset:    0;
	margin:   0;
	opacity:  0;
	position: absolute;
}

.ags-amicizia__scelta span
{
	align-items:      center;
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    999px;
	color:            var(--ags-ink);
	display:          inline-flex;
	font-size:        0.8125rem;
	font-weight:      600;
	justify-content:  center;
	min-height:       32px;
	min-width:        48px;
	padding:          0 0.75rem;
	transition:       background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ags-amicizia__scelta:hover span
{
	border-color: var(--ags-moss);
}

.ags-amicizia__scelta input:checked + span
{
	background-color: var(--ags-green-soft);
	border-color:     var(--ags-forest);
	color:            var(--ags-forest);
}

.ags-amicizia__scelta input:focus-visible + span
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

.ags-amicizia__aiuto
{
	font-size:   0.8125rem;
	line-height: 1.45;
	margin:      0.5rem 0 0;
	text-wrap:   balance;
}

/* Annulla come pulsante secondario: contorno sul bianco, non un secondo blocco scuro */
.swal2-cancel.ags-swal-secondario.swal2-styled
{
	background-color: var(--ags-white);
	box-shadow:       inset 0 0 0 1px var(--ags-border);
	color:            var(--ags-ink);
}

.swal2-cancel.ags-swal-secondario.swal2-styled:hover
{
	background-color: var(--ags-sand) !important;
}

/** FINESTRA DI CONFERMA ELIMINAZIONE — dialogo dedicato alle azioni distruttive, non
    SweetAlert2: mette in evidenza l'elemento da eliminare in un riquadro a sé invece
    di infilarlo nella stessa frase della domanda. Markup e comportamento (focus,
    Esc, click fuori) in resources/js/common.js, funzione confermaEliminazione(). **/

.ags-confirm-overlay
{
	align-items:      center;
	background:       color-mix(in srgb, var(--ags-ink) 55%, transparent);
	bottom:           0;
	display:          flex;
	justify-content:  center;
	left:             0;
	opacity:          0;
	padding:          var(--ags-space-3);
	position:         fixed;
	right:            0;
	top:              0;
	transition:       opacity 0.15s ease;
	z-index:          1080;
}

.ags-confirm-overlay--visibile
{
	opacity: 1;
}

.ags-confirm
{
	background:     var(--ags-white);
	border-radius:  var(--ags-radius-container);
	box-shadow:     0 24px 48px -20px color-mix(in srgb, var(--ags-ink) 55%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--ags-ink) 25%, transparent);
	max-width:      23rem;
	padding:        1.75rem;
	text-align:     center;
	transform:      scale(0.96) translateY(4px);
	transition:     transform 0.15s ease;
	width:          100%;
}

.ags-confirm-overlay--visibile .ags-confirm
{
	transform: scale(1) translateY(0);
}

.ags-confirm__icona
{
	align-items:      center;
	background:       var(--ags-danger-soft);
	border-radius:    50%;
	color:            var(--ags-danger);
	display:          flex;
	font-size:        1.375rem;
	height:           56px;
	justify-content:  center;
	margin:           0 auto 1rem;
	width:            56px;
}

.ags-confirm__titolo
{
	color:          var(--ags-ink);
	font-size:      1.125rem;
	font-weight:    700;
	letter-spacing: -0.01em;
	margin:         0 0 0.5rem;
}

.ags-confirm__testo
{
	color:       var(--ags-muted);
	font-size:   0.9375rem;
	line-height: 1.5;
	margin:      0;
}

/* Nome dell'elemento in un riquadro a parte: nella domanda originale via SweetAlert2
   era in grassetto nella stessa riga, facile da leggere di sfuggita e confondere con
   un altro elemento della stessa lista quando i nomi sono simili. */
.ags-confirm__elemento
{
	background:     var(--ags-sand);
	border-radius:  var(--ags-radius-control);
	color:          var(--ags-ink);
	display:        block;
	font-weight:    600;
	margin:         0.75rem 0;
	overflow:       hidden;
	padding:        0.5rem 0.875rem;
	text-overflow:  ellipsis;
	white-space:    nowrap;
}

.ags-confirm__nota
{
	color:      var(--ags-muted);
	font-size:  0.8125rem;
	margin:     0.75rem 0 0;
}

.ags-confirm__azioni
{
	display:    flex;
	gap:        0.625rem;
	margin-top: 1.5rem;
}

.ags-confirm__btn
{
	border:          1px solid transparent;
	border-radius:   var(--ags-radius-control);
	cursor:          pointer;
	flex:            1;
	font-family:     var(--ags-font);
	font-size:       0.875rem;
	font-weight:     600;
	padding:         10px 16px;
	transition:      background-color 0.15s ease, border-color 0.15s ease;
}

.ags-confirm__btn:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

.ags-confirm__btn--annulla
{
	background:   var(--ags-white);
	border-color: var(--ags-border);
	color:        var(--ags-ink);
}

.ags-confirm__btn--annulla:hover
{
	background: var(--ags-sand);
}

.ags-confirm__btn--elimina
{
	background: var(--ags-danger);
	color:      var(--ags-white);
}

.ags-confirm__btn--elimina:hover
{
	background: color-mix(in srgb, var(--ags-danger) 85%, black);
}

/** PAGINAZIONE — le tabelle DataTables delle modali pubbliche usavano il blu di Bootstrap **/

.pagination
{
	--bs-pagination-color:               var(--ags-forest);
	--bs-pagination-hover-color:         var(--ags-forest);
	--bs-pagination-hover-bg:            var(--ags-sand);
	--bs-pagination-focus-color:         var(--ags-forest);
	--bs-pagination-focus-bg:            var(--ags-sand);
	--bs-pagination-focus-box-shadow:    0 0 0 3px rgba(63, 122, 88, 0.2);
	--bs-pagination-active-bg:           var(--ags-forest);
	--bs-pagination-active-border-color: var(--ags-forest);
}

/** AREA TOCCABILE SU MOBILE — anche i pulsanti compatti arrivano a 44px **/

@media (max-width: 575.98px)
{
	.btn
	{
		align-items:     center;
		display:         inline-flex;
		justify-content: center;
		min-height:      44px;
	}
}

/** MOVIMENTO RIDOTTO **/

@media (prefers-reduced-motion: reduce)
{
	.ags-person-card
	{
		transition: none;
	}

	.ags-person-card:hover
	{
		transform: none;
	}

	.ags-confirm-overlay,
	.ags-confirm
	{
		transition: none;
	}
}

/**
 * RICHIESTE E NOTIFICHE — pulsante unico dell'header (componente centro-notifiche).
 * Stesso aspetto nell'header pubblico, nella topbar delle pagine social e nell'area utente.
 * Il pannello non usa Popper (data-bs-display="static"): su mobile si apre a tutta larghezza.
 */

.ags-notifiche
{
	position: relative;
}

/* Nelle topbar con avatar (sito pubblico da autenticati e area utente) il pulsante non deve
   toccare l'avatar: il badge sporge di qualche pixel oltre il bordo destro. */
.topbar-custom #topbar .ags-notifiche
{
	margin-right: var(--ags-space-2);
}

.ags-notifiche__btn
{
	align-items:      center;
	background-color: var(--ags-sand);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-control);
	color:            var(--ags-forest);
	cursor:           pointer;
	display:          inline-flex;
	font-size:        1.0625rem;
	height:           40px;
	justify-content:  center;
	padding:          0;
	position:         relative;
	transition:       background-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
	width:            40px;
}

.ags-notifiche__btn:hover,
.ags-notifiche__btn[aria-expanded="true"]
{
	background-color: var(--ags-green-soft);
	border-color:     var(--ags-moss);
	color:            var(--ags-forest);
}

.ags-notifiche__btn:active
{
	transform: scale(0.96);
}

.ags-notifiche__btn:focus-visible
{
	outline:        2px solid var(--ags-green);
	outline-offset: 2px;
}

.ags-notifiche__badge
{
	background-color: var(--ags-danger);
	border:           2px solid var(--ags-white);
	border-radius:    999px;
	color:            var(--ags-white);
	font-size:        11px;
	font-weight:      700;
	height:           20px;
	line-height:      16px;
	min-width:        20px;
	padding:          0 5px;
	position:         absolute;
	right:            -7px;
	text-align:       center;
	top:              -7px;
}

.ags-notifiche .ags-notifiche__pannello
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-container);
	box-shadow:       0 24px 60px -24px color-mix(in srgb, var(--ags-ink) 38%, transparent);
	color:            var(--ags-ink);
	font-family:      var(--ags-font);
	overflow:         hidden;
	padding:          0;
	width:            min(380px, calc(100vw - 24px));
}

.ags-notifiche .ags-notifiche__pannello[data-bs-popper]
{
	margin-top: 10px;
}

.ags-notifiche__testa
{
	align-items:     center;
	display:         flex;
	gap:             var(--ags-space-2);
	justify-content: space-between;
	padding:         14px 16px 10px;
}

.ags-notifiche__titolo
{
	color:       var(--ags-ink);
	font-size:   1rem;
	font-weight: 700;
	margin:      0;
}

.ags-notifiche__link
{
	background:  none;
	border:      0;
	color:       var(--ags-forest);
	font-size:   0.8125rem;
	font-weight: 600;
	min-height:  32px;
	padding:     0;
}

.ags-notifiche__link:hover
{
	color:                 var(--ags-green);
	text-decoration:       underline;
	text-underline-offset: 3px;
}

/* Schede: selettore segmentato come l'ordinamento del blog. */
.ags-notifiche__schede
{
	background-color: var(--ags-sand);
	border-radius:    var(--ags-radius-control);
	display:          flex;
	gap:              4px;
	margin:           0 12px;
	padding:          4px;
}

.ags-notifiche__scheda
{
	align-items:      center;
	background:       transparent;
	border:           0;
	border-radius:    6px;
	color:            var(--ags-muted);
	display:          inline-flex;
	flex:             1 1 0;
	font-size:        0.8125rem;
	font-weight:      600;
	gap:              6px;
	justify-content:  center;
	min-height:       36px;
	padding:          4px 6px;
	transition:       background-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
	white-space:      nowrap;
}

.ags-notifiche__scheda:hover
{
	color: var(--ags-ink);
}

.ags-notifiche__scheda[aria-selected="true"]
{
	background-color: var(--ags-white);
	box-shadow:       var(--ags-shadow-soft);
	color:            var(--ags-forest);
}

.ags-notifiche__conteggio
{
	background-color: var(--ags-danger);
	border-radius:    999px;
	color:            var(--ags-white);
	font-size:        11px;
	line-height:      1;
	min-width:        18px;
	padding:          3px 5px;
	text-align:       center;
}

.ags-notifiche__lista
{
	list-style:          none;
	margin:              0;
	max-height:          min(420px, 60vh);
	overflow-y:          auto;
	overscroll-behavior: contain;
	padding:             8px;
}

.ags-notifiche__voce
{
	border-radius:         var(--ags-radius-control);
	display:               grid;
	gap:                   12px;
	grid-template-columns: 40px minmax(0, 1fr);
	padding:               10px 8px;
}

.ags-notifiche__voce + .ags-notifiche__voce
{
	margin-top: 2px;
}

/* Notifica non letta: fondo tinto e testo pieno; lo stato è anche scritto per i lettori di schermo. */
.ags-notifiche__voce--nuova
{
	background-color: color-mix(in srgb, var(--ags-green-soft) 70%, var(--ags-white));
}

.ags-notifiche__avatar
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    50%;
	height:           40px;
	-o-object-fit:       cover;
	   object-fit:       cover;
	width:            40px;
}

.ags-notifiche__corpo
{
	min-width: 0;
}

.ags-notifiche__testo
{
	color:       var(--ags-ink);
	font-size:   0.875rem;
	line-height: 1.4;
	margin:      0;
}

.ags-notifiche__nome
{
	color:           var(--ags-ink);
	font-weight:     700;
	text-decoration: none;
}

a.ags-notifiche__nome:hover
{
	color:                 var(--ags-forest);
	text-decoration:       underline;
	text-underline-offset: 3px;
}

.ags-notifiche__meta
{
	align-items: center;
	color:       var(--ags-muted);
	display:     flex;
	flex-wrap:   wrap;
	font-size:   0.75rem;
	gap:         4px 10px;
	margin:      3px 0 0;
}

.ags-notifiche__categoria
{
	background-color: var(--ags-sand);
	border-radius:    999px;
	color:            var(--ags-forest);
	font-size:        0.6875rem;
	font-weight:      700;
	padding:          2px 8px;
}

.ags-notifiche__azioni
{
	align-items: center;
	display:     flex;
	flex-wrap:   wrap;
	gap:         6px;
	margin-top:  8px;
}

.ags-notifiche__azioni .btn
{
	font-size:   0.8125rem;
	font-weight: 600;
	min-height:  34px;
	padding:     4px 12px;
}

.ags-notifiche__azioni .btn-link
{
	color:           var(--ags-muted);
	padding-inline:  6px;
	text-decoration: none;
}

.ags-notifiche__azioni .btn-link:hover
{
	color: var(--ags-ink);
}

.ags-notifiche__azioni .ags-notifiche__letta
{
	color:       var(--ags-forest);
	min-height:  28px;
	padding:     0;
}

/* Conferma in linea: domanda sull'interazione, numero da condividere o rifiuto. */
.ags-notifiche__domanda
{
	background-color: var(--ags-sand);
	border-radius:    var(--ags-radius-control);
	font-size:        0.8125rem;
	font-weight:      600;
	margin-top:       8px;
	padding:          10px;
}

.ags-notifiche__domanda label
{
	display:       block;
	margin-bottom: 6px;
}

.ags-notifiche__campo
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-control);
	color:            var(--ags-ink);
	font-size:        1rem;
	min-height:       40px;
	padding:          6px 10px;
	width:            100%;
}

.ags-notifiche__campo:focus
{
	border-color: var(--ags-green);
	box-shadow:   0 0 0 3px var(--ags-green-soft);
	outline:      none;
}

.ags-notifiche__errore
{
	color:       var(--ags-danger);
	font-size:   0.75rem;
	font-weight: 500;
	margin:      6px 0 0;
}

.ags-notifiche__vuoto
{
	align-items:    center;
	color:          var(--ags-muted);
	display:        flex;
	flex-direction: column;
	font-size:      0.875rem;
	gap:            8px;
	padding:        28px 16px;
	text-align:     center;
}

.ags-notifiche__vuoto > i,
.ags-notifiche__vuoto > svg
{
	color:     var(--ags-moss);
	font-size: 1.5rem;
}

.ags-notifiche__fondo
{
	align-items:     center;
	border-top:      1px solid var(--ags-border);
	color:           var(--ags-forest);
	display:         flex;
	font-size:       0.875rem;
	font-weight:     600;
	gap:             8px;
	justify-content: center;
	padding:         12px 16px;
	text-decoration: none;
}

.ags-notifiche__fondo:hover
{
	background-color: var(--ags-sand);
	color:            var(--ags-forest);
}

@media (max-width: 575.98px)
{
	.ags-notifiche .ags-notifiche__pannello[data-bs-popper]
	{
		left:       12px;
		margin-top: 0;
		position:   fixed;
		right:      12px;
		top:        76px;
		width:      auto;
	}
}

@media (prefers-reduced-motion: reduce)
{
	.ags-notifiche__btn,
	.ags-notifiche__scheda
	{
		transition: none;
	}

	.ags-notifiche__btn:active
	{
		transform: none;
	}
}

/**
 * SELECT2 — un solo aspetto per tutte le tendine del sito, pubblico e area utente.
 *
 * Il foglio di Select2 arriva da app.js ed è iniettato dopo questo: ogni regola ripete
 * la catena di classi di Select2 preceduta da :root, così vince di un livello senza
 * !important. Le pagine cambiano solo l'altezza, tramite --ags-select-h.
 */

:root
{
	--ags-select-h:     44px;
	--ags-select-ring:  0 0 0 3px rgba(63, 122, 88, 0.15);
	--ags-select-ombra: 0 18px 40px -16px rgba(32, 49, 42, 0.32), 0 2px 6px -2px rgba(32, 49, 42, 0.10);
}

/* Campo chiuso */

:root .select2-container--default .select2-selection--single,
:root .select2-container--default .select2-selection--multiple
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-control);
	font-family:      var(--ags-font);
	transition:       border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

:root .select2-container .select2-selection--single
{
	align-items: center;
	display:     flex;
	height:      var(--ags-select-h);
	position:    relative;
}

:root .select2-container--default .select2-selection--single .select2-selection__rendered
{
	color:         var(--ags-ink);
	flex:          1 1 auto;
	font-size:     0.9375rem;
	font-weight:   500;
	line-height:   calc(var(--ags-select-h) - 2px);
	min-width:     0;
	padding-left:  14px;
	padding-right: 40px;
}

:root .select2-container--default .select2-selection--single.select2-selection--clearable .select2-selection__rendered
{
	padding-right: 68px;
}

:root .select2-container--default .select2-selection--single .select2-selection__placeholder
{
	color:       var(--ags-muted);
	font-weight: 400;
}

:root .select2-container--default:not(.select2-container--disabled) .select2-selection--single:hover,
:root .select2-container--default:not(.select2-container--disabled) .select2-selection--multiple:hover
{
	border-color: var(--ags-moss);
}

/* Aperto o con il focus: bordo verde e alone morbido, angoli sempre arrotondati */

:root .select2-container--default.select2-container--focus .select2-selection--single,
:root .select2-container--default.select2-container--focus .select2-selection--multiple,
:root .select2-container--default.select2-container--open .select2-selection--single,
:root .select2-container--default.select2-container--open .select2-selection--multiple
{
	border-color: var(--ags-green);
	box-shadow:   var(--ags-select-ring);
	outline:      0;
}

:root .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
:root .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
:root .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
:root .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple
{
	border-radius: var(--ags-radius-control);
}

:root .select2-container--default.select2-container--disabled .select2-selection--single,
:root .select2-container--default.select2-container--disabled .select2-selection--multiple
{
	background-color: var(--ags-sand);
	cursor:           not-allowed;
}

/* Freccia: una V sottile che si capovolge all'apertura */

:root .select2-container--default .select2-selection--single .select2-selection__arrow
{
	height: 100%;
	right:  8px;
	top:    0;
	width:  24px;
}

:root .select2-container--default .select2-selection--single .select2-selection__arrow b
{
	border-color: var(--ags-muted);
	border-style: solid;
	border-width: 0 2px 2px 0;
	height:       8px;
	left:         50%;
	margin:       -6px 0 0 -4px;
	top:          50%;
	transform:    rotate(45deg);
	transition:   transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), margin-top 0.25s cubic-bezier(0.25, 1, 0.5, 1);
	width:        8px;
}

:root .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b
{
	border-color: var(--ags-forest);
	border-width: 0 2px 2px 0;
	margin-top:   -2px;
	transform:    rotate(-135deg);
}

/* Pulsante per svuotare: cerchio discreto che diventa rosso al passaggio */

:root .select2-container--default .select2-selection--single .select2-selection__clear,
:root .select2-container--default .select2-selection--multiple .select2-selection__clear
{
	align-items:     center;
	background:      transparent;
	border:          0;
	border-radius:   50%;
	color:           var(--ags-muted);
	cursor:          pointer;
	display:         inline-flex;
	float:           none;
	font-size:       1.125rem;
	font-weight:     400;
	height:          26px;
	justify-content: center;
	line-height:     1;
	margin:          0;
	padding:         0;
	position:        absolute;
	right:           36px;
	top:             50%;
	transform:       translateY(-50%);
	width:           26px;
	z-index:         1;
}

:root .select2-container--default .select2-selection--multiple .select2-selection__clear
{
	right: 8px;
}

:root .select2-container--default .select2-selection--single .select2-selection__clear:hover,
:root .select2-container--default .select2-selection--multiple .select2-selection__clear:hover
{
	background-color: var(--ags-danger-soft);
	color:            var(--ags-danger);
}

/* Scelta multipla: le voci diventano chip */

:root .select2-container--default .select2-selection--multiple
{
	align-items: center;
	cursor:      text;
	display:     flex;
	flex-wrap:   wrap;
	gap:         6px;
	min-height:  var(--ags-select-h);
	padding:     6px 10px;
	position:    relative;
}

:root .select2-container--default .select2-selection--multiple.select2-selection--clearable
{
	padding-right: 40px;
}

:root .select2-container .select2-selection--multiple .select2-selection__rendered
{
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
	margin:    0;
	padding:   0;
}

:root .select2-container .select2-selection--multiple .select2-selection__rendered:empty
{
	display: none;
}

:root .select2-container--default .select2-selection--multiple .select2-selection__choice
{
	align-items:      center;
	background-color: var(--ags-green-soft);
	border:           0;
	border-radius:    999px;
	color:            var(--ags-forest);
	display:          inline-flex;
	font-size:        0.8125rem;
	font-weight:      600;
	line-height:      1.2;
	margin:           0;
	padding:          5px 10px 5px 30px;
}

:root .select2-container--default .select2-selection--multiple .select2-selection__choice__display
{
	overflow:      hidden;
	padding:       0;
	text-overflow: ellipsis;
}

:root .select2-container--default .select2-selection--multiple .select2-selection__choice__remove
{
	align-items:     center;
	background:      transparent;
	border:          0;
	border-radius:   50%;
	color:           var(--ags-forest);
	display:         inline-flex;
	font-size:       1rem;
	font-weight:     400;
	height:          22px;
	justify-content: center;
	left:            5px;
	line-height:     1;
	padding:         0;
	top:             50%;
	transform:       translateY(-50%);
	width:           22px;
}

:root .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
:root .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus
{
	background-color: var(--ags-forest);
	color:            var(--ags-white);
}

:root .select2-container .select2-search--inline
{
	flex:      1 1 24px;
	min-width: 24px;
}

:root .select2-container .select2-search--inline .select2-search__field
{
	color:       var(--ags-ink);
	font-family: var(--ags-font);
	font-size:   0.9375rem;
	height:      28px;
	line-height: 28px;
	margin:      0;
	/* ags-tokens.css dà 96px a ogni textarea: il campo di ricerca in linea resta di una riga */
	min-height:  0;
	padding:     0 4px;
	resize:      none;
}

:root .select2-container .select2-search--inline .select2-search__field::-moz-placeholder
{
	color: var(--ags-muted);
}

:root .select2-container .select2-search--inline .select2-search__field::placeholder
{
	color: var(--ags-muted);
}

/* Tendina aperta: pannello sospeso, staccato dal campo, con ingresso breve */

:root .select2-container--default .select2-dropdown
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-container);
	box-shadow:       var(--ags-select-ombra);
	font-family:      var(--ags-font);
	overflow:         hidden;
	padding:          6px;
}

:root .select2-container--open .select2-dropdown--below
{
	animation-duration:        0.18s;
	animation-name:            ags-select-scende;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	border-radius:             var(--ags-radius-container);
	border-top:                1px solid var(--ags-border);
	margin-top:                6px;
}

:root .select2-container--open .select2-dropdown--above
{
	animation-duration:        0.18s;
	animation-name:            ags-select-sale;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	border-bottom:             1px solid var(--ags-border);
	border-radius:             var(--ags-radius-container);
	margin-top:                -6px;
}

@keyframes ags-select-scende
{
	from
	{
		opacity:   0;
		transform: translateY(-6px);
	}
}

@keyframes ags-select-sale
{
	from
	{
		opacity:   0;
		transform: translateY(6px);
	}
}

:root .select2-container--default .select2-search--dropdown
{
	padding: 0 0 6px;
}

:root .select2-container--default .select2-search--dropdown .select2-search__field
{
	background-color: var(--ags-cream);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-control);
	color:            var(--ags-ink);
	font-family:      var(--ags-font);
	font-size:        0.9375rem;
	height:           40px;
	outline:          0;
	padding:          8px 12px;
	transition:       border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

:root .select2-container--default .select2-search--dropdown .select2-search__field:focus
{
	background-color: var(--ags-white);
	border-color:     var(--ags-green);
	box-shadow:       var(--ags-select-ring);
}

:root .select2-container--default .select2-results > .select2-results__options
{
	max-height:          264px;
	overscroll-behavior: contain;
	scrollbar-color:     var(--ags-border) transparent;
	scrollbar-width:     thin;
}

:root .select2-container--default .select2-results__option
{
	border-radius: 6px;
	color:         var(--ags-ink);
	font-size:     0.9375rem;
	line-height:   1.35;
	padding:       10px 38px 10px 12px;
	position:      relative;
}

:root .select2-container--default .select2-results__option + .select2-results__option
{
	margin-top: 2px;
}

:root .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable
{
	background-color: var(--ags-green-soft);
	color:            var(--ags-forest);
}

:root .select2-container--default .select2-results__option--selected
{
	background-color: transparent;
	color:            var(--ags-forest);
	font-weight:      600;
}

/* Voce scelta: spunta a destra, oltre al grassetto */
:root .select2-container--default .select2-results__option--selected::after
{
	border-color: var(--ags-green);
	border-style: solid;
	border-width: 0 2px 2px 0;
	content:      "";
	height:       11px;
	margin-top:   -7px;
	position:     absolute;
	right:        16px;
	top:          50%;
	transform:    rotate(45deg);
	width:        6px;
}

:root .select2-container--default .select2-results__option--disabled
{
	color:  var(--ags-muted);
	cursor: not-allowed;
}

:root .select2-container--default .select2-results__option.select2-results__message,
:root .select2-container--default .select2-results__option.loading-results
{
	color:     var(--ags-muted);
	font-size: 0.875rem;
	padding:   12px;
}

:root .select2-container--default .select2-results__group
{
	color:          var(--ags-muted);
	font-size:      0.6875rem;
	font-weight:    700;
	letter-spacing: 0.06em;
	padding:        10px 12px 4px;
	text-transform: uppercase;
}

/* app.css colora di rosso fisso ogni select obbligatoria, anche prima che l'utente scriva:
   qui torna il bordo normale con gli stessi stati degli altri campi. */
:root select[required] + .select2-container--default .select2-selection
{
	border: 1px solid var(--ags-border) !important;
}

:root select[required] + .select2-container--default:not(.select2-container--disabled) .select2-selection:hover
{
	border-color: var(--ags-moss) !important;
}

:root select[required] + .select2-container--default.select2-container--focus .select2-selection,
:root select[required] + .select2-container--default.select2-container--open .select2-selection
{
	border-color: var(--ags-green) !important;
}

/* Su telefono i campi di ricerca restano a 16px: iOS altrimenti ingrandisce la pagina */
@media (max-width: 575.98px)
{
	:root .select2-container--default .select2-search--dropdown .select2-search__field,
	:root .select2-container .select2-search--inline .select2-search__field
	{
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce)
{
	:root .select2-container--open .select2-dropdown--below,
	:root .select2-container--open .select2-dropdown--above
	{
		animation-name: none;
	}

	:root .select2-container--default .select2-selection--single,
	:root .select2-container--default .select2-selection--multiple,
	:root .select2-container--default .select2-selection--single .select2-selection__arrow b
	{
		transition: none;
	}
}

/**
 * LOCALITÀ — campo di completamento per regione, provincia o comune
 * (LocalitaAutocompleteComponent). Si scrive direttamente nel campo e i suggerimenti
 * compaiono sotto: stesso aspetto delle tendine Select2 qui sopra, stessa altezza
 * regolabile con --ags-select-h.
 */

:root .ags-localita
{
	position: relative;
	width:    100%;
}

:root .ags-localita__campo
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-control);
	color:            var(--ags-ink);
	font-family:      var(--ags-font);
	font-size:        0.9375rem;
	font-weight:      500;
	height:           var(--ags-select-h);
	outline:          0;
	padding:          0 40px 0 38px;
	transition:       border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
	width:            100%;
}

:root .ags-localita__campo::-moz-placeholder
{
	color:       var(--ags-muted);
	font-weight: 400;
	opacity:     1;
}

:root .ags-localita__campo::placeholder
{
	color:       var(--ags-muted);
	font-weight: 400;
	opacity:     1;
}

:root .ags-localita__campo:hover
{
	border-color: var(--ags-moss);
}

:root .ags-localita__campo:focus
{
	border-color: var(--ags-green);
	box-shadow:   var(--ags-select-ring);
}

:root .ags-localita__icona
{
	color:          var(--ags-muted);
	font-size:      0.9375rem;
	left:           14px;
	pointer-events: none;
	position:       absolute;
	top:            50%;
	transform:      translateY(-50%);
}

:root .ags-localita:focus-within .ags-localita__icona
{
	color: var(--ags-green);
}

:root .ags-localita__svuota
{
	align-items:     center;
	background:      transparent;
	border:          0;
	border-radius:   50%;
	color:           var(--ags-muted);
	display:         inline-flex;
	height:          32px;
	justify-content: center;
	padding:         0;
	position:        absolute;
	right:           6px;
	top:             50%;
	transform:       translateY(-50%);
	transition:      background-color 0.2s ease, color 0.2s ease;
	width:           32px;
}

:root .ags-localita__svuota:hover,
:root .ags-localita__svuota:focus-visible
{
	background-color: var(--ags-sand);
	color:            var(--ags-ink);
}

/* Il pannello vive nel body in posizione fissa (coordinate calcolate dal componente):
   sopra modali (1055) e fogli mobili (1040), così nessun riquadro con scorrimento lo taglia */
:root .ags-localita__pannello
{
	animation:        ags-select-scende 0.18s cubic-bezier(0.16, 1, 0.3, 1);
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-container);
	box-shadow:       var(--ags-select-ombra);
	font-family:      var(--ags-font);
	padding:          6px;
	position:         fixed;
	z-index:          1075;
}

:root .ags-localita__pannello.is-sopra
{
	animation-name: ags-select-sale;
}

:root .ags-localita__messaggio
{
	color:     var(--ags-muted);
	font-size: 0.875rem;
	margin:    0;
	padding:   12px;
}

:root .ags-localita__lista
{
	list-style:          none;
	margin:              0;
	max-height:          var(--ags-localita-max, 264px);
	overflow-y:          auto;
	overscroll-behavior: contain;
	padding:             0;
	scrollbar-color:     var(--ags-border) transparent;
	scrollbar-width:     thin;
}

:root .ags-localita__lista:empty
{
	display: none;
}

:root .ags-localita__opzione
{
	border-radius: 6px;
	color:         var(--ags-ink);
	cursor:        pointer;
	font-size:     0.9375rem;
	line-height:   1.35;
	padding:       10px 12px;
}

:root .ags-localita__opzione + .ags-localita__opzione
{
	margin-top: 2px;
}

:root .ags-localita__opzione.is-attiva
{
	background-color: var(--ags-green-soft);
	color:            var(--ags-forest);
}

/* La parte che corrisponde a quanto scritto: in grassetto, senza l'evidenziatore giallo del tema */
:root .ags-localita__opzione mark
{
	background:  none;
	color:       inherit;
	font-weight: 700;
	padding:     0;
}

/* Su telefono resta a 16px: iOS altrimenti ingrandisce la pagina */
@media (max-width: 575.98px)
{
	:root .ags-localita__campo
	{
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce)
{
	:root .ags-localita__pannello
	{
		animation: none;
	}

	:root .ags-localita__campo
	{
		transition: none;
	}
}