/**
 * La finestra di conferma della prenotazione.
 *
 * Colori con valore di riserva in ogni var(): la finestra compare sulla
 * pagina della guida, dove il foglio del tema c'e', ma se un domani venisse
 * usata altrove deve reggere da sola.
 */

.fm-bloccato,
.fm-bloccato body {
	/* Niente scorrimento dietro la finestra: su telefono e' il modo piu'
	   rapido per perdere di vista il messaggio appena comparso. */
	overflow: hidden;
}

.fm-conferma {
	position: fixed;
	inset: 0;
	z-index: 100000; /* sopra l'header appiccicoso di Impreza */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

.fm-conferma__velo {
	position: absolute;
	inset: 0;
	background: rgba( 40, 18, 4, .55 );
	backdrop-filter: blur( 2px );
}

.fm-conferma__carta {
	position: relative;
	width: min( 27rem, 100% );
	max-height: calc( 100vh - 2.5rem );
	overflow-y: auto;
	padding: 2rem 1.75rem 1.75rem;
	border-radius: 1.125rem;
	background: var( --fm-scheda, #fffdf8 );
	box-shadow: 0 18px 50px rgba( 40, 18, 4, .35 );
	text-align: center;
	font-family: inherit;
}

.fm-conferma__segno {
	display: block;
	margin: 0 auto .875rem;
	line-height: 0;
	color: var( --fm-successo, #1c5b23 );
}

.fm-conferma--quasi .fm-conferma__segno {
	color: var( --fm-accento, #8a5a00 );
}

.fm-conferma__titolo {
	margin: 0 0 .625rem;
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 800;
	color: var( --fm-primario, #571f05 );
	text-wrap: balance;
}

.fm-conferma__testo {
	margin: 0 0 .75rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var( --fm-tenue-testo, #7e5a42 );
}

.fm-conferma__nota {
	margin: 0 0 1.25rem;
	padding: .7rem .85rem;
	border-radius: .625rem;
	background: var( --fm-tenue, #f9f0da );
	font-size: .9rem;
	line-height: 1.5;
	color: var( --fm-tenue-testo, #7e5a42 );
}

.fm-conferma__ok {
	display: block;
	width: 100%;
	min-height: 3rem;
	margin: .25rem 0 0;
	padding: .8rem 1.25rem;
	border: 0;
	border-radius: .75rem;
	background: var( --fm-primario, #571f05 );
	color: var( --fm-primario-testo, #fefaed );
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
}

.fm-conferma__ok:hover {
	filter: brightness( 1.12 );
}

.fm-conferma__ok:focus-visible {
	outline: 3px solid var( --fm-secondario, #ffde0b );
	outline-offset: 3px;
}

/* L'entrata: appena accennata, giusto per dire che e' arrivata adesso. */
@media ( prefers-reduced-motion: no-preference ) {

	.fm-conferma__velo {
		animation: fm-conferma-velo .2s ease-out;
	}

	.fm-conferma__carta {
		animation: fm-conferma-carta .28s cubic-bezier( .2, .8, .3, 1 );
	}
}

@keyframes fm-conferma-velo {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fm-conferma-carta {
	from { opacity: 0; transform: translateY( 12px ) scale( .96 ); }
	to   { opacity: 1; transform: none; }
}

@media ( max-width: 480px ) {

	.fm-conferma__carta {
		padding: 1.75rem 1.25rem 1.5rem;
	}

	.fm-conferma__titolo {
		font-size: 1.3rem;
	}
}