/* ============================================================
 * FluentForm theme overrides — maps the plugin's default markup onto
 * the white "form-card" design from the mockup. Loaded by
 * functions.php only when FluentForm is active. Selectors target the
 * FluentForm-emitted classes; the form HTML itself isn't ours so we
 * can't add custom wrappers — instead we make the <form> element the
 * white card.
 * ============================================================ */

/* Outer cap. The shortcode block sits inside `.wp-block-shortcode`,
 * which sits inside `.entry-content` — wrap it visually so the form
 * matches the .preventivo-wrap (720px) of the mockup. */
.wp-block-shortcode:has( .frm-fluent-form ),
.entry-content > .wp-block-shortcode:has( .frm-fluent-form ) {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* The <form> itself becomes the white card. */
.frm-fluent-form.ffs_default {
	background: var(--color-fg-white);
	color: var(--color-fg-inverse);
	border: none;
	border-radius: var(--radius-sm);
	padding: 56px 48px;
	position: relative;
	overflow: hidden;
}
@media (max-width: 520px) {
	.frm-fluent-form.ffs_default { padding: 36px 24px; }
}

/* Reset FluentForm's fieldset default that adds extra padding/border. */
.frm-fluent-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
}

/* ---- Field group ---- */
.frm-fluent-form .ff-el-group {
	margin-bottom: 14px;
}

/* Labels */
.frm-fluent-form .ff-el-input--label label {
	font-size: 13px;
	font-weight: var(--weight-medium);
	color: var(--color-fg-inverse-muted);
	margin-bottom: 6px;
	display: inline-block;
}
/* Drop FluentForm's red required-asterisk colour and use the same
 * muted style as the label so the form reads quieter. */
.frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	color: var(--color-fg-inverse-muted);
}

/* Inputs + textarea */
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form input[type="text"].ff-el-form-control,
.frm-fluent-form input[type="email"].ff-el-form-control,
.frm-fluent-form input[type="tel"].ff-el-form-control,
.frm-fluent-form input[type="url"].ff-el-form-control,
.frm-fluent-form input[type="number"].ff-el-form-control,
.frm-fluent-form textarea.ff-el-form-control,
.frm-fluent-form select.ff-el-form-control {
	background: transparent;
	border: 1px solid rgba(9, 9, 11, 0.18);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	color: var(--color-fg-inverse);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	width: 100%;
	box-shadow: none;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}
.frm-fluent-form .ff-el-form-control::placeholder,
.frm-fluent-form textarea::placeholder {
	color: rgba(9, 9, 11, 0.4);
}
.frm-fluent-form .ff-el-form-control:focus,
.frm-fluent-form .ff-el-form-control:focus-visible {
	border-color: var(--color-fg-inverse);
	background: rgba(9, 9, 11, 0.03);
	box-shadow: none;
	outline: none;
}
.frm-fluent-form textarea.ff-el-form-control {
	resize: vertical;
	min-height: 140px;
	line-height: 1.55;
}

/* ---- Column / row layout ---- */
/* The Name field group renders as a nested 2-cell container; the */
/* Email/Phone row uses the FluentForm columns shortcode — both end up */
/* as `.ff-t-container` with `.ff-t-cell` children. Make them a 2-col */
/* grid with a small gutter, collapsing on narrow screens. */
.frm-fluent-form .ff-t-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.frm-fluent-form .ff-t-container.ff_columns_total_2 { grid-template-columns: 1fr 1fr; }
.frm-fluent-form .ff-t-container.ff_columns_total_3 { grid-template-columns: 1fr 1fr 1fr; }
.frm-fluent-form .ff-t-container.ff_columns_total_4 { grid-template-columns: repeat(4, 1fr); }
.frm-fluent-form .ff-t-cell { min-width: 0; }

/* The Name composite nests its own ff-t-container (Nome / Cognome) with no
 * ff_columns_total_* class — keep it an explicit 2-col row. The outer
 * single-column wrapper (ff_columns_total_1) stays 1fr so the name block
 * spans full width instead of being squeezed into the left half. */
.frm-fluent-form .ff-name-field-wrapper .ff-t-container { grid-template-columns: 1fr 1fr; }

@media (max-width: 520px) {
	.frm-fluent-form .ff-t-container,
	.frm-fluent-form .ff-name-field-wrapper .ff-t-container {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ---- Submit button ----
 * FluentForm injects a per-form `<style>` block setting
 * `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)` (specificity
 * 0,3,1). Match the same specificity so cascade order wins. */
form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style),
form.frm-fluent-form button.ff-btn:not(.ff_btn_no_style),
form.frm-fluent-form input[type="submit"].ff-btn:not(.ff_btn_no_style) {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	margin-top: 10px;
	background-color: var(--color-btn-dark);
	background-image: none;
	color: var(--color-fg-white);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: -0.005em;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--duration) var(--ease);
	box-shadow: none;
	text-shadow: none;
}
form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover,
form.frm-fluent-form button.ff-btn:not(.ff_btn_no_style):hover {
	background-color: var(--color-btn-dark-hover);
	transform: translateY(-1px);
	color: var(--color-fg-white);
}
form.frm-fluent-form .ff-btn-submit:disabled {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

/* ---- Privacy / GDPR check ---- */
.frm-fluent-form .ff_gdpr_field,
.frm-fluent-form .ff-el-form-check {
	margin-top: 14px;
}
.frm-fluent-form .ff-el-form-check-label,
.frm-fluent-form .ff_gdpr_field label {
	font-size: 12px;
	color: rgba(9, 9, 11, 0.55);
	line-height: 1.5;
}
.frm-fluent-form .ff-el-form-check-label a,
.frm-fluent-form .ff_gdpr_field a {
	color: var(--color-fg-inverse);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.frm-fluent-form .ff-el-form-check-input {
	accent-color: var(--color-fg-inverse);
	margin-right: 8px;
}

/* ---- Validation / errors ---- */
.frm-fluent-form .ff-el-form-control.error,
.frm-fluent-form .ff-el-form-control.parsley-error,
.frm-fluent-form .ff-el-form-control[aria-invalid="true"] {
	border-color: var(--color-error);
	background: rgba(239, 68, 68, 0.04);
}
.frm-fluent-form .error_placeholder,
.frm-fluent-form .ff-el-input--content > .text-danger,
.frm-fluent-form ul.parsley-errors-list {
	color: var(--color-error);
	font-size: 12.5px;
	line-height: 1.4;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

/* ---- Success message ---- */
.fluent_form_8 + .ff-message-success,
.ff-message-success {
	margin-top: 16px;
	padding: 14px 16px;
	background: rgba(74, 222, 128, 0.08);
	border: 1px solid rgba(74, 222, 128, 0.3);
	border-radius: 10px;
	color: var(--color-success);
	font-size: 14px;
}

/* Hide FluentForm's default screen-reader legend visually (it's there
 * for a11y — don't remove, just keep it visually hidden). */
.frm-fluent-form .ff_screen_reader_title {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}