/**
 * Forms — base primitives for every form on the site.
 *
 * Enqueued globally in inc/setup.php so any pattern using
 * .wlre-form__* classes is styled consistently, without each page
 * needing to opt in. Pages can still override specific rules in
 * their own page-level CSS.
 *
 * All sizes/spacings/typography reference design tokens. Raw px
 * values remain only for Figma-pinned specific dimensions (icon
 * sizes, small internal gaps that aren't in the spacing scale).
 *
 * Contains: form-card, form__group/label/input/select/textarea,
 * form__row/field-row, form__checkbox, form__pills, form__pill,
 * form__stepper, form__phone-group, form__toggle, form__radio,
 * form__submit, form__success, form__error, form__help,
 * form__footer-note, form__global-error, form-card--overlap/flush.
 */

/* === Form Container === */
.wlre-form-card {
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-20);
	box-shadow: var(--wlre-shadow-card);
	padding: var(--wlre-space-40);
	max-width: 800px;
	margin: calc(var(--wlre-space-40) * -1) auto 0;
	position: relative;
	z-index: 1;
}
.wlre-form-card__heading {
	color: var(--wlre-color-text-900);
	text-align: center;
	margin: 0 0 var(--wlre-space-32);
}

/* === Form Sections === */
.wlre-form__section-title {
	color: var(--wlre-color-text-900);
	margin: var(--wlre-space-32) 0 var(--wlre-space-16);
}
.wlre-form__section-title:first-child {
	margin-top: 0;
}

/* === Form Fields === */
:root {
	--wlre-field-height: 52px;
	--wlre-field-radius: var(--wlre-radius-sm);
	--wlre-field-border-width: 0.5px;
	--wlre-field-border-color: var(--wlre-color-neutral-600);
	--wlre-field-border-color-focus: var(--wlre-color-accent-500);
	--wlre-field-padding-block: 14px;
	--wlre-field-padding-inline: var(--wlre-space-24);
}

.wlre-form__group {
	margin-bottom: var(--wlre-space-20);
}
.wlre-form__label {
	display: block;
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	font-weight: 600;
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-text-900);
	margin-bottom: 6px;
}
.wlre-form__input,
.wlre-form__select,
.wlre-form__textarea {
	width: 100%;
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-text-900);
	background: var(--wlre-color-white);
	border: var(--wlre-field-border-width) solid var(--wlre-field-border-color);
	border-radius: var(--wlre-field-radius);
	min-height: var(--wlre-field-height);
	padding: var(--wlre-field-padding-block) var(--wlre-field-padding-inline);
	transition: border-color 0.2s ease;
}
.wlre-form__input::placeholder,
.wlre-form__textarea::placeholder {
	/* WCAG-AA-compliant muted text on white. */
	color: var(--wlre-color-text-muted);
	opacity: 1; /* Firefox lowers placeholder opacity by default. */
}
.wlre-form__input:focus,
.wlre-form__select:focus,
.wlre-form__textarea:focus {
	border-color: var(--wlre-field-border-color-focus);
	outline: none;
	box-shadow: none;
}
.wlre-form__input:focus-visible,
.wlre-form__select:focus-visible,
.wlre-form__textarea:focus-visible {
	outline: none;
	box-shadow: none;
}
.wlre-form__input--error,
.wlre-form__select--error,
.wlre-form__textarea--error,
.wlre-form__input[aria-invalid="true"],
.wlre-form__select[aria-invalid="true"],
.wlre-form__textarea[aria-invalid="true"] {
	border-color: var(--wlre-color-error-700);
}
.wlre-form__input--error:focus,
.wlre-form__input[aria-invalid="true"]:focus {
	border-color: var(--wlre-color-error-700);
	outline: none;
	box-shadow: none;
}
.wlre-form__error {
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-s);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-error-700);
	margin-top: var(--wlre-space-4);
}
.wlre-form__error:empty {
	display: none;
}
.wlre-form__textarea {
	resize: vertical;
	min-height: 120px;
}
.wlre-form__select:disabled,
.wlre-form__select.wlre-form__input--disabled {
	background-color: var(--wlre-color-surface-50);
	color: var(--wlre-color-neutral-400);
	cursor: not-allowed;
	border-color: var(--wlre-color-neutral-200);
}
.wlre-form__select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(4.5 9) scale(1 1)' opacity='.2' d='M15 0L7.5 7.5 0 0Z' fill='%23666'/%3E%3Cpath transform='translate(3.75 8.25)' fill-rule='evenodd' d='M16.44.46C16.39.33 16.29.21 16.17.13 16.04.04 15.9 0 15.75 0H.75C.6 0 .46.04.33.13.21.21.11.33.06.46 0 .6-.01.75.01.9.04 1.04.11 1.18.22 1.28L7.72 8.78C7.79 8.85 7.87 8.91 7.96 8.94 8.05 8.98 8.15 9 8.25 9 8.35 9 8.45 8.98 8.54 8.94 8.63 8.91 8.71 8.85 8.78 8.78L16.28 1.28C16.39 1.18 16.46 1.04 16.49.9 16.52.75 16.5.6 16.44.46ZM8.25 7.19L2.56 1.5H13.94L8.25 7.19Z' fill='%230A2438'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 24px 24px;
	/* background-position has no logical equivalent in CSS — rtl.css
	 * overrides this to `left 24px center` when dir=rtl. The padding
	 * uses padding-inline-end so it auto-flips correctly. */
	background-position: right 16px center;
	padding-inline-end: 52px;
}

.wlre-form__sheet-trigger {
	display: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--wlre-field-height);
	padding: var(--wlre-field-padding-block) var(--wlre-field-padding-inline);
	border: var(--wlre-field-border-width) solid var(--wlre-field-border-color);
	border-radius: var(--wlre-field-radius);
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-size: 14px;
	line-height: 1.48;
	text-align: start;
	cursor: pointer;
}

.wlre-form__sheet-trigger--placeholder {
	color: var(--wlre-color-neutral-600);
}

.wlre-form__sheet-trigger--error {
	border-color: var(--wlre-color-error-700);
}

.wlre-mobile-sheet {
	position: fixed;
	inset: 0;
	/* Above bottom-nav (201) and mobile-menu (200) so the panel + its
	 * dark-navy Confirm button aren't covered on profile/edit screens. */
	z-index: 220;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(10, 36, 56, 0.96);
}

.wlre-mobile-sheet[hidden] {
	display: none;
}

.wlre-mobile-sheet-open {
	overflow: hidden;
}

.wlre-mobile-sheet__backdrop {
	position: absolute;
	inset: 0;
}

.wlre-mobile-sheet__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Auto-fit to content; cap at 80vh so a long option list (e.g. countries)
	 * stays scrollable without pushing the Conferma CTA off-screen. */
	max-height: 80dvh;
	min-height: 50dvh;
	overflow: hidden;
	border-radius: 20px 20px 0 0;
	background: var(--wlre-color-white);
}

.wlre-mobile-sheet__handle-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 10px;
	background: var(--wlre-color-white);
}

.wlre-mobile-sheet__handle {
	width: 60px;
	height: 6px;
	border-radius: 20px;
	background: var(--wlre-color-neutral-400);
}

.wlre-mobile-sheet__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 24px;
	min-height: 0;
	padding: 16px;
	background: var(--wlre-color-white);
}

.wlre-mobile-sheet__title {
	width: 100%;
	margin: 0;
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.wlre-mobile-sheet__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	overflow-y: auto;
}

.wlre-mobile-sheet__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 12px 0;
	border: 0;
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	font-family: var(--wlre-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.48;
	text-align: start;
	cursor: pointer;
}

.wlre-mobile-sheet__option.is-selected {
	font-weight: 700;
}

.wlre-mobile-sheet__option-label {
	flex: 1 1 auto;
	min-width: 0;
}

/* Match the desktop language dropdown's selected-row check (see
 * .wlre-dropdown__item-check in dropdowns.css): same size + teal-700 colour
 * so the mobile sheet feels visually consistent with that surface. */
.wlre-mobile-sheet__option-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--wlre-color-teal-700);
	visibility: hidden;
}

.wlre-mobile-sheet__option-check svg {
	width: 100%;
	height: 100%;
}

.wlre-mobile-sheet__option.is-selected .wlre-mobile-sheet__option-check {
	visibility: visible;
}

.wlre-mobile-sheet__footer {
	width: 100%;
	padding: 8px 16px 32px;
	background: var(--wlre-color-white);
	box-shadow: 0 -4px 7px 0 rgba(99, 99, 99, 0.04);
}

/* Bottom-sheet "Confirm" CTA: pure black fill (matches the password
 * dialog's primary button). The teal :focus-visible ring stays for a11y. */
.wlre-mobile-sheet__confirm {
	width: 100%;
	height: 56px;
	max-width: none;
	margin: 0;
	border-radius: var(--wlre-radius-sm);
	font-size: 16px;
	background: #0f0f0f;
	color: var(--wlre-color-white);
	border-color: #0f0f0f;
}
.wlre-mobile-sheet__confirm:hover,
.wlre-mobile-sheet__confirm:focus {
	background: #1a1a1a;
	color: var(--wlre-color-white);
	border-color: #1a1a1a;
}
.wlre-mobile-sheet__confirm:active {
	background: #0f0f0f;
	border-color: #0f0f0f;
}

/* === Row layouts === */
.wlre-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wlre-space-16);
}

/* === Checkbox / consent === */
.wlre-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: var(--wlre-space-16);
}

label.wlre-form__checkbox,
.wlre-confirm-dialog__check,
.wlre-login__inline {
	cursor: pointer;
}

.wlre-form__checkbox input[type="checkbox"],
.wlre-confirm-dialog__check input[type="checkbox"],
.wlre-login__inline input[type="checkbox"] {
	appearance: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	flex-shrink: 0;
	border: 1.5px solid var(--wlre-color-text-900);
	border-radius: 2px;
	background-color: var(--wlre-color-white);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wlre-form__checkbox input[type="checkbox"]:checked,
.wlre-confirm-dialog__check input[type="checkbox"]:checked,
.wlre-login__inline input[type="checkbox"]:checked {
	border-color: var(--wlre-color-brand-900);
	background-color: var(--wlre-color-brand-900);
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 8.1L6.5 11.35L12.9 4.95' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wlre-form__checkbox input[type="checkbox"]:focus-visible,
.wlre-confirm-dialog__check input[type="checkbox"]:focus-visible,
.wlre-login__inline input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
}
.wlre-form__checkbox label {
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-neutral-600);
}
.wlre-form__checkbox span {
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-neutral-600);
}
.wlre-form__checkbox label a,
.wlre-form__checkbox span a {
	color: var(--wlre-color-text-900);
	text-decoration: underline;
}

.wlre-form__required-star {
	color: var(--wlre-color-brand-900, #0a2438);
	font-weight: 700;
	margin-left: 2px;
}

/* === Submit button === */
.wlre-form__submit {
	width: 100%;
	max-width: 338px;
	margin-top: var(--wlre-space-24);
	margin-inline: auto;
	padding: 14px var(--wlre-space-24);
	font-size: var(--wlre-font-size-l);
	display: flex;
}
@media (max-width: 767px) {
	.wlre-form__submit {
		max-width: none;
	}
}

/* === Form states === */
.wlre-form--loading .wlre-form__submit {
	opacity: 0.6;
	pointer-events: none;
}
.wlre-form__success {
	text-align: center;
	padding: var(--wlre-space-40) var(--wlre-space-20);
	display: none;
}
.wlre-form__success--visible {
	display: block;
}
.wlre-form__success-icon {
	width: var(--wlre-space-64);
	height: var(--wlre-space-64);
	border-radius: 50%;
	background: var(--wlre-color-accent-500);
	color: var(--wlre-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--wlre-space-16);
}
.wlre-form__success-icon svg {
	width: var(--wlre-space-32);
	height: var(--wlre-space-32);
}
.wlre-form__success-heading {
	font-family: var(--wlre-font-heading);
	font-size: var(--wlre-font-size-h5);
	font-weight: 600;
	line-height: var(--wlre-line-height-heading);
	margin: 0 0 var(--wlre-space-8);
}
.wlre-form__success-text {
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-l);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-neutral-600);
	margin: 0;
}
.wlre-form__footer-note {
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-s);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-neutral-400);
	text-align: center;
	margin-top: var(--wlre-space-16);
}

/* === Pill / toggle buttons (Fixed / Variable / Mixed) ===
 * Horizontal-scroll row. When the chips fit within the container, behaviour
 * is unchanged (no wrap, no scrollbar). When they overflow, the row scrolls
 * with snap points and the scrollbar is hidden. Used by the Valuation form
 * (Località / Tipologia di immobile / Caratteristiche aggiuntive) and the
 * Mortgage Type toggle.
 */
.wlre-form__pills {
	display: flex;
	gap: var(--wlre-space-8);
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--wlre-space-16);
}
.wlre-form__pills::-webkit-scrollbar {
	display: none;
}
.wlre-form__pill {
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	font-weight: 400;
	line-height: var(--wlre-line-height-body);
	padding: var(--wlre-space-8) var(--wlre-space-16);
	border: 1px solid var(--wlre-color-neutral-200);
	border-radius: 100px;
	background: var(--wlre-color-white);
	color: var(--wlre-color-text-900);
	cursor: pointer;
	flex: 0 0 auto;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wlre-form__pill:hover {
	border-color: var(--wlre-color-text-900);
}
.wlre-form__pill--active,
.wlre-form__pill[aria-pressed="true"] {
	background: var(--wlre-color-text-900);
	color: var(--wlre-color-white);
	border-color: var(--wlre-color-text-900);
	font-weight: 700;
}

/* === Number stepper === */
.wlre-form__stepper {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--wlre-color-neutral-200);
	border-radius: var(--wlre-radius-sm);
	overflow: hidden;
}
.wlre-form__stepper-btn {
	width: var(--wlre-tap-target);
	height: var(--wlre-tap-target);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wlre-color-white);
	border: none;
	cursor: pointer;
	color: var(--wlre-color-text-900);
	font-size: var(--wlre-font-size-h6);
}
.wlre-form__stepper-btn:hover {
	background: var(--wlre-color-surface-50);
}
.wlre-form__stepper-value {
	flex: 1;
	text-align: center;
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-l);
	font-weight: 700;
	color: var(--wlre-color-text-900);
	border: none;
	background: none;
	padding: 0;
	min-width: 60px;
}

/* === Phone input with country-code picker ===
 * Group: [.wlre-form__phone-group]
 *   ├ .wlre-phone-prefix  (button + hidden input + dropdown menu)
 *   └ .wlre-form__input   (user's phone number)
 *
 * The prefix is a proper dropdown (patterns/phone-prefix.php) with flag
 * emoji, country name, and dial code. Legacy `.wlre-form__phone-prefix`
 * style is kept for forms that still emit a static prefix, but the
 * canonical path is the picker. */
.wlre-form__phone-group {
	display: flex;
	min-height: var(--wlre-field-height);
	border: var(--wlre-field-border-width) solid var(--wlre-field-border-color);
	border-radius: var(--wlre-field-radius);
	overflow: visible; /* let the country dropdown menu escape the group */
	position: relative;
	background: var(--wlre-color-white);
	transition: border-color 0.2s ease;
}
.wlre-form__phone-group:focus-within {
	border-color: var(--wlre-field-border-color-focus);
}
/* Tag selector raises specificity (0,0,2,1) so service-page overrides
 * targeting `.wlre-form-card--contact .wlre-form__input` (0,0,2,0) cannot
 * accidentally re-introduce the element border and split the field into
 * two pills. Industry-standard phone fields keep one continuous outline
 * with the country picker as an internal segment. */
.wlre-form__phone-group input.wlre-form__input {
	border: none;
	border-radius: 0;
	border-start-end-radius: var(--wlre-field-radius);
	border-end-end-radius: var(--wlre-field-radius);
	min-height: var(--wlre-field-height);
	background: transparent;
	box-shadow: none;
}
.wlre-form__phone-group input.wlre-form__input:focus,
.wlre-form__phone-group input.wlre-form__input:focus-visible {
	box-shadow: none;
	outline: none;
}

/* Trigger button — flag + dial code + chevron. The dial-code text MUST stay
 * at body-text colour so the prefix reads as part of the entered value, not
 * as faded helper copy (Stripe / Twilio / react-phone-input-2 convention). */
.wlre-phone-prefix {
	position: relative;
	background: var(--wlre-color-white);
	border-inline-end: 1px solid var(--wlre-color-neutral-200);
	border-start-start-radius: var(--wlre-field-radius);
	border-end-start-radius: var(--wlre-field-radius);
}
.wlre-phone-prefix__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
	padding: var(--wlre-field-padding-block) var(--wlre-space-12) var(--wlre-field-padding-block) var(--wlre-space-16);
	height: 100%;
	min-height: var(--wlre-field-height);
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-text-900);
	white-space: nowrap;
}
.wlre-phone-prefix__trigger:hover {
	background: var(--wlre-color-surface-50);
}
.wlre-phone-prefix__flag {
	/* Selected-country flag is hidden in the trigger to keep the prefix
	 * compact (matches Figma — only `+39 ▾`). Flags still appear in the
	 * dropdown options, where country recognition matters. */
	display: none;
}
.wlre-phone-prefix__dial {
	/* Set colour explicitly here (rather than relying on the trigger inheriting
	 * from the form context) because `.wlre-dropdown__trigger { color: inherit }`
	 * loads after this file and would otherwise pull text-on-dark surfaces
	 * (footer / dark hero) through to the prefix label, washing it out. */
	font-weight: 400;
	color: var(--wlre-color-text-900);
}
.wlre-phone-prefix__chevron {
	color: var(--wlre-color-neutral-600);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.wlre-phone-prefix[data-open="true"] .wlre-phone-prefix__chevron {
	transform: rotate(180deg);
}

/* Open-state dropdown menu (inherits .wlre-dropdown__menu base positioning) */
.wlre-phone-prefix__menu {
	min-width: 280px;
	max-width: 340px;
	max-height: 320px;
	overflow-y: auto;
	inset-inline-start: 0;
}
.wlre-phone-prefix__list {
	list-style: none;
	margin: 0;
	padding: var(--wlre-space-4) 0;
}
.wlre-phone-prefix__option {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-12);
	width: 100%;
	padding: 10px var(--wlre-space-16);
	background: none;
	border: 0;
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-text-900);
	text-align: start;
	cursor: pointer;
}
.wlre-phone-prefix__option:hover,
.wlre-phone-prefix__option:focus-visible {
	background: var(--wlre-color-surface-50);
}
.wlre-phone-prefix__option.is-active {
	background: var(--wlre-color-surface-50);
	font-weight: 700;
}
.wlre-phone-prefix__option-flag {
	font-size: var(--wlre-font-size-xl);
	line-height: var(--wlre-line-height-tight);
	min-width: 22px;
}
.wlre-phone-prefix__option-name {
	flex: 1;
}
.wlre-phone-prefix__option-dial {
	color: var(--wlre-color-neutral-600);
	font-variant-numeric: tabular-nums;
}

/* === Help text below a field === */
.wlre-form__help {
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-s);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-neutral-600);
	margin-top: var(--wlre-space-4);
}

/* === Two-column field row (stacks on mobile). Used by profile + register. === */
.wlre-form__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wlre-space-20);
}
@media (max-width: 767px) {
	.wlre-form__label {
		font-size: 13px;
	}

	.wlre-form__field-row {
		grid-template-columns: 1fr;
	}

	.wlre-form__select[data-wlre-mobile-sheet] {
		display: none;
	}

	.wlre-form__sheet-trigger {
		display: flex;
	}

	/* Wizard pill chips (Sell / Value / Mortgage Transfer flows) — thumb
	 * selection needs a firm tap target, not the desktop 39px. */
	.wlre-form__pill {
		min-height: var(--wlre-tap-target);
		padding: 10px var(--wlre-space-16);
	}
}

/* === Toggle switch (iOS-style). Paired with a hidden checkbox. === */
.wlre-form__toggle {
	position: relative;
	display: inline-flex;
	width: 42px;
	height: var(--wlre-space-24);
	flex-shrink: 0;
	cursor: pointer;
}
.wlre-form__toggle input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.wlre-form__toggle-track {
	width: 100%;
	height: 100%;
	background: var(--wlre-color-neutral-200);
	border-radius: 100px;
	transition: background 0.2s ease;
}
.wlre-form__toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: var(--wlre-space-20);
	height: var(--wlre-space-20);
	background: var(--wlre-color-white);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease;
}
.wlre-form__toggle input:checked + .wlre-form__toggle-track {
	background: var(--wlre-color-brand-900);
}
.wlre-form__toggle input:checked ~ .wlre-form__toggle-thumb {
	transform: translateX(18px);
}
.wlre-form__toggle input:focus-visible + .wlre-form__toggle-track {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
}

/* === Radio group (labelled option tiles) === */
.wlre-form__radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wlre-space-8);
}
.wlre-form__radio {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
	padding: 10px var(--wlre-space-16);
	border: 1px solid var(--wlre-color-neutral-200);
	border-radius: var(--wlre-radius-sm);
	background: var(--wlre-color-white);
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	color: var(--wlre-color-text-900);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.wlre-form__radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.wlre-form__radio:has(input:checked) {
	border-color: var(--wlre-color-brand-900);
	background: var(--wlre-color-surface-50);
}
.wlre-form__radio:hover {
	border-color: var(--wlre-color-text-900);
}

/* === Global form error === */
.wlre-form__global-error {
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-error);
	text-align: center;
	margin-bottom: var(--wlre-space-16);
}

.wlre-form__toast {
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--wlre-space-32);
	padding: 12px 16px 12px 24px;
	border: 1px solid var(--wlre-color-success-700);
	border-inline-start-width: 4px;
	border-radius: var(--wlre-radius-md);
	background: var(--wlre-color-green-50);
	color: var(--wlre-color-success-700);
	font-family: var(--wlre-font-body);
	line-height: var(--wlre-line-height-body);
	align-items: flex-start;
	gap: var(--wlre-space-8);
}

.wlre-form__toast[hidden] {
	display: none;
}

.wlre-form__toast--visible {
	display: flex;
}

.wlre-form__toast-icon {
	width: var(--wlre-space-24);
	height: var(--wlre-space-24);
	flex: 0 0 auto;
	display: inline-flex;
	color: currentColor;
}

.wlre-form__toast-icon svg {
	width: 100%;
	height: 100%;
}

.wlre-form__toast-body {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
	color: currentColor;
}

.wlre-form__toast-body strong,
.wlre-form__toast-body span {
	color: currentColor;
}

.wlre-form__toast-body strong {
	font-size: var(--wlre-font-size-l);
	font-weight: 700;
}

.wlre-form__toast-body span {
	font-size: var(--wlre-font-size-m);
	font-weight: 400;
}

/* === Form card overlap modifier (pulls card up over hero) === */
.wlre-form-card--overlap {
	margin-top: calc(var(--wlre-space-40) * -1);
}

.wlre-form-card--flush {
	max-width: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* === Responsive === */
@media (max-width: 767px) {
	.wlre-form-card {
		padding: var(--wlre-space-24) var(--wlre-space-16);
		margin: calc(var(--wlre-space-24) * -1) var(--wlre-space-16) 0;
	}
	.wlre-form__row {
		grid-template-columns: 1fr;
	}
}

/* === Password input visibility toggle (point 078) ===
 * Wraps a <input type="password"> next to a button that flips type to "text"
 * and swaps between visibility / visibility-off icons.
 */
.wlre-form__password {
	position: relative;
	display: block;
}
.wlre-form__password .wlre-form__input {
	width: 100%;
	padding-inline-end: 44px;
}
.wlre-form__password-toggle {
	position: absolute;
	inset-inline-end: var(--wlre-space-8);
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: var(--wlre-color-neutral-600);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wlre-form__password-toggle:hover,
.wlre-form__password-toggle:focus-visible {
	background: var(--wlre-color-surface-50);
	color: var(--wlre-color-text-900);
}
.wlre-form__password-toggle:focus-visible {
	outline: 2px solid var(--wlre-color-accent-500);
	outline-offset: 2px;
}
.wlre-form__password-toggle svg {
	width: 24px;
	height: 24px;
}

/* === Mobile: prevent browser auto-zoom on input focus ===
 * iOS Safari and Android Chrome zoom the viewport when an input's
 * font-size < 16px. Override all form controls to 16px on mobile
 * so the page stays locked at the user's current zoom level. */
@media (max-width: 767px) {
	.wlre-form__input,
	.wlre-form__select,
	.wlre-form__textarea,
	.wlre-form__phone-group input.wlre-form__input,
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		font-size: 16px;
	}
}