/* =============================================================================
   Site forms -- Forminator, "none" design style (Plugins/active-carriers-site/includes/forms.php)

   Everything is scoped to the `.ac-form` wrapper printed by [ac_form key="..."]:
   .ac-form--quote (home #quote), .ac-form--contact (contact #enquiry).
   (The home-hero track card is a link, not a form: home.css .ac-track-card.)

   Matches the previous Elementor Pro form exactly (Figma "Input field" + Button):
   labels 14/1.55 600 navy900 + 8px gap, inputs 50px tall, 1px line300, radius 6,
   16/1.55 Inter, textarea 120, rows/columns 20px apart, buttons 56px 16/26 padding.

   Cascade: Forminator's grid sheet (forminator-grid.open) loads AFTER this file and uses
   (0,5,0) selectors -- `.forminator-ui.forminator-custom-form:not(.forminator-size--small)
   [data-grid=open] .forminator-row` -- for row/col margins, padding and flex. Rather than
   escalate selectors against vendor CSS, the few layout declarations it also sets carry
   !important (skill note). Everything else wins on specificity alone.
   Forminator's JS adds .forminator-size--small to forms <= 480px wide; nothing here
   depends on it, so layout follows the viewport breakpoints below, like the rest of the site.
   ========================================================================== */

.ac-form .forminator-ui.forminator-custom-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 20px;
	margin: 0;
	padding: 0;
	font-family: var(--e-global-typography-text-font-family), sans-serif;  /* shortcode output does not inherit Inter */
	color: var(--e-global-color-secondary);
}
/* Forminator prints every form with an inline display:none and reveals it from its
   footer script: a ~100px layout shift in the home hero, and no form at all without JS.
   Show it from first paint. (Only matters if Forminator hides the form deliberately --
   "hide form after submit" / expiry -- neither is used here.) */
.ac-form form.forminator-custom-form[style*="display: none"] { display: flex !important; }
/* Forminator's empty "loading" placeholder before the form. */
.ac-form > .forminator-ui:not(form) { display: none; }

/* Rows: full width by default; columns share a row 50/50 with a 20px gutter. */
.ac-form .forminator-custom-form .forminator-row {
	display: flex !important;
	flex: 1 1 100%;
	gap: 20px;
	min-width: 0;
	margin: 0 !important;
}
.ac-form .forminator-custom-form .forminator-row .forminator-col {
	flex: 1 1 0% !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ac-form .forminator-custom-form .forminator-field { position: relative; margin: 0; }

/* Note + submit share the last line: the note takes the slack, the button keeps its
   natural width (fixed % columns wrapped "Send enquiry" between 1025 and 1280). */
.ac-form .forminator-custom-form .forminator-row:has(> .ac-form-note-field) { flex: 1 1 0%; align-self: center; }
.ac-form .forminator-custom-form .forminator-row-last { flex: 0 0 auto; }

/* --- Labels ---------------------------------------------------------------- */
.ac-form .forminator-custom-form .forminator-label {
	display: block;
	margin: 0;
	padding: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--e-global-color-secondary);
}
/* Required fields were unmarked in the design; aria-required still says so. */
.ac-form .forminator-custom-form .forminator-required { display: none; }

/* --- Inputs, textarea, select ------------------------------------------------ */
.ac-form .forminator-custom-form :is(.forminator-input, .forminator-textarea, select) {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--e-global-color-line300);
	border-radius: 6px;
	background-color: var(--e-global-color-white);
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;                 /* 16px: iOS does not zoom on focus */
	font-weight: 400;
	line-height: 1.55;
	color: var(--e-global-color-secondary);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ac-form .forminator-custom-form .forminator-textarea {
	height: 120px;
	min-height: 120px;
	padding: 12px 14px;
	resize: vertical;
}
.ac-form .forminator-custom-form :is(.forminator-input, .forminator-textarea)::placeholder {
	color: var(--e-global-color-slate500);
	opacity: 1;
}
/* Native select with the Figma chevron-down (2.2px line) in place of the UA arrow. */
.ac-form .forminator-custom-form select {
	height: 50px;
	padding-right: 44px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2152' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px;
}
/* Focus: navy border + navy300 ring. Vendor field CSS is absent in "none" mode, but
   keep !important in step with the site-wide rule in global.css. */
.ac-form .forminator-custom-form :is(.forminator-input, .forminator-textarea, select):focus {
	border-color: var(--e-global-color-secondary) !important;
	box-shadow: 0 0 0 3px var(--e-global-color-navy300) !important;
	outline: none !important;
}

/* --- Note ------------------------------------------------------------------ */
.ac-form .ac-form-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--e-global-color-slate500);
}

/* --- Submit (beats global.css's Hello pink-button retirement: (0,1,1) / (0,2,1)) -- */
.ac-form .forminator-custom-form .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin: 0;
	padding: 16px 26px;
	border: 0;
	border-radius: 6px;
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease;
}
.ac-form .forminator-custom-form .forminator-button-submit:is(:hover, :focus) {
	background-color: var(--e-global-color-accent);
	color: var(--e-global-color-white);
}
.ac-form .forminator-custom-form .forminator-button-submit.forminator-button-onload { opacity: .7; cursor: progress; }

/* --- Validation ------------------------------------------------------------ */
.ac-form .forminator-custom-form .forminator-has_error :is(.forminator-input, .forminator-textarea, select) {
	border-color: var(--e-global-color-primary);
}
.ac-form .forminator-custom-form .forminator-error-message {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--e-global-color-accent);
}
.ac-form .forminator-custom-form .forminator-error-message:empty { display: none; }

/* --- Response message (success / error / sending) ---------------------------------
   Forminator prints it first in the form; shown under the button instead (order), where
   the Elementor form showed it and where the eye is after pressing Send. */
.ac-form .forminator-custom-form .forminator-response-message { display: none; order: 10; }
.ac-form .forminator-custom-form .forminator-response-message.forminator-show {
	display: block;
	flex: 1 1 100%;
	margin: 0;
	padding: 14px 16px;
	border-left: 3px solid var(--e-global-color-secondary);
	border-radius: 6px;
	background-color: var(--e-global-color-indigo100);
	font-size: 15px;
	line-height: 1.55;
	color: var(--e-global-color-secondary);
}
.ac-form .forminator-custom-form .forminator-response-message.forminator-error {
	border-left-color: var(--e-global-color-primary);
	background-color: var(--e-global-color-red100);
	color: var(--e-global-color-accent);
}
.ac-form .forminator-custom-form .forminator-response-message :is(p, label, span) { margin: 0; font: inherit; color: inherit; }
.ac-form .forminator-custom-form .forminator-response-message ul { margin: 6px 0 0; padding-left: 18px; }

/* --- Phones: one column; button full width; note under the button ------------- */
@media (max-width: 767px) {
	.ac-form .forminator-custom-form .forminator-row { flex-direction: column; }
	.ac-form .forminator-custom-form .forminator-row,
	.ac-form .forminator-custom-form .forminator-row-last { flex: 1 1 100%; }
	.ac-form .forminator-custom-form .forminator-row .forminator-col { flex: none !important; width: 100%; }
	.ac-form .forminator-custom-form .forminator-button-submit { width: 100%; }
	.ac-form .forminator-custom-form .forminator-row:has(> .ac-form-note-field) { order: 2; flex: 1 1 100%; margin-top: 4px !important; }
}