/*
 * Moduli: prenotazione, slot, raccolta.
 */

.pms-field { margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.pms-field--wide { grid-column: 1 / -1; }

.pms-field__label {
	font-size: var(--step-5);
	font-weight: 700;
	color: var(--color-muted-strong);
}

.pms-field__required { color: var(--color-danger); }

/*
 * **Si contrassegna ciò che si può saltare.** In un modulo in cui quasi tutto va
 * compilato, un asterisco accanto a ogni riga non distingue nulla; la parola sta
 * dove serve, cioè dove qualcuno può risparmiarsi di scrivere. Non grida: è più
 * piccola e più chiara dell'etichetta a cui appartiene.
 */
.pms-field__flag {
	margin-left: 6px;
	font-size: var(--step-1);
	font-weight: 400;
	color: var(--color-muted);
}

.pms-field__control {
	width: 100%;
	padding: 9px 12px;
	font: inherit;
	font-size: var(--step-4);
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
}

/*
 * **Una tendina deve somigliare agli altri campi.** Lasciato al proprio aspetto
 * di sistema, `select` è l'unico controllo che ogni motore disegna a modo suo:
 * WebKit — quindi Safari, e ogni browser su iPhone e iPad — scarta l'imbottitura
 * e il raggio dichiarati qui sopra e impone i propri. Misurato sul banco, accanto
 * a un campo di testo alto quarantadue pixel la tendina ne misurava ventitré:
 * diciannove in meno, angoli da cinque invece che da quindici, testo appoggiato
 * al bordo. Chromium quelle regole le rispetta, ed è da lì che nasceva la
 * differenza fra un browser e l'altro.
 *
 * Si spegne quindi l'aspetto di sistema e si ridisegna la freccia in linea. Il
 * disegno non è nuovo: è lo stesso del campo «Dove» della barra di ricerca, così
 * che di frecce il sito ne abbia una sola.
 */
select.pms-field__control {
	appearance: none;
	padding-inline-end: 34px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23111'%3E%3Cpath d='M480-361.85 253.85-588 296-630.15l184 184 184-184L706.15-588 480-361.85Z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
	cursor: pointer;
	text-overflow: ellipsis;
}

.pms-field__control:focus-visible {
	border-color: var(--color-primary);
	outline: 2px solid var(--color-outline);
	outline-offset: 1px;
}

.pms-field__control[aria-invalid="true"] {
	border-color: var(--color-danger);
	background: var(--color-danger-soft);
}

.pms-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

.pms-field__check {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
	border-radius: var(--radius-check);
}

.pms-field--check .pms-field__label { font-weight: 400; font-size: var(--step-3); }

/*
 * L'esca resta nel documento ma fuori dalla vista e fuori dal percorso di
 * tabulazione: nasconderla e basta la renderebbe invisibile anche a chi usa un
 * lettore di schermo, che è l'esito voluto, ma va detto esplicitamente.
 */
.pms-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------ prenotazione. */

.pms-booking__title { margin: 0 0 14px; font-size: var(--step-7); }

.pms-booking__dates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 12px;
}

.pms-booking__dates .pms-field:last-child { grid-column: 1 / -1; }

/*
 * Le due date si impilano su schermo stretto. La soglia stava in fondo al
 * foglio insieme a quelle dei moduli di raccolta, che ora hanno soglie proprie:
 * questa è del riquadro di prenotazione e vive accanto alla griglia che governa.
 *
 * `.pms-booking__guest` non compare qui: la sua soglia è quella del contenitore,
 * non della finestra, e ripeterla in una media query la contraddirebbe.
 */
@media (max-width: 900px) {
	.pms-booking__dates { grid-template-columns: minmax(0, 1fr); }
}

.pms-booking__extras {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.pms-booking__legend { padding: 0 0 8px; font-size: var(--step-5); font-weight: 800; }

/*
 * Un extra è una scelta, non una casella in una lista: la riga intera si può
 * premere, il prezzo sta a destra dove lo si cerca, e il bordo dice che cosa è
 * stato scelto senza affidarsi al solo quadratino.
 */
.pms-extra {
	position: relative;
	margin: 0 0 8px;
	font-size: var(--step-4);
}

.pms-extra__control { position: absolute; opacity: 0; pointer-events: none; }

.pms-extra__label {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 11px 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.pms-extra__label:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }

.pms-extra__control:checked + .pms-extra__label {
	border-color: var(--color-primary);
	background: var(--color-primary-soft);
	box-shadow: inset 0 0 0 1px var(--color-primary);
}

.pms-extra__control:focus-visible + .pms-extra__label {
	outline: 2px solid var(--color-outline);
	outline-offset: 2px;
}

.pms-extra__name { font-weight: 700; }
.pms-extra__amount { font-weight: 800; text-align: right; }
.pms-extra__basis { grid-column: 1; font-size: var(--step-2); color: var(--color-muted-strong); }

.pms-extra--mandatory {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 11px 14px;
	color: var(--color-muted-strong);
	background: var(--color-surface-soft);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-control);
}
.pms-extra__note { font-size: var(--step-2); color: var(--color-muted-strong); }

/* Su superficie tenue il grigio chiaro non raggiunge 4,5:1: si usa il più scuro. */
.pms-booking__hint { margin: 8px 0 0; font-size: var(--step-2); color: var(--color-muted-strong); }

/*
 * **Due colonne per le coppie che si leggono insieme**: nome e cognome,
 * provincia e città. Indirizzo, email e telefono prendono tutta la riga con
 * `--wide`: comprimerli a metà avrebbe reso illeggibile ciò che si scrive
 * dentro proprio nei campi più lunghi.
 *
 * Il riquadro della prenotazione vive in una colonna stretta anche su schermi
 * larghi: la soglia è quella del **contenitore**, non della finestra, altrimenti
 * a 1440 px si otterrebbero due colonne da centosettanta pixel.
 */
/*
 * Il contenitore da interrogare è **il passaggio**, non la griglia: una query di
 * contenitore descrive i discendenti, e un elemento non può misurare sé stesso.
 */
.pms-booking .pms-booking__step { container-type: inline-size; }

.pms-booking__guest {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 12px;
}

/*
 * **Il gruppo della residenza non è una cella: è una parentesi.** Provincia e
 * città esistono in due forme — i menù collegati per l'Italia, due campi liberi
 * per il resto del mondo — e ognuna sta dentro il proprio contenitore, perché si
 * accendano e si spengano insieme. Ma un contenitore dentro una griglia diventa
 * una cella sua, e i due campi finivano impilati dentro mezza colonna invece che
 * affiancati come tutti gli altri.
 *
 * `display: contents` toglie di mezzo la scatola lasciandone il contenuto: i due
 * campi tornano a essere figli della griglia e si dispongono come prima. Quando
 * il gruppo è spento, però, la scatola deve tornare a esistere per sparire — un
 * contenitore trasparente non si può nascondere, si nasconderebbe il nulla.
 */
.pms-residenza { display: contents; }
.pms-residenza[hidden] { display: none; }

/*
 * **La soglia è quella del riquadro, non della finestra.** Su uno schermo da
 * 1440 px il modulo vive in una colonna laterale di 338 px; su un telefono da
 * 375 px occupa 301 px di larghezza piena. Misurare la finestra avrebbe dato due
 * colonne dove non c'è spazio e una colonna sola dove ce n'è: fra quelle due
 * misure passa la riga, ed è lì che sta la soglia.
 */
@container (min-width: 320px) {
	.pms-booking__guest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * **Email e telefono prendono sempre la riga intera.** Un indirizzo di posta è
 * lungo e va letto per intero mentre lo si scrive; il telefono è l'unico campo
 * composto da due controlli, e in mezza colonna al numero restavano sessanta
 * pixel. Restano affiancati soltanto nome e cognome, che sono corti e si leggono
 * insieme. `--wide` fa il lavoro: nessuna regola per singolo campo.
 */

/*
 * Ripiego per i browser senza query di contenitore: si torna alla soglia della
 * finestra, che è ciò che il tema usava prima. Peggio della misura giusta, molto
 * meglio di una colonna sola ovunque.
 */
@supports not (container-type: inline-size) {
	@media (min-width: 481px) {
		.pms-booking__guest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
}

.pms-booking__submit { margin-top: 8px; }
.pms-booking__submit .pms-button { width: 100%; }

.pms-booking__outcome:empty { display: none; }

/* --------------------------------------------------------------- riepilogo. */

.pms-summary {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-container);
}

.pms-summary__title { margin: 0 0 10px; font-size: var(--step-5); }

.pms-summary__line,
.pms-summary__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--text-meta);
	padding: 3px 0;
}

.pms-summary__total {
	margin: 8px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--color-border);
	font-weight: 800;
	font-size: var(--step-7);
}

.pms-summary__line--discount .pms-summary__label,
.pms-summary__line--discount .pms-summary__amount { color: var(--color-success); font-weight: 700; }

.pms-summary__placeholder { margin: 0; font-size: var(--step-5); color: var(--color-muted); }
.pms-summary__note { margin: 8px 0 0; font-size: var(--step-3); }
.pms-summary__note--warning { color: var(--color-warning); }

/* ----------------------------------------------------------- codice sconto. */

/*
 * Il campo non sta aperto ad aspettare: chi non ha un codice legge una riga
 * sola, e chi ce l'ha apre la domanda e trova la casella.
 */

.pms-coupon { margin: 12px 0 0; border-top: 1px solid var(--color-border); padding-top: 12px; }

.pms-coupon__apri {
	cursor: pointer;
	font-size: var(--text-meta);
	font-weight: 700;
	list-style: none;
}

.pms-coupon__apri::-webkit-details-marker { display: none; }

.pms-coupon__apri::before { content: '+ '; }

.pms-coupon[open] .pms-coupon__apri::before { content: '– '; }

.pms-coupon__campo { margin-top: 10px; }

.pms-coupon__etichetta { display: block; font-size: var(--step-3); margin-bottom: 6px; }

.pms-coupon__riga { display: flex; gap: 8px; flex-wrap: wrap; }

.pms-coupon__input {
	flex: 1 1 160px;
	min-width: 0;
	text-transform: uppercase;
}

.pms-coupon__esito { margin: 8px 0 0; font-size: var(--step-3); }
.pms-coupon__esito.is-error { color: var(--color-warning); }
.pms-coupon__esito.is-applied { color: var(--color-success); }

.pms-coupon__rimuovi {
	background: none;
	border: 0;
	color: var(--color-muted);
	cursor: pointer;
	font-size: var(--step-3);
	margin-top: 6px;
	padding: 0;
	text-decoration: underline;
}

/* -------------------------------------------------------------------- slot. */

.pms-slots__title { margin: 0 0 14px; font-size: var(--step-7); }
.pms-slots__list { margin: 0 0 16px; padding: 0; border: 0; }

.pms-slot { margin: 0 0 6px; }

.pms-slot__label {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 10px 12px;
	font-size: var(--text-meta);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	cursor: pointer;
}

.pms-slot__control { position: absolute; opacity: 0; }

.pms-slot__control:checked + .pms-slot__label {
	border-color: var(--color-primary);
	background: var(--color-primary-soft);
}

.pms-slot__control:focus-visible + .pms-slot__label {
	outline: 2px solid var(--color-outline);
	outline-offset: 2px;
}

.pms-slot__date { font-weight: 700; }
.pms-slot__time,
.pms-slot__seats { font-size: var(--step-5); color: var(--color-muted); }
.pms-slot__price { font-weight: 700; text-align: right; }

.pms-slot--full .pms-slot__label {
	color: var(--color-disabled);
	background: var(--color-disabled-surface);
	cursor: not-allowed;
}

/* ---------------------------------------------------------- raccolta lead. */

/*
 * **Il modulo prende presenza dalla misura, non da un riquadro.** Nessun fondo,
 * nessun bordo attorno: a distinguerlo da ciò che gli sta accanto sono caselle
 * più alte, etichette leggibili e un ritmo costante fra una riga e l'altra. Le
 * misure valgono solo qui — la prenotazione ha le proprie, ed è un altro
 * componente.
 */
.pms-lead__title {
	margin: 0 0 8px;
	font-size: var(--text-section);
	line-height: 1.2;
}

.pms-lead__intro {
	max-width: 56ch;
	margin: 0 0 20px;
	font-size: var(--text-body);
	line-height: var(--line-height-text);
	color: var(--color-muted-strong);
}

.pms-lead__intro > p:last-child { margin-bottom: 0; }

/*
 * **Dodici tracce, perché le frazioni tornino tutte.** Chi compone il modulo
 * sceglie quanta riga occupa una domanda — intera, tre quarti, due terzi, metà,
 * un terzo, un quarto — e su dodici tracce ciascuna di quelle frazioni cade
 * esatta. La misura che ne esce è la stessa di prima: metà di dodici tracce è
 * larga quanto una colonna su due, perché nel conto entrano anche gli spazi in
 * mezzo.
 */
.pms-lead__fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 4px 20px;
}

.pms-lead__fields > .pms-field--w-full { grid-column: span 12; }
.pms-lead__fields > .pms-field--w-three_quarters { grid-column: span 9; }
.pms-lead__fields > .pms-field--w-two_thirds { grid-column: span 8; }
.pms-lead__fields > .pms-field--w-half { grid-column: span 6; }
.pms-lead__fields > .pms-field--w-third { grid-column: span 4; }
.pms-lead__fields > .pms-field--w-quarter { grid-column: span 3; }

/*
 * **Sotto una certa larghezza le proporzioni non si rispettano: si abbandonano.**
 * Un quarto di una colonna stretta non è un campo, è una fessura in cui non
 * entra né l'etichetta né la risposta. La scelta di chi compone vale dove c'è
 * spazio per mantenerla; sotto, il tema accorpa — prima a metà, poi a riga
 * intera — e nessuna configurazione può produrre un modulo che sborda.
 */
@media screen and (max-width: 900px) {
	.pms-lead__fields > .pms-field--w-third,
	.pms-lead__fields > .pms-field--w-quarter { grid-column: span 6; }

	.pms-lead__fields > .pms-field--w-three_quarters,
	.pms-lead__fields > .pms-field--w-two_thirds { grid-column: span 12; }
}

@media screen and (max-width: 600px) {
	.pms-lead__fields > .pms-field { grid-column: span 12; }
}

.pms-lead .pms-field { margin: 0 0 18px; gap: 6px; }

.pms-lead .pms-field__label {
	font-size: var(--text-dense);
	font-weight: 600;
	color: var(--color-text);
}

/*
 * Quarantotto pixel: la stessa altezza comoda dei controlli del sito, e sopra
 * i quarantaquattro che un dito chiede per centrare il bersaglio.
 */
.pms-lead .pms-field__control {
	min-height: 48px;
	padding: 12px 14px;
	font-size: var(--text-body);
	border-color: var(--color-border);
}

.pms-lead .pms-field__control:hover { border-color: var(--color-border-strong); }

.pms-lead select.pms-field__control { cursor: pointer; }

/* Il messaggio è alto quanto basta a scrivere: sei righe, non una. */
.pms-lead .pms-field__control--message {
	min-height: 150px;
	padding: 14px;
	line-height: var(--line-height-text);
	resize: vertical;
}

/* Le caselle da spuntare stanno su una riga propria e non si stringono. */
.pms-lead .pms-field--check {
	grid-column: 1 / -1;
	align-items: center;
	margin-bottom: 14px;
}

.pms-lead .pms-field--check .pms-field__label {
	font-size: var(--text-dense);
	font-weight: 400;
	color: var(--color-muted-strong);
}

/*
 * Il consenso si legge: è la riga con cui si accetta qualcosa, e stava un punto
 * più in basso di tutte le altre.
 */
.pms-lead__form > .pms-field--check {
	margin: 6px 0 0;
	padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--color-surface));
}

.pms-lead__form > .pms-field--check .pms-field__label {
	font-size: var(--text-dense);
	line-height: 1.5;
}

.pms-lead__submit { margin-top: 18px; }

.pms-lead__submit .pms-button {
	min-height: 48px;
	padding-inline: 28px;
}

/* ------------------------------------------------------------ proprietari. */

/*
 * **L'apertura comincia dove comincia quella della pagina iniziale.** Lì la Hero
 * è il primo figlio di `<main>` e porta il proprio stacco dalla testata; qui vive
 * dentro un contenitore di pagina che aggiungeva i suoi trentadue pixel di
 * imbottitura sopra, e l'apertura scendeva di altrettanto. Si toglie
 * l'imbottitura, non si aggiunge un margine negativo: quello che sta sotto non si
 * muove di un pixel, perché è la sola quota in alto a cambiare.
 */
.pms-page--owners { padding-top: 0; }

/*
 * **L'apertura è quella condivisa**, in `hero.css`: contenitore, fotografia,
 * velo, occhiello, titolo, sottotitolo e azioni non si ridichiarano qui. Come
 * questa pagina la disponga — a colonna sola, dentro la griglia a due colonne —
 * sta in `owners.css`, che è il foglio della pagina.
 *
 * Qui c'era una scala ridotta per il titolo, giustificata da un copy più lungo:
 * cinquantasei pixel contro i settantadue dell'apertura iniziale. Era il modo
 * sbagliato di risolvere il problema giusto. Un componente condiviso che ogni
 * pagina può rimpicciolire non è condiviso: è un modello da cui si copia, e due
 * aperture affiancate mostravano due gerarchie diverse per la stessa cosa. Se un
 * testo è troppo lungo per la sua scala si accorcia il testo — la scala vale per
 * tutti.
 */

/*
 * **Il riquadro della richiesta è il modulo.** Dove la pagina iniziale appoggia
 * quattro promesse di vetro, qui si compila: stesso materiale — vetro chiaro sul
 * velo, contorno appena percepibile — e stesso raggio, perché appartiene alla
 * stessa apertura. Dentro non c'è un secondo riquadro: i passaggi sono divisioni
 * della stessa superficie, e una scheda dentro la scheda avrebbe raddoppiato i
 * bordi per dire una cosa che l'avanzamento dice già.
 */
.pms-hero__request {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	color: var(--hero-chiaro);
	background: var(--color-hero-panel);
	border: 1px solid var(--color-hero-line);
	border-radius: var(--radius-container);
	backdrop-filter: blur(10px);
}

/*
 * **«Compila qui», detto una volta e a voce bassa.** La chiamata all'azione della
 * colonna accanto non porta più il fuoco dentro il modulo — lo riavvolgeva al
 * primo passaggio — ma fa avanzare il riquadro di due centesimi e lo riporta
 * dov'era. Due centesimi su cinquecento pixel sono undici: si vedono come un
 * movimento, non come un salto, ed è la differenza fra un richiamo e un allarme.
 *
 * La curva parte svelta e si posa: il ritorno dura più dell'andata, che è il modo
 * in cui si muovono le cose vere. Nessun rimbalzo, nessuna ripetizione: chi non
 * preme non vede nulla.
 */
@keyframes pms-richiamo {
	from { transform: scale(1); }
	40% { transform: scale(1.022); }
	to { transform: scale(1); }
}

.pms-hero__request.is-called {
	animation: pms-richiamo 300ms cubic-bezier(0.33, 0.7, 0.36, 1);
}

/*
 * Chi ha chiesto meno movimento non lo riceve. Il copione già non applica la
 * classe: questa regola è la seconda serratura, per il giorno in cui il richiamo
 * arrivasse da un'altra parte.
 */
@media (prefers-reduced-motion: reduce) {
	.pms-hero__request.is-called { animation: none; }
}

.pms-hero__request .pms-lead {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.pms-hero__request .pms-lead__title {
	margin: 0 0 6px;
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.25;
	color: var(--hero-chiaro);
}

/*
 * **Il vetro non si può leggere con i colori del foglio.** Etichette, caselle e
 * testi dentro l'apertura prendono la stessa scala chiara del titolo che hanno
 * accanto: sono gli unici valori che cambiano rispetto al modulo su fondo
 * bianco, e cambiano perché cambia ciò che ci sta sotto.
 */
.pms-hero__request .pms-field__label { color: var(--hero-chiaro); }

.pms-hero__request .pms-field__control {
	min-height: 42px;
	padding: 9px 12px;
	font-size: var(--text-meta);
	color: var(--hero-chiaro);
	background: var(--color-hero-field);
	border-color: var(--color-hero-line-strong);
}

.pms-hero__request .pms-field__control::placeholder { color: var(--color-hero-placeholder); }

.pms-hero__request .pms-field__control:focus-visible {
	border-color: var(--hero-chiaro);
	outline-color: var(--hero-chiaro);
}

.pms-hero__request .pms-field__control[aria-invalid='true'] {
	border-color: var(--color-danger);
	background: var(--color-hero-field);
}

/* Il menu a tendina si apre col colore del sistema: le voci restano leggibili. */
.pms-hero__request select.pms-field__control option { color: var(--color-text); }

/*
 * Nell'eroe il campo sta su fondo scuro e il testo è chiaro: la freccia deve
 * seguirlo, o resterebbe nera su scuro. Serve anche riscriverla, perché la
 * regola dell'eroe usa la forma breve di `background`, che azzera l'immagine.
 */
.pms-hero__request select.pms-field__control {
	appearance: none;
	padding-inline-end: 34px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fdf7f4'%3E%3Cpath d='M480-361.85 253.85-588 296-630.15l184 184 184-184L706.15-588 480-361.85Z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
	cursor: pointer;
	text-overflow: ellipsis;
}

.pms-hero__request .pms-field__check { accent-color: var(--color-primary); }

/* Sul vetro il bottone non scelto è vetro, quello scelto prende l'accento. */
.pms-hero__request .pms-choice__label {
	color: var(--hero-chiaro);
	background: var(--color-hero-field);
	border-color: var(--color-hero-line-strong);
}

.pms-hero__request .pms-choice__label:hover { background: var(--color-hero-hover); }

.pms-hero__request .pms-choice__control:checked + .pms-choice__label {
	color: var(--color-on-primary);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.pms-hero__request .pms-choice__control:focus-visible + .pms-choice__label { outline-color: var(--hero-chiaro); }

.pms-hero__request .pms-choice legend { color: var(--hero-chiaro); }
.pms-hero__request .pms-field__required { color: var(--hero-chiaro); }

.pms-hero__request .pms-field { margin: 0 0 8px; gap: 3px; }

.pms-hero__request .pms-field__label { font-size: var(--step-3); }

.pms-hero__request .pms-lead__step-title {
	margin: 0 0 8px;
	font-size: var(--text-meta);
}

.pms-hero__request .pms-lead__fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0 12px;
}

/*
 * Nell'apertura la proporzione è quella dichiarata dalla configurazione: nessun
 * tipo di domanda ha più una regola propria, altrimenti una scelta composta
 * larga un terzo uscirebbe comunque larga quanto la sua casella.
 */

/* Nell'apertura il messaggio è breve: due righe bastano a dire il resto. */
.pms-hero__request .pms-field__control--message {
	min-height: 56px;
	line-height: 1.45;
}

/*
 * **Il consenso si legge come tutto il resto.** Fuori dall'apertura è una riga
 * attenuata perché sta su fondo bianco e non deve competere con i campi; qui sta
 * sul vetro, e lo stesso grigio ci si perdeva dentro. Prende la scala chiara
 * delle altre etichette del modulo, e il collegamento all'informativa resta
 * sottolineato: su fondo scuro il solo colore non basta a dire che è un
 * collegamento.
 */
.pms-hero__request .pms-lead__consent { margin: 4px 0 0; }

.pms-hero__request .pms-lead__consent .pms-field__label {
	font-size: var(--step-3);
	line-height: 1.35;
	color: var(--hero-chiaro);
}

.pms-hero__request .pms-lead__consent a {
	color: var(--hero-chiaro);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.pms-hero__request .pms-lead__consent a:hover,
.pms-hero__request .pms-lead__consent a:focus-visible { text-decoration-thickness: 2px; }

/* --- I passaggi ----------------------------------------------------------- */

/*
 * **Il modulo è header, contenuto e navigazione.** Le tre fasce stanno una sotto
 * l'altra e solo quella di mezzo cede: l'avanzamento resta in alto, i comandi in
 * fondo, e nessuno dei due si sposta cambiando passaggio. È la struttura a
 * tenerli fermi — non un margine che li spinga verso il basso, che li avrebbe
 * fatti ballare a ogni passaggio di lunghezza diversa.
 */
.pms-lead--steps .pms-lead__form {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pms-lead__steps {
	flex: 1 1 auto;
	min-height: 0;
}

/*
 * **Dove le colonne sono impilate l'apertura non ha un'altezza propria**: la
 * prende dal contenuto, e il contenuto sarebbe il passaggio corrente. Perché non
 * si accorci e si allunghi mentre si avanza, la fascia dei campi tiene la misura
 * del passaggio più lungo — che a questa larghezza è quello delle dotazioni.
 * Sopra i 1080 non serve: lì è l'apertura a dettare l'altezza e la fascia la
 * riempie.
 */
@media (min-width: 641px) and (max-width: 1080px) {
	.pms-hero__request .pms-lead__steps { min-height: 15.5rem; }
}

.pms-lead__step-title {
	margin: 0 0 12px;
	font-size: var(--text-meta);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--hero-chiaro, var(--color-text));
}

.pms-lead__step-title:focus-visible {
	outline: 2px solid var(--hero-chiaro, var(--color-outline));
	outline-offset: 3px;
	border-radius: var(--radius-check);
}

/*
 * Senza script i tre passaggi sono tre gruppi in colonna: un filetto li separa,
 * ed è il solo segno che li distingue. La classe che dichiara lo script attivo
 * sta sul modulo — è lui che il copione prepara — e non sulla sezione: è da lì
 * che va letta, altrimenti la regola vale sempre e l'altezza comune non arriva
 * mai.
 */
.pms-lead__form:not(.is-ready) .pms-lead__step + .pms-lead__step {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--color-hero-line);
}

.pms-lead__form:not(.is-ready) .pms-lead__step { min-height: 0; }

/*
 * **Indietro a sinistra, avanti a destra.** Il margine automatico spinge a
 * destra ciò che prosegue: vale anche al primo passaggio, dove «Indietro» non
 * c'è e «Avanti» resta comunque dove ci si aspetta di trovarlo.
 */
.pms-lead__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.pms-lead__nav .pms-lead__next,
.pms-lead__nav .pms-lead__submit { margin: 0 0 0 auto; }

.pms-lead__nav .pms-button {
	min-height: 44px;
	padding-inline: 20px;
	font-size: var(--step-4);
}

/* Su vetro il pulsante che torna indietro è vetro anche lui. */
.pms-hero__request .pms-lead__back {
	color: var(--hero-chiaro);
	background: var(--color-hero-quiet);
	border-color: var(--color-hero-line-strong);
}

.pms-hero__request .pms-lead__back:hover { background: var(--color-hero-line); }

/*
 * **La scelta fra sì e no.** Due bottoni affiancati che si premono per intero,
 * non un quadratino da centrare: quello scelto si accende del colore principale
 * e si legge da lontano, anche sopra una fotografia. Non è un riquadro dentro un
 * riquadro — è il controllo stesso.
 */
.pms-choice {
	margin: 0;
	padding: 0;
	border: 0;
}

.pms-choice__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-top: 5px;
}

.pms-choice__option { position: relative; display: block; }

.pms-choice__control {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.pms-choice__label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 10px;
	font-size: var(--text-meta);
	font-weight: 600;
	text-align: center;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.pms-choice__control:checked + .pms-choice__label {
	color: var(--color-on-primary);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.pms-choice__control:focus-visible + .pms-choice__label {
	outline: 2px solid var(--color-outline);
	outline-offset: 2px;
}

/*
 * L'avanzamento è una riga sola, non una barra: quattro passaggi non chiedono un
 * indicatore che occupi quanto un passaggio. Sta sotto il titolo, dove si legge
 * prima di cominciare: in fondo al riquadro diceva dove si era a chi era già
 * arrivato in fondo.
 */
.pms-lead__progress {
	margin: 0 0 14px;
	font-size: var(--step-3);
	letter-spacing: 0.04em;
	color: var(--hero-tenue, var(--color-muted));
}

/*
 * Su schermo stretto il riquadro non si stringe più di quanto si stringa la
 * colonna: è largo quanto l'apertura, come le promesse della pagina iniziale.
 */
@media (max-width: 1080px) {
	.pms-hero__request { align-self: stretch; }
}

@media (max-width: 640px) {
	/*
	 * **Una colonna, tranne per le proporzioni piccole.** Un indirizzo o un
	 * recapito in centotrenta pixel non si legge mentre lo si scrive; una
	 * quantità sì, e tenerne due per riga accorcia di quattro righe i passaggi
	 * che ne sono fatti. Chi compone dichiara un terzo o un quarto per le
	 * risposte corte: qui diventano metà riga, e tutto il resto riga intera.
	 */
	.pms-hero__request .pms-lead__fields > .pms-field { grid-column: span 12; }

	.pms-hero__request .pms-lead__fields > .pms-field--w-third,
	.pms-hero__request .pms-lead__fields > .pms-field--w-quarter { grid-column: span 6; }

	/*
	 * **Su telefono l'altezza è quella del contenuto.** Le colonne sono impilate e
	 * non c'è nulla da tenere allineato: un'altezza comune avrebbe lasciato
	 * trecento pixel di vetro vuoto sotto i passaggi corti, che su uno schermo
	 * alto ottocento è mezza schermata di niente. La fascia dei campi torna a
	 * misurarsi da sé.
	 */
	.pms-hero__request .pms-lead__steps { min-height: 0; }

	.pms-lead__nav .pms-button { flex: 1 1 auto; justify-content: center; }
}


/* --- Adattamento della pagina ------------------------------------------- */

/*
 * L'impilamento dell'apertura è del componente, in `hero.css`, e vale per la
 * pagina che lo rende. La griglia delle domande resta di dodici tracce a ogni
 * larghezza: sono le proporzioni dichiarate ad accorparsi, sopra, e una griglia
 * a traccia unica avrebbe fatto sbordare le tracce implicite di uno `span 6`.
 */

/* -------------------------------------------- flusso a tre passaggi (§30). */

/*
 * **Tutto ciò che segue vive dentro `.pms-booking`.** L'indicatore, i passaggi e
 * i loro pulsanti sono del modulo di prenotazione e di nient'altro: una regola
 * scritta su un nome generico avrebbe raggiunto la barra di ricerca in testata,
 * che ha i propri controlli e non deve cambiare quando cambia il modulo.
 */

.pms-booking .pms-wizard { margin: 0 0 16px; }

/*
 * **Tre colonne uguali, non tre etichette in fila.** Disposte per larghezza del
 * testo, «Dati» — che è corto — finiva più vicino a «Conferma» che a
 * «Soggiorno», e i tre passi sembravano scanditi male. Le colonne sono
 * equivalenti per costruzione, quindi i centri cadono a 16,67 %, 50 % e 83,33 %
 * qualunque cosa ci sia scritto dentro. **Nessun margine è mai assegnato al
 * singolo passo**: correggere a mano una distanza avrebbe rimesso la geometria
 * nelle mani della lunghezza delle parole.
 */
/*
 * **Una riga sola, sempre.** La griglia a tre colonne fisse andava a capo appena
 * i passaggi sono diventati quattro, e una sequenza che va a capo smette di
 * leggersi come una sequenza. Ora è una fila che si adatta: su schermo largo i
 * quattro entrano, su schermo stretto scorrono in orizzontale invece di
 * impilarsi.
 */
.pms-booking .pms-wizard__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

/*
 * Contrassegno **sopra** l'etichetta, entrambi centrati: è la sola disposizione
 * in cui il centro del contrassegno e il centro del passo coincidono. Affiancati
 * il contrassegno sarebbe scivolato a sinistra del centro di una quantità pari a
 * metà etichetta — diversa per ogni passo — e una eventuale linea di
 * collegamento avrebbe unito punti che non stanno in mezzo a nulla.
 */
.pms-booking .pms-wizard__item {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 3px;
	flex: 1 1 0;

	/*
	 * Non si stringe sotto la propria etichetta: se lo spazio manca, la fila
	 * scorre. Un passo compresso fino ai puntini non dice più quale sia.
	 */
	min-width: max-content;
	padding: 0 2px;
	text-align: center;
	font-size: var(--step-2);
	color: var(--color-muted-strong);
}

/*
 * Il contrassegno cambia **forma** con lo stato, non solo tinta: cerchiato per
 * la fase da compilare, pieno per quella corrente e per quelle concluse. Chi non
 * distingue i colori distingue il bordo dal pieno.
 */
.pms-booking .pms-wizard__badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 2px solid var(--color-border-strong);
	border-radius: 50%;
	font-size: var(--step-1);
	font-weight: 800;
	line-height: 1;
}

.pms-booking .pms-wizard__check { display: none; }

.pms-booking .pms-wizard__name {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * **Sul telefono i passi si dividono la riga in parti uguali.** Portavano con sé
 * la larghezza del proprio nome — `min-width: max-content` — e quattro nomi non
 * ci stanno in trecentosettantacinque pixel: la fila diventava una fascia da
 * trascinare, e per non trascinarla si era finiti a nascondere tutti i nomi
 * tranne quello della fase corrente, messo in una riga sua sotto l'intera
 * sequenza. Da lì l'etichetta sperduta, che non stava sotto nessun numero.
 *
 * Qui i passi possono stringersi (`min-width: 0`) e l'ellissi — che il nome ha
 * già — fa da rete se un giorno una parola non entra. Ogni nome resta sotto il
 * proprio contrassegno, centrato, e i contrassegni restano equidistanti perché
 * le colonne sono uguali per costruzione, non per la lunghezza delle parole.
 * Vale per tre passi come per quattro: è la fila ad adattarsi.
 */
@media (max-width: 640px) {
	.pms-booking .pms-wizard__badge { width: 20px; height: 20px; }

	.pms-booking .pms-wizard__item {
		font-size: var(--step-1);
		min-width: 0;
		padding: 0 1px;
	}

	.pms-booking .pms-wizard__list { gap: 6px; }
}

.pms-booking .pms-wizard__item[data-pms-state="current"] {
	color: var(--color-primary);
	font-weight: 800;
}

.pms-booking .pms-wizard__item[data-pms-state="current"] .pms-wizard__badge {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* Conclusa: la spunta prende il posto del numero, ed è un glifo diverso. */
.pms-booking .pms-wizard__item[data-pms-state="done"] { color: var(--color-text); }

.pms-booking .pms-wizard__item[data-pms-state="done"] .pms-wizard__badge {
	border-color: var(--color-text);
	background: var(--color-text);
	color: var(--color-surface);
}

.pms-booking .pms-wizard__item[data-pms-state="done"] .pms-wizard__number { display: none; }
.pms-booking .pms-wizard__item[data-pms-state="done"] .pms-wizard__check { display: inline; }


/*
 * **Il riquadro resta compatto, ma non minuscolo.** È l'unica parte della scheda
 * in cui si scrive invece di leggere, e la densità serve: i comandi, le etichette
 * e il microtesto restano ai gradini dell'interfaccia. A crescere è solo ciò che
 * si legge per capire dove si è — l'insegna del passaggio e il suo titolo — che a
 * undici e quattordici pixel e mezzo erano più piccoli dei campi da compilare.
 */
.pms-booking__progress {
	margin: 0 0 12px;
	font-size: var(--step-5);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.pms-booking__step-title {
	margin: 0 0 12px;
	font-size: var(--text-body);
}

/* Il titolo riceve il fuoco allo scambio di passaggio: deve vedersi. */
.pms-booking__step-title:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: 4px;
	border-radius: var(--radius-check);
}

.pms-booking__actions {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.pms-booking__actions .pms-button { flex: 1; }
.pms-booking__actions .pms-button--ghost { flex: 0 0 auto; }

.pms-booking__recap {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: var(--color-primary-soft);
	border-radius: var(--radius-container);
}

.pms-booking__recap-line {
	margin: 0 0 6px;
	font-size: var(--text-meta);
	font-weight: 700;
}

/*
 * Le righe del preventivo stanno sopra gli extra e sotto la riga che riassume:
 * stesso disegno delle voci extra, senza il titoletto — non sono una scelta di
 * chi prenota, sono il conto.
 */
.pms-booking__recap-list--lines { margin: 0 0 10px; }

/*
 * **Gli extra scelti si leggono come frasi, non come una tabella.** Sono poche
 * righe corte: allineare l'importo al margine destro avrebbe messo un vuoto in
 * mezzo a «Culla» e «120,00 €», che sono la stessa informazione. Restano
 * accostati, separati dal punto medio, e vanno a capo insieme quando la colonna
 * si stringe.
 */
/*
 * **Lo stacco appartiene alla sezione, non alle righe che la precedono.** «EXTRA»
 * cominciava appoggiata all'ultima riga di prezzo e le due cose si leggevano come
 * un elenco solo, mentre sono il conto e ciò che si è scelto in più. Lo spazio
 * sta qui, in cima al blocco: vale che sopra ci siano le righe del preventivo o
 * la sola riga che riassume — i margini contigui si fondono e vince questo —
 * senza toccare nulla di ciò che sta dentro.
 */
.pms-booking__recap-extras { margin: 15px 0 8px; }

.pms-booking__recap-extras-title {
	margin: 0 0 4px;
	font-size: var(--step-2);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-muted-strong);
}

.pms-booking__recap-list {
	display: grid;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pms-booking__recap-item {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	font-size: var(--step-5);
}

.pms-booking__recap-sep { color: var(--color-muted); }

.pms-booking__recap-amount { font-weight: 700; }

.pms-booking__recap-total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding-top: 8px;
	border-top: 1px solid var(--color-border);
	font-size: var(--step-7);
	font-weight: 800;
}

/* ------------------------------------------- nota su che cosa farà l'invio. */

/*
 * Deriva **interamente dal colore principale**, che l'amministrazione può
 * cambiare: bordo pieno, fondo al quindici per cento sulla superficie, testo
 * scurito quanto basta a restare leggibile sopra quel fondo. Nessun verde e
 * nessun valore fisso: una nota che ignorasse la tavolozza configurata sarebbe
 * l'unico elemento del riquadro a non seguirla.
 */
.pms-booking__notice {
	margin: 14px 0 0;
	padding: 10px 12px;
	font-size: var(--step-2);
	line-height: 1.45;
	color: color-mix( in srgb, var(--color-primary) 72%, var(--color-text) );
	background: color-mix( in srgb, var(--color-primary) 15%, var(--color-surface) );
	border: 1px solid var(--color-primary);
	border-radius: 15px;
}

/* --------------------------------------------------- i tre esiti dell'invio. */

.pms-outcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 20px;
	text-align: center;
}

.pms-outcome__state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

/*
 * **La spunta porta il colore principale, non il verde.** Il verde è il colore
 * del compiuto, e a richiesta ricevuta non è compiuto nulla.
 */
.pms-outcome__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: var(--color-on-primary);
	background: var(--color-primary);
	border-radius: 50%;
}

.pms-outcome__title {
	margin: 4px 0 0;
	font-size: var(--step-7);
}

.pms-outcome__title:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: 4px;
	border-radius: var(--radius-check);
}

.pms-outcome__text {
	margin: 0;
	max-width: 44ch;
	color: var(--color-muted-strong);
}

.pms-outcome__summary {
	width: 100%;
	margin: 6px 0 0;
	padding: 12px 14px;
	text-align: left;
	background: var(--color-surface-hover);
	border-radius: var(--radius-container);
}

.pms-outcome__deadline {
	margin: 0;
	font-size: var(--step-2);
	color: var(--color-muted-strong);
}

.pms-outcome__actions { margin: 6px 0 0; }

/*
 * **L'area premibile è dell'azione, non del pulsante che la porta.** La regola
 * nominava i due pulsanti che allora esistevano; il terzo — l'uscita verso i
 * contatti quando un pagamento non si può più fare — è nato senza, e nasceva
 * alto 41 px. Chi la dichiara adesso è il posto in cui l'azione vive.
 */
.pms-outcome__actions .pms-button { min-height: 44px; }

.pms-outcome__reference {
	margin: 6px 0 0;
	font-size: var(--text-meta);
}

.pms-outcome__reference-label {
	display: block;
	font-size: var(--step-1);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted-strong);
}

.pms-outcome__reference-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
}

/*
 * **Lo stesso esito, fuori dal riquadro.** Chi torna dal fornitore di pagamento
 * atterra su una pagina qualunque, dove non c'è il pannello di prenotazione a
 * dargli una misura: il contenitore gli dà quella del sito, e il testo resta
 * stretto quanto lo è dentro il riquadro, perché a piena pagina un messaggio di
 * tre righe centrate su 1400 px non si legge — si attraversa.
 */
.pms-payment-return__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.pms-outcome--standalone {
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(20px, 3vw, 32px) 20px 0;
}

/*
 * **Quando l'esito è la pagina.** Chi torna dal pagamento non trova più il
 * contenuto della pagina su cui è atterrato: trova questo, e basta. Senza
 * un'altezza propria resterebbe una riga appiccicata sotto l'intestazione con il
 * piede a mezzo schermo — la forma di un errore, non quella di una risposta.
 */
.pms-payment-return--pagina {
	display: flex;
	align-items: center;
	min-height: min(58vh, 520px);
	padding-block: clamp(32px, 7vw, 72px);
}

.pms-payment-return--pagina .pms-payment-return__inner { width: 100%; }

.pms-payment-return--pagina .pms-outcome--standalone { padding-top: 0; }

/*
 * Due comandi accanto, e a schermo stretto uno sotto l'altro alla stessa
 * misura: «riprova» e «scrivici» sono due strade diverse, non un comando e il
 * suo ripensamento.
 */
.pms-outcome--standalone .pms-outcome__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/*
 * **Il riepilogo della prenotazione confermata.** Due colonne dove lo schermo le
 * regge — voce a sinistra, valore a destra — e una sola colonna sotto la soglia,
 * dove affiancarle spezzerebbe le parole. Le righe si leggono come un documento,
 * non come una tabella di sistema: nessun bordo, solo l'aria che le separa.
 */
.pms-riepilogo {
	width: 100%;
	margin: 4px 0 0;
	padding: 14px 16px;
	text-align: left;
	background: var(--color-surface-hover);
	border-radius: var(--radius-container);
}

.pms-riepilogo__riga {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	justify-content: space-between;
	padding: 6px 0;
}

.pms-riepilogo__riga + .pms-riepilogo__riga { border-top: 1px solid var(--color-border); }

.pms-riepilogo__voce {
	margin: 0;
	color: var(--color-muted-strong);
}

.pms-riepilogo__valore {
	margin: 0;
	font-weight: 700;
	text-align: right;
}

@media (max-width: 380px) {
	.pms-riepilogo__riga { justify-content: flex-start; }
	.pms-riepilogo__valore { text-align: left; }
}

/*
 * **Il dettaglio del preventivo è una sezione, non una seconda scheda.** Sta
 * sotto i dati della prenotazione, con un titolo piccolo che la introduce e la
 * stessa griglia di righe: chi legge scorre un conto, non due riquadri che si
 * somigliano.
 */
.pms-preventivo {
	width: 100%;
	margin: 14px 0 0;
}

.pms-preventivo[hidden] { display: none; }

.pms-preventivo__titolo {
	margin: 0 0 6px;
	font-size: var(--step-1);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted-strong);
	text-align: left;
}

/* L'ultima riga del conto è il totale, e si legge come tale. */
.pms-riepilogo--conto .pms-riepilogo__riga:last-child .pms-riepilogo__voce,
.pms-riepilogo--conto .pms-riepilogo__riga:last-child .pms-riepilogo__valore {
	font-weight: 800;
	color: var(--color-text);
}

/* Fra due paragrafi scritti dal pannello resta l'aria che li separa. */
.pms-outcome__text > p { margin: 0 0 8px; }
.pms-outcome__text > p:last-child { margin-bottom: 0; }


/* ------------------------------------- barra di prenotazione e suoi pannelli. */

.pms-bar { position: relative; margin: 0 0 16px; }

.pms-bar__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-container);
	overflow: hidden;
}

.pms-bar__control {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 12px;
	font: inherit;
	text-align: left;
	background: var(--color-surface);
	border: 0;
	border-right: 1px solid var(--color-border);
	cursor: pointer;
}

.pms-bar__control:last-child { border-right: 0; }
.pms-bar__control:hover { background: var(--color-surface-hover); }

.pms-bar__control.is-active {
	background: var(--color-primary-soft);
	box-shadow: inset 0 0 0 2px var(--color-primary);
}

.pms-bar__label {
	font-size: var(--step-1);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted-strong);
}

.pms-bar__value {
	font-size: var(--step-4);
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ----------------------------------------------------------------- pannelli. */

/*
 * **Sopra le righe appiccicate della pagina, sotto la testata.** Nella testata il
 * pannello è confinato in un contesto suo e l'indice non conta; nella pagina dei
 * risultati — dove la barra ricompare sotto i 900 px — competeva con la riga del
 * titolo, che è appiccicata a indice trenta e ha il fondo pieno: il pannello si
 * apriva dietro, e delle località si vedevano solo le ultime. Trentacinque lo
 * porta davanti a quella riga e lo lascia dietro alla testata, che resta l'unica
 * cosa che deve poterlo coprire scorrendo.
 */
.pms-panel {
	position: absolute;
	z-index: 35;
	left: 0;
	right: 0;
	max-width: 100vw;
	overflow-x: auto;
	margin-top: 6px;
	padding: 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-container);
	box-shadow: var(--shadow-popover);
}

.pms-panel--guests { left: auto; min-width: min( 280px, 100% ); }

/*
 * **L'elenco delle località, nella stessa superficie degli altri pannelli.** Il
 * pannello è quello di «Quando» e «Chi» — raggio, ombra, bordo e spazi arrivano
 * da `.pms-panel` e non si ridichiarano — e qui dentro cambia solo ciò che
 * contiene: righe premibili, larghe quanto il pannello, alte quanto un dito.
 *
 * Si àncora a sinistra perché «Dove» è il primo controllo della barra: aprirlo
 * verso destra lo avrebbe fatto uscire dallo schermo su una finestra stretta. Un
 * elenco lungo scorre invece di allungare la pagina.
 */
.pms-panel--where {
	right: auto;
	min-width: min( 260px, 100% );
	max-height: min( 60vh, 380px );
	overflow-y: auto;
	padding: 6px;
}

.pms-places { margin: 0; padding: 0; list-style: none; }

.pms-places__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	font: inherit;
	font-size: var(--step-5);
	font-weight: 600;
	text-align: start;
	color: var(--color-text);
	background: none;
	border: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
}

.pms-places__item:hover { background: var(--color-surface-hover); }

.pms-places__item:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: -2px;
}

/*
 * La scelta corrente si riconosce da un fondo tenue e da una spunta: è lo stesso
 * modo in cui il sito segna ciò che è attivo, senza aggiungere colore.
 */
.pms-places__item[aria-pressed='true'] { background: var(--color-surface-soft); }

.pms-places__item .pms-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	opacity: 0;
}

.pms-places__item[aria-pressed='true'] .pms-icon { opacity: 1; }

.pms-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.pms-panel__caption { margin: 0; font-size: var(--step-4); font-weight: 800; text-transform: capitalize; }

.pms-panel__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font: inherit;
	font-size: var(--step-6);
	line-height: 1;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	cursor: pointer;
}

.pms-panel__nav[disabled] { color: var(--color-disabled); border-color: var(--color-border); cursor: not-allowed; }

.pms-panel__months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Un mese solo prende tutta la larghezza disponibile. */
.pms-panel__months:has(> :only-child) { grid-template-columns: 1fr; }
.pms-panel__months > :only-child { width: 100%; }
.pms-panel__month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pms-panel__month-name { padding-bottom: 6px; font-size: var(--step-3); font-weight: 800; text-transform: capitalize; }
.pms-panel__month td { padding: 1px; text-align: center; }

.pms-panel__day {
	display: block;
	width: 100%;
	min-height: 38px;
	font: inherit;
	font-size: var(--step-3);
	color: var(--color-text);
	background: transparent;
	border: 0;
	border-radius: var(--radius-check);
	cursor: pointer;
}

.pms-panel__day:hover:not([disabled]) { background: var(--color-primary-soft); }
.pms-panel__day[disabled] { color: var(--color-disabled); cursor: not-allowed; }

/* Una notte occupata si dichiara anche col tratto, non col solo colore. */
.pms-panel__day.is-busy { text-decoration: line-through; background: var(--color-disabled-surface); }

.pms-panel__day.is-selected { color: var(--color-on-primary); background: var(--color-primary); font-weight: 800; }
.pms-panel__day.is-between { background: var(--color-primary-soft); }

.pms-panel__hint { margin: 10px 0 0; font-size: var(--step-3); color: var(--color-muted-strong); }

.pms-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--color-hero-line);
}

.pms-panel__legend { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--step-2); color: var(--color-muted-strong); }
.pms-panel__key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.pms-panel__key--busy { background: var(--color-disabled-surface); border: 1px solid var(--color-border-strong); }

.pms-panel__close { padding: 6px 14px; }

/* ------------------------------------------------------------- contatori. */

.pms-counter { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pms-counter__name { margin: 0; font-size: var(--step-5); font-weight: 700; }
.pms-counter__note { margin: 0; font-size: var(--step-2); color: var(--color-muted-strong); }
.pms-counter__controls { display: flex; align-items: center; gap: 10px; }

/*
 * Quattro righe, una sotto l'altra: la riga separatrice le distingue senza
 * bisogno di un riquadro per ciascuna.
 */
.pms-counter + .pms-counter { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }

/*
 * **La riga vietata resta leggibile.** Attenuarla fino a scomparire avrebbe
 * nascosto proprio l'informazione che deve dare — che quell'alloggio non ammette
 * animali — e il testo la dice per esteso, non il solo colore.
 */
.pms-counter--locked .pms-counter__name,
.pms-counter--locked .pms-counter__value { color: var(--color-muted-strong); }

.pms-counter__limit {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
	font-size: var(--step-2);
	color: var(--color-muted-strong);
}

/* Il vincolo d'età accanto al nome del campo nativo, non al posto suo. */
.pms-field__hint { display: block; font-size: var(--step-2); font-weight: 400; color: var(--color-muted-strong); }

.pms-counter__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font: inherit;
	font-size: var(--step-6);
	line-height: 1;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	cursor: pointer;
}

.pms-counter__button:hover:not([disabled]) { border-color: var(--color-primary); }

.pms-counter__button[disabled] {
	color: var(--color-disabled);
	border-color: var(--color-border);
	cursor: not-allowed;
}

.pms-counter__value { min-width: 1.5em; text-align: center; font-size: var(--step-5); font-weight: 800; }

@media (max-width: 640px) {
	.pms-panel { padding: 10px; }
	.pms-panel__months { grid-template-columns: 1fr; }
	.pms-panel__day { min-height: 34px; font-size: var(--step-4); }
	.pms-bar__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pms-bar__control:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--color-border); }
}

/*
 * L'avviso di una riprova respinta vive dentro l'esito, unica parte del riquadro
 * ancora nel documento visibile.
 */
.pms-outcome__error:empty { display: none; }
.pms-outcome__error { width: 100%; margin: 4px 0 0; text-align: left; }

/* ---------------------------------------------- telefono con prefisso. */

/*
 * Il prefisso e il numero sono due controlli **affiancati**, non uno: il primo
 * si dimensiona sul proprio contenuto, il secondo prende ciò che resta.
 */
/*
 * **Prefisso e numero restano sulla stessa riga.** Il controllo chiuso mostra
 * soltanto il prefisso — il nome della nazione vive nel gruppo, che si vede solo
 * ad elenco aperto — quindi gli bastano poche cifre di larghezza. Prima portava
 * bandiera e nome per intero, occupava metà campo e mandava il numero a capo
 * anche dove lo spazio c'era.
 *
 * La larghezza è **fissa e stabile**: al variare della nazione scelta il numero
 * non si sposta, e `+1` non produce un campo diverso da `+380`.
 */
.pms-phone { display: flex; gap: 8px; align-items: stretch; }

.pms-phone__country {
	flex: 0 0 auto;
	width: 5.5rem;
	padding: 9px 10px;
	font: inherit;
	font-size: var(--step-3);
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
}

/* Stessa ragione della tendina dei campi: qui lo spazio è poco, la freccia si stringe. */
select.pms-phone__country {
	appearance: none;
	padding-inline-end: 26px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23111'%3E%3Cpath d='M480-361.85 253.85-588 296-630.15l184 184 184-184L706.15-588 480-361.85Z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 14px 14px;
	cursor: pointer;
	text-overflow: ellipsis;
}

.pms-phone__country:focus-visible {
	border-color: var(--color-primary);
	outline: 2px solid var(--color-outline);
	outline-offset: 1px;
}

/* Prende tutto ciò che resta, e `min-width: 0` gli permette di restringersi. */
.pms-phone__number { flex: 1 1 auto; min-width: 0; }

/* Il codice fiscale si legge meglio spaziato e in maiuscolo. */

/* Una città non ancora scegliibile lo dichiara, invece di sembrare guasta. */
.pms-field__control:disabled {
	color: var(--color-disabled);
	background: var(--color-disabled-surface);
	cursor: not-allowed;
}

/*
 * Il pulsante che rinvia il modulo per farsi dare i comuni: esiste per chi non
 * ha JavaScript, e lo script lo toglie appena esiste un modo migliore.
 */
.pms-field__reload { margin-top: 6px; font-size: var(--step-2); }
.pms-field__help--warning { color: var(--color-warning); }

/*
 * **Il selettore dei partecipanti occupa la riga intera.**
 *
 * Nel wizard di un'esperienza la barra compatta ha un solo controllo — le date
 * non ci sono, perché lo slot è già la data — e la griglia a più colonne lo
 * lasciava stretto in un angolo, con metà riga vuota accanto. Una colonna sola
 * quando i controlli sono uno solo: la larghezza segue il contenuto, non uno
 * schema deciso altrove.
 *
 * **Vale dentro il modulo di prenotazione, non ovunque.** Spente le prenotazioni
 * online anche la barra di ricerca resta senza date, ma lì i controlli sono due
 * più il pulsante: applicarle la stessa colonna unica la impilerebbe, e questo
 * foglio arriva per ultimo, quindi vincerebbe su chi la disegna. La regola dice
 * dove vale, invece di essere corretta a valle da chi la subisce.
 */
.pms-booking .pms-bar[data-pms-dates="no"] .pms-bar__row {
	grid-template-columns: minmax(0, 1fr);
}

.pms-booking .pms-bar[data-pms-dates="no"] .pms-bar__control {
	width: 100%;
}

/* Le date eccedenti si aprono e si richiudono senza spostare il resto. */
.pms-slots__more {
	margin: var(--pms-space-3, 0.75rem) 0 0;
	text-align: center;
}

/*
 * **La riga dei comandi occupa tutta la larghezza, e ogni freccia sta dal
 * proprio lato.** Due pulsanti accostati al centro non dicono in che direzione
 * portano: «precedenti» a sinistra e «altri» a destra rendono la direzione una
 * proprietà della posizione, non solo del testo.
 *
 * Quando ce n'è uno solo non scivola dall'altra parte: `margin-left: auto` sul
 * successivo lo tiene a destra anche senza il fratello che lo spingerebbe.
 */
.pms-pager {
	display: flex;
	gap: var(--pms-space-2, 0.5rem);
	width: 100%;
	margin: var(--pms-space-3, 0.75rem) 0 0;

	/*
	 * L'elenco che la contiene è una griglia: senza questo la riga occuperebbe
	 * una cella sola e i due pulsanti si stringerebbero in un angolo, che è
	 * esattamente ciò che dovevano smettere di fare.
	 */
	grid-column: 1 / -1;
}

.pms-pager [data-pms-pager-prev],
.pms-pager [data-pms-pager-next] {
	flex: 1 1 0;
	min-width: 0;
}

.pms-pager [data-pms-pager-prev] { text-align: left; }

.pms-pager [data-pms-pager-next] {
	margin-left: auto;
	text-align: right;
}