/**
 * Waitlist modal.
 *
 * Two Kadence selectors have to be beaten here, both at (0,1,1):
 *   input[type=email] etc. - sets a white background and a 3px radius
 *   button:hover|:focus|:active - repaints buttons in the Kadence palette
 * Field and button rules are therefore written with two classes, never one.
 */

.cwtf-lp.cwtf-wl {
	/* .cwtf-lp sets a page background; the dialog itself must stay a transparent
	   shell so only the panel reads as a surface. */
	background: transparent;
	border: 0;
	padding: 0;
	max-width: min(38rem, calc(100vw - 2rem));
	width: 100%;
	max-height: calc(100dvh - 2rem);
	overflow: visible;
	color: var(--c-fg);
}

/* Custom properties do not reliably inherit into ::backdrop across engines, so this
   uses literal values. With var() the backdrop renders fully transparent in older
   Chrome and Safari. */
.cwtf-wl::backdrop {
	background: rgba(12, 13, 14, 0.72);
	backdrop-filter: blur(4px);
}

.cwtf-wl__panel {
	position: relative;
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line-strong);
	background:
		radial-gradient(70% 50% at 90% 0%, rgba(94, 144, 137, 0.22), transparent 70%),
		linear-gradient(165deg, #1e2321 0%, var(--c-ink-deep) 100%);
	box-shadow: 0 40px 90px -40px #000;
}

.cwtf-wl__close {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	font-size: 1.6rem;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
}

.cwtf-wl .cwtf-wl__close {
	background: transparent;
	border: 1px solid transparent;
	color: var(--c-muted);
	padding: 0;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.cwtf-wl .cwtf-wl__close:hover,
.cwtf-wl .cwtf-wl__close:focus-visible {
	color: var(--c-fg);
	border-color: var(--c-line-strong);
	background: transparent;
}

.cwtf-wl__title {
	font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
	margin: 0 0 0.6rem;
}

.cwtf-wl__lede {
	color: var(--c-muted);
	font-size: 0.98rem;
	margin: 0 0 1.6rem;
	max-width: 46ch;
}

.cwtf-wl__form {
	display: grid;
	gap: 1.1rem;
}

.cwtf-wl__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.cwtf-wl__field {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.cwtf-wl__label {
	font-family: var(--f-display);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--c-fg-2);
}

/* Two classes: `input[type=email]` in Kadence is (0,1,1) and would otherwise win. */
.cwtf-wl .cwtf-wl__input {
	width: 100%;
	padding: 0.85rem 1rem;
	border-radius: var(--r-md);
	border: 1px solid var(--c-line);
	background: rgba(12, 13, 14, 0.62);
	color: var(--c-fg);
	font-family: var(--f-body);
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.cwtf-wl .cwtf-wl__input::placeholder {
	color: rgba(244, 244, 244, 0.38);
}

.cwtf-wl .cwtf-wl__input:focus {
	outline: none;
	border-color: var(--c-accent-lt);
	box-shadow: 0 0 0 3px rgba(129, 204, 194, 0.22);
	background: rgba(12, 13, 14, 0.62);
	color: var(--c-fg);
}

.cwtf-wl .cwtf-wl__input[aria-invalid="true"] {
	border-color: #ffb4a8;
}

.cwtf-wl__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
}

.cwtf-wl .cwtf-wl__check {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--c-accent-lt);
	cursor: pointer;
	flex: 0 0 auto;
}

/*
 * Plain :focus, not :focus-visible.
 *
 * Submitting with the consent box unticked moves focus here from JS. If that
 * submit came from a mouse click, Kadence has just re-added `hide-focus-outline`
 * (killing the UA ring) and the element does not match :focus-visible - so the
 * user was sent to an invisible control and told nothing. This is the one place
 * where matching the broader :focus is the correct call.
 */
.cwtf-wl .cwtf-wl__check:focus {
	outline: 2px solid var(--c-accent-lt);
	outline-offset: 3px;
}

.cwtf-wl__consent-text {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--c-fg-2);
	cursor: pointer;
}

.cwtf-wl__error {
	margin: 0;
	font-size: 0.85rem;
	color: #ffb4a8;
	min-height: 0;
}

.cwtf-wl__error:empty {
	display: none;
}

.cwtf-wl__formerror {
	margin: 0;
	font-size: 0.9rem;
	color: #ffb4a8;
}

.cwtf-wl__formerror:empty {
	display: none;
}

/* Centred here rather than on the dots themselves. The dots are inline <i> elements, so
 * margin:auto and text-align on them do nothing - text-align has to be set on the block
 * that contains the line, and this paragraph is the block that spans the form width. */
.cwtf-wl__status {
	margin: 0;
	font-size: 0.88rem;
	color: var(--c-muted);
	text-align: center;
}

.cwtf-wl__status:empty {
	display: none;
}

/* Animated ellipsis while the request is in flight.
 *
 * Done in CSS rather than a JS timer on purpose: .cwtf-wl__status is an aria-live
 * region, so rewriting its text three times a second would make a screen reader
 * announce the message over and over. The dots are decorative and aria-hidden, and
 * nothing in the DOM changes once the status is set.
 *
 * All three start visible, so when animations are switched off (reduced motion) the
 * line simply reads "..." instead of losing its dots. */
.cwtf-wl__dots i {
	font-style: normal;
	opacity: 1;
}

.cwtf-wl__dots i:nth-child(2) {
	animation: cwtf-wl-dot2 1.2s infinite;
}

.cwtf-wl__dots i:nth-child(3) {
	animation: cwtf-wl-dot3 1.2s infinite;
}

/* Adjacent stops with the same value mean no interpolation, so each dot pops in
   rather than fading, and the cycle snaps back to one dot at 100%. */
@keyframes cwtf-wl-dot2 {
	0%,
	33.32% {
		opacity: 0;
	}
	33.33%,
	100% {
		opacity: 1;
	}
}

@keyframes cwtf-wl-dot3 {
	0%,
	66.65% {
		opacity: 0;
	}
	66.66%,
	100% {
		opacity: 1;
	}
}

.cwtf-wl__fineprint {
	text-align: center;
	margin: 0;
	font-size: 0.8rem;
	color: var(--c-muted);
}

/*
 * Two classes, per the rule at the top of this file - Kadence styles `a` by element.
 * Underlined rather than distinguished by colour alone: --c-muted against the panel is
 * not a reliable non-colour cue, and WCAG 1.4.1 wants one.
 */
.cwtf-wl .cwtf-wl__fineprint a {
	color: var(--c-fg-2);
	text-decoration: underline;
}

.cwtf-wl .cwtf-wl__fineprint a:hover,
.cwtf-wl .cwtf-wl__fineprint a:focus-visible {
	color: var(--c-fg);
}

.cwtf-wl .cwtf-wl__submit {
	width: 100%;
	justify-content: center;
}

.cwtf-wl .cwtf-wl__submit[disabled] {
	opacity: 0.65;
	cursor: progress;
}

.cwtf-wl__turnstile {
	min-height: 65px;
}

/* Off-screen rather than display:none - some bots skip hidden inputs, and a field
   they never fill in is a field that never catches anything. */
.cwtf-wl__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Fallback for engines without dialog.showModal(). No top layer, so position it. */
.cwtf-wl--fallback {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	background: rgba(12, 13, 14, 0.72);
	max-width: none;
	max-height: none;
}

html:has(dialog.cwtf-wl[open]) {
	overflow: hidden;
}

@media (max-width: 560px) {
	.cwtf-wl__row {
		grid-template-columns: 1fr;
	}
}