/* ==========================================================================
   Noleggio: listino, modulo di prenotazione e pagina di stato del plugin
   Digival Noleggio. Il markup (classi dgn-*) e' del plugin, lo stile e' qui.
   Angoli vivi, filetti da 1px, niente ombre (materiali/direzione.md).
   I colori sono quelli del reparto: inc/blocchi.php assegna a ogni reparto (classe
   dgn-reparto-<ID>, stampata dal plugin) i colori della stagione della sua pagina di
   prenotazione. Dove il reparto non si sa, valgono quelli della pagina (--dg-pagina-*).

   I colori di stato (--dgn-success, --dgn-warning, --dgn-danger, --dgn-info)
   li stampa il plugin: si scelgono in Noleggio → Impostazioni → Colori. Se
   mancano vale il neutro scuro. Sempre con bordo e testo in grassetto, mai il
   solo colore.
   ========================================================================== */

.dgn-prenota,
.dgn-listino,
.dgn-catalogo,
.dgn-stato {
	--dgn-errore: var(--dgn-danger, var(--dg-neutral-900));
	--dgn-conferma: var(--dgn-success, var(--dg-neutral-900));
	--dgn-attesa: var(--dgn-warning, var(--dg-neutral-900));
	--dgn-nota: var(--dgn-info, var(--dg-neutral-900));
	--dgn-fondo: var(--dg-pagina-fondo, var(--dg-primary-600));
	--dgn-testo: var(--dg-pagina-testo, var(--dg-primary-50));
	--dgn-segno: var(--dg-pagina-segno, var(--dg-primary-500));
	--dgn-tenue: var(--dg-pagina-tenue, var(--dg-primary-100));
	--dgn-scuro: var(--dg-pagina-scuro, var(--dg-primary-700)); /* il colore del reparto che regge come testo su bianco */
	--dgn-campo: 2.5rem;
	/* Anche l'anello del fuoco prende il colore del reparto (quello che regge su bianco). */
	--dg-focus-ring-color: var(--dgn-segno);
}
/* Sul riquadro colorato del riepilogo l'anello sarebbe tono su tono: li' prende il colore del testo. */
.dgn-modulo__riepilogo { --dg-focus-ring-color: var(--dgn-testo); }

/* --- Pulsanti: come .dg-btn del tema ---------------------------------------- */
.dgn-modulo__avanti,
.dgn-modulo__invia,
.dgn-fatto__paga,
.dgn-stato__paga {
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	padding: var(--dg-space-4) var(--dg-space-5);
	font: inherit; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold);
	letter-spacing: .06em; line-height: 1; text-transform: uppercase; text-decoration: none;
	color: var(--dg-neutral-50); background: var(--dg-neutral-900);
	border: 0; border-radius: var(--dg-radius-none);
	cursor: pointer;
	transition: color var(--dg-duration-base) var(--dg-ease-standard);
}
.dgn-modulo__avanti::before,
.dgn-modulo__invia::before,
.dgn-fatto__paga::before,
.dgn-stato__paga::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 0;
	background: var(--dgn-fondo);
	transition: width var(--dg-duration-base) var(--dg-ease-standard);
}
.dgn-modulo__avanti:hover, .dgn-modulo__avanti:focus-visible,
.dgn-modulo__invia:hover, .dgn-modulo__invia:focus-visible,
.dgn-fatto__paga:hover, .dgn-fatto__paga:focus-visible,
.dgn-stato__paga:hover, .dgn-stato__paga:focus-visible { color: var(--dgn-testo); }
.dgn-modulo__avanti:hover::before, .dgn-modulo__avanti:focus-visible::before,
.dgn-modulo__invia:hover::before, .dgn-modulo__invia:focus-visible::before,
.dgn-fatto__paga:hover::before, .dgn-fatto__paga:focus-visible::before,
.dgn-stato__paga:hover::before, .dgn-stato__paga:focus-visible::before { width: 100%; }
.dgn-modulo__invia:disabled, .dgn-modulo__avanti:disabled { opacity: var(--dg-disabled-opacity); cursor: progress; }
.dgn-modulo__invia[hidden], .dgn-modulo__avanti[hidden], .dgn-modulo__nota[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
	.dgn-modulo__avanti, .dgn-modulo__avanti::before, .dgn-modulo__invia, .dgn-modulo__invia::before, .dgn-fatto__paga, .dgn-fatto__paga::before, .dgn-stato__paga, .dgn-stato__paga::before { transition: none; }
}

/* --- Avvisi ------------------------------------------------------------------ */
.dgn-avviso { margin: 0 0 var(--dg-space-4); padding: var(--dg-space-3) var(--dg-space-4); font-weight: var(--dg-fw-semibold); line-height: 1.4; border: 2px solid currentColor; }
.dgn-avviso[hidden] { display: none; }
.dgn-avviso--errore { text-align: center; color: var(--dg-white); background: var(--dgn-errore); border-color: var(--dgn-errore); }
.dgn-avviso--info { color: var(--dgn-nota); background: var(--dg-white); }
/* Prodotto da cui si arriva ("Stai prenotando..."): non e' un avviso di stato, prende il colore del reparto.
   Fondo nel gradino 100 del colore, filetto solo a sinistra, testo scuro. */
/* Stagione finita: al posto del modulo. Fondo tenue e segno a sinistra nel colore del reparto, come l'avviso del prodotto scelto. */
.dgn-chiuso { display: flex; align-items: center; gap: var(--dg-space-4); padding: var(--dg-space-4) var(--dg-space-5); color: var(--dg-neutral-900); background: var(--dgn-tenue); border-left: var(--dg-space-2) solid var(--dgn-segno); }
.dgn-chiuso__icona { flex: none; width: 3rem; height: 3rem; color: var(--dgn-scuro); }
.dgn-chiuso__corpo { min-width: 0; }
.dgn-chiuso__titolo { margin: 0 0 var(--dg-space-1); font-size: var(--dg-h4); font-weight: var(--dg-fw-bold); line-height: 1.2; }
.dgn-chiuso__testo { margin: 0; font-size: var(--dg-fs-lg); line-height: 1.5; color: var(--dg-neutral-800); }
@media (max-width: 599px) {
	.dgn-chiuso { align-items: flex-start; gap: var(--dg-space-4); padding: var(--dg-space-4); }
	.dgn-chiuso__icona { width: 2.25rem; height: 2.25rem; }
}
/* Solo per un amministratore collegato: sta provando il modulo fuori dal periodo di apertura. */
.dgn-avviso--prova { font-weight: var(--dg-fw-normal); color: var(--dg-neutral-900); background: var(--dg-neutral-100); border: 0; border-left: var(--dg-space-2) solid var(--dgn-attesa); }
.dgn-avviso--scelto { color: var(--dg-neutral-900); background: var(--dgn-tenue); border: 0; border-left: var(--dg-space-2) solid var(--dgn-segno); }

/* --- Listino ----------------------------------------------------------------- */
.dgn-listino { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dg-space-6); }
/* Senza min-width: 0 la tabella allargherebbe la griglia, e con lei la pagina. */
.dgn-listino__gruppo { min-width: 0; }
.dgn-listino__scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dgn-listino__scorri:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }
.dgn-listino__tabella { width: 100%; min-width: 34rem; border-collapse: collapse; }
.dgn-listino__titolo { padding-bottom: var(--dg-space-3); font-size: var(--dg-h4); font-weight: var(--dg-fw-bold); text-align: left; color: var(--dg-neutral-900); caption-side: top; }
.dgn-listino__tabella th,
.dgn-listino__tabella td { padding: var(--dg-space-3); text-align: right; white-space: nowrap; border-bottom: var(--dg-border-width) solid var(--dg-neutral-200); }
.dgn-listino__tabella thead th { font-size: var(--dg-fs-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--dgn-testo); background: var(--dgn-fondo); border: 0; }
.dgn-listino__tabella tbody th { position: sticky; left: 0; font-weight: var(--dg-fw-bold); text-align: left; color: var(--dg-neutral-900); background: var(--dg-white); }
.dgn-listino__tabella thead th:first-child { position: sticky; left: 0; }
.dgn-listino__tabella tbody tr:hover > * { background: var(--dg-neutral-100); }
.dgn-listino__tabella td:last-child { color: var(--dg-neutral-700); }

/* --- Catalogo: filtri e card dei prodotti ---------------------------------------- */
.dgn-catalogo__filtri { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); margin-bottom: var(--dg-space-5); }
.dgn-catalogo__filtri[hidden] { display: none; }
.dgn-catalogo__filtro {
	padding: var(--dg-space-2) var(--dg-space-3);
	font: inherit; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .06em; text-transform: uppercase;
	color: var(--dg-neutral-900); background: transparent;
	border: var(--dg-border-width) solid var(--dg-neutral-900); border-radius: var(--dg-radius-none); cursor: pointer;
}
.dgn-catalogo__filtro:hover { background: var(--dg-neutral-100); }
.dgn-catalogo__filtro.is-attivo { color: var(--dgn-testo); background: var(--dgn-fondo); border-color: var(--dgn-fondo); }
.dgn-catalogo__elenco { display: grid; gap: var(--dg-space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .dgn-catalogo__elenco { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .dgn-catalogo__elenco { grid-template-columns: repeat(3, 1fr); } }

.dgn-card { display: flex; flex-direction: column; min-width: 0; border: var(--dg-border-width) solid var(--dg-neutral-200); }
.dgn-card[hidden] { display: none; }
/* Senza foto la card si apre con il filetto del colore di stagione. */
.dgn-card--senza-foto { border-top: 3px solid var(--dgn-segno); }
/* Lo spazio della foto e' sempre quadrato, qualunque sia la proporzione dell'immagine: la foto ci sta dentro intera. */
.dgn-card__foto { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 1 / 1; padding: var(--dg-space-3); background: var(--dg-white); border-bottom: var(--dg-border-width) solid var(--dg-neutral-200); }
.dgn-card__foto { position: relative; }
.dgn-card__foto > img, .dgn-card__apri > img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.dgn-card__apri { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-width: 0; min-height: 0; cursor: zoom-in; }
.dgn-card__apri:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }
/* La lente: su telefono sta sempre nell'angolo in alto a destra; con il mouse copre la foto al passaggio. */
.dgn-card__lente {
	/* Attaccata all'angolo dello spazio foto: si recupera il margine interno della foto. */
	position: absolute; top: calc(-1 * var(--dg-space-3)); right: calc(-1 * var(--dg-space-3)); z-index: 1;
	display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
	color: var(--dg-white); background: var(--dg-neutral-900);
}
.dgn-card__lente .dgn-icona { width: 1.5rem; height: 1.5rem; }
@media (hover: hover) {
	.dgn-card__lente {
		inset: calc(-1 * var(--dg-space-3)); width: auto; height: auto;
		background: color-mix(in srgb, var(--dg-neutral-900) 45%, transparent);
		opacity: 0; transition: opacity var(--dg-duration-base) var(--dg-ease-standard);
	}
	.dgn-card__lente .dgn-icona { width: 2.5rem; height: 2.5rem; }
	/* Ogni foto ha il suo velo: quello grande sulla principale, uno piccolo su ciascuna miniatura. */
	.dgn-card__apri:hover .dgn-card__lente, .dgn-card__apri:focus-visible .dgn-card__lente,
	.dgn-card__miniature a:hover .dgn-card__lente, .dgn-card__miniature a:focus-visible .dgn-card__lente { opacity: 1; }
	.dgn-card__lente--miniatura { inset: 0; }
	.dgn-card__lente--miniatura .dgn-icona { width: 1.5rem; height: 1.5rem; }
}
/* Miniature della galleria: sopra la foto, attaccate all'angolo in basso a destra e fra loro,
   ognuna larga un quinto dello spazio. Un filo le separa dalla foto e l'una dall'altra. */
.dgn-card__miniature {
	position: absolute; right: 0; bottom: 0; left: 0; z-index: 2;
	display: flex; justify-content: flex-end;
	margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.dgn-card__miniature li { flex: 0 0 20%; margin: 0; pointer-events: auto; }
.dgn-card__miniature a { position: relative; display: block; aspect-ratio: 1 / 1; padding: 2px; background: var(--dg-white); border-top: var(--dg-border-width) solid var(--dg-neutral-300); border-left: var(--dg-border-width) solid var(--dg-neutral-300); cursor: zoom-in; }
.dgn-card__miniature img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dgn-card__miniature a:focus-visible { z-index: 1; outline: 2px solid var(--dg-focus-ring-color); outline-offset: -2px; }
/* Su touch la lente fissa basta sulla foto principale. */
.dgn-card__lente--miniatura { display: none; }
@media (hover: hover) { .dgn-card__lente--miniatura { display: grid; } }

/* Finestra delle foto: fondo scuro, una foto per volta, da scorrere in orizzontale. */
.dgn-lightbox {
	width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0;
	color: var(--dg-white); background: var(--dg-neutral-900); border: 0;
}
.dgn-lightbox:not([open]) { display: none; }
.dgn-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dgn-lightbox::backdrop { background: var(--dg-neutral-900); }
.dgn-lightbox__testa { display: flex; align-items: center; gap: var(--dg-space-4); padding: var(--dg-space-3) var(--dg-space-4); }
.dgn-lightbox__titolo { flex: 1; min-width: 0; margin: 0; font-family: var(--dg-font-heading); font-size: var(--dg-fs-lg); font-weight: var(--dg-fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgn-lightbox__conto { margin: 0; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .06em; color: var(--dg-neutral-300); }
.dgn-lightbox__chiudi, .dgn-lightbox__freccia {
	display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
	color: var(--dg-neutral-900); background: var(--dg-white); border: 0; border-radius: var(--dg-radius-none); cursor: pointer;
	transition: color var(--dg-duration-base) var(--dg-ease-standard), background-color var(--dg-duration-base) var(--dg-ease-standard);
}
.dgn-lightbox__chiudi:hover, .dgn-lightbox__freccia:hover { color: var(--dgn-testo); background: var(--dgn-fondo); }
.dgn-lightbox__chiudi:focus-visible, .dgn-lightbox__freccia:focus-visible, .dgn-lightbox__foto:focus-visible { outline: 2px solid var(--dg-white); outline-offset: 2px; }
.dgn-lightbox__freccia[hidden] { display: none; }
.dgn-lightbox .dgn-icona { width: 1.5rem; height: 1.5rem; }
.dgn-lightbox__corpo { position: relative; min-height: 0; }
.dgn-lightbox__freccia { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); }
.dgn-lightbox__freccia--prima { left: var(--dg-space-4); }
.dgn-lightbox__freccia--dopo { right: var(--dg-space-4); }
.dgn-lightbox__foto {
	display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.dgn-lightbox__foto::-webkit-scrollbar { display: none; }
.dgn-lightbox__foto li { flex: 0 0 100%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; box-sizing: border-box; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: var(--dg-space-4); scroll-snap-align: center; scroll-snap-stop: always; }
.dgn-lightbox__foto img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: var(--dg-white); }
@media (max-width: 767px) {
	.dgn-lightbox__freccia { top: auto; bottom: var(--dg-space-4); transform: none; }
	.dgn-lightbox__foto li { padding: var(--dg-space-3) var(--dg-space-3) calc(2.75rem + 2 * var(--dg-space-4)); }
}
@media (prefers-reduced-motion: reduce) { .dgn-card__lente, .dgn-lightbox__chiudi, .dgn-lightbox__freccia { transition: none; } }
.dgn-card__corpo { display: flex; flex: 1; flex-direction: column; gap: var(--dg-space-3); padding: var(--dg-space-4); }
.dgn-card__etichette { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); margin: 0; }
.dgn-card__gruppo, .dgn-card__etichetta {
	display: inline-flex; align-items: center; gap: var(--dg-space-1);
	padding: .125rem var(--dg-space-2);
	font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .06em; text-transform: uppercase;
}
.dgn-card__gruppo { color: var(--dgn-testo); background: var(--dgn-fondo); }
.dgn-card__gruppo .dgn-icona { width: 1rem; height: 1rem; }
.dgn-card__etichetta { color: var(--dg-neutral-700); border: var(--dg-border-width) solid var(--dg-neutral-300); }
.dgn-card__nome { margin: 0; font-size: var(--dg-h4); line-height: 1.15; color: var(--dg-neutral-900); }
.dgn-card__descrizione { line-height: 1.5; color: var(--dg-neutral-700); }
.dgn-card__descrizione p { margin: 0; }
/* Tre righe a riposo (classe messa da catalogo.js: senza script il testo resta intero);
   "Leggi tutto" lo apre dentro la card, con l'altezza che scorre. */
.dgn-card__descrizione.is-corta p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.dgn-card__descrizione.is-aperta p,
.dgn-card__descrizione.is-in-chiusura p { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: hidden; }
.dgn-card__descrizione p.is-in-moto { transition: height var(--dg-duration-base) var(--dg-ease-standard); }
.dgn-card__leggi {
	display: inline-flex; align-items: center; gap: var(--dg-space-1);
	margin-top: var(--dg-space-2); padding: 0;
	font: inherit; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .06em; text-transform: uppercase;
	color: var(--dg-neutral-900); background: none; border: 0; cursor: pointer;
}
.dgn-card__leggi[hidden], .dgn-card__leggi [hidden] { display: none; }
.dgn-card__leggi .dgn-icona { width: 1.125rem; height: 1.125rem; color: var(--dgn-scuro); transition: transform var(--dg-duration-base) var(--dg-ease-standard); }
.dgn-card__leggi[aria-expanded="true"] .dgn-icona { transform: rotate(180deg); }
.dgn-card__leggi:hover { color: var(--dgn-scuro); }
.dgn-card__leggi:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dgn-card__descrizione p.is-in-moto, .dgn-card__leggi .dgn-icona { transition: none; } }
/* Al passaggio del mouse: in fondo alla card un filetto nel colore del reparto si riempie da sinistra
   (lo stesso gesto dei pulsanti), il bordo si scurisce e la foto si avvicina appena. */
.dgn-card::after {
	content: ""; position: absolute; left: 0; bottom: 0; z-index: 3; width: 0; height: var(--dg-space-1);
	background: var(--dgn-fondo); pointer-events: none;
	transition: width var(--dg-duration-base) var(--dg-ease-standard);
}
.dgn-card { position: relative; transition: border-color var(--dg-duration-base) var(--dg-ease-standard); }
.dgn-card__foto { overflow: hidden; }
.dgn-card__foto > img, .dgn-card__apri > img { transition: transform var(--dg-duration-base) var(--dg-ease-standard); }
@media (hover: hover) {
	.dgn-card:hover, .dgn-card:focus-within { border-color: var(--dg-neutral-900); }
	.dgn-card:hover::after, .dgn-card:focus-within::after { width: 100%; }
	.dgn-card:hover .dgn-card__foto > img, .dgn-card:hover .dgn-card__apri > img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
	.dgn-card, .dgn-card::after, .dgn-card__foto > img, .dgn-card__apri > img { transition: none; }
	.dgn-card:hover .dgn-card__foto > img, .dgn-card:hover .dgn-card__apri > img { transform: none; }
}
.dgn-card__attributi { display: grid; gap: var(--dg-space-2); margin: 0; padding-top: var(--dg-space-3); border-top: var(--dg-border-width) solid var(--dg-neutral-200); font-size: var(--dg-fs-sm); }
.dgn-card__attributo { display: grid; grid-template-columns: 7rem 1fr; gap: var(--dg-space-2); }
.dgn-card__attributo dt { display: flex; align-items: center; gap: var(--dg-space-1); font-weight: var(--dg-fw-bold); color: var(--dg-neutral-900); }
.dgn-card__attributo dt .dgn-icona { flex: none; width: 1.125rem; height: 1.125rem; color: var(--dgn-segno); }
.dgn-card__attributo dd { margin: 0; color: var(--dg-neutral-700); }
.dgn-livello { display: inline-flex; gap: 3px; vertical-align: middle; }
.dgn-livello__tacca { width: .875rem; height: .875rem; background: var(--dg-neutral-200); }
.dgn-livello__tacca.is-piena { background: var(--dgn-fondo); }
/* Prezzo e pulsante restano in fondo, alla stessa altezza in tutte le card della riga. */
.dgn-card__piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dg-space-3); margin-top: auto; padding-top: var(--dg-space-3); border-top: var(--dg-border-width) solid var(--dg-neutral-200); }
.dgn-card__prezzo { margin: 0; font-size: var(--dg-fs-sm); color: var(--dg-neutral-700); }
.dgn-card__prezzo strong { font-size: var(--dg-h4); line-height: 1; color: var(--dg-neutral-900); }
/* Pulsante della card: nero come i .dg-btn del tema; al passaggio il colore del reparto
   (quello di stagione della pagina) scorre da sinistra. */
.dgn-card__prenota {
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; margin-left: auto; padding: var(--dg-space-3) var(--dg-space-4);
	font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .06em; line-height: 1; text-decoration: none; text-transform: uppercase;
	color: var(--dg-neutral-50); background: var(--dg-neutral-900); border: 0; border-radius: var(--dg-radius-none);
	transition: color var(--dg-duration-base) var(--dg-ease-standard);
}
.dgn-card__prenota::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 0;
	background: var(--dgn-fondo);
	transition: width var(--dg-duration-base) var(--dg-ease-standard);
}
.dgn-card__prenota:hover, .dgn-card__prenota:focus-visible { color: var(--dgn-testo); }
.dgn-card__prenota:hover::before, .dgn-card__prenota:focus-visible::before { width: 100%; }
.dgn-card__prenota:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dgn-card__prenota, .dgn-card__prenota::before { transition: none; } }
/* Arrivando da una card, l'header fisso (5rem) non deve coprire l'inizio del modulo. */
.dgn-prenota { scroll-margin-top: calc(5rem + var(--dg-space-4)); }

/* --- Passaggi della prenotazione ------------------------------------------------ */
.dgn-passi { margin-bottom: var(--dg-space-5); }
.dgn-passi[hidden] { display: none; }
.dgn-passi__elenco { display: flex; gap: var(--dg-space-2); margin: 0; padding: 0; list-style: none; }
.dgn-passi__voce { flex: 1; min-width: 0; }
.dgn-passi__tasto {
	display: flex; align-items: center; gap: var(--dg-space-2); width: 100%; padding: var(--dg-space-3) 0 0;
	font: inherit; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .06em; text-align: left; text-transform: uppercase;
	color: var(--dg-neutral-600); background: none; border: 0; border-top: 3px solid var(--dg-neutral-300); border-radius: var(--dg-radius-none); cursor: default;
}
.dgn-passi__numero { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; color: var(--dg-neutral-700); background: var(--dg-neutral-200); }
.dgn-passi__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgn-passi__voce.is-corrente .dgn-passi__tasto { color: var(--dg-neutral-900); border-top-color: var(--dgn-segno); }
.dgn-passi__voce.is-corrente .dgn-passi__numero { color: var(--dgn-testo); background: var(--dgn-fondo); }
.dgn-passi__voce.is-fatto .dgn-passi__tasto { color: var(--dg-neutral-900); border-top-color: var(--dg-neutral-900); cursor: pointer; }
.dgn-passi__voce.is-fatto .dgn-passi__numero { color: var(--dg-neutral-50); background: var(--dg-neutral-900); }
.dgn-passi__voce.is-fatto .dgn-passi__tasto:hover .dgn-passi__nome { text-decoration: underline; }
.dgn-passi__tasto:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }
/* Su telefono resta scritto solo il nome del passaggio in corso: gli altri sono il numero. */
@media (max-width: 575.98px) {
	.dgn-passi__voce { flex: none; }
	.dgn-passi__voce.is-corrente { flex: 1; }
	.dgn-passi__voce:not(.is-corrente) .dgn-passi__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --- Modulo: impianto --------------------------------------------------------- */
.dgn-modulo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dg-space-6); align-items: start; }
.dgn-modulo[hidden] { display: none; }
@media (min-width: 992px) { .dgn-modulo { grid-template-columns: minmax(0, 7fr) minmax(18rem, 4fr); gap: var(--dg-space-4); } }
.dgn-modulo__corpo { display: grid; gap: var(--dg-space-3); min-width: 0; }
.dgn-modulo__sezione { min-width: 0; margin: 0; padding: 0; border: 0; }
.dgn-modulo__sezione[hidden] { display: none; }
.dgn-modulo__titolo:focus { outline: 0; }
/* Indietro / Avanti: vicini al passaggio, sotto un filetto uguale a quello del titolo. */
.dgn-modulo__naviga { display: flex; align-items: center; justify-content: space-between; gap: var(--dg-space-3); padding-top: var(--dg-space-4); border-top: var(--dg-border-width) solid var(--dg-neutral-300); }
.dgn-modulo__avanti { margin-left: auto; }
.dgn-modulo__indietro {
	padding: var(--dg-space-4) var(--dg-space-5); font: inherit; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .06em; line-height: 1; text-transform: uppercase;
	color: var(--dg-neutral-900); background: var(--dg-white); border: var(--dg-border-width) solid var(--dg-neutral-900); border-radius: var(--dg-radius-none); cursor: pointer;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard), color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dgn-modulo__indietro[hidden] { display: none; }
.dgn-modulo__indietro:hover, .dgn-modulo__indietro:focus-visible { color: var(--dg-neutral-50); background: var(--dg-neutral-900); }
.dgn-modulo__titolo { display: flex; align-items: center; gap: var(--dg-space-3); width: 100%; margin: 0 0 var(--dg-space-4); padding: 0 0 var(--dg-space-3); font-size: var(--dg-h4); font-weight: var(--dg-fw-bold); color: var(--dg-neutral-900); border-bottom: var(--dg-border-width) solid var(--dg-neutral-300); }
.dgn-modulo__numero { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; font-size: var(--dg-fs-sm); color: var(--dgn-testo); background: var(--dgn-fondo); }
.dgn-modulo__riga { display: grid; gap: var(--dg-space-4); margin-bottom: var(--dg-space-4); }
/* Fra una fila di campi e l'altra basta poco: ogni campo ha gia' sopra lo spazio della sua etichetta. */
.dgn-modulo__riga--dati, .dgn-modulo__riga--2 { row-gap: var(--dg-space-1); }
@media (min-width: 576px) {
	.dgn-modulo__riga--2 { grid-template-columns: 1fr 1fr; }
	.dgn-modulo__riga--dati { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
	.dgn-modulo__riga--scelte { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
.dgn-modulo__riga--dati .dgn-campo:first-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .dgn-modulo__riga--dati .dgn-campo:first-child { grid-column: span 2; } }

/* --- Campi ------------------------------------------------------------------- */
.dgn-campo { min-width: 0; }
.dgn-campo__etichetta { display: block; margin-bottom: var(--dg-space-1); font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-semibold); color: var(--dg-neutral-900); }
.dgn-campo__controllo {
	display: block; width: 100%; min-height: var(--dgn-campo); padding: var(--dg-space-2) var(--dg-space-3);
	font: inherit; color: var(--dg-neutral-900); background: var(--dg-white);
	border: var(--dg-border-width) solid var(--dg-neutral-500); border-radius: var(--dg-radius-none);
}
select.dgn-campo__controllo { cursor: pointer; }
textarea.dgn-campo__controllo { min-height: 6rem; resize: vertical; }
/* Fuoco di un campo: lavora sul filetto (vedi piu' sotto, stile dei campi). */
.dgn-campo__spunta input:focus-visible, .dgn-modulo__avanti:focus-visible, .dgn-modulo__indietro:focus-visible, .dgn-modulo__invia:focus-visible, .dgn-modulo__aggiungi:focus-visible, .dgn-persona__togli:focus-visible, .dgn-catalogo__filtro:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }
.dgn-campo__obbligo { font-weight: var(--dg-fw-bold); color: var(--dgn-errore); }
/* "* Dato obbligatorio": in fondo al passaggio, appena sopra il filetto dei pulsanti. */
.dgn-modulo__legenda { margin: 0 0 calc(var(--dg-space-1) - var(--dg-space-3)); font-size: var(--dg-fs-sm); color: var(--dg-neutral-700); }
.dgn-campo__aiuto { margin: var(--dg-space-1) 0 0; font-size: var(--dg-fs-sm); color: var(--dg-neutral-600); }
.dgn-campo__errore { margin: var(--dg-space-1) 0 0; padding-left: var(--dg-space-2); font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); color: var(--dgn-errore); border-left: 3px solid var(--dgn-errore); }
.dgn-campo__errore[hidden] { display: none; }
/* Campo con errore: il bordo resta com'e', l'errore lo dice il testo rosso sotto. */
.dgn-campo--spunta { margin-top: var(--dg-space-4); }
.dgn-campo--spunta-seguente { margin-top: var(--dg-space-2); }
.dgn-modulo__condizioni-titolo { display: block; margin-bottom: var(--dg-space-1); }
.dgn-campo__spunta { display: flex; align-items: flex-start; gap: var(--dg-space-3); line-height: 1.5; color: var(--dg-neutral-800); cursor: pointer; }
.dgn-campo__spunta input { flex: none; width: 1.375rem; height: 1.375rem; margin: .125rem 0 0; accent-color: var(--dg-neutral-900); }
.dgn-campo__spunta a { color: inherit; }

/* --- Campi nello stile dei moduli AGID (Bootstrap Italia, Designers Italia) -------
   Solo il filetto sotto, niente riquadro; testo scritto in grassetto; etichetta piccola e
   semi-grassetta sopra il campo. Nei campi da scrivere, finche' sono vuoti e senza fuoco,
   l'etichetta sta dentro il campo e sale quando ci si entra (etichetta mobile). Menu a
   tendina e date mostrano sempre qualcosa, quindi la loro etichetta resta in alto. La nota
   multiriga tiene il riquadro intero, come li'. Aiuto ed errore rientrano come il testo. */
.dgn-campo:has(> .dgn-campo__etichetta) { position: relative; padding-top: 1.375rem; }
.dgn-campo__etichetta {
	position: absolute; top: 0; left: 0; right: 0; z-index: 1; margin: 0; padding: 0 var(--dg-space-2);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-semibold); line-height: 1.375rem; color: var(--dg-neutral-900);
	transform-origin: left top; transition: transform var(--dg-duration-fast) var(--dg-ease-standard), color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dgn-campo__controllo {
	min-height: 2.5rem; padding: .375rem var(--dg-space-2);
	font-weight: var(--dg-fw-bold); color: var(--dg-neutral-900); background-color: transparent;
	border: 0; border-bottom: var(--dg-border-width) solid var(--dg-neutral-600); border-radius: var(--dg-radius-none);
}
textarea.dgn-campo__controllo { min-height: 6rem; padding: var(--dg-space-2); font-weight: var(--dg-fw-normal); border: var(--dg-border-width) solid var(--dg-neutral-600); }
/* Fuoco: il filetto si ispessisce nel colore del reparto (1px di bordo + 2px di ombra interna,
   cosi' il campo non cambia altezza), il fondo prende il gradino chiaro e l'etichetta si colora.
   Niente alone e niente riquadro. Il contorno trasparente serve con i colori forzati del sistema. */
.dgn-campo__controllo:focus-visible { outline: 2px solid transparent; border-color: var(--dgn-segno); background-color: var(--dg-neutral-50); box-shadow: inset 0 -2px 0 var(--dgn-segno); }
textarea.dgn-campo__controllo:focus-visible { box-shadow: inset 0 0 0 1px var(--dgn-segno); }
.dgn-campo:has(> .dgn-campo__controllo:focus-visible) > .dgn-campo__etichetta { color: var(--dgn-scuro); }
/* Campo da scrivere vuoto e senza fuoco: l'etichetta fa da invito dentro il campo. */
.dgn-campo:has(> input.dgn-campo__controllo:placeholder-shown:not(:focus)) > .dgn-campo__etichetta {
	transform: translateY(1.9375rem); /* al centro del campo (2.5rem) */
	font-size: var(--dg-font-size-base); font-weight: var(--dg-fw-normal); color: var(--dg-neutral-600); pointer-events: none;
}
.dgn-campo:has(> input.dgn-campo__controllo:placeholder-shown:not(:focus)) > .dgn-campo__etichetta .dgn-campo__obbligo { font-weight: var(--dg-fw-normal); }
.dgn-campo__aiuto, .dgn-campo__errore { margin-left: var(--dg-space-2); }
@media (prefers-reduced-motion: reduce) { .dgn-campo__etichetta { transition: none; } }
.dgn-modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Calendario del periodo (Vanilla Calendar Pro, markup e struttura del plugin) ---------
   Qui solo l'aspetto: colori del reparto, angoli vivi, carattere del sito. Quando c'e' il
   calendario i due campi data mostrano la data per esteso e non si scrivono a mano. */
.dgn-calendario { margin-bottom: var(--dg-space-4); }
.dgn-calendario[hidden] { display: none; }
.ha-calendario input[type="date"].dgn-campo__controllo,
.ha-calendario [data-campo="fine"] > .dgn-campo__aiuto { display: none; }
.dgn-data { display: flex; align-items: center; margin: 0; }
.dgn-data.is-vuota { font-weight: var(--dg-fw-normal); color: var(--dg-neutral-600); }
.dgn-calendario__aiuto { margin-top: var(--dg-space-2); }
.dgn-calendario [data-vc="calendar"] {
	--vc-bg: transparent;
	--vc-color: var(--dg-neutral-900);
	--vc-title-color: var(--dg-neutral-900);
	--vc-title-color-hover: var(--dgn-scuro);
	--vc-week-day-color: var(--dg-neutral-600);
	--vc-week-day-off-color: var(--dg-neutral-600);
	--vc-date-color: var(--dg-neutral-900);
	--vc-date-weekend-color: var(--dg-neutral-900);
	--vc-date-disabled-color: var(--dg-neutral-400);
	--vc-date-weekend-disabled-color: var(--dg-neutral-400);
	--vc-date-today-color: var(--dgn-scuro);
	--vc-date-weekend-today-color: var(--dgn-scuro);
	--vc-date-bg-hover: var(--dgn-tenue);
	--vc-date-weekend-bg-hover: var(--dgn-tenue);
	--vc-date-hover-bg: var(--dgn-tenue);
	--vc-date-hover-edge-bg: var(--dgn-tenue);
	--vc-date-weekend-hover-bg: var(--dgn-tenue);
	--vc-date-weekend-hover-edge-bg: var(--dgn-tenue);
	--vc-date-selected-bg: var(--dgn-fondo);
	--vc-date-selected-color: var(--dgn-testo);
	--vc-date-weekend-selected-bg: var(--dgn-fondo);
	--vc-date-weekend-selected-color: var(--dgn-testo);
	--vc-date-range-middle-bg: var(--dgn-tenue);
	--vc-date-range-middle-color: var(--dg-neutral-900);
	--vc-date-range-middle-weekend-bg: var(--dgn-tenue);
	--vc-date-range-middle-weekend-color: var(--dg-neutral-900);
	--vc-focus-outline-color: var(--dgn-segno);
	padding: 0; font-family: inherit; border-radius: var(--dg-radius-none);
}
.dgn-calendario [data-vc="calendar"] *,
.dgn-calendario [data-vc="calendar"] *:focus-visible { border-radius: var(--dg-radius-none) !important; font-family: inherit; }
/* Due mesi affiancati: le frecce stanno sulla riga del nome del mese (la libreria le abbassa per un margine che qui non c'e'). */
.dgn-calendario [data-vc="controls"] { min-height: 2rem; padding-top: 0; }
.dgn-calendario [data-vc-date-btn] { min-height: 2.5rem; }
/* Risaltano i giorni che si possono prenotare (grassetto su fondino), quelli chiusi arretrano. */
.dgn-calendario [data-vc="calendar"] [data-vc-date] { padding: 1px; }
.dgn-calendario [data-vc="calendar"] [data-vc-date]:not([data-vc-date-disabled]) [data-vc-date-btn] { font-weight: var(--dg-fw-bold); }
.dgn-calendario [data-vc="calendar"] [data-vc-date]:not([data-vc-date-disabled]):not([data-vc-date-selected]):not([data-vc-date-hover]) [data-vc-date-btn]:not(:hover) { background-color: var(--dg-neutral-100); }
.dgn-calendario [data-vc="calendar"] [data-vc-date][data-vc-date-disabled] [data-vc-date-btn] { font-weight: var(--dg-fw-normal); color: var(--dg-neutral-400); background-color: transparent; }
/* Avvisi dei giorni chiusi nei mesi mostrati: perche' quei giorni sono grigi. */
.dgn-calendario__chiusure { display: grid; gap: var(--dg-space-2); margin: var(--dg-space-3) 0 0; padding: var(--dg-space-3) var(--dg-space-4); list-style: none; font-size: var(--dg-fs-sm); line-height: 1.45; color: var(--dg-neutral-900); background: var(--dg-neutral-100); }
.dgn-calendario__chiusure[hidden], .dgn-calendario__chiusure li[hidden] { display: none; }
.dgn-calendario__chiusure li { display: flex; align-items: flex-start; gap: var(--dg-space-2); margin: 0; }
.dgn-calendario__chiusure .dgn-icona { flex: none; width: 1.25rem; height: 1.25rem; color: var(--dg-neutral-600); }
.dgn-calendario__periodo { display: block; color: var(--dg-neutral-900); }

/* --- Gruppi di prodotti nella scheda della persona: righe che si aprono una alla volta ---------
   La riga dice il gruppo e la scelta fatta; aperta, mostra le card. Un gruppo con un errore
   resta aperto comunque, cosi' il messaggio non resta nascosto. */
.dgn-persona.ha-carte .dgn-modulo__riga--scelte { gap: 0; border-bottom: var(--dg-border-width) solid var(--dg-neutral-300); }
.dgn-persona__scelta.ha-testa { gap: 0; border-top: var(--dg-border-width) solid var(--dg-neutral-300); }
.dgn-gruppo__testa {
	display: flex; align-items: center; gap: var(--dg-space-3); width: 100%; padding: var(--dg-space-3) 0;
	font: inherit; text-align: left; color: var(--dg-neutral-900); background: transparent; border: 0; border-radius: var(--dg-radius-none); cursor: pointer;
}
/* Davanti al nome: spunta se il gruppo ha una scelta, X se no. La X e' grigia: "non scelto" non e' un errore. */
.dgn-gruppo__stato { display: grid; flex: none; }
.dgn-gruppo__testa .dgn-gruppo__stato .dgn-icona { width: 1.5rem; height: 1.5rem; color: var(--dg-neutral-200); transform: none; }
.dgn-gruppo__testa .dgn-gruppo__stato[data-stato="scelto"] .dgn-icona { color: var(--dgn-conferma); }
/* Da scegliere: un riquadro vuoto, piu' in vista. "Non mi serve": la X chiara, una risposta data. */
.dgn-gruppo__testa .dgn-gruppo__stato[data-stato="attesa"] .dgn-icona { color: var(--dg-neutral-400); }
.dgn-gruppo__nome { font-weight: var(--dg-fw-bold); }
.dgn-gruppo__sintesi { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--dg-fs-sm); color: var(--dg-neutral-600); }
.dgn-persona__scelta.is-scelto .dgn-gruppo__sintesi { font-weight: var(--dg-fw-bold); color: var(--dg-neutral-900); }
.dgn-gruppo__testa .dgn-icona { flex: none; width: 1.25rem; height: 1.25rem; color: var(--dg-neutral-700); transition: transform var(--dg-duration-fast) var(--dg-ease-standard); }
.dgn-persona__scelta.is-aperto .dgn-gruppo__testa .dgn-icona { transform: rotate(180deg); }
.dgn-gruppo__testa:hover .dgn-gruppo__nome { color: var(--dgn-scuro); }
/* Dati della persona non ancora completi: i gruppi si vedono ma non si aprono, con la riga che dice perche'. */
.dgn-persona__attesa { grid-column: 1 / -1; margin: var(--dg-space-2) 0 0; padding: var(--dg-space-2) var(--dg-space-3); font-size: var(--dg-fs-sm); color: var(--dg-neutral-900); background: var(--dg-neutral-100); border-left: var(--dg-space-1) solid var(--dgn-fondo); }
.dgn-gruppo__testa:disabled { cursor: not-allowed; }
.dgn-gruppo__testa:disabled .dgn-gruppo__nome, .dgn-gruppo__testa:disabled .dgn-gruppo__sintesi, .dgn-gruppo__testa:disabled .dgn-icona { color: var(--dg-neutral-400); }
.dgn-gruppo__testa:disabled:hover .dgn-gruppo__nome { color: var(--dg-neutral-400); }
.dgn-gruppo__testa:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }
.dgn-persona__scelta.ha-testa:has(.dgn-campo.is-errore) .dgn-gruppo__sintesi { color: var(--dgn-errore); }
/* Apertura e chiusura animate: l'involucro passa da zero alla sua altezza (griglia 0fr -> 1fr).
   Da chiuso il contenuto e' anche invisibile, cosi' non lo raggiungono ne' il Tab ne' i lettori di
   schermo; la visibilita' cambia a fine chiusura e a inizio apertura. */
.dgn-gruppo__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dg-duration-base) var(--dg-ease-standard); }
.dgn-gruppo__dentro { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dg-duration-base); }
.dgn-persona__scelta.is-aperto > .dgn-gruppo__corpo,
.dgn-persona:not(.is-in-attesa) .dgn-persona__scelta:has(.dgn-campo.is-errore) > .dgn-gruppo__corpo { grid-template-rows: 1fr; }
.dgn-persona__scelta.is-aperto .dgn-gruppo__dentro,
.dgn-persona:not(.is-in-attesa) .dgn-persona__scelta:has(.dgn-campo.is-errore) .dgn-gruppo__dentro { visibility: visible; transition-delay: 0s; }
/* Il taglio dell'involucro non deve mangiare il contorno del fuoco di card e pulsanti. */
.dgn-gruppo__dentro { margin: 0 -4px; padding: 0 4px; }
.dgn-gruppo__dentro::before { content: ""; display: block; height: 4px; } /* e' contenuto, non spaziatura: da chiuso sparisce anche lui */
@media (prefers-reduced-motion: reduce) { .dgn-gruppo__corpo, .dgn-gruppo__dentro { transition: none; } }
/* Il nome del gruppo e' gia' nella riga: l'etichetta del campo non si ripete. */
.dgn-gruppo__dentro > .dgn-campo { padding-top: 0; padding-bottom: var(--dg-space-3); }
.dgn-gruppo__dentro > .dgn-campo > .dgn-campo__etichetta { display: none; }
.dgn-gruppo__dentro > [data-dgn-taglia-di] { padding-bottom: var(--dg-space-3); }
@media (prefers-reduced-motion: reduce) { .dgn-gruppo__testa .dgn-icona { transition: none; } }

/* --- Campi numerici: piu' e meno al posto delle freccette del browser ---------------------- */
input[type="number"].dgn-campo__controllo { -moz-appearance: textfield; appearance: textfield; }
input[type="number"].dgn-campo__controllo::-webkit-inner-spin-button,
input[type="number"].dgn-campo__controllo::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dgn-campo--numero > .dgn-campo__controllo { padding-right: 4.75rem; }
/* Stanno dentro il campo, a destra, alti quanto lui (2.5rem) e subito sotto l'etichetta (1.375rem). */
.dgn-piu-meno { position: absolute; top: 1.375rem; right: 0; z-index: 1; display: flex; gap: 2px; height: 2.5rem; padding: .25rem 0; }
.dgn-piu-meno__tasto {
	display: grid; place-items: center; width: 2rem; height: 100%; padding: 0;
	font: inherit; font-size: var(--dg-fs-lg); font-weight: var(--dg-fw-bold); line-height: 1; color: var(--dg-neutral-900); background: var(--dg-neutral-100);
	border: 0; border-radius: var(--dg-radius-none); cursor: pointer;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard), color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dgn-piu-meno__tasto .dgn-icona { width: 1.25rem; height: 1.25rem; pointer-events: none; }
.dgn-piu-meno__tasto:hover { color: var(--dgn-testo); background: var(--dgn-fondo); }
.dgn-piu-meno__tasto:active { background: var(--dg-neutral-900); color: var(--dg-neutral-50); }
/* Dove i campi sono in colonne strette (da 576px) i due pulsanti stanno uno sopra l'altro, come le
   freccette di un campo numerico: occupano meno larghezza e non coprono l'etichetta. Su telefono il
   campo e' largo quanto lo schermo e restano affiancati, piu' comodi da toccare. */
@media (min-width: 576px) {
	.dgn-campo--numero > .dgn-campo__controllo { padding-right: 2rem; }
	.dgn-piu-meno { flex-direction: column-reverse; gap: 1px; padding: .1875rem 0; } /* "su" in alto, "giu'" in basso */
	.dgn-piu-meno__tasto { width: 1.5rem; height: auto; flex: 1; }
	.dgn-piu-meno__tasto .dgn-icona { width: 1rem; height: 1rem; }
	.dgn-campo--numero > .dgn-campo__etichetta { right: 1.75rem; }
}
@media (max-width: 575.98px) { .dgn-campo--numero > .dgn-campo__etichetta { right: 4.75rem; } }

/* --- Pulsanti a scelta (sesso, taglia): tutte le opzioni in vista, al posto della tendina ------ */
.dgn-campo__controllo--nascosto { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
.dgn-pulsanti { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); }
/* Pulsanti e card partono dal filo sinistro del campo e dalla stessa altezza dei campi di testo:
   la loro etichetta (e l'errore) non rientra, come invece fa sopra un campo da scrivere. */
.dgn-campo:has(> .dgn-pulsanti) > .dgn-campo__etichetta { padding-left: 0; }
.dgn-campo:has(> .dgn-pulsanti) > .dgn-campo__errore,
.dgn-campo:has(> .dgn-pulsanti) > .dgn-campo__aiuto { margin-left: 0; }
/* Regola comune a pulsanti a scelta e card dei prodotti: non scelto = fondo grigio chiaro senza
   bordo; scelto = colore pieno del reparto, con il testo nel colore che ci si legge sopra. */
.dgn-pulsanti__tasto {
	min-width: 2.75rem; min-height: 2.5rem; padding: var(--dg-space-1) var(--dg-space-3);
	font: inherit; font-weight: var(--dg-fw-semibold); line-height: 1; color: var(--dg-neutral-900); background: var(--dg-neutral-100);
	border: 0; border-radius: var(--dg-radius-none); cursor: pointer;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard), color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dgn-pulsanti__tasto:hover { background: var(--dg-neutral-200); }
.dgn-pulsanti__tasto[aria-checked="true"] { font-weight: var(--dg-fw-bold); color: var(--dgn-testo); background: var(--dgn-fondo); }

/* Card dei prodotti nel modulo: una per prodotto. Nome, livello a tacche e prezzo del periodo;
   quella scelta ha il bordo e il fondo chiaro del reparto, e ricliccandola si toglie. Con le card i
   gruppi (sci, scarponi, casco...) stanno uno sotto l'altro. */
.dgn-persona.ha-carte .dgn-modulo__riga--scelte { grid-template-columns: minmax(0, 1fr); gap: 0; } /* i gruppi sono righe attaccate, separate dal filetto */
.dgn-pulsanti--carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--dg-space-2); }
.dgn-carta {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--dg-space-2) var(--dg-space-2);
	min-height: 4rem; padding: var(--dg-space-2) var(--dg-space-3); text-align: left;
	font: inherit; line-height: 1.2; color: var(--dg-neutral-900); background: var(--dg-neutral-100);
	border: 0; border-radius: var(--dg-radius-none); cursor: pointer;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard), color var(--dg-duration-fast) var(--dg-ease-standard);
}
/* Piu' gruppi nella stessa scelta: il titolo di ognuno prende tutta la riga, sopra le sue card. */
.dgn-pulsanti__titolo { grid-column: 1 / -1; margin: var(--dg-space-2) 0 0; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--dg-neutral-700); }
/* "Non mi serve": la prima card, uguale alle altre (grigia, nel colore del reparto se scelta), con la sua icona. */
.dgn-carta.dgn-carta--no { display: flex; align-items: center; gap: var(--dg-space-2); font-weight: var(--dg-fw-bold); }
.dgn-carta--no .dgn-icona { flex: none; width: 1.5rem; height: 1.5rem; }
.dgn-carta:hover { background: var(--dg-neutral-200); }
/* Per chi e' il prodotto (altezza, piede, eta'): sotto il nome, piccolo. */
.dgn-carta__regola { grid-column: 1 / -1; font-size: var(--dg-fs-sm); color: var(--dg-neutral-700); }
.dgn-carta[aria-checked="true"] .dgn-carta__regola { color: inherit; }
/* Prodotto escluso dalle regole: resta in vista, spento; il limite si legge ancora. */
.dgn-carta:disabled { cursor: not-allowed; color: var(--dg-neutral-500); background: var(--dg-neutral-50); }
.dgn-carta:disabled .dgn-carta__nome { text-decoration: line-through; }
.dgn-carta:disabled .dgn-carta__regola { color: var(--dg-neutral-700); }
.dgn-carta[aria-checked="true"] { color: var(--dgn-testo); background: var(--dgn-fondo); }
/* Sul colore pieno le tacche del livello prendono il colore del testo (piene) e una sua velatura (vuote). */
.dgn-carta[aria-checked="true"] .dgn-livello__tacca { background: color-mix(in srgb, var(--dgn-testo) 30%, transparent); }
.dgn-carta[aria-checked="true"] .dgn-livello__tacca.is-piena { background: var(--dgn-testo); }
.dgn-carta:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }
.dgn-carta__nome { grid-column: 1 / -1; font-weight: var(--dg-fw-bold); }
.dgn-carta__prezzo { grid-column: 2; justify-self: end; font-weight: var(--dg-fw-bold); white-space: nowrap; }
.dgn-carta .dgn-livello { grid-column: 1; }
.dgn-carta .dgn-livello__tacca { width: .625rem; height: .625rem; }
.dgn-carta .dgn-livello__tacca:not(.is-piena) { background: var(--dg-neutral-300); }
@media (max-width: 575.98px) { .dgn-pulsanti--carte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Il sesso ha due pulsanti affiancati: gli serve lo spazio di due colonne, come al nome. */
@media (min-width: 576px) { .dgn-modulo__riga--dati .dgn-campo[data-campo="sesso"] { grid-column: span 2; } }
.dgn-pulsanti__tasto:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }

/* --- Persone ----------------------------------------------------------------- */
.dgn-modulo__persone { display: grid; gap: var(--dg-space-4); }
/* Scheda di una persona: bordi grigi sottili e, a sinistra, la fascia nel colore del reparto
   (come il banner del prodotto da cui si arriva). */
.dgn-persona { padding: var(--dg-space-4); border: var(--dg-border-width) solid var(--dg-neutral-300); border-left: var(--dg-space-2) solid var(--dgn-segno); }
.dgn-persona__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--dg-space-3); margin-bottom: var(--dg-space-3); }
.dgn-persona__titolo { margin: 0; font-size: var(--dg-font-size-base); font-weight: var(--dg-fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--dg-neutral-900); }
.dgn-persona__togli,
.dgn-modulo__aggiungi {
	padding: var(--dg-space-2) var(--dg-space-3); font: inherit; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-semibold);
	color: var(--dg-neutral-900); background: var(--dg-white);
	border: var(--dg-border-width) solid var(--dg-neutral-900); border-radius: var(--dg-radius-none); cursor: pointer;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard), color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dgn-persona__togli { border-color: var(--dg-neutral-400); }
.dgn-persona__togli[hidden], .dgn-modulo__aggiungi[hidden] { display: none; }
.dgn-persona__togli:hover, .dgn-modulo__aggiungi:hover { color: var(--dg-neutral-50); background: var(--dg-neutral-900); }
.dgn-modulo__aggiungi { margin-top: var(--dg-space-4); padding: var(--dg-space-3) var(--dg-space-4); }
/* Scheda richiusa: restano titolo, riga di sintesi e parziale. */
.dgn-persona__azioni { display: flex; gap: var(--dg-space-2); }
.dgn-persona__azioni { align-items: center; }
/* Modifica e Togli: solo icona, senza riquadro. Al passaggio la matita prende il colore del
   reparto, la X quello di pericolo. */
.dgn-persona__azioni .dgn-persona__modifica,
.dgn-persona__azioni .dgn-persona__togli {
	display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
	color: var(--dg-neutral-700); background: transparent; border: 0; border-radius: var(--dg-radius-none); cursor: pointer;
	transition: color var(--dg-duration-fast) var(--dg-ease-standard), background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dgn-persona__azioni .dgn-icona { width: 1.75rem; height: 1.75rem; pointer-events: none; }
/* I due pulsanti stanno attaccati fra loro e vicini all'angolo della scheda. */
/* La scheda aperta ha piu' margine interno di quella chiusa (space-4 contro space-3): la differenza si
   recupera qui, cosi' i pulsanti stanno alla stessa distanza dall'angolo in entrambe. */
.dgn-persona__azioni { align-self: flex-start; gap: 0; margin: calc(var(--dg-space-3) - var(--dg-space-4) - var(--dg-space-2)) calc(var(--dg-space-3) - var(--dg-space-4) - var(--dg-space-2)) 0 0; }
.dgn-persona__azioni .dgn-persona__modifica,
.dgn-persona__azioni .dgn-persona__togli { width: 2.5rem; height: 2.5rem; }
/* Titolo della scheda: icona della persona e numero, alti uguali. */
.dgn-persona__titolo { display: inline-flex; align-items: center; gap: var(--dg-space-1); letter-spacing: 0; }
.dgn-persona__titolo .dgn-icona { width: 1.75rem; height: 1.75rem; color: var(--dgn-segno); }
/* Il numero e' un badge alto esattamente come l'icona, con gli angoli appena arrotondati e la cifra bianca.
   Fondo scuro e non nel colore del reparto: sul verde delle bici il bianco non si leggerebbe. */
.dgn-persona__cifra,
.dgn-modulo__conta [data-dgn-conta] {
	display: inline-grid; place-items: center; box-sizing: border-box; min-width: 1.75rem; height: 1.75rem; padding: 0 var(--dg-space-1);
	font-size: var(--dg-font-size-base); font-weight: var(--dg-fw-bold); line-height: 1; color: var(--dg-white); background: var(--dg-neutral-900); border-radius: var(--dg-radius-sm, 4px);
}

/* Scheda richiusa, compatta: a sinistra icona e numero; al centro il nome in grassetto e, subito
   sotto, i materiali; a destra i due pulsanti in alto e il parziale in basso. */
.dgn-persona.is-chiusa {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "titolo sintesi azioni" "titolo sintesi parziale";
	align-items: start; column-gap: var(--dg-space-4); row-gap: 0; padding: var(--dg-space-3) var(--dg-space-3) var(--dg-space-3) var(--dg-space-4);
}
.dgn-persona.is-chiusa .dgn-persona__testa { display: contents; }
.dgn-persona.is-chiusa .dgn-persona__titolo { grid-area: titolo; align-self: center; }
.dgn-persona.is-chiusa .dgn-persona__azioni { grid-area: azioni; justify-self: end; margin: calc(-1 * var(--dg-space-2)) calc(-1 * var(--dg-space-2)) 0 0; }
.dgn-persona.is-chiusa .dgn-persona__sintesi { grid-area: sintesi; align-self: center; display: grid; gap: 2px; }
.dgn-persona.is-chiusa .dgn-persona__parziale { grid-area: parziale; align-self: end; margin: 0; }
.dgn-persona__nome { font-size: var(--dg-font-size-base); font-weight: var(--dg-fw-bold); letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; color: var(--dg-neutral-900); overflow-wrap: anywhere; }
.dgn-persona__materiali { font-size: var(--dg-fs-sm); line-height: 1.35; color: var(--dg-neutral-700); }
.dgn-persona__azioni .dgn-persona__modifica:hover { color: var(--dgn-scuro); background: transparent; }
.dgn-persona__azioni .dgn-persona__togli:hover { color: var(--dgn-errore); background: transparent; }
.dgn-persona__azioni .dgn-persona__togli[hidden] { display: none; }
.dgn-persona__modifica:focus-visible { outline: 2px solid var(--dg-focus-ring-color); outline-offset: 2px; }
.dgn-persona:not(.is-chiusa) .dgn-persona__modifica,
.dgn-persona:not(.is-chiusa) .dgn-persona__sintesi,
.dgn-persona.is-chiusa .dgn-persona__corpo { display: none; }
.dgn-persona__sintesi { margin: 0; line-height: 1.5; color: var(--dg-neutral-700); }
/* Numero di persone nel titolo del passaggio: icona e cifra, in fondo a destra. */
.dgn-modulo__conta { display: inline-flex; align-items: center; gap: var(--dg-space-1); margin-left: auto; font-size: var(--dg-font-size-base); font-weight: var(--dg-fw-bold); color: var(--dg-neutral-900); }
.dgn-modulo__conta .dgn-icona { width: 1.75rem; height: 1.75rem; color: var(--dgn-segno); } /* come nel titolo delle schede: icona e badge alti uguali */
/* "Aggiungi un'altra persona" e "Avanti" affiancati, a destra; su telefono vanno a capo. */
.dgn-modulo__naviga-fine { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--dg-space-3); margin-left: auto; }
/* Barra Indietro / Avanti: pulsanti piu' bassi e stretti di quelli principali del sito. */
.dgn-modulo__naviga .dgn-modulo__avanti,
.dgn-modulo__naviga .dgn-modulo__indietro { padding: var(--dg-space-3) var(--dg-space-4); }
/* "Aggiungi un'altra persona": un segnaposto sotto l'ultima scheda, largo quanto le schede, con il
   bordo tratteggiato; al passaggio il bordo si fa pieno e prende il colore del reparto. */
.dgn-modulo__persone + .dgn-campo + .dgn-modulo__aggiungi,
.dgn-modulo__sezione > .dgn-modulo__aggiungi {
	display: flex; align-items: center; justify-content: center; gap: var(--dg-space-2); width: 100%; min-height: 4rem; margin-top: var(--dg-space-4); padding: var(--dg-space-3) var(--dg-space-4);
	font: inherit; font-weight: var(--dg-fw-semibold); letter-spacing: 0; text-transform: none; color: var(--dg-neutral-700); background: transparent;
	border: var(--dg-border-width) dashed var(--dg-neutral-400); border-radius: var(--dg-radius-none); cursor: pointer;
	transition: color var(--dg-duration-fast) var(--dg-ease-standard), border-color var(--dg-duration-fast) var(--dg-ease-standard), background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dgn-modulo__sezione > .dgn-modulo__aggiungi .dgn-icona { flex: none; width: 1.5rem; height: 1.5rem; }
.dgn-modulo__sezione > .dgn-modulo__aggiungi:hover,
.dgn-modulo__sezione > .dgn-modulo__aggiungi:focus-visible { color: var(--dgn-scuro); background: transparent; border-style: solid; border-color: var(--dgn-segno); }
.dgn-modulo__sezione > .dgn-modulo__aggiungi[hidden] { display: none; }
/* Su telefono i pulsanti si impilano a tutta
   larghezza con l'azione principale in alto (Avanti, poi Aggiungi, poi Indietro). */
@media (max-width: 575.98px) {
	.dgn-modulo__titolo { flex-wrap: wrap; row-gap: var(--dg-space-1); }
	.dgn-modulo__naviga { flex-direction: column-reverse; align-items: stretch; }
	.dgn-modulo__naviga-fine { flex-direction: column-reverse; margin-left: 0; }
	.dgn-modulo__naviga button { width: 100%; }
}
.dgn-persona__scelta { display: grid; gap: var(--dg-space-3); align-content: start; }
.dgn-persona .dgn-modulo__riga:last-of-type { margin-bottom: 0; }
.dgn-persona__parziale { margin: var(--dg-space-3) 0 0; font-weight: var(--dg-fw-bold); text-align: right; color: var(--dg-neutral-900); }
.dgn-persona__parziale[hidden] { display: none; }

/* --- Riepilogo --------------------------------------------------------------- */
.dgn-modulo__riepilogo { padding: var(--dg-space-4); color: var(--dgn-testo); background: var(--dgn-fondo); }
@media (min-width: 992px) { .dgn-modulo__lato { position: sticky; top: calc(var(--dg-space-8) + var(--dg-space-5)); } }
/* Sotto il riquadro, fuori: i metodi di pagamento, allineati a destra. */
.dgn-modulo__lato { min-width: 0; }
.dgn-modulo__lato > .dgn-metodi { margin-top: var(--dg-space-3); text-align: right; }
.dgn-modulo__lato > .dgn-metodi .dgn-metodi__elenco { justify-content: flex-end; }
.dgn-modulo__lato > .dgn-metodi .dgn-metodi__titolo { color: var(--dg-neutral-700); }
.dgn-modulo__riepilogo-titolo { margin: 0 0 var(--dg-space-3); font-size: var(--dg-fs-lg); font-weight: var(--dg-fw-bold); letter-spacing: .12em; text-transform: uppercase; color: inherit; }
.dgn-modulo__periodo { margin: 0 0 var(--dg-space-3); font-weight: var(--dg-fw-semibold); }
.dgn-modulo__periodo[hidden], .dgn-modulo__vuoto[hidden] { display: none; }
.dgn-modulo__voci { display: grid; gap: var(--dg-space-3); margin: 0 0 var(--dg-space-4); padding: 0; list-style: none; }
.dgn-modulo__voci:empty { display: none; }
.dgn-modulo__voci li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--dg-space-3); font-weight: var(--dg-fw-semibold); }
.dgn-modulo__voci small { grid-column: 1 / -1; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-normal); line-height: 1.4; }
.dgn-modulo__vuoto { margin: 0 0 var(--dg-space-4); line-height: 1.5; }
.dgn-modulo__totale { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dg-space-3); margin: 0; padding-top: var(--dg-space-3); border-top: var(--dg-border-width) solid currentColor; }
.dgn-modulo__riepilogo > .dgn-modulo__condizioni,
.dgn-modulo__riepilogo > .dgn-avviso,
.dgn-modulo__riepilogo > .dgn-modulo__invia { margin-top: var(--dg-space-4); margin-bottom: 0; }
.dgn-modulo__totale span { font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .12em; text-transform: uppercase; }
.dgn-modulo__totale strong { font-size: var(--dg-h2); line-height: 1; }
.dgn-modulo__condizioni { margin: 0 0 var(--dg-space-4); font-size: var(--dg-fs-sm); line-height: 1.5; }
.dgn-modulo__invia { width: 100%; }
/* Questo pulsante sta sul riquadro colorato del riepilogo: al passaggio si riempie di una tonalita'
   piu' scura dello sfondo (gradino 700 del reparto), altrimenti sparirebbe. Testo bianco. */
.dgn-modulo__riepilogo .dgn-modulo__invia::before { background: var(--dgn-scuro); }
.dgn-modulo__riepilogo .dgn-modulo__invia:hover,
.dgn-modulo__riepilogo .dgn-modulo__invia:focus-visible { color: var(--dg-white); }
.dgn-modulo__nota { margin: var(--dg-space-3) 0 0; font-size: var(--dg-fs-sm); line-height: 1.4; }

/* --- Prenotazione ricevuta ----------------------------------------------------- */
/* Senza riquadro: una spunta verde accanto al titolo dice che e' andata bene. */
.dgn-fatto { min-width: 0; scroll-margin-top: calc(5rem + var(--dg-space-5)); } /* la pagina ci scorre sopra: l'header fisso (5rem) non deve coprire il titolo */
.dgn-fatto[hidden], .dgn-modulo__corpo[hidden] { display: none; }
.dgn-fatto:focus { outline: 0; }
.dgn-fatto__titolo { display: flex; align-items: flex-start; gap: var(--dg-space-3); margin: 0 0 var(--dg-space-4); font-size: var(--dg-h3); line-height: 1.15; color: var(--dg-neutral-900); }
.dgn-fatto__titolo .dgn-icona { flex: none; width: 1.15em; height: 1.15em; color: var(--dgn-conferma); }
/* Numero e totale: i due dati che il cliente cerca, staccati dal testo. */
.dgn-fatto__dati { display: flex; flex-wrap: wrap; gap: var(--dg-space-3) var(--dg-space-6); margin: 0 0 var(--dg-space-4); padding: var(--dg-space-3) 0; border-top: var(--dg-border-width) solid var(--dg-neutral-300); border-bottom: var(--dg-border-width) solid var(--dg-neutral-300); }
.dgn-fatto__dati dt { font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--dg-neutral-700); }
.dgn-fatto__dati dd { margin: 0; font-size: var(--dg-h3); font-weight: var(--dg-fw-bold); line-height: 1.2; color: var(--dg-neutral-900); }
.dgn-fatto__testo { margin: 0 0 var(--dg-space-4); font-size: var(--dg-fs-lg); line-height: 1.5; color: var(--dg-neutral-800); }
.dgn-fatto__nota { margin: var(--dg-space-4) 0 0; font-size: var(--dg-fs-sm); color: var(--dg-neutral-700); }

/* --- Pagina di stato (fuori dalle pagine interne) ------------------------------ */
/* Come il modulo a prenotazione creata: a sinistra l'esito, a destra il riepilogo nel colore del reparto. */
.dgn-stato { padding: var(--dg-ss-lg) 0; }
.dgn-stato__dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dg-space-6); align-items: start; width: min(100% - 2 * var(--dg-space-4), var(--dg-container-max)); margin-inline: auto; }
@media (min-width: 992px) { .dgn-stato__dentro { grid-template-columns: minmax(0, 7fr) minmax(18rem, 4fr); gap: var(--dg-space-4); } }
.dgn-stato__corpo, .dgn-stato__lato { min-width: 0; }
.dgn-stato__titolo { display: flex; align-items: flex-start; gap: var(--dg-space-3); margin: 0 0 var(--dg-space-4); font-size: var(--dg-h2); line-height: 1.15; color: var(--dg-neutral-900); }
.dgn-stato__titolo .dgn-icona { flex: none; width: 1.15em; height: 1.15em; color: var(--dg-neutral-900); }
.dgn-stato--pagata .dgn-stato__titolo .dgn-icona { color: var(--dgn-conferma); }
.dgn-stato--attesa .dgn-stato__titolo .dgn-icona { color: var(--dgn-attesa); }
.dgn-stato--scaduta .dgn-stato__titolo .dgn-icona, .dgn-stato--annullata .dgn-stato__titolo .dgn-icona { color: var(--dgn-errore); }
.dgn-stato--rimborsata .dgn-stato__titolo .dgn-icona { color: var(--dgn-nota); }
.dgn-stato__testo { max-width: 46rem; margin: 0 0 var(--dg-space-4); font-size: var(--dg-fs-lg); line-height: 1.5; color: var(--dg-neutral-800); }
.dgn-stato__azione { margin: 0; }
.dgn-stato__azione .dgn-stato__paga { text-align: center; }
.dgn-stato__lato > .dgn-metodi { margin-top: var(--dg-space-3); text-align: right; }
.dgn-stato__lato > .dgn-metodi .dgn-metodi__elenco { justify-content: flex-end; }
.dgn-stato__lato > .dgn-metodi .dgn-metodi__titolo { color: var(--dg-neutral-700); }

/* --- Metodi di pagamento accettati ------------------------------------------- */
/* Tessere tutte uguali: le immagini hanno gia' la forma del marchio Apple Pay (bianco, filetto
   nero, angoli arrotondati); un metodo senza immagine prende la stessa forma con il suo nome. */
.dgn-metodi { margin-top: var(--dg-space-4); }
.dgn-metodi__titolo { margin: 0 0 var(--dg-space-2); font-size: var(--dg-fs-sm); line-height: var(--dg-lh-sm); color: inherit; }
.dgn-metodi__elenco { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); margin: 0; padding: 0; list-style: none; }
.dgn-metodi__voce { height: 2rem; aspect-ratio: 331 / 212; }
.dgn-metodi__voce img { display: block; width: 100%; height: 100%; }
.dgn-metodi__voce--testo {
	display: flex; align-items: center; justify-content: center; padding: 0 var(--dg-space-1);
	font-size: .5625rem; font-weight: var(--dg-fw-bold); line-height: 1.1; text-align: center;
	color: var(--dg-black); background: var(--dg-white);
	border: var(--dg-border-width) solid var(--dg-black); border-radius: var(--dg-radius-sm);
}