/**
 * Vivario werfkast form — native replacement for the Lovable iframe.
 *
 * Design tokens and metrics are taken verbatim from the original Tailwind/shadcn
 * build so the rendering matches the iframe it replaces.
 *
 * SPECIFICITY: the old form lived in an iframe with its own document, so nothing
 * could bleed in. Rendered inline, it competes with the theme — Elementor's kit
 * emits rules like `.elementor-kit-6 h2` (0,1,1). Every component rule is
 * therefore scoped as `.vwf .vwf-x` (0,2,0) so it beats both the theme and the
 * local reset below. Do not "simplify" these back to single-class selectors.
 *
 * Breakpoints use container queries on purpose. In the old embed, Tailwind's
 * `sm:`/`md:` resolved against the iframe's own viewport, not the browser's.
 * Container queries reproduce that exactly and additionally let the form adapt
 * to whatever column it is dropped into.
 *
 * Deliberately absent: any overflow/height rule that could create a second
 * scrollbar. The form is always height:auto and the page owns the scroll.
 */

/*
 * Tokens live on their own selector so the toaster can share them.
 * The toaster is rendered OUTSIDE .vwf on purpose: .vwf is a container
 * (container-type below), and a container is the containing block for any
 * position:fixed descendant — a toast inside it would pin to the 650px form
 * box and scroll away with it instead of staying put in the viewport.
 */
.vwf,
.vwf-toaster {
	/* Theme tokens (light) — copied from the original :root. */
	--vwf-background: #fff;
	--vwf-foreground: #020618;
	--vwf-card: #fff;
	--vwf-card-foreground: #020618;
	--vwf-popover: #fff;
	--vwf-primary: #00579a;
	--vwf-primary-foreground: #fcfcfc;
	--vwf-secondary: #f1f5f9;
	--vwf-muted: #f1f5f9;
	--vwf-muted-foreground: #62748e;
	--vwf-accent: #f1f5f9;
	--vwf-accent-foreground: #0f172b;
	--vwf-destructive: #e40014;
	--vwf-border: #e2e8f0;
	--vwf-input: #e2e8f0;
	--vwf-ring: #90a1b9;
	--vwf-radius: 0.625rem;

	/* Derived alpha variants (Tailwind's /nn opacity modifiers). */
	--vwf-border-60: rgba(226, 232, 240, 0.6);
	--vwf-primary-5: rgba(0, 87, 154, 0.05);
	--vwf-primary-10: rgba(0, 87, 154, 0.1);
	--vwf-primary-20: rgba(0, 87, 154, 0.2);
	--vwf-primary-90: rgba(0, 87, 154, 0.9);
	--vwf-muted-30: rgba(241, 245, 249, 0.3);
	--vwf-muted-50: rgba(241, 245, 249, 0.5);
	--vwf-mutedfg-40: rgba(98, 116, 142, 0.4);
	--vwf-mutedfg-70: rgba(98, 116, 142, 0.7);

	/* Radius scale (shadcn derives these from --vwf-radius). */
	--vwf-radius-sm: calc(var(--vwf-radius) - 4px);
	--vwf-radius-md: calc(var(--vwf-radius) - 2px);
	--vwf-radius-lg: var(--vwf-radius);

	/* Shadows. */
	--vwf-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	--vwf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--vwf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

	/* Cleared at runtime to the height of any fixed header. */
	--vwf-scroll-offset: 24px;
}

.vwf {
	/*
	 * The container the sm:/md: rules below resolve against.
	 * Note: .vwf is capped at 650px, so this container never exceeds 650px —
	 * do not move container-type onto a padded descendant, that would shrink
	 * the query box below the 640px breakpoint and silently collapse the
	 * two-column grids everywhere.
	 */
	container-type: inline-size;
	container-name: vwf;

	width: 100%;
	max-width: 650px;
	margin-inline: auto;
	color: var(--vwf-foreground);
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- reset ---- */
/* Neutralises theme/Elementor bleed for the elements used here. Kept at
   (0,1,1) so the (0,2,0) component rules below always win. */

.vwf *,
.vwf *::before,
.vwf *::after {
	box-sizing: border-box;
}

.vwf [hidden] {
	display: none !important;
}

.vwf p,
.vwf h2,
.vwf ul,
.vwf li,
.vwf dl,
.vwf dt,
.vwf dd,
.vwf fieldset,
.vwf legend,
.vwf figure {
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
}

.vwf ul {
	list-style: none;
}

.vwf fieldset {
	border: 0;
	min-width: 0;
}

.vwf img,
.vwf svg {
	display: block;
	max-width: 100%;
}

.vwf svg {
	flex-shrink: 0;
	pointer-events: none;
}

.vwf button,
.vwf input,
.vwf textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
	letter-spacing: normal;
	text-transform: none;
}

.vwf button {
	background: none;
	border: 0;
	padding: 0;
	text-align: inherit;
	border-radius: 0;
	box-shadow: none;
	width: auto;
	min-height: 0;
	transition: none;
}

.vwf a,
.vwf a:hover,
.vwf a:focus {
	text-decoration: none;
	box-shadow: none;
}

.vwf .vwf-viewport {
	/* Mirrors the original's `px-4 py-6` inner wrapper. */
	padding: 24px 16px;
}

.vwf .vwf-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot — hidden from people, reachable for bots. */
.vwf .vwf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- card ---- */

.vwf .vwf-card {
	border: 1px solid var(--vwf-border-60);
	background-color: var(--vwf-card);
	color: var(--vwf-card-foreground);
	box-shadow: var(--vwf-shadow);
	border-radius: 30px;
	/* height stays auto — the page scrolls, never the card. */
	scroll-margin-top: var(--vwf-scroll-offset);
}

.vwf .vwf-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* -------------------------------------------------------------- header ---- */

.vwf .vwf-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.vwf .vwf-header__progress {
	flex: 1 1 0%;
	min-width: 0;
}

.vwf .vwf-progress-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--vwf-muted-foreground);
	margin-bottom: 8px;
}

.vwf .vwf-progress-meta__step {
	font-weight: 500;
	color: var(--vwf-foreground);
}

.vwf .vwf-progress {
	position: relative;
	width: 100%;
	height: 8px;
	border-radius: 9999px;
	background-color: var(--vwf-primary-20);
	/* Clips the indicator to the pill shape. An 8px bar can never scroll. */
	overflow: hidden;
}

.vwf .vwf-progress__indicator {
	height: 100%;
	width: 100%;
	background-color: var(--vwf-primary);
	transform: translateX(calc((var(--vwf-progress, 12.5) - 100) * 1%));
	transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------- lang ---- */

.vwf .vwf-lang {
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--vwf-border);
	background-color: var(--vwf-muted-30);
	border-radius: 9999px;
	padding: 4px;
	flex-shrink: 0;
}

.vwf .vwf-lang__icon {
	width: 16px;
	height: 16px;
	margin-left: 6px;
	color: var(--vwf-muted-foreground);
}

.vwf .vwf-lang__btn {
	border-radius: 9999px;
	padding: 4px 10px;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: var(--vwf-muted-foreground);
	background-color: transparent;
	cursor: pointer;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vwf .vwf-lang__btn:hover {
	color: var(--vwf-foreground);
	background-color: transparent;
}

.vwf .vwf-lang__btn.is-active,
.vwf .vwf-lang__btn.is-active:hover {
	background-color: var(--vwf-primary);
	color: var(--vwf-primary-foreground);
}

.vwf .vwf-lang__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--vwf-ring);
}

/* --------------------------------------------------------------- steps ---- */

.vwf .vwf-step {
	display: flex;
	flex-direction: column;
	gap: 24px;
	scroll-margin-top: var(--vwf-scroll-offset);
	border: 0;
	padding: 0;
	margin: 0;
}

/* Step visibility is driven by the [hidden] attribute (server-rendered for
   steps 2-8, then maintained by the script), so no extra rule is needed here. */

.vwf .vwf-step__title {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--vwf-foreground);
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	text-transform: none;
	font-family: inherit;
}

.vwf .vwf-step__sub {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--vwf-muted-foreground);
	margin-top: 4px;
}

.vwf .vwf-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vwf .vwf-label {
	display: block;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--vwf-foreground);
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}

.vwf .vwf-required {
	color: var(--vwf-destructive);
}

.vwf .vwf-helper {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--vwf-muted-foreground);
	margin-top: 8px;
}

/* --------------------------------------------------------------- notes ---- */

.vwf .vwf-note {
	display: flex;
	gap: 8px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--vwf-muted-foreground);
}

.vwf .vwf-note__icon {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	flex-shrink: 0;
	color: var(--vwf-primary);
}

.vwf .vwf-note--mt {
	margin-top: 12px;
}

.vwf .vwf-note--mb {
	margin-bottom: 8px;
}

.vwf .vwf-note--boxed {
	border: 1px solid var(--vwf-border);
	background-color: var(--vwf-muted-30);
	border-radius: var(--vwf-radius-md);
	padding: 16px;
}

/* --------------------------------------------------------- radio rows ---- */

.vwf .vwf-radio-grid {
	display: grid;
	gap: 8px;
}

.vwf .vwf-radio-row {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--vwf-border);
	border-radius: var(--vwf-radius-md);
	padding: 10px 12px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 400;
	color: var(--vwf-foreground);
	cursor: pointer;
	margin: 0;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vwf .vwf-radio-row:hover {
	background-color: var(--vwf-muted-50);
}

.vwf .vwf-radio-row:has(.vwf-radio:checked) {
	border-color: var(--vwf-primary);
	background-color: var(--vwf-primary-5);
}

.vwf .vwf-radio-row:has(.vwf-radio:focus-visible) {
	box-shadow: 0 0 0 1px var(--vwf-ring);
}

.vwf .vwf-radio {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	min-width: 16px;
	flex-shrink: 0;
	border: 1px solid var(--vwf-primary);
	border-radius: 9999px;
	box-shadow: var(--vwf-shadow);
	background-color: transparent;
	background-image: none;
	cursor: pointer;
	display: grid;
	place-content: center;
	padding: 0;
	margin: 0;
}

.vwf .vwf-radio::before {
	content: "";
	width: 12.8px;
	height: 12.8px;
	border-radius: 9999px;
	background-color: var(--vwf-primary);
	transform: scale(0);
}

.vwf .vwf-radio:checked::before {
	transform: scale(1);
}

.vwf .vwf-radio:focus-visible {
	outline: none;
}

.vwf .vwf-radio-row__text {
	min-width: 0;
}

/* --------------------------------------------------------- option cards --- */

.vwf .vwf-cards {
	display: grid;
	gap: 8px;
	align-items: stretch;
}

.vwf .vwf-card-opt {
	position: relative;
	height: 100%;
}

.vwf .vwf-card-opt__label {
	display: flex;
	height: 100%;
	width: 100%;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--vwf-border);
	border-radius: var(--vwf-radius-md);
	padding: 10px 12px;
	text-align: left;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 400;
	color: var(--vwf-foreground);
	cursor: pointer;
	margin: 0;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vwf .vwf-card-opt__label:hover {
	background-color: var(--vwf-muted-50);
}

.vwf .vwf-card-opt:has(.vwf-card-opt__input:checked) .vwf-card-opt__label {
	border-color: var(--vwf-primary);
	background-color: var(--vwf-primary-5);
}

.vwf .vwf-card-opt:has(.vwf-card-opt__input:focus-visible) .vwf-card-opt__label {
	box-shadow: 0 0 0 1px var(--vwf-ring);
}

.vwf .vwf-card-opt__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.vwf .vwf-card-opt__name {
	flex: 1 1 0%;
	min-width: 0;
}

/* Leave room for the info button so long labels never sit underneath it. */
.vwf .vwf-card-opt.has-info .vwf-card-opt__name {
	padding-right: 22px;
}

.vwf .vwf-tick {
	display: grid;
	place-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 1px solid var(--vwf-mutedfg-40);
	border-radius: 9999px;
	color: var(--vwf-primary-foreground);
}

.vwf .vwf-tick--square {
	border-radius: var(--vwf-radius-sm);
}

.vwf .vwf-tick__icon {
	width: 14px;
	height: 14px;
	opacity: 0;
}

.vwf .vwf-card-opt:has(.vwf-card-opt__input:checked) .vwf-tick {
	border-color: var(--vwf-primary);
	background-color: var(--vwf-primary);
}

.vwf .vwf-card-opt:has(.vwf-card-opt__input:checked) .vwf-tick__icon {
	opacity: 1;
}

.vwf .vwf-photo-btn {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	display: grid;
	place-content: center;
	width: 16px;
	height: 16px;
	color: var(--vwf-mutedfg-70);
	cursor: pointer;
	z-index: 1;
}

.vwf .vwf-photo-btn__icon {
	width: 16px;
	height: 16px;
}

.vwf .vwf-photo-btn:hover {
	color: var(--vwf-foreground);
}

.vwf .vwf-photo-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--vwf-ring);
	border-radius: var(--vwf-radius-sm);
}

.vwf .vwf-popover {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 4px;
	width: 100%;
	max-width: 320px;
	border: 1px solid var(--vwf-border);
	background-color: var(--vwf-popover);
	box-shadow: var(--vwf-shadow-lg);
	border-radius: var(--vwf-radius-md);
	padding: 8px;
	/*
	 * The popover is purely informational and overlays whatever sits below the
	 * option (including the Next button). Without this it swallows those clicks
	 * while the cursor rests on an option. Never make it interactive.
	 */
	pointer-events: none;
}

.vwf .vwf-popover__img {
	width: 100%;
	height: 112px;
	object-fit: cover;
	border-radius: var(--vwf-radius-sm);
}

/* Only a popover that actually shows a photo needs the gap under it. */
.vwf .vwf-popover__img + .vwf-popover__meta {
	margin-top: 8px;
}

.vwf .vwf-popover__name {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.vwf .vwf-popover__desc {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--vwf-muted-foreground);
	margin-top: 2px;
}

/* Pointer devices reveal the popover on hover, matching the original. */
@media (hover: hover) {
	.vwf .vwf-card-opt.has-info:hover .vwf-popover {
		display: block !important;
	}
}

/* -------------------------------------------------------------- inputs ---- */

.vwf .vwf-input {
	display: flex;
	height: 36px;
	width: 100%;
	border: 1px solid var(--vwf-input);
	border-radius: var(--vwf-radius-md);
	background-color: transparent;
	color: var(--vwf-foreground);
	padding: 4px 12px;
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: var(--vwf-shadow-sm);
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vwf .vwf-input--mt {
	margin-top: 12px;
}

.vwf .vwf-textarea {
	display: flex;
	min-height: 60px;
	width: 100%;
	border: 1px solid var(--vwf-input);
	border-radius: var(--vwf-radius-md);
	background-color: transparent;
	color: var(--vwf-foreground);
	padding: 8px 12px;
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: var(--vwf-shadow-sm);
	/* Grows with content instead of scrolling internally. */
	resize: vertical;
}

.vwf .vwf-input::placeholder,
.vwf .vwf-textarea::placeholder {
	color: var(--vwf-muted-foreground);
	opacity: 1;
}

.vwf .vwf-input:focus,
.vwf .vwf-textarea:focus {
	outline: none;
}

.vwf .vwf-input:focus-visible,
.vwf .vwf-textarea:focus-visible {
	outline: none;
	border-color: var(--vwf-input);
	box-shadow: 0 0 0 1px var(--vwf-ring);
}

.vwf .vwf-grid-2 {
	display: grid;
	gap: 12px;
}

/* -------------------------------------------------------------- upload ---- */

.vwf .vwf-upload {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vwf .vwf-upload__btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px dashed var(--vwf-border);
	border-radius: var(--vwf-radius-md);
	padding: 24px 16px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 400;
	color: var(--vwf-muted-foreground);
	background-color: transparent;
	cursor: pointer;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vwf .vwf-upload__btn:hover {
	background-color: var(--vwf-muted-50);
}

.vwf .vwf-upload__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--vwf-ring);
}

.vwf .vwf-upload__icon {
	width: 16px;
	height: 16px;
}

/* Kept reachable for no-JS use; the styled button drives it when JS is on. */
.vwf-js .vwf-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.vwf .vwf-upload__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vwf .vwf-upload__list:empty {
	display: none;
}

.vwf .vwf-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid var(--vwf-border);
	background-color: var(--vwf-muted-30);
	border-radius: var(--vwf-radius-md);
	padding: 8px 12px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	margin: 0;
}

.vwf .vwf-file__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.vwf .vwf-file__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--vwf-muted-foreground);
}

.vwf .vwf-file__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vwf .vwf-file__size {
	flex-shrink: 0;
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--vwf-muted-foreground);
}

.vwf .vwf-file__remove {
	flex-shrink: 0;
	color: var(--vwf-muted-foreground);
	cursor: pointer;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
	display: grid;
	place-content: center;
}

.vwf .vwf-file__remove:hover {
	color: var(--vwf-destructive);
}

.vwf .vwf-file__remove:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--vwf-ring);
	border-radius: var(--vwf-radius-sm);
}

.vwf .vwf-file__remove svg {
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------- summary ---- */

.vwf .vwf-summary {
	border: 1px solid var(--vwf-border);
	background-color: var(--vwf-muted-30);
	border-radius: var(--vwf-radius-md);
	padding: 16px;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.vwf .vwf-summary__list {
	display: grid;
	gap: 10px 16px;
	margin: 0;
}

.vwf .vwf-summary__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vwf .vwf-summary__dt {
	font-size: 0.75rem;
	line-height: 1rem;
	color: var(--vwf-muted-foreground);
}

.vwf .vwf-summary__dd {
	color: var(--vwf-foreground);
	overflow-wrap: break-word;
	margin: 0;
}

/* ----------------------------------------------------------------- nav ---- */

.vwf .vwf-nav {
	display: flex;
	flex-direction: column-reverse;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--vwf-border);
	margin-top: 24px;
}

/* ------------------------------------------------------------- buttons ---- */

.vwf .vwf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	border-radius: var(--vwf-radius-md);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	cursor: pointer;
	height: 36px;
	min-height: 36px;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vwf .vwf-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--vwf-ring);
}

.vwf .vwf-btn:disabled {
	pointer-events: none;
	opacity: 0.5;
	cursor: not-allowed;
}

.vwf .vwf-btn__icon {
	width: 16px;
	height: 16px;
}

.vwf .vwf-btn--primary,
.vwf a.vwf-btn--primary {
	background-color: var(--vwf-primary);
	color: var(--vwf-primary-foreground);
	box-shadow: var(--vwf-shadow);
	border: 0;
}

.vwf .vwf-btn--primary:hover,
.vwf a.vwf-btn--primary:hover {
	background-color: var(--vwf-primary-90);
	color: var(--vwf-primary-foreground);
}

.vwf .vwf-btn--outline,
.vwf a.vwf-btn--outline {
	border: 1px solid var(--vwf-input);
	background-color: var(--vwf-background);
	box-shadow: var(--vwf-shadow-sm);
	color: var(--vwf-foreground);
}

.vwf .vwf-btn--outline:hover,
.vwf a.vwf-btn--outline:hover {
	background-color: var(--vwf-accent);
	color: var(--vwf-accent-foreground);
}

.vwf .vwf-btn--sm {
	height: 32px;
	min-height: 32px;
	padding: 0 12px;
	font-size: 0.75rem;
	line-height: 1rem;
}

.vwf .vwf-btn--lg {
	height: 40px;
	min-height: 40px;
	padding: 8px 32px;
}

.vwf .vwf-btn.is-busy .vwf-btn__label {
	opacity: 0.6;
}

.vwf .vwf-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 9999px;
	animation: vwf-spin 0.7s linear infinite;
}

.vwf .vwf-btn.is-busy .vwf-spinner {
	display: block;
}

@keyframes vwf-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ------------------------------------------------------------- contact ---- */

.vwf .vwf-contact {
	border-top: 1px solid var(--vwf-border);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vwf .vwf-contact__help {
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--vwf-muted-foreground);
}

.vwf .vwf-contact__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

/* -------------------------------------------------------------- thanks ---- */

.vwf .vwf-thanks__body {
	padding: 32px;
	text-align: center;
	gap: 16px;
}

.vwf .vwf-thanks__lang {
	display: flex;
	justify-content: flex-end;
}

.vwf .vwf-thanks__icon {
	margin-inline: auto;
	width: 56px;
	height: 56px;
	border-radius: 9999px;
	background-color: var(--vwf-primary-10);
	display: grid;
	place-content: center;
}

.vwf .vwf-thanks__check {
	width: 32px;
	height: 32px;
	color: var(--vwf-primary);
}

.vwf .vwf-thanks__title {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	margin: 0;
	color: var(--vwf-foreground);
	font-family: inherit;
}

.vwf .vwf-thanks__body-text {
	color: var(--vwf-muted-foreground);
	max-width: 448px;
	margin-inline: auto;
}

.vwf .vwf-thanks:focus {
	outline: none;
}

/* --------------------------------------------------------------- alert ---- */

/*
 * Server-rendered validation error, shown only when scripting is off (with JS
 * the same message arrives as a toast). Mirrors .vwf-toast--error so both
 * failure paths look like the same product.
 */
.vwf .vwf-alert {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--vwf-destructive);
	border-radius: var(--vwf-radius-md);
	font-size: 0.875rem;
	line-height: 1.4;
}

.vwf .vwf-alert--error {
	background-color: rgba(228, 0, 20, 0.06);
	color: var(--vwf-destructive);
}

/* ------------------------------------------------------------- toaster ---- */

.vwf-toaster {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: min(360px, calc(100vw - 32px));
	pointer-events: none;
}

.vwf-toast {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	border: 1px solid var(--vwf-border);
	background-color: var(--vwf-popover);
	color: var(--vwf-foreground);
	box-shadow: var(--vwf-shadow-lg);
	border-radius: var(--vwf-radius-md);
	padding: 12px 16px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	pointer-events: auto;
	animation: vwf-toast-in 200ms cubic-bezier(0.16, 1, 0.32, 1);
}

.vwf-toast--error {
	border-color: var(--vwf-destructive);
	color: var(--vwf-destructive);
}

.vwf-toast.is-leaving {
	animation: vwf-toast-out 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes vwf-toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes vwf-toast-out {
	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* ---------------------------------------------------- container queries ---- */
/*
 * These reproduce Tailwind's sm:/md: as they behaved inside the iframe, whose
 * viewport was the embed's own width rather than the browser's.
 */

@container vwf (min-width: 640px) {
	.vwf .vwf-radio-grid--2,
	.vwf .vwf-cards,
	.vwf .vwf-grid-2,
	.vwf .vwf-summary__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vwf .vwf-nav {
		flex-direction: row;
		justify-content: space-between;
	}
}

@container vwf (min-width: 768px) {
	.vwf .vwf-card__body {
		padding: 32px;
	}

	.vwf .vwf-step__title {
		font-size: 1.5rem;
		line-height: 2rem;
	}

	.vwf .vwf-input,
	.vwf .vwf-textarea {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
}

/* -------------------------------------------------- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.vwf *,
	.vwf *::before,
	.vwf *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}