/*
 * Contact Form 7.
 * Caricato solo se CF7 è attivo. Il markup dei moduli usa .flex-form,
 * .flex-row e .form-field con le classi di colonna (vedi il modulo predefinito
 * nel plugin Floriani Accommodation).
 */

.wpcf7-form {
	scroll-margin-top: calc(var(--header-height) + 2rem);
}

.wpcf7 {
	--cf7-primary-color: var(--primary);
	--cf7-success-color: oklch(from var(--primary) 0.6 0.15 145);
	--cf7-error-color: var(--primary);
	--cf7-warning-color: var(--secondary);
	--cf7-text: var(--text-color);
	--cf7-text-size: 16px;
	--cf7-border-radius: var(--input-radius);
	--cf7-border: transparent;
	--cf7-border-active: transparent;
	--cf7-background: #fff;
	--cf7-padding: 1.5rem;
	accent-color: var(--cf7-primary-color);

	.flex-form .flex-row {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		width: 100%;
		margin-bottom: 1rem;
	}

	/* Griglia a 12 colonne: col-N (desktop), col-md-N (tablet), col-sm-N (mobile). */
	[class*='col-'] {
		flex: 1 0 auto;
	}

	.col-1 { flex-basis: calc(100% / 12 * 1 - 0.75rem); }
	.col-2 { flex-basis: calc(100% / 12 * 2 - 0.75rem); }
	.col-3 { flex-basis: calc(100% / 12 * 3 - 0.75rem); }
	.col-4 { flex-basis: calc(100% / 12 * 4 - 0.75rem); }
	.col-5 { flex-basis: calc(100% / 12 * 5 - 0.75rem); }
	.col-6 { flex-basis: calc(100% / 12 * 6 - 0.75rem); }
	.col-7 { flex-basis: calc(100% / 12 * 7 - 0.75rem); }
	.col-8 { flex-basis: calc(100% / 12 * 8 - 0.75rem); }
	.col-9 { flex-basis: calc(100% / 12 * 9 - 0.75rem); }
	.col-10 { flex-basis: calc(100% / 12 * 10 - 0.75rem); }
	.col-11 { flex-basis: calc(100% / 12 * 11 - 0.75rem); }
	.col-12 { flex-basis: 100%; }

	@media (max-width: 1024px) {
		.col-md-1 { flex-basis: calc(100% / 12 * 1 - 0.75rem); }
		.col-md-2 { flex-basis: calc(100% / 12 * 2 - 0.75rem); }
		.col-md-3 { flex-basis: calc(100% / 12 * 3 - 0.75rem); }
		.col-md-4 { flex-basis: calc(100% / 12 * 4 - 0.75rem); }
		.col-md-5 { flex-basis: calc(100% / 12 * 5 - 0.75rem); }
		.col-md-6 { flex-basis: calc(100% / 12 * 6 - 0.75rem); }
		.col-md-7 { flex-basis: calc(100% / 12 * 7 - 0.75rem); }
		.col-md-8 { flex-basis: calc(100% / 12 * 8 - 0.75rem); }
		.col-md-9 { flex-basis: calc(100% / 12 * 9 - 0.75rem); }
		.col-md-10 { flex-basis: calc(100% / 12 * 10 - 0.75rem); }
		.col-md-11 { flex-basis: calc(100% / 12 * 11 - 0.75rem); }
		.col-md-12 { flex-basis: 100%; }
	}

	@media (max-width: 767px) {
		.col-sm-1 { flex-basis: calc(100% / 12 * 1 - 0.75rem); }
		.col-sm-2 { flex-basis: calc(100% / 12 * 2 - 0.75rem); }
		.col-sm-3 { flex-basis: calc(100% / 12 * 3 - 0.75rem); }
		.col-sm-4 { flex-basis: calc(100% / 12 * 4 - 0.75rem); }
		.col-sm-5 { flex-basis: calc(100% / 12 * 5 - 0.75rem); }
		.col-sm-6 { flex-basis: calc(100% / 12 * 6 - 0.75rem); }
		.col-sm-7 { flex-basis: calc(100% / 12 * 7 - 0.75rem); }
		.col-sm-8 { flex-basis: calc(100% / 12 * 8 - 0.75rem); }
		.col-sm-9 { flex-basis: calc(100% / 12 * 9 - 0.75rem); }
		.col-sm-10 { flex-basis: calc(100% / 12 * 10 - 0.75rem); }
		.col-sm-11 { flex-basis: calc(100% / 12 * 11 - 0.75rem); }
		.col-sm-12 { flex-basis: 100%; }
	}
	/* Stili base */
	input[type='text'],
	input[type='number'],
	input[type='tel'],
	input[type='email'],
	input[type='date'],
	input[type='url'],
	input[type='password'],
	select,
	textarea {
		display: block;
		width: 100%;
		font-family: inherit;
		font-size: var(--cf7-text-size);
		outline: none;
		vertical-align: middle;
		background-color: var(--cf7-background);
		border: 1px solid var(--cf7-border);
		border-radius: var(--cf7-border-radius);
		box-shadow: none;
		padding-inline: var(--cf7-padding) !important;
		transition: all 0.5s;
		&:focus {
			border-color: var(--cf7-border-active);
		}
		&:user-invalid {
			&::placeholder {
				color: var(--cf7-error-color);
			}
		}
		&:user-valid {
			border-color: var(--cf7-border-active);
		}
		&::placeholder {
			color: var(--gray-dark);
			transition: opacity 0.5s ease;
		}
		&:focus::placeholder {
			opacity: 0.5;
		}
	}
	select,
	input[type='text'],
	input[type='number'],
	input[type='tel'],
	input[type='date'],
	input[type='email'],
	input[type='url'],
	input[type='password'] {
		margin: 0;
		box-sizing: border-box;
		line-height: 1.4;
		border-bottom: 1px solid var(--cf7-border);
		color: var(--cf7-text);
		flex-grow: 1;
		flex-basis: 100%;
		max-width: 100%;
		padding: 0.85rem 0;
		font-size: var(--cf7-text-size);
	}
	.wpcf7-form-control-wrap,
	.form-control-wrap {
		width: 100%;
		input[type='text'],
		input[type='email'],
		input[type='tel'],
		input[type='url'],
		input[type='password'],
		textarea {
			width: 100%;
		}
	}

	input[type='submit'] {
		margin: 0;
		outline: 0;
		box-sizing: border-box;
		display: block;
		line-height: 1;
		border-radius: var(--cf7-border-radius);
		fill: #fff;
		text-align: center;
		transition: all 0.3s;
		padding: 1.25rem 2.5rem !important;
		width: min(100%, 20rem);
		border: none;
		min-height: 40px;
		background-color: var(--primary) !important;
		flex-basis: 100%;
		color: #fff;
		margin-inline: auto;
		margin-top: 2rem;
		&:is(:hover, :active, :focus) {
			background-color: var(--primary-dark) !important;
		}
	}
	hr {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		border: none;
	}

	.submitting {
		opacity: 0.65;
		pointer-events: none;
		user-select: none;
		.wpcf7-spinner {
			display: none !important;
			position: absolute;
			opacity: 0;
		}
	}

	.wpcf7-not-valid-tip {
		font-size: var(--text-12-14) !important;
		margin-top: 0.5em;
		margin-bottom: 0.85em;
		font-family: sans-serif;
		color: var(--cf7-error-color);
	}

	.wpcf7-textarea {
		min-height: calc(4lh + 2 * var(--cf7-padding));
		max-height: calc(10lh + 2 * var(--cf7-padding));
		field-sizing: content;
		line-height: 1.5;
		padding-block: 0.75lh;
		padding-inline: calc(var(--cf7-padding) + calc((1lh - 1ex) / 2));
		margin-bottom: 0;
		resize: vertical;
	}

	/* Privacy */
	.wpcf7-acceptance {
		margin: 15px 5px 0 0 !important;
		color: var(--cf7-text);
		a {
			color: var(--primary) !important;
			text-underline-offset: 0.25rem;
			transition:
				text-decoration-thickness 0.25s ease,
				text-underline-offset 0.25s ease,
				color 0.25s ease;
			&:is(:hover, :active, :focus) {
				color: var(--primary-dark) !important;
				text-decoration-line: underline;
				text-underline-offset: 0.18em;
				text-decoration-thickness: 1px;
				text-decoration-style: wavy;
				text-decoration-color: var(--primary-dark);
			}
			.wpcf7-list-item {
				margin: 0 !important;
			}
		}
	}

	.wpcf7-form-control-wrap[data-name='privacy'] {
		display: block;
		width: 100%;

		.wpcf7-acceptance {
			display: block;
			margin: 0 !important;
		}

		.wpcf7-list-item {
			display: block;
			margin: 0 !important;
		}

		label {
			position: relative;
			display: block;
		}

		input[type='checkbox'] {
			position: absolute;
			inline-size: 1px !important;
			block-size: 1px !important;
			margin: 0 !important;
			padding: 0 !important;
			overflow: hidden;
			clip: rect(0 0 0 0);
			clip-path: inset(50%);
			white-space: nowrap;

			&:checked + .wpcf7-list-item-label::before {
				background: var(--cf7-primary-color);
				border-color: var(--cf7-primary-color) !important;
			}

			&:checked + .wpcf7-list-item-label::after {
				opacity: 1;
			}

			&:focus-visible + .wpcf7-list-item-label::before {
				outline: 2px solid
					color-mix(in srgb, var(--cf7-primary-color), white 55%);
				outline-offset: 2px;
			}
		}

		.wpcf7-list-item-label {
			position: relative;
			display: block;
			padding-left: calc(1.125rem + 0.75rem);
			line-height: 1.55;
			font-size: var(--text-12-14);

			&::before {
				content: '';
				position: absolute;
				top: 0.18em;
				left: 0;
				width: 1.125rem;
				height: 1.125rem;
				border: 1px solid var(--cf7-border) !important;
				border-radius: 0.2rem;
				background: #fff;
				box-sizing: border-box;
				cursor: pointer;
			}

			&::after {
				content: '';
				position: absolute;
				left: 0.38rem;
				top: 0.36em;
				width: 0.28rem;
				height: 0.58rem;
				border-right: 2px solid #fff;
				border-bottom: 2px solid #fff;
				transform: rotate(45deg);
				opacity: 0;
			}
		}
	}

	.wpcf7-list-item,
	input[type='checkbox'] {
		margin-left: 0 !important;
		vertical-align: middle;
	}

	.wpcf7-response-output {
		margin: 0 0 5rem !important;
		padding: 2.5em 1em !important;
		background: none;
		border-width: 0 !important;
		border-radius: var(--radius-sm);
		text-align: center;
		text-wrap: balance;
		font-family: var(--base-font-family);
		&:empty {
			display: none !important;
		}
	}

	form.sent .wpcf7-response-output {
		border-color: var(--cf7-success-color);
		background-color: var(--cf7-success-color);
		color: #fff;
	}

	form.failed .wpcf7-response-output,
	form.aborted .wpcf7-response-output,
	form.spam .wpcf7-response-output {
		border-color: var(--cf7-error-color);
		background-color: var(--cf7-error-color);
		color: #fff;
		font-weight: 500;
	}

	form.invalid .wpcf7-response-output,
	form.unaccepted .wpcf7-response-output {
		border-color: var(--cf7-warning-color);
		background-color: var(--cf7-warning-color);
		font-weight: 500;
	}

	/* rimuovi alone azzurro autocomplete*/
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		-webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0) inset !important;
	}
}

/* Calendario jQuery UI dei campi data (plugin Advanced Datepicker). */
.ui-datepicker {
	padding: 15px;
	border: 0;
	border-radius: 1em;
	box-shadow: 0 0 1rem rgb(0 0 0 / 0.2);
	font-family: var(--base-font-family);
}

.ui-datepicker .ui-widget-header {
	margin-bottom: 0.5rem;
	border: 0;
	background: #fff;
	color: var(--gray-dark);
}

.ui-datepicker .ui-datepicker-calendar :is(a, span) {
	border: 4px solid transparent;
	border-radius: var(--radius-sm);
	text-align: center;
}

.ui-datepicker :is(.ui-state-hover, .ui-state-focus) {
	background: var(--secondary);
	color: #fff;
}

.ui-datepicker .ui-state-active {
	background: var(--primary);
	color: #fff;
}