/**
 * Atomic form feedback: consent checkbox, submit states, fixed button size.
 *
 * Elementor's atomic form handler only swaps form-state-default / -success /
 * -error on the <form>. It has no submitting state and renders no message, so
 * `is-submitting` and `is-sent` below are added by form-feedback.js.
 *
 * The button keeps ONE width across every state. form-feedback.js measures the
 * resting label once and pins it as a min-width; the dots and the check are both
 * narrower than the label and are centred inside that reserved space, so nothing
 * reflows when the state changes.
 */

/* Consent checkbox — green with a dark tick once ticked.
   NOTE: the three declarations below are currently dropped by the browser at
   parse time even though the file is well-formed and !important is present.
   Cause not yet identified; the tick renders, the green fill does not. */
.elementor .e-form-base input[type="checkbox"] {
	transition: background-color .2s ease, border-color .2s ease;
}

.elementor .e-form-base input[type="checkbox"]:checked {
	background-color: #05D16E !important;
	border-color: #05D16E !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%2330303C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
}

/* ── Submit button ─────────────────────────────────────────────────────────── */

.elementor .e-form-base button {
	white-space: nowrap;
	position: relative;
}

/* Only one of the three children is ever shown. Centring them means the dots and
   the check sit where the label was, rather than left-aligned in a wider box. */
.elementor .e-form-base button .darwin-btn-dots,
.elementor .e-form-base button .darwin-btn-check {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 4px;
	line-height: 1;
	/* Out of flow: a 16px check is taller than the button's 12px line box and was
	   growing the button by 5px on success. Overlaying centres both indicators in
	   the space the label already reserved, so neither dimension can move. */
	position: absolute;
	inset: 0;
}

.elementor .e-form-base.is-submitting button,
.elementor .e-form-base.is-sent button {
	pointer-events: none;
}

.elementor .e-form-base.is-submitting button .darwin-btn-dots,
.elementor .e-form-base.is-sent button .darwin-btn-check {
	display: flex;
}

/* The label is kept in flow but made invisible, so it goes on reserving the
   exact height it always had. display:none would collapse the box. */
.elementor .e-form-base.is-submitting button .darwin-btn-label,
.elementor .e-form-base.is-sent button .darwin-btn-label {
	visibility: hidden;
}

/* Three-dot wave. Staggered delays give the travelling motion. */
.elementor .e-form-base button .darwin-btn-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
	animation: darwin-btn-wave 1s infinite ease-in-out;
}

.elementor .e-form-base button .darwin-btn-dots i:nth-child(2) { animation-delay: .15s; }
.elementor .e-form-base button .darwin-btn-dots i:nth-child(3) { animation-delay: .30s; }

@keyframes darwin-btn-wave {
	0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

/* Success check. Drawn with a stroke-dash reveal so it reads as confirmation
   rather than appearing abruptly. */
.elementor .e-form-base button .darwin-btn-check svg {
	width: 16px;
	height: 16px;
	display: block;
}

.elementor .e-form-base button .darwin-btn-check svg path {
	stroke-dasharray: 20;
	stroke-dashoffset: 20;
	animation: darwin-btn-draw .28s ease-out forwards;
}

@keyframes darwin-btn-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
	.elementor .e-form-base button .darwin-btn-dots i,
	.elementor .e-form-base button .darwin-btn-check svg path {
		animation: none;
	}
	.elementor .e-form-base button .darwin-btn-check svg path { stroke-dashoffset: 0; }
}