/**
 * Popup widgets — dialog chrome + dialog-scale section overrides.
 * Enqueued with popup.js / builder popup preview / hub popup edit.
 *
 * Contract: the dialog IS the card. Nested page-section cards
 * (rounded-card + shadow-raised + surface) must be flattened.
 */

/* ── Body lock while dialog open ────────────────────────────────────────── */

body[data-tw-popup-open] {
	overflow: hidden;
	touch-action: none;
}

/* ── Front dialog shell ─────────────────────────────────────────────────── */

.tw-popup-overlay,
[data-tw-popup-overlay] {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: var(--tw-popup-overlay-bg, rgba(15, 23, 42, 0.55));
	backdrop-filter: blur(2px);
}

/* Overlay tones — set via data-tw-popup-overlay-tone from popup meta. */
.tw-popup-overlay[data-tw-popup-overlay-tone="dark"],
[data-tw-popup-overlay][data-tw-popup-overlay-tone="dark"],
.tw-popup-builder-preview__stage[data-tw-popup-overlay-tone="dark"],
.tw-design__popup-preview-stage[data-tw-popup-overlay-tone="dark"] {
	--tw-popup-overlay-bg: rgba(15, 23, 42, 0.55);
}

.tw-popup-overlay[data-tw-popup-overlay-tone="light"],
[data-tw-popup-overlay][data-tw-popup-overlay-tone="light"],
.tw-popup-builder-preview__stage[data-tw-popup-overlay-tone="light"],
.tw-design__popup-preview-stage[data-tw-popup-overlay-tone="light"] {
	--tw-popup-overlay-bg: rgba(255, 255, 255, 0.72);
}

.tw-popup-overlay[data-tw-popup-overlay-tone="brand"],
[data-tw-popup-overlay][data-tw-popup-overlay-tone="brand"],
.tw-popup-builder-preview__stage[data-tw-popup-overlay-tone="brand"],
.tw-design__popup-preview-stage[data-tw-popup-overlay-tone="brand"] {
	--tw-popup-overlay-bg: color-mix(in srgb, var(--tw-color-brand-primary, #0f766e) 55%, transparent);
}

.tw-popup-overlay[data-tw-popup-overlay-tone="theme"],
[data-tw-popup-overlay][data-tw-popup-overlay-tone="theme"],
.tw-popup-builder-preview__stage[data-tw-popup-overlay-tone="theme"],
.tw-design__popup-preview-stage[data-tw-popup-overlay-tone="theme"] {
	--tw-popup-overlay-bg: color-mix(in srgb, var(--tw-color-text, #0f172a) 55%, transparent);
}

.tw-popup-overlay[data-tw-popup-overlay-tone="secondary"],
[data-tw-popup-overlay][data-tw-popup-overlay-tone="secondary"],
.tw-popup-builder-preview__stage[data-tw-popup-overlay-tone="secondary"],
.tw-design__popup-preview-stage[data-tw-popup-overlay-tone="secondary"] {
	--tw-popup-overlay-bg: color-mix(in srgb, var(--tw-color-brand-secondary, #2563eb) 55%, transparent);
}

.tw-popup-overlay[data-tw-popup-overlay-tone="accent"],
[data-tw-popup-overlay][data-tw-popup-overlay-tone="accent"],
.tw-popup-builder-preview__stage[data-tw-popup-overlay-tone="accent"],
.tw-design__popup-preview-stage[data-tw-popup-overlay-tone="accent"] {
	--tw-popup-overlay-bg: color-mix(in srgb, var(--tw-color-brand-accent, #f97316) 55%, transparent);
}

/*
 * Front runtime shell only — do NOT set left/top on [data-tw-popup-dialog].
 * Hub + builder reuse that attribute for width/split, but are position:relative
 * inside a flex stage; left:50% there shoves the dialog off-canvas (scrollW > viewport).
 */
.tw-popup-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 9999;
	/* transform set/animated in popup.js — keep translate(-50%,-50%) when open */
	display: flex;
	flex-direction: column;
	width: var(--tw-popup-dialog-width, min(32rem, calc(100% - 1.5rem)));
	max-height: min(90vh, 40rem);
	/*
	 * Dialog stays overflow:visible so inside/outside close controls are never clipped by
	 * border-radius. Scroll + radius clip live on the body / hub mount; classic scrollbars
	 * are hidden (see below) so they cannot square the corners.
	 */
	overflow: visible;
	padding: 0;
	border-radius: var(--tw-radius-large, 1.5rem);
	background: var(--tw-color-surface, #fff);
	box-shadow: var(--tw-shadow-raised, 0 30px 80px rgba(15, 23, 42, 0.22));
	color: var(--tw-color-text, #0f172a);
}

/* Shared dialog surface tokens for hub/builder attribute targets (no positioning). */
[data-tw-popup-dialog].tw-design__popup-preview-dialog,
[data-tw-popup-dialog].tw-popup-builder-preview__dialog {
	display: flex;
	flex-direction: column;
	width: var(--tw-popup-dialog-width, min(32rem, calc(100% - 1.5rem)));
	max-height: min(90vh, 40rem);
	overflow: visible;
	padding: 0;
	border-radius: var(--tw-radius-large, 1.5rem);
	background: var(--tw-color-surface, #fff);
	box-shadow: var(--tw-shadow-raised, 0 30px 80px rgba(15, 23, 42, 0.22));
	color: var(--tw-color-text, #0f172a);
}

/* Desktop width presets (data-tw-popup-width). */
[data-tw-popup-dialog][data-tw-popup-width="sm"],
.tw-popup-builder-preview__dialog[data-tw-popup-width="sm"],
.tw-design__popup-preview-dialog[data-tw-popup-width="sm"] {
	--tw-popup-dialog-width: min(24rem, calc(100% - 1.5rem));
}

[data-tw-popup-dialog][data-tw-popup-width="md"],
.tw-popup-builder-preview__dialog[data-tw-popup-width="md"],
.tw-design__popup-preview-dialog[data-tw-popup-width="md"] {
	--tw-popup-dialog-width: min(32rem, calc(100% - 1.5rem));
}

[data-tw-popup-dialog][data-tw-popup-width="lg"],
.tw-popup-builder-preview__dialog[data-tw-popup-width="lg"],
.tw-design__popup-preview-dialog[data-tw-popup-width="lg"] {
	--tw-popup-dialog-width: min(42rem, calc(100% - 1.5rem));
}

[data-tw-popup-dialog][data-tw-popup-width="xl"],
.tw-popup-builder-preview__dialog[data-tw-popup-width="xl"],
.tw-design__popup-preview-dialog[data-tw-popup-width="xl"] {
	--tw-popup-dialog-width: min(52rem, calc(100% - 1.5rem));
}

.tw-popup-dialog__body,
[data-tw-popup-dialog] > .tw-popup-body,
[data-tw-popup-dialog] > .tw-popup-widgets,
[data-tw-popup-dialog] > [data-tw-popup-widgets],
[data-tw-popup-dialog] > [data-popup-body-preview] > .tw-popup-body,
[data-tw-popup-dialog] > [data-popup-body-preview] > .tw-popup-widgets,
.tw-popup-builder-preview__dialog > .tw-popup-widgets,
.tw-popup-builder-preview__dialog > [data-tw-popup-widgets] {
	flex: 1 1 auto;
	min-height: 0;
	max-height: min(90vh, 40rem);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/* Equal padding — close is absolute overlay, not a reserved column. */
	padding: 1.5rem;
	/* Explicit token — never inherit through display:contents (radius → 0, scrollbar squares corners). */
	border-radius: var(--tw-radius-large, 1.5rem);
	box-sizing: border-box;
	background-clip: padding-box;
}

/*
 * Hub: mount clips as backup; the scrolling element MUST carry the same radius.
 * Chromium only rounds the scrollbar when border-radius + overflow:auto share one box.
 * Mount is a real box now, so inherit resolves (unlike display:contents → 0).
 */
[data-tw-popup-dialog] > [data-popup-body-preview] > .tw-popup-body,
[data-tw-popup-dialog] > [data-popup-body-preview] > .tw-popup-widgets {
	border-radius: inherit;
	max-height: none;
}

/*
 * Hide classic scrollbars on the dialog body. Track/thumb paint as a square strip and
 * kill the radius on that edge even with overflow:hidden on the dialog. Wheel / touch /
 * trackpad scrolling still works. Dialog overflow:hidden keeps the surface corners clean.
 */
[data-tw-popup-dialog] .tw-popup-body,
[data-tw-popup-dialog] .tw-popup-widgets,
.tw-design__popup-preview-dialog .tw-popup-body {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge */
}

[data-tw-popup-dialog] .tw-popup-body::-webkit-scrollbar,
[data-tw-popup-dialog] .tw-popup-widgets::-webkit-scrollbar,
.tw-design__popup-preview-dialog .tw-popup-body::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* Close always above the scrolling mount (mount paints after close in DOM). */
[data-tw-popup-dialog] > .tw-popup-close,
[data-tw-popup-dialog] > [data-tw-popup-close] {
	z-index: 6;
}

/* Dialog fill presets (Appearance → Background). */
[data-tw-popup-dialog][data-tw-popup-bg="surface"],
.tw-popup-dialog[data-tw-popup-bg="surface"] {
	background: var(--tw-color-surface, #fff);
	color: var(--tw-color-text, #0f172a);
}
[data-tw-popup-dialog][data-tw-popup-bg="page"],
.tw-popup-dialog[data-tw-popup-bg="page"] {
	background: var(--tw-color-page, #f8fafc);
	color: var(--tw-color-text, #0f172a);
}
[data-tw-popup-dialog][data-tw-popup-bg="soft"],
.tw-popup-dialog[data-tw-popup-bg="soft"] {
	background: var(--tw-color-surface-alt, #f1f5f9);
	color: var(--tw-color-text, #0f172a);
}
[data-tw-popup-dialog][data-tw-popup-bg="brand"],
.tw-popup-dialog[data-tw-popup-bg="brand"] {
	background: var(--tw-color-brand-primary);
	color: var(--tw-color-on-primary, #fff);
}
[data-tw-popup-dialog][data-tw-popup-bg="secondary"],
.tw-popup-dialog[data-tw-popup-bg="secondary"] {
	background: var(--tw-color-brand-secondary);
	color: var(--tw-color-on-primary, #fff);
}
[data-tw-popup-dialog][data-tw-popup-bg="accent"],
.tw-popup-dialog[data-tw-popup-bg="accent"] {
	background: var(--tw-color-brand-accent);
	color: var(--tw-color-on-primary, #fff);
}
[data-tw-popup-dialog][data-tw-popup-bg="dark"],
.tw-popup-dialog[data-tw-popup-bg="dark"] {
	background: var(--tw-color-text, #0f172a);
	color: var(--tw-color-on-primary, #fff);
}
[data-tw-popup-dialog][data-tw-popup-bg="muted"],
.tw-popup-dialog[data-tw-popup-bg="muted"] {
	background: var(--tw-color-muted, #64748b);
	color: #fff;
}

[data-tw-popup-dialog][data-tw-popup-bg="brand"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-bg="secondary"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-bg="accent"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-bg="dark"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-bg="muted"] .tw-popup-close {
	background: color-mix(in srgb, #fff 92%, transparent);
	color: var(--tw-color-text, #0f172a);
	border-color: color-mix(in srgb, #fff 40%, transparent);
}

/*
 * Hub mount = radius clip shell (not display:contents).
 * inherit on the scroll body fails through contents (computed radius 0) and the
 * scrollbar paints square over the dialog corner. Mount clips; body scrolls inside.
 */
[data-tw-popup-dialog] > [data-popup-body-preview] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	max-height: min(90vh, 40rem);
	overflow: hidden;
	border-radius: inherit;
}

.tw-popup-close,
[data-tw-popup-close] {
	position: absolute;
	top: 0.7rem;
	inset-inline-end: 0.7rem;
	inset-inline-start: auto;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--tw-color-text, #0f172a) 12%, transparent);
	border-radius: 999px;
	background: var(--tw-color-surface, #fff);
	color: var(--tw-color-muted, #475569);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Close placement — Appearance → Close button (logical, RTL-safe). Full corner set. */
[data-tw-popup-dialog][data-tw-popup-close-pos="inside_end"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-close-pos="inside_end"] [data-tw-popup-close] {
	top: 0.7rem;
	bottom: auto;
	inset-inline-end: 0.7rem;
	inset-inline-start: auto;
}

[data-tw-popup-dialog][data-tw-popup-close-pos="inside_start"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-close-pos="inside_start"] [data-tw-popup-close] {
	top: 0.7rem;
	bottom: auto;
	inset-inline-start: 0.7rem;
	inset-inline-end: auto;
}

[data-tw-popup-dialog][data-tw-popup-close-pos="outside_end"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-close-pos="outside_end"] [data-tw-popup-close] {
	top: -0.55rem;
	bottom: auto;
	inset-inline-end: -0.55rem;
	inset-inline-start: auto;
}

[data-tw-popup-dialog][data-tw-popup-close-pos="outside_start"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-close-pos="outside_start"] [data-tw-popup-close] {
	top: -0.55rem;
	bottom: auto;
	inset-inline-start: -0.55rem;
	inset-inline-end: auto;
}

[data-tw-popup-dialog][data-tw-popup-close-pos="inside_end_bottom"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-close-pos="inside_end_bottom"] [data-tw-popup-close] {
	top: auto;
	bottom: 0.7rem;
	inset-inline-end: 0.7rem;
	inset-inline-start: auto;
}

[data-tw-popup-dialog][data-tw-popup-close-pos="inside_start_bottom"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-close-pos="inside_start_bottom"] [data-tw-popup-close] {
	top: auto;
	bottom: 0.7rem;
	inset-inline-start: 0.7rem;
	inset-inline-end: auto;
}

[data-tw-popup-dialog][data-tw-popup-close-pos="outside_end_bottom"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-close-pos="outside_end_bottom"] [data-tw-popup-close] {
	top: auto;
	bottom: -0.55rem;
	inset-inline-end: -0.55rem;
	inset-inline-start: auto;
}

[data-tw-popup-dialog][data-tw-popup-close-pos="outside_start_bottom"] .tw-popup-close,
[data-tw-popup-dialog][data-tw-popup-close-pos="outside_start_bottom"] [data-tw-popup-close] {
	top: auto;
	bottom: -0.55rem;
	inset-inline-start: -0.55rem;
	inset-inline-end: auto;
}

.tw-popup-close:hover,
[data-tw-popup-close]:hover {
	color: var(--tw-color-text, #0f172a);
	border-color: color-mix(in srgb, var(--tw-color-text, #0f172a) 28%, transparent);
	background: color-mix(in srgb, var(--tw-color-text, #0f172a) 4%, #fff);
}

.tw-popup-close:focus-visible,
[data-tw-popup-close]:focus-visible {
	outline: 2px solid var(--tw-color-brand-primary, #0f766e);
	outline-offset: 2px;
}

.tw-popup-dialog:focus {
	outline: none;
}

.tw-popup-legacy-image {
	width: 100%;
	border-radius: var(--tw-radius-medium, 1rem);
	margin-bottom: 1.25rem;
}

.tw-popup-legacy-content a.tw-popup-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--tw-radius-button, 0.75rem);
	background: var(--tw-color-brand-primary, #0f766e);
	color: var(--tw-color-on-primary, #fff);
	font-weight: 600;
	text-decoration: none;
}

.tw-popup-legacy-form {
	margin-top: 1.25rem;
}

/* ── Widget stack ───────────────────────────────────────────────────────── */

[data-tw-popup-dialog] .tw-popup-widgets,
.tw-popup-builder-preview__dialog .tw-popup-widgets,
.tw-design__popup-preview-widgets {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section],
.tw-design__popup-preview-widgets [data-section] {
	padding-block: 0 !important;
	margin: 0;
	min-height: 0 !important;
	width: 100%;
}

[data-tw-popup-dialog] .tw-popup-widgets h1,
.tw-popup-builder-preview__dialog .tw-popup-widgets h1,
.tw-design__popup-preview-widgets h1 {
	font-size: clamp(1.45rem, 2.4vw, 1.8rem) !important;
	line-height: 1.25 !important;
	letter-spacing: -0.02em;
	margin: 0 0 0.4rem !important;
	max-width: none !important;
}

[data-tw-popup-dialog] .tw-popup-widgets h2,
.tw-popup-builder-preview__dialog .tw-popup-widgets h2,
.tw-design__popup-preview-widgets h2 {
	font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
	line-height: 1.3 !important;
	margin: 0 0 0.65rem !important;
	max-width: none !important;
}

[data-tw-popup-dialog] .tw-popup-widgets .tw-popup-el__title,
.tw-popup-builder-preview__dialog .tw-popup-widgets .tw-popup-el__title,
.tw-design__popup-preview-widgets .tw-popup-el__title {
	font-family: var(--tw-font-heading, inherit) !important;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
	line-height: 1.2 !important;
	margin: 0 0 0.7rem !important;
}

[data-tw-popup-dialog] .tw-popup-widgets .tw-section-intro > p,
.tw-popup-builder-preview__dialog .tw-popup-widgets .tw-section-intro > p,
.tw-design__popup-preview-widgets .tw-section-intro > p {
	font-size: 0.95rem !important;
	line-height: 1.55 !important;
	margin: 0 0 0.75rem !important;
	max-width: none !important;
	color: var(--tw-color-muted, #475569);
}

[data-tw-popup-dialog] .tw-popup-widgets .tw-container,
.tw-popup-builder-preview__dialog .tw-popup-widgets .tw-container,
.tw-design__popup-preview-widgets .tw-container {
	width: 100%;
	max-width: none !important;
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}

/* Kill page-scale width caps inside the dialog. */
[data-tw-popup-dialog] .tw-popup-widgets .max-w-xl,
[data-tw-popup-dialog] .tw-popup-widgets .max-w-2xl,
[data-tw-popup-dialog] .tw-popup-widgets .max-w-3xl,
[data-tw-popup-dialog] .tw-popup-widgets .max-w-4xl,
[data-tw-popup-dialog] .tw-popup-widgets .mx-auto,
.tw-popup-builder-preview__dialog .tw-popup-widgets .max-w-xl,
.tw-popup-builder-preview__dialog .tw-popup-widgets .max-w-2xl,
.tw-popup-builder-preview__dialog .tw-popup-widgets .max-w-3xl,
.tw-popup-builder-preview__dialog .tw-popup-widgets .mx-auto,
.tw-design__popup-preview-widgets .max-w-xl,
.tw-design__popup-preview-widgets .max-w-2xl,
.tw-design__popup-preview-widgets .max-w-3xl,
.tw-design__popup-preview-widgets .max-w-4xl,
.tw-design__popup-preview-widgets .mx-auto {
	max-width: none !important;
	margin-inline: 0 !important;
	width: 100%;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-tw-intro-track],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-tw-intro-track],
.tw-design__popup-preview-widgets [data-tw-intro-track] {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

/*
 * Media split: stack by default; restore 2-col when dialog is lg/xl AND viewport ≥640px.
 * Narrow presets (sm/md) stay stacked even on desktop.
 */
[data-tw-popup-dialog] .tw-popup-widgets [class*="lg:grid-cols"],
[data-tw-popup-dialog] .tw-popup-widgets [class*="md:grid-cols"],
[data-tw-popup-dialog] .tw-popup-widgets [class*="sm:grid-cols"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [class*="lg:grid-cols"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [class*="md:grid-cols"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [class*="sm:grid-cols"],
.tw-design__popup-preview-dialog .tw-popup-widgets [class*="lg:grid-cols"],
.tw-design__popup-preview-dialog .tw-design__popup-preview-widgets [class*="lg:grid-cols"] {
	grid-template-columns: 1fr !important;
	gap: 0.85rem !important;
}

@media (min-width: 640px) {
	[data-tw-popup-dialog][data-tw-popup-width="lg"] .tw-popup-widgets [class*="lg:grid-cols"],
	[data-tw-popup-dialog][data-tw-popup-width="xl"] .tw-popup-widgets [class*="lg:grid-cols"],
	.tw-popup-builder-preview__dialog[data-tw-popup-width="lg"] .tw-popup-widgets [class*="lg:grid-cols"],
	.tw-popup-builder-preview__dialog[data-tw-popup-width="xl"] .tw-popup-widgets [class*="lg:grid-cols"],
	.tw-design__popup-preview-dialog[data-tw-popup-width="lg"] .tw-popup-widgets [class*="lg:grid-cols"],
	.tw-design__popup-preview-dialog[data-tw-popup-width="xl"] .tw-popup-widgets [class*="lg:grid-cols"],
	.tw-design__popup-preview-dialog[data-tw-popup-width="lg"] .tw-design__popup-preview-widgets [class*="lg:grid-cols"],
	.tw-design__popup-preview-dialog[data-tw-popup-width="xl"] .tw-design__popup-preview-widgets [class*="lg:grid-cols"] {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
		gap: 1.25rem !important;
		align-items: center;
	}

	[data-tw-popup-dialog][data-tw-popup-width="lg"] .tw-popup-widgets img,
	[data-tw-popup-dialog][data-tw-popup-width="xl"] .tw-popup-widgets img,
	.tw-popup-builder-preview__dialog[data-tw-popup-width="lg"] .tw-popup-widgets img,
	.tw-popup-builder-preview__dialog[data-tw-popup-width="xl"] .tw-popup-widgets img,
	.tw-design__popup-preview-dialog[data-tw-popup-width="lg"] .tw-popup-widgets img,
	.tw-design__popup-preview-dialog[data-tw-popup-width="xl"] .tw-popup-widgets img,
	.tw-design__popup-preview-dialog[data-tw-popup-width="lg"] .tw-design__popup-preview-widgets img,
	.tw-design__popup-preview-dialog[data-tw-popup-width="xl"] .tw-design__popup-preview-widgets img {
		max-height: 18rem;
	}
}

/* Tighten page-scale vertical stacks. */
[data-tw-popup-dialog] .tw-popup-widgets .space-y-6 > :not([hidden]) ~ :not([hidden]),
.tw-popup-builder-preview__dialog .tw-popup-widgets .space-y-6 > :not([hidden]) ~ :not([hidden]) {
	margin-top: 0.85rem !important;
}

[data-tw-popup-dialog] .tw-popup-widgets .space-y-4 > :not([hidden]) ~ :not([hidden]),
.tw-popup-builder-preview__dialog .tw-popup-widgets .space-y-4 > :not([hidden]) ~ :not([hidden]) {
	margin-top: 0.55rem !important;
}

[data-tw-popup-dialog] .tw-popup-widgets img,
.tw-popup-builder-preview__dialog .tw-popup-widgets img,
.tw-design__popup-preview-widgets img {
	max-height: 11rem;
	width: 100%;
	object-fit: cover;
	border-radius: var(--tw-radius-medium, 1rem);
}

/* CTA / buttons inside dialog — front `.tw-btn` stack (hub preview loads app.css too). */
[data-tw-popup-dialog] .tw-popup-widgets .tw-btn,
[data-tw-popup-dialog] .tw-popup-widgets a[class*="btn"],
[data-tw-popup-dialog] .tw-popup-el__cta-row .tw-btn,
.tw-popup-builder-preview__dialog .tw-popup-widgets .tw-btn {
	margin-top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: var(--tw-button-padding-y, 0.75rem) var(--tw-button-padding-x, 1.25rem);
	border-radius: var(--tw-radius-button, 9999px);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.25;
	text-decoration: none;
	box-sizing: border-box;
	border: 0 solid transparent;
	cursor: default;
}

/* Token fills when utility classes are absent (belt-and-suspenders for bare tw-btn--*). */
[data-tw-popup-dialog] .tw-btn--primary {
	background: var(--tw-color-brand-primary, #4f46e5);
	color: var(--tw-color-on-primary, #fff);
}
[data-tw-popup-dialog] .tw-btn--secondary {
	background: var(--tw-color-brand-secondary, #64748b);
	color: var(--tw-color-page, #f8fafc);
}
[data-tw-popup-dialog] .tw-btn--accent {
	background: var(--tw-color-brand-accent, #f59e0b);
	color: var(--tw-color-page, #f8fafc);
}
[data-tw-popup-dialog] .tw-btn--surface {
	background: var(--tw-color-surface, #fff);
	color: var(--tw-color-text, #0f172a);
	box-shadow: inset 0 0 0 1px var(--tw-color-border, #e2e8f0);
}
[data-tw-popup-dialog] .tw-btn--outline {
	background: transparent;
	color: var(--tw-color-brand-primary, #4f46e5);
	box-shadow: inset 0 0 0 1px var(--tw-color-brand-primary, #4f46e5);
}
[data-tw-popup-dialog] .tw-btn--ghost {
	background: transparent;
	color: var(--tw-color-text, #0f172a);
}
[data-tw-popup-dialog] .tw-btn--dark {
	background: var(--tw-color-text, #0f172a);
	color: var(--tw-color-page, #f8fafc);
}

/*
 * CTA wrappers: stack by default in narrow dialogs.
 * `minimal` keeps start alignment; `centered`/`banner` center; lg+ minimal can go row.
 */
[data-tw-popup-dialog] .tw-popup-widgets [data-section="cta"] [class*="justify-between"],
[data-tw-popup-dialog] .tw-popup-widgets [data-section="cta"] [class*="sm:flex-row"],
[data-tw-popup-dialog] .tw-popup-widgets [data-section="cta"] [class*="lg:flex-row"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="cta"] [class*="justify-between"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="cta"] [class*="sm:flex-row"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="cta"] [class*="lg:flex-row"],
.tw-design__popup-preview-widgets [data-section="cta"] [class*="justify-between"],
.tw-design__popup-preview-widgets [data-section="cta"] [class*="sm:flex-row"],
.tw-design__popup-preview-widgets [data-section="cta"] [class*="lg:flex-row"] {
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0.85rem !important;
}

@media (min-width: 640px) {
	[data-tw-popup-dialog][data-tw-popup-width="lg"] .tw-popup-widgets [data-section="cta"][data-style="minimal"] [class*="justify-between"],
	[data-tw-popup-dialog][data-tw-popup-width="xl"] .tw-popup-widgets [data-section="cta"][data-style="minimal"] [class*="justify-between"],
	[data-tw-popup-dialog][data-tw-popup-width="lg"] .tw-popup-widgets [data-section="cta"][data-style="minimal"] [class*="sm:flex-row"],
	[data-tw-popup-dialog][data-tw-popup-width="xl"] .tw-popup-widgets [data-section="cta"][data-style="minimal"] [class*="sm:flex-row"],
	.tw-popup-builder-preview__dialog[data-tw-popup-width="lg"] .tw-popup-widgets [data-section="cta"][data-style="minimal"] [class*="justify-between"],
	.tw-popup-builder-preview__dialog[data-tw-popup-width="xl"] .tw-popup-widgets [data-section="cta"][data-style="minimal"] [class*="justify-between"] {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 1rem !important;
	}
}

/* ── Widget layout style fingerprints (must be visibly distinct) ───────── */

/* Hero: compact = tight; centered = roomier type; media_card = split; centered_media = media under.
   Centered/compact/centered_media CTA row is [data-tw-hero-actions] (not justify-start). */
[data-tw-popup-dialog] .tw-popup-widgets [data-section="hero"][data-style="compact"] h1,
[data-tw-popup-dialog] .tw-popup-widgets [data-section="hero"][data-style="compact"] h2,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="hero"][data-style="compact"] h1,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="hero"][data-style="compact"] h2,
.tw-design__popup-preview-widgets [data-section="hero"][data-style="compact"] h1,
.tw-design__popup-preview-widgets [data-section="hero"][data-style="compact"] h2 {
	font-size: clamp(1.2rem, 2vw, 1.45rem) !important;
	margin-bottom: 0.25rem !important;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="hero"][data-style="compact"] .tw-section-intro > p,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="hero"][data-style="compact"] .tw-section-intro > p,
.tw-design__popup-preview-widgets [data-section="hero"][data-style="compact"] .tw-section-intro > p {
	font-size: 0.875rem !important;
	margin-bottom: 0.5rem !important;
}

/* Leading text: data-tw-intro-align (independent of the style tile). */
[data-tw-popup-dialog] .tw-popup-widgets .tw-section-intro[data-tw-intro-align="center"],
.tw-popup-builder-preview__dialog .tw-popup-widgets .tw-section-intro[data-tw-intro-align="center"],
.tw-design__popup-preview-widgets .tw-section-intro[data-tw-intro-align="center"] {
	align-items: center !important;
	text-align: center !important;
}

[data-tw-popup-dialog] .tw-popup-widgets .tw-section-intro[data-tw-intro-align="start"],
.tw-popup-builder-preview__dialog .tw-popup-widgets .tw-section-intro[data-tw-intro-align="start"],
.tw-design__popup-preview-widgets .tw-section-intro[data-tw-intro-align="start"] {
	align-items: flex-start !important;
	text-align: start !important;
}

[data-tw-popup-dialog] .tw-popup-widgets .tw-section-intro[data-tw-intro-align="end"],
.tw-popup-builder-preview__dialog .tw-popup-widgets .tw-section-intro[data-tw-intro-align="end"],
.tw-design__popup-preview-widgets .tw-section-intro[data-tw-intro-align="end"] {
	align-items: flex-end !important;
	text-align: end !important;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="center"]) [data-tw-hero-actions],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="center"]) [data-tw-hero-actions],
.tw-design__popup-preview-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="center"]) [data-tw-hero-actions],
[data-tw-popup-dialog] .tw-popup-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="center"]) [data-tw-cta-actions],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="center"]) [data-tw-cta-actions],
.tw-design__popup-preview-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="center"]) [data-tw-cta-actions] {
	justify-content: center !important;
	width: 100%;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="end"]) [data-tw-hero-actions],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="end"]) [data-tw-hero-actions],
.tw-design__popup-preview-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="end"]) [data-tw-hero-actions],
[data-tw-popup-dialog] .tw-popup-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="end"]) [data-tw-cta-actions],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="end"]) [data-tw-cta-actions],
.tw-design__popup-preview-widgets [data-section]:has(.tw-section-intro[data-tw-intro-align="end"]) [data-tw-cta-actions] {
	justify-content: flex-end !important;
	width: 100%;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="hero"][data-style="centered"] h1,
[data-tw-popup-dialog] .tw-popup-widgets [data-section="hero"][data-style="centered"] h2,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="hero"][data-style="centered"] h1,
.tw-design__popup-preview-widgets [data-section="hero"][data-style="centered"] h1 {
	font-size: clamp(1.55rem, 2.6vw, 1.95rem) !important;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="hero"][data-style="centered_media"] img,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="hero"][data-style="centered_media"] img,
.tw-design__popup-preview-widgets [data-section="hero"][data-style="centered_media"] img {
	max-height: 13rem;
	margin-inline: auto;
	margin-top: 0.75rem;
}

/* CTA: style owns composition; intro/actions follow data-tw-intro-align. */
[data-tw-popup-dialog] .tw-popup-widgets [data-section="cta"][data-style="banner"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="cta"][data-style="banner"],
.tw-design__popup-preview-widgets [data-section="cta"][data-style="banner"] {
	text-align: center;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="cta"][data-style="banner"] [class*="flex"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="cta"][data-style="banner"] [class*="flex"] {
	justify-content: center !important;
}

/* Form: minimal = flush; inline = top rule; centered = narrow centered; compact = dense fields */
[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="minimal"] .tw-section-intro,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="form"][data-style="minimal"] .tw-section-intro {
	margin-bottom: 0.15rem;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="inline"] .tw-section-intro,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="form"][data-style="inline"] .tw-section-intro,
.tw-design__popup-preview-widgets [data-section="form"][data-style="inline"] .tw-section-intro {
	padding-bottom: 0.75rem;
	margin-bottom: 0.85rem;
	border-bottom: 1px solid color-mix(in srgb, var(--tw-color-border, #e2e8f0) 90%, transparent);
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="centered"] form,
[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="centered"] .twf-form,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="form"][data-style="centered"] form,
.tw-design__popup-preview-widgets [data-section="form"][data-style="centered"] form {
	max-width: 22rem !important;
	margin-inline: auto !important;
	text-align: start;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="compact"] .tw-section-intro > p,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="form"][data-style="compact"] .tw-section-intro > p {
	font-size: 0.85rem !important;
	margin-bottom: 0.4rem !important;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="compact"] .twf-form__field,
[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="compact"] .twf-form__row,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="form"][data-style="compact"] .twf-form__field {
	margin-bottom: 0.45rem !important;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="compact"] input[type="text"],
[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="compact"] input[type="email"],
[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="compact"] .twf-form__input,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="form"][data-style="compact"] .twf-form__input {
	padding-block: 0.45rem !important;
	font-size: 0.9rem !important;
}

/* Reverse splits: media first even when stacked (lg:order only fires at lg) */
[data-tw-popup-dialog] .tw-popup-widgets [data-section="about"][data-style="founder_split_reverse"] [class*="lg:order-1"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="about"][data-style="founder_split_reverse"] [class*="lg:order-1"],
.tw-design__popup-preview-widgets [data-section="about"][data-style="founder_split_reverse"] [class*="lg:order-1"],
[data-tw-popup-dialog] .tw-popup-widgets [data-section="hero"][data-style="media_card_reverse"] [class*="lg:order-first"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="hero"][data-style="media_card_reverse"] [class*="lg:order-first"],
.tw-design__popup-preview-widgets [data-section="hero"][data-style="media_card_reverse"] [class*="lg:order-first"] {
	order: -1 !important;
}

[data-tw-popup-dialog] .tw-popup-widgets [data-section="about"][data-style="founder_split"],
[data-tw-popup-dialog] .tw-popup-widgets [data-section="about"][data-style="founder_split_reverse"],
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="about"][data-style="founder_split"],
.tw-design__popup-preview-widgets [data-section="about"][data-style="founder_split"] {
	text-align: start;
}

/*
 * Flatten nested page cards — dialog already provides surface + radius + shadow.
 * Targets CTA card / form shells / any surface raised panel.
 */
[data-tw-popup-dialog] .tw-popup-widgets .tw-form-shell,
[data-tw-popup-dialog] .tw-popup-widgets .rounded-card.bg-theme-surface,
[data-tw-popup-dialog] .tw-popup-widgets .bg-theme-surface.shadow-raised,
[data-tw-popup-dialog] .tw-popup-widgets .bg-theme-surface.shadow-soft,
[data-tw-popup-dialog] .tw-popup-widgets .bg-theme-surface.ring-1,
.tw-popup-builder-preview__dialog .tw-popup-widgets .tw-form-shell,
.tw-popup-builder-preview__dialog .tw-popup-widgets .rounded-card.bg-theme-surface,
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-theme-surface.shadow-raised,
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-theme-surface.shadow-soft,
.tw-design__popup-preview-widgets .tw-form-shell,
.tw-design__popup-preview-widgets .rounded-card.bg-theme-surface,
.tw-design__popup-preview-widgets .bg-theme-surface.shadow-raised {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	--tw-ring-shadow: 0 0 #0000 !important;
	--tw-ring-offset-shadow: 0 0 #0000 !important;
	--tw-shadow: 0 0 #0000 !important;
}

/* Brand / tinted nested panels: one composition — bleed to dialog edges. */
[data-tw-popup-dialog] .tw-popup-widgets .rounded-card.bg-brand-primary,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary.rounded-card,
[data-tw-popup-dialog] .tw-popup-widgets [class*="bg-brand-primary"].rounded-card,
.tw-popup-builder-preview__dialog .tw-popup-widgets .rounded-card.bg-brand-primary,
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary.rounded-card,
.tw-design__popup-preview-widgets .rounded-card.bg-brand-primary,
.tw-design__popup-preview-widgets .bg-brand-primary.rounded-card {
	margin: -1.5rem !important;
	padding: 2rem 1.5rem !important;
	border-radius: var(--tw-radius-large, 1.5rem) !important;
	box-shadow: none !important;
	width: auto !important;
	max-width: none !important;
	color: #fff !important;
}

/* Readable type on brand bands (section templates often keep dark ink). */
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary h1,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary h2,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary h3,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary p,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary .text-theme-muted,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary .text-theme-text,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary [class*="text-slate"],
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary h1,
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary h2,
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary h3,
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary p,
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary .text-theme-muted,
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary [class*="text-slate"],
.tw-design__popup-preview-widgets .bg-brand-primary h1,
.tw-design__popup-preview-widgets .bg-brand-primary h2,
.tw-design__popup-preview-widgets .bg-brand-primary h3,
.tw-design__popup-preview-widgets .bg-brand-primary p,
.tw-design__popup-preview-widgets .bg-brand-primary .text-theme-muted,
.tw-design__popup-preview-widgets .bg-brand-primary [class*="text-slate"] {
	color: #fff !important;
}

[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary .tw-section-intro > p,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary .text-theme-muted,
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary .tw-section-intro > p {
	color: rgba(255, 255, 255, 0.88) !important;
}

[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary a[class*="btn"],
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary .tw-btn,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary a[href],
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary a[class*="btn"],
.tw-popup-builder-preview__dialog .tw-popup-widgets .bg-brand-primary a[href] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin-top: 0.5rem;
	padding: 0.7rem 1.15rem !important;
	border-radius: var(--tw-radius-button, 0.75rem);
	background: #fff !important;
	color: var(--tw-color-brand-primary, #0f766e) !important;
	border: 0 !important;
	font-weight: 600;
	text-decoration: none !important;
}

/* Close stays readable on brand-bleed panels. */
[data-tw-popup-dialog]:has(.bg-brand-primary) .tw-popup-close,
.tw-popup-builder-preview__dialog:has(.bg-brand-primary) .tw-popup-builder-preview__close {
	background: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

/* Brand bleed panels: content-sized, even padding (no tall empty band). */
[data-tw-popup-dialog] .tw-popup-widgets .rounded-card.bg-brand-primary,
[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary.rounded-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 0 !important;
}

[data-tw-popup-dialog] .tw-popup-widgets form,
.tw-popup-builder-preview__dialog .tw-popup-widgets form {
	margin-top: 0.5rem;
	width: 100%;
	max-width: none !important;
}

/* Keep form centered distinct after the global form max-width kill. */
[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="centered"] form,
[data-tw-popup-dialog] .tw-popup-widgets [data-section="form"][data-style="centered"] .twf-form,
.tw-popup-builder-preview__dialog .tw-popup-widgets [data-section="form"][data-style="centered"] form,
.tw-design__popup-preview-widgets [data-section="form"][data-style="centered"] form {
	max-width: 22rem !important;
	margin-inline: auto !important;
}

/* Section intro already carries the headline — drop form preset title. */
[data-tw-popup-dialog] .tw-popup-widgets .twf-form__title,
.tw-popup-builder-preview__dialog .tw-popup-widgets .twf-form__title,
.tw-design__popup-preview-widgets .twf-form__title {
	display: none;
}

[data-tw-popup-dialog] .tw-popup-widgets .twf-form,
[data-tw-popup-dialog] .tw-popup-widgets .twf-form__field,
.tw-popup-builder-preview__dialog .tw-popup-widgets .twf-form,
.tw-popup-builder-preview__dialog .tw-popup-widgets .twf-form__field {
	width: 100%;
	max-width: none !important;
}

[data-tw-popup-dialog] .tw-popup-widgets input[type="text"],
[data-tw-popup-dialog] .tw-popup-widgets input[type="email"],
[data-tw-popup-dialog] .tw-popup-widgets input[type="tel"],
[data-tw-popup-dialog] .tw-popup-widgets textarea,
[data-tw-popup-dialog] .tw-popup-widgets select,
[data-tw-popup-dialog] .tw-popup-widgets .twf-form__input,
.tw-popup-builder-preview__dialog .tw-popup-widgets input[type="text"],
.tw-popup-builder-preview__dialog .tw-popup-widgets input[type="email"],
.tw-popup-builder-preview__dialog .tw-popup-widgets .twf-form__input {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* ── Builder iframe chrome ──────────────────────────────────────────────── */

.tw-popup-builder-preview__stage {
	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	width: 100%;
	max-width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	overflow-x: hidden;
	/* Fake page under scrim (parity with hub live preview). */
	background-color: #f1f5f9;
	background-image:
		linear-gradient(#cbd5e1, #cbd5e1),
		linear-gradient(#e2e8f0, #e2e8f0),
		linear-gradient(#e2e8f0, #e2e8f0),
		linear-gradient(#ffffff, #ffffff);
	background-size: 28% 14px, 50% 9px, 36% 9px, 40% 50%;
	background-position: 8% 12%, 8% 20%, 8% 26%, 55% 16%;
	background-repeat: no-repeat;
}

.tw-popup-builder-preview__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--tw-popup-overlay-bg, rgba(15, 23, 42, 0.55));
}

.tw-popup-builder-preview__stage > * {
	position: relative;
	z-index: 2;
}

.tw-popup-builder-preview__dialog {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	inset: auto;
	transform: none;
	display: flex;
	flex-direction: column;
	width: var(--tw-popup-dialog-width, min(32rem, 100%));
	max-width: min(100%, var(--tw-popup-dialog-width, 32rem));
	max-height: 90vh;
	overflow: visible;
	padding: 0;
	border-radius: var(--tw-radius-large, 1.5rem);
	background: var(--tw-color-surface, #fff);
	box-shadow: var(--tw-shadow-raised, 0 30px 80px rgba(15, 23, 42, 0.18));
	flex-shrink: 0;
}

.tw-popup-builder-preview__dialog > .tw-popup-widgets,
.tw-popup-builder-preview__dialog > #tw-page-sections {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 90vh;
	overflow: auto;
	padding: 1.5rem;
	border-radius: inherit;
}

.tw-popup-builder-preview__close {
	position: absolute;
	top: 0.7rem;
	inset-inline-end: 0.7rem;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid color-mix(in srgb, var(--tw-color-text, #0f172a) 12%, transparent);
	border-radius: 999px;
	background: var(--tw-color-surface, #fff);
	font-size: 1rem;
	line-height: 1;
	color: var(--tw-color-muted, #475569);
	cursor: default;
}

.tw-popup-builder-preview__empty {
	margin: 0;
	color: var(--tw-color-muted, #475569);
	font-size: 0.95rem;
}

/* Builder selection outline must not clip widget content. */
html.tw-builder-preview .tw-popup-widgets [data-tw-section-index].tw-builder-section-active,
html.tw-builder-preview .tw-popup-widgets [data-section].tw-builder-section-active {
	outline-offset: 2px;
	padding: 0.35rem !important;
	margin: 0;
	border-radius: 0.5rem;
}

/* Hub viewport toggle (admin cannot shrink/expand the real browser viewport). */
.tw-design__popup-preview-stage[data-preview-viewport="desktop"] .tw-design__popup-preview-dialog .tw-popup-body__grid {
	grid-template-columns: 1fr 1fr !important;
}

.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog .tw-popup-widgets [class*="lg:grid-cols"],
.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog .tw-popup-widgets [class*="md:grid-cols"],
.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog .tw-design__popup-preview-widgets [class*="lg:grid-cols"],
.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog .tw-popup-body__grid {
	grid-template-columns: 1fr !important;
	gap: var(--tw-content-gap, 1.5rem) !important;
}

/* Hub mobile viewport — honor Mobile stack (photo top/bottom) for split recipes. */
.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-popup-body[data-tw-popup-mobile-media="top"] .tw-popup-body__media-col {
	order: -1;
}

.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-popup-body[data-tw-popup-mobile-media="bottom"] .tw-popup-body__media-col {
	order: 2;
}

.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-popup-body[data-tw-popup-mobile-media="bottom"] .tw-popup-body__content {
	order: 1;
}

.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog[data-tw-popup-width-mobile="full"] {
	--tw-popup-dialog-width: calc(100% - 1rem);
}

.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog[data-tw-popup-width-mobile="sm"] {
	--tw-popup-dialog-width: min(22rem, calc(100% - 1rem));
}

.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog[data-tw-popup-width-mobile="md"] {
	--tw-popup-dialog-width: min(28rem, calc(100% - 1rem));
}

.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog {
	border-radius: var(--tw-radius-medium, 1rem);
}

.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog > .tw-popup-widgets,
.tw-design__popup-preview-stage[data-preview-viewport="mobile"] .tw-design__popup-preview-dialog > [data-popup-body-preview] > .tw-popup-body {
	padding: 1.25rem 1.1rem;
}

@media (max-width: 639px) {
	/* Mobile always stacks media — even xl desktop presets. */
	[data-tw-popup-dialog] .tw-popup-widgets [class*="lg:grid-cols"],
	[data-tw-popup-dialog] .tw-popup-widgets [class*="md:grid-cols"],
	.tw-popup-builder-preview__dialog .tw-popup-widgets [class*="lg:grid-cols"],
	.tw-design__popup-preview-dialog .tw-popup-widgets [class*="lg:grid-cols"],
	.tw-design__popup-preview-dialog .tw-design__popup-preview-widgets [class*="lg:grid-cols"] {
		grid-template-columns: 1fr !important;
		gap: var(--tw-content-gap, 1.5rem) !important;
	}

	[data-tw-popup-dialog][data-tw-popup-width-mobile="full"],
	.tw-popup-builder-preview__dialog[data-tw-popup-width-mobile="full"],
	.tw-design__popup-preview-dialog[data-tw-popup-width-mobile="full"] {
		--tw-popup-dialog-width: calc(100% - 1rem);
	}

	[data-tw-popup-dialog][data-tw-popup-width-mobile="sm"],
	.tw-popup-builder-preview__dialog[data-tw-popup-width-mobile="sm"],
	.tw-design__popup-preview-dialog[data-tw-popup-width-mobile="sm"] {
		--tw-popup-dialog-width: min(22rem, calc(100% - 1rem));
	}

	[data-tw-popup-dialog][data-tw-popup-width-mobile="md"],
	.tw-popup-builder-preview__dialog[data-tw-popup-width-mobile="md"],
	.tw-design__popup-preview-dialog[data-tw-popup-width-mobile="md"] {
		--tw-popup-dialog-width: min(28rem, calc(100% - 1rem));
	}

	.tw-popup-dialog {
		border-radius: var(--tw-radius-medium, 1rem);
		max-height: 88vh;
	}

	.tw-popup-builder-preview__dialog,
	.tw-design__popup-preview-dialog {
		border-radius: var(--tw-radius-medium, 1rem);
		max-height: 88vh;
	}

	[data-tw-popup-dialog] > .tw-popup-widgets,
	[data-tw-popup-dialog] > [data-tw-popup-widgets],
	.tw-popup-builder-preview__dialog > .tw-popup-widgets,
	.tw-popup-builder-preview__dialog > #tw-page-sections {
		padding: 1.25rem 1.1rem;
		max-height: 88vh;
	}

	[data-tw-popup-dialog] .tw-popup-widgets .rounded-card.bg-brand-primary,
	[data-tw-popup-dialog] .tw-popup-widgets .bg-brand-primary.rounded-card {
		margin: -1.25rem -1.1rem !important;
		padding: 1.25rem 1.1rem !important;
		border-radius: var(--tw-radius-medium, 1rem) !important;
	}

	[data-tw-popup-dialog] .tw-popup-widgets img,
	.tw-popup-builder-preview__dialog .tw-popup-widgets img {
		max-height: 9rem;
	}
}

/* ── Popup-native body (recipe + elements) ─────────────────────────────── */

.tw-popup-body {
	display: block;
	width: 100%;
}

.tw-popup-body__stack {
	display: flex;
	flex-direction: column;
	gap: var(--tw-content-gap, 1.5rem);
}

.tw-popup-body__grid {
	display: grid;
	gap: var(--tw-content-gap, 1.5rem);
	align-items: stretch;
}

@media (min-width: 640px) {
	.tw-popup-body[data-tw-popup-recipe="media_end"] .tw-popup-body__grid,
	.tw-popup-body[data-tw-popup-recipe="media_start"] .tw-popup-body__grid,
	.tw-popup-body[data-tw-popup-recipe="story"] .tw-popup-body__grid,
	.tw-popup-body[data-tw-popup-recipe="story_reverse"] .tw-popup-body__grid {
		grid-template-columns: 1fr 1fr;
	}

	[data-tw-popup-dialog][data-tw-popup-width="lg"] .tw-popup-body[data-tw-popup-recipe="media_end"] .tw-popup-body__grid,
	[data-tw-popup-dialog][data-tw-popup-width="xl"] .tw-popup-body[data-tw-popup-recipe="media_end"] .tw-popup-body__grid,
	[data-tw-popup-dialog][data-tw-popup-width="lg"] .tw-popup-body[data-tw-popup-recipe="media_start"] .tw-popup-body__grid,
	[data-tw-popup-dialog][data-tw-popup-width="xl"] .tw-popup-body[data-tw-popup-recipe="media_start"] .tw-popup-body__grid,
	[data-tw-popup-dialog][data-tw-popup-width="lg"] .tw-popup-body[data-tw-popup-recipe="story"] .tw-popup-body__grid,
	[data-tw-popup-dialog][data-tw-popup-width="xl"] .tw-popup-body[data-tw-popup-recipe="story"] .tw-popup-body__grid,
	[data-tw-popup-dialog][data-tw-popup-width="lg"] .tw-popup-body[data-tw-popup-recipe="story_reverse"] .tw-popup-body__grid,
	[data-tw-popup-dialog][data-tw-popup-width="xl"] .tw-popup-body[data-tw-popup-recipe="story_reverse"] .tw-popup-body__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.tw-popup-body__media-col,
.tw-popup-body__content {
	min-width: 0;
}

/*
 * Mobile stack order for media-split recipes (media_end / media_start / story / story_reverse).
 * data-tw-popup-mobile-media = top|bottom — where the photo sits when the grid collapses.
 * Use grid `order` only (do not flip to flex) so hub Desktop viewport can still force 2-col
 * on a narrow admin chrome without fighting display:flex.
 */
@media (max-width: 639px) {
	.tw-popup-body[data-tw-popup-mobile-media="top"] .tw-popup-body__media-col {
		order: -1;
	}

	.tw-popup-body[data-tw-popup-mobile-media="bottom"] .tw-popup-body__media-col {
		order: 2;
	}

	.tw-popup-body[data-tw-popup-mobile-media="bottom"] .tw-popup-body__content {
		order: 1;
	}
}

/* Hub Desktop viewport — ignore browser width + reset mobile stack order. */
.tw-design__popup-preview-stage[data-preview-viewport="desktop"] .tw-popup-body__media-col,
.tw-design__popup-preview-stage[data-preview-viewport="desktop"] .tw-popup-body__content {
	order: initial !important;
}

.tw-popup-body__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--tw-content-gap, 1.5rem);
}

.tw-popup-body[data-tw-popup-recipe="story"] .tw-popup-body__media-col,
.tw-popup-body[data-tw-popup-recipe="story_reverse"] .tw-popup-body__media-col {
	min-height: 11rem;
}

.tw-popup-body,
.tw-design__popup-preview-dialog,
.tw-popup-builder-preview__dialog {
	font-family: var(--tw-font-body, inherit);
	color: var(--tw-color-text, #0f172a);
}

.tw-popup-el__kicker {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tw-color-muted, #64748b);
}

.tw-popup-el__title {
	margin: 0 0 0.65rem;
	font-family: var(--tw-font-heading, inherit);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--tw-color-text, #0f172a);
	letter-spacing: -0.02em;
}

.tw-popup-el__body {
	margin: 0;
	font-family: var(--tw-font-body, inherit);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--tw-color-muted, #475569);
}

/* Role color swatches (Design token utilities) must beat base ink. */
.tw-popup-el__kicker[class*="text-"],
.tw-popup-el__title[class*="text-"],
.tw-popup-el__body[class*="text-"] {
	color: inherit;
}

.tw-popup-el__kicker.text-theme-text,
.tw-popup-el__title.text-theme-text,
.tw-popup-el__body.text-theme-text { color: var(--tw-color-text, #0f172a); }
.tw-popup-el__kicker.text-theme-muted,
.tw-popup-el__title.text-theme-muted,
.tw-popup-el__body.text-theme-muted { color: var(--tw-color-muted, #64748b); }
.tw-popup-el__kicker.text-brand-primary,
.tw-popup-el__title.text-brand-primary,
.tw-popup-el__body.text-brand-primary { color: var(--tw-color-brand-primary); }
.tw-popup-el__kicker.text-brand-secondary,
.tw-popup-el__title.text-brand-secondary,
.tw-popup-el__body.text-brand-secondary { color: var(--tw-color-brand-secondary); }
.tw-popup-el__kicker.text-brand-accent,
.tw-popup-el__title.text-brand-accent,
.tw-popup-el__body.text-brand-accent { color: var(--tw-color-brand-accent); }
.tw-popup-el__kicker.text-theme-page,
.tw-popup-el__title.text-theme-page,
.tw-popup-el__body.text-theme-page { color: var(--tw-color-page, #f8fafc); }
.tw-popup-el__kicker.text-theme-surface,
.tw-popup-el__title.text-theme-surface,
.tw-popup-el__body.text-theme-surface { color: var(--tw-color-surface, #fff); }
.tw-popup-el__kicker.text-theme-surfaceAlt,
.tw-popup-el__title.text-theme-surfaceAlt,
.tw-popup-el__body.text-theme-surfaceAlt { color: var(--tw-color-surface-alt, #f1f5f9); }
.tw-popup-el__kicker.text-theme-border,
.tw-popup-el__title.text-theme-border,
.tw-popup-el__body.text-theme-border { color: var(--tw-color-border, #e2e8f0); }
.tw-popup-el__kicker.text-theme-onPrimary,
.tw-popup-el__title.text-theme-onPrimary,
.tw-popup-el__body.text-theme-onPrimary { color: var(--tw-color-on-primary, #fff); }
.tw-popup-el__kicker.text-white,
.tw-popup-el__title.text-white,
.tw-popup-el__body.text-white { color: #fff; }
.tw-popup-el__kicker.text-slate-950,
.tw-popup-el__title.text-slate-950,
.tw-popup-el__body.text-slate-950 { color: #020617; }
.tw-popup-el__kicker.text-white\/80,
.tw-popup-el__title.text-white\/80,
.tw-popup-el__body.text-white\/80 { color: rgba(255, 255, 255, 0.8); }

/* Dark / brand dialog fills: inherited copy reads light (role swatches still win). */
[data-tw-popup-dialog][data-tw-popup-bg="brand"] .tw-popup-el__kicker:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="secondary"] .tw-popup-el__kicker:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="accent"] .tw-popup-el__kicker:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="dark"] .tw-popup-el__kicker:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="muted"] .tw-popup-el__kicker:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="brand"] .tw-popup-el__body:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="secondary"] .tw-popup-el__body:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="accent"] .tw-popup-el__body:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="dark"] .tw-popup-el__body:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="muted"] .tw-popup-el__body:not([class*="text-"]) {
	color: color-mix(in srgb, #fff 78%, transparent);
}
[data-tw-popup-dialog][data-tw-popup-bg="brand"] .tw-popup-el__title:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="secondary"] .tw-popup-el__title:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="accent"] .tw-popup-el__title:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="dark"] .tw-popup-el__title:not([class*="text-"]),
[data-tw-popup-dialog][data-tw-popup-bg="muted"] .tw-popup-el__title:not([class*="text-"]) {
	color: #fff;
}

.tw-popup-el--text + .tw-popup-el--text {
	margin-top: 0.25rem;
}

.tw-popup-el--media {
	overflow: hidden;
	border-radius: var(--tw-radius-medium, 1rem);
	background: var(--tw-color-surface-alt, #f1f5f9);
	min-height: 8.5rem;
	height: 100%;
}

.tw-popup-el--media-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 10rem;
	height: 100%;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tw-color-muted, #64748b);
	background:
		radial-gradient(
			circle at 30% 30%,
			color-mix(in srgb, var(--tw-color-brand-primary, #0f766e) 14%, transparent),
			transparent 55%
		),
		linear-gradient(
			160deg,
			color-mix(in srgb, var(--tw-color-brand-secondary, #2563eb) 8%, var(--tw-color-surface-alt, #f1f5f9)),
			var(--tw-color-surface, #fff)
		);
	border: 1px solid color-mix(in srgb, var(--tw-color-border, #cbd5e1) 70%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 40%, transparent);
}

.tw-popup-el--media-empty::before {
	content: "";
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.65rem;
	border: 2px solid color-mix(in srgb, var(--tw-color-brand-primary, #0f766e) 35%, var(--tw-color-border, #cbd5e1));
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--tw-color-brand-primary, #0f766e) 18%, transparent),
			transparent
		);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--tw-color-brand-primary, #0f766e) 6%, transparent);
}

.tw-popup-builder__empty-preview {
	margin: 0;
	font-size: 0.9rem;
	color: var(--tw-color-muted, #64748b);
}

.tw-popup-el__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 16rem;
	object-fit: cover;
}

.tw-popup-el--buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	/* Parent stack/content owns vertical rhythm via --tw-content-gap — no extra margin-top. */
	margin-top: 0;
	padding-top: 0.85rem;
	border-top: 1px solid color-mix(in srgb, var(--tw-color-border, #e2e8f0) 90%, transparent);
}

.tw-popup-el__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.tw-popup-el--form .tw-form-shell,
.tw-popup-el--form .twf-form,
.tw-popup-el--form .twf-form-preview-shell {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.tw-popup-el--form .twf-form__title {
	display: none;
}

.tw-popup-el--form .twf-form__submit {
	background: var(--tw-color-brand-primary, #4f46e5);
	color: var(--tw-color-on-primary, #fff);
	border: none;
	border-radius: var(--tw-radius-button, 9999px);
	font-weight: 600;
	padding: var(--tw-button-padding-y, 0.75rem) var(--tw-button-padding-x, 1.25rem);
	min-height: 2.5rem;
}

/* Unmapped form stand-in — mirrors field/button rhythm, not an admin card. */
.tw-popup-form-placeholder__label {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--tw-color-muted, #64748b);
}

.tw-popup-form-placeholder__fake {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.tw-popup-form-placeholder__field {
	display: block;
	height: 2.75rem;
	border-radius: var(--tw-radius-input, 1rem);
	border: 1px solid var(--tw-color-border, #dbe4ff);
	background: var(--tw-color-surface, #fff);
}

.tw-popup-form-placeholder__btn {
	display: block;
	width: 42%;
	height: 2.75rem;
	border-radius: var(--tw-radius-button, 9999px);
	background: var(--tw-color-brand-primary, #4f46e5);
}

.tw-popup-body[data-tw-popup-recipe="banner"] {
	background: var(--tw-color-brand-primary, #0f766e);
	color: #fff;
	margin: -1.5rem;
	padding: 1.75rem 1.5rem;
	border-radius: inherit;
}

.tw-popup-body[data-tw-popup-recipe="banner"] .tw-popup-el__kicker,
.tw-popup-body[data-tw-popup-recipe="banner"] .tw-popup-el__body {
	color: rgba(255, 255, 255, 0.85);
}

.tw-popup-body[data-tw-popup-recipe="banner"] .tw-popup-el__title {
	color: #fff;
}

.tw-popup-body[data-tw-popup-recipe="compact"] .tw-popup-el__title {
	font-size: 1.15rem;
}

.tw-popup-body[data-tw-popup-recipe="form_focus"] .tw-popup-el--text {
	text-align: center;
}

.tw-popup-body[data-tw-popup-recipe="offer"] .tw-popup-body__stack {
	text-align: center;
	align-items: center;
}

.tw-popup-body[data-tw-popup-recipe="offer"] .tw-popup-el--buttons {
	justify-content: center;
}

@media (max-width: 639px) {
	.tw-popup-body__grid {
		grid-template-columns: 1fr !important;
	}

	.tw-popup-el__img {
		max-height: 9rem;
	}
}