/*
 * Styling voor de "gratis inspectie" wizard (Pand → Project → Contact).
 *
 * Lettertype: gebruikt 'Manrope' met een normale fallback-stack. Deze
 * plugin laadt het lettertype zelf NIET (geen Google Fonts-import) —
 * dat scheelt een externe aanvraag en dubbel laden als je thema/Elementor
 * Manrope al inlaadt. Staat Manrope nog niet op de site, voeg het dan zelf
 * toe via je thema of Elementor's site-instellingen.
 *
 * De wizard heeft bewust GEEN eigen achtergrond/kader (transparant), zodat
 * hij meebeweegt met de achtergrond die je zelf instelt (bv. in Elementor).
 */

.sia-wizard {
	--sia-primary: #E20024;
	--sia-primary-soft: #fceaec;
	--sia-primary-text: #a8001b;
	--sia-primary-rgb: 226, 0, 36;
	--sia-dark: #1a1b1e;
	--sia-btn-color: #E20024;
	--sia-btn-color-dark: #a8001b;
	--sia-text: #1c1f22;
	--sia-muted: #5b6470;
	--sia-border: #e3e6ea;
	--sia-bg: #ffffff;
	--sia-surface: #f6f7f8;
	--sia-track: #e7e9ec;
	--sia-radius-lg: 14px;
	--sia-radius: 10px;

	box-sizing: border-box;
	max-width: 780px;
	width: 100%;
	margin: 0 auto;
	background: transparent;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--sia-text);
	/* Container queries: zodra de wizard in een smalle Elementor-kolom staat,
	 * reageren de grids hieronder op de ECHTE breedte van de wizard zelf,
	 * niet op de breedte van het browservenster. Dat is nodig omdat de
	 * wizard vaak smaller is dan het scherm (bv. naast een sidebar of in
	 * een kolom van 40%), waardoor gewone media queries te laat ingrijpen. */
	container-type: inline-size;
	container-name: sia-wizard;
}

.sia-wizard *,
.sia-wizard *::before,
.sia-wizard *::after {
	box-sizing: inherit;
}

.sia-wizard-heading {
	margin: 0 0 6px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.3;
}

.sia-wizard-intro {
	margin: 0 0 20px;
	color: var(--sia-muted);
	line-height: 1.5;
}

/* ---------- Voortgangsbalk ----------
 * Een dunne, egale voortgangsbalk in plaats van de stappen-pillen: simpeler,
 * neemt minder ruimte in en kan nooit "raar" afbreken op smalle schermen.
 */
.sia-progress {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: var(--sia-track);
	overflow: hidden;
	margin: 0 0 10px;
}

.sia-progress-fill {
	height: 100%;
	width: 33.33%;
	border-radius: 999px;
	background: var(--sia-primary);
	transition: width 0.25s ease;
}

.sia-step-counter {
	margin: 0 0 22px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sia-primary);
}

/* ---------- Step body ---------- */
.sia-step-body { padding: 22px 0 4px; }
.sia-step-body[hidden] { display: none; }

.sia-step-title {
	margin: 0 0 4px;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sia-step-subtitle {
	margin: 0 0 22px;
	color: var(--sia-muted);
	font-size: 0.92rem;
}

.sia-block { margin-bottom: 30px; }

.sia-block-label {
	display: block;
	margin-bottom: 12px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sia-text);
}

.sia-block-label .sia-optional {
	font-weight: 600;
	color: var(--sia-muted);
	text-transform: none;
	letter-spacing: normal;
}

/* ---------- Selectable cards (radio-style) ---------- */
.sia-card-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
}

@media (max-width: 640px) {
	.sia-card-row { grid-template-columns: repeat(2, 1fr); }
}

.sia-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 18px 12px;
	border: 1.5px solid var(--sia-border);
	border-radius: var(--sia-radius-lg);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--sia-muted);
}

.sia-card:hover {
	border-color: #cfd4d9;
	box-shadow: 0 6px 16px rgba(20, 22, 25, 0.07);
	transform: translateY(-2px);
}

.sia-card.is-selected {
	border-color: var(--sia-primary);
	background: var(--sia-primary-soft);
	color: var(--sia-primary-text);
}

.sia-card.is-selected::after {
	content: "\2713";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--sia-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.sia-card svg {
	width: 44px;
	height: 44px;
	padding: 11px;
	border-radius: 12px;
	background: var(--sia-primary-soft);
	color: var(--sia-primary);
	stroke: currentColor;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sia-card:hover svg { transform: scale(1.06); }

.sia-card.is-selected svg { background: var(--sia-primary); color: #fff; }

.sia-card:active { transform: translateY(0); }

.sia-block.sia-field-invalid .sia-card-row .sia-card { border-color: #b3261e; }

/* ---------- Checkbox cards (met optioneel inline detail) ---------- */
.sia-check-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	align-items: stretch;
}

/* Altijd minstens 2 kolommen, ook op mobiel — 1 kolom betekent te veel
 * scrollen voor maar 3 keuzes. Er zijn altijd precies 3 situatie-opties,
 * dus het overblijvende 3e kaartje krijgt de volle breedte i.p.v. half leeg
 * naast een lege kolom te staan. */
@media (max-width: 640px) {
	.sia-check-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.sia-check-row .sia-check-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.sia-check-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1.5px solid var(--sia-border);
	border-radius: var(--sia-radius-lg);
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	background: #fff;
}

.sia-check-card:hover {
	border-color: #cfd4d9;
	box-shadow: 0 6px 16px rgba(20, 22, 25, 0.06);
	transform: translateY(-2px);
}

.sia-check-card.is-selected {
	border-color: var(--sia-primary);
	background: var(--sia-primary-soft);
}

.sia-check-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--sia-text);
}

.sia-check-card-top-left { display: flex; align-items: center; gap: 8px; }
.sia-check-card-top-left svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--sia-muted); }
.sia-check-card.is-selected .sia-check-card-top-left svg { color: var(--sia-primary-text); }

.sia-checkbox {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1.5px solid var(--sia-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #fff;
}

.sia-check-card.is-selected .sia-checkbox {
	background: var(--sia-primary);
	border-color: var(--sia-primary);
	color: #fff;
}

.sia-checkbox svg { width: 13px; height: 13px; display: none; }
.sia-check-card.is-selected .sia-checkbox svg { display: block; }

/* ---------- Slider (omvang van het project) ----------
 * De schuifknop is een gevulde rode cirkel met een witte ring: duidelijk
 * zichtbaar tegen elke achtergrond en direct herkenbaar als "hier kun je
 * aan trekken". Tijdens het slepen verschijnt er een balonnetje met de
 * live waarde vlak boven de knop, zodat ook iemand die nog nooit een
 * schuifregelaar heeft gebruikt meteen ziet wat hij aan het instellen is.
 */
.sia-slider-card {
	border: 1.5px solid var(--sia-border);
	border-radius: var(--sia-radius-lg);
	padding: 18px 20px 30px;
	background: #fff;
}

.sia-slider-value {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.sia-slider-value svg { width: 22px; height: 22px; color: var(--sia-primary); flex-shrink: 0; stroke: currentColor; }

.sia-slider-value strong { font-size: 1.15rem; }

.sia-slider-value .sia-slider-unit {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sia-muted);
}

.sia-slider-scale {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--sia-muted);
	margin-bottom: 6px;
}

.sia-slider-track-wrap {
	position: relative;
	height: 38px;
	display: flex;
	align-items: center;
}

.sia-slider-fill {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 8px;
	border-radius: 999px;
	background: var(--sia-primary);
	pointer-events: none;
}

.sia-slider-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 8px;
	border-radius: 999px;
	background: var(--sia-track);
}

.sia-slider-dots {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 2px;
	pointer-events: none;
}

.sia-slider-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--sia-track);
}

/* Balonnetje met live waarde, volgt de knop tijdens het slepen. De
 * positie (left) wordt door JS gezet op basis van het percentage. */
.sia-slider-bubble {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	transform: translateX(-50%);
	background: var(--sia-dark);
	color: #fff;
	font-size: 0.76rem;
	font-weight: 800;
	padding: 4px 9px;
	border-radius: 7px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.12s ease;
	z-index: 3;
}

.sia-slider-bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--sia-dark);
}

.sia-slider-track-wrap.is-active .sia-slider-bubble,
input[type="range"].sia-slider:focus-visible ~ .sia-slider-bubble { opacity: 1; }

input[type="range"].sia-slider {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative;
	width: 100% !important;
	height: 38px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	z-index: 2;
	cursor: pointer;
}

input[type="range"].sia-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sia-primary);
	border: 4px solid #fff;
	box-shadow: 0 0 0 1.5px var(--sia-primary), 0 3px 10px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

input[type="range"].sia-slider::-moz-range-thumb {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sia-primary);
	border: 4px solid #fff;
	box-shadow: 0 0 0 1.5px var(--sia-primary), 0 3px 10px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

input[type="range"].sia-slider:hover::-webkit-slider-thumb,
input[type="range"].sia-slider:active::-webkit-slider-thumb { transform: scale(1.1); }
input[type="range"].sia-slider:hover::-moz-range-thumb,
input[type="range"].sia-slider:active::-moz-range-thumb { transform: scale(1.1); }

input[type="range"].sia-slider:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(var(--sia-primary-rgb), 0.25), 0 3px 10px rgba(0, 0, 0, 0.22);
}
input[type="range"].sia-slider:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px rgba(var(--sia-primary-rgb), 0.25), 0 3px 10px rgba(0, 0, 0, 0.22);
}

input[type="range"].sia-slider::-moz-range-track { background: transparent; }

.sia-slider-hint {
	margin: 10px 0 0;
	font-size: 0.76rem;
	color: var(--sia-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.sia-slider-hint svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--sia-muted); stroke: currentColor; }

/* ---------- Gewone velden (contactstap) ---------- */
.sia-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
}

@media (max-width: 560px) {
	.sia-grid { grid-template-columns: 1fr; }
}

.sia-field { display: flex; flex-direction: column; gap: 6px; }
.sia-field-wide { grid-column: 1 / -1; }

.sia-field label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--sia-text);
}

.sia-required { color: var(--sia-primary); }

/* De volgende regels zijn bewust !important: veel thema's en page-builders
 * (bv. Elementor's globale veld-/knopstijlen) zetten hun eigen padding en
 * kleur op ALLE <input>/<textarea>/<button>-elementen op de site. Zonder
 * !important "lekt" die site-brede opmaak in dit formulier en schuift bv.
 * het icoontje in het telefoon-/e-mailveld door elkaar met de placeholder. */
.sia-field input,
.sia-field textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 11px 13px !important;
	margin: 0 !important;
	font-size: 1rem !important;
	font-family: inherit !important;
	line-height: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--sia-text) !important;
	background: var(--sia-surface) !important;
	border: 1px solid var(--sia-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

.sia-field textarea { resize: vertical; min-height: 84px; }

.sia-field input:focus,
.sia-field textarea:focus {
	outline: none !important;
	border-color: var(--sia-primary) !important;
	box-shadow: 0 0 0 3px rgba(var(--sia-primary-rgb), 0.15) !important;
}

.sia-field.sia-field-invalid input { border-color: #b3261e !important; }

.sia-input-icon { position: relative; display: block; }

.sia-input-icon svg {
	position: absolute !important;
	left: 13px;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	color: var(--sia-muted);
	pointer-events: none;
	z-index: 1;
}

.sia-input-icon input { padding-left: 42px !important; }

.sia-field-hint {
	font-size: 0.76rem;
	color: #b3261e;
	min-height: 1.1em;
}

.sia-inline-2 {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
}

/* ---------- Honeypot: onzichtbaar voor mensen ---------- */
.sia-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Samenvatting-chips (contactstap) ---------- */
.sia-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
}

.sia-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--sia-surface);
	border: 1px solid var(--sia-border);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--sia-text);
}

.sia-chip svg { width: 14px; height: 14px; color: var(--sia-primary); }

.sia-privacy-note {
	margin: 4px 0 0;
	font-size: 0.78rem;
	color: var(--sia-muted);
}

/* ---------- Footer navigatie ---------- */
.sia-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0 4px;
}

/* !important hieronder: WordPress-thema's en page builders (Elementor's
 * globale knop-stijlen bijvoorbeeld) zetten vaak hun eigen tekstkleur,
 * achtergrond en display-vorm op ALLE <button>-elementen van de site, soms
 * zelf ook met !important. Zonder deze bescherming wordt de tekst op de
 * rode knop bijvoorbeeld zwart in plaats van wit, of springt het pijl-
 * icoon onder de tekst i.p.v. ernaast omdat de site "display: inline-flex"
 * terugzet naar "inline-block". */
.sia-wizard .sia-btn-back {
	display: inline-flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
	gap: 6px;
	background: #fff !important;
	border: 1.5px solid var(--sia-dark) !important;
	border-radius: 999px !important;
	color: var(--sia-dark) !important;
	font-weight: 700;
	font-size: 0.9rem;
	font-family: inherit;
	line-height: normal;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	padding: 13px 22px 13px 18px !important;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.sia-btn-back svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; }

.sia-wizard .sia-btn-back:hover { background: var(--sia-dark) !important; color: #fff !important; }
.sia-btn-back:active { transform: translateY(1px); }
.sia-btn-back[hidden] { display: none !important; }

/* "Volgende" / "Aanvraag versturen": rode pil met witte tekst en een ronde
 * pijl-badge aan het eind — zelfde opbouw als de CTA-knoppen op de site
 * (bv. "Plan een gratis inspectie"). De labeltekst zit in een eigen span
 * zodat de JS alleen die tekst hoeft te wisselen (bv. tijdens verzenden)
 * zonder het pijl-icoon te verliezen. */
.sia-wizard .sia-btn-next {
	display: inline-flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
	gap: 10px;
	background: var(--sia-btn-color) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 8px 8px 8px 26px !important;
	font-size: 0.95rem;
	font-weight: 700;
	font-family: inherit;
	line-height: normal;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}

.sia-wizard .sia-btn-next .sia-btn-label { padding: 6px 0; color: #fff !important; }

.sia-wizard .sia-btn-next .sia-btn-arrow {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #fff !important;
	color: var(--sia-btn-color) !important;
}

.sia-btn-next .sia-btn-arrow svg { width: 16px; height: 16px; stroke: currentColor; }

.sia-wizard .sia-btn-next:hover { background: var(--sia-btn-color-dark) !important; }
.sia-btn-next:active { transform: translateY(1px); }
.sia-btn-next:disabled { opacity: 0.7; cursor: not-allowed; }

.sia-form-message {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.9rem;
}

.sia-form-message.sia-message-success { background: #eafaf0; color: #146c43; }
.sia-form-message.sia-message-error { background: #fdecea; color: #b3261e; }
.sia-form-message[hidden] { display: none; }

/* =========================================================================
 * Responsiveness — container-based
 * -------------------------------------------------------------------------
 * De media queries hierboven reageren op de breedte van het BROWSERVENSTER.
 * Staat de wizard in een smalle Elementor-kolom (bijvoorbeeld naast een
 * sidebar, of in een kolom van 40%), dan blijft het venster "desktop-breed"
 * terwijl de wizard zelf maar een paar honderd pixels breed is — de media
 * queries grijpen dan niet op tijd in en kaartjes/tekst worden te krap
 * (precies het probleem met de 3 kaartjes bij "Is er sprake van het
 * volgende?"). Container queries reageren op de echte breedte van de
 * wizard zelf, dus die lossen dat op. Alle browsers die deze plugin hoeft
 * te ondersteunen kennen container queries; @supports zorgt dat oudere
 * browsers gewoon de media queries hierboven blijven gebruiken.
 * ========================================================================= */
@supports (container-type: inline-size) {

	/* Kaartjes-rij (type pand, type sloopwerk, timing): 2 kolommen zodra de
	 * wizard smaller wordt dan 640px — en dat blijft zo, ook op de kleinste
	 * telefoon. Minder scrollen dan alles onder elkaar. */
	@container sia-wizard (max-width: 640px) {
		.sia-card-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	}

	/* Checkbox-kaarten ("Is er sprake van het volgende?"): zelfde principe,
	 * altijd 2 naast elkaar op mobiel, nooit 1 kolom (dat scrolt te lang
	 * voor maar 3 keuzes). Het 3e, overblijvende kaartje krijgt de volle
	 * breedte. */
	@container sia-wizard (max-width: 640px) {
		.sia-check-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
		.sia-check-row .sia-check-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
	}

	/* Contactvelden: twee kolommen naast elkaar tot de wizard te smal wordt. */
	@container sia-wizard (max-width: 460px) {
		.sia-grid { grid-template-columns: 1fr; }
	}

	/* Huisnummer + toevoeging: blijven naast elkaar tot het echt niet meer past. */
	@container sia-wizard (max-width: 340px) {
		.sia-inline-2 { grid-template-columns: 1fr 1fr; gap: 8px; }
	}

	/* Op erg smalle wizards heeft de knoppenrij onderin ook wat ademruimte
	 * nodig — "Vorige" en "Volgende" mogen dan onder elkaar. */
	@container sia-wizard (max-width: 320px) {
		.sia-footer { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
		.sia-footer .sia-btn-back,
		.sia-footer .sia-btn-next { width: 100%; justify-content: center; }
	}
}