/**
 * SDI checkout fiscal form — scoped BEM styles for /pagamento.
 *
 * Renders the "Dati per la fattura" group (eci-fiscal-fieldset) above the
 * Stripe form on the PMPro checkout page. Design tokens come from
 * design-tokens.css; this file defines structure only.
 *
 * Sezione T14 — SDI integration. Update Phase D fix1: outer wrapper e' ora
 * <div role="group"> + <h3 .hi-pagamento__fiscal-title> invece di
 * <fieldset>/<legend> (i quirk del legend rendering causavano overlap visivi
 * sul border-top con sfondi scuri).
 */

.hi-pagamento__fiscal {
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-2xl);
	padding: 2rem;
	margin: 1.5rem 0;
	background: var(--color-card-light);
	font-family: 'Inter', sans-serif;
	color: var(--color-text-primary-light);
}

.hi-pagamento__fiscal-title {
	font-weight: 700;
	font-size: var(--fs-h3);
	margin: 0 0 1.25rem 0;
	color: var(--color-text-primary-light);
	font-family: 'Inter', sans-serif;
}

.hi-pagamento__fiscal-toggle {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
}

.hi-pagamento__fiscal-toggle label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* === Input baseline shared by tutti i campi del blocco === */
.hi-pagamento__fiscal input[type="text"],
.hi-pagamento__fiscal input[type="email"] {
	margin-top: 0.25rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--fs-body);
	color: var(--color-text-primary-light);
	background: var(--color-card-light);
	transition: border-color 0.15s ease;
}

.hi-pagamento__fiscal input:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
	border-color: var(--color-brand);
}

.hi-pagamento__fiscal input[aria-invalid="true"] {
	border-color: var(--color-accent-red);
}

.hi-pagamento__fiscal input[data-eci-valid="true"] {
	border-color: var(--color-success);
}

/* === Block grid (privato | azienda) === */
.hi-pagamento__fiscal-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1rem;
}

.hi-pagamento__fiscal-block[hidden] {
	display: none;
}

.hi-pagamento__fiscal-block label {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-body-sm);
	color: var(--color-text-secondary-light);
}

/* === Canale SDI (azienda) — fieldset interno con border:0 === */
.hi-pagamento__fiscal-channel {
	grid-column: 1 / -1;
	border: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	margin: 0.5rem 0;
}

.hi-pagamento__fiscal-channel legend {
	font-size: var(--fs-body-sm);
	padding: 0;
	color: var(--color-text-secondary-light);
}

/* === Indirizzo === */
.hi-pagamento__fiscal-address {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr;
	gap: 0.75rem;
	margin: 1rem 0;
}

.hi-pagamento__fiscal-address label {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-body-sm);
	color: var(--color-text-secondary-light);
}

/* === Email libera (label diretto del root) === */
.hi-pagamento__fiscal > label {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-body-sm);
	color: var(--color-text-secondary-light);
	margin-top: 1rem;
}

/* === Feedback live region === */
.hi-pagamento__fiscal-feedback {
	font-size: var(--fs-body-sm);
	margin-top: 0.5rem;
	min-height: 1.2em;
	color: var(--color-accent-red);
}

.hi-pagamento__fiscal-feedback[data-state="ok"] {
	color: var(--color-success);
}

@media (max-width: 768px) {
	.hi-pagamento__fiscal-block,
	.hi-pagamento__fiscal-address {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hi-pagamento__fiscal *,
	.hi-pagamento__fiscal *::before,
	.hi-pagamento__fiscal *::after {
		transition: none !important;
		animation: none !important;
	}
}