/**
 * TWC Prenotazioni — modulo e sezione account.
 *
 * Stessa palette dell'area account: fondo beige, filo nero sottile,
 * arancione per l'orario scelto e le azioni principali. Con TWC Account
 * installato i colori scelti in Personalizzazione sostituiscono questi.
 *
 * Mobile first: si prenota soprattutto dal telefono.
 */

/* Ripiego a specificita' zero: un tema che definisce le stesse
   variabili su :root vince. Vedi la nota in twc-account.css. */
:where(:root) {
	--twc-accent: #e07a2f;
	--twc-accent-soft: rgba( 224, 122, 47, 0.16 );
	--twc-accent-glow: rgba( 224, 122, 47, 0.45 );
	--twc-bg: #f2ece1;
	--twc-surface: #fbf8f2;
	--twc-surface-alt: #f6f1e7;
	--twc-ink: #14110e;
	--twc-muted: rgba( 20, 17, 14, 0.62 );
	--twc-line: rgba( 20, 17, 14, 0.88 );
	--twc-line-soft: rgba( 20, 17, 14, 0.14 );
	--twc-danger: #a02c22;
	--twc-ok: #2f6b46;
	--twc-radius: 10px;
	--twc-radius-sm: 7px;
	--twc-tap: 44px;
}

/*
 * Il colore del testo e la larghezza vanno sul riquadro del modulo, mai
 * su :root. :root e' il documento intero: da li' si restringeva tutta
 * la pagina del sito - intestazione, titolo, piede - dentro una colonna
 * da 720 pixel, e si ridipingeva il testo di ogni pagina.
 */
.twc-prenotazioni {
	color: var( --twc-ink );
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.twc-prenotazioni *,
.twc-prenotazioni *::before,
.twc-prenotazioni *::after {
	box-sizing: border-box;
}

/*
 * La fascia a tutta pagina.
 *
 * Il modulo esce dalla colonna del tema e si porta il proprio sfondo:
 * sopra la fotografia di sfondo di un tema da ristorante, i campi di un
 * modulo non si leggono. Il modulo in se' resta stretto - un campo
 * "nome" largo due metri non lo vuole nessuno - ma la fascia dietro
 * arriva ai bordi.
 *
 * I margini esatti li mette il JavaScript; questo e' il ripiego che
 * funziona anche senza.
 *
 * Due classi e non una: un tema che dice ".twc-prenotazioni { max-width:
 * 100% }" (TWT Base fino alla 0.5) avrebbe la stessa forza e vincerebbe,
 * e la fascia resterebbe larga quanto la colonna ma spostata a sinistra.
 */
.twc-prenotazioni.twc-prenotazioni--pieno {
	margin-left: var( --twc-pren-fuga-sx, calc( 50% - 50vw ) );
	margin-right: var( --twc-pren-fuga-dx, calc( 50% - 50vw ) );
	max-width: none;
	background: var( --twc-bg );
}

.twc-pren__dentro {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp( 1rem, 3vw, 2.5rem ) clamp( 0.9rem, 2vw, 2rem );
}

/* Senza la fascia, il modulo resta una colonna leggibile dov'e'. */
.twc-prenotazioni:not( .twc-prenotazioni--pieno ) .twc-pren__dentro {
	padding-left: 0;
	padding-right: 0;
}

/* Dentro l'area account il contenitore c'e' gia'. */
.twc-pren--account {
	max-width: none;
}

.twc-pren--account .twc-pren__dentro {
	max-width: none;
	padding: 0;
}

.twc-pren__intro {
	margin: 0 0 1rem;
	color: var( --twc-muted );
}

.twc-pren__form {
	display: grid;
	gap: 1rem;
	margin: 0;
}

.twc-pren__box {
	margin: 0;
	padding: 1.1rem;
	background: var( --twc-bg );
	border: 1px solid var( --twc-line );
	border-radius: var( --twc-radius );
	min-width: 0;
}

/*
 * Il titolo del gruppo deve stare DENTRO il riquadro.
 *
 * Di suo un <legend> si appoggia sulla riga del bordo: il browser
 * interrompe il bordo e ci infila il testo, che resta cosi' per meta'
 * sopra lo sfondo del riquadro e per meta' sopra quello della pagina. Su
 * un fondo tinta unita non si nota; su una fotografia - il caso di quasi
 * tutti i siti di ristorazione - il testo sembra tagliato a meta'.
 *
 * float + width 100% e' il modo per togliere il legend da quella
 * posizione speciale e farlo scorrere come un normale blocco: display
 * da solo non basta, perche' il buco nel bordo lo disegna comunque il
 * browser.
 */
.twc-pren__box legend {
	float: left;
	width: 100%;
	margin: 0 0 0.85rem;
	padding: 0;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
}

/* Con il legend flottante, quello che segue va rimesso sotto. */
.twc-pren__box legend ~ * {
	clear: both;
}

.twc-pren__riga {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

.twc-pren__campo {
	display: grid;
	/* La colonna non cresce oltre il riquadro: senza minmax( 0, ... )
	   un campo allargato a mano allarga anche il contenitore, e il
	   modulo esce dai suoi bordi. */
	grid-template-columns: minmax( 0, 1fr );
	gap: 0.3rem;
	margin: 0 0 0.75rem;
	font-size: 0.92rem;
	font-weight: 600;
}

.twc-pren__campo input,
.twc-pren__campo select,
.twc-pren__campo textarea {
	width: 100%;
	min-height: var( --twc-tap );
	padding: 0.55rem 0.7rem;
	font: inherit;
	font-size: 16px; /* niente zoom automatico su iPhone */
	font-weight: 400;
	color: var( --twc-ink );
	background: var( --twc-surface );
	border: 1px solid var( --twc-line );
	border-radius: var( --twc-radius-sm );
}

.twc-pren__campo input:focus,
.twc-pren__campo select:focus,
.twc-pren__campo textarea:focus {
	outline: none;
	border-color: var( --twc-accent );
	box-shadow: 0 0 0 3px var( --twc-accent-soft );
}

/*
 * L'angolino in basso a destra allarga il campo solo verso il basso,
 * mai di lato: trascinandolo di lato il riquadro delle note usciva dal
 * modulo e finiva sopra alla pagina. In altezza cresce quanto serve -
 * il riquadro cresce con lui - ma fino a mezzo schermo, oltre non si
 * vedrebbe piu' ne' quello che si scrive ne' il pulsante.
 */
.twc-pren__campo textarea {
	max-width: 100%;
	min-height: 5.5rem;
	max-height: 60vh;
	max-height: 60svh;
	resize: vertical;
}

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

.twc-pren__servizio + .twc-pren__servizio {
	margin-top: 1rem;
}

.twc-pren__servizio-nome {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --twc-muted );
}

.twc-pren__griglia {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 78px, 1fr ) );
	gap: 0.5rem;
}

.twc-pren__ora {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

.twc-pren__ora input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.twc-pren__ora span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var( --twc-tap );
	padding: 0.4rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	background: var( --twc-surface );
	border: 1px solid var( --twc-line );
	border-radius: var( --twc-radius-sm );
	transition: box-shadow 0.15s ease, background 0.15s ease;
}

.twc-pren__ora input:focus-visible + span {
	outline: 2px solid var( --twc-ink );
	outline-offset: 2px;
}

.twc-pren__ora input:checked + span {
	background: var( --twc-accent );
	border-color: var( --twc-accent );
	color: #fff;
	box-shadow: 0 6px 16px -6px var( --twc-accent-glow );
}

.twc-pren__ora.is-pieno {
	cursor: not-allowed;
}

.twc-pren__ora.is-pieno span {
	color: var( --twc-muted );
	background: transparent;
	border-style: dashed;
	border-color: var( --twc-line-soft );
	text-decoration: line-through;
}

/* Consenso, esca, pulsanti --------------------------------------- */

.twc-pren__consenso {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0.25rem 0 1rem;
	font-size: 0.9rem;
}

.twc-pren__consenso input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var( --twc-accent );
}

.twc-pren__consenso a {
	color: var( --twc-ink );
	text-decoration: underline;
}

.twc-pren__esca {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.twc-pren__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	min-height: var( --twc-tap );
	padding: 0.7rem 1.4rem;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var( --twc-accent );
	border: 1px solid var( --twc-accent );
	border-radius: var( --twc-radius-sm );
	cursor: pointer;
	text-decoration: none;
	list-style: none;
}

.twc-pren__btn::-webkit-details-marker {
	display: none;
}

.twc-pren__btn:hover,
.twc-pren__btn:focus-visible {
	filter: brightness( 0.93 );
	color: #fff;
}

.twc-pren__btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.twc-pren__btn--secondario {
	color: var( --twc-ink );
	background: var( --twc-surface );
	border-color: var( --twc-line );
}

.twc-pren__btn--secondario:hover,
.twc-pren__btn--secondario:focus-visible {
	color: var( --twc-ink );
}

.twc-pren__btn--pericolo {
	color: var( --twc-danger );
	background: transparent;
	border-color: var( --twc-danger );
}

.twc-pren__btn--pericolo:hover,
.twc-pren__btn--pericolo:focus-visible {
	color: #fff;
	background: var( --twc-danger );
}

.twc-pren__btn--piccolo {
	width: auto;
	min-height: 38px;
	padding: 0.4rem 1rem;
}

.twc-pren__link {
	color: var( --twc-ink );
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Messaggi ------------------------------------------------------- */

.twc-pren__nota,
.twc-pren__vuoto {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var( --twc-muted );
}

.twc-pren__vuoto {
	margin: 0;
}

.twc-pren__errore,
.twc-pren__successo {
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border-radius: var( --twc-radius-sm );
	border: 1px solid;
}

.twc-pren__errore {
	color: var( --twc-danger );
	border-color: var( --twc-danger );
	background: rgba( 160, 44, 34, 0.06 );
}

.twc-pren__errore ul {
	margin: 0;
	padding-left: 1.1rem;
}

.twc-pren__errore p {
	margin: 0;
}

.twc-pren__successo {
	color: var( --twc-ok );
	border-color: var( --twc-ok );
	background: rgba( 47, 107, 70, 0.07 );
}

/* Riepilogo, conferma, schede ------------------------------------ */

.twc-pren__titolo {
	margin: 0 0 0.4rem;
	font-size: 1.3rem;
}

.twc-pren__esito {
	border-left: 4px solid var( --twc-accent );
}

.twc-pren__riepilogo {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.6rem 1rem;
	margin: 1rem 0;
	padding: 0.9rem;
	background: var( --twc-surface );
	border: 1px solid var( --twc-line-soft );
	border-radius: var( --twc-radius-sm );
}

.twc-pren__riepilogo div:first-child {
	grid-column: 1 / -1;
}

.twc-pren__riepilogo dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --twc-muted );
}

.twc-pren__riepilogo dd {
	margin: 0.1rem 0 0;
	font-weight: 600;
}

.twc-pren__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
	margin: 0.5rem 0 0;
}

.twc-pren__azioni .twc-pren__btn {
	width: auto;
}

.twc-pren__stato {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	font-size: 0.8rem;
	font-weight: 700;
	border-radius: 999px;
	border: 1px solid var( --twc-line-soft );
}

.twc-pren__stato--confermata,
.twc-pren__stato--arrivata {
	color: var( --twc-ok );
	border-color: var( --twc-ok );
}

.twc-pren__stato--in_attesa {
	color: #8a4a12;
	border-color: var( --twc-accent );
	background: var( --twc-accent-soft );
}

.twc-pren__stato--rifiutata,
.twc-pren__stato--annullata,
.twc-pren__stato--no_show {
	color: var( --twc-muted );
}

.twc-pren__sottotitolo {
	margin: 1.25rem 0 0.6rem;
	font-size: 1.05rem;
}

.twc-pren__lista {
	display: grid;
	gap: 0.75rem;
}

.twc-pren__scheda {
	padding: 0.9rem;
	background: var( --twc-surface );
	border: 1px solid var( --twc-line );
	border-radius: var( --twc-radius );
}

.twc-pren__scheda .twc-pren__riepilogo {
	margin: 0 0 0.5rem;
	padding: 0;
	background: none;
	border: 0;
}

.twc-pren__annulla {
	margin: 0;
}

.twc-pren__nuova {
	margin: 1.25rem 0;
}

.twc-pren__nuova > summary {
	width: auto;
	margin-bottom: 1rem;
}

.twc-pren__nuova[open] > summary {
	color: var( --twc-ink );
	background: var( --twc-surface );
	border-color: var( --twc-line );
}

/* Schermi piu' larghi -------------------------------------------- */

@media ( min-width: 600px ) {

	.twc-pren__riga {
		grid-template-columns: 1fr 1fr;
	}

	.twc-pren__btn {
		width: auto;
	}

	.twc-pren__riepilogo {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.twc-pren__box {
		padding: 1.4rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.twc-pren__ora span {
		transition: none;
	}
}

/* La mappa dei tavoli -------------------------------------------- */

.twc-pren__piani {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
}

.twc-pren__piano {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: var( --twc-tap );
	padding: 0.4rem 1rem;
	border: 1px solid var( --twc-line );
	border-radius: 999px;
	background: var( --twc-surface );
	color: var( --twc-ink );
	font: inherit;
	cursor: pointer;
}

.twc-pren__piano[aria-selected="true"] {
	border-color: var( --twc-ink );
	background: var( --twc-ink );
	color: var( --twc-surface );
}

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

.twc-pren__piano-liberi {
	min-width: 1.4em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var( --twc-accent-soft );
	color: var( --twc-accent );
	font-size: 0.8em;
	font-weight: 600;
	text-align: center;
}

.twc-pren__piano[aria-selected="true"] .twc-pren__piano-liberi {
	background: var( --twc-surface );
}

/* Sul telefono la mappa intera sarebbe troppo piccola per toccare un
   tavolo: resta larga e si scorre di lato dentro il suo riquadro. */
.twc-pren__mappa {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border: 1px solid var( --twc-line-soft );
	border-radius: var( --twc-radius-sm );
	background: var( --twc-surface );
	-webkit-overflow-scrolling: touch;
}

.twc-pren__mappa .twc-mappa {
	display: block;
	width: 100%;
	min-width: 760px;
	height: auto;
	max-height: 75vh;
}

@media ( min-width: 900px ) {
	.twc-pren__mappa .twc-mappa {
		min-width: 0;
	}
}

.twc-mappa path,
.twc-mappa circle {
	vector-effect: non-scaling-stroke;
}

.twc-mappa__muri path,
.twc-mappa__muri circle {
	fill: none;
	stroke: var( --twc-ink );
	stroke-width: 2.5px;
	stroke-linecap: square;
}

.twc-mappa__arredi path,
.twc-mappa__arredi circle {
	fill: none;
	stroke: var( --twc-muted );
	stroke-width: 1px;
	opacity: 0.55;
}

.twc-mappa__sedie path,
.twc-mappa__sedie circle {
	fill: var( --twc-surface-alt );
	stroke: var( --twc-muted );
	stroke-width: 1px;
	opacity: 0.6;
}

.twc-mappa text {
	font-family: var( --wp--preset--font-family--body, inherit );
	pointer-events: none;
}

.twc-mappa__sale text {
	fill: var( --twc-muted );
	font-family: var( --wp--preset--font-family--heading, inherit );
	letter-spacing: 0.02em;
}

/* I tavoli: neutri finche' non si sa l'orario, poi liberi o no. */
.twc-mappa__piano-tavolo {
	fill: var( --twc-surface );
	stroke: var( --twc-muted );
	stroke-width: 1.25px;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

.twc-mappa__nome {
	fill: var( --twc-ink );
	font-weight: 600;
}

.twc-mappa__posti {
	fill: var( --twc-muted );
}

.twc-mappa__tavolo.is-libero {
	cursor: pointer;
}

.twc-mappa__tavolo.is-libero .twc-mappa__piano-tavolo {
	fill: var( --twc-accent-soft );
	stroke: var( --twc-accent );
	stroke-width: 1.75px;
}

.twc-mappa__tavolo.is-libero:hover .twc-mappa__piano-tavolo {
	stroke-width: 2.5px;
}

.twc-mappa__tavolo:focus {
	outline: none;
}

.twc-mappa__tavolo:focus-visible .twc-mappa__piano-tavolo {
	stroke: var( --twc-ink );
	stroke-width: 3px;
}

.twc-mappa__tavolo.is-scelto .twc-mappa__piano-tavolo {
	fill: var( --twc-accent );
	stroke: var( --twc-accent );
}

.twc-mappa__tavolo.is-scelto .twc-mappa__nome,
.twc-mappa__tavolo.is-scelto .twc-mappa__posti {
	fill: #fff;
}

.twc-mappa__tavolo.is-occupato,
.twc-mappa__tavolo.is-persone,
.twc-mappa__tavolo.is-sala {
	opacity: 0.38;
}

.twc-mappa__tavolo.is-occupato .twc-mappa__piano-tavolo,
.twc-mappa__tavolo.is-persone .twc-mappa__piano-tavolo,
.twc-mappa__tavolo.is-sala .twc-mappa__piano-tavolo {
	fill: var( --twc-surface-alt );
	stroke-dasharray: 3 3;
}

.twc-pren__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin: 0.7rem 0 0;
	padding: 0;
	list-style: none;
	color: var( --twc-muted );
	font-size: 0.86em;
}

.twc-pren__legenda li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.twc-pren__segno {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1.5px solid var( --twc-muted );
	background: var( --twc-surface );
}

.twc-pren__segno.is-libero {
	border-color: var( --twc-accent );
	background: var( --twc-accent-soft );
}

.twc-pren__segno.is-scelto {
	border-color: var( --twc-accent );
	background: var( --twc-accent );
}

.twc-pren__segno.is-occupato {
	border-style: dashed;
	opacity: 0.5;
}

.twc-pren__tavolo-scelto {
	margin: 0.8rem 0 0;
	min-height: 1.4em;
}

.twc-pren__tavolo-scelto .twc-pren__link {
	margin-left: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: var( --twc-muted );
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.twc-pren__tavolo-elenco {
	margin-top: 0.8rem;
}

@media ( prefers-reduced-motion: reduce ) {
	.twc-mappa__piano-tavolo {
		transition: none;
	}
}

/* "hidden" vince sempre: i campi del modulo hanno display: flex, che
   altrimenti lo batterebbe (l'elenco dei tavoli senza JavaScript). */
.twc-prenotazioni [hidden] {
	display: none !important;
}