/* Ivest Lead Forms – alles gescoped onder .ilf-form (formulier) en .ilf-page (Funda- en akkoord-pagina). */

/* ---------- Formulier ----------
 * Bouwt voort op de bestaande site-CSS (Extra CSS): veldkleuren, lettertype, focus-rand,
 * dropdown-pijl en de oranje vinkjes blijven van de site. De plugin regelt alleen
 * de stappen, de ruimte tussen velden, de vinkjes-rijen en de knoppen.
 */
.ilf-form { color: var(--ilf-text); }
.ilf-form form > br,
.ilf-form .uacf7-form-wrapper-container > br,
.ilf-form .hidden-fields-container { display: none; }

/* Kop met voortgang */
.ilf-form .ilf-head { margin: 0 0 16px; }
.ilf-form .ilf-progress { display: flex; gap: 6px; }
.ilf-form .ilf-progress span { flex: 1; height: 5px; border-radius: 3px; background: rgba(13, 43, 46, .15); transition: background .2s; }
.ilf-form .ilf-progress span.ilf-on { background: var(--ilf-text); }
.ilf-form .ilf-steplabel { font-size: 13px; margin-top: 6px; color: var(--ilf-text); opacity: .85; }

/* Stappen */
.ilf-form .ilf-step { display: flex; flex-direction: column; gap: 12px; }
.ilf-form .ilf-step[hidden] { display: none !important; }
.ilf-form .ilf-step > * { margin: 0 !important; }
.ilf-form .ilf-step-title { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ilf-text); }

/* Labels boven velden */
.ilf-form .ilf-label { display: block; font-size: 13px; font-weight: 700; color: var(--ilf-text); margin: 0 0 6px !important; }
.ilf-form .ilf-step > .ilf-label { margin: 0 0 -6px !important; }

/* Bestaande "Over de woning"-kop en blokmarges niet dubbel tonen binnen de stappen */
.ilf-form .zoons-situatie::before,
.ilf-form .zoons-vragen::before { content: none !important; display: none !important; }
.ilf-form .ilf-step .zoons-situatie,
.ilf-form .ilf-step .zoons-vragen { margin: 0 !important; padding: 0 !important; }

/* Velden: alleen ruimte en breedte, uiterlijk komt van de site */
.ilf-form .ilf-step .wpcf7-form-control-wrap { display: block; width: 100%; }
.ilf-form .ilf-step input[type="text"],
.ilf-form .ilf-step input[type="email"],
.ilf-form .ilf-step input[type="tel"],
.ilf-form .ilf-step select,
.ilf-form .ilf-step textarea {
	width: 100%;
	box-sizing: border-box;
	margin: 0 !important;
	font-size: 16px; /* voorkomt inzoomen op iPhone */
}

/* Foutmelding op een veld (site-velden hebben geen rand, dus via schaduw) */
.ilf-form .ilf-step [aria-invalid="true"],
.ilf-form .ilf-step .wpcf7-not-valid,
.ilf-form .ilf-step .adres-invalid { box-shadow: 0 0 0 2px #b42318 !important; }
.ilf-form .ilf-error { color: #b42318; font-size: 14px; font-weight: 700; }
.ilf-form .ilf-error[hidden] { display: none !important; }

/* Vinkjes als hele klikbare rij; het oranje vinkje zelf blijft van de site */
.ilf-form .ilf-chips,
.ilf-form .ilf-step .wpcf7-checkbox { display: grid; gap: 8px; }
.ilf-form .ilf-step .wpcf7-list-item { display: block; margin: 0; }
.ilf-form .ilf-step .wpcf7-checkbox label {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	box-sizing: border-box;
	padding: 0 18px;
	background: rgba(255, 255, 255, .55);
	border-radius: 12px;
	cursor: pointer;
	transition: background .15s;
}
.ilf-form .ilf-step .wpcf7-checkbox label:hover { background: rgba(255, 255, 255, .8); }
.ilf-form .ilf-step .wpcf7-checkbox label:has(input:checked) { background: #f9fcfc; }
.ilf-form .ilf-step input[type="checkbox"] { border: 1.5px solid rgba(13, 43, 46, .25); }
.ilf-form .ilf-step input[type="checkbox"]:checked { border-color: var(--ilf-cta); }
.ilf-form .ilf-step input[type="checkbox"]:focus-visible { outline: 2px solid var(--ilf-text); outline-offset: 2px; }

/* Knoppen */
.ilf-form .ilf-nav { display: flex; align-items: center; gap: 12px; margin-top: 8px !important; }
.ilf-form .ilf-btn,
.ilf-form .ilf-nav input[type="submit"] {
	flex: 1 1 auto;
	width: auto;
	height: 58px;
	margin: 0 !important;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background-color: var(--ilf-cta);
	color: #fff;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s;
}
.ilf-form .ilf-btn:hover,
.ilf-form .ilf-nav input[type="submit"]:hover { background-color: var(--ilf-cta-hover); }
.ilf-form .ilf-btn:focus-visible,
.ilf-form .ilf-back:focus-visible { outline: 2px solid var(--ilf-text); outline-offset: 2px; }
.ilf-form .ilf-back {
	flex: none;
	background: none;
	border: 0;
	padding: 8px 4px;
	color: var(--ilf-text);
	font-size: 15px;
	text-decoration: underline;
	cursor: pointer;
}
.ilf-form .ilf-step .zoons-usps { margin-top: 2px !important; }
.ilf-form .ilf-nav input[type="submit"].ilf-busy { opacity: .75; cursor: progress; pointer-events: none; }
.ilf-form .ilf-back:disabled { opacity: .4; cursor: default; }

@media (prefers-reduced-motion: no-preference) {
	.ilf-form .ilf-step:not([hidden]) { animation: ilf-in .2s ease-out; }
}
@keyframes ilf-in { from { transform: translateY(4px); } to { transform: none; } }

/* ---------- Funda- en akkoord-pagina ---------- */
.ilf-page { max-width: 720px; margin: 32px auto; padding: 0 16px; color: var(--ilf-text); font-size: 17px; line-height: 1.6; }
.ilf-page .ilf-eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ilf-accent); font-weight: 700; margin: 0 0 8px; }
.ilf-page .ilf-h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; font-weight: 900; margin: 0 0 16px; color: var(--ilf-text); text-wrap: balance; }
.ilf-page p { margin: 0 0 14px; }
.ilf-page .ilf-facts { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; }
.ilf-page .ilf-facts li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; background: #f6f8f9; border-radius: 12px; padding: 16px; margin: 0; }
.ilf-page .ilf-facts strong { display: block; margin-bottom: 2px; }
.ilf-page .ilf-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--ilf-accent); color: #fff; display: grid; place-items: center; font-weight: 900; }
.ilf-page .ilf-ic-o { background: var(--ilf-cta); }
.ilf-page .ilf-mailhint { border: 2px dashed var(--ilf-accent); border-radius: 12px; padding: 16px 18px; margin: 22px 0; }
.ilf-page .ilf-contact { border-top: 1px solid #d7e0e5; margin-top: 32px; padding-top: 16px; font-size: 14px; opacity: .8; }
.ilf-page .ilf-btn {
	border: 0; border-radius: 12px; padding: 15px 22px; min-height: 50px;
	background: var(--ilf-cta); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer;
}
.ilf-page .ilf-btn:hover { background: var(--ilf-cta-hover); }
.ilf-page .ilf-btn:focus-visible { outline: 3px solid var(--ilf-text); outline-offset: 2px; }