/* ==========================================================================
 * spc-form.css — Lead-form confirmation panel.
 *
 * Scoped entirely under .spc-confirm. The form itself is styled by Elementor
 * so the team keeps editing it visually; only the panel this plugin injects
 * needs CSS.
 *
 * Consumes the child theme's design tokens, with literal fallbacks in every
 * var() so the panel is still readable if the child theme is inactive.
 * ========================================================================== */

.spc-confirm {
	margin-block-start: var(--spc-space-6, 1.5rem);
	padding: var(--spc-space-6, 1.5rem);
	border: 1px solid var(--spc-color-success-700, #15803d);
	border-radius: var(--spc-radius-lg, 12px);
	background: var(--spc-color-success-050, #f0fdf4);
	color: var(--spc-color-text, #0f172a);
	font-family: var(--spc-font-sans, system-ui, sans-serif);
	font-size: var(--spc-text-base, 1rem);
	line-height: var(--spc-leading-normal, 1.6);
}

/* The panel receives focus after submission so assistive technology announces
 * the result. Without an explicit ring, tabindex="-1" focus is invisible. */
.spc-confirm:focus-visible {
	outline: var(--spc-focus-ring-width, 3px) solid var(--spc-focus-ring-color, #0f766e);
	outline-offset: var(--spc-focus-ring-offset, 2px);
}

.spc-confirm > * + * {
	margin-block-start: var(--spc-space-3, 0.75rem);
}

.spc-confirm__title {
	margin: 0;
	color: var(--spc-color-success-700, #15803d);
	font-size: var(--spc-text-lg, 1.125rem);
	font-weight: var(--spc-weight-semibold, 600);
}

.spc-confirm__intro {
	margin: 0;
	color: var(--spc-color-text-muted, #475569);
	font-size: var(--spc-text-sm, 0.875rem);
}

/* The lead number is the one thing a customer may need to read back to us,
 * so it is monospaced, spaced out and selectable. */
.spc-confirm__code {
	margin: 0;
	padding: var(--spc-space-3, 0.75rem);
	border: 1px dashed var(--spc-color-success-700, #15803d);
	border-radius: var(--spc-radius-md, 8px);
	background: var(--spc-color-surface, #fff);
	font-family: var(--spc-font-mono, ui-monospace, monospace);
	font-size: var(--spc-text-lg, 1.125rem);
	font-weight: var(--spc-weight-bold, 700);
	letter-spacing: 0.06em;
	text-align: center;
	overflow-wrap: anywhere;
	user-select: all;
}

.spc-confirm__note {
	margin: 0;
	color: var(--spc-color-text-muted, #475569);
	font-size: var(--spc-text-sm, 0.875rem);
}

.spc-confirm__note--warn {
	padding: var(--spc-space-3, 0.75rem);
	border: 1px solid var(--spc-color-warning-700, #b45309);
	border-radius: var(--spc-radius-md, 8px);
	background: var(--spc-color-warning-050, #fffbeb);
	color: var(--spc-color-warning-700, #b45309);
	font-weight: var(--spc-weight-semibold, 600);
}

/* Button fallback ---------------------------------------------------------
 * .spc-btn lives in the child theme. These rules only apply when the child
 * theme is not active, so the WhatsApp button is never an unstyled link.
 * Colour is #0f7b6c, not WhatsApp's #128c7e, which fails AA against white. */

.spc-confirm .spc-btn:not([class*="spc-btn--"]),
.spc-confirm .spc-btn--whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--spc-touch-min, 44px);
	padding: var(--spc-space-3, 0.75rem) var(--spc-space-5, 1.25rem);
	border-radius: var(--spc-radius-md, 8px);
	background: var(--spc-color-whatsapp-dark, #0f7b6c);
	color: #fff;
	font-weight: var(--spc-weight-semibold, 600);
	text-align: center;
	text-decoration: none;
}

.spc-confirm .spc-btn--whatsapp:hover,
.spc-confirm .spc-btn--whatsapp:focus-visible {
	background: var(--spc-color-whatsapp-deep, #075e54);
	color: #fff;
}

/* Submit button busy state ------------------------------------------------- */

.elementor-form [data-spc-busy="true"] {
	cursor: progress;
	opacity: 0.7;
	pointer-events: none;
}

/* Forced colors ------------------------------------------------------------ */

@media (forced-colors: active) {
	.spc-confirm {
		border: 1px solid CanvasText;
	}

	.spc-confirm .spc-btn--whatsapp {
		border: 1px solid ButtonBorder;
	}
}