/*
 * Allure Consultation Styler v1.0.0
 *
 * This stylesheet intentionally does NOT set brand colours, typography,
 * field backgrounds, borders, radius, shadows, button design, field height,
 * or the form's normal row/column gaps. Those remain editable in Elementor.
 *
 * It only handles presentation details that are awkward to maintain through
 * ordinary Elementor Form controls.
 */

/* Prevent long labels/options from forcing the form wider than its container. */
.allure-consultation-enquiry-form,
.allure-consultation-enquiry-form .elementor-form,
.allure-consultation-enquiry-form .elementor-form-fields-wrapper,
.allure-consultation-enquiry-form .elementor-field-group {
	min-width: 0;
}

.allure-consultation-enquiry-form :where(input, select, textarea, button) {
	max-width: 100%;
}

/*
 * The conditional concern list is easier to scan as two columns when space
 * allows. Elementor owns the field width; this only arranges options inside it.
 */
.allure-consultation-enquiry-form .elementor-field-group-skin_concerns .elementor-field-subgroup {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
	column-gap: 1em;
	row-gap: 0.65em;
}

/* Keep checkbox and acceptance copy aligned cleanly when text wraps. */
.allure-consultation-enquiry-form .elementor-field-group-skin_concerns .elementor-field-option,
.allure-consultation-enquiry-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	min-width: 0;
}

.allure-consultation-enquiry-form .elementor-field-group-skin_concerns input[type="checkbox"],
.allure-consultation-enquiry-form .elementor-field-type-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 0.2em;
}

.allure-consultation-enquiry-form .elementor-field-group-skin_concerns label,
.allure-consultation-enquiry-form .elementor-field-type-acceptance label {
	min-width: 0;
	overflow-wrap: anywhere;
	cursor: pointer;
}

/* The Logic plugin inserts this error; Elementor still owns message colours. */
.allure-consultation-enquiry-form .aec-conditional-error {
	display: block;
	width: 100%;
	margin-top: 0.4em;
}

/* Gentle reveal only. Visibility and required-state logic stay in Logic. */
.allure-consultation-enquiry-form .elementor-field-group-skin_concerns:not([hidden]) {
	animation: allure-consultation-reveal 160ms ease-out;
}

@keyframes allure-consultation-reveal {
	from {
		opacity: 0;
		transform: translateY(0.25em);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * Elementor exposes broad visual styling but not a dependable focus-visible
 * fallback for every form control. Use the control's own text colour so the
 * ring follows whatever palette is configured in Elementor.
 */
.allure-consultation-enquiry-form :where(input, select, textarea, button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Stack the concern options when the viewport is narrow. */
@media (max-width: 767px) {
	.allure-consultation-enquiry-form .elementor-field-group-skin_concerns .elementor-field-subgroup {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Do not animate for visitors who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.allure-consultation-enquiry-form .elementor-field-group-skin_concerns:not([hidden]) {
		animation: none;
	}
}