/*
 * DIGIVAL · stile di base per i form di Contact Form 7.
 * Costruito sulle variabili --dg-* (Digival Tools -> Framework): colori, raggi e spaziature seguono il progetto.
 * Per cambiare l'aspetto su un sito si cambiano le variabili --dg-cf7-* qui sotto (o le --dg-* del progetto), non le regole.
 *
 * Markup consigliato nel form di CF7 (etichetta sopra il campo):
 *   <label> Nome e cognome *
 *       [text* nome autocomplete:name] </label>
 * Classi di supporto da usare nel form:
 *   <div class="dg-cf7-riga"> ... due o piu' campi affiancati ... </div>
 *   <p class="dg-cf7-nota">* Campi obbligatori</p>
 */

.wpcf7 {
	--dg-cf7-gap: var(--dg-space-4, 1.5rem);
	--dg-cf7-label-gap: var(--dg-space-2, 0.5rem);
	--dg-cf7-field-height: 3.5rem;
	--dg-cf7-field-padding-y: 0.75rem;
	--dg-cf7-field-padding-x: 1rem;
	--dg-cf7-field-bg: var(--dg-body-bg, #fff);
	--dg-cf7-field-color: var(--dg-body-color, #212529);
	--dg-cf7-field-border: var(--dg-border-color, #dee2e6);
	--dg-cf7-field-radius: var(--dg-radius-lg, 0.5rem);
	--dg-cf7-placeholder: var(--dg-body-secondary-color, rgba(33, 37, 41, 0.75));
	--dg-cf7-accent: var(--dg-primary-500, #0d6efd);
	--dg-cf7-accent-hover: var(--dg-primary-hover, #0b5ed7);
	--dg-cf7-accent-contrast: var(--dg-primary-contrast, #fff);
	--dg-cf7-focus-ring: var(--dg-focus-ring-color, rgba(13, 110, 253, 0.25));
	--dg-cf7-button-radius: var(--dg-radius-pill, 50rem);
	--dg-cf7-danger: var(--dg-danger-500, #dc3545);
	--dg-cf7-success: var(--dg-success, #198754);
	--dg-cf7-warning: var(--dg-warning, #ffc107);
	width: 100%;
}

/* ---------- Struttura ---------- */

.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--dg-cf7-gap);
	margin: 0;
}

.wpcf7-form > p,
.wpcf7-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* Campi affiancati: diventano una colonna sotto i 576px */
.wpcf7-form .dg-cf7-riga {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--dg-cf7-gap);
}

.wpcf7-form .dg-cf7-riga > p {
	margin: 0;
}

/* ---------- Etichette ---------- */

.wpcf7-form label {
	display: flex;
	flex-direction: column;
	gap: var(--dg-cf7-label-gap);
	width: 100%;
	margin: 0;
	color: var(--dg-cf7-field-color);
	font-weight: var(--dg-fw-medium, 500);
	line-height: 1.4;
}

/* CF7 aggiunge un <br> dopo il testo dell'etichetta: il gap lo sostituisce */
.wpcf7-form label > br {
	display: none;
}

.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	font-weight: var(--dg-fw-normal, 400);
}

/* ---------- Campi di testo, select, textarea ---------- */

.wpcf7-form input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="password"], [type="search"]),
.wpcf7-form select,
.wpcf7-form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: var(--dg-cf7-field-height);
	margin: 0;
	padding: var(--dg-cf7-field-padding-y) var(--dg-cf7-field-padding-x);
	font: inherit;
	font-weight: var(--dg-fw-normal, 400);
	line-height: 1.5;
	color: var(--dg-cf7-field-color);
	background-color: var(--dg-cf7-field-bg);
	border: var(--dg-border-width, 1px) solid var(--dg-cf7-field-border);
	border-radius: var(--dg-cf7-field-radius);
	box-shadow: none;
	appearance: none;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* CF7 mette rows="10": l'altezza la decide il CSS, l'utente puo' allungarla */
.wpcf7-form textarea {
	height: 9rem;
	min-height: 6rem;
	resize: vertical;
}

.wpcf7-form ::placeholder {
	color: var(--dg-cf7-placeholder);
	opacity: 1;
}

/* Freccia del select */
.wpcf7-form select {
	padding-right: calc(var(--dg-cf7-field-padding-x) * 2.75);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right var(--dg-cf7-field-padding-x) center;
	background-size: 0.875rem 0.625rem;
	cursor: pointer;
}

/* Prima voce vuota del select (include_blank o first_as_label) mostrata come placeholder */
.wpcf7-form select:has(option[value=""]:checked) {
	color: var(--dg-cf7-placeholder);
}

.wpcf7-form select option {
	color: var(--dg-cf7-field-color);
}

.wpcf7-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
	outline: 0;
	border-color: var(--dg-cf7-accent);
	box-shadow: 0 0 0 var(--dg-focus-ring-width, 0.25rem) var(--dg-cf7-focus-ring);
}

/* ---------- Checkbox, radio, accettazione ---------- */

.wpcf7-form :is(.wpcf7-checkbox, .wpcf7-radio, .wpcf7-acceptance) {
	display: flex;
	flex-direction: column;
	gap: var(--dg-space-2, 0.5rem);
}

.wpcf7-form .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
}

/* Gruppi di scelte con titolo: <fieldset><legend>Titolo</legend> [radio ...] </fieldset> */
.wpcf7-form fieldset:not(.hidden-fields-container) {
	display: flex;
	flex-direction: column;
	gap: var(--dg-cf7-label-gap);
}

.wpcf7-form fieldset > p {
	margin: 0;
}

.wpcf7-form legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--dg-cf7-label-gap);
	padding: 0;
	color: var(--dg-cf7-field-color);
	font-size: inherit;
	font-weight: var(--dg-fw-medium, 500);
	line-height: 1.4;
}

.wpcf7-form legend + * {
	clear: left;
}

/* Scelte in riga: <fieldset class="dg-cf7-in-riga"> (vanno a capo se non c'e' spazio) */
.wpcf7-form .dg-cf7-in-riga :is(.wpcf7-checkbox, .wpcf7-radio) {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: var(--dg-space-4, 1.5rem);
}

.wpcf7-form .wpcf7-list-item label {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.75rem;
	font-weight: var(--dg-fw-normal, 400);
	cursor: pointer;
}

/* Radio e checkbox disegnati via CSS (i controlli nativi non si possono personalizzare).
   Non selezionati: checkbox piena grigio tenue, radio ad anello spesso dello stesso grigio.
   Selezionati: checkbox piena del colore primario con spunta in tinta chiara, radio con anello primario, spazio bianco e pallino. */
.wpcf7 {
	--dg-cf7-check-size: 22px;
	/* Grigio dei controlli non selezionati: tenue ma ancora leggibile su bianco */
	--dg-cf7-check-off: color-mix(in srgb, var(--dg-cf7-field-color) 30%, var(--dg-cf7-field-bg));
	--dg-cf7-check-off-hover: color-mix(in srgb, var(--dg-cf7-field-color) 42%, var(--dg-cf7-field-bg));
	--dg-cf7-check-focus: color-mix(in srgb, var(--dg-cf7-accent) 20%, transparent);
}

.wpcf7-form :is(input[type="checkbox"], input[type="radio"]) {
	box-sizing: border-box;
	flex: 0 0 auto;
	display: inline-grid;
	place-content: center;
	width: var(--dg-cf7-check-size);
	height: var(--dg-cf7-check-size);
	margin: 0;
	padding: 0;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out;
}

/* Allineamento con la prima riga del testo */
.wpcf7-form .wpcf7-list-item {
	align-items: flex-start;
}

.wpcf7-form .wpcf7-list-item-label {
	padding-top: calc((var(--dg-cf7-check-size) - 1.4em) / 2);
	line-height: 1.4;
	transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

/* ---- Checkbox ---- */

.wpcf7-form input[type="checkbox"] {
	background-color: var(--dg-cf7-check-off);
	border: 0;
	border-radius: 0.3125rem;
}

/* Spunta nella tinta chiara del primario (come il pallino del radio): si disegna da sinistra a destra */
.wpcf7-form input[type="checkbox"]::before {
	content: "";
	width: 0.875rem;
	height: 0.875rem;
	background-color: var(--dg-cf7-check-mark);
	-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.5 12 13 4.5'/%3e%3c/svg%3e") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.5 12 13 4.5'/%3e%3c/svg%3e") center / contain no-repeat;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.22s ease-out 0.05s;
}

.wpcf7-form input[type="checkbox"]:checked {
	background-color: var(--dg-cf7-accent);
}

.wpcf7-form input[type="checkbox"]:checked::before {
	clip-path: inset(0 0 0 0);
}

/* ---- Radio ---- */

/* Stessa logica della checkbox: cerchio pieno grigio tenue; selezionato, cerchio pieno primario con un cerchio
   interno di una tinta piu' chiara. Tutto disegnato con gradienti di sfondo (niente bordo), cosi' resta centrato
   anche sugli schermi in scala (125%, 150%). Due strati: cerchio interno (sopra) e cerchio pieno (sotto). */
.wpcf7 {
	--dg-cf7-radio-dot: 8px;
	--dg-cf7-radio-fill: var(--dg-cf7-check-off);
	/* Tinta chiara del primario, usata per il pallino del radio e per la spunta della checkbox */
	--dg-cf7-check-mark: color-mix(in srgb, var(--dg-cf7-accent) 35%, var(--dg-cf7-field-bg));
	--dg-cf7-radio-dot-color: var(--dg-cf7-check-mark);
}

.wpcf7-form input[type="radio"] {
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	background-image:
		radial-gradient(circle closest-side, var(--dg-cf7-radio-dot-color) 0 calc(100% - 0.5px), transparent 100%),
		radial-gradient(circle closest-side, var(--dg-cf7-radio-fill) 0 calc(100% - 0.5px), transparent 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0 0, 100% 100%;
	transition: box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out, background-size 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpcf7-form input[type="radio"]:checked {
	--dg-cf7-radio-fill: var(--dg-cf7-accent);
	background-size: var(--dg-cf7-radio-dot) var(--dg-cf7-radio-dot), 100% 100%;
}

/* ---- Interazione ---- */

/* Passaggio del mouse: il grigio si scurisce, il testo prende il colore primario */
.wpcf7-form .wpcf7-list-item:hover input[type="checkbox"]:not(:checked, :disabled),
.wpcf7-form input[type="checkbox"]:not(:checked, :disabled):hover {
	background-color: var(--dg-cf7-check-off-hover);
}

.wpcf7-form .wpcf7-list-item:hover input[type="radio"]:not(:checked, :disabled),
.wpcf7-form input[type="radio"]:not(:checked, :disabled):hover {
	--dg-cf7-radio-fill: var(--dg-cf7-check-off-hover);
}

.wpcf7-form .wpcf7-list-item:has(input:not(:disabled)):hover .wpcf7-list-item-label {
	color: var(--dg-cf7-accent);
}

/* Pressione: il controllo si schiaccia un attimo */
.wpcf7-form :is(input[type="checkbox"], input[type="radio"]):not(:disabled):active,
.wpcf7-form .wpcf7-list-item label:active :is(input[type="checkbox"], input[type="radio"]):not(:disabled) {
	transform: scale(0.9);
}

/* Focus: alone leggero con la stessa forma del controllo, sia da tastiera sia col clic */
.wpcf7-form :is(input[type="checkbox"], input[type="radio"]):focus {
	outline: 0;
	box-shadow: 0 0 0 0.1875rem var(--dg-cf7-check-focus);
}

/* ---- Disabilitati (anche selezionati): sbiaditi, senza effetti ---- */

.wpcf7-form :is(input[type="checkbox"], input[type="radio"]):disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.wpcf7-form .wpcf7-list-item:has(input:disabled) :is(label, .wpcf7-list-item-label) {
	cursor: not-allowed;
}

.wpcf7-form .wpcf7-list-item:has(input:disabled) .wpcf7-list-item-label {
	opacity: 0.55;
}

.wpcf7-form .wpcf7-list-item-label a {
	color: var(--dg-cf7-accent);
	font-weight: var(--dg-fw-semibold, 600);
	text-decoration: underline;
}

/* ---------- Pulsante ---------- */

.wpcf7-form .wpcf7-submit {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: var(--dg-cf7-field-height);
	margin: 0;
	padding: var(--dg-cf7-field-padding-y) var(--dg-space-4, 1.5rem);
	font: inherit;
	font-weight: var(--dg-fw-medium, 500);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dg-cf7-accent-contrast);
	background-color: var(--dg-cf7-accent);
	border: 0;
	border-radius: var(--dg-cf7-button-radius);
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.wpcf7-form .wpcf7-submit:hover {
	background-color: var(--dg-cf7-accent-hover);
}

.wpcf7-form .wpcf7-submit:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 var(--dg-focus-ring-width, 0.25rem) var(--dg-cf7-focus-ring);
}

/* Disattivato finche' l'accettazione non e' spuntata */
.wpcf7-form .wpcf7-submit:disabled {
	opacity: var(--dg-disabled-opacity, 0.65);
	cursor: not-allowed;
}

/* Il cerchio di caricamento di CF7 sta dentro il pulsante, a destra: non occupa spazio sotto */
.wpcf7-form p:has(> .wpcf7-submit) {
	position: relative;
}

.wpcf7-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: var(--dg-space-4, 1.5rem);
	margin: 0;
	transform: translateY(-50%);
}

/* ---------- Testi di supporto ---------- */

.wpcf7-form .dg-cf7-nota {
	margin: 0;
	font-size: var(--dg-fs-sm, 0.875rem);
	color: var(--dg-cf7-placeholder);
}

/* ---------- Errori e risposta ---------- */

/* Stessa specificita' delle regole dei campi, e viene dopo: il bordo rosso prevale */
.wpcf7-form input.wpcf7-not-valid:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="password"], [type="search"]),
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
	border-color: var(--dg-cf7-danger);
}

.wpcf7-form :is(input, select, textarea).wpcf7-not-valid:focus {
	box-shadow: 0 0 0 var(--dg-focus-ring-width, 0.25rem) color-mix(in srgb, var(--dg-cf7-danger) 25%, transparent);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	font-size: var(--dg-fs-sm, 0.875rem);
	font-weight: var(--dg-fw-normal, 400);
	color: var(--dg-cf7-danger);
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 0.875rem 1rem;
	font-size: var(--dg-fs-sm, 0.875rem);
	line-height: 1.5;
	border: var(--dg-border-width, 1px) solid var(--dg-cf7-warning);
	border-radius: var(--dg-cf7-field-radius);
	background-color: var(--dg-warning-bg-subtle, #fff3cd);
	color: var(--dg-warning-text-emphasis, #664d03);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--dg-cf7-success);
	background-color: var(--dg-success-bg-subtle, #d1e7dd);
	color: var(--dg-success-text-emphasis, #0a3622);
}

.wpcf7 form:is(.failed, .aborted, .spam) .wpcf7-response-output {
	border-color: var(--dg-cf7-danger);
	background-color: var(--dg-danger-bg-subtle, #f8d7da);
	color: var(--dg-danger-text-emphasis, #58151c);
}

/* ---------- Chi chiede meno animazioni ---------- */

@media (prefers-reduced-motion: reduce) {
	.wpcf7-form *,
	.wpcf7-form *::before {
		transition: none !important;
	}
}