/**
 * BlueHuki QR — Audit Request Form (Elementor Pro "Lead Form" template).
 *
 * Styles the native Elementor Form widget to match the approved "Request a
 * Free Audit" panel design, without touching Elementor's own markup or
 * behavior (submission handling, validation, integrations all stay native).
 *
 * SCOPING — IMPORTANT:
 * Everything here is scoped under .bluehuki-audit-form so it only applies
 * to this one form, not every Elementor form on the site. To activate it:
 *   1. Open the "Lead Form" template in Elementor.
 *   2. Select the Form widget.
 *   3. Go to Advanced tab → CSS Classes → add: bluehuki-audit-form
 *   4. Update/publish the template.
 * Without that class added, this file has no visible effect (by design —
 * it won't leak onto any other form on the site).
 *
 * Verified against the live template's real markup (First/Last Name,
 * Business Name, Website URL, Phone, a 6-option Services checkbox group,
 * and the submit button), so class names below match exactly what
 * Elementor Pro renders — no guessed selectors.
 */

.bluehuki-audit-form {
	--bh-navy: #101E3F;
	--bh-sky: #2FB1E0;
	--bh-sky-deep: #1D93C0;
	--bh-sky-pale: #E7F5FB;
	--bh-bg-alt: #F6F9FC;
	--bh-border: #E1E6ED;
	--bh-text: #333B47;
	--bh-muted: #667085;
	--bh-danger: #B42318;
	--bh-danger-bg: #FDEDEC;
	--bh-danger-border: #F5C2C0;
	font-family: 'Manrope', sans-serif;
}

.bluehuki-audit-form * {
	box-sizing: border-box;
}

/* =========================================================
 * The saved "Lead Form" template's own outer Container ships
 * with huge built-in padding (13rem/~208px per side) sized for
 * a full-width page section. Embedded inside our narrower
 * two-panel layout that crushes the form down to a sliver.
 * :has() finds that container from our own scope class and
 * zeroes its padding — our .bluehuki-qr-conversion__form-panel
 * already supplies the real padding around it.
 * ========================================================= */
.e-con:has(.bluehuki-audit-form) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

/* =========================================================
 * Field grid — elementor-col-50 / elementor-col-100 already set
 * each field-group's width; we only add spacing. IMPORTANT: do
 * NOT put a `gap` on this flex wrapper — two 50%-width items
 * plus a gap exceeds 100% of the row, which forces flex-wrap to
 * push the second item onto its own line (this is what caused
 * First/Last Name to stack instead of sitting side by side).
 * Spacing instead comes from padding on each field-group below.
 * ========================================================= */
.bluehuki-audit-form .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-left: -8px;
	margin-right: -8px;
}

.bluehuki-audit-form .elementor-field-group {
	margin-bottom: 16px;
	padding-left: 8px;
	padding-right: 8px;
}

/* =========================================================
 * Labels
 * ========================================================= */
.bluehuki-audit-form .elementor-field-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bh-muted);
	margin-bottom: 6px;
}

.bluehuki-audit-form .elementor-mark-required .elementor-field-label:after {
	content: '*';
	color: var(--bh-sky-deep);
	padding-left: 2px;
}

/* =========================================================
 * Text / email / tel / url / number / date / time inputs +
 * textareas + selects
 * ========================================================= */
.bluehuki-audit-form .elementor-field-textual,
.bluehuki-audit-form select.elementor-field,
.bluehuki-audit-form textarea.elementor-field {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--bh-border);
	border-radius: 8px;
	background: var(--bh-bg-alt);
	color: var(--bh-text);
	font-family: 'Manrope', sans-serif;
	font-size: 14.5px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bluehuki-audit-form textarea.elementor-field {
	height: auto;
	min-height: 100px;
	padding: 12px 14px;
	resize: vertical;
}

.bluehuki-audit-form .elementor-field-textual::placeholder {
	color: #9AA3AF;
}

.bluehuki-audit-form .elementor-field-textual:focus,
.bluehuki-audit-form select.elementor-field:focus,
.bluehuki-audit-form textarea.elementor-field:focus {
	outline: none;
	border-color: var(--bh-sky-deep);
	background: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(47, 177, 224, 0.18);
}

/* =========================================================
 * Checkbox / radio option groups (the "Services Interested In"
 * pills) — real markup:
 *   .elementor-field-subgroup > span.elementor-field-option > input + label
 * ========================================================= */
.bluehuki-audit-form .elementor-field-subgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 2px;
}

.bluehuki-audit-form .elementor-field-option {
	/* width:auto + flex:0 0 auto override Elementor's default full-row
	   width on each option — without this every pill stretches to fill
	   the whole line instead of sizing to its own label text. */
	display: inline-flex;
	width: auto;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1.5px solid var(--bh-border);
	border-radius: 999px;
	background: #FFFFFF;
	font-size: 13px;
	color: var(--bh-text);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* =========================================================
 * Elementor Pro's own default form CSS ships this rule:
 *   .elementor-field-subgroup:not(.elementor-subgroup-inline)
 *     .elementor-field-option { flex-basis: 100%; }
 * Its 3-class specificity beats the .elementor-field-option
 * rule above (2 classes), so flex-basis:100% was winning and
 * forcing every pill onto its own row even though width:auto
 * was also applied — flex-basis governs the flex main size
 * ahead of width. This rule matches/exceeds that specificity
 * (adds the .elementor-field-subgroup ancestor) and resets
 * flex-basis explicitly, verified live via getBoundingClientRect
 * before being written here (pills now wrap 3-per-row instead
 * of stacking one per line).
 * ========================================================= */
.bluehuki-audit-form .elementor-field-subgroup .elementor-field-option {
	flex-basis: auto !important;
}

.bluehuki-audit-form .elementor-field-option:hover {
	border-color: var(--bh-sky-deep);
}

.bluehuki-audit-form .elementor-field-option input[type="checkbox"],
.bluehuki-audit-form .elementor-field-option input[type="radio"] {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--bh-sky-deep);
	cursor: pointer;
}

.bluehuki-audit-form .elementor-field-option label {
	margin: 0;
	font-size: 13px;
	color: var(--bh-text);
	cursor: pointer;
}

/* Highlight the whole pill when its checkbox/radio is checked
   (modern-browser progressive enhancement; harmless if :has()
   is unsupported — the checkbox itself still shows checked). */
.bluehuki-audit-form .elementor-field-option:has(input:checked) {
	border-color: var(--bh-sky-deep);
	background: var(--bh-sky-pale);
}

/* Single acceptance/terms checkbox (not a pill group) */
.bluehuki-audit-form .elementor-field-type-acceptance .elementor-field-subgroup {
	display: block;
}

.bluehuki-audit-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	border: none;
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: 13px;
	color: var(--bh-muted);
}

.bluehuki-audit-form .elementor-field-type-acceptance .elementor-field-option input {
	margin-top: 2px;
}

/* =========================================================
 * Submit button
 * ========================================================= */
.bluehuki-audit-form .e-form__buttons,
.bluehuki-audit-form .elementor-field-type-submit {
	width: 100%;
}

.bluehuki-audit-form .elementor-button {
	width: 100%;
	height: 52px;
	border: none;
	border-radius: 999px;
	background: var(--bh-navy);
	color: #FFFFFF;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.bluehuki-audit-form .elementor-button:hover,
.bluehuki-audit-form .elementor-button:focus-visible {
	opacity: 0.88;
}

.bluehuki-audit-form .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.bluehuki-audit-form .elementor-button-text {
	font-weight: 700;
}

/* Elementor's own inline spinner on submit — recolor to match */
.bluehuki-audit-form .elementor-button .elementor-button-icon i,
.bluehuki-audit-form .elementor-button .elementor-button-icon svg {
	color: #FFFFFF;
	fill: #FFFFFF;
}

/* =========================================================
 * Success / error messages
 * ========================================================= */
.bluehuki-audit-form .elementor-message {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
}

.bluehuki-audit-form .elementor-message-danger {
	background: var(--bh-danger-bg);
	border: 1px solid var(--bh-danger-border);
	color: var(--bh-danger);
}

.bluehuki-audit-form .elementor-message-success {
	background: var(--bh-sky-pale);
	border: 1px solid var(--bh-sky);
	color: var(--bh-navy);
}

.bluehuki-audit-form .elementor-field-group.elementor-error .elementor-field-textual,
.bluehuki-audit-form .elementor-field-group.elementor-error select.elementor-field {
	border-color: var(--bh-danger);
}

.bluehuki-audit-form .elementor-help-inline {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--bh-danger);
}

/* =========================================================
 * Mobile
 * ========================================================= */
@media (max-width: 600px) {
	.bluehuki-audit-form .elementor-field-group.elementor-col-50 {
		width: 100% !important;
	}

	.bluehuki-audit-form .elementor-field-option {
		width: 100%;
		justify-content: flex-start;
	}
}