/* Isolation subsidy form; builds on crm-lead-form.css (fields, sections, step pills, choice cards). */

/* Buttons and blocks toggled by JS use [hidden]; lead-form button styles set display. */
.ww-isolation-subsidy-form [hidden] {
	display: none !important;
}

/* Routes the chosen city doesn't offer are disabled by the JS; Select2 would still list them greyed out. */
.ww-isolation-subsidy-form .select2-results__option--disabled,
.ww-isolation-subsidy-form .select2-results__option[aria-disabled="true"] {
	display: none;
}

/* Narrower than the page container for a comfortable reading width; centred by .ww-lead-form. */
.ww-lead-form.ww-isolation-subsidy-form {
	--ww-choice-check: 1.125rem; /* Checkbox / radio size, also used to indent measure descriptions. */
	/* max-width: 65rem; */
	margin-top: 1rem;
}

.ww-isolation-subsidy-form .ww-isolation-subsidy-form__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--ww-lead-text);
}

/* Wizard progress: "Woning - Stap 1 van 3" above a bar (display only, not clickable). */
.ww-isolation-subsidy-form__progress {
	margin: 0 0 1.25rem;
}

.ww-isolation-subsidy-form .ww-isolation-subsidy-form__progress-label {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ww-lead-text);
}

.ww-isolation-subsidy-form__progress-track {
	position: relative;
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--ww-lead-border);
}

.ww-isolation-subsidy-form__progress-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ww-lead-red);
	transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ww-isolation-subsidy-form__progress-fill {
		transition: none;
	}
}

.ww-isolation-subsidy-form__help {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--ww-lead-muted);
}

/* Inline links match the surrounding text; the Elementor kit sets its own link font size. */
.ww-isolation-subsidy-form .ww-isolation-subsidy-form__help a,
.ww-isolation-subsidy-form .ww-lead-form__hint a,
.ww-isolation-subsidy-form .ww-isolation-subsidy-form__declarations a {
	color: var(--ww-lead-red);
	font-size: inherit;
	line-height: inherit;
	text-decoration: underline;
	overflow-wrap: anywhere;
}

/* Group labels are <p> (radio/checkbox groups), so reset paragraph spacing. */
.ww-isolation-subsidy-form p.ww-lead-form__label {
	margin: 0 0 0.5rem;
}

.ww-isolation-subsidy-form .ww-lead-form__hint {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Short choices (Nee / Ja, namelijk:) sit in a row of cards. */
.ww-isolation-subsidy-form__choices--compact {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ww-isolation-subsidy-form .ww-lead-form__choice {
	min-height: 44px;
	box-sizing: border-box;
	font-size: 0.9375rem;
}

/* Answers are lighter than the question labels above them. */
.ww-isolation-subsidy-form .ww-lead-form__choice-label {
	overflow-wrap: break-word;
	min-width: 0;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.5;
}

/*
 * Checkbox / radio: fixed size, centred on the first 1.5 line-height text line, no browser side
 * margins. font-size: inherit makes 1.5em the label's line height (inputs default to ~13px).
 */
.ww-isolation-subsidy-form .ww-lead-form__choice input {
	flex-shrink: 0;
	width: var(--ww-choice-check);
	height: var(--ww-choice-check);
	margin: calc((1.5em - var(--ww-choice-check)) / 2) 0 0;
	font-size: inherit;
}

/*
 * Select2 keeps the original <select> as a visually hidden, absolutely positioned element.
 * The shared `width: 100%` makes it viewport-wide and it pushes the page sideways;
 * restore Select2's intended 1px size.
 */
.ww-isolation-subsidy-form select.select2-hidden-accessible {
	width: 1px !important; /* Same as Select2's own hidden-element rules. */
}

/* Keyboard focus on any choice card. */
.ww-isolation-subsidy-form .ww-lead-form__choice:has(input:focus-visible) {
	outline: 2px solid var(--ww-lead-red);
	outline-offset: 2px;
}

/*
 * Long checkbox lists (bouwdelen, measures): a plain spaced list without borders; the section
 * card already frames it. Rows get a soft rounded tint on hover and when checked; a checked
 * measure is tinted together with its description.
 */
.ww-isolation-subsidy-form__choices--list {
	--ww-list-pad-x: 0.75rem;
	gap: 0.125rem;
	margin-inline: calc(
		var(--ww-list-pad-x) * -1
	); /* Checkboxes line up with the question label. */
}

.ww-isolation-subsidy-form
	.ww-isolation-subsidy-form__choices--list
	.ww-lead-form__choice {
	padding: 0.625rem var(--ww-list-pad-x);
	border: 0;
	border-radius: var(--ww-lead-input-radius);
	background: transparent;
	box-shadow: none;
}

.ww-isolation-subsidy-form
	.ww-isolation-subsidy-form__choices--list
	.ww-lead-form__choice:not(:has(input:checked)):hover {
	background: var(--ww-lead-bg);
}

/* .ww-isolation-subsidy-form
	.ww-isolation-subsidy-form__choices--list
	.ww-lead-form__choice:has(input:checked),
.ww-isolation-subsidy-form
	.ww-isolation-subsidy-form__choices--list
	.ww-isolation-subsidy-form__measure:has(input:checked) {
	background: var(--ww-lead-section-header-bg);
} */

/* A checked measure: the wrapper carries the tint, so the label itself stays clear. */
.ww-isolation-subsidy-form
	.ww-isolation-subsidy-form__choices--list
	.ww-isolation-subsidy-form__measure
	.ww-lead-form__choice:has(input:checked) {
	background: transparent;
}

.ww-isolation-subsidy-form
	.ww-isolation-subsidy-form__choices--list
	.ww-lead-form__choice:has(input:focus-visible) {
	outline-offset: -2px;
}

/*
 * Measure description (from the CRM API): plain text under the label, indented to the label
 * text (row padding + checkbox + the shared 0.75rem choice gap), at a readable line length.
 */
.ww-isolation-subsidy-form
	.ww-isolation-subsidy-form__choices--list
	.ww-isolation-subsidy-form__measure-description {
	margin: -0.25rem 0 0;
	padding: 0 var(--ww-list-pad-x) 0.875rem
		calc(var(--ww-list-pad-x) + var(--ww-choice-check) + 0.75rem);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ww-lead-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.ww-isolation-subsidy-form__measure-description > * {
	max-width: 900px;
	font-size: 15px;
	color: #555;
	line-height: 1.5;
}

/*
 * Energy label cards (A to G + Geen): colours follow the official EU label scale.
 * Dark text on the light colours (C, D, E) keeps the letters readable.
 */
.ww-isolation-subsidy-form__energielabels {
	display: grid;
	/* A to G, then a wider "Geen energielabel" card so its text wraps without hyphens. */
	grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.5fr);
	gap: 0.75rem;
}

.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy {
	--ww-energy: #139a48;
	--ww-energy-text: #fff;
	position: relative;
	align-items: center;
	justify-content: center;
	min-height: 4.5rem;
	padding: 0.75rem 0.5rem;
	text-align: center;
}

.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy--b {
	--ww-energy: #50b848;
}

.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy--c {
	--ww-energy: #bed431;
	--ww-energy-text: #1f2933;
}

.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy--d {
	--ww-energy: #f2cf4f;
	--ww-energy-text: #1f2933;
}

.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy--e {
	--ww-energy: #f9bc0a;
	--ww-energy-text: #1f2933;
}

.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy--f {
	--ww-energy: #f07224;
}

.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy--g {
	--ww-energy: #ec1c24;
}

/*
 * Arrow badge: a fixed-size bar whose point is --ww-energy-point wide. The letter is centred
 * in the bar body (padding-right = the point), and the whole badge is centred in the card.
 */
.ww-isolation-subsidy-form__energy-badge {
	--ww-energy-point: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.5rem;
	height: 2.25rem;
	padding: 0 var(--ww-energy-point) 0 0;
	box-sizing: border-box;
	background: var(--ww-energy);
	color: var(--ww-energy-text);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	/* Arrow shape like the label bars. */
	clip-path: polygon(
		0 0,
		calc(100% - var(--ww-energy-point)) 0,
		100% 50%,
		calc(100% - var(--ww-energy-point)) 100%,
		0 100%
	);
}

/* Trim the font's ascender/descender space so capitals sit at the optical vertical centre. */
@supports (text-box: trim-both cap alphabetic) {
	.ww-isolation-subsidy-form__energy-badge {
		text-box: trim-both cap alphabetic;
	}
}

.ww-isolation-subsidy-form__energy-text {
	display: flex;
	align-items: center;
	min-height: 2.25rem;
	color: var(--ww-lead-text);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	hyphens: auto;
}

/*
 * The card border shows the selection, so the radio is visually hidden. It stays in the
 * accessibility tree and keyboard order (arrow keys, focus ring on the card via :has()).
 */
.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

/* Light tint on the selected card, on top of the shared red border. */
.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy:has(input:checked) {
	background: var(--ww-lead-section-header-bg);
}

@media (max-width: 1024px) {
	/* Two rows: A B C D / E F G Geen. */
	.ww-isolation-subsidy-form__energielabels {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ww-isolation-subsidy-form__energielabels {
		gap: 0.5rem;
	}

	.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy {
		min-height: 4rem;
		padding: 0.5rem 0.25rem;
	}

	.ww-isolation-subsidy-form__energy-text {
		font-size: 0.8125rem;
	}
}

/*
 * Notices: info (needs bouwdelen) and warning (not eligible, WOZ too high). Thin border all round
 * with a round "i" / "!" marker at the start; the marker is absolutely placed so notices with
 * several children (API descriptions) keep normal flow.
 */
.ww-isolation-subsidy-form__notice {
	--ww-notice-accent: var(--ww-lead-muted);
	position: relative;
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem 0.75rem 2.75rem;
	border: 1px solid var(--ww-lead-border);
	border-radius: var(--ww-lead-input-radius);
	background: var(--ww-lead-bg);
	color: var(--ww-lead-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.ww-isolation-subsidy-form__notice::before {
	content: "i";
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--ww-notice-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
}

/* Trim the font's ascender/descender space so the "i" / "!" sits at the circle's optical centre. */
@supports (text-box: trim-both cap alphabetic) {
	.ww-isolation-subsidy-form__notice::before {
		text-box: trim-both cap alphabetic;
	}
}

.ww-isolation-subsidy-form__notice--warning {
	--ww-notice-accent: var(--ww-lead-red);
	border-color: rgba(200, 16, 46, 0.3);
	background: var(--ww-lead-section-header-bg);
	color: #9f0d24;
}

.ww-isolation-subsidy-form__notice--warning::before {
	content: "!";
}

/* Measure descriptions are content, not alerts: no marker (styled with the list above). */
.ww-isolation-subsidy-form .ww-isolation-subsidy-form__measure-description::before {
	content: none;
}

.ww-isolation-subsidy-form__notice p {
	margin: 0 0 0.5rem;
}

.ww-isolation-subsidy-form__notice p:last-child {
	margin-bottom: 0;
}

.ww-isolation-subsidy-form__notice img {
	max-width: 100%;
	height: auto;
}

.ww-isolation-subsidy-form__measure {
	min-width: 0;
	border-radius: var(--ww-lead-input-radius);
}

.ww-isolation-subsidy-form__declarations {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
	color: var(--ww-lead-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ww-isolation-subsidy-form__declarations li {
	margin: 0 0 0.25rem;
}

.ww-isolation-subsidy-form [data-vakspecialist-name] {
	margin-top: 0.75rem;
}

/* Vorige / Volgende / Verstuur: side by side. */
.ww-isolation-subsidy-form .ww-lead-form__actions--steps {
	flex-direction: row;
	justify-content: center;
}

@media (max-width: 767px) {
	/* Short choices (Nee / Ja, namelijk:): two equal columns. */
	.ww-isolation-subsidy-form__choices--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ww-isolation-subsidy-form__choices--compact .ww-lead-form__choice {
		gap: 0.5rem;
		padding: 0.75rem;
	}

	/* Full-width buttons on phones; the primary action comes first. */
	.ww-isolation-subsidy-form .ww-lead-form__actions--steps {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.ww-isolation-subsidy-form .ww-lead-form__actions--steps .ww-lead-form__submit,
	.ww-isolation-subsidy-form .ww-lead-form__back {
		width: 100%;
		min-width: 0;
	}
}

@media (max-width: 480px) {
	/* Too narrow for two cards side by side ("Ja, namelijk:" would break mid-word). */
	.ww-isolation-subsidy-form__choices--compact {
		grid-template-columns: 1fr;
	}

	/*
	 * Energy labels: A to E, then F, G and a wide "Geen energielabel" card, so the badges fit
	 * the narrower cards and the text does not break mid-word.
	 */
	.ww-isolation-subsidy-form__energielabels {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.375rem;
	}

	.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy {
		min-height: 3.5rem;
		padding: 0.5rem 0.125rem;
	}

	.ww-isolation-subsidy-form .ww-isolation-subsidy-form__energy--geen {
		grid-column: span 3;
	}

	.ww-isolation-subsidy-form__energy-badge {
		--ww-energy-point: 0.5rem;
		width: 2.25rem;
		height: 1.75rem;
		font-size: 1rem;
	}

	.ww-isolation-subsidy-form__energy-text {
		min-height: 1.75rem;
		hyphens: manual;
	}
}