/**
 * Coupon e scanner — Ferrere Miele.
 * Contrasti verificati AA: lo scanner si usa in piazza, con il sole.
 */

/* ---------------------------------------------------------------- coupon */

.fm-coupon {
	max-width: 26rem;
	margin: 2rem auto;
	padding: 2rem 1.5rem;
	background: var(--fm-scheda, #fffdf8);
	border: 2px dashed var(--fm-secondario, #d9a441);
	border-radius: 14px;
	text-align: center;
}

.fm-coupon__titolo {
	margin: 0 0 .25rem;
	font-size: 1.25rem;
	color: var(--fm-primario, #6b4700);
}

.fm-coupon__intestatario {
	margin: 0 0 1.25rem;
	font-size: .95rem;
	color: var(--fm-tenue-testo, #6a5a3c);
}

.fm-coupon__qr {
	max-width: 15rem;
	margin: 0 auto 1.25rem;
}

.fm-coupon__qr svg {
	width: 100%;
	height: auto;
	display: block;
}

.fm-coupon__etichetta {
	margin: 0;
	font-size: .75rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fm-tenue-testo, #8a6a30);
}

.fm-coupon__codice {
	margin: .25rem 0 1rem;
	font-family: ui-monospace, "Courier New", monospace;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--fm-primario, #4a3200);
}

.fm-coupon__stato {
	margin: 0 0 1rem;
	padding: .5rem .75rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: .95rem;
}

.fm-coupon__stato--valido {
	background: #e6f4e6;
	color: var(--fm-successo, #1c5b23);
}

.fm-coupon__stato--usato {
	background: #f4e6e6;
	color: var(--fm-errore, #7a1f1f);
}

.fm-coupon--usato .fm-coupon__qr {
	opacity: .25;
	filter: grayscale( 1 );
}

.fm-coupon__nota {
	margin: 0;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--fm-tenue-testo, #6a5a3c);
}

/* --------------------------------------------------------------- scanner */

.fm-scanner {
	max-width: 30rem;
	margin: 1.5rem auto;
	padding: 1rem;
}

.fm-scanner__conta {
	margin-bottom: .75rem;
	font-size: .9rem;
	color: #5a5a5a;
	text-align: center;
}

.fm-scanner__esito {
	min-height: 7rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.25rem;
	border-radius: 12px;
	background: #f1f1ef;
	text-align: center;
}

.fm-scanner__titolo {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
}

.fm-scanner__dettaglio {
	margin: .5rem 0 0;
	font-size: 1rem;
}

/* Il colore non è mai l'unica informazione: il testo dice sempre l'esito. */
.fm-scanner__esito--valido {
	background: var(--fm-successo, #1c5b23);
	color: #fff;
}

.fm-scanner__esito--usato {
	background: var(--fm-accento, #8a5a00);
	color: #fff;
}

.fm-scanner__esito--errore {
	background: var(--fm-errore, #7a1f1f);
	color: #fff;
}

.fm-scanner__camera {
	margin-top: 1rem;
}

/*
 * Il mirino.
 *
 * Il riquadro e' volutamente piu' piccolo dell'immagine che la fotocamera
 * riprende: inquadrare un QR dentro una cornice stretta viene naturale, e
 * tenere il telefono piu' vicino significa un codice piu' grande nel
 * fotogramma, quindi letto prima. La decodifica lavora comunque su tutto il
 * fotogramma, non solo sul quadrato: un codice appena fuori cornice viene
 * letto lo stesso, ed e' meglio cosi' che il contrario.
 */
.fm-scanner__mirino {
	position: relative;
	width: min( 17rem, 72vw );
	aspect-ratio: 1;
	margin: 0 auto;
	border-radius: 14px;
	overflow: hidden;
	background: #000;
}

.fm-scanner__mirino video {
	width: 100%;
	height: 100%;
	display: block;
	/* Il sensore e' 4:3 e il mirino quadrato: si ritaglia invece di
	   deformare, altrimenti il QR arriva storto alla decodifica. */
	object-fit: cover;
}

/*
 * I quattro angoli, disegnati con otto sfumature piatte: due barre per
 * angolo, una orizzontale e una verticale. Nessuna immagine da scaricare e
 * nessun elemento in piu' nel markup.
 */
.fm-scanner__angoli {
	--tratto: 2rem;
	--spessore: 4px;
	--colore: var( --fm-secondario, #ffde0b );

	position: absolute;
	inset: 9%;
	pointer-events: none;
	background:
		linear-gradient( var( --colore ) 0 0 ) 0 0,
		linear-gradient( var( --colore ) 0 0 ) 0 0,
		linear-gradient( var( --colore ) 0 0 ) 100% 0,
		linear-gradient( var( --colore ) 0 0 ) 100% 0,
		linear-gradient( var( --colore ) 0 0 ) 0 100%,
		linear-gradient( var( --colore ) 0 0 ) 0 100%,
		linear-gradient( var( --colore ) 0 0 ) 100% 100%,
		linear-gradient( var( --colore ) 0 0 ) 100% 100%;
	background-size: var( --tratto ) var( --spessore ), var( --spessore ) var( --tratto );
	background-repeat: no-repeat;
}

/* ---------------------------------------------------- omaggio sul coupon */

.fm-coupon__omaggio {
	margin: -.5rem 0 1rem;
	padding: .6rem .75rem;
	border-radius: 10px;
	background: var( --fm-secondario, #ffde0b );
	color: #441b06;
	font-size: .95rem;
	line-height: 1.45;
}

.fm-scanner button {
	display: block;
	width: 100%;
	margin-top: .75rem;
	padding: .9rem 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	border: 0;
	border-radius: 10px;
	background: var(--fm-primario, #6b4700);
	color: #fff;
	cursor: pointer;
}

.fm-scanner button:focus-visible {
	outline: 3px solid var(--fm-focus, #d9a441);
	outline-offset: 2px;
}

.fm-scanner__manuale {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #ddd;
}

.fm-scanner__manuale label {
	display: block;
	margin-bottom: .35rem;
	font-size: .9rem;
	font-weight: 600;
}

.fm-scanner__manuale input {
	width: 100%;
	padding: .9rem;
	font-family: ui-monospace, "Courier New", monospace;
	font-size: 1.3rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 2px solid #bba;
	border-radius: 10px;
}

.fm-scanner__aiuto {
	margin-top: 1rem;
	font-size: .85rem;
	line-height: 1.5;
	color: #666;
}

.fm-scanner--negato {
	padding: 2rem;
	text-align: center;
}

/* ------------------------------------------------------------ contatore */

.fm-copie {
	font-size: .95rem;
}

.fm-copie--poche {
	color: var(--fm-accento, #8a5a00);
	font-weight: 600;
}

.fm-copie--esaurite {
	color: var(--fm-errore, #7a1f1f);
	font-weight: 600;
}

/* ------------------------------------------------------------- omaggio */

/*
 * Deve saltare all'occhio di un volontario che guarda lo schermo per un
 * secondo, con la fila davanti: giallo pieno su testo scuro, maiuscolo,
 * e un contorno chiaro che lo stacca dal verde della conferma.
 */
.fm-scanner__omaggio {
	margin: .9rem -.5rem -.5rem;
	padding: .7rem .75rem;
	border-radius: 10px;
	background: var( --fm-secondario, #ffde0b );
	color: #441b06;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .02em;
	box-shadow: 0 0 0 3px rgba( 255, 255, 255, .55 );
}

@media ( prefers-reduced-motion: no-preference ) {
	.fm-scanner__omaggio {
		animation: fm-omaggio-entra .35s ease-out;
	}
}

@keyframes fm-omaggio-entra {
	from { transform: scale( .92 ); opacity: 0; }
	to   { transform: none;         opacity: 1; }
}