/**
 * CW Content Gate — frontend styles.
 * BEM prefix: cwcg-. No !important. Custom properties for all theming knobs.
 */

.cwcg-gate {
	--cwcg-blur: 8px;
	--cwcg-overlay-color: rgba(255, 255, 255, 0.4);
	--cwcg-preview-height: 300px;
	--cwcg-fade-color: var(--cwcg-form-bg-surface, #0d0d0d);

	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* ─── Preview (blurred teaser of gated content) ─────────────────────── */

.cwcg-gate__preview {
	position: relative;
	width: 100%;
	max-height: var(--cwcg-preview-height);
	overflow: hidden;
	box-sizing: border-box;
}

.cwcg-gate__preview-inner {
	position: relative;
	z-index: 0;
}

.cwcg-gate__preview--blurred .cwcg-gate__preview-inner {
	filter: blur(var(--cwcg-blur));
	pointer-events: none;
	user-select: none;
}

.cwcg-gate__preview--blurred::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cwcg-overlay-color);
	z-index: 1;
	pointer-events: none;
}

.cwcg-gate__preview--faded::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background: linear-gradient(180deg, transparent 0%, var(--cwcg-fade-color) 100%);
	z-index: 2;
	pointer-events: none;
}

/* Unlocked: strip the preview cap so full content flows. */
.cwcg-gate--unlocked .cwcg-gate__preview {
	max-height: none;
	overflow: visible;
}

/* ─── Form wrap ─────────────────────────────────────────────────────── */

.cwcg-gate__form-wrap {
	position: relative;
	z-index: 5;
	margin-top: -4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.cwcg-gate--locked:not(:has(.cwcg-gate__preview)) .cwcg-gate__form-wrap {
	margin-top: 0;
}

.cwcg-gate__teaser {
	max-width: 48rem;
	text-align: center;
	color: inherit;
}

.cwcg-gate__teaser p {
	margin: 0 0 0.5rem;
}

.cwcg-gate__form {
	width: 100%;
	max-width: 560px;
	padding: 2rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-sizing: border-box;
	position: relative;
}

.cwcg-gate__placeholder {
	margin: 0;
	opacity: 0.7;
	font-style: italic;
	text-align: center;
}

/* ─── Fast-lane (returning visitor email-only) ──────────────────────── */

.cwcg-gate__fastlane {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 560px;
	margin: 0 auto 1rem;
}

.cwcg-gate__fastlane-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	color: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cwcg-gate__fastlane-trigger:hover,
.cwcg-gate__fastlane-trigger:focus {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-1px);
}

.cwcg-gate__fastlane-panel {
	width: 100%;
	padding: 1.25rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	display: none;          /* hidden by default; revealed by --fastlane-active rule below */
	flex-direction: column;
	gap: 0.75rem;
}

.cwcg-gate__fastlane-prompt {
	margin: 0;
	font-size: 0.95rem;
	text-align: center;
	opacity: 0.85;
}

.cwcg-gate__fastlane-row {
	display: flex;
	gap: 0.5rem;
	width: 100%;
}

.cwcg-gate__fastlane-input {
	flex: 1 1 auto;
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: inherit;
	font-size: 1rem;
	min-width: 0;
}

.cwcg-gate__fastlane-input:focus {
	outline: none;
	border-color: var(--cw-accent-secondary, #00b7fa);
	box-shadow: 0 0 0 3px rgba(0, 183, 250, 0.15);
}

.cwcg-gate__fastlane-input:disabled {
	opacity: 0.6;
}

.cwcg-gate__fastlane-submit {
	flex: 0 0 auto;
	padding: 0.75rem 1.25rem;
	border-radius: 8px;
	border: none;
	background: linear-gradient(
		135deg,
		var(--cw-accent-primary, #dc2626) 0%,
		var(--cw-accent-secondary, #00b7fa) 100%
	);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cwcg-gate__fastlane-submit:hover:not(:disabled) {
	transform: translateY(-1px);
}

.cwcg-gate__fastlane-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.cwcg-gate__fastlane-cancel {
	align-self: center;
	background: transparent;
	border: none;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
	font-size: 0.85rem;
	text-decoration: underline;
	padding: 0.25rem 0.5rem;
}

.cwcg-gate__fastlane-cancel:hover {
	opacity: 1;
}

.cwcg-gate__fastlane-message {
	margin: 0;
	min-height: 1.25em;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.4;
}

.cwcg-gate__fastlane-message--info    { opacity: 0.8; }
.cwcg-gate__fastlane-message--success { color: #34d399; }
.cwcg-gate__fastlane-message--error   { color: #f87171; }

/* Single source of truth for fast-lane visibility. The `--fastlane-active`
   class on the form-wrap (toggled by JS) drives all three sub-pieces:
   - default state:   trigger visible, panel hidden, form visible
   - active state:    trigger hidden,  panel visible, form hidden
   No `[hidden]` attribute selectors — those have global descendant scope
   and can collide with FF / Elementor markup. */
.cwcg-gate__form-wrap--fastlane-active .cwcg-gate__fastlane-trigger,
.cwcg-gate__form-wrap--fastlane-active .cwcg-gate__form {
	display: none;
}
.cwcg-gate__form-wrap--fastlane-active .cwcg-gate__fastlane-panel {
	display: flex;
}

/* ─── Redirect-mode unlocked state ──────────────────────────────────── */

.cwcg-gate__redirect-link {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	border-radius: 999px;
	background: linear-gradient(
		135deg,
		var(--cw-accent-primary, #dc2626) 0%,
		var(--cw-accent-secondary, #00b7fa) 100%
	);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	transition: transform 0.3s ease;
}

.cwcg-gate__redirect-link:hover,
.cwcg-gate__redirect-link:focus {
	transform: translateY(-2px);
	color: #fff;
}

/* ─── Reveal transition (class toggled by JS on unlock event) ───────── */

.cwcg-gate--revealing .cwcg-gate__preview {
	transition: max-height 0.6s ease, filter 0.6s ease;
	max-height: var(--cwcg-revealing-max, 9999px);
}

.cwcg-gate--revealing .cwcg-gate__preview--blurred .cwcg-gate__preview-inner {
	transition: filter 0.6s ease;
	filter: blur(0);
}

.cwcg-gate--revealing .cwcg-gate__preview--blurred::before,
.cwcg-gate--revealing .cwcg-gate__preview--faded::after {
	transition: opacity 0.5s ease;
	opacity: 0;
}

.cwcg-gate--revealing .cwcg-gate__form-wrap {
	transition: opacity 0.4s ease, transform 0.4s ease;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

/* ─── Unlock choreography ───────────────────────────────────────────── */

/* Processing overlay — sits inside form-wrap, covers form + fastlane + teaser. */

.cwcg-gate__processing {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	background: rgba(13, 13, 13, 0.78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 16px;
	transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cwcg-gate--processing .cwcg-gate__processing,
.cwcg-gate--success .cwcg-gate__processing {
	opacity: 1;
	pointer-events: auto;
}

.cwcg-gate__processing-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1.75rem 2rem;
	max-width: min(360px, 90%);
	color: #fff;
	text-align: center;
}

.cwcg-gate__processing-icon {
	position: relative;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cwcg-gate__processing-icon svg {
	width: 100%;
	height: 100%;
}

.cwcg-gate__processing-icon--lock {
	color: var(--cw-accent-secondary, #00b7fa);
}

.cwcg-gate__processing-icon--check {
	color: #34d399;
	display: none;
}

.cwcg-gate--processing .cwcg-gate__processing-icon--lock {
	animation: cwcg-icon-breathe 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.cwcg-gate--success .cwcg-gate__processing-icon--lock {
	display: none;
}

.cwcg-gate--success .cwcg-gate__processing-icon--check {
	display: flex;
	animation: cwcg-icon-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.cwcg-gate--success .cwcg-gate__processing-icon--check::before {
	content: "";
	position: absolute;
	inset: -10px;
	border: 2px solid #34d399;
	border-radius: 50%;
	opacity: 0;
	animation: cwcg-ring-pulse 640ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cwcg-gate__processing-text {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	display: none;
}

.cwcg-gate--processing .cwcg-gate__processing-text--working {
	display: block;
}

.cwcg-gate--success .cwcg-gate__processing-text--success {
	display: block;
	animation: cwcg-fade-rise 360ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
	animation-delay: 80ms;
}

.cwcg-gate__processing-bar {
	width: min(220px, 80%);
	height: 3px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 3px;
	overflow: hidden;
}

.cwcg-gate__processing-bar-fill {
	height: 100%;
	background: linear-gradient(
		90deg,
		var(--cw-accent-primary, #dc2626) 0%,
		var(--cw-accent-secondary, #00b7fa) 100%
	);
	transform: scaleX(0);
	transform-origin: left center;
}

.cwcg-gate--processing .cwcg-gate__processing-bar-fill,
.cwcg-gate--success .cwcg-gate__processing-bar-fill {
	animation: cwcg-progress-fill 2400ms cubic-bezier(0.25, 0.8, 0.4, 1) forwards;
}

/* Form recedes while overlay is active so the overlay feels in charge. */

.cwcg-gate--processing .cwcg-gate__form,
.cwcg-gate--processing .cwcg-gate__fastlane,
.cwcg-gate--processing .cwcg-gate__teaser {
	transform: scale(0.98);
	filter: blur(2px);
	opacity: 0.7;
	transition:
		transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
		filter 280ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shimmer sweep across the preview as blur lifts. */

.cwcg-gate--revealing .cwcg-gate__preview--blurred .cwcg-gate__preview-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.22) 45%,
		rgba(255, 255, 255, 0.22) 55%,
		transparent 100%
	);
	transform: translateX(-100%);
	animation: cwcg-shimmer 820ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
	pointer-events: none;
	z-index: 3;
}

/* Enhanced form-wrap collapse during reveal. */

.cwcg-gate--revealing .cwcg-gate__form-wrap {
	transform: scale(0.96) translateY(-6px);
	filter: blur(4px);
	transition:
		transform 520ms cubic-bezier(0.4, 0, 0.2, 1),
		filter 520ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Below-widget sections fade-rise with a staggered delay assigned by JS. */

body.cwcg-revealed-below [data-elementor-type] > *:has(.cwcg-gate) ~ * {
	animation: cwcg-fade-rise 520ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
	animation-delay: calc(var(--cwcg-stagger, 0) * 70ms);
}

@keyframes cwcg-icon-breathe {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes cwcg-icon-pop {
	0%   { transform: scale(0.5); opacity: 0; }
	55%  { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes cwcg-ring-pulse {
	0%   { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(1.7); opacity: 0; }
}

@keyframes cwcg-progress-fill {
	0%   { transform: scaleX(0); }
	30%  { transform: scaleX(0.45); }
	60%  { transform: scaleX(0.72); }
	100% { transform: scaleX(0.88); }
}

@keyframes cwcg-shimmer {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

@keyframes cwcg-fade-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── prefers-reduced-motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cwcg-gate--revealing .cwcg-gate__preview,
	.cwcg-gate--revealing .cwcg-gate__preview--blurred .cwcg-gate__preview-inner,
	.cwcg-gate--revealing .cwcg-gate__preview--blurred::before,
	.cwcg-gate--revealing .cwcg-gate__preview--faded::after,
	.cwcg-gate--revealing .cwcg-gate__form-wrap {
		transition-duration: 0.01ms;
	}

	.cwcg-gate__processing,
	.cwcg-gate--processing .cwcg-gate__form,
	.cwcg-gate--processing .cwcg-gate__fastlane,
	.cwcg-gate--processing .cwcg-gate__teaser {
		transition-duration: 1ms;
	}

	.cwcg-gate--processing .cwcg-gate__processing-icon--lock,
	.cwcg-gate--success .cwcg-gate__processing-icon--check,
	.cwcg-gate--success .cwcg-gate__processing-icon--check::before,
	.cwcg-gate--success .cwcg-gate__processing-text--success,
	.cwcg-gate--processing .cwcg-gate__processing-bar-fill,
	.cwcg-gate--success .cwcg-gate__processing-bar-fill,
	.cwcg-gate--revealing .cwcg-gate__preview--blurred .cwcg-gate__preview-inner::after,
	body.cwcg-revealed-below [data-elementor-type] > *:has(.cwcg-gate) ~ * {
		animation-duration: 1ms;
		animation-iteration-count: 1;
	}
}

/* ─── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.cwcg-gate__form {
		padding: 1.25rem;
	}
	.cwcg-gate__form-wrap {
		margin-top: -2rem;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   Button-Modal widget (cwcg-button-modal)

   Renders a CTA button that opens a modal containing the gate form. The
   inner form host carries `.cwcg-gate` so all gate state styles above
   (processing/success/fastlane/redirect) apply unchanged inside the modal.
   These styles are layout-only for the trigger + overlay + dialog shell.
   ──────────────────────────────────────────────────────────────────────── */

.cwcg-button-modal {
	--cwcg-bm-backdrop: rgba(8, 10, 14, 0.72);
	--cwcg-bm-blur: 8px;

	display: flex;
	width: 100%;
	box-sizing: border-box;
}

/* The button inherits all visual styling from the theme's `.cw-hero__btn` +
   `.cw-hero__btn--nova/--ghost` classes — do NOT override background, color,
   border, or padding here. We only fix two things the theme can't know about:
   (1) `<button>` user-agent defaults that would otherwise bleed through
   (the theme styles `<a>` buttons), (2) the disabled state. */
.cwcg-button-modal__btn {
	cursor: pointer;
	font: inherit;
}

.cwcg-button-modal__btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.cwcg-button-modal__btn--full {
	width: 100%;
	justify-content: center;
}

.cwcg-button-modal__btn-icon {
	display: inline-flex;
	align-items: center;
}

.cwcg-button-modal__btn-icon svg,
.cwcg-button-modal__btn-icon i {
	width: 1em;
	height: 1em;
	font-size: 1em;
}

.cwcg-button-modal__placeholder {
	margin: 0;
	padding: 0.75rem 1rem;
	font-style: italic;
	opacity: 0.65;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: 8px;
}

/* When fast-lane button (anchor) is reused as the continue button it inherits
   .cw-hero__btn styles automatically. */
.cwcg-button-modal__continue {
	text-decoration: none;
}

/* ─── Body scroll lock while a modal is open ────────────────────────── */

body.cwcg-modal-locked {
	overflow: hidden;
}

/* ─── Overlay (full-viewport backdrop) ──────────────────────────────── */

.cwcg-button-modal__overlay {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2rem);
	background: var(--cwcg-bm-backdrop);
	-webkit-backdrop-filter: blur(var(--cwcg-bm-blur));
	backdrop-filter: blur(var(--cwcg-bm-blur));
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: cwcg-bm-overlay-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Honor the HTML hidden attribute (some Elementor styles set display on
   .cwcg-button-modal__overlay siblings). */
.cwcg-button-modal__overlay[hidden] {
	display: none;
}

/* ─── Dialog ────────────────────────────────────────────────────────── */

.cwcg-button-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
	color: var(--cw-text, #dce0ea);
	box-sizing: border-box;
	animation: cwcg-bm-dialog-in 320ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.cwcg-button-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
	border-radius: 999px;
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	transition: background 0.2s ease, transform 0.2s ease;
}

.cwcg-button-modal__close:hover,
.cwcg-button-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	transform: scale(1.05);
	outline: none;
}

/* ─── Header (title + subtitle) shared by both panels ───────────────── */

.cwcg-button-modal__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

.cwcg-button-modal__subtitle {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cw-text-muted, #8090a8);
}

.cwcg-button-modal__header {
	margin-bottom: 0.5rem;
}

/* ─── Returning-visitor panel ───────────────────────────────────────── */

.cwcg-button-modal__returning {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding-top: 0.5rem;
}

.cwcg-button-modal__returning .cwcg-button-modal__continue {
	margin-top: 0.5rem;
}

/* ─── Panel toggling driven by data-cwcg-state ────────────────────────
 *
 * State is mirrored onto the OVERLAY at render time (not just the wrapper),
 * because the JS portals `.cwcg-button-modal__overlay` to `<body>` —
 * after that move, wrapper-scoped descendant selectors stop matching, and
 * both panels would otherwise render simultaneously (returning + form).
 */

/* Default (idle): hide returning, show form panel */
.cwcg-button-modal__overlay[data-cwcg-state="idle"] .cwcg-button-modal__returning,
.cwcg-button-modal[data-cwcg-state="idle"] .cwcg-button-modal__returning {
	display: none;
}

/* Prefilled: hide form panel, show returning */
.cwcg-button-modal__overlay[data-cwcg-state="prefilled"] .cwcg-button-modal__inner,
.cwcg-button-modal[data-cwcg-state="prefilled"] .cwcg-button-modal__inner {
	display: none;
}

/* Capture-mode prefilled-block exception: the gate carries a server-rendered
 * thank-you panel (no redirect-flavoured returning panel exists for capture).
 * Override the prefilled-hide rule so the gate stays visible — the form-wrap
 * inside is hidden via `--captured`, the header via `--captured-shown`, so
 * only the thank-you panel paints. Specificity (0,3,0) beats the rule above
 * (0,2,0) at every breakpoint. */
.cwcg-button-modal__overlay[data-cwcg-state="prefilled"] .cwcg-button-modal__inner.cwcg-gate--captured-shown,
.cwcg-button-modal[data-cwcg-state="prefilled"] .cwcg-button-modal__inner.cwcg-gate--captured-shown {
	display: block;
}

/* When inside the modal, the form-wrap doesn't need to overlap a preview. */
.cwcg-button-modal__inner .cwcg-gate__form-wrap {
	margin-top: 0;
}

/* Form card inside modal: subtle, the dialog already provides the surface. */
.cwcg-button-modal__inner .cwcg-gate__form {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: 1.5rem;
}

.cwcg-button-modal__inner .cwcg-gate__processing {
	border-radius: inherit;
}

/* ─── Animations ────────────────────────────────────────────────────── */

@keyframes cwcg-bm-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes cwcg-bm-dialog-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cwcg-button-modal__overlay,
	.cwcg-button-modal__dialog {
		animation-duration: 1ms;
	}
}

/* ─── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.cwcg-button-modal__overlay {
		padding: 0.75rem;
		align-items: flex-end;
	}
	.cwcg-button-modal__dialog {
		max-height: calc(100vh - 1.5rem);
		border-radius: 16px 16px 0 0;
	}
	.cwcg-button-modal__inner .cwcg-gate__form {
		padding: 1rem;
	}
}

/* ═══ Page Gate (Content Wall) ═══════════════════════════════════════
   Auto-opening modal that gates the entire page on load. Reuses every
   `.cwcg-button-modal__*` selector for the overlay/dialog/header so the
   visual surface is identical across the modal widgets. The state-driven
   panel toggles use overlay-scoped selectors so they keep working after
   the inline-script portals the overlay out of the Elementor wrapper. */

/* Panel toggling — these mirror the wrapper-scoped rules but key off the
   overlay element, which survives the portal-to-body. */
.cwcg-page-gate__overlay[data-cwcg-state="idle"] .cwcg-button-modal__returning {
	display: none;
}
.cwcg-page-gate__overlay[data-cwcg-state="prefilled"] .cwcg-button-modal__inner {
	display: none;
}

/* Page-content blur — applies while the gate is active. The portaled
   overlay is a direct body child (NOT inside [data-elementor-type]), so
   it stays sharp. The blur scope intentionally targets the post body
   only — the site header above remains interactive so visitors can leave
   the page if they choose. */
body.cwcg-page-gate-active [data-elementor-type] > * {
	filter: blur(8px) grayscale(0.35);
	pointer-events: none;
	user-select: none;
}

/* Smooth dismissal — overlay fades out after form submit or fast-lane
   unlock. The body blur snaps off when the active class is removed; the
   eye is on the dissolving overlay, not the background, so the snap is
   not visually jarring. */
.cwcg-page-gate__overlay--dismissing {
	opacity: 0;
	transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

/* Reduced motion: drop the dismissal fade. */
@media (prefers-reduced-motion: reduce) {
	.cwcg-page-gate__overlay--dismissing {
		transition-duration: 1ms;
	}
}

/* The Fluent Forms submit button is now branded site-wide by the
   compression-works theme — see
   `themes/compression-works/assets/css/cw-fluent-forms.css`. No need
   to repeat the Nova styles here. */

/* ─── Capture-only thank-you panel (Button_Modal_Widget capture mode) ───
 *
 * Sibling of `.cwcg-gate__form-wrap`. Hidden until the JS reveals it on
 * `fluentform_submission_success`. The form-wrap collapses underneath via
 * `--captured` so the dialog height re-flows to the success message height
 * before the auto-close timer fires.
 */
.cwcg-gate__form-wrap.cwcg-gate__form-wrap--captured {
	display: none;
}

/* Pre-submit header ("Get instant access" / subtitle) is redundant once the
 * thank-you panel is showing — the success panel has its own title + body. */
.cwcg-gate--capture.cwcg-gate--captured-shown > .cwcg-button-modal__header {
	display: none;
}

.cwcg-gate__capture-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	padding: 1.25rem 0.5rem 0.25rem;
	opacity: 0;
	transform: translateY(8px) scale(0.985);
	transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.cwcg-gate__capture-success--visible {
	opacity: 1;
	transform: none;
}

.cwcg-gate__capture-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	background: rgba(46, 204, 113, 0.16);
	color: #2ecc71;
	box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.05);
	animation: cwcg-capture-check-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms both;
}

.cwcg-gate__capture-success-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

.cwcg-gate__capture-success-title {
	margin: 0.5rem 0 0;
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	line-height: 1.2;
	font-weight: 600;
	color: var(--cw-text, #f5f7fa);
}

.cwcg-gate__capture-success-body {
	margin: 0;
	max-width: 38ch;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--cw-text-muted, #c9cfd9);
}

.cwcg-gate__capture-success-done {
	margin-top: 1rem;
	appearance: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--cw-text, #f5f7fa);
	padding: 0.55rem 1.25rem;
	border-radius: 999px;
	font: inherit;
	font-weight: 500;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cwcg-gate__capture-success-done:hover,
.cwcg-gate__capture-success-done:focus-visible {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.32);
}

.cwcg-gate__capture-success-done:focus-visible {
	outline: 2px solid var(--cw-accent-secondary, #00b7fa);
	outline-offset: 3px;
}

@keyframes cwcg-capture-check-pop {
	0% { transform: scale(0.6); opacity: 0; }
	60% { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.cwcg-gate__capture-success {
		transition: opacity 1ms;
		transform: none;
	}
	.cwcg-gate__capture-success-icon {
		animation: none;
	}
}