/* ==========================================================================
   MODALE GENERICO — .dz-modal
   Registrato in inc/enqueue.php, caricato dove serve (per ora la pagina del
   corso, vedi inc/contact-docente.php). Componente riusabile: un bottone
   qualsiasi con [data-dz-modal="id-del-modale"] apre il contenitore con
   quell'id; dentro al modale, qualunque elemento con [data-dz-modal-close]
   lo richiude — sfondo, bottone in alto a destra, o altro che aggiungi. La
   logica di apertura/chiusura sta in assets/js/dz-modal.js.

   1. Struttura
   2. Testata (titolo, bottone di chiusura)
   3. Form di Contact Form 7 — vale anche fuori da un modale: avvolgi il
      form in <div class="dz-form">...</div> (vedi [dazzero_form_contatti]
      in inc/form-contatti.php) per lo stesso stile a filetto senza
      passare da un popup.
   4. Form senza la classe di Contact Form 7 (Profile Builder e simili):
      stessi selettori generici, vedi il pannello account in inc/header.php.
   5. Etichetta "flottante" — pannello account e pagine di login/registrazione.
   ========================================================================== */

/* 1. Struttura ============================================================ */
.dz-modal[hidden] {
	display: none;
}

.dz-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.dz-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
}

.dz-modal__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	background: var(--dz-bianco, #fff);
	color: var(--dz-nero, #1a1a1a);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);

	/* Una piccola comparsa, non un rimbalzo: il resto del sito non usa mai
	   animazioni vistose, e il modale non fa eccezione. */
	animation: dz-modal-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dz-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dz-modal__panel {
		animation: none;
	}
}

/* 2. Testata =============================================================== */
.dz-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dz-bordo, #e4e4e4);
	background: transparent;
	color: var(--dz-nero, #1a1a1a);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

.dz-modal__close:hover,
.dz-modal__close:focus-visible {
	background: var(--dz-nero, #1a1a1a);
	border-color: var(--dz-nero, #1a1a1a);
	color: var(--dz-bianco, #fff);
}

.dz-modal__title {
	margin: 0 0 0.625rem;
	padding-right: 2.5rem;
	color: var(--dz-nero, #1a1a1a);
	font-family: var(--dz-font-titoli, inherit);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dz-modal__intro {
	margin: 0 0 1.5rem;
	color: var(--dz-grigio-testo, #6b6b6b);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* 3. Form di Contact Form 7 ================================================ */
/* Campi a filetto: solo il bordo inferiore, niente riquadri — la stessa idea
   grafica delle card del sito, applicata a un form. Il filetto si scurisce
   quando il campo è attivo: niente ombre o outline sopra, sul bordo basta.
   Selettori doppi (.dz-modal, .dz-form): stesso stile dentro un popup o
   piazzato dritto in una pagina, un solo posto dove tenerlo allineato. */
.dz-modal .dz-field,
.dz-form .dz-field {
	margin-bottom: 1.25rem;
}

/* Due campi fianco a fianco (es. Nome ed Email): avvolgili in
   <div class="dz-field-riga">, i .dz-field dentro si mettono in riga da
   soli e perdono il loro margine inferiore, lo prende la riga. Sotto i
   480px tornano impilati: due colonne strette avrebbero reso gli errori
   di validazione ("Compila questo campo") illeggibili. */
.dz-modal .dz-field-riga,
.dz-form .dz-field-riga {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
	margin-bottom: 1.25rem;
}

.dz-modal .dz-field-riga .dz-field,
.dz-form .dz-field-riga .dz-field {
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.dz-modal .dz-field-riga,
	.dz-form .dz-field-riga {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

.dz-modal .dz-field label,
.dz-form .dz-field label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--dz-grigio-testo, #6b6b6b);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dz-modal .wpcf7-form-control,
.dz-form .wpcf7-form-control {
	width: 100%;
	padding: 0.625rem 0.125rem;
	border: 0;
	border-bottom: 1px solid var(--dz-bordo, #e4e4e4);
	border-radius: 0;
	background: transparent;
	color: var(--dz-nero, #1a1a1a);
	font-family: var(--dz-font-testo, inherit);
	font-size: 0.9375rem;
	transition: border-color 200ms ease;
}

.dz-modal textarea.wpcf7-form-control,
.dz-form textarea.wpcf7-form-control {
	min-height: 6.5rem;
	resize: vertical;
}

.dz-modal select.wpcf7-form-control,
.dz-form select.wpcf7-form-control {
	appearance: none;
	padding-right: 1.5rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%206l4%204%204-4'%20fill='none'%20stroke='%231a1a1a'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.125rem center;
	/* Senza questo l'SVG non ha una dimensione intrinseca e il browser la
	   sceglie da sé — troppo grande, quasi alta come il campo. */
	background-size: 0.75rem;
	cursor: pointer;
}

.dz-modal .wpcf7-form-control::placeholder,
.dz-form .wpcf7-form-control::placeholder {
	color: #a3a3a3;
}

.dz-modal .wpcf7-form-control:focus,
.dz-form .wpcf7-form-control:focus {
	outline: none;
	border-bottom-color: var(--dz-nero, #1a1a1a);
}

.dz-modal .wpcf7-form-control.wpcf7-not-valid,
.dz-form .wpcf7-form-control.wpcf7-not-valid {
	border-bottom-color: #b32d2e;
}

.dz-modal .wpcf7-not-valid-tip,
.dz-form .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	color: #b32d2e;
	font-size: 0.75rem;
}

.dz-modal .wpcf7-response-output,
.dz-form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--dz-bordo, #e4e4e4);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.dz-modal form.sent .wpcf7-response-output,
.dz-form form.sent .wpcf7-response-output {
	border-color: var(--dz-nero, #1a1a1a);
}

.dz-modal form.failed .wpcf7-response-output,
.dz-modal form.aborted .wpcf7-response-output,
.dz-form form.failed .wpcf7-response-output,
.dz-form form.aborted .wpcf7-response-output {
	border-color: #b32d2e;
	color: #b32d2e;
}

.dz-modal input[type="submit"].wpcf7-form-control,
.dz-form input[type="submit"].wpcf7-form-control {
	width: auto;
	margin-top: 0.5rem;
	padding: 0.875rem 1.75rem;
	border: 1px solid var(--dz-nero, #1a1a1a);
	background: var(--dz-nero, #1a1a1a);
	color: var(--dz-bianco, #fff);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

.dz-modal input[type="submit"].wpcf7-form-control:hover,
.dz-modal input[type="submit"].wpcf7-form-control:focus-visible,
.dz-form input[type="submit"].wpcf7-form-control:hover,
.dz-form input[type="submit"].wpcf7-form-control:focus-visible {
	background: var(--dz-bianco, #fff);
	color: var(--dz-nero, #1a1a1a);
}

.dz-modal .wpcf7-spinner,
.dz-form .wpcf7-spinner {
	margin-left: 0.75rem;
}

/* Nota privacy sopra il bottone d'invio (vedi inc/form-contatti.php). */
.dz-modal .dz-privacy,
.dz-form .dz-privacy {
	margin: 0 0 1rem;
	color: var(--dz-grigio-testo, #6b6b6b);
	font-size: 0.75rem;
	line-height: 1.5;
}

.dz-modal .dz-privacy a,
.dz-form .dz-privacy a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* 4. Form senza la classe di Contact Form 7 (es. Profile Builder — vedi
   il pannello account in inc/header.php e page-templates/login.php /
   registrazione.php) ======================================================= */
/* Stessa idea grafica della sezione 3 (bordo a filetto, non riquadro), ma
   su selettori generici invece che sulla classe .wpcf7-form-control:
   plugin diversi da Contact Form 7 non la portano, il loro markup di
   serie sono input semplici. Innocuo per i form CF7 già stilati sopra:
   quegli input hanno ANCHE questi tipi/tag, quindi ricevono le stesse
   regole due volte, non qualcosa di diverso. */
.dz-modal label,
.dz-form label {
	display: block;
	margin: 0 0 0.5rem;
	color: var(--dz-grigio-testo, #6b6b6b);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dz-modal input[type="text"],
.dz-modal input[type="email"],
.dz-modal input[type="password"],
.dz-modal input[type="tel"],
.dz-modal input[type="url"],
.dz-modal select,
.dz-modal textarea,
.dz-form input[type="text"],
.dz-form input[type="email"],
.dz-form input[type="password"],
.dz-form input[type="tel"],
.dz-form input[type="url"],
.dz-form select,
.dz-form textarea {
	display: block;
	width: 100%;
	padding: 0.625rem 0.125rem;
	margin-bottom: 1.25rem;
	border: 0;
	border-bottom: 1px solid var(--dz-bordo, #e4e4e4);
	border-radius: 0;
	background: transparent;
	color: var(--dz-nero, #1a1a1a);
	font-family: var(--dz-font-testo, inherit);
	font-size: 0.9375rem;
	transition: border-color 200ms ease;
}

.dz-modal input:focus,
.dz-modal select:focus,
.dz-modal textarea:focus,
.dz-form input:focus,
.dz-form select:focus,
.dz-form textarea:focus {
	outline: none;
	border-bottom-color: var(--dz-nero, #1a1a1a);
}

.dz-modal input[type="checkbox"],
.dz-modal input[type="radio"],
.dz-form input[type="checkbox"],
.dz-form input[type="radio"] {
	width: auto;
	margin: 0 0.5rem 0 0;
}

.dz-modal input[type="submit"],
.dz-modal button[type="submit"],
.dz-form input[type="submit"],
.dz-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.875rem 1.75rem;
	border: 1px solid var(--dz-nero, #1a1a1a);
	background: var(--dz-nero, #1a1a1a);
	color: var(--dz-bianco, #fff);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease;
}

.dz-modal input[type="submit"]:hover,
.dz-modal input[type="submit"]:focus-visible,
.dz-modal button[type="submit"]:hover,
.dz-modal button[type="submit"]:focus-visible,
.dz-form input[type="submit"]:hover,
.dz-form input[type="submit"]:focus-visible,
.dz-form button[type="submit"]:hover,
.dz-form button[type="submit"]:focus-visible {
	background: var(--dz-bianco, #fff);
	color: var(--dz-nero, #1a1a1a);
}

.dz-modal a,
.dz-form a {
	color: inherit;
	text-underline-offset: 0.15em;
}

/* Form piazzato dritto in una pagina (non in un modale o nel pannello
   account): centrato e stretto come un form di login vero, non teso alla
   larghezza intera del contenuto — vedi page-templates/login.php e
   page-templates/registrazione.php. */
.dz-form-page {
	max-width: 420px;
	margin-inline: auto;
}

/* 5. Etichetta "flottante" (pannello account e pagine di login/
   registrazione) ============================================================ */
/* Di serie sovrapposta al campo come un placeholder; sale sopra il campo a
   fuoco, al passaggio del mouse o se il campo è già compilato. Il wrapper
   .dz-field-float lo crea da solo initFloatingLabels() in
   assets/js/header.js, avvolgendo ogni coppia label+input che trova dentro
   .dz-account-panel o .dz-form-page — funziona qualunque sia il markup
   esatto di Profile Builder, non serve conoscerlo in anticipo. L'ordine
   label-dopo-input voluto dal JS è quello che rende possibile il trucco
   :not(:placeholder-shown) qui sotto, in puro CSS.

   Dichiarata DOPO la sezione 4 apposta: stessa specificità di ".dz-form
   label" / ".dz-modal label", vince perché viene dopo nel file. */
.dz-field-float {
	position: relative;
	margin-bottom: 1.25rem;
}

.dz-field-float input,
.dz-field-float textarea {
	margin-bottom: 0;
}

.dz-field-float label {
	position: absolute;
	left: 0.125rem;
	top: 0.625rem;
	max-width: calc(100% - 0.25rem);
	margin: 0;
	overflow: hidden;
	color: rgba(26, 26, 26, 0.45);
	font-family: var(--dz-font-testo, inherit);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: top 180ms ease, font-size 180ms ease, color 180ms ease, letter-spacing 180ms ease;
}

.dz-field-float input:focus ~ label,
.dz-field-float input:hover ~ label,
.dz-field-float input:not(:placeholder-shown) ~ label,
.dz-field-float textarea:focus ~ label,
.dz-field-float textarea:hover ~ label,
.dz-field-float textarea:not(:placeholder-shown) ~ label {
	top: -1.125rem; /* 18px */
	color: rgba(26, 26, 26, 0.55);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}