/**
 * BCS Forms — minimal state styling only.
 *
 * The bulk of the form appearance is inherited from the active theme's .bcs-*
 * rules (.bcs-form-card, .bcs-form-field, .bcs-news-form, .bcs-form-success,
 * .bcs-news-done …). This file only covers states the theme doesn't define, so
 * the forms degrade gracefully if the theme changes.
 */

.bcs-form-error {
	margin: 6px 0 0;
	color: #ff6b5c;
	font-size: 14px;
	line-height: 1.5;
}

/*
 * Privacy consent. The theme styles fields, not checkboxes, so this rule set is
 * the whole appearance: a small tick aligned to the first line of its label.
 */
.bcs-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bcs-lavender-muted, #8488b8);
}

.bcs-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #22d3ee;
	cursor: pointer;
}

.bcs-consent label {
	cursor: pointer;
}

.bcs-consent a {
	color: #22d3ee;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* On the newsletter row the consent has to break onto its own line. */
.bcs-news-form .bcs-consent {
	flex: 0 0 100%;
	width: 100%;
}

/* The newsletter form is a wrapping flex row: give the error its own line. */
.bcs-news-form .bcs-form-error {
	flex: 0 0 100%;
	width: 100%;
}

/*
 * Cloudflare Turnstile. In the contact card the widget sits in the column flow
 * above the submit button. In the newsletter it runs in interaction-only mode
 * and is the last element of the flex row, so while no challenge is required it
 * is a zero-height item and the layout is untouched; when Cloudflare does
 * challenge, it claims its own line below the consent.
 */
.bcs-turnstile {
	min-height: 0;
}

.bcs-news-form .bcs-turnstile {
	flex: 0 0 100%;
	width: 100%;
}

/* No challenge pending → no widget, and no stray flex gap either. */
.bcs-news-form .bcs-turnstile:empty {
	display: none;
}

form[data-bcs-form] button[type="submit"].is-loading {
	opacity: 0.7;
	cursor: progress;
}

form[data-bcs-form] button[type="submit"]:disabled {
	cursor: not-allowed;
}

/* =====================================================================
   SUBMITTED STATE — form ⇄ success cross-fade
   ---------------------------------------------------------------------
   The wrapper animates between the two heights so the page never jumps.
   While swapping, the outgoing form is absolutely positioned so both
   states can occupy the same box at once.
   ===================================================================== */
/* The height itself is animated from JS (see forms.js) — `auto` is not a value
 * a CSS transition can interpolate. */
.bcs-form-swap {
	position: relative;
}

.bcs-form-swap.is-swapping {
	overflow: hidden;
}

/*
 * The theme gives the forms an explicit `display`, which outranks the UA rule
 * behind the `hidden` attribute — without this the submitted form keeps its box
 * and the success panel stacks below it instead of replacing it.
 */
form[data-bcs-form][hidden] {
	display: none !important;
}

.bcs-form-swap > form.is-leaving {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transform: scale(.97) translateY(-8px);
	filter: blur(3px);
	pointer-events: none;
	transition:
		opacity 240ms ease-out,
		transform 420ms cubic-bezier(.22, 1, .36, 1),
		filter 240ms ease-out;
}

/* The theme fades this panel in via its own keyframes; we drive it here instead. */
.bcs-form-swap .bcs-form-success,
.bcs-form-swap .bcs-news-done {
	animation: none !important;
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 400ms ease-out 120ms,
		transform 560ms cubic-bezier(.22, 1, .36, 1) 120ms;
}

.bcs-form-swap .bcs-form-success.is-in,
.bcs-form-swap .bcs-news-done.is-in {
	opacity: 1;
	transform: none;
}

/* Keep the success panel roughly as tall as the card it replaces. */
.bcs-form-swap .bcs-form-success {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 260px;
}

/* --- The tick ------------------------------------------------------- */

/* The disc springs in, then a ring ripples out of it. */
.bcs-form-success.is-in .bcs-form-success-icon {
	animation: bcsCheckPop 620ms cubic-bezier(.34, 1.56, .64, 1) 60ms backwards;
}

.bcs-form-success-icon {
	position: relative;
}

.bcs-form-success-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--bcs-cyan, #22d3ee);
	opacity: 0;
}

.bcs-form-success.is-in .bcs-form-success-icon::after {
	animation: bcsCheckRipple 900ms cubic-bezier(.22, 1, .36, 1) 320ms;
}

.bcs-check {
	width: 60%;
	height: 60%;
	display: block;
	overflow: visible;
}

/* Dash length ≈ the tick's path length, so the stroke draws itself on. */
.bcs-check-mark {
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
}

.is-in .bcs-check-mark {
	animation: bcsCheckDraw 460ms cubic-bezier(.65, 0, .35, 1) 280ms forwards;
}

@keyframes bcsCheckPop {
	0%   { transform: scale(.2) rotate(-25deg); opacity: 0; }
	60%  { opacity: 1; }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes bcsCheckRipple {
	0%   { transform: scale(1); opacity: .85; }
	100% { transform: scale(1.9); opacity: 0; }
}

@keyframes bcsCheckDraw {
	to { stroke-dashoffset: 0; }
}

/* --- Newsletter: same tick, inline and small ------------------------ */
.bcs-news-done {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bcs-news-done-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: #0b0b1a;
	background: var(--bcs-cyan, #22d3ee);
}

.bcs-news-done.is-in .bcs-news-done-icon {
	animation: bcsCheckPop 620ms cubic-bezier(.34, 1.56, .64, 1) 60ms backwards;
}

/* --- Motion preferences --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bcs-form-swap > form.is-leaving,
	.bcs-form-swap .bcs-form-success,
	.bcs-form-swap .bcs-news-done {
		transition: none !important;
	}

	.bcs-form-swap .bcs-form-success,
	.bcs-form-swap .bcs-news-done {
		opacity: 1;
		transform: none;
	}

	.bcs-check-mark {
		stroke-dashoffset: 0;
	}

	.bcs-form-success.is-in .bcs-form-success-icon,
	.bcs-form-success.is-in .bcs-form-success-icon::after,
	.bcs-news-done.is-in .bcs-news-done-icon,
	.is-in .bcs-check-mark {
		animation: none !important;
	}
}

/* Accessible-only label fallback (WP core class, in case the theme omits it). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
	word-wrap: normal !important;
}