/*
 * Atomic form fields. The Elementor kit styles every input with
 * `.elementor-kit-6 input:not([type="button"]):not([type="submit"])` (light border,
 * and no border on focus), which outranks Elementor's element styles. These rules
 * restore the design's field border and focus state.
 */
body.elementor-kit-6 .e-form-input-base:not([type="button"]):not([type="submit"]),
body.elementor-kit-6 .e-form-select-base,
body.elementor-kit-6 .e-form-textarea-base {
	border: 1px solid var(--gray-400, #b3b3b6);
}

body.elementor-kit-6 .e-form-input-base:focus:not([type="button"]):not([type="submit"]),
body.elementor-kit-6 .e-form-select-base:focus,
body.elementor-kit-6 .e-form-textarea-base:focus {
	border: 1px solid var(--brand, #6528c6);
	outline: 0;
}

/* Radio buttons: Elementor can't style the checked state, so the design's ring and dot live here */
body.elementor-kit-6 .e-form-radio-button-base:not([type="button"]):not([type="submit"]) {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	border: 1px solid #767676;
	border-radius: 50%;
	background: var(--white, #ffffff);
	cursor: pointer;
}

body.elementor-kit-6 .e-form-radio-button-base:checked:not([type="button"]):not([type="submit"]) {
	border-color: var(--brand, #6528c6);
}

/* Elementor draws the checked dot with ::before */
body.elementor-kit-6 .e-form-radio-button-base:checked::before {
	width: 10px;
	height: 10px;
	background-color: var(--brand, #6528c6);
}

body.elementor-kit-6 .e-form-radio-button-base:focus-visible:not([type="button"]):not([type="submit"]) {
	outline: 2px solid var(--brand, #6528c6);
	outline-offset: 2px;
}

/* Demo request flow: spinner over the Calendly embed while it loads (forms.js toggles is-loading) */
.demo-calendar-embed iframe {
	transition: opacity 0.2s ease;
}

.demo-calendar-embed.is-loading iframe {
	opacity: 0;
}

.demo-calendar-embed.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid var(--gray-200, #e6e6e8);
	border-top-color: var(--brand, #6528c6);
	border-radius: 50%;
	animation: demo-calendar-spin 0.8s linear infinite;
}

@keyframes demo-calendar-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.demo-calendar-embed.is-loading::after {
		animation-duration: 2s;
	}
}