/* ============================================================
   Valkro Keuzehulp — styling (v1.1)
   Alle kleuren zijn CSS-variabelen. Bron van de waardes:
   1. defaults hieronder, 2. Instellingen → Keuzehulp,
   3. Elementor-widgetcontrols (winnen altijd, via {{WRAPPER}}).
   ============================================================ */
.vk-kh{
	--vk-primair:#D38B48;
	--vk-donker:#141E2F;
	--vk-licht:#FAF2EB;
	--vk-rand:#EBDCCB;
	--vk-radius:8px;
	position:relative;
	max-width:860px;
	margin-inline:auto;
	text-align:center;
}

/* Reset zodat theme-buttonstyling (bijv. roze hover) niet doorlekt */
.vk-kh button{
	-webkit-appearance:none;appearance:none;
	font-family:inherit;
	text-decoration:none;
	box-shadow:none;
}

/* Voortgangsindicator */
.vk-kh__voortgang{display:flex;justify-content:center;gap:8px;margin-bottom:1.6rem}
.vk-kh__voortgang span{width:34px;height:5px;border-radius:99px;background:var(--vk-rand);transition:background .25s ease}
.vk-kh__voortgang span.is-actief{background:var(--vk-primair)}

/* Stap */
.vk-kh__eyebrow{
	display:inline-block;font-weight:600;font-size:.74rem;
	letter-spacing:.22em;text-transform:uppercase;
	color:var(--vk-primair);margin-bottom:.6rem;
}
.vk-kh__titel{color:var(--vk-donker);margin:0 0 1.4rem;outline:none}
.vk-kh__intro{color:var(--vk-donker);opacity:.7;max-width:52ch;margin:0 auto 1.4rem}

/* Optieknoppen */
.vk-kh__opties{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.vk-kh .vk-kh__optie{
	font:inherit;font-weight:500;font-size:.95rem;
	padding:.85rem 1.5rem;cursor:pointer;
	background:var(--vk-optie-bg,transparent);
	color:var(--vk-optie-tekst,var(--vk-donker));
	border:1px solid var(--vk-optie-rand,var(--vk-primair));
	border-radius:var(--vk-radius);
	transition:all .22s ease;
}
.vk-kh .vk-kh__optie:hover,
.vk-kh .vk-kh__optie:focus-visible{
	background:var(--vk-optie-bg-hover,var(--vk-primair));
	color:var(--vk-optie-tekst-hover,var(--vk-donker));
	border-color:var(--vk-optie-rand-hover,var(--vk-primair));
	transform:translateY(-2px);
	box-shadow:0 10px 22px -12px rgba(20,30,47,.35);
	outline:none;
}
.vk-kh .vk-kh__optie.is-gekozen{background:var(--vk-optie-bg-hover,var(--vk-primair))}

/* Vorige stap / opnieuw — expliciete states in beide toestanden,
   zodat de globale theme-hover er nooit doorheen komt */
.vk-kh .vk-kh__terug,
.vk-kh .vk-kh__opnieuw{
	font:inherit;font-size:.86rem;font-weight:500;
	background:var(--vk-terug-bg,transparent);
	color:var(--vk-terug-kleur,var(--vk-donker));
	border:none;border-radius:var(--vk-radius);
	box-shadow:none;cursor:pointer;
	opacity:.6;margin-top:1.6rem;padding:.4rem .8rem;
	transition:all .2s ease;
}
.vk-kh .vk-kh__terug:hover,
.vk-kh .vk-kh__terug:focus-visible,
.vk-kh .vk-kh__opnieuw:hover,
.vk-kh .vk-kh__opnieuw:focus-visible{
	background:var(--vk-terug-bg-hover,transparent);
	color:var(--vk-terug-kleur-hover,var(--vk-primair));
	box-shadow:none;opacity:1;outline:none;
}
.vk-kh .vk-kh__opnieuw{margin:0;text-decoration:underline;opacity:.7}

/* Resultaatkaarten */
.vk-kh__resultaten{
	display:grid;grid-template-columns:repeat(3,1fr);
	gap:1.1rem;margin:0 0 1.8rem;
}
.vk-kh__kaart{background:#fff;border:1px solid var(--vk-rand);border-radius:calc(var(--vk-radius) + 6px);overflow:hidden;transition:all .25s ease}
.vk-kh__kaart:hover{transform:translateY(-4px);box-shadow:0 20px 44px -20px rgba(20,30,47,.3)}
.vk-kh__kaart-link{display:flex;flex-direction:column;text-decoration:none;color:var(--vk-donker);height:100%}
.vk-kh__kaart-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.vk-kh__kaart-img--leeg{background:var(--vk-licht)}
.vk-kh__kaart-naam{font-weight:600;font-size:1rem;padding:1rem 1.1rem .2rem;text-align:left}
.vk-kh__kaart-deels{font-size:.72rem;color:var(--vk-primair);padding:0 1.1rem;text-align:left}
.vk-kh__kaart-meer{font-weight:600;font-size:.86rem;color:var(--vk-primair);padding:.5rem 1.1rem 1.1rem;text-align:left;margin-top:auto}

/* CTA's */
.vk-kh__cta-rij{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem}
.vk-kh .vk-kh__btn{
	display:inline-flex;align-items:center;gap:.55rem;
	font-weight:600;font-size:.95rem;text-decoration:none;
	padding:.95rem 1.7rem;border-radius:var(--vk-radius);
	transition:all .22s ease;
}
.vk-kh .vk-kh__btn--primair{
	background:var(--vk-btn-bg,var(--vk-primair));
	color:var(--vk-btn-tekst,var(--vk-donker));
}
.vk-kh .vk-kh__btn--primair:hover{
	background:var(--vk-btn-bg-hover,var(--vk-donker));
	color:var(--vk-btn-tekst-hover,#fff);
	transform:translateY(-2px);
}
.vk-kh .vk-kh__btn--whatsapp{
	border:1.5px solid var(--vk-wa-kleur,var(--vk-rand));
	color:var(--vk-wa-kleur,var(--vk-donker));
	background:#fff;
}
.vk-kh .vk-kh__btn--whatsapp:hover{
	border-color:var(--vk-wa-kleur-hover,#25D366);
	color:var(--vk-wa-kleur-hover,#128C4B);
}
.vk-kh__samenvatting{font-size:.82rem;color:var(--vk-donker);opacity:.6;margin:0}

/* Loader-overlay */
.vk-kh__loader{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.65);backdrop-filter:blur(2px);
	border-radius:var(--vk-radius);z-index:5;
}
.vk-kh__loader[hidden]{display:none}
.vk-kh__spinner{
	width:42px;height:42px;border-radius:50%;
	border:3.5px solid var(--vk-rand);border-top-color:var(--vk-primair);
	animation:vk-kh-spin .7s linear infinite;
}
@keyframes vk-kh-spin{to{transform:rotate(360deg)}}

/* Stap-overgang */
.vk-kh__inhoud>.vk-kh__stap{animation:vk-kh-in .35s ease both}
@keyframes vk-kh-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
	.vk-kh__inhoud>.vk-kh__stap{animation:none}
	.vk-kh .vk-kh__optie:hover{transform:none}
}

/* Responsive */
@media (max-width:820px){
	.vk-kh__resultaten{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
	/* Knoppen blijven naast elkaar (wrappend), compacter en gecentreerd */
	.vk-kh__opties{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.5rem}
	.vk-kh .vk-kh__optie{
		width:auto;flex:0 1 auto;
		padding:.55rem .95rem;
		font-size:.84rem;
	}
	.vk-kh__resultaten{grid-template-columns:1fr}
	.vk-kh__cta-rij{flex-direction:column;align-items:center}
	.vk-kh .vk-kh__btn{justify-content:center;min-width:min(100%,260px)}
}