/*
 * Contact Form 7. Caricato solo dove CF7 carica i propri stili.
 * I campi ereditano lo stile "Campi modulo" del Kit (che vince su queste regole).
 * ECCEZIONI: checkbox/radio (0,4,1) per non ricevere padding/bordi dei campi del Kit;
 * box di risposta con gli stessi selettori di CF7 (caricato dopo).
 */

:where(.wpcf7-form) {
	display: grid;
	gap: 24px;
}

:where(.tl-form-row) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 768px) {
	:where(.tl-form-row) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:where(.tl-col-12) {
		grid-column: 1 / -1;
	}
}

:where(.wpcf7-form label, .tl-form-label) {
	display: block;
	color: var(--e-global-color-secondary, #2B2A28);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
}

:where(.wpcf7-form-control-wrap) {
	display: block;
	margin-top: 8px;
	letter-spacing: normal;
	text-transform: none;
}

:where(.wpcf7-form :is(input:not([type="checkbox"], [type="radio"], [type="submit"]), select, textarea)) {
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-tlgrey, #8A847B);
	border-radius: 2px;
	background-color: var(--e-global-color-tlwhite, #fff);
	color: var(--e-global-color-secondary, #2B2A28);
	font-family: var(--tl-font-text);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	transition: border-color var(--tl-dur-fast, .2s) var(--tl-ease-std);
}

:where(.wpcf7-form textarea) {
	min-height: 160px;
	padding-block: 14px;
	resize: vertical;
}

:where(.wpcf7-form select) {
	padding-inline-end: 44px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23202631' stroke-width='1.5'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 12px;
}

:where(.wpcf7-form :is(input, select, textarea):hover) {
	border-color: var(--e-global-color-secondary, #2B2A28);
}

:where(.wpcf7-form :is(input, select, textarea):focus-visible) {
	border-color: var(--e-global-color-primary, #202631);
	outline: 2px solid var(--tl-focus, var(--e-global-color-tlgoldink, #84693E));
	outline-offset: 2px;
}

:where(.wpcf7-form label > [aria-hidden="true"]) {
	display: inline;
	margin-inline-start: .15em;
}

:where(.wpcf7-form :is(input, select, textarea):disabled) {
	background-color: var(--e-global-color-tlbgsoft, #FAFAFA);
	color: var(--e-global-color-tlmuted, #6E6960);
}

:where(.wpcf7-form .wpcf7-not-valid) {
	border-width: 2px;
	border-color: var(--e-global-color-tlerror, #B3261E);
}

:where(.wpcf7-not-valid-tip) {
	display: flex;
	gap: 6px;
	margin-top: 6px;
	color: var(--e-global-color-tlerror, #B3261E);
	font-size: .875rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

:where(.wpcf7-not-valid-tip)::before {
	content: "!";
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: currentColor;
	color: var(--e-global-color-tlwhite, #fff);
	font-size: .75rem;
	font-weight: 700;
}

/* Fieldset numerati (form "Crea il tuo viaggio") */
:where(.tl-fieldset) {
	margin: 0;
	padding: 40px 0 0;
	border: 0;
	border-top: 1px solid var(--e-global-color-tlline, #E4E0D9);
	min-width: 0;
}

:where(.tl-fieldset > legend) {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 24px;
	padding: 0;
	color: var(--e-global-color-primary, #202631);
	font-family: var(--tl-font-title);
	font-size: 1.25rem;
	line-height: 1.35;
}

:where(.tl-fieldset__num) {
	color: var(--e-global-color-accent, #967647);
	font-size: 1.5rem;
}

/* Gruppi di scelte */
:where(.tl-choice) {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

:where(.tl-choice > legend) {
	margin-bottom: 12px;
	padding: 0;
}

:where(.wpcf7-checkbox, .wpcf7-radio) {
	display: grid;
	gap: 0 24px;
}

@media (min-width: 768px) {
	:where(.tl-choice :is(.wpcf7-checkbox, .wpcf7-radio)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

:where(.wpcf7-list-item) {
	margin: 0;
}

:where(.wpcf7-list-item label, .tl-form-check label) {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: var(--e-global-color-text, #444);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.wpcf7 .wpcf7-form .wpcf7-list-item input:is([type="checkbox"], [type="radio"]) {
	flex: none;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--e-global-color-tlgrey, #8A847B);
	border-radius: 2px;
	background: var(--e-global-color-tlwhite, #fff) center / 12px no-repeat;
	appearance: none;
	cursor: pointer;
}

.wpcf7 .wpcf7-form .wpcf7-list-item input[type="radio"] {
	border-radius: 50%;
}

.wpcf7 .wpcf7-form .wpcf7-list-item input:is([type="checkbox"], [type="radio"]):checked {
	border-color: var(--e-global-color-primary, #202631);
	background-color: var(--e-global-color-primary, #202631);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
}

.wpcf7 .wpcf7-form .wpcf7-list-item input:is([type="checkbox"], [type="radio"]):hover {
	border-color: var(--e-global-color-primary, #202631);
}

.wpcf7 .wpcf7-form .wpcf7-list-item input:is([type="checkbox"], [type="radio"]):disabled {
	opacity: .4;
}

/* Privacy */
:where(.tl-form-privacy) {
	font-size: .875rem;
}

:where(.tl-form-privacy label, .tl-form-privacy .wpcf7-list-item-label) {
	font-size: inherit;
}

:where(.tl-form-privacy a) {
	text-decoration: underline;
}

/* Invio */
:where(.tl-form-submit) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

:where(.wpcf7-submit) {
	width: 100%;
}

@media (min-width: 768px) {
	:where(.wpcf7-submit) {
		width: auto;
		min-width: 240px;
	}
}

:where(.wpcf7-form[data-status="submitting"] .wpcf7-submit) {
	opacity: .6;
	cursor: progress;
}

:where(.wpcf7-spinner) {
	margin: 0;
}

/* Risposta globale (stessi selettori di CF7) */
.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 16px 20px;
	border: 0;
	border-inline-start: 3px solid var(--e-global-color-tlerror, #B3261E);
	background: #FBEDEC;
	color: var(--e-global-color-secondary, #2B2A28);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--e-global-color-tlsuccess, #2E6B4F);
	background: #EEF5F1;
}

/* Variante su scuro */
:where(.tl-form--dark .wpcf7-form :is(input:not([type="checkbox"], [type="radio"], [type="submit"]), select, textarea)) {
	border-color: var(--e-global-color-tlstone, #BDB7AE);
	background-color: transparent;
	color: var(--tl-c-white, #fff);
}

:where(.tl-form--dark .wpcf7-form :is(label, .tl-form-label, .wpcf7-list-item label)) {
	color: var(--tl-c-white, #fff);
}