/* =============================================================================
 * PPR — Fluent Forms styling
 *
 * These rules also exist in child-custom.css. They are repeated in this separate
 * file for one reason: LOAD ORDER.
 *
 * Fluent Forms enqueues its stylesheets when the shortcode is rendered. On a
 * page whose form sits in the content of a Visual Composer template
 * (/coming-soon-nayamara/, template-vc.php) that happens AFTER the theme's
 * stylesheets, so fluent-forms-public.css landed at position 29-30 while
 * child-custom.css was at 27 — and Fluent's defaults overrode every rule here.
 * On /playa-caracol/ (custom landing template) the form renders earlier, Fluent
 * lands at 9-10, and the same rules won. Identical CSS, opposite result,
 * depending only on the template.
 *
 * This file is enqueued with a dependency on Fluent's own handles
 * (fluent-form-styles, fluentform-public-default), so WordPress is obliged to
 * print it after them on every template. No !important needed.
 * ========================================================================== */

/* Labels: bold and dark, like Caldera's. */
.fluentform .ff-el-input--label label {
	font-weight: 700;
	color: #1b1b1b;
	margin-bottom: 0;
}


.fluentform .ff-el-input--label.ff-el-is-required label:after {
	color: #e2401c;
}


/* Inputs: full width of their column, square corners, light grey border. */ .fluentform .ff-el-form-control {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	margin: 0;
	display: block;
	border: 1px solid #ccc;
	border-radius: 0;
	/* Taller than Fluent's default so the inputs match the weight of the rest of
	   the page; Caldera's were similarly generous. */
	padding: 14px 12px;
	line-height: 1.4;
	height: auto;
	background: #fff;
	box-shadow: none;
}


.fluentform textarea.ff-el-form-control {
	min-height: 150px;
}


/* Field spacing between rows. */ .fluentform .ff-el-group {
	margin-bottom: 18px;
	text-align: left;
}


/* Consent: small text beside the checkbox, full width — as Caldera renders it. */ .fluentform .ff-el-group.ff-el-form-check {
	max-width: 100%;
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.5;
}


.fluentform .ff-el-form-check-label {
	font-weight: 400;
	color: #1b1b1b;
}


/* Submit: Caldera's inline button colour (.caldera-grid input[type=submit]). */ .fluentform .ff-btn-submit, .fluentform .ff_submit_btn_wrapper button {
	background: #2B67B1 !important;
	border: 0;
	width: auto !important;
	padding: 10px 15px !important;
	font-size: 1em !important;
	color: #fff !important;
	border-radius: 0;
}


/* Validation message placement. */ .fluentform .ff-el-is-error .text-danger, .fluentform .error.text-danger {
	color: #e2401c;
	font-size: 13px;
}


/* While a submission is in flight, grey the form out and block interaction so it cannot be edited or submitted twice. This hangs off `ff_submitting`, which Fluent Forms puts on the form itself (showFormSubmissionProgress) and removes again in hideFormSubmissionProgress — including when validation fails. Using the plugin's own state class means the form re-enables itself on error with no JS of ours to get out of step. pointer-events rather than the `disabled` attribute on purpose: Fluent submits over AJAX, and disabled inputs are not serialised, so disabling them would strip the values out of the payload. The submit button is genuinely disabled below — buttons are not part of the payload. */ .fluentform form.ff_submitting, .fluentform .frm-fluent-form.ff_submitting, form.frm-fluent-form.ff_submitting {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease;
}


.fluentform form.ff_submitting .ff-btn-submit, form.frm-fluent-form.ff_submitting .ff-btn-submit {
	cursor: not-allowed;
}
/* Breathing room at the sides of the form.
 * Reported on /coming-soon-nayamara/, where the fields ran flush into the edges
 * of the white panel the VC template puts around them. Applied to the form
 * wrapper rather than the panel so it holds wherever the form is embedded. */
.fluentform,
form.frm-fluent-form {
	padding-left: 22px;
	padding-right: 22px;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.fluentform,
	form.frm-fluent-form {
		padding-left: 14px;
		padding-right: 14px;
	}
}