/*
 * Bagliori Booking — frontend
 * Mobile first, nessuna dipendenza, colori via custom properties.
 */

.bgl-widget,
.bgl-catalog {
	--bgl-accent: #7b3fa0;
	--bgl-fg: #1f2328;
	--bgl-muted: #626b76;
	--bgl-line: #dfe3e8;
	--bgl-bg: #fff;
	--bgl-soft: #f6f7f9;
	--bgl-ok: #1a7f4b;
	--bgl-ok-bg: #e8f5ee;
	--bgl-low: #9a6100;
	--bgl-low-bg: #fdf3e2;
	--bgl-off: #8a939d;
	--bgl-block: #a33;
	--bgl-block-bg: #fbecec;
	--bgl-radius: 12px;

	/*
	 * I pulsanti principali non seguono il colore d'accento: sono in bianco e
	 * nero, e al passaggio del mouse si rovesciano. Il bordo bianco a riposo
	 * su pagina bianca non si vede, ed e' voluto: serve dove il pulsante
	 * appoggia su uno sfondo scuro o colorato, dove senza si confonderebbe.
	 * Sono variabili e non colori scritti dentro le regole cosi' che cambiarli
	 * sia un posto solo, e che un tema possa sovrascriverli senza !important.
	 */
	--bgl-btn-bg: #111318;
	--bgl-btn-fg: #fff;
	--bgl-btn-bd: #fff;
	--bgl-btn-bg-over: #fff;
	--bgl-btn-fg-over: #111318;
	--bgl-btn-bd-over: #111318;

	/*
	 * Fattore di scala del widget. Tutte le misure interne sono espresse in em,
	 * quindi cambiare questo numero ingrandisce o rimpicciolisce l'intero
	 * modulo mantenendo le proporzioni. Si può sovrascrivere per singolo
	 * shortcode con l'attributo scale.
	 */
	--bgl-scale: 1.3;

	box-sizing: border-box;
	color: var(--bgl-fg);
	line-height: 1.5;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Il widget occupa tutta la larghezza che il tema gli concede: nella vista a
 * date le colonne hanno bisogno di spazio, e un limite fisso lasciava mezza
 * riga vuota. A essere limitati sono solo i blocchi di testo qui sotto, dove
 * una riga lunghissima sarebbe faticosa da leggere.
 */
.bgl-widget {
	font-size: calc(16px * var(--bgl-scale));
	max-width: var(--bgl-max, 100%);
}

/*
 * Modulo dati, riepilogo ed elenchi di scelta restano leggibili e centrati
 * anche dentro un contenitore molto largo.
 */
.bgl-form,
.bgl-summary,
.bgl-options,
.bgl-actions,
.bgl-birth,
.bgl-first-note,
.bgl-coupon {
	margin-left: auto;
	margin-right: auto;
	max-width: 34em;
}

.bgl-catalog {
	font-size: 16px;
	max-width: 100%;
}

.bgl-widget *,
.bgl-catalog * {
	box-sizing: inherit;
}

/*
 * Reset dei bottoni.
 * I temi WordPress applicano ai <button> gradienti, ombre e soprattutto
 * colori di hover propri: senza questo reset, passando sopra un giorno del
 * calendario il tema sovrascriveva sfondo e testo e il numero spariva.
 */
.bgl-widget button,
.bgl-catalog button {
	appearance: none;
	-webkit-appearance: none;
	background-image: none;
	box-shadow: none;
	/* Senza questo il colore del testo resta quello dei bottoni del tema,
	   che spesso è bianco: su fondo chiaro il contenuto sparisce. */
	color: var(--bgl-fg);
	font-family: inherit;
	letter-spacing: normal;
	line-height: 1.4;
	margin: 0;
	text-shadow: none;
	text-transform: none;
}

.bgl-widget button:hover,
.bgl-widget button:focus,
.bgl-widget button:active,
.bgl-catalog button:hover,
.bgl-catalog button:focus,
.bgl-catalog button:active {
	background-image: none;
	box-shadow: none;
	text-decoration: none;
}

.bgl-widget[data-theme="dark"] {
	--bgl-fg: #e9edf2;
	--bgl-muted: #9aa4b0;
	--bgl-line: #333a44;
	--bgl-bg: #191d23;
	--bgl-soft: #21262e;
	--bgl-ok-bg: #14301f;
	--bgl-low-bg: #35270e;
	--bgl-block-bg: #3a1d1d;
}

@media (prefers-color-scheme: dark) {
	.bgl-widget[data-theme="auto"] {
		--bgl-fg: #e9edf2;
		--bgl-muted: #9aa4b0;
		--bgl-line: #333a44;
		--bgl-bg: #191d23;
		--bgl-soft: #21262e;
		--bgl-ok-bg: #14301f;
		--bgl-low-bg: #35270e;
		--bgl-block-bg: #3a1d1d;
	}
}

/* ---------- Struttura ---------- */

.bgl-loading {
	color: var(--bgl-muted);
	padding: 32px 0;
	text-align: center;
}

/* ---------- Barra dei passaggi ---------- */

.bgl-phases {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(5, 1fr);
	margin: 0 0 26px;
}

.bgl-phase {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.bgl-phase-label {
	color: var(--bgl-muted);
	font-size: 0.8em;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bgl-phase-bar {
	background: var(--bgl-line);
	border-radius: 3px;
	display: block;
	height: 9px;
}

.bgl-phase.is-done .bgl-phase-label {
	color: var(--bgl-fg);
}

.bgl-phase.is-done .bgl-phase-bar {
	background: var(--bgl-fg);
}

/* Su telefono le etichette non entrano: restano solo le barre. */
@media (max-width: 600px) {
	.bgl-phases {
		gap: 5px;
	}

	.bgl-phase-label {
		display: none;
	}

	.bgl-phase.is-done:last-of-type .bgl-phase-label,
	.bgl-phase.is-done + .bgl-phase:not(.is-done) .bgl-phase-label {
		display: block;
	}
}

/* ---------- Vista "date disponibili" ---------- */

.bgl-dates {
	width: 100%;
}

/*
 * Le colonne hanno larghezza fissa e la riga si riempie da sola: così il
 * blocco occupa tutta la larghezza che il tema gli concede, senza dover
 * sapere quanto è larga.
 */
.bgl-dates-track {
	-ms-overflow-style: none;
	display: grid;
	gap: 8px;
	grid-auto-columns: minmax(7.5em, 1fr);
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: 6px;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.bgl-dates-track::-webkit-scrollbar {
	display: none;
}

.bgl-date-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	scroll-snap-align: start;
}

.bgl-date-head {
	background: var(--bgl-fg);
	border-radius: 6px;
	color: var(--bgl-bg);
	font-size: 0.82em;
	font-weight: 700;
	padding: 10px 6px;
	text-align: center;
	text-transform: capitalize;
	white-space: nowrap;
}

.bgl-widget .bgl-date-slot {
	align-items: center;
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: 6px;
	color: var(--bgl-fg);
	cursor: pointer;
	display: flex;
	font-size: 0.92em;
	font-variant-numeric: tabular-nums;
	gap: 8px;
	justify-content: center;
	min-height: 2.5em;
	padding: 8px 6px;
	transition: border-color 0.12s, background 0.12s;
}

.bgl-date-dot {
	border: 1px solid var(--bgl-line);
	border-radius: 99px;
	flex: 0 0 13px;
	height: 13px;
}

.bgl-widget .bgl-date-slot:hover,
.bgl-widget .bgl-date-slot:focus-visible {
	background: var(--bgl-fg);
	border-color: var(--bgl-fg);
	color: var(--bgl-bg);
	outline: none;
}

.bgl-widget .bgl-date-slot:hover .bgl-date-dot,
.bgl-widget .bgl-date-slot:focus-visible .bgl-date-dot {
	background: var(--bgl-bg);
	border-color: var(--bgl-bg);
}

/* Frecce sotto le date: bianco e nero, come il resto della vista. */
.bgl-dates-nav {
	align-items: center;
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 16px;
}

.bgl-widget .bgl-dates-arrow {
	align-items: center;
	background: var(--bgl-fg);
	border: 1px solid var(--bgl-fg);
	border-radius: 6px;
	color: var(--bgl-bg);
	cursor: pointer;
	display: flex;
	font-size: 1.1em;
	height: 2.2em;
	justify-content: center;
	line-height: 1;
	width: 2.8em;
}

.bgl-widget .bgl-dates-arrow:hover:not([disabled]) {
	background: var(--bgl-bg);
	color: var(--bgl-fg);
}

.bgl-widget .bgl-dates-arrow[disabled] {
	cursor: default;
	opacity: 0.25;
}

.bgl-dates-month {
	font-size: 0.9em;
	font-weight: 650;
	min-width: 9em;
	text-align: center;
	text-transform: capitalize;
}

/* ---------- Vista elenco ---------- */

.bgl-daylist {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bgl-daylist-row {
	align-items: center;
	border-bottom: 1px solid var(--bgl-line);
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
	padding: 12px 0;
}

@media (min-width: 560px) {
	.bgl-daylist-row {
		grid-template-columns: 12em 1fr;
	}
}

.bgl-daylist-day {
	font-weight: 650;
	text-transform: capitalize;
}

.bgl-daylist-times {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bgl-daylist-times .bgl-slot {
	min-height: 2.4em;
	padding: 7px 14px;
}

/* ---------- Tab dei passaggi ---------- */

.bgl-tabs {
	-ms-overflow-style: none;
	border-bottom: 1px solid var(--bgl-line);
	display: flex;
	gap: 2px;
	justify-content: center;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
	scrollbar-width: none;
}

/* ---------- Barra di avanzamento ---------- */

.bgl-progress {
	background: var(--bgl-line);
	border-radius: 99px;
	height: 4px;
	margin: 0 0 18px;
	overflow: hidden;
}

.bgl-progress-fill {
	background: var(--bgl-accent);
	border-radius: 99px;
	display: block;
	height: 100%;
	transition: width 0.35s ease;
}

.bgl-progress-label {
	color: var(--bgl-muted);
	display: block;
	font-size: 0.78em;
	margin: 6px 0 16px;
	text-align: center;
}

.bgl-tabs::-webkit-scrollbar {
	display: none;
}

.bgl-tab {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--bgl-muted);
	cursor: default;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.86em;
	padding: 9px 12px;
	white-space: nowrap;
}

.bgl-tab b {
	align-items: center;
	background: var(--bgl-line);
	border-radius: 99px;
	color: var(--bgl-bg);
	display: flex;
	flex: 0 0 1.2em;
	font-size: 0.68em;
	height: 1.2em;
	justify-content: center;
}

.bgl-widget .bgl-tab.is-done {
	color: var(--bgl-fg);
	cursor: pointer;
}

.bgl-widget .bgl-tab.is-done b {
	background: var(--bgl-ok);
	color: #fff;
}

.bgl-widget .bgl-tab.is-done:hover {
	color: var(--bgl-accent);
}

.bgl-widget .bgl-tab.is-current {
	border-bottom-color: var(--bgl-accent);
	color: var(--bgl-fg);
	font-weight: 650;
}

.bgl-widget .bgl-tab.is-current b {
	background: var(--bgl-accent);
	color: #fff;
}

/* Su schermi stretti restano i numeri, spariscono le parole. */
@media (max-width: 560px) {
	.bgl-tab span {
		display: none;
	}

	.bgl-tab.is-current span {
		display: inline;
	}

	.bgl-tab {
		padding: 9px 8px;
	}
}

/*
 * Il riepilogo di cosa e' stato scelto, a targhette.
 *
 * Sono targhettine orizzontali: icona, etichetta e valore tutti sulla stessa
 * riga, allineati sulla linea di base. Prima l'etichetta stava sopra il
 * valore, e per stare in due righe la targhetta diventava alta e importante —
 * troppo, per un'informazione che si legge di sfuggita. In orizzontale occupa
 * meno di meta' dell'altezza e si legge in un colpo d'occhio.
 *
 * La misura del testo parte dalla targhetta, non da chi la contiene: cosi' la
 * stessa regola vale nel modulo (dove il testo base e' ingrandito di 1,3) e
 * nelle schede del catalogo (dove e' 16px netti), senza che l'etichetta
 * diventi illeggibile da una parte o enorme dall'altra.
 */
.bgl-chosen {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45em;
	justify-content: center;
	margin-bottom: 1.1em;
}

.bgl-chip {
	align-items: center;
	background: var(--bgl-soft);
	border: 1px solid var(--bgl-line);
	border-radius: 999px;
	color: var(--bgl-fg);
	display: inline-flex;
	gap: 0.5em;
	line-height: 1.2;
	padding: 0.42em 0.85em;
	white-space: nowrap;
}

.bgl-chip-icon {
	color: var(--bgl-muted);
	flex: 0 0 auto;
	height: 1.15em;
	width: 1.15em;
}

.bgl-chip-body {
	display: flex;
	flex-direction: column;
	gap: 0.05em;
	min-width: 0;
	text-align: left;
}

.bgl-chip small {
	color: var(--bgl-muted);
	font-size: 0.64em;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.bgl-chip strong {
	font-size: 0.95em;
	font-weight: 650;
}

/*
 * Durata, costo e modalita' sono le tre che contano: bordo nel colore
 * d'accento e un filo di tinta dietro.
 *
 * Il bordo qui e' piu' tenue di prima. Puo' esserlo perche' e' decorazione: a
 * dire le cose sono l'etichetta e il valore, che restano a contrasto pieno. Se
 * il contorno fosse l'unico modo per capire dove finisce una targhetta e ne
 * comincia un'altra andrebbe tenuto marcato, ma fra una e l'altra c'e' lo
 * spazio, e ognuna ha la sua icona.
 */
.bgl-chip.is-key {
	background: var(--bgl-bg);
	border-color: var(--bgl-line);
	font-size: 0.78em;
	padding: 0.45em 0.9em;
}

/* Icona, etichetta e valore su una riga sola. */
.bgl-chip.is-key .bgl-chip-body {
	align-items: baseline;
	flex-direction: row;
	gap: 0.5em;
}

/*
 * L'icona sta all'altezza del valore, non sopra. Piu' grande del testo che
 * accompagna diventava lei il primo elemento della targhetta, e la targhetta
 * serve a leggere "45 min", non a guardare un orologio.
 */
.bgl-chip.is-key .bgl-chip-icon {
	color: var(--bgl-accent);
	height: 1.05em;
	width: 1.05em;
}

.bgl-chip.is-key small {
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.09em;
}

.bgl-chip.is-key strong {
	font-size: 0.97em;
	font-weight: 650;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.bgl-chip.is-key {
		background: color-mix(in srgb, var(--bgl-accent) 4%, var(--bgl-bg));
		border-color: color-mix(in srgb, var(--bgl-accent) 38%, var(--bgl-bg));
	}
}

/*
 * Su schermo stretto restano su UNA riga, come chiesto: invece di andare a
 * capo la fila scorre di lato. Mandarle a capo su un telefono significa tre
 * righe di targhette prima ancora di vedere il calendario.
 *
 * La barra di scorrimento si nasconde ma lo scorrimento resta, col
 * trascinamento e con la tastiera.
 */
@container (max-width: 30em) {
	.bgl-chosen {
		-ms-overflow-style: none;
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-left: -0.2em;
		margin-right: -0.2em;
		overflow-x: auto;
		padding: 0.15em 0.2em 0.35em;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.bgl-chosen::-webkit-scrollbar {
		display: none;
	}

	.bgl-chip {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.bgl-chip.is-key {
		padding: 0.42em 0.8em;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 520px) {
		.bgl-chosen {
			flex-wrap: nowrap;
			overflow-x: auto;
			scrollbar-width: none;
		}

		.bgl-chip {
			flex: 0 0 auto;
		}
	}
}



.bgl-head {
	align-items: baseline;
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 16px;
}

.bgl-title {
	font-size: 1.15em;
	font-weight: 650;
	margin: 0;
	text-align: center;
}

.bgl-recap {
	color: var(--bgl-muted);
	font-size: 0.85em;
	text-align: right;
}

/* ---------- Elenchi selezionabili ---------- */

.bgl-options {
	display: grid;
	gap: 10px;
	margin-bottom: 18px;
}

.bgl-option {
	align-items: center;
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	color: var(--bgl-fg);
	border-radius: var(--bgl-radius);
	cursor: pointer;
	display: flex;
	gap: 14px;
	min-height: 3.5em;
	padding: 14px 16px;
	text-align: left;
	transition: border-color 0.15s, background 0.15s;
	width: 100%;
}

.bgl-option:hover,
.bgl-option:focus-visible {
	background: var(--bgl-soft);
	border-color: var(--bgl-accent);
	color: var(--bgl-fg);
	outline: none;
}

.bgl-option[aria-pressed="true"] {
	border-color: var(--bgl-accent);
	box-shadow: inset 0 0 0 1px var(--bgl-accent);
}

.bgl-option-img {
	border-radius: 8px;
	flex: 0 0 3em;
	height: 3em;
	object-fit: cover;
	width: 3em;
}

.bgl-option-main {
	flex: 1;
	min-width: 0;
}

.bgl-option-name {
	font-weight: 600;
}

.bgl-option-sub {
	color: var(--bgl-muted);
	font-size: 0.87em;
}

.bgl-option-price {
	font-weight: 650;
	white-space: nowrap;
}

/* ---------- Calendario ---------- */

.bgl-cal-nav {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.bgl-cal-month {
	font-weight: 650;
	text-transform: capitalize;
}

.bgl-nav-btn {
	background: var(--bgl-soft);
	border: 1px solid var(--bgl-line);
	border-radius: 8px;
	color: var(--bgl-fg);
	cursor: pointer;
	font-size: 1em;
	height: 2.5em;
	line-height: 1;
	width: 2.5em;
}

.bgl-nav-btn[disabled] {
	cursor: default;
	opacity: 0.35;
}

/*
 * Il calendario ha una larghezza massima: senza, le celle si allargano con il
 * contenitore e con aspect-ratio quadrato diventano enormi su desktop.
 */
.bgl-cal {
	margin: 0 auto;
	max-width: 22.5em;
}

.bgl-cal-grid {
	display: grid;
	gap: 3px;
	grid-template-columns: repeat(7, 1fr);
}

.bgl-cal-dow {
	color: var(--bgl-muted);
	font-size: 0.68em;
	padding-bottom: 4px;
	text-align: center;
	text-transform: uppercase;
}

.bgl-day {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--bgl-muted);
	cursor: default;
	display: flex;
	flex-direction: column;
	font-size: 0.88em;
	gap: 1px;
	justify-content: center;
	min-height: 2.6em;
	padding: 0;
	position: relative;
}

.bgl-day-mark {
	border-radius: 99px;
	display: block;
	height: 4px;
	width: 4px;
}

/*
 * Ogni stato ha colore + segno + testo, così resta leggibile anche per chi non
 * distingue i colori. I selettori sono annidati sotto .bgl-widget di proposito:
 * alza la specificità sopra le regole dei bottoni del tema, che altrimenti
 * riportano tutto a bianco e nero.
 */

.bgl-widget .bgl-day.is-available {
	background: var(--bgl-ok-bg);
	border-color: transparent;
	color: var(--bgl-ok);
	cursor: pointer;
	font-weight: 650;
}

.bgl-widget .bgl-day.is-available .bgl-day-mark {
	background: var(--bgl-ok);
}

.bgl-widget .bgl-day.is-low {
	background: var(--bgl-low-bg);
	color: var(--bgl-low);
	cursor: pointer;
	font-weight: 650;
}

.bgl-widget .bgl-day.is-low .bgl-day-mark {
	border: 1.5px solid var(--bgl-low);
	height: 6px;
	width: 6px;
}

.bgl-widget .bgl-day.is-full {
	background: var(--bgl-soft);
	color: var(--bgl-off);
}

.bgl-widget .bgl-day.is-full .bgl-day-mark {
	background: var(--bgl-off);
	border-radius: 0;
	height: 2px;
	width: 11px;
}

.bgl-widget .bgl-day.is-blocked {
	background: var(--bgl-block-bg);
	color: var(--bgl-block);
}

.bgl-widget .bgl-day.is-blocked .bgl-day-mark {
	background: none;
	height: auto;
	width: auto;
}

.bgl-widget .bgl-day.is-blocked .bgl-day-mark::before {
	content: "×";
	font-size: 0.75em;
	line-height: 1;
}

/* Giorni fuori dal preavviso o troppo lontani: presenti ma spenti. */
.bgl-widget .bgl-day.is-too_soon,
.bgl-widget .bgl-day.is-too_far,
.bgl-widget .bgl-day.is-closed {
	color: var(--bgl-off);
	opacity: 0.6;
}

/*
 * Hover esplicito per ogni stato cliccabile: sfondo pieno e testo bianco.
 * Serve una regola per stato, altrimenti il colore del testo resta quello
 * dello stato di partenza e sul fondo scuro diventa illeggibile.
 */
.bgl-widget .bgl-day.is-available:hover,
.bgl-widget .bgl-day.is-available:focus {
	background: var(--bgl-ok);
	color: #fff;
}

.bgl-widget .bgl-day.is-available:hover .bgl-day-mark,
.bgl-widget .bgl-day.is-available:focus .bgl-day-mark {
	background: #fff;
}

.bgl-widget .bgl-day.is-low:hover,
.bgl-widget .bgl-day.is-low:focus {
	background: var(--bgl-low);
	color: #fff;
}

.bgl-widget .bgl-day.is-low:hover .bgl-day-mark,
.bgl-widget .bgl-day.is-low:focus .bgl-day-mark {
	border-color: #fff;
}

.bgl-widget .bgl-day.is-selected,
.bgl-widget .bgl-day.is-selected:hover {
	background: var(--bgl-accent);
	border-color: var(--bgl-accent);
	color: #fff;
}

.bgl-widget .bgl-day.is-selected .bgl-day-mark {
	background: #fff;
}

.bgl-day:focus-visible {
	outline: 2px solid var(--bgl-accent);
	outline-offset: 2px;
}

/*
 * I giorni non prenotabili sono <div>, non <button>: non ricevono gli stili
 * di hover del tema e restano identici al passaggio del mouse. Il cursore
 * resta la freccia e il title mostra il motivo.
 */
.bgl-day.is-blocked,
.bgl-day.is-full {
	cursor: help;
}

.bgl-legend {
	color: var(--bgl-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.78em;
	gap: 12px;
	margin-top: 12px;
}

.bgl-legend span {
	align-items: center;
	display: inline-flex;
	gap: 5px;
}

.bgl-legend i {
	border-radius: 99px;
	display: inline-block;
	height: 8px;
	width: 8px;
}

/* ---------- Orari ---------- */

.bgl-slots {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 4px;
}

@media (min-width: 480px) {
	.bgl-slots {
		grid-template-columns: repeat(4, 1fr);
	}
}

.bgl-widget .bgl-slot {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	color: var(--bgl-fg);
	cursor: pointer;
	font-size: 1em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	min-height: 2.9em;
	padding: 11px 6px;
}

.bgl-widget .bgl-slot:hover,
.bgl-widget .bgl-slot:focus-visible,
.bgl-widget .bgl-slot[aria-pressed="true"] {
	background: var(--bgl-accent);
	border-color: var(--bgl-accent);
	color: #fff;
	outline: none;
}

/* ---------- Modulo ---------- */

.bgl-field {
	margin-bottom: 14px;
}

.bgl-field label {
	display: block;
	font-size: 0.88em;
	font-weight: 600;
	margin-bottom: 5px;
}

.bgl-field input[type="text"],
.bgl-field input[type="email"],
.bgl-field input[type="tel"],
.bgl-field textarea {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	color: var(--bgl-fg);
	font: inherit;
	min-height: 2.75em;
	padding: 11px 12px;
	width: 100%;
}

.bgl-field textarea {
	min-height: 5.5em;
	resize: vertical;
}

.bgl-field input:focus,
.bgl-field textarea:focus {
	border-color: var(--bgl-accent);
	outline: none;
}

.bgl-check {
	align-items: flex-start;
	display: flex;
	font-size: 0.9em;
	gap: 9px;
}

.bgl-check input {
	flex: 0 0 auto;
	height: 20px;
	margin-top: 2px;
	width: 20px;
}

/*
 * Campo trappola. Sta dentro un contenitore con display:none e non solo fuori
 * schermo: il riempimento automatico del browser salta i campi non renderizzati,
 * mentre uno spostato a sinistra di 9999px per lui è un campo normale — ed è
 * così che finiva compilato a persone vere.
 */
.bgl-hp-wrap {
	display: none !important;
}

.bgl-hp {
	left: -9999px;
	position: absolute;
}

/* ---------- Riepilogo e pulsanti ---------- */

.bgl-summary {
	background: var(--bgl-soft);
	border-left: 3px solid var(--bgl-accent);
	border-radius: 0 var(--bgl-radius) var(--bgl-radius) 0;
	margin-bottom: 16px;
	padding: 14px 16px;
}

.bgl-summary dl {
	display: grid;
	gap: 6px 14px;
	grid-template-columns: auto 1fr;
	margin: 0;
}

.bgl-summary dt {
	color: var(--bgl-muted);
	font-size: 0.87em;
}

.bgl-summary dd {
	font-weight: 600;
	margin: 0;
}

.bgl-actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.bgl-btn {
	background: var(--bgl-soft);
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	color: var(--bgl-fg);
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 600;
	min-height: 2.9em;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none;
}

.bgl-btn-primary {
	background: var(--bgl-btn-bg);
	border-color: var(--bgl-btn-bd);
	color: var(--bgl-btn-fg);
}

/*
 * Il "flex: 1" vale solo nella riga orizzontale dei pulsanti del wizard, dove
 * serve a far occupare al principale lo spazio che avanza. Applicato ovunque
 * finiva anche dentro le schede del catalogo, che sono colonne: lì crescere
 * lungo l'asse principale vuol dire crescere in ALTEZZA, ed era la ragione per
 * cui il pulsante "Prenota" diventava un blocco viola alto mezzo schermo.
 */
.bgl-actions > .bgl-btn-primary {
	flex: 1;
}

.bgl-btn[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.bgl-note {
	color: var(--bgl-muted);
	font-size: 0.82em;
	margin-top: 12px;
}

.bgl-error {
	background: var(--bgl-block-bg);
	border-radius: 10px;
	color: var(--bgl-block);
	font-size: 0.9em;
	margin-bottom: 14px;
	padding: 11px 14px;
}

.bgl-empty {
	color: var(--bgl-muted);
	padding: 20px 0;
	text-align: center;
}

/* ---------- Catalogo ---------- */

.bgl-catalog {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	max-width: none;
}

@media (min-width: 620px) {
	.bgl-catalog.bgl-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.bgl-catalog.bgl-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.bgl-catalog.bgl-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.bgl-catalog.bgl-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/*
 * Meno consulti delle colonne chieste: si allargano fino a un limite e il
 * gruppo si mette al centro, cosi' lo spazio che avanza sta ai due lati —
 * dove si legge come margine — invece che tutto a destra, dove si legge come
 * un buco. Il tetto evita la scheda unica larga quanto la pagina, che non e'
 * «piena»: e' una locandina gigante con tre righe di testo sotto.
 */
@media (min-width: 620px) {
	.bgl-catalog.is-poche { justify-content: center; }
	.bgl-catalog.is-poche.bgl-cols-1 { grid-template-columns: minmax(0, 460px); }
	.bgl-catalog.is-poche.bgl-cols-2 { grid-template-columns: repeat(2, minmax(0, 460px)); }
	.bgl-catalog.is-poche.bgl-cols-3 { grid-template-columns: repeat(3, minmax(0, 400px)); }
}

.bgl-card {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bgl-card-img img {
	aspect-ratio: 16 / 10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.bgl-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 7px;
	padding: 14px 14px 12px;
}

/*
 * Titolo: serif, grande, centrato. Il font non viene caricato dal plugin — lo
 * mette già il tema, e scaricarlo una seconda volta da Google significherebbe
 * un font in più da scaricare e una richiesta a un server esterno a ogni
 * visita, cosa che con il GDPR è meglio non fare a cuor leggero. Se il tema
 * non ha Cormorant, la pila scende su un serif di sistema decoroso.
 */
.bgl-card-title {
	font-family: var(--bgl-title-font, 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, 'Times New Roman', serif);
	font-size: 1.45em;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	margin: 0;
	text-align: center;
}

.bgl-card-meta {
	color: var(--bgl-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.87em;
	gap: 6px 14px;
	justify-content: center;
	margin: 0;
}

/*
 * Tre righe esatte, sempre. Il taglio a lunghezza fissa lo fa già il PHP, ma
 * il numero di caratteri che entra in una riga dipende dalla larghezza della
 * colonna: senza questo blocco, la stessa descrizione occuperebbe due righe su
 * schermo largo e quattro su schermo stretto, e le schede tornerebbero
 * disallineate proprio dove serve di più.
 */
.bgl-card-text {
	color: var(--bgl-muted);
	display: -webkit-box;
	font-size: 0.9em;
	line-height: 1.5;
	margin: 0 0 4px;
	min-height: calc(3 * 1.5 * 0.9em);
	overflow: hidden;
	/* Il vuoto fra descrizione e pulsante nasce dalle schede senza immagine
	   che devono pareggiare quelle con: si lascia respirare un minimo e basta. */
	margin-bottom: 2px;
	text-align: center;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.bgl-card .bgl-tag {
	align-self: center;
}

.bgl-card .bgl-btn {
	margin-top: auto;
}

/*
 * Pulsante della scheda: nero con scritta bianca, e all'inverso al passaggio
 * del mouse. Le due regole sono scritte per intero invece di scambiare due
 * variabili, perché così restano leggibili anche quando il tema ci mette del
 * suo, ed è proprio quello che succedeva prima.
 */
.bgl-catalog.is-cta-black .bgl-card-cta {
	background: #111;
	border: 1px solid #111;
	color: #fff;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.bgl-catalog.is-cta-black .bgl-card-cta:hover,
.bgl-catalog.is-cta-black .bgl-card-cta:focus-visible {
	background: #fff;
	border-color: #111;
	color: #111;
}

.bgl-catalog.is-cta-accent .bgl-card-cta {
	background: var(--bgl-accent);
	border: 1px solid var(--bgl-accent);
	color: #fff;
	font-weight: 600;
}

.bgl-catalog.is-cta-accent .bgl-card-cta:hover,
.bgl-catalog.is-cta-accent .bgl-card-cta:focus-visible {
	background: #fff;
	color: var(--bgl-accent);
}

/* Sul tema scuro il nero pieno sparisce nello sfondo. */
.bgl-catalog[data-theme="dark"].is-cta-black .bgl-card-cta {
	background: #fff;
	border-color: #fff;
	color: #111;
}

.bgl-catalog[data-theme="dark"].is-cta-black .bgl-card-cta:hover {
	background: transparent;
	color: #fff;
}

.bgl-inline {
	margin-top: 16px;
}

/* ---------- Area cliente ---------- */

.bgl-booking-card {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-left: 3px solid var(--bgl-accent);
	border-radius: var(--bgl-radius);
	margin-bottom: 14px;
	padding: 16px;
}

.bgl-badge {
	border-radius: 99px;
	display: inline-block;
	font-size: 0.75em;
	font-weight: 600;
	padding: 3px 10px;
}

.bgl-badge.is-confirmed { background: var(--bgl-ok-bg); color: var(--bgl-ok); }
.bgl-badge.is-awaiting { background: var(--bgl-low-bg); color: var(--bgl-low); }
.bgl-badge.is-pending { background: var(--bgl-low-bg); color: var(--bgl-low); }
.bgl-badge.is-cancelled { background: var(--bgl-block-bg); color: var(--bgl-block); }

/* ---------- Schede del catalogo dentro il carosello ---------- */

/*
 * Il carosello vero e' in slider.css: qui restano solo le misure delle schede
 * dei consulti e il tema scuro, che riguardano questo catalogo e non il
 * meccanismo.
 */

/*
 * Le schede si allungano tutte quanto la più alta. In una griglia a colonne
 * questo è già il comportamento predefinito, ma va detto per esteso: certi
 * temi mettono "align-items: start" sui contenitori a griglia e ce lo
 * portiamo dietro senza accorgercene.
 */
.bgl-slider-track > .bgl-card {
	align-self: stretch;
	height: 100%;
	scroll-snap-align: start;
}

.bgl-catalog[data-theme="dark"] .bgl-slider-btn {
	background: #fff;
	border-color: #fff;
	color: #111;
}

.bgl-catalog[data-theme="dark"] .bgl-slider-dots button[aria-current="true"] {
	background: #fff;
}

/* ---------- Codice promozionale ---------- */

.bgl-coupon {
	border-top: 1px solid var(--bgl-line);
	margin-top: 14px;
	padding-top: 14px;
}

.bgl-coupon-toggle {
	background: none;
	border: 0;
	color: var(--bgl-accent);
	cursor: pointer;
	font: inherit;
	font-size: 0.9em;
	padding: 0;
	text-decoration: underline;
}

.bgl-coupon-row {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.bgl-coupon-row input {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	color: var(--bgl-fg);
	flex: 1;
	font: inherit;
	min-height: 2.75em;
	padding: 11px 12px;
	text-transform: uppercase;
}

.bgl-coupon-ok {
	background: var(--bgl-ok-bg);
	border-radius: 8px;
	color: var(--bgl-ok);
	font-size: 0.88em;
	font-weight: 600;
	margin-top: 10px;
	padding: 9px 12px;
}

.bgl-first-note {
	background: var(--bgl-ok-bg);
	border-radius: 8px;
	color: var(--bgl-ok);
	font-size: 0.86em;
	font-weight: 600;
	margin: 10px 0 0;
	padding: 9px 12px;
}

.bgl-total-old {
	color: var(--bgl-muted);
	font-weight: 400;
	text-decoration: line-through;
}

/* ---------- Ricerca prenotazione ---------- */

.bgl-lookup {
	background: var(--bgl-soft);
	border-radius: var(--bgl-radius);
	padding: 20px;
}

.bgl-lookup h3 {
	margin: 0 0 6px;
}

.bgl-lookup p {
	color: var(--bgl-muted);
	font-size: 0.9em;
	margin: 0 0 14px;
}

.bgl-code-input {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.05em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bgl-code-badge {
	background: var(--bgl-soft);
	border: 1px dashed var(--bgl-accent);
	border-radius: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 12px 0;
	padding: 12px;
	text-align: center;
}

/* ---------- Consulti con preparazione ---------- */

.bgl-prep {
	background: var(--bgl-low-bg);
	border-left: 3px solid var(--bgl-low);
	border-radius: 0 8px 8px 0;
	color: var(--bgl-low);
	display: flex;
	flex-direction: column;
	font-size: 0.9em;
	gap: 3px;
	line-height: 1.5;
	margin-bottom: 16px;
	padding: 12px 14px;
}

.bgl-tag {
	align-self: flex-start;
	background: var(--bgl-low-bg);
	border-radius: 99px;
	color: var(--bgl-low);
	font-size: 0.75em;
	font-weight: 600;
	padding: 3px 10px;
}

/* ---------- Dati di nascita ---------- */

.bgl-birth {
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	margin: 0 0 16px;
	padding: 14px 16px 4px;
}

.bgl-birth legend {
	font-size: 0.9em;
	font-weight: 650;
	padding: 0 6px;
}

.bgl-birth .bgl-hint:first-of-type {
	margin: 0 0 12px;
}

.bgl-hint {
	color: var(--bgl-muted);
	display: block;
	font-size: 0.8em;
	margin-top: 4px;
}

.bgl-field-pair {
	display: grid;
	gap: 0 12px;
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.bgl-field-pair {
		grid-template-columns: 1fr 1fr;
	}
}

.bgl-field input[type="date"],
.bgl-field input[type="time"] {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	color: var(--bgl-fg);
	font: inherit;
	min-height: 2.75em;
	padding: 11px 12px;
	width: 100%;
}

/* ---------- Modulo unico con menù laterale ---------- */

.bgl-hub {
	--bgl-accent: #7b3fa0;
	--bgl-fg: #1f2328;
	--bgl-muted: #626b76;
	--bgl-line: #dfe3e8;
	--bgl-bg: #fff;
	--bgl-soft: #f6f7f9;
	--bgl-low: #9a6100;
	--bgl-low-bg: #fdf3e2;
	--bgl-radius: 12px;

	box-sizing: border-box;
	color: var(--bgl-fg);
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: var(--bgl-max, 100%);
}

.bgl-hub * {
	box-sizing: inherit;
}

.bgl-hub .bgl-widget {
	margin: 0;
}

.bgl-hub-side {
	min-width: 0;
}

.bgl-hub-main {
	min-width: 0;
}

.bgl-hub-title {
	font-size: 0.85rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

/* Su telefono il menù è una tendina: una riga sola, niente spazio rubato. */
.bgl-hub-select-wrap select {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	color: var(--bgl-fg);
	font: inherit;
	min-height: 48px;
	padding: 12px;
	width: 100%;
}

.bgl-hub-nav {
	display: none;
}

.bgl-hub-item {
	align-items: center;
	appearance: none;
	-webkit-appearance: none;
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	color: var(--bgl-fg);
	cursor: pointer;
	display: flex;
	gap: 12px;
	margin-bottom: 8px;
	padding: 12px 14px;
	text-align: left;
	transition: border-color 0.15s, background 0.15s;
	width: 100%;
}

.bgl-hub-item:hover {
	background: var(--bgl-soft);
	border-color: var(--bgl-accent);
}

.bgl-hub .bgl-hub-item.is-active {
	background: var(--bgl-soft);
	border-color: var(--bgl-accent);
	box-shadow: inset 3px 0 0 var(--bgl-accent);
}

.bgl-hub-img {
	border-radius: 8px;
	flex: 0 0 44px;
	height: 44px;
	object-fit: cover;
	width: 44px;
}

.bgl-hub-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bgl-hub-name {
	font-weight: 600;
	line-height: 1.3;
}

.bgl-hub-meta {
	color: var(--bgl-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.82rem;
	gap: 8px;
}

.bgl-hub-prep {
	background: var(--bgl-low-bg);
	border-radius: 99px;
	color: var(--bgl-low);
	font-size: 0.72rem;
	font-weight: 600;
	padding: 1px 8px;
}

@media (min-width: 781px) {
	.bgl-hub {
		grid-template-columns: minmax(240px, 300px) 1fr;
	}

	.bgl-hub-select-wrap {
		display: none;
	}

	.bgl-hub-nav {
		display: block;
		position: sticky;
		top: 20px;
	}

	.bgl-hub-main {
		border-left: 1px solid var(--bgl-line);
		padding-left: 24px;
	}
}

/* ---------- Aggiungi al calendario ---------- */

.bgl-calbtns {
	border-top: 1px solid var(--bgl-line);
	margin-top: 14px;
	padding-top: 12px;
}

.bgl-calbtns-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.bgl-btn-small {
	font-size: 0.85em;
	min-height: 2.2em;
	padding: 8px 14px;
}

/* ---------- Stelline ---------- */

.bgl-stars {
	display: flex;
	gap: 2px;
}

.bgl-widget .bgl-star {
	background: none;
	border: 0;
	color: var(--bgl-line);
	cursor: pointer;
	font-size: 1.6em;
	line-height: 1;
	padding: 2px 1px;
	transition: color 0.12s, transform 0.12s;
}

.bgl-widget .bgl-star.is-on {
	color: #e8a33d;
}

.bgl-widget .bgl-star:hover {
	transform: scale( 1.12 );
}

.bgl-stars.is-static .bgl-star {
	cursor: default;
	font-size: 1.05em;
	padding: 0 1px;
	transform: none;
}

/* ---------- Scelte del questionario ---------- */

.bgl-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bgl-widget .bgl-choice {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: 99px;
	color: var(--bgl-fg);
	cursor: pointer;
	font-size: 0.9em;
	min-height: 2.4em;
	padding: 8px 16px;
}

.bgl-widget .bgl-choice:hover {
	border-color: var(--bgl-accent);
}

.bgl-widget .bgl-choice.is-on {
	background: var(--bgl-accent);
	border-color: var(--bgl-accent);
	color: #fff;
}

/* ---------- Vetrina delle recensioni ---------- */

.bgl-reviews {
	--bgl-accent: #7b3fa0;
	--bgl-fg: #1f2328;
	--bgl-muted: #626b76;
	--bgl-line: #dfe3e8;
	--bgl-bg: #fff;
	--bgl-soft: #f6f7f9;
	--bgl-gold: #e8a33d;
	--bgl-radius: 14px;

	box-sizing: border-box;
	color: var(--bgl-fg);
	margin: 0 auto;
	max-width: var(--bgl-max, 100%);
	position: relative;
}

.bgl-reviews * {
	box-sizing: inherit;
}

.bgl-rev-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 20px;
}

.bgl-rev-avg {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
}

.bgl-reviews .bgl-star {
	color: var(--bgl-line);
	font-size: 1.1rem;
	line-height: 1;
}

.bgl-reviews .bgl-star.is-on {
	color: var(--bgl-gold);
}

.bgl-reviews .bgl-hint {
	color: var(--bgl-muted);
	font-size: 0.85rem;
}

.bgl-rev-track {
	-ms-overflow-style: none;
	display: grid;
	gap: 16px;
	grid-auto-columns: 86%;
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 4px 4px 16px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.bgl-rev-track::-webkit-scrollbar {
	display: none;
}

.bgl-rev-track > .bgl-rev-card {
	scroll-snap-align: center;
}

.bgl-rev-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.bgl-rev-track { grid-auto-columns: 46%; }
	.bgl-rev-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.bgl-rev-track { grid-auto-columns: 32%; }
	.bgl-rev-grid { grid-template-columns: repeat(3, 1fr); }
}

/*
 * La virgoletta grande in filigrana dà alla scheda un'aria da citazione senza
 * bisogno di immagini: è un carattere tipografico, pesa zero.
 */
.bgl-rev-card {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	overflow: hidden;
	padding: 22px 24px 20px;
	position: relative;
}

.bgl-rev-card::before {
	color: var(--bgl-accent);
	content: "\201C";
	font-family: Georgia, "Times New Roman", serif;
	font-size: 7rem;
	line-height: 1;
	opacity: 0.08;
	position: absolute;
	right: 10px;
	top: -10px;
}

.bgl-rev-body {
	border: 0;
	font-size: 1rem;
	line-height: 1.65;
	margin: 0;
	padding: 0;
	position: relative;
	quotes: none;
}

.bgl-rev-meta {
	border-top: 1px solid var(--bgl-line);
	color: var(--bgl-muted);
	display: flex;
	flex-direction: column;
	font-size: 0.85rem;
	gap: 2px;
	margin-top: auto;
	padding-top: 12px;
}

.bgl-rev-author {
	color: var(--bgl-fg);
	font-weight: 650;
}

.bgl-rev-reply {
	background: var(--bgl-soft);
	border-left: 3px solid var(--bgl-accent);
	border-radius: 0 8px 8px 0;
	display: flex;
	flex-direction: column;
	font-size: 0.88rem;
	gap: 3px;
	padding: 10px 14px;
}

.bgl-reviews .bgl-slider-nav {
	margin-top: 4px;
}

.bgl-reviews .bgl-slider-btn {
	align-items: center;
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: 99px;
	color: var(--bgl-fg);
	cursor: pointer;
	display: flex;
	font-size: 18px;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.bgl-reviews .bgl-slider-btn:hover:not([disabled]) {
	background: var(--bgl-accent);
	border-color: var(--bgl-accent);
	color: #fff;
}

.bgl-reviews .bgl-slider-btn[disabled] {
	cursor: default;
	opacity: 0.3;
}

/* ---------- Modulo di contatto ---------- */

.bgl-help {
	border-top: 1px solid var(--bgl-line);
	margin-top: 28px;
	padding-top: 20px;
}

.bgl-help-head {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 12px;
}

.bgl-help-head span {
	color: var(--bgl-muted);
	font-size: 0.9em;
	line-height: 1.5;
}

.bgl-help-open {
	align-self: flex-start;
}

.bgl-help-panel {
	background: var(--bgl-soft);
	border-radius: var(--bgl-radius);
	margin-top: 4px;
	padding: 18px 18px 6px;
}

.bgl-help-panel textarea {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	color: var(--bgl-fg);
	font: inherit;
	min-height: 6em;
	padding: 11px 12px;
	resize: vertical;
	width: 100%;
}

.bgl-form {
	margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bgl-option,
	.bgl-slot {
		scroll-behavior: auto;
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Moduli personalizzati                                               */
/* ------------------------------------------------------------------ */

/*
 * La griglia si regola da sola sul contenitore, senza media query: in una
 * colonna stretta ci sta una traccia sola e i campi vanno uno sotto l'altro,
 * in una riga larga se ne affiancano due. Le media query guardano la finestra,
 * che è la misura sbagliata: quello che conta è quanto spazio ha il modulo.
 */
/*
 * Sei colonne invisibili: un terzo ne occupa due, metà tre, due terzi quattro,
 * la riga intera tutte e sei. Sei è il minimo comune multiplo che permette
 * insieme i terzi e le metà; con dodici colonne il conto tornerebbe uguale ma
 * le righe sarebbero più difficili da leggere qui dentro.
 */
.bgl-formwrap .bgl-fgrid,
.bgl-newsletter .bgl-fgrid {
	display: grid;
	gap: 1em 1.1em;
	grid-template-columns: repeat(6, 1fr);
	margin: 0 auto;
	max-width: var(--bgl-max, 100%);
}

.bgl-fitem { grid-column: span 6; }
.bgl-fitem.is-full { grid-column: 1 / -1; }
.bgl-fitem.is-twothirds { grid-column: span 4; }
.bgl-fitem.is-half { grid-column: span 3; }
.bgl-fitem.is-third { grid-column: span 2; }

.bgl-fhead,
.bgl-formwrap .bgl-fgrid > .bgl-fitem:only-child {
	grid-column: 1 / -1;
}

/*
 * Disposizione verticale: tutto in colonna, le larghezze non contano più.
 * Non è una media query perché la scelta è tua, non dello schermo.
 */
.bgl-fgrid.is-stack > * {
	grid-column: 1 / -1 !important;
}

/*
 * Sotto i 30em una riga divisa in tre dà campi larghi cinque centimetri: le
 * frazioni si annullano e tutto torna in colonna. La misura guarda il
 * contenitore, non la finestra, quindi vale anche dentro una barra laterale
 * su schermo grande.
 */
@container (max-width: 30em) {
	.bgl-fitem { grid-column: 1 / -1; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 560px) {
		.bgl-fitem { grid-column: 1 / -1; }
	}
}

/*
 * I riquadri che misurano se stessi — e perche' accanto a container-type c'e'
 * anche la larghezza.
 *
 * container-type: inline-size vuol dire «la mia larghezza me la da' chi mi
 * contiene, non il mio contenuto». E' quello che permette al modulo di
 * adattarsi alla colonna invece che alla finestra. Ha pero' un rovescio
 * preciso: se chi lo contiene e' a sua volta largo quanto il proprio contenuto
 * — una riga flex, una griglia con justify-items, un blocco centrato del tema
 * — allora nessuno dei due sa piu' quanto e' largo, e il riquadro collassa
 * alla misura della parola piu' lunga. Da fuori si vede il pie' di pagina che
 * va a capo a ogni parola, e succede solo su telefono, perche' solo li' il
 * tema mette le colonne in una riga che si stringe.
 *
 * width: 100% chiude il cerchio: la larghezza arriva dal contenitore in modo
 * esplicito, e il contenitore non deve piu' chiederla al testo. min-width: 0
 * serve dentro le righe flex, dove un elemento si rifiuta di stringersi sotto
 * il proprio contenuto finche' non glielo si dice. Il max-width di ciascun
 * riquadro resta a governare la misura massima, quindi su schermo largo non
 * cambia niente.
 *
 * .bgl-social entra qui per una seconda ragione: le regole @container che lo
 * rimpiccioliscono in colonna stretta erano scritte ma non si applicavano mai,
 * perche' quel riquadro non era un contenitore di misura. Adesso lo e'.
 */
.bgl-formwrap,
.bgl-newsletter,
.bgl-social {
	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

.bgl-fitem {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-width: 0;
}

.bgl-form-intro,
.bgl-formwrap .bgl-actions,
.bgl-fnote,
.bgl-ftotal {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--bgl-max, 100%);
}

.bgl-form-intro {
	margin-bottom: 1.2em;
}

.bgl-flabel {
	font-size: 0.92em;
	font-weight: 600;
}

.bgl-req {
	color: var(--bgl-accent);
}

.bgl-fhead {
	border-bottom: 1px solid var(--bgl-line);
	font-size: 1.05em;
	margin: 0.8em 0 0;
	padding-bottom: 0.4em;
}

.bgl-widget .bgl-fitem input[type="text"],
.bgl-widget .bgl-fitem input[type="email"],
.bgl-widget .bgl-fitem input[type="tel"],
.bgl-widget .bgl-fitem input[type="number"],
.bgl-widget .bgl-fitem input[type="date"],
.bgl-widget .bgl-fitem input[type="time"],
.bgl-widget .bgl-fitem input[type="file"],
.bgl-widget .bgl-fitem select,
.bgl-widget .bgl-fitem textarea {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	color: var(--bgl-fg);
	font: inherit;
	max-width: 100%;
	padding: 0.6em 0.7em;
	width: 100%;
}

.bgl-widget .bgl-fitem textarea {
	line-height: 1.5;
	resize: vertical;
}

.bgl-widget .bgl-fitem input:focus-visible,
.bgl-widget .bgl-fitem select:focus-visible,
.bgl-widget .bgl-fitem textarea:focus-visible {
	border-color: var(--bgl-accent);
	outline: 2px solid var(--bgl-accent);
	outline-offset: 1px;
}

.bgl-fchoices {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
}

.bgl-fcheck {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 0.55em;
	line-height: 1.45;
}

.bgl-widget .bgl-fcheck input {
	flex: 0 0 auto;
	margin-top: 0.25em;
}

/* Le voci a pagamento sono una scelta importante: si vedono come schede. */
.bgl-fpay .bgl-fcheck {
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	padding: 0.7em 0.8em;
}

.bgl-fpay .bgl-fcheck:has(input:checked) {
	border-color: var(--bgl-accent);
	box-shadow: inset 0 0 0 1px var(--bgl-accent);
}

.bgl-fpay strong {
	white-space: nowrap;
}

.bgl-fhint {
	/* Era --bgl-dim, una variabile che non è mai esistita: la nota sotto il
	   campo ereditava il colore del testo normale e non si distingueva. */
	color: var(--bgl-muted);
	font-size: 0.85em;
	line-height: 1.4;
}

.bgl-ferror {
	color: #b32d2e;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.4;
}

.bgl-fitem.has-error input,
.bgl-fitem.has-error select,
.bgl-fitem.has-error textarea {
	border-color: #b32d2e;
}

.bgl-ftotal {
	align-items: baseline;
	border-top: 1px solid var(--bgl-line);
	display: flex;
	font-size: 1.1em;
	gap: 0.6em;
	justify-content: space-between;
	margin-top: 1.2em;
	padding-top: 0.8em;
}

.bgl-ftotal strong {
	font-size: 1.15em;
}

.bgl-fnote {
	font-size: 0.85em;
	margin-top: 0.8em;
}

/* Il form non ha stile suo: la griglia sta dentro, qui serve solo azzerare
   i margini che certi temi mettono sui form. */
.bgl-cform {
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------ */
/* Avvisi dentro i moduli                                              */
/* ------------------------------------------------------------------ */

/*
 * Nessun colore fisso: tutto passa dalle variabili, così il riquadro resta
 * leggibile anche quando il modulo è in versione scura.
 */
.bgl-notice {
	border-left: 3px solid var(--bgl-line);
	background: var(--bgl-soft);
	border-radius: var(--bgl-radius);
	color: var(--bgl-fg);
	line-height: 1.5;
	margin: 0 auto 1.2em;
	max-width: var(--bgl-max, 100%);
	padding: 0.85em 1.1em;
}

.bgl-notice.is-ok {
	background: var(--bgl-ok-bg);
	border-left-color: var(--bgl-ok);
}

.bgl-notice.is-warn {
	background: var(--bgl-low-bg);
	border-left-color: var(--bgl-low);
}

.bgl-notice.is-fail {
	background: var(--bgl-block-bg);
	border-left-color: var(--bgl-block);
}

/* ------------------------------------------------------------------ */
/* Aspetto chiaro e scuro dei moduli                                   */
/* ------------------------------------------------------------------ */

/*
 * Con "come il resto della pagina" il modulo non dipinge niente e prende i
 * colori del tema. Scegliendo chiaro o scuro invece diventa un riquadro con
 * un fondo suo: un modulo scuro su una pagina chiara ha bisogno della propria
 * superficie, altrimenti si vedrebbero campi scuri sospesi nel vuoto bianco.
 */
.bgl-formwrap.has-surface {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	padding: 1.6em 1.5em;
}

.bgl-formwrap[data-theme="light"] {
	--bgl-fg: #1f2328;
	--bgl-muted: #626b76;
	--bgl-line: #dfe3e8;
	--bgl-bg: #fff;
	--bgl-soft: #f6f7f9;
	--bgl-ok-bg: #e8f5ee;
	--bgl-low-bg: #fdf3e2;
	--bgl-block-bg: #fbecec;
	color-scheme: light;
}

/*
 * Versione scura: nero e oro.
 *
 * Il fondo non è grigio-blu ma quasi nero, come lo sfondo delle carte, e
 * l'unico colore è un oro caldo. L'oro sta al 62% di luminosità: sotto quella
 * soglia, su fondo nero, il contrasto scende oltre il limite leggibile e le
 * etichette diventano un esercizio di intuizione. Non è un vezzo — è la
 * differenza fra un modulo elegante e uno che la gente abbandona.
 */
.bgl-formwrap[data-theme="dark"],
.bgl-newsletter[data-theme="dark"] {
	--bgl-fg: #f2eee6;
	--bgl-muted: #a49b8b;
	--bgl-line: #33302a;
	--bgl-bg: #0d0c0b;
	--bgl-soft: #171614;
	--bgl-gold: #c9a227;
	--bgl-gold-soft: #e0c76a;
	--bgl-gold-deep: #8a6d1f;
	--bgl-ok: #7fbf8f;
	--bgl-ok-bg: #12201a;
	--bgl-low: #d9a441;
	--bgl-low-bg: #2a2113;
	--bgl-block: #d98a8a;
	--bgl-block-bg: #2b1817;

	/*
	 * Dice al browser che qui dentro è buio: senza questo, i controlli
	 * disegnati dal sistema — il calendario di input[type=date], la freccia
	 * delle tendine, il pulsante "Sfoglia" degli allegati — restano chiari e
	 * spiccano come macchie bianche.
	 */
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	.bgl-formwrap[data-theme="auto"],
	.bgl-newsletter[data-theme="auto"] {
		--bgl-fg: #f2eee6;
		--bgl-muted: #a49b8b;
		--bgl-line: #33302a;
		--bgl-bg: #0d0c0b;
		--bgl-soft: #171614;
		--bgl-gold: #c9a227;
		--bgl-gold-soft: #e0c76a;
		--bgl-gold-deep: #8a6d1f;
		--bgl-ok: #7fbf8f;
		--bgl-ok-bg: #12201a;
		--bgl-low: #d9a441;
		--bgl-low-bg: #2a2113;
		--bgl-block: #d98a8a;
		--bgl-block-bg: #2b1817;
		color-scheme: dark;
	}
}

@media (prefers-color-scheme: light) {
	.bgl-formwrap[data-theme="auto"] {
		--bgl-bg: #fff;
		color-scheme: light;
	}
}

/* Il testo del modulo segue la superficie, non il tema del sito. */
.bgl-formwrap.has-surface,
.bgl-formwrap.has-surface .bgl-flabel,
.bgl-formwrap.has-surface .bgl-fhead,
.bgl-formwrap.has-surface .bgl-fcheck,
.bgl-formwrap.has-surface .bgl-form-intro,
.bgl-formwrap.has-surface .bgl-ftotal {
	color: var(--bgl-fg);
}

.bgl-formwrap.has-surface .bgl-fhint,
.bgl-formwrap.has-surface .bgl-fnote,
.bgl-formwrap.has-surface .bgl-dim {
	color: var(--bgl-muted);
}

/* Sul fondo scuro il rosso pieno degli errori è illeggibile. */
.bgl-formwrap[data-theme="dark"] .bgl-ferror,
.bgl-formwrap[data-theme="dark"] .bgl-fitem.has-error input,
.bgl-formwrap[data-theme="dark"] .bgl-fitem.has-error select,
.bgl-formwrap[data-theme="dark"] .bgl-fitem.has-error textarea {
	border-color: var(--bgl-block);
	color: var(--bgl-block);
}

.bgl-formwrap[data-theme="dark"] .bgl-fitem.has-error input,
.bgl-formwrap[data-theme="dark"] .bgl-fitem.has-error select,
.bgl-formwrap[data-theme="dark"] .bgl-fitem.has-error textarea {
	color: var(--bgl-fg);
}

@media (prefers-color-scheme: dark) {
	.bgl-formwrap[data-theme="auto"] .bgl-ferror {
		color: var(--bgl-block);
	}
}

/* I campi devono usare la superficie del modulo, non quella del tema. */
.bgl-formwrap.has-surface .bgl-fitem input,
.bgl-formwrap.has-surface .bgl-fitem select,
.bgl-formwrap.has-surface .bgl-fitem textarea {
	background: var(--bgl-soft);
	border-color: var(--bgl-line);
	color: var(--bgl-fg);
}

.bgl-formwrap.has-surface .bgl-fitem ::placeholder {
	color: var(--bgl-muted);
	opacity: 1;
}

.bgl-formwrap.has-surface .bgl-btn {
	background: var(--bgl-soft);
	border-color: var(--bgl-line);
	color: var(--bgl-fg);
}

.bgl-formwrap.has-surface .bgl-btn-primary {
	background: var(--bgl-btn-bg);
	border-color: var(--bgl-btn-bd);
	color: var(--bgl-btn-fg);
}

.bgl-formwrap.has-surface .bgl-fpay .bgl-fcheck {
	background: var(--bgl-soft);
	border-color: var(--bgl-line);
}

/* Su schermo stretto la cornice mangia spazio prezioso al contenuto. */
@media (max-width: 480px) {
	.bgl-formwrap.has-surface {
		padding: 1.2em 1em;
	}
}

/* La spunta della newsletter si stacca dal consenso privacy: sono due cose
   diverse e vanno lette come tali, non come un blocco unico da accettare. */
.bgl-check-news,
.bgl-fnews {
	border-top: 1px solid var(--bgl-line);
	margin-top: 0.5em;
	padding-top: 0.9em;
}

.bgl-newsletter .bgl-fhead {
	border-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Dettagli oro nella versione scura                                   */
/* ------------------------------------------------------------------ */

/*
 * L'oro non è dappertutto: sta sulle etichette, sul campo che stai
 * compilando e sul pulsante. Se lo si mettesse anche sul testo normale
 * diventerebbe una pagina gialla, e l'occhio non saprebbe più dove guardare.
 */
.bgl-formwrap[data-theme="dark"] .bgl-flabel,
.bgl-newsletter[data-theme="dark"] .bgl-flabel {
	color: var(--bgl-gold-soft);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.bgl-formwrap[data-theme="dark"] .bgl-req,
.bgl-newsletter[data-theme="dark"] .bgl-req {
	color: var(--bgl-gold);
}

/* Il titolo di sezione prende un filo d'oro sotto, non un bordo grigio. */
.bgl-formwrap[data-theme="dark"] .bgl-fhead,
.bgl-newsletter[data-theme="dark"] .bgl-fhead {
	border-bottom-color: var(--bgl-gold);
	color: var(--bgl-fg);
	font-family: var(--bgl-title-font, 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, serif);
	font-size: 1.25em;
	letter-spacing: 0.03em;
}

.bgl-formwrap[data-theme="dark"] .bgl-fitem input:focus-visible,
.bgl-formwrap[data-theme="dark"] .bgl-fitem select:focus-visible,
.bgl-formwrap[data-theme="dark"] .bgl-fitem textarea:focus-visible,
.bgl-newsletter[data-theme="dark"] .bgl-fitem input:focus-visible {
	border-color: var(--bgl-gold);
	outline-color: var(--bgl-gold);
}

.bgl-formwrap[data-theme="dark"] .bgl-fpay .bgl-fcheck:has(input:checked),
.bgl-newsletter[data-theme="dark"] .bgl-fpay .bgl-fcheck:has(input:checked) {
	border-color: var(--bgl-gold);
	box-shadow: inset 0 0 0 1px var(--bgl-gold);
}

/*
 * Pulsante: oro pieno con testo quasi nero. Il testo NON è bianco — su un oro
 * chiaro il bianco ha un contrasto di circa 2:1 e si legge male. Il nero ne
 * ha oltre 8:1.
 */
/*
 * Oro profondo con scritta bianca. L'oro chiaro qui non si puo' usare: bianco
 * su #c9a227 sta a 2,4:1 e non si legge. Questo regge il bianco a 4,9:1 e si
 * stacca dal fondo nero a 3,8:1, quindi passa sia la soglia del testo sia
 * quella delle forme.
 */
.bgl-formwrap[data-theme="dark"] .bgl-btn-primary,
.bgl-newsletter[data-theme="dark"] .bgl-btn-primary {
	background: var(--bgl-gold-deep);
	border-color: var(--bgl-gold-deep);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.03em;
	transition: background 0.15s ease, color 0.15s ease;
}

.bgl-formwrap[data-theme="dark"] .bgl-btn-primary:hover,
.bgl-formwrap[data-theme="dark"] .bgl-btn-primary:focus-visible,
.bgl-newsletter[data-theme="dark"] .bgl-btn-primary:hover {
	background: transparent;
	border-color: var(--bgl-gold);
	color: var(--bgl-gold);
}

/* La superficie scura ha una cornice sottile, non un bordo grigio spesso. */
.bgl-formwrap[data-theme="dark"].has-surface,
.bgl-newsletter[data-theme="dark"].has-surface {
	border-color: var(--bgl-line);
	box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.14);
}

.bgl-formwrap[data-theme="dark"] .bgl-notice.is-ok,
.bgl-newsletter[data-theme="dark"] .bgl-notice.is-ok {
	border-left-color: var(--bgl-gold);
}

/* Le stesse regole quando il tema segue il visitatore. */
@media (prefers-color-scheme: dark) {
	.bgl-formwrap[data-theme="auto"] .bgl-flabel,
	.bgl-newsletter[data-theme="auto"] .bgl-flabel {
		color: var(--bgl-gold-soft);
		font-weight: 600;
	}

	.bgl-formwrap[data-theme="auto"] .bgl-btn-primary,
	.bgl-newsletter[data-theme="auto"] .bgl-btn-primary {
		background: var(--bgl-gold-deep);
		border-color: var(--bgl-gold-deep);
		color: #fff;
	}

	.bgl-formwrap[data-theme="auto"] .bgl-fhead {
		border-bottom-color: var(--bgl-gold);
	}
}

/* ------------------------------------------------------------------ */
/* Pagina di un PDF                                                    */
/* ------------------------------------------------------------------ */

.bgl-pdfwrap {
	margin: 0 auto;
	max-width: var(--bgl-max, 100%);
}

.bgl-pdf-title {
	font-family: var(--bgl-title-font, 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, serif);
	font-size: 1.9em;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.4em;
	text-align: center;
}

.bgl-pdf-intro {
	color: var(--bgl-muted);
	margin: 0 auto 1.4em;
	max-width: 34em;
	text-align: center;
}

.bgl-pdf-cover {
	display: block;
	margin: 0 auto 1.2em;
	max-width: 520px;
}

.bgl-pdf-cover img {
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
	display: block;
	height: auto;
	width: 100%;
}

.bgl-pdf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7em;
	justify-content: center;
	margin: 0 0 1.6em;
}

/*
 * Il visualizzatore incorporato compare solo da 900px in su. Sotto quella
 * misura siamo quasi sempre su un telefono, e lì Safari su iOS e Chrome su
 * Android spesso non disegnano il PDF dentro un riquadro: mostrano bianco o
 * forzano il download. Meglio non mostrarlo affatto che mostrarlo rotto —
 * i pulsanti qui sopra portano al documento in ogni caso.
 */
.bgl-pdf-viewer {
	display: none;
}

@media (min-width: 900px) {
	.bgl-pdf-viewer {
		display: block;
		margin-bottom: 1.6em;
	}

	.bgl-pdf-viewer iframe {
		background: var(--bgl-soft);
		border: 1px solid var(--bgl-line);
		border-radius: var(--bgl-radius);
		display: block;
		height: var(--bgl-pdf-h, 80vh);
		width: 100%;
	}
}

.bgl-pdf-fallback {
	color: var(--bgl-muted);
	font-size: 0.85em;
	margin: 0.5em 0 0;
	text-align: center;
}

.bgl-pdf-cta {
	border-top: 1px solid var(--bgl-line);
	margin: 0 auto;
	max-width: 34em;
	padding-top: 1.4em;
	text-align: center;
}

.bgl-pdf-cta p {
	color: var(--bgl-muted);
	margin: 0 0 0.9em;
}

/* ------------------------------------------------------------------ */
/* Newsletter compatta, da piè di pagina                               */
/* ------------------------------------------------------------------ */

/*
 * Una riga sola: campo email e pulsante attaccati, consenso minuto sotto.
 * Nessun titolo, nessuna nota lunga: in un piè di pagina lo spazio verticale
 * è la cosa più cara che c'è, e ogni riga in più abbassa tutto il resto.
 */
.bgl-newsletter.is-compact {
	font-size: calc(15px * var(--bgl-scale, 1));
	max-width: var(--bgl-max, 34em);
}

.bgl-newsletter.is-compact.has-surface {
	padding: 1.1em 1.2em;
}

.bgl-news-lead {
	font-family: var(--bgl-title-font, 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, serif);
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.7em;
}

.bgl-news-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.bgl-widget .bgl-news-row input[type="email"] {
	background: var(--bgl-soft);
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	color: var(--bgl-fg);
	/* Cresce quanto può ma non scende sotto una misura in cui l'indirizzo
	   diventa illeggibile: sotto, va a capo e il pulsante prende tutta la riga. */
	flex: 1 1 11em;
	font: inherit;
	min-width: 0;
	padding: 0.7em 0.8em;
}

.bgl-widget .bgl-news-row input[type="email"]::placeholder {
	color: var(--bgl-muted);
	opacity: 1;
}

.bgl-widget .bgl-news-row .bgl-btn {
	flex: 0 0 auto;
	min-height: 0;
	padding: 0.7em 1.3em;
	white-space: nowrap;
}

.bgl-news-consent {
	font-size: 0.8em;
	line-height: 1.45;
	margin-top: 0.7em;
}

.bgl-news-consent span {
	color: var(--bgl-muted);
}

.bgl-news-consent a {
	color: inherit;
	text-decoration: underline;
}

/* Nel compatto l'avviso è una riga, non un riquadro che sfonda il footer. */
.bgl-newsletter.is-compact .bgl-notice {
	background: transparent;
	border-left-width: 2px;
	font-size: 0.88em;
	margin-bottom: 0.8em;
	padding: 0.4em 0.7em;
}

/* Su fondo scuro l'oro va anche sul filo del consenso. */
.bgl-newsletter.is-compact[data-theme="dark"] .bgl-news-consent a {
	color: var(--bgl-gold-soft);
}

/* Il testo nascosto per i lettori di schermo: l'etichetta del campo esiste
   anche quando a vederla c'è solo il segnaposto. */
.bgl-widget .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ================================================================== */
/* PASSATA GRAFICA                                                     */
/*                                                                     */
/* Le regole qui sotto arrivano dopo tutte le altre e le raffinano:    */
/* stessa struttura, aspetto diverso. Riguardano insieme il wizard di  */
/* prenotazione, i moduli personalizzati e la newsletter, perché tre   */
/* moduli che si somigliano solo per metà sembrano tre plugin diversi. */
/*                                                                     */
/* Il linguaggio è quello che hai già scelto per il resto: titoli in   */
/* serif, etichette piccole e spaziate, molto respiro, bordi sottili,  */
/* nessuna ombra pesante. L'oro solo dove serve indicare qualcosa.     */
/* ================================================================== */

.bgl-widget {
	--bgl-field-h: 3.1em;
	--bgl-ring: color-mix(in srgb, var(--bgl-accent) 45%, transparent);
}

/* Senza color-mix il cerchio di messa a fuoco resta comunque visibile. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.bgl-widget {
		--bgl-ring: var(--bgl-accent);
	}
}

/* ---------- Etichette ---------- */

/*
 * Piccole, spaziate, in maiuscoletto: l'etichetta deve dire cosa scrivere
 * senza rubare l'attenzione al campo. Prima erano grassetto nero e pesavano
 * quanto il contenuto.
 */
.bgl-widget .bgl-flabel,
.bgl-widget .bgl-field > label,
.bgl-widget .bgl-fitem > .bgl-flabel {
	color: var(--bgl-muted);
	font-size: 0.74em;
	font-weight: 600;
	letter-spacing: 0.09em;
	margin-bottom: 0.55em;
	text-transform: uppercase;
}

.bgl-widget .bgl-req {
	color: var(--bgl-accent);
	font-weight: 400;
	margin-left: 0.15em;
}

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

.bgl-widget input[type="text"],
.bgl-widget input[type="email"],
.bgl-widget input[type="tel"],
.bgl-widget input[type="number"],
.bgl-widget input[type="date"],
.bgl-widget input[type="time"],
.bgl-widget input[type="search"],
.bgl-widget select,
.bgl-widget textarea {
	background: var(--bgl-soft);
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	box-shadow: none;
	color: var(--bgl-fg);
	font: inherit;
	line-height: 1.4;
	min-height: var(--bgl-field-h);
	outline: none;
	padding: 0.85em 1em;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
	width: 100%;
}

.bgl-widget textarea {
	min-height: 6.5em;
	resize: vertical;
}

.bgl-widget input:hover:not(:disabled),
.bgl-widget select:hover:not(:disabled),
.bgl-widget textarea:hover:not(:disabled) {
	border-color: var(--bgl-muted);
}

/*
 * Messa a fuoco: un alone morbido invece del contorno di sistema, che sui
 * campi arrotondati fa un rettangolo storto. L'alone è spesso 3px, che è
 * abbastanza da vedersi anche per chi naviga da tastiera.
 */
.bgl-widget input:focus,
.bgl-widget select:focus,
.bgl-widget textarea:focus {
	background: var(--bgl-bg);
	border-color: var(--bgl-accent);
	box-shadow: 0 0 0 3px var(--bgl-ring);
}

.bgl-widget ::placeholder {
	color: var(--bgl-muted);
	opacity: 0.75;
}

/* La freccia della tendina disegnata da noi: quella di sistema è di un altro
   secolo e cambia forma su ogni browser. */
.bgl-widget select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.25em) 55%, calc(100% - 0.9em) 55%;
	background-repeat: no-repeat;
	background-size: 0.38em 0.38em, 0.38em 0.38em;
	padding-right: 2.6em;
}

/* ---------- Spunte e scelte ---------- */

/*
 * Casella disegnata a mano. Il campo vero resta lì sotto — non è finto — così
 * tastiera, lettori di schermo e compilazione automatica continuano a
 * funzionare: si sostituisce solo il disegno.
 */
.bgl-widget input[type="checkbox"],
.bgl-widget input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	background: var(--bgl-bg);
	border: 1.5px solid var(--bgl-line);
	cursor: pointer;
	display: inline-block;
	flex: 0 0 auto;
	height: 1.15em;
	margin: 0.15em 0 0;
	position: relative;
	transition: border-color 0.15s ease, background 0.15s ease;
	width: 1.15em;
}

.bgl-widget input[type="checkbox"] {
	border-radius: 5px;
}

.bgl-widget input[type="radio"] {
	border-radius: 50%;
}

.bgl-widget input[type="checkbox"]:hover,
.bgl-widget input[type="radio"]:hover {
	border-color: var(--bgl-accent);
}

.bgl-widget input[type="checkbox"]:checked,
.bgl-widget input[type="radio"]:checked {
	background: var(--bgl-accent);
	border-color: var(--bgl-accent);
}

/* Il segno di spunta è due linee ruotate: nessuna immagine da caricare. */
.bgl-widget input[type="checkbox"]:checked::after {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	height: 0.52em;
	left: 50%;
	position: absolute;
	top: 46%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 0.28em;
}

.bgl-widget input[type="radio"]:checked::after {
	background: #fff;
	border-radius: 50%;
	content: "";
	height: 0.42em;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.42em;
}

.bgl-widget input[type="checkbox"]:focus-visible,
.bgl-widget input[type="radio"]:focus-visible {
	box-shadow: 0 0 0 3px var(--bgl-ring);
}

.bgl-widget .bgl-fcheck,
.bgl-widget .bgl-check {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 0.65em;
	line-height: 1.5;
}

/* Elenchi di scelta: schede, non righe nude. */
.bgl-widget .bgl-fchoices .bgl-fcheck {
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	padding: 0.75em 0.9em;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.bgl-widget .bgl-fchoices .bgl-fcheck:hover {
	background: var(--bgl-soft);
	border-color: var(--bgl-muted);
}

.bgl-widget .bgl-fchoices .bgl-fcheck:has(input:checked) {
	background: var(--bgl-soft);
	border-color: var(--bgl-accent);
	box-shadow: inset 0 0 0 1px var(--bgl-accent);
}

/* Il consenso privacy non è una scelta fra tante: sta staccato e più minuto. */
.bgl-widget .bgl-fitem .bgl-fcheck:not(.bgl-fchoices *) {
	font-size: 0.9em;
}

/* ---------- Pulsanti ---------- */

.bgl-widget .bgl-btn {
	border-radius: 10px;
	font-weight: 650;
	letter-spacing: 0.02em;
	min-height: var(--bgl-field-h);
	padding: 0.85em 1.7em;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.08s ease;
}

.bgl-widget .bgl-btn:hover:not([disabled]) {
	border-color: var(--bgl-muted);
}

.bgl-widget .bgl-btn:active:not([disabled]) {
	transform: translateY(1px);
}

/*
 * A riposo il colore stava su .bgl-btn-primary, cioe' 0-1-0: la regola piu'
 * debole di tutto il foglio. Bastava un "button" scritto dal tema con una
 * classe davanti per vincere, e la scritta spariva dentro il nero. Al
 * passaggio del mouse invece la regola era 0-4-0 e teneva: ecco perche' il
 * difetto si vedeva solo a pulsante fermo, che e' anche il momento in cui uno
 * lo deve leggere. Ripetere qui i colori porta il riposo alla stessa forza
 * dello stato attivo.
 */
.bgl-widget .bgl-btn,
.bgl-catalog .bgl-btn {
	color: var(--bgl-fg);
}

.bgl-widget .bgl-btn-primary,
.bgl-catalog .bgl-btn-primary {
	background: var(--bgl-btn-bg);
	border-color: var(--bgl-btn-bd);
	color: var(--bgl-btn-fg);
}

.bgl-widget .bgl-btn-primary:hover:not([disabled]),
.bgl-widget .bgl-btn-primary:focus-visible:not([disabled]),
.bgl-catalog .bgl-btn-primary:hover:not([disabled]),
.bgl-catalog .bgl-btn-primary:focus-visible:not([disabled]) {
	background: var(--bgl-btn-bg-over);
	border-color: var(--bgl-btn-bd-over);
	color: var(--bgl-btn-fg-over);
}

.bgl-widget .bgl-btn:focus-visible {
	box-shadow: 0 0 0 3px var(--bgl-ring);
	outline: none;
}

/* ---------- Titoli e respiro ---------- */

.bgl-widget .bgl-fhead {
	border-bottom: 1px solid var(--bgl-line);
	font-family: var(--bgl-title-font, 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, serif);
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 1.2em 0 0.2em;
	padding-bottom: 0.5em;
}

.bgl-formwrap .bgl-fgrid,
.bgl-newsletter .bgl-fgrid {
	gap: 1.15em 1.15em;
}

.bgl-form-intro {
	color: var(--bgl-muted);
	font-size: 1.02em;
	line-height: 1.6;
}

.bgl-formwrap.has-surface {
	border-radius: 14px;
	padding: 2em 1.9em;
}

.bgl-widget .bgl-actions {
	margin-top: 1.6em;
}

.bgl-fhint,
.bgl-ferror {
	line-height: 1.45;
	margin-top: 0.15em;
}

/* ---------- Newsletter compatta: campo e pulsante uniti ---------- */

/*
 * Un solo elemento visivo invece di due accostati: il bordo esterno è del
 * contenitore, e dentro il campo non ne ha.
 *
 * Prima questo dipendeva da @media (min-width: 400px), e il pulsante andava a
 * capo sotto @media (max-width: 380px). Due errori in una volta. Il primo: fra
 * 381 e 399 pixel non valeva nessuna delle due, e il modulo restava due
 * riquadri staccati con un vuoto in mezzo. Il secondo, più serio: la larghezza
 * della finestra non è la larghezza che ha il modulo. Nel piè di pagina sta
 * dentro una colonna, e su un telefono da 390px quella colonna ne ha forse 340
 * — la finestra diceva "c'è spazio" mentre la colonna diceva il contrario.
 *
 * Adesso la pillola è la forma normale e a decidere è @container, cioè lo
 * spazio vero che il modulo ha davanti. Niente zona morta: non esiste una
 * misura in cui non vale nessuna regola.
 */
.bgl-newsletter.is-compact .bgl-news-row {
	background: var(--bgl-soft);
	border: 1px solid var(--bgl-line);
	border-radius: 999px;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0.28em;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.bgl-newsletter.is-compact .bgl-news-row:focus-within {
	border-color: var(--bgl-accent);
	box-shadow: 0 0 0 3px var(--bgl-ring);
}

.bgl-widget .bgl-news-row input[type="email"] {
	background: transparent;
	border: 0;
	border-radius: 999px;
	/* Base 5em invece di 11em: il campo si stringe insieme alla colonna invece
	   di spingere il pulsante a capo. Un campo email stretto si legge lo stesso,
	   perché il testo scorre; due righe staccate no. */
	flex: 1 1 5em;
	min-height: 2.6em;
	padding: 0.5em 1em;
}

.bgl-widget .bgl-news-row input[type="email"]:focus {
	background: transparent;
	box-shadow: none;
}

.bgl-widget .bgl-news-row .bgl-btn {
	border-radius: 999px;
	min-height: 2.6em;
	padding: 0.5em 1.4em;
}

/*
 * In colonna stretta i fianchi si stringono prima di tutto il resto. Sono
 * spazio vuoto, e lo spazio vuoto qui costa lettere: con i fianchi larghi il
 * segnaposto usciva tagliato a metà parola — «La tua ema» — che è il tipo di
 * dettaglio che fa pensare a una pagina rotta più di quanto meriti.
 */
@container (max-width: 22em) {
	.bgl-widget .bgl-news-row input[type="email"] {
		padding: 0.5em 0.75em;
	}

	.bgl-widget .bgl-news-row .bgl-btn {
		padding: 0.5em 1em;
	}
}

/*
 * Sotto le 15em il pulsante non ci sta più nemmeno stretto: solo qui si passa
 * a due righe, e la pillola torna a essere due riquadri.
 */
@container (max-width: 15em) {
	.bgl-newsletter.is-compact .bgl-news-row {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		flex-wrap: wrap;
		gap: 0.45em;
		padding: 0;
	}

	.bgl-widget .bgl-news-row input[type="email"] {
		background: var(--bgl-soft);
		border: 1px solid var(--bgl-line);
		border-radius: var(--bgl-radius);
		flex: 1 1 100%;
	}

	.bgl-widget .bgl-news-row .bgl-btn {
		border-radius: var(--bgl-radius);
		flex: 1 1 100%;
	}
}

/*
 * In una colonna stretta tutto si accorcia insieme. Il modulo nasce con una
 * scala di 1,3 pensata per una pagina intera: nel piè di pagina di un telefono
 * quella scala diventa aria, e l'aria in verticale è la cosa che si nota di
 * più perché spinge in basso tutto quello che viene dopo.
 */
@container (max-width: 26em) {
	.bgl-newsletter.is-compact,
	.bgl-social {
		font-size: calc(13px * var(--bgl-scale, 1));
	}

	.bgl-newsletter.is-compact.has-surface,
	.bgl-social.has-surface {
		padding: 0.85em 0.95em;
	}

	.bgl-news-lead {
		font-size: 1.15em;
		margin-bottom: 0.5em;
	}

	.bgl-news-consent {
		font-size: 0.82em;
		margin-top: 0.5em;
	}

	.bgl-social-row {
		gap: 0.6em;
	}

	.bgl-social-logo img {
		max-height: 2.6em;
	}
}

/* Chi non ha le container query resta sulla finestra: meno preciso, ma la
   pillola non si rompe e il vuoto in mezzo non torna. */
@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.bgl-newsletter.is-compact,
		.bgl-social {
			font-size: calc(13px * var(--bgl-scale, 1));
		}

		.bgl-newsletter.is-compact.has-surface,
		.bgl-social.has-surface {
			padding: 0.85em 0.95em;
		}
	}
}

.bgl-newsletter.is-compact .bgl-news-consent {
	font-size: 0.78em;
	margin-top: 0.9em;
}

/* ---------- Versione scura: l'oro va anche sugli stati ---------- */

.bgl-formwrap[data-theme="dark"],
.bgl-newsletter[data-theme="dark"] {
	--bgl-ring: rgba(201, 162, 39, 0.35);
}

.bgl-formwrap[data-theme="dark"] input:focus,
.bgl-formwrap[data-theme="dark"] select:focus,
.bgl-formwrap[data-theme="dark"] textarea:focus,
.bgl-newsletter[data-theme="dark"] input:focus {
	border-color: var(--bgl-gold);
}

.bgl-formwrap[data-theme="dark"] input[type="checkbox"]:checked,
.bgl-formwrap[data-theme="dark"] input[type="radio"]:checked,
.bgl-newsletter[data-theme="dark"] input[type="checkbox"]:checked {
	background: var(--bgl-gold);
	border-color: var(--bgl-gold);
}

/* Sul fondo oro il segno di spunta bianco quasi non si vede: va scuro. */
.bgl-formwrap[data-theme="dark"] input[type="checkbox"]:checked::after,
.bgl-newsletter[data-theme="dark"] input[type="checkbox"]:checked::after {
	border-color: #14120e;
}

.bgl-formwrap[data-theme="dark"] input[type="radio"]:checked::after {
	background: #14120e;
}

.bgl-formwrap[data-theme="dark"] .bgl-fchoices .bgl-fcheck:has(input:checked) {
	border-color: var(--bgl-gold);
	box-shadow: inset 0 0 0 1px var(--bgl-gold);
}

.bgl-newsletter[data-theme="dark"].is-compact .bgl-news-row:focus-within {
	border-color: var(--bgl-gold);
}

.bgl-formwrap[data-theme="dark"] .bgl-btn-primary:hover:not([disabled]),
.bgl-newsletter[data-theme="dark"] .bgl-btn-primary:hover:not([disabled]) {
	background: transparent;
	border-color: var(--bgl-gold);
	color: var(--bgl-gold);
}

/* ---------- Chi preferisce meno movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	.bgl-widget * {
		transition: none !important;
	}
}

/* ---------- Wizard: riepilogo, scelte, codice sconto ---------- */

/*
 * Il wizard aveva un suo linguaggio leggermente diverso dai moduli. Qui le
 * due cose si allineano: stessi raggi, stessi bordi, stesso respiro. Non è
 * pignoleria — due componenti quasi uguali ma non del tutto sono la cosa che
 * fa sembrare un sito montato con pezzi presi in giro.
 */
.bgl-widget .bgl-summary {
	background: var(--bgl-soft);
	border: 1px solid var(--bgl-line);
	border-radius: 12px;
	padding: 1.2em 1.3em;
}

.bgl-widget .bgl-summary dl {
	display: grid;
	gap: 0.55em 1em;
	grid-template-columns: auto 1fr;
	margin: 0;
}

.bgl-widget .bgl-summary dt {
	color: var(--bgl-muted);
	font-size: 0.78em;
	letter-spacing: 0.07em;
	margin: 0;
	text-transform: uppercase;
}

.bgl-widget .bgl-summary dd {
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.bgl-widget .bgl-choice {
	border-radius: 999px;
	padding: 0.55em 1.1em;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bgl-widget .bgl-choice:hover {
	border-color: var(--bgl-muted);
}

.bgl-widget .bgl-choice.is-on {
	background: var(--bgl-accent);
	border-color: var(--bgl-accent);
	color: #fff;
}

.bgl-widget .bgl-field-pair {
	display: grid;
	gap: 1.15em;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
	.bgl-widget .bgl-field-pair {
		grid-template-columns: 1fr;
	}
}

/*
 * Ritmo verticale fra un campo e il successivo. Vale quando i campi sono
 * incolonnati — che e' il caso normale.
 */
.bgl-widget .bgl-field + .bgl-field,
.bgl-widget .bgl-field-pair + .bgl-field {
	margin-top: 1.15em;
}

/*
 * ...ma dentro una coppia i due campi sono affiancati, e sono comunque uno il
 * fratello dell'altro: la regola qui sopra prendeva anche loro e spingeva in
 * basso la seconda colonna di 1,15em, cioe' i ventiquattro pixel per cui il
 * modulo sembrava montato storto.
 *
 * Ci ho messo un giro di troppo a trovarlo perche' ho dato la colpa al tema
 * senza prima guardare il mio foglio di stile. Il selettore "+" non chiede se
 * i due elementi stanno uno sopra l'altro o uno accanto all'altro: chiede solo
 * se si susseguono. In una griglia a due colonne si susseguono in orizzontale,
 * e un margine superiore li' non ha alcun senso.
 */
.bgl-widget .bgl-field-pair > .bgl-field + .bgl-field {
	margin-top: 0;
}

.bgl-widget .bgl-coupon {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin-top: 1em;
}

.bgl-widget .bgl-coupon input {
	flex: 1 1 10em;
	min-width: 0;
}

.bgl-widget .bgl-coupon .bgl-btn {
	flex: 0 0 auto;
}

/* Gli orari: pillole coerenti con le scelte del questionario. */
.bgl-widget .bgl-slot {
	border-radius: 999px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bgl-widget .bgl-slot:hover {
	border-color: var(--bgl-accent);
}

/*
 * La stella accesa è oro, ma di due tonalità diverse: su fondo chiaro l'oro
 * brillante sta a 2,4 contro 1, cioè sbiadisce; questo più profondo sta a 3,5
 * ed è il minimo perché una forma piena si distingua. Su fondo scuro vale il
 * contrario e torna quello brillante.
 */
.bgl-widget .bgl-star.is-on,
.bgl-widget .bgl-stars:hover .bgl-star.is-hover {
	color: #a8850f;
}

.bgl-widget[data-theme="dark"] .bgl-star.is-on,
.bgl-widget[data-theme="dark"] .bgl-stars:hover .bgl-star.is-hover {
	color: #e0c76a;
}

@media (prefers-color-scheme: dark) {
	.bgl-widget[data-theme="auto"] .bgl-star.is-on {
		color: #e0c76a;
	}
}

/* ------------------------------------------------------------------ */
/* Profili social — gemello del modulo newsletter compatto             */
/* ------------------------------------------------------------------ */

/*
 * Le misure sono le stesse della newsletter compatta, e non "simili": due
 * riquadri affiancati in un piè di pagina si guardano l'uno accanto all'altro,
 * e mezzo em di differenza nel bordo o nell'imbottitura si vede subito. Se un
 * giorno cambi quelle, cambia anche queste.
 */
.bgl-social {
	font-size: calc(15px * var(--bgl-scale, 1));
	max-width: var(--bgl-max, 34em);
}

.bgl-social.has-surface {
	padding: 1.1em 1.2em;
}

.bgl-social-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9em;
}

.bgl-social-logo {
	flex: 0 0 auto;
	line-height: 0;
}

.bgl-social-logo img {
	border-radius: 8px;
	display: block;
	height: auto;
	max-height: 3.2em;
	width: auto;
}

.bgl-social-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bgl-social-list li {
	margin: 0;
}

/*
 * Quadrato di 2,6em con l'icona dentro. La misura è fissa e uguale per tutte:
 * i disegni hanno pesi diversi — il tondo di Spotify riempie più della "f" di
 * Facebook — e senza una gabbia comune la fila sembrerebbe storta.
 */
.bgl-widget .bgl-social-icon {
	align-items: center;
	background: transparent;
	border: 1px solid var(--bgl-line);
	border-radius: 10px;
	color: var(--bgl-fg);
	display: inline-flex;
	height: 2.6em;
	justify-content: center;
	text-decoration: none;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.08s ease;
	width: 2.6em;
}

.bgl-widget .bgl-social-icon svg {
	height: 1.35em;
	width: 1.35em;
}

/* Stessa inversione dei pulsanti: nero pieno, scritta bianca. */
.bgl-widget .bgl-social-icon:hover,
.bgl-widget .bgl-social-icon:focus-visible {
	background: var(--bgl-btn-bg);
	border-color: var(--bgl-btn-bg);
	color: var(--bgl-btn-fg);
}

.bgl-widget .bgl-social-icon:active {
	transform: translateY(1px);
}

.bgl-widget .bgl-social-icon:focus-visible {
	box-shadow: 0 0 0 3px var(--bgl-ring);
	outline: none;
}

/* Sul fondo scuro l'oro profondo con l'icona bianca, come il pulsante. */
.bgl-social[data-theme="dark"] .bgl-social-icon:hover,
.bgl-social[data-theme="dark"] .bgl-social-icon:focus-visible {
	background: var(--bgl-gold-deep);
	border-color: var(--bgl-gold-deep);
	color: #fff;
}

.bgl-social[data-theme="dark"] .bgl-social-logo img {
	/* Un logo scuro su fondo nero sparisce. Se il tuo è già chiaro non cambia
	   niente, perché il filtro agisce solo su quello che è più scuro del fondo. */
	filter: brightness(1.15);
}

@media (prefers-color-scheme: dark) {
	.bgl-social[data-theme="auto"] .bgl-social-icon:hover,
	.bgl-social[data-theme="auto"] .bgl-social-icon:focus-visible {
		background: var(--bgl-gold-deep);
		border-color: var(--bgl-gold-deep);
		color: #fff;
	}
}

/* Sotto i 22em il logo va sopra e le icone sotto, invece di stringersi. */
@container (max-width: 22em) {
	.bgl-social-row {
		gap: 0.7em;
	}
}

/* ---------- Striscia orizzontale, da mettere dentro le pagine ---------- */

/*
 * Non è il riquadro con i bordi arrotondati: è una riga sottile fra due filetti,
 * pensata per stare in mezzo al contenuto di una pagina. Un riquadro grigio in
 * mezzo al testo interrompe la lettura; due filetti la accompagnano.
 *
 * In bianco e nero indipendentemente dal colore d'accento, come i pulsanti.
 */
.bgl-social.is-strip {
	--bgl-line: #d8d8d6;
	border-bottom: 1px solid var(--bgl-line);
	border-top: 1px solid var(--bgl-line);
	color: #111318;
	font-size: calc(15px * var(--bgl-scale, 1));
	max-width: var(--bgl-max, 100%);
	padding: 0.85em 0;
}

.bgl-social.is-strip .bgl-social-row {
	gap: 0.8em 1em;
	justify-content: center;
}

.bgl-social.is-strip .bgl-social-logo img {
	max-height: 2.4em;
}

/*
 * Il titolo sta sulla stessa riga delle icone, non sopra: una striscia con due
 * righe non è più una striscia.
 */
.bgl-social-title {
	font-family: var(--bgl-title-font, 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, serif);
	font-size: 1.25em;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	margin-right: 0.2em;
}

.bgl-social.is-strip .bgl-social-list {
	gap: 0.45em;
}

.bgl-widget.is-strip .bgl-social-icon {
	border-color: #111318;
	color: #111318;
	height: 2.4em;
	width: 2.4em;
}

.bgl-widget.is-strip .bgl-social-icon:hover,
.bgl-widget.is-strip .bgl-social-icon:focus-visible {
	background: #111318;
	border-color: #111318;
	color: #fff;
}

/* La striscia scura: gli stessi due filetti, invertiti. */
.bgl-social.is-strip[data-theme="dark"] {
	--bgl-line: #33302a;
	color: #f2eee6;
}

.bgl-widget.is-strip[data-theme="dark"] .bgl-social-icon {
	border-color: #4a463d;
	color: #f2eee6;
}

.bgl-widget.is-strip[data-theme="dark"] .bgl-social-icon:hover,
.bgl-widget.is-strip[data-theme="dark"] .bgl-social-icon:focus-visible {
	background: #f2eee6;
	border-color: #f2eee6;
	color: #111318;
}

/* Su schermo stretto il titolo va a capo da solo e le icone restano in fila. */
@container (max-width: 26em) {
	.bgl-social.is-strip .bgl-social-row {
		gap: 0.6em;
	}

	.bgl-social-title {
		flex: 1 0 100%;
		text-align: center;
	}
}

/* ---------- Domande di ispirazione ---------- */

/*
 * Sezioni richiudibili native (<details>): niente JavaScript per aprirle,
 * niente attributi ARIA da mantenere. Il triangolino di serie del browser è
 * brutto e diverso su ogni sistema, quindi lo si toglie e si disegna una
 * freccia che ruota.
 */
.bgl-inspire {
	gap: 0.5em;
}

.bgl-inspire-lead {
	font-family: var(--bgl-title-font, 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, serif);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.bgl-inspire-sec {
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	overflow: hidden;
}

.bgl-inspire-sec + .bgl-inspire-sec {
	margin-top: 0.5em;
}

.bgl-inspire-sec > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-weight: 650;
	gap: 0.6em;
	justify-content: space-between;
	letter-spacing: 0.01em;
	list-style: none;
	padding: 0.85em 1em;
}

.bgl-inspire-sec > summary::-webkit-details-marker {
	display: none;
}

.bgl-inspire-sec > summary:hover {
	background: var(--bgl-soft);
}

.bgl-inspire-sec > summary:focus-visible {
	box-shadow: inset 0 0 0 3px var(--bgl-ring);
	outline: none;
}

.bgl-inspire-sec > summary svg {
	flex: 0 0 auto;
	height: 1.2em;
	transition: transform 0.18s ease;
	width: 1.2em;
}

.bgl-inspire-sec[open] > summary svg {
	transform: rotate(180deg);
}

.bgl-inspire-sec[open] > summary {
	border-bottom: 1px solid var(--bgl-line);
}

.bgl-inspire-sec ul {
	list-style: none;
	margin: 0;
	padding: 0.5em;
}

.bgl-inspire-sec li {
	margin: 0;
}

/*
 * Ogni domanda è un pulsante largo quanto la riga: il bersaglio grande conta
 * più dell'eleganza, perché su telefono ci si arriva col pollice.
 */
.bgl-widget .bgl-inspire-q {
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: inherit;
	cursor: pointer;
	display: block;
	font: inherit;
	line-height: 1.5;
	padding: 0.55em 0.7em;
	text-align: left;
	transition: background 0.14s ease;
	width: 100%;
}

.bgl-widget .bgl-inspire-q:hover {
	background: var(--bgl-soft);
}

.bgl-widget .bgl-inspire-q:focus-visible {
	box-shadow: 0 0 0 3px var(--bgl-ring);
	outline: none;
}

/* Già scelta: resta leggibile, ma si vede che è stata usata. */
.bgl-widget .bgl-inspire-q.is-used {
	color: var(--bgl-muted);
}

.bgl-widget .bgl-inspire-q.is-used::after {
	content: " ✓";
}

@media (prefers-reduced-motion: reduce) {
	.bgl-inspire-sec > summary svg {
		transition: none;
	}
}

/* ---------- Data e ora a caselle, luogo con suggerimenti ---------- */

/*
 * Tre caselle invece del selettore di data. Il selettore del browser sembra
 * più moderno ma per una data di NASCITA è la scelta sbagliata: si apre sul
 * mese corrente e per arrivare al 1958 servono ottocento tocchi, l'ordine
 * giorno/mese cambia con la lingua del telefono, e su parecchi browser non si
 * può scrivere a mano. Tre numeri si compilano in cinque secondi.
 */
.bgl-datebits {
	align-items: center;
	display: flex;
	gap: 0.35em;
}

.bgl-widget .bgl-datebits input {
	-moz-appearance: textfield;
	appearance: textfield;
	flex: 0 0 3.2em;
	text-align: center;
}

.bgl-widget .bgl-datebits input.is-year {
	flex: 0 0 4.6em;
}

.bgl-datebits span {
	color: var(--bgl-muted);
	flex: 0 0 auto;
}

/* Elenco dei luoghi suggeriti. */
.bgl-fitem:has(.bgl-places) {
	position: relative;
}

.bgl-places {
	background: var(--bgl-bg);
	border: 1px solid var(--bgl-line);
	border-radius: var(--bgl-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	left: 0;
	list-style: none;
	margin: 0.2em 0 0;
	max-height: 15em;
	overflow-y: auto;
	padding: 0.25em;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 30;
}

.bgl-places li {
	border-radius: 7px;
	cursor: pointer;
	line-height: 1.4;
	margin: 0;
	padding: 0.5em 0.6em;
}

.bgl-places li[aria-selected="true"],
.bgl-places li:hover {
	background: var(--bgl-soft);
}

.bgl-places .bgl-place-pr {
	color: var(--bgl-muted);
	font-size: 0.88em;
}

/* Senza posizionamento relativo l'elenco cadrebbe in fondo alla pagina. */
@supports not selector(:has(*)) {
	.bgl-fitem {
		position: relative;
	}
}

/* ---------- Modulo «I tuoi dati» ---------- */

.bgl-privacy-form .bgl-fchoices {
	gap: 0.4em;
}

.bgl-privacy-form .bgl-fnote a {
	color: inherit;
}

/* ---------- Link dentro i moduli ---------- */

/*
 * Il plugin non diceva niente sui link dentro i moduli, quindi a riposo
 * prendevano il colore del tema e al passaggio del mouse pure — e il colore di
 * hover di un tema è quasi sempre una tinta più chiara, pensata per un link
 * dentro un paragrafo, non per una riga di consenso che si legge una volta
 * sola. Il risultato era che il link si vedeva bene finché stavi fermo e
 * spariva proprio quando ci andavi sopra: l'inverso di quello che deve
 * succedere.
 *
 * Il colore a riposo lo lascio al tema, perché lì funzionava. Al passaggio del
 * mouse il link va invece al colore pieno del testo con una sottolineatura più
 * spessa: non conta il colore, conta che cambi in modo evidente.
 */
.bgl-widget .bgl-fcheck a,
.bgl-widget .bgl-fhint a,
.bgl-widget .bgl-fnote a,
.bgl-widget .bgl-form-intro a,
.bgl-widget .bgl-inspire a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.14s ease, text-decoration-thickness 0.14s ease;
}

.bgl-widget .bgl-fcheck a:hover,
.bgl-widget .bgl-fhint a:hover,
.bgl-widget .bgl-fnote a:hover,
.bgl-widget .bgl-form-intro a:hover,
.bgl-widget .bgl-inspire a:hover,
.bgl-widget .bgl-fcheck a:focus-visible,
.bgl-widget .bgl-fhint a:focus-visible,
.bgl-widget .bgl-fnote a:focus-visible,
.bgl-widget .bgl-form-intro a:focus-visible,
.bgl-widget .bgl-inspire a:focus-visible {
	color: var(--bgl-fg);
	text-decoration-thickness: 2px;
}

/* Da tastiera serve anche un contorno: la sottolineatura da sola non basta. */
.bgl-widget .bgl-fcheck a:focus-visible,
.bgl-widget .bgl-fhint a:focus-visible,
.bgl-widget .bgl-fnote a:focus-visible,
.bgl-widget .bgl-form-intro a:focus-visible {
	border-radius: 3px;
	box-shadow: 0 0 0 3px var(--bgl-ring);
	outline: none;
}

/* Sul fondo scuro il testo pieno è chiaro, quindi il contrasto regge uguale. */
.bgl-formwrap[data-theme="dark"] .bgl-fcheck a:hover,
.bgl-formwrap[data-theme="dark"] .bgl-fnote a:hover,
.bgl-formwrap[data-theme="dark"] .bgl-form-intro a:hover {
	color: var(--bgl-gold-soft);
}

@media (prefers-reduced-motion: reduce) {
	.bgl-widget .bgl-fcheck a,
	.bgl-widget .bgl-fhint a,
	.bgl-widget .bgl-fnote a,
	.bgl-widget .bgl-form-intro a {
		transition: none;
	}
}

/* ---------- Allineamento delle colonne ---------- */

/*
 * Due campi affiancati devono partire dalla stessa altezza.
 *
 * Queste righe le avevo scritte convinto che il colpevole fosse il tema. Non lo
 * era: era una mia regola di spaziatura, corretta piu' su. Le lascio comunque,
 * perche' fanno una cosa sensata di per se' — ancorano in alto le colonne e
 * azzerano i margini superiori che un tema potrebbe aggiungere — ma da sole non
 * bastavano: la regola sbagliata aveva la meglio perche' era piu' specifica.
 */
.bgl-field-pair,
.bgl-fgrid,
.bgl-datebits,
.bgl-social-row {
	align-items: start;
}

.bgl-field-pair > *,
.bgl-fgrid > *,
.bgl-widget .bgl-field,
.bgl-widget .bgl-fitem {
	margin-top: 0;
}

/*
 * Anche dentro il singolo campo: etichetta attaccata in cima, controllo subito
 * sotto. Se il tema stacca l'input dalla sua etichetta, due campi con etichette
 * di lunghezza diversa finiscono a due altezze diverse.
 */
.bgl-widget .bgl-field > label,
.bgl-widget .bgl-fitem > label,
.bgl-widget .bgl-flabel {
	margin-top: 0;
}

.bgl-widget .bgl-field input,
.bgl-widget .bgl-field select,
.bgl-widget .bgl-field textarea,
.bgl-widget .bgl-fitem input,
.bgl-widget .bgl-fitem select,
.bgl-widget .bgl-fitem textarea {
	margin-top: 0;
}

/* La coppia ha bisogno anche dello spazio fra le due righe, quando va a capo. */
.bgl-field-pair {
	gap: 0 12px;
}

@media (max-width: 479px) {
	.bgl-field-pair {
		gap: 0;
	}
}

/* ---------- Elenco dei consulti: nome e descrizione ---------- */

/*
 * Nome e descrizione erano due <span> senza display: block, quindi finivano
 * incollati sulla stessa riga — "Lettura dei Registri AkashiciI Registri
 * Akashici custodiscono…". Un titolo e la sua descrizione devono stare su due
 * righe: è il minimo perché si capisca dove finisce l'uno e comincia l'altra.
 */
.bgl-option-main {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.bgl-option-name,
.bgl-option-sub {
	display: block;
}

.bgl-option-sub {
	line-height: 1.5;
}

/* ---------- Avviso di chiusura ---------- */

/*
 * Prima era un riquadrino grigio con un filetto a sinistra, e finiva sotto
 * l'avviso di preparazione del consulto: due note dello stesso peso, e si
 * leggeva solo la prima. Ma qui non c'e' altro da leggere in tutta la
 * schermata — se le prenotazioni sono sospese, quella e' L'informazione.
 *
 * Quindi: fondo colorato invece che grigio, un'icona che si vede da lontano,
 * un titolo breve che dice subito cosa sta succedendo, e il messaggio nel
 * carattere dei titoli. Non e' un errore e non deve spaventare: e' una
 * comunicazione, e deve sembrarlo.
 */
.bgl-closure {
	align-items: flex-start;
	background: var(--bgl-soft);
	border: 1px solid var(--bgl-line);
	border-radius: 14px;
	color: var(--bgl-fg);
	display: flex;
	gap: 0.9em;
	margin: 0.6em 0 1.2em;
	padding: 1.4em 1.5em;
	text-align: left;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.bgl-closure {
		background: color-mix(in srgb, var(--bgl-accent) 8%, var(--bgl-bg));
		border-color: color-mix(in srgb, var(--bgl-accent) 28%, var(--bgl-bg));
	}
}

.bgl-closure-icon {
	color: var(--bgl-accent);
	flex: 0 0 auto;
	height: 1.9em;
	margin-top: 0.05em;
	width: 1.9em;
}

.bgl-closure-text {
	min-width: 0;
}

.bgl-closure-text strong {
	color: var(--bgl-muted);
	display: block;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.35em;
	text-transform: uppercase;
}

.bgl-closure-text p {
	font-family: var(--bgl-title-font, 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, serif);
	font-size: 1.42em;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

@container (max-width: 26em) {
	.bgl-closure {
		padding: 1.1em 1.1em;
	}

	.bgl-closure-text p {
		font-size: 1.2em;
	}
}

/* ---------- Targhette nelle schede del catalogo ---------- */

/*
 * Le stesse targhettine del modulo, e ormai quasi tutto arriva gia' fatto da
 * .bgl-chip.is-key: qui resta solo la misura del testo.
 *
 * Serve perche' i due posti partono da basi diverse. Nel modulo il testo e'
 * ingrandito di 1,3 e la targhetta si rimpicciolisce a 0,78 per compensare;
 * nel catalogo si parte gia' da 16px netti, quindi quello stesso 0,78
 * porterebbe l'etichetta sotto i nove pixel — scritta in maiuscoletto e
 * spaziata, cioe' nelle condizioni peggiori per leggerla.
 */
.bgl-catalog .bgl-chip.is-key {
	font-size: 1em;
}

/*
 * Nello slider le schede sono piu' strette. Si stringe lo spazio attorno, non
 * il testo: rimpicciolire l'etichetta l'avrebbe portata sotto gli undici
 * pixel, ed e' gia' maiuscoletto spaziato.
 */
.bgl-slider .bgl-chip.is-key {
	gap: 0.4em;
	padding: 0.38em 0.75em;
}

.bgl-slider .bgl-chip.is-key .bgl-chip-body {
	gap: 0.4em;
}

/*
 * L'esito positivo di un'azione, dentro una scheda.
 *
 * Esisteva .bgl-error ma non il suo opposto: dopo un annullamento riuscito
 * il messaggio usciva senza stile, e una riga di testo nudo dove prima c'era
 * una scheda sembra piu' un errore che una conferma.
 */
.bgl-ok {
	background: var(--bgl-ok-bg);
	border-left: 3px solid var(--bgl-ok);
	border-radius: 0;
	color: #0f5133;
	font-size: 0.95em;
	line-height: 1.55;
	padding: 0.9em 1.1em;
}

/* ---------- L'area del corso ---------- */

.bgl-acc-head {
	border-bottom: 1px solid var(--bgl-line);
	margin-bottom: 1.4em;
	padding-bottom: 0.8em;
}

.bgl-acc-lessons {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bgl-acc-lesson {
	border: 1px solid var(--bgl-line);
	border-radius: 12px;
	margin-bottom: 1em;
	padding: 1.1em 1.3em;
}

/*
 * Una lezione non ancora acquistata resta visibile ma spenta. Nasconderla del
 * tutto sarebbe stato piu' semplice e peggio: chi ha comprato una lezione sola
 * deve vedere cosa c'e' intorno, altrimenti non sa nemmeno cosa gli manca.
 */
.bgl-acc-lesson.is-locked {
	background: var(--bgl-soft);
	border-style: dashed;
}

.bgl-acc-lesson.is-locked h4,
.bgl-acc-lesson.is-locked .bgl-acc-desc {
	opacity: 0.7;
}

.bgl-acc-when {
	align-items: center;
	color: var(--bgl-muted);
	display: flex;
	font-size: 0.85em;
	gap: 0.6em;
	margin-bottom: 0.4em;
}

.bgl-acc-n {
	background: var(--bgl-accent);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 0.85em;
	font-weight: 700;
	height: 1.9em;
	width: 1.9em;
}

.bgl-acc-lesson h4 {
	font-size: 1.05em;
	margin: 0 0 0.35em;
}

.bgl-acc-desc {
	color: var(--bgl-muted);
	font-size: 0.95em;
	line-height: 1.55;
	margin: 0 0 0.9em;
}

.bgl-acc-files {
	list-style: none;
	margin: 0.9em 0 0;
	padding: 0;
}

.bgl-acc-files li {
	border-top: 1px solid var(--bgl-line);
	padding: 0.55em 0;
}

.bgl-acc-files a {
	font-weight: 600;
}

/* ══════════════════════════════════════════
   PERCHÉ NON ENTRA — pannello per chi amministra
   ══════════════════════════════════════════ */

.bgl-diagnosi {
    margin-top: 22px;
    padding: 16px 18px;
    background: #fdf9f0;
    border: 1px solid #e6d6b4;
    border-left: 4px solid #9a6100;
    border-radius: 0 8px 8px 0;
    color: #4a3000;
    font-size: 0.88rem;
    line-height: 1.55;
}

.bgl-diagnosi-tit {
    margin: 0 0 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bgl-diagnosi ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bgl-diagnosi li {
    position: relative;
    padding-left: 26px;
}

.bgl-diagnosi li span {
    display: block;
    font-size: 0.83rem;
    opacity: 0.85;
    margin-top: 2px;
}

/*
 * La spunta e la croce sono disegnate qui: due bordi piegati per la spunta,
 * due righe incrociate per la croce. Niente caratteri presi altrove, che
 * cambiano forma da un dispositivo all'altro proprio quando servono chiari.
 */
.bgl-diagnosi li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.35em;
}

.bgl-diagnosi li.is-ok::before {
    width: 5px;
    height: 10px;
    border: solid #1c7a5a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-left: 3px;
}

.bgl-diagnosi li.is-no::before {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #b03a3a;
    top: 0.25em;
}

.bgl-diagnosi li.is-no {
    font-weight: 600;
}

.bgl-diagnosi-nota {
    margin: 10px 0 0;
    font-size: 0.83rem;
}

.bgl-diagnosi code {
    background: #f2e8d2;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.85em;
}

.bgl-diagnosi .bgl-btn-ghost {
    display: inline-block;
    background: transparent;
    border: 1px solid #9a6100;
    color: #4a3000;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 0.83rem;
    font-weight: 700;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 4px;
}

.bgl-diagnosi .bgl-btn-ghost:hover {
    background: #9a6100;
    color: #fff;
}

/* ══════════════════════════════════════════
   RECUPERO DEL CODICE — [bgl_recupera_codice]
   ══════════════════════════════════════════ */

.bgl-recall {
    margin: 18px 0;
}

.bgl-recall-tit {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 700;
}

.bgl-recall-intro {
    margin: 0 0 12px;
    font-size: 0.88rem;
    line-height: 1.55;
    opacity: 0.85;
}

.bgl-recall-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

/*
 * Il campo si allarga, il pulsante no. flex: 1 1 220px e non 1 1 auto: sotto i
 * 220 pixel il campo va a capo invece di stringersi in una fessura in cui non
 * si legge quello che si sta scrivendo.
 */
.bgl-recall-form input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
}

.bgl-recall-form .bgl-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.bgl-recall.is-compact .bgl-recall-tit { font-size: 0.92rem; }
.bgl-recall.is-compact .bgl-recall-intro { font-size: 0.82rem; margin-bottom: 8px; }

@media (max-width: 520px) {
    .bgl-recall-form .bgl-btn { flex: 1 1 100%; }
}