/*
 * Colori, font e spazi vengono dal tema (le variabili --wp--preset--*): il plugin si adatta a
 * qualunque tema a blocchi. I valori dopo la virgola sono il ripiego per i temi che non le hanno.
 */

.zoelia-strutture,
.zoelia-cerca,
.zoelia-dati {
	box-sizing: border-box;
	--zoelia-fondo: var(--wp--preset--color--bianco, #FFFFFF);
	--zoelia-testo: var(--wp--preset--color--contrast, #3E3E3E);
	--zoelia-tenue: var(--wp--preset--color--accent-4, #6F6A63);
	--zoelia-accento: var(--wp--preset--color--accent-1, #3E3E3E);
	--zoelia-linea: rgba(62, 62, 62, 0.14);
	--zoelia-ombra: 0 1px 2px rgba(62, 62, 62, 0.05), 0 12px 32px rgba(62, 62, 62, 0.08);
	--zoelia-raggio: 14px;
}

/* Schede delle strutture */

.zoelia-strutture {
	display: grid;
	gap: var(--wp--preset--spacing--40, 30px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.zoelia-scheda {
	display: flex;
	flex-direction: column;
	background: var(--zoelia-fondo);
	border-radius: var(--zoelia-raggio);
	box-shadow: var(--zoelia-ombra);
	overflow: hidden;
}

.zoelia-scheda__foto {
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--wp--preset--color--accent-2, #E8DCCF), var(--wp--preset--color--accent-5, #F2EDE7));
	overflow: hidden;
}

.zoelia-scheda__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zoelia-scheda__segnaposto {
	font-size: 5rem;
	line-height: 1;
	color: var(--zoelia-accento);
	opacity: 0.45;
}

.zoelia-scheda__corpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem 1.5rem 1.4rem;
}

.zoelia-scheda__zona {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zoelia-tenue);
}

.zoelia-scheda__nome {
	margin: 0;
	font-size: 1.6rem;
}

.zoelia-scheda__nome a {
	color: inherit;
	text-decoration: none;
}

.zoelia-scheda__dati {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--zoelia-tenue);
}

.zoelia-scheda__piede {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--zoelia-linea);
}

.zoelia-cin {
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--zoelia-tenue);
}

.zoelia-scheda__azione {
	font-weight: 600;
	color: var(--zoelia-accento);
	text-decoration: none;
}

/* Ricerca per date */

.zoelia-cerca {
	padding: clamp(1rem, 3vw, 1.5rem);
	background: var(--zoelia-fondo);
	border-radius: var(--zoelia-raggio);
	box-shadow: var(--zoelia-ombra);
	color: var(--zoelia-testo);
}

.zoelia-cerca__campi {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	align-items: end;
}

.zoelia-cerca label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--zoelia-tenue);
}

.zoelia-cerca input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.8rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--zoelia-testo);
	background: #fff;
	border: 1px solid var(--zoelia-linea);
	border-radius: 8px;
}

.zoelia-cerca input:focus {
	outline: 2px solid var(--zoelia-accento);
	outline-offset: 1px;
}

.zoelia-cerca button[type="submit"] {
	min-height: 48px;
	width: 100%;
}

.zoelia-cerca__nota {
	margin: 0.8rem 0 0;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
}

.zoelia-cerca__stato {
	margin: 1rem 0 0;
}

.zoelia-cerca__stato--errore {
	color: #a12c1c;
}

.zoelia-risultati {
	display: grid;
	gap: 0.75rem;
	margin-top: 1rem;
}

.zoelia-risultato {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--zoelia-linea);
	border-radius: 10px;
}

.zoelia-risultato__nome {
	margin: 0;
	font-size: 1.3rem;
}

.zoelia-risultato__nome a {
	color: inherit;
	text-decoration: none;
}

.zoelia-risultato__dettaglio {
	margin: 0.15rem 0 0;
	font-size: 0.9rem;
	color: var(--zoelia-tenue);
}

.zoelia-risultato__prezzo {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.zoelia-risultato__totale {
	font-size: 1.5rem;
	font-weight: 600;
}

.zoelia-risultato__notti,
.zoelia-risultato__tassa {
	font-size: 0.8rem;
	color: var(--zoelia-tenue);
}

.zoelia-risultato__prenota:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

@media (max-width: 640px) {
	.zoelia-risultato {
		grid-template-columns: 1fr;
	}

	.zoelia-risultato__prezzo {
		align-items: flex-start;
		text-align: left;
	}
}

/* Dati di una struttura */

/*
 * Voci affiancate che vanno a capo intere: un CIN e' lungo diciotto caratteri, e in una griglia a
 * colonne fisse si spezzava a meta'. Niente margin qui: lo spazio sopra lo decide il tema.
 */
.zoelia-dati {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 2.5rem;
	margin-bottom: 0;
	padding: 1.1rem 1.4rem;
	background: var(--zoelia-fondo);
	border: 1px solid var(--zoelia-linea);
	border-radius: 10px;
}

.zoelia-dati dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zoelia-tenue);
}

.zoelia-dati dd {
	margin: 0.15rem 0 0;
	font-weight: 600;
	white-space: nowrap;
}

/* Elenco CIN nel pie' di pagina */

.zoelia-elenco-cin {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

.zoelia-elenco-cin span {
	display: block;
	font-size: 0.75rem;
	opacity: 0.7;
}

.zoelia-avviso {
	color: var(--wp--preset--color--accent-4, #6F6A63);
}

/* ------------------------------------------------------------------ */
/* Il calendario e la prenotazione                                     */
/* ------------------------------------------------------------------ */

.zoelia-prenota {
	box-sizing: border-box;
	--zoelia-fondo: var(--wp--preset--color--bianco, #FFFFFF);
	--zoelia-testo: var(--wp--preset--color--contrast, #3E3E3E);
	--zoelia-tenue: var(--wp--preset--color--accent-4, #6F6A63);
	--zoelia-accento: var(--wp--preset--color--accent-1, #3E3E3E);
	--zoelia-linea: rgba(62, 62, 62, 0.14);
	--zoelia-ombra: 0 1px 2px rgba(62, 62, 62, 0.05), 0 12px 32px rgba(62, 62, 62, 0.08);
	--zoelia-raggio: 14px;
	background: var(--zoelia-fondo);
	border-radius: var(--zoelia-raggio);
	box-shadow: var(--zoelia-ombra);
	padding: var(--wp--preset--spacing--40, 28px);
	display: grid;
	gap: 20px;
}

.zoelia-prenota__scelta,
.zoelia-prenota__nota {
	display: grid;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
}

.zoelia-prenota__dove,
.zoelia-prenota__campi input,
.zoelia-prenota__nota textarea {
	font: inherit;
	color: var(--zoelia-testo);
	padding: 10px 12px;
	border: 1px solid var(--zoelia-linea);
	border-radius: 10px;
	background: var(--zoelia-fondo);
	width: 100%;
}

.zoelia-prenota__attesa,
.zoelia-prenota__errore {
	color: var(--zoelia-tenue);
	margin: 0;
	padding: 24px 0;
	text-align: center;
}

.zoelia-prenota__errore {
	color: var(--zoelia-accento);
}

/*
 * hidden deve vincere sul display delle classi qui sopra.
 *
 * La regola predefinita del browser ([hidden] { display: none }) ha specificita' piu' bassa di
 * ".zoelia-prenota__dati { display: grid }", quindi il modulo restava a schermo anche con
 * l'attributo messo: si vedevano nome, email e telefono prima ancora di scegliere le date.
 */
.zoelia-prenota [hidden] {
	display: none;
}

/* La testa: mese e frecce */

.zoelia-cal__testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.zoelia-cal__titolo {
	font-size: 1.05rem;
	text-transform: lowercase;
}

.zoelia-cal__freccia {
	font: inherit;
	font-size: 1.4rem;
	line-height: 1;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--zoelia-linea);
	background: var(--zoelia-fondo);
	color: var(--zoelia-testo);
	cursor: pointer;
}

.zoelia-cal__freccia:hover:not(:disabled) {
	border-color: var(--zoelia-accento);
	color: var(--zoelia-accento);
}

.zoelia-cal__freccia:disabled {
	opacity: 0.3;
	cursor: default;
}

/* I mesi: due affiancati dove c'e' spazio, uno solo sul telefono */

.zoelia-cal__mesi {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.zoelia-cal__nome {
	font-size: 0.95rem;
	font-weight: 500;
	text-align: center;
	text-transform: lowercase;
	margin: 0 0 10px;
	color: var(--zoelia-tenue);
}

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

.zoelia-cal__giorno {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--zoelia-tenue);
	text-align: center;
	padding-bottom: 6px;
}

.zoelia-cal__vuota {
	aspect-ratio: 1 / 1.15;
}

/* Le notti */

.zoelia-cal__notte {
	aspect-ratio: 1 / 1.15;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font: inherit;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	color: var(--zoelia-testo);
	cursor: pointer;
	padding: 2px;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.zoelia-cal__numero {
	font-size: 0.9rem;
	line-height: 1;
}

.zoelia-cal__prezzo {
	font-size: 0.62rem;
	color: var(--zoelia-tenue);
	line-height: 1;
}

.zoelia-cal__notte:hover:not(:disabled) {
	border-color: var(--zoelia-accento);
}

.zoelia-cal__notte--occupata {
	color: rgba(62, 62, 62, 0.3);
	text-decoration: line-through;
	cursor: default;
}

/*
 * I giorni gia' passati non sono "venduti": sono passati. Barrarli come le notti occupate faceva
 * sembrare pienissimo un mese che era quasi tutto libero -- e a inizio mese la cosa peggiora.
 */
.zoelia-cal__notte--passata {
	color: rgba(62, 62, 62, 0.22);
	text-decoration: none;
	cursor: default;
}

.zoelia-cal__notte:disabled {
	cursor: default;
}

.zoelia-cal__notte--dentro {
	background: var(--wp--preset--color--accent-5, #F2EDE7);
	border-radius: 0;
}

.zoelia-cal__notte--arrivo,
.zoelia-cal__notte--partenza {
	background: var(--zoelia-accento);
	color: #fff;
}

.zoelia-cal__notte--arrivo .zoelia-cal__prezzo,
.zoelia-cal__notte--partenza .zoelia-cal__prezzo {
	color: rgba(255, 255, 255, 0.8);
}

.zoelia-cal__notte--arrivo {
	border-radius: 9px 0 0 9px;
}

.zoelia-cal__notte--partenza {
	border-radius: 0 9px 9px 0;
}

/* Legenda */

.zoelia-cal__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
	font-size: 0.72rem;
	color: var(--zoelia-tenue);
}

.zoelia-cal__voce {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.zoelia-cal__punto {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	display: inline-block;
}

.zoelia-cal__punto--libera {
	border: 1px solid var(--zoelia-linea);
}

.zoelia-cal__punto--occupata {
	background: rgba(62, 62, 62, 0.18);
}

.zoelia-cal__punto--scelta {
	background: var(--zoelia-accento);
}

/* Il conto */

.zoelia-prenota__conto {
	border-top: 1px solid var(--zoelia-linea);
	padding-top: 16px;
	display: grid;
	gap: 6px;
}

.zoelia-conto__righe {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.9rem;
}

.zoelia-conto__notti {
	color: var(--zoelia-tenue);
}

.zoelia-conto__totale {
	font-size: 1.6rem;
	margin: 0;
}

/* Il conto in chiaro: una riga per voce, e la tassa che nel totale non c'è */

.zoelia-conto__dettaglio {
	display: grid;
	gap: 4px;
	margin: 4px 0 2px;
}

.zoelia-conto__riga {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 0.92rem;
}

.zoelia-conto__voce {
	color: var(--zoelia-tenue);
}

.zoelia-conto__cifra {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.zoelia-conto__riga--totale {
	border-top: 1px solid var(--zoelia-linea);
	margin-top: 6px;
	padding-top: 8px;
	font-size: 1.25rem;
}

.zoelia-conto__riga--totale .zoelia-conto__voce {
	color: inherit;
}

.zoelia-conto__riga--totale .zoelia-conto__cifra {
	font-weight: 600;
}

/*
 * La tassa di soggiorno.
 *
 * Riquadrata e non in corpo minore in fondo: e' l'unica cifra della pagina che NON e' compresa
 * nel totale, e se si legge come una postilla ha fallito il suo unico scopo. Niente rosso ne'
 * punti esclamativi -- non e' un allarme, e' un'informazione che deve arrivare.
 */
.zoelia-conto__tassa {
	display: grid;
	gap: 2px;
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid var(--zoelia-linea);
	border-radius: 10px;
	background: var(--zoelia-velo, rgba(0, 0, 0, 0.02));
	font-size: 0.82rem;
	line-height: 1.45;
}

.zoelia-conto__tassa strong {
	font-size: 0.92rem;
}

.zoelia-conto__tassa span {
	color: var(--zoelia-tenue);
}

.zoelia-conto__attesa {
	margin: 0;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
}

.zoelia-casa__spese,
.zoelia-casa__tassa {
	margin: 0;
	font-size: 0.8rem;
	color: var(--zoelia-tenue);
}

.zoelia-conto__nota,
.zoelia-conto__avviso {
	margin: 0;
	font-size: 0.78rem;
	color: var(--zoelia-tenue);
}

.zoelia-conto__avviso {
	color: var(--zoelia-accento);
}

/* I dati di chi prenota */

.zoelia-prenota__dati {
	display: grid;
	gap: 14px;
	border-top: 1px solid var(--zoelia-linea);
	padding-top: 16px;
}

.zoelia-prenota__campi {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.zoelia-prenota__campi label {
	display: grid;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
}

.zoelia-prenota__esito {
	margin: 0;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
}

.zoelia-prenota__esito--errore {
	color: var(--zoelia-accento);
}

/* ------------------------------------------------------------------ */
/* Il percorso a passi: quando, dove, chi                              */
/* ------------------------------------------------------------------ */

.zoelia-wizard {
	box-sizing: border-box;
	--zoelia-fondo: var(--wp--preset--color--bianco, #FFFFFF);
	--zoelia-testo: var(--wp--preset--color--contrast, #3E3E3E);
	--zoelia-tenue: var(--wp--preset--color--accent-4, #6F6A63);
	--zoelia-accento: var(--wp--preset--color--accent-1, #3E3E3E);
	--zoelia-linea: rgba(62, 62, 62, 0.14);
	--zoelia-ombra: 0 1px 2px rgba(62, 62, 62, 0.05), 0 12px 32px rgba(62, 62, 62, 0.08);
	--zoelia-raggio: 14px;
	background: var(--zoelia-fondo);
	border-radius: var(--zoelia-raggio);
	box-shadow: var(--zoelia-ombra);
	padding: var(--wp--preset--spacing--40, 28px);
	display: grid;
	gap: 20px;
}

.zoelia-wizard [hidden] {
	display: none;
}

/* Cambiando passo il fuoco va alla zona nuova (vedi passo() in zoelia-calendario.js): e' un
   punto di partenza per il Tab, non un campo, e un contorno intorno alla zona non direbbe niente. */
.zoelia-wizard > section:focus {
	outline: none;
}

/* I tre passi in cima */

.zoelia-passi {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.78rem;
	counter-reset: passo;
}

.zoelia-passi__passo {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--zoelia-tenue);
	padding-right: 8px;
	counter-increment: passo;
}

.zoelia-passi__passo::before {
	content: counter(passo);
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--zoelia-linea);
	font-size: 0.7rem;
}

.zoelia-passi__passo--qui {
	color: var(--zoelia-testo);
}

.zoelia-passi__passo--qui::before {
	background: var(--zoelia-accento);
	border-color: var(--zoelia-accento);
	color: #fff;
}

.zoelia-passi__passo--fatto::before {
	content: '✓';
	border-color: var(--zoelia-accento);
	color: var(--zoelia-accento);
}

/* Il primo passo */

.zoelia-wizard__sotto {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 14px;
	border-top: 1px solid var(--zoelia-linea);
	padding-top: 16px;
}

.zoelia-wizard__ospiti {
	display: grid;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
}

.zoelia-wizard__ospiti input {
	font: inherit;
	color: var(--zoelia-testo);
	padding: 10px 12px;
	border: 1px solid var(--zoelia-linea);
	border-radius: 10px;
	width: 90px;
}

.zoelia-wizard__scelto {
	margin: 0;
	flex: 1 1 200px;
	font-size: 0.9rem;
	color: var(--zoelia-tenue);
}

.zoelia-wizard__avanti:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Il secondo passo: le case libere */

.zoelia-wizard__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.zoelia-wizard__date,
.zoelia-wizard__casa {
	margin: 0;
	font-size: 0.95rem;
}

.zoelia-wizard__casa {
	font-size: 1.2rem;
}

.zoelia-wizard__cambia,
.zoelia-casa__vedi {
	font: inherit;
	font-size: 0.85rem;
	background: none;
	border: none;
	padding: 0;
	color: var(--zoelia-accento);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.zoelia-wizard__niente {
	margin: 0;
	color: var(--zoelia-tenue);
}

.zoelia-case {
	display: grid;
	gap: 16px;
}

.zoelia-casa {
	display: grid;
	grid-template-columns: minmax(0, 200px) 1fr;
	gap: 18px;
	align-items: start;
	border: 1px solid var(--zoelia-linea);
	border-radius: var(--zoelia-raggio);
	padding: 14px;
}

.zoelia-casa:has(> .zoelia-casa__corpo:only-child) {
	grid-template-columns: 1fr;
}

.zoelia-casa__foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}

.zoelia-casa__corpo {
	display: grid;
	gap: 6px;
}

.zoelia-casa__nome {
	font-size: 1.15rem;
	margin: 0;
}

.zoelia-casa__camera {
	margin: 0;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
}

.zoelia-casa__prezzo {
	margin: 0;
	font-size: 1rem;
}

.zoelia-casa__azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 6px;
}

.zoelia-casa__pagina {
	font-size: 0.85rem;
}

.zoelia-casa__calendario {
	margin-top: 12px;
	border-top: 1px solid var(--zoelia-linea);
	padding-top: 12px;
	display: grid;
	gap: 12px;
	justify-items: start;
}

/* Il terzo passo */

.zoelia-wizard__riepilogo {
	display: grid;
	gap: 4px;
	justify-items: start;
	border-bottom: 1px solid var(--zoelia-linea);
	padding-bottom: 16px;
}

@media (max-width: 600px) {
	.zoelia-casa {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Il carosello delle foto                                             */
/* ------------------------------------------------------------------ */

.zoelia-carosello {
	position: relative;
	--zoelia-carosello-raggio: 14px;
}

/*
 * La galleria diventa una riga che scorre. A far scorrere e' il browser: scroll-snap ferma ogni
 * foto al bordo, e sul telefono il dito fa quello che ci si aspetta senza una riga di JavaScript.
 */
.wp-block-gallery.is-style-zoelia-carosello {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	border-radius: var(--zoelia-carosello-raggio);
	/* La barra di scorrimento si nasconde: ci sono frecce e pallini, e una barra grigia sotto le
	   foto le fa sembrare un allegato invece che una galleria. */
	scrollbar-width: none;
}

.wp-block-gallery.is-style-zoelia-carosello::-webkit-scrollbar {
	display: none;
}

.wp-block-gallery.is-style-zoelia-carosello .wp-block-image {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

.wp-block-gallery.is-style-zoelia-carosello .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	border-radius: var(--zoelia-carosello-raggio);
}

.zoelia-carosello__freccia {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.92);
	color: #1e2521;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(62, 62, 62, 0.18);
	display: grid;
	place-items: center;
	transition: opacity 0.15s ease;
}

.zoelia-carosello__freccia--prima {
	left: 12px;
}

.zoelia-carosello__freccia--dopo {
	right: 12px;
}

.zoelia-carosello__freccia:disabled {
	opacity: 0;
	pointer-events: none;
}

.zoelia-carosello__pallini {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 7px;
	/* Su una galleria da quaranta foto i pallini diventerebbero una riga lunga quanto la pagina:
	   oltre una certa quantita' resta il contatore, che dice la stessa cosa in due caratteri. */
	max-width: 70%;
	overflow: hidden;
}

.zoelia-carosello__pallino {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
}

.zoelia-carosello__pallino--qui {
	background: #fff;
	transform: scale(1.35);
}

.zoelia-carosello__contatore {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(62, 62, 62, 0.55);
	color: #fff;
	font-size: 0.72rem;
	padding: 4px 9px;
	border-radius: 999px;
}

@media (max-width: 600px) {
	.zoelia-carosello__freccia {
		width: 38px;
		height: 38px;
		font-size: 1.3rem;
	}
}

/* ------------------------------------------------------------------ */
/* La barra in basso, e il foglio che si apre                          */
/* ------------------------------------------------------------------ */

.zoelia-barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	/*
	 * Al centro, non ai due bordi. Su uno schermo largo il nome della casa finiva a sinistra e il
	 * pulsante a destra, a mezzo metro di distanza: due cose che parlano della stessa prenotazione
	 * e sembrano non riguardarsi. Insieme, in mezzo, si leggono come una frase sola.
	 */
	justify-content: center;
	gap: 16px 28px;
	padding: 12px clamp(16px, 4vw, 28px);
	/* Lo spazio della barra di sistema su iPhone: senza, il pulsante finisce sotto la tacca. */
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--wp--preset--color--bianco, #FFFFFF);
	border-top: 1px solid rgba(62, 62, 62, 0.12);
	box-shadow: 0 -2px 24px rgba(62, 62, 62, 0.10);
	/*
	 * I DUE !important non sono pigrizia.
	 *
	 * I temi a blocchi danno ai figli diretti del contenuto una larghezza massima e i margini
	 * automatici (la "constrained layout"): la barra, che sta dentro il contenuto, restava larga
	 * quanto la colonna del testo e centrata -- fissa in basso ma larga 776 px su uno schermo da
	 * 1280, con il velo del foglio che copriva solo la striscia centrale. La regola del tema ha
	 * specificita' maggiore della nostra e cambia da tema a tema: qui l'unica difesa che vale su
	 * tutti e' questa.
	 */
	max-width: none !important;
	margin: 0 !important;
}

.zoelia-barra__testo {
	display: grid;
	gap: 2px;
	min-width: 0;
	line-height: 1.3;
	text-align: right;
}

@media (max-width: 600px) {
	/* Sul telefono lo spazio e' quello che e': testo a sinistra, pulsante a destra. */
	.zoelia-barra {
		justify-content: space-between;
	}

	.zoelia-barra__testo {
		text-align: left;
	}
}

.zoelia-barra__testo strong {
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast, #3E3E3E);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zoelia-barra__testo span {
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent-4, #6F6A63);
}

.zoelia-barra__apri {
	flex: 0 0 auto;
	white-space: nowrap;
}

/*
 * Col menu a panino aperto la barra si toglie. Il menu di WordPress sta dentro l'intestazione, che
 * ha z-index 10 e quindi un livello tutto suo: il suo 100000 vale solo li' dentro, e la barra (90)
 * gli restava sopra, in fondo allo schermo -- con "Prenota" che apriva il foglio sopra il menu.
 * has-modal-open e' la classe che WordPress mette su <html> finche' il menu e' aperto.
 */
html.has-modal-open .zoelia-barra {
	display: none;
}

/* Il foglio */

.zoelia-foglio {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* Come sopra: senza, il velo copre solo la colonna del testo. */
	max-width: none !important;
	margin: 0 !important;
}

.zoelia-foglio[hidden] {
	display: none;
}

.zoelia-foglio__velo {
	position: absolute;
	inset: 0;
	background: rgba(62, 62, 62, 0.45);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.zoelia-foglio--aperto .zoelia-foglio__velo {
	opacity: 1;
}

.zoelia-foglio__dentro {
	/* Il margine ai lati: serve anche alla fascia della X, che se lo mangia per arrivare ai bordi. */
	--zoelia-foglio-lato: clamp(16px, 3vw, 26px);
	position: relative;
	/*
	 * 920px di calendario piu' i due margini: con border-box (sotto) il padding sta dentro la
	 * larghezza, e senza sommarlo qui il foglio sul computer sarebbe diventato 52px piu' stretto
	 * di com'era. Sotto quella misura il foglio e' largo quanto lo schermo, come prima.
	 */
	width: min(calc(920px + 2 * var(--zoelia-foglio-lato)), 100%);
	/*
	 * IL FOGLIO NON DEVE MAI ESSERE PIU' ALTO DELLO SCHERMO. E' allineato in basso, quindi quello
	 * che avanza esce dall'alto -- dove c'e' la X, e dove non si puo' scorrere per andarla a
	 * prendere. Sul telefono succedeva, per due motivi che si sommavano:
	 * - senza border-box il padding (allora 52px sopra, 26 sotto) si aggiungeva a max-height;
	 * - su Chrome Android vh e' l'altezza con la barra dell'indirizzo NASCOSTA. Con la barra in
	 *   vista la cima del foglio finiva 70px sopra lo schermo: X irraggiungibile, foglio che non
	 *   si chiudeva piu'.
	 * svh e' l'altezza con la barra in vista; vh resta per i browser che svh non lo conoscono.
	 */
	box-sizing: border-box;
	max-height: 92vh;
	max-height: 92svh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Arrivato in cima o in fondo al foglio, il dito non passa alla pagina sotto: niente
	   scorrimento dietro al velo, e niente "tira giu' per ricaricare" di Chrome col foglio aperto. */
	overscroll-behavior: contain;
	background: var(--wp--preset--color--bianco, #FFFFFF);
	border-radius: 18px 18px 0 0;
	/* Sopra niente di piu': lo spazio fra il bordo e la freccia del mese lo tiene la fascia della X
	   (10 + 38 + 4, gli stessi 52px di prima). */
	padding: 10px var(--zoelia-foglio-lato) calc(26px + env(safe-area-inset-bottom, 0px));
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.22s ease, opacity 0.22s ease;
}

/* All'apertura il fuoco va al foglio stesso (vedi zoelia-calendario.js): e' una cornice, non un
   campo, e un contorno intorno a tutto il foglio non direbbe niente. */
.zoelia-foglio__dentro:focus {
	outline: none;
}

.zoelia-foglio--aperto .zoelia-foglio__dentro {
	transform: translateY(0);
	opacity: 1;
}

/* Dentro il foglio il calendario non ha bisogno della sua cornice: la cornice è il foglio. */
.zoelia-foglio .zoelia-prenota {
	box-shadow: none;
	padding: 0;
	border-radius: 0;
}

/*
 * LA X RESTA SEMPRE IN VISTA, su una fascia bianca appiccicata alla cima del foglio mentre il
 * calendario le scorre sotto. Era in position: absolute dentro la parte che scorre, e scorrendo i
 * mesi se ne andava con loro: per chiudere bisognava tornare su, e sul telefono nessuno ci pensa.
 *
 * La fascia e non la X da sola. Appiccicata da sola, la X restava ferma sopra la colonna della
 * domenica: i giorni le passavano sotto, uno finiva coperto per intero e toccandolo si chiudeva il
 * foglio invece di sceglierlo. La fascia e' larga quanto il foglio e piena, quindi i giorni ci
 * spariscono sotto tutti insieme, e un tocco li' non trova una data nascosta.
 *
 * I margini negativi si mangiano il padding del foglio, sopra e ai lati, e la fascia arriva ai
 * bordi. top: -10px perche' lo sticky si conta dal bordo interno di quel padding (misurato): a 0
 * sopra la fascia restava una striscia di 10px da cui si vedevano passare i giorni.
 */
.zoelia-foglio__testa {
	position: sticky;
	top: -10px;
	z-index: 3;
	display: flex;
	justify-content: flex-end;
	margin: -10px calc(-1 * var(--zoelia-foglio-lato)) 0;
	padding: 10px 12px 4px;
	background: var(--wp--preset--color--bianco, #FFFFFF);
}

.zoelia-foglio__chiudi {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: rgba(62, 62, 62, 0.06);
	color: var(--wp--preset--color--contrast, #3E3E3E);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* Mentre il foglio è aperto la pagina sotto non scorre: su telefono, senza questo, si trascina
   la pagina invece del calendario. */
body.zoelia-foglio-aperto {
	overflow: hidden;
}

/* Su schermo largo il foglio sta al centro e non incollato in basso. */
@media (min-width: 782px) {
	.zoelia-foglio {
		align-items: center;
	}

	.zoelia-foglio__dentro {
		border-radius: 18px;
		max-height: 88vh;
		max-height: 88svh;
	}
}

/* La barra copre il piè di pagina: gli si lascia il posto sotto. */
body:has(.zoelia-barra) {
	padding-bottom: 86px;
}

/* ------------------------------------------------------------------ */
/* Il riquadro compatto: "quando vuoi venire?"                         */
/* ------------------------------------------------------------------ */

.zoelia-avvio {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	padding: 20px clamp(18px, 3vw, 26px);
	background: var(--wp--preset--color--bianco, #FFFFFF);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(62, 62, 62, 0.05), 0 12px 32px rgba(62, 62, 62, 0.08);
}

.zoelia-avvio__testo {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.zoelia-avvio__testo strong {
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast, #3E3E3E);
}

.zoelia-avvio__testo span {
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-4, #6F6A63);
}

.zoelia-avvio__apri {
	flex: 0 0 auto;
}

/* Dentro il foglio il percorso non ha bisogno della sua cornice: la cornice è il foglio. */
.zoelia-foglio .zoelia-wizard {
	box-shadow: none;
	padding: 0;
	border-radius: 0;
}

@media (max-width: 600px) {
	.zoelia-avvio {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
	}

	.zoelia-avvio__apri {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* La pagina di pagamento                                              */
/* ------------------------------------------------------------------ */

.zoelia-pagamento {
	--zoelia-accento: var(--wp--preset--color--accent-1, #3E3E3E);
	--zoelia-linea: rgba(0, 0, 0, 0.12);
	--zoelia-tenue: rgba(0, 0, 0, 0.6);
	max-width: 420px;
	margin: 0 auto;
	display: grid;
	gap: 18px;
}

.zoelia-pagamento__scheda {
	display: grid;
	gap: 6px;
	padding: 18px;
	border: 1px solid var(--zoelia-linea);
	border-radius: 14px;
}

.zoelia-pagamento__struttura {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
}

.zoelia-pagamento__causale {
	margin: 0;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
}

/*
 * Fino a quando le date restano sue.
 *
 * Un riquadro tenue e non un allarme rosso: e' un'informazione utile, non un guasto. Diventa
 * rosso solo quando il tempo e' davvero finito, che e' l'unico momento in cui l'ospite deve
 * smettere di provare a pagare e scriverci.
 */
.zoelia-pagamento__scadenza {
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--zoelia-accento, #0f2a55) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--zoelia-accento, #0f2a55) 18%, transparent);
	font-size: 0.9rem;
	line-height: 1.5;
}

.zoelia-pagamento__scadenza strong {
	font-weight: 600;
}

.zoelia-pagamento__scadenza--finita {
	background: color-mix(in srgb, #b4231f 8%, transparent);
	border-color: color-mix(in srgb, #b4231f 28%, transparent);
	color: #8d1a17;
}

.zoelia-pagamento__metodi {
	display: grid;
	gap: 12px;
}

.zoelia-pagamento__titolo {
	margin: 0;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
}

.zoelia-pagamento__paga {
	width: 100%;
	text-align: center;
}

/* Il metodo a sinistra, quanto costa a destra: la differenza fra carta e bonifico si legge
   scorrendo la colonna, senza aprire niente. */
.zoelia-pagamento__metodo {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	text-align: left;
}

.zoelia-pagamento__metodo-cifra {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.zoelia-pagamento__conquesto {
	margin: 0;
	font-size: 0.85rem;
	text-align: center;
}

.zoelia-pagamento__conquesto span {
	color: var(--zoelia-tenue);
}

.zoelia-pagamento__indietro {
	justify-self: start;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.85rem;
	color: var(--zoelia-tenue);
	text-decoration: underline;
	cursor: pointer;
}

.zoelia-pagamento__carta {
	min-height: 40px;
}

.zoelia-pagamento__attesa,
.zoelia-pagamento__sicuro,
.zoelia-pagamento__spento {
	margin: 0;
	font-size: 0.82rem;
	color: var(--zoelia-tenue);
	text-align: center;
}

.zoelia-pagamento__errore {
	margin: 0;
	font-size: 0.85rem;
	color: var(--zoelia-accento);
}

.zoelia-pagamento__fatto {
	display: grid;
	gap: 6px;
	padding: 18px;
	border: 1px solid var(--zoelia-linea);
	border-radius: 14px;
	text-align: center;
}

@media (prefers-color-scheme: dark) {
	.zoelia-pagamento {
		--zoelia-linea: rgba(255, 255, 255, 0.18);
		--zoelia-tenue: rgba(255, 255, 255, 0.65);
	}
}

/* ------------------------------------------------------------------ */
/* La mappa delle case                                                 */
/* ------------------------------------------------------------------ */

.zoelia-mappa {
	--zoelia-accento: var(--wp--preset--color--accent-1, #C9A7A0);
	--zoelia-inchiostro: var(--wp--preset--color--contrast, #3E3E3E);
	--zoelia-linea: rgba(0, 0, 0, 0.12);
	--zoelia-tenue: rgba(0, 0, 0, 0.6);
	--zoelia-mappa-altezza: 420px;
	display: grid;
	gap: 16px;
}

/*
 * La tela ha un'altezza dichiarata PRIMA che la mappa si accenda: Leaflet misura il contenitore
 * al momento di disegnare, e su un div alto zero disegna una mappa alta zero. E' anche quello
 * che tiene ferma la pagina mentre si scorre, invece di farla saltare quando la mappa compare.
 */
.zoelia-mappa__tela {
	height: var(--zoelia-mappa-altezza);
	border-radius: 14px;
	border: 1px solid var(--zoelia-linea);
	background: var(--wp--preset--color--sabbia, #F2EDE7);
	overflow: hidden;
	z-index: 0; /* sotto alla barra di prenotazione, che e' fissa in basso */
}

/* Il carattere del sito anche dentro la mappa: i fumetti di Leaflet nascono col loro. */
.zoelia-mappa .leaflet-container {
	font-family: inherit;
	font-size: 0.9rem;
	background: var(--wp--preset--color--sabbia, #F2EDE7);
}

/* Il segno: un cerchio con la sua punta, disegnato invece che scaricato. */
.zoelia-mappa__segno {
	position: relative;
}

.zoelia-mappa__segno-testa {
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--zoelia-accento);
	border: 3px solid #FFF;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

.zoelia-mappa__segno-punta {
	position: absolute;
	top: 22px;
	left: 9px;
	width: 8px;
	height: 8px;
	background: var(--zoelia-accento);
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	transform: rotate(45deg);
}

/* Il fumetto */
.zoelia-mappa .leaflet-popup-content-wrapper {
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}

/*
 * Il fumetto con la foto dentro: l'immagine tocca i bordi, il testo no.
 *
 * NIENTE "width: auto" qui: la larghezza gliela calcola Leaflet dai suoi minWidth/maxWidth e la
 * scrive sull'elemento. Sovrascrivendola, il riquadro si stringeva sul testo -- centoquarantuno
 * pixel -- e la foto diventava un francobollo.
 */
.zoelia-mappa .leaflet-popup-content {
	margin: 0;
	line-height: 1.45;
}

.zoelia-mappa .leaflet-popup-content-wrapper {
	padding: 0;
	overflow: hidden;
}

.zoelia-mappa__fumetto {
	display: grid;
	gap: 2px;
	padding: 12px 14px;
}

/* La foto sopra il testo: sporge fuori dal riquadro di testo e torna a filo del fumetto. */
.zoelia-mappa__fumetto .zoelia-mappa__foto {
	margin: -12px -14px 10px;
}

.zoelia-mappa__foto {
	position: relative;
	/* Sedici noni e non quattro terzi: il fumetto deve stare dentro l'altezza della mappa, e
	   cinquanta pixel in meno sono la differenza fra una foto intera e una tagliata dal bordo. */
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--sabbia, #F2EDE7);
	overflow: hidden;
}

.zoelia-mappa__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zoelia-mappa__freccia {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	color: #3E3E3E;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.zoelia-mappa__freccia:hover,
.zoelia-mappa__freccia:focus-visible {
	background: #FFF;
}

.zoelia-mappa__freccia--indietro { left: 8px; }
.zoelia-mappa__freccia--avanti { right: 8px; }

.zoelia-mappa__pallini {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.zoelia-mappa__pallino-foto {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

.zoelia-mappa__pallino-foto--qui {
	background: #FFF;
	/* Un filo piu' larga, non piu' grande: l'altezza che cambia farebbe ballare la fila. */
	width: 14px;
	border-radius: 3px;
}

.zoelia-mappa__fumetto strong {
	font-size: 1rem;
}

.zoelia-mappa__fumetto > span {
	color: var(--zoelia-tenue);
	font-size: 0.82rem;
}

.zoelia-mappa__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 8px;
	font-size: 0.85rem;
}

/*
 * L'elenco sotto la mappa. Non e' un doppione: e' cio' che leggono chi naviga da tastiera, chi
 * usa un lettore di schermo e chi ha il JavaScript spento, e l'unica parte che Google indicizza.
 */
.zoelia-mappa__elenco {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.zoelia-mappa__elenco li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.95rem;
}

/*
 * Il pallino. Nasce come semplice segno e il JavaScript lo trasforma in un pulsante quando la
 * mappa c'e': allora prende l'area da toccare che serve a un dito, senza cambiare aspetto.
 */
.zoelia-mappa__pallino {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--zoelia-accento);
	padding: 0;
	border: 0;
}

button.zoelia-mappa__pallino {
	cursor: pointer;
	/* Il bersaglio e' grande 24px, il pallino resta di 11: l'area in piu' e' trasparente. */
	box-sizing: content-box;
	padding: 7px;
	margin: 0 -7px;
	background-clip: content-box;
}

button.zoelia-mappa__pallino:hover,
button.zoelia-mappa__pallino:focus-visible {
	background-color: var(--zoelia-inchiostro);
}

button.zoelia-mappa__pallino:focus-visible {
	outline: 2px solid var(--zoelia-inchiostro);
	outline-offset: 2px;
	border-radius: 50%;
}

.zoelia-mappa__indirizzo {
	display: block;
	color: var(--zoelia-tenue);
	font-size: 0.82rem;
}

@media (prefers-color-scheme: dark) {
	.zoelia-mappa {
		--zoelia-linea: rgba(255, 255, 255, 0.18);
		--zoelia-tenue: rgba(255, 255, 255, 0.65);
	}
}