/* ==========================================================
   Biglietto da visita digitale — io Digitale Srl
   Valori dal documento di consegna (design hi-fi).
   ========================================================== */

.bdv {
	--accent: #E85412;
	--ink: #1A1A1C;
	--ink-tenue: #3A3833;
	--muted: #6E6A63;
	--label: #A8A49B;
	--label-chiaro: #CBC7BE;
	--filo: #EEEBE5;
	--bordo: #E5E1DA;
	--bordo-bottone: #E0DCD4;
	--en: inline;

	width: 380px;
	max-width: 100%;
	background: #FFFFFF;
	border: 1px solid var(--bordo);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(30, 28, 24, .04), 0 18px 40px -24px rgba(30, 28, 24, .22);
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ink);
	text-align: left;
	box-sizing: border-box;
}

.bdv--solo-it {
	--en: none;
}

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

.bdv a {
	font-style: normal;
	text-decoration: none;
}

/* --- Testata ------------------------------------------------ */

.bdv-testata {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: 30px 30px 24px;
}

.bdv-logo {
	display: block;
	width: 146px;
	height: auto;
	/* il PNG del logo ha fondo bianco opaco: il blend lo rende invisibile
	   sulla scheda chiara. Da togliere quando arriva la versione vettoriale. */
	mix-blend-mode: multiply;
}

.bdv-dal {
	margin: 0;
	text-align: right;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-weight: 400;
	font-size: 9.5px;
	line-height: 1.5;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--label);
}

.bdv-en {
	display: var(--en);
}

.bdv-dal .bdv-en {
	display: var(--en);
}

.bdv-dal .bdv-en::before {
	content: '';
	display: block;
}

.bdv-en-inline {
	display: var(--en);
	color: var(--label-chiaro);
}

/* --- Filetto d'accento -------------------------------------- */

.bdv-filetto {
	height: 3px;
	background: var(--accent);
}

/* --- Dati ---------------------------------------------------- */

.bdv-dati {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 30px 4px;
}

.bdv-campo {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bdv-etichetta {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-weight: 500;
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--label);
}

.bdv-ragione {
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--ink);
}

.bdv-telefono {
	font-weight: 500;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--ink);
}

.bdv-email {
	font-weight: 500;
	font-size: 17px;
	line-height: 1.3;
	color: var(--ink);
}

.bdv-sede {
	font-weight: 400;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ink-tenue);
}

.bdv-fiscale {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding-top: 4px;
	border-top: 1px solid var(--filo);
}

.bdv-fiscale > .bdv-campo:nth-child(1),
.bdv-fiscale > .bdv-campo:nth-child(2) {
	padding-top: 14px;
}

.bdv-campo--largo {
	grid-column: 1 / -1;
}

.bdv-mono {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	color: var(--ink-tenue);
	word-break: break-word;
}

/* --- Azioni --------------------------------------------------- */

.bdv-azioni {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 30px 0;
}

.bdv-bottone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	border: none;
	border-radius: 12px;
	background: var(--accent);
	color: #FFFFFF;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .01em;
	cursor: pointer;
}

.bdv-bottone .bdv-en-leggero {
	font-weight: 400;
	opacity: .7;
	color: inherit;
}

.bdv-azioni-riga {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}

.bdv-azioni-riga a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border: 1px solid var(--bordo-bottone);
	border-radius: 12px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	color: var(--ink);
}

/* --- QR --------------------------------------------------------- */

.bdv-qr {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 26px 30px 30px;
	padding-top: 22px;
	border-top: 1px solid var(--filo);
}

.bdv-qr img {
	width: 104px;
	height: 104px;
	border-radius: 4px;
	flex-shrink: 0;
}

.bdv-qr-testo {
	margin: 0;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
}

.bdv-qr-testo .bdv-en {
	color: var(--label);
}

.bdv-qr-testo .bdv-en::before {
	content: '';
	display: block;
}

/* --- Stati (solo su dispositivi con puntatore) -------------------- */

@media (hover: hover) {
	.bdv-telefono:hover,
	.bdv-email:hover,
	.bdv-mono:hover {
		color: var(--accent);
	}

	.bdv-bottone:hover {
		filter: brightness(.92);
	}

	.bdv-azioni-riga a:hover {
		border-color: var(--accent);
		color: var(--accent);
	}
}

.bdv-bottone:active,
.bdv-azioni-riga a:active {
	transform: translateY(1px);
}

/* --- Pagina dedicata /biglietto ------------------------------------ */

.pagina-biglietto {
	margin: 0;
	padding: 48px 24px 72px;
	background: #F4F2EF;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	min-height: 100vh;
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pagina-biglietto .bdv-ritorno {
	font-size: 13px;
	color: #6E6A63;
	text-decoration: none;
}

.pagina-biglietto .bdv-ritorno:hover {
	color: #C24309;
}

@media (max-width: 420px) {
	.pagina-biglietto {
		padding-left: 16px;
		padding-right: 16px;
	}

	.bdv {
		width: 100%;
	}
}