/* EiO Accesso — finestra di pagamento. I colori si cambiano dal CSS del libro con le variabili --eio-cassa-*. */

.eio-cassa {
	--eio-cassa-fondo: #F3EBDD;
	--eio-cassa-testo: #20201E;
	--eio-cassa-accento: #E96328;
	--eio-cassa-nastro-a: #F4C542;
	--eio-cassa-nastro-b: #20201E;
	--eio-cassa-velo: rgba(32, 32, 30, .62);
	--eio-cassa-ok: #4B7A12;
	--eio-cassa-errore: #D83A32;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	color: var(--eio-cassa-testo);
}
.eio-cassa.is-aperta { display: flex; }
.eio-cassa__fondo { position: absolute; inset: 0; background: var(--eio-cassa-velo); }
.eio-cassa__box {
	position: relative;
	width: min(640px, calc(100vw - 32px));
	height: min(860px, calc(100vh - 48px));
	height: min(860px, calc(100dvh - 48px));
	display: flex;
	flex-direction: column;
	background: var(--eio-cassa-fondo);
	border: 3px solid var(--eio-cassa-testo);
	box-shadow: 14px 14px 0 var(--eio-cassa-accento);
	animation: eio-cassa-entra .22s ease-out both;
}
.eio-cassa__nastro { height: 12px; flex: none; background: repeating-linear-gradient(-45deg, var(--eio-cassa-nastro-a) 0 12px, var(--eio-cassa-nastro-b) 12px 24px); }
.eio-cassa__testa { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; }
.eio-cassa__titolo { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.eio-cassa__chiudi {
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	background: transparent; color: var(--eio-cassa-testo); border: 2px solid var(--eio-cassa-testo); cursor: pointer; padding: 0;
}
.eio-cassa__chiudi:focus-visible, .eio-cassa__intera:focus-visible { outline: 3px solid var(--eio-cassa-accento); outline-offset: 2px; }
.eio-cassa__corpo { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 2px solid var(--eio-cassa-testo); background: #fff; }
.eio-cassa__iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; opacity: 0; transition: opacity .2s; }
.eio-cassa.is-pronta .eio-cassa__iframe { opacity: 1; }
.eio-cassa__avviso { display: none; padding: 12px 20px; font-size: 15px; line-height: 1.45; background: var(--eio-cassa-fondo); border-bottom: 2px solid var(--eio-cassa-testo); }
.eio-cassa__avviso.is-on { display: block; }
.eio-cassa__avviso.is-ok { color: var(--eio-cassa-ok); font-weight: 700; }
.eio-cassa__avviso.is-errore { color: var(--eio-cassa-errore); font-weight: 700; }
.eio-cassa__piede { flex: none; padding: 8px 20px 10px; font-size: 13px; text-align: center; border-top: 2px solid var(--eio-cassa-testo); }
.eio-cassa__intera { color: inherit; opacity: .75; }
.eio-cassa.is-lenta .eio-cassa__intera { opacity: 1; font-weight: 700; color: var(--eio-cassa-errore); }

/* Scorrimento del libro fermo sotto la finestra, posizione conservata. */
html.eio-cassa-aperta, html.eio-cassa-aperta body { overflow: hidden; }
html.eio-cassa-aperta body { position: fixed; left: 0; right: 0; width: 100%; }

/* Telefono: la cassa occupa tutto lo schermo sotto una fascia. */
@media (max-width: 640px) {
	.eio-cassa { align-items: flex-end; }
	.eio-cassa__box { width: 100vw; height: calc(100vh - 40px); height: calc(100dvh - 40px); border-width: 3px 0 0 0; box-shadow: none; }
	.eio-cassa__testa { padding-left: 16px; }
}

/* Avviso di sblocco. */
.eio-sbloccato {
	position: fixed; left: 50%; bottom: 28px; z-index: 2147483001;
	transform: translateX(-50%) rotate(-3deg);
	padding: 14px 22px; background: #F3EBDD; color: #4B7A12;
	border: 4px solid #4B7A12; font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase;
	box-shadow: 6px 6px 0 #20201E;
	animation: eio-timbro .35s cubic-bezier(.2,.9,.3,1.2) both;
	transition: opacity .6s;
}
.eio-sbloccato.is-via { opacity: 0; }

@keyframes eio-cassa-entra { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes eio-timbro { from { transform: translateX(-50%) scale(1.8) rotate(-10deg); opacity: 0; } to { transform: translateX(-50%) rotate(-3deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.eio-cassa__box, .eio-sbloccato { animation: none; }
}