/*
 * WPForms skin shared by the popup and the contact form block. Wrap the form in an element with class .sm-wpforms.
 * Field bg: set --sm-form-field-bg on the wrapper (default pale). Caret / check icons: --sm-form-caret, --sm-form-check (url()).
 * Layout: fields are full width; give a field the CSS class sm-half to put two fields side by side.
 */
/* ---------- WPForms ---------- */
.sm-wpforms .wpforms-container {
	margin: 0;
	padding: 0;
}

.sm-wpforms .wpforms-container .wpforms-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--32);
}

.sm-wpforms .wpforms-container .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--24);
}

.sm-wpforms .wpforms-container .wpforms-field {
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}

/* Fields span both columns unless they carry the field CSS class sm-half (WPForms > field > Advanced > CSS Classes).
   Do not count children: WPForms inserts a hidden anti-spam field inside the container. */
.sm-wpforms .wpforms-container .wpforms-field {
	grid-column: 1 / -1;
}

.sm-wpforms .wpforms-container .wpforms-field.sm-half {
	grid-column: auto;
}

.sm-wpforms .wpforms-container .wpforms-field-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: 26px;
	color: var(--wp--preset--color--brand-navy);
}

.sm-wpforms .wpforms-container .wpforms-required-label {
	color: inherit;
}

.sm-wpforms .wpforms-container input[type="text"],
.sm-wpforms .wpforms-container input[type="email"],
.sm-wpforms .wpforms-container input[type="tel"],
.sm-wpforms .wpforms-container input[type="number"],
.sm-wpforms .wpforms-container select,
.sm-wpforms .wpforms-container textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--neutral-line);
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--sm-form-field-bg, var(--wp--preset--color--neutral-pale));
	box-shadow: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: 26px;
	color: var(--wp--preset--color--brand-navy);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sm-wpforms .wpforms-container textarea {
	height: 128px;
	padding-top: 14px;
	padding-bottom: 14px;
	resize: vertical;
}

.sm-wpforms .wpforms-container ::placeholder {
	color: var(--wp--preset--color--neutral-muted);
	opacity: 0.7;
}

.sm-wpforms .wpforms-container select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 48px;
	background-image: var(--sm-form-caret);
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 20px 20px;
	cursor: pointer;
}

.sm-wpforms .wpforms-container input:focus,
.sm-wpforms .wpforms-container select:focus,
.sm-wpforms .wpforms-container textarea:focus {
	border-color: var(--wp--preset--color--brand-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand-blue) 25%, transparent);
	outline: none;
}

.sm-wpforms .wpforms-container .wpforms-field-description {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 22px;
	color: var(--wp--preset--color--neutral-muted);
}

/* Taller message box: give the field the CSS class sm-tall (Figma sesizare form = 200px) */
.sm-wpforms .wpforms-container .wpforms-field.sm-tall textarea {
	height: 200px;
}

/* Rating scale: radio field with the CSS class sm-scale shows its choices as 64 x 56 buttons (Figma 1-5 scale),
   the selected one navy. The radio itself stays in the DOM, visually hidden, for keyboard + screen readers. */
.sm-wpforms .wpforms-container .wpforms-field.sm-scale ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-wpforms .wpforms-container .wpforms-field.sm-scale li {
	position: relative;
	margin: 0;
	padding: 0;
}

.sm-wpforms .wpforms-container .wpforms-field.sm-scale input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.sm-wpforms .wpforms-container .wpforms-field.sm-scale label.wpforms-field-label-inline {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 56px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--neutral-line);
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--sm-form-field-bg, var(--wp--preset--color--neutral-pale));
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 26px;
	color: var(--wp--preset--color--brand-navy);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sm-wpforms .wpforms-container .wpforms-field.sm-scale li:hover label.wpforms-field-label-inline {
	border-color: var(--wp--preset--color--brand-navy);
}

.sm-wpforms .wpforms-container .wpforms-field.sm-scale input:checked + label.wpforms-field-label-inline {
	border-color: var(--wp--preset--color--brand-navy);
	background-color: var(--wp--preset--color--brand-navy);
	color: var(--wp--preset--color--neutral-white);
}

.sm-wpforms .wpforms-container .wpforms-field.sm-scale input:focus-visible + label.wpforms-field-label-inline {
	outline: 2px solid var(--wp--preset--color--brand-blue);
	outline-offset: 2px;
}

/* Date field: calendar icon on the right (--sm-form-calendar) */
.sm-wpforms .wpforms-container .wpforms-field-date-time input[type="text"] {
	padding-right: 48px;
	background-image: var(--sm-form-calendar);
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 20px 20px;
}

/* Errors */
.sm-wpforms .wpforms-container label.wpforms-error,
.sm-wpforms .wpforms-container .wpforms-error-container {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 22px;
	color: var(--wp--preset--color--brand-red);
}

.sm-wpforms .wpforms-container input.wpforms-error,
.sm-wpforms .wpforms-container select.wpforms-error,
.sm-wpforms .wpforms-container textarea.wpforms-error {
	border-color: var(--wp--preset--color--brand-red);
}

/* Consent checkbox: 24px square, 1.5px muted border, radius 4, 12px gap to the text */
.sm-wpforms .wpforms-container .wpforms-field-checkbox ul,
.sm-wpforms .wpforms-container .wpforms-field-gdpr-checkbox ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-wpforms .wpforms-container .wpforms-field-checkbox li,
.sm-wpforms .wpforms-container .wpforms-field-gdpr-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.sm-wpforms .wpforms-container input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 1px 0 0;
	border: 1.5px solid var(--wp--preset--color--neutral-muted);
	border-radius: 4px;
	background-color: var(--wp--preset--color--neutral-white);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	cursor: pointer;
}

.sm-wpforms .wpforms-container input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--brand-red);
	background-color: var(--wp--preset--color--brand-red);
	background-image: var(--sm-form-check);
}

.sm-wpforms .wpforms-container input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-blue);
	outline-offset: 2px;
}

.sm-wpforms .wpforms-container .wpforms-field-checkbox li label,
.sm-wpforms .wpforms-container .wpforms-field-gdpr-checkbox li label {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 26px;
	color: var(--wp--preset--color--brand-navy);
}

.sm-wpforms .wpforms-container .wpforms-field-checkbox li label a,
.sm-wpforms .wpforms-container .wpforms-field-gdpr-checkbox li label a {
	color: inherit;
	text-decoration: underline;
}

/* Submit row: button 212 x 56 + note (moved here by view.js) */
.sm-wpforms .wpforms-container .wpforms-submit-container {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	margin: 0;
	padding: 0;
}

.sm-wpforms .wpforms-container button.wpforms-submit {
	flex: none;
	min-width: 212px;
	height: 56px;
	margin: 0;
	padding: 0 24px;
	border: 1.5px solid var(--wp--preset--color--brand-red);
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--wp--preset--color--brand-red);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-white);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sm-wpforms .wpforms-container button.wpforms-submit:hover {
	border-color: var(--wp--preset--color--brand-red-dark);
	background-color: var(--wp--preset--color--brand-red-dark);
}

.sm-wpforms .wpforms-container .wpforms-submit-spinner {
	flex: none;
}

/* Confirmation after sending */
.sm-wpforms .wpforms-confirmation-container-full,
.sm-wpforms .wpforms-confirmation-container {
	margin: 0;
	padding: var(--wp--preset--spacing--24);
	border: 1px solid var(--wp--preset--color--neutral-line);
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--wp--preset--color--neutral-pale);
	font-size: var(--wp--preset--font-size--body);
	line-height: 26px;
	color: var(--wp--preset--color--brand-navy);
}

@media (max-width: 767px) {
	.sm-wpforms .wpforms-container .wpforms-field-container {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--16);
	}

	.sm-wpforms .wpforms-container .wpforms-submit-container {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--16);
	}

	.sm-wpforms .wpforms-container button.wpforms-submit {
		width: 100%;
	}
}