/* ─── AL Form bridge ───
   The static templates hand-authored the form; the plugin renders an Elementor Forms
   template inside the same `.al-form` shell. contact.css styles `.al-form input/select/
   textarea` by element, so Elementor's fields inherit the look already — this file only
   neutralises Elementor's own grid and paddings so the spacing matches the templates. */

.al-form .elementor-form { display: block; }

.al-form .elementor-field-group {
	padding: 0 !important;
	margin: 0 0 18px;
	max-width: 100%;
}
.al-form .elementor-field-group > label.elementor-field-label {
	display: block;
	font-family: var(--font-display);
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	/* Elementor forces line-height:1 on form labels, which makes the label box 14px against
	   the template's 22px and pulls every row 8px short. The templates let labels inherit
	   the body 1.65. Measured on /services/: form 409 against the mockup's 452. */
	line-height: 1.65;
	margin-bottom: 8px;
	padding: 0;
}

/* Two fields side by side. Elementor form fields have no per-field CSS-class option — the
   control is Column Width, which emits elementor-col-50 / elementor-col-100. Use that
   rather than a custom class, and do not force width above or the setting is dead. */
.al-form .elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; column-gap: 16px; }
.al-form .elementor-field-group.elementor-col-100 { width: 100%; }
.al-form .elementor-field-group.elementor-col-50  { width: calc(50% - 8px); }
@media (max-width: 720px) {
	.al-form .elementor-field-group.elementor-col-50 { width: 100%; }
}

.al-form .elementor-field-type-submit { margin-bottom: 0; }
/* An HTML field carries its own spacing (the address hint uses margin-top:-10px) AND sits in a
   field-group whose 18px row gap is compiled into post-<id>.css at (0,4,0) — which no stylesheet
   here can beat. So the group keeps its gap and the hint gives up its own bottom margin; the
   flow height then matches the template's 29px. Trying it the other way round left it 9px out. */
.al-form .elementor-field-type-html .al-form__hint { margin-bottom: 0; }
.al-form .elementor-field-type-submit button,
.al-form button[type="submit"] {
	width: 100%;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: var(--font-display); font-weight: 700; font-size: 16px;
	/* `.elementor-button { line-height: 1 }` makes the submit 51px against the template's 53. */
	line-height: normal;
	padding: 16px 30px; border-radius: var(--r-pill); border: 1.5px solid transparent;
	background: var(--red); color: #fff; cursor: pointer;
	box-shadow: 0 8px 22px rgba(227,73,58,.28);
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.al-form .elementor-field-type-submit button:hover,
.al-form button[type="submit"]:hover {
	transform: translateY(-2px);
	background: var(--red-dk);
	box-shadow: 0 12px 30px rgba(227,73,58,.36);
}

.al-form .elementor-message { margin-top: 14px; font-size: 13px; color: #8f8f99; }
.al-form .elementor-message.elementor-message-success { color: #6fd39b; }
.al-form .elementor-message.elementor-message-danger { color: #ff9a90; }

/* ─── Field styling ───
   Measured 2026-08-07: Elementor emits `.elementor-field-group .elementor-field` at (0,2,0),
   which outranks al-contact.css's `.al-form input` at (0,1,1) — so the fields rendered white
   on white with a bone submit button. Inheritance does NOT happen here; the bridge has to
   restate the dark styling at (0,3,0) to win. */
.al-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper),
.al-form .elementor-field-group .elementor-field-textual {
	width: 100%;
	font-family: var(--font);
	font-size: 16px;
	color: #fff;
	padding: 15px 16px;
	border: 1.5px solid rgba(255, 255, 255, .16);
	border-radius: var(--r);
	background-color: rgba(255, 255, 255, .06);
	/* The static build leaves this at `normal`, giving 52px fields. Elementor's global
	   typography sets 22.4px on inputs and 30.5px on selects — 55px and 64px. Matching the
	   design means restoring `normal`, not equalising the two against each other. */
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.al-form .elementor-field-group textarea.elementor-field { resize: vertical; min-height: 104px; }

/* ─── Selects ───
   Elementor wraps a select in `.elementor-select-wrapper`, and that wrapper ALSO carries
   `.elementor-field`. Styling `.elementor-field` therefore drew the field twice, nested:
   an outer 471x97 box and an inner 425x64 one, each with its own border and background.
   Measured 2026-08-07 — it read as two arrows, and the native dropdown anchored to the
   inner select, so the list opened in the wrong place.

   The wrapper is now a bare positioning context; only the select is styled. */
.al-form .elementor-field-group .elementor-select-wrapper {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	background: none;
}
.al-form .elementor-field-group .elementor-select-wrapper select {
	width: 100%;
	line-height: normal;
	padding-right: 44px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* The mockup's chevron: thin stroked, rounded caps, 15px, 16px from the right edge.
	   Elementor's own glyph is a solid filled triangle and does not match the design. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0ba' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 15px;
}
/* Elementor's caret is hidden, not restyled: it is a solid filled triangle
   (e-eicon-caret-down) and the design uses a thin stroked chevron. The chevron above is
   painted on the select itself, so there is exactly one arrow. */
.al-form .elementor-field-group .select-caret-down-wrapper { display: none; }

.al-form .elementor-field-group select.elementor-field option { color: var(--ink); background: #fff; }

.al-form .elementor-field-group .elementor-field::placeholder { color: #6f6f79; }
.al-form .elementor-field-group .elementor-field:hover { border-color: rgba(255, 255, 255, .3); }
.al-form .elementor-field-group .elementor-field:focus {
	outline: none;
	border-color: var(--red);
	box-shadow: 0 0 0 4px rgba(227, 73, 58, .22);
}

/* Elementor's own button classes also outrank the earlier rule, hence the repeat at
   higher specificity. Red is reserved for calling — the submit button is the one
   conversion action on the page, so it keeps it. */
.al-form .elementor-field-type-submit button.elementor-button,
.al-form .elementor-field-type-submit .elementor-button[type="submit"] {
	background-color: var(--red);
	color: #fff;
	border: 1.5px solid transparent;
	border-radius: var(--r-pill);
	box-shadow: 0 8px 22px rgba(227, 73, 58, .28);
}
.al-form .elementor-field-type-submit button.elementor-button:hover {
	background-color: var(--red-dk);
	box-shadow: 0 12px 30px rgba(227, 73, 58, .36);
}
.al-form .elementor-field-type-submit .elementor-button-content-wrapper {
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
}

/* ─── Where the form's colours live ───
   AUTHORITATIVE: the Form widget's own Style settings, pushed by migration/build-forms.py.
   Elementor compiles those into post-<id>.css at (0,4,0), which no stylesheet here can
   beat without !important — so set them there, not here. Vikas's call, 2026-08-07, and it
   is the right one: an earlier attempt to win on specificity was the wrong instinct.

   This file therefore does layout only — flattening Elementor's field grid, the two-up
   pairing, and the submit button shape. The colour rules above are a fallback for a form
   whose Style settings were never pushed; they lose to the generated CSS and that is fine.