/* Van Heemskerk Configurator */
.vhc{
	--vhc-navy:#00183d;
	--vhc-navy-2:#002d73;
	--vhc-header:#00245c;   /* zelfde blauw als de topbar van de site */
	--vhc-orange:#f46606;
	--vhc-orange-dark:#d85800;
	--vhc-ink:#00183d;
	--vhc-muted:#7a7a7a;
	--vhc-line:#e4e8ef;
	--vhc-field-border:rgba(0,24,61,.41);  /* dunne navy rand, exact als de offertepopup */
	--vhc-bg:#f5f7fb;
	--vhc-radius:16px;
	font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--vhc-ink);
	line-height:1.5;
	box-sizing:border-box;
	max-width:820px;
	margin:0 auto;
}
.vhc *,.vhc *::before,.vhc *::after{box-sizing:border-box;}
.vhc [hidden]{display:none !important;}
.vhc__inner{
	background:#fff;
	border:none;
	border-top:5px solid var(--vhc-orange);   /* oranje lijn bovenaan, als de offertepopup */
	border-radius:0;
	box-shadow:2px 8px 23px 3px rgba(0,0,0,.2);
	overflow:hidden;
}
.vhc__head{
	background:#fff;
	color:var(--vhc-navy);
	padding:28px 34px 14px;
}
.vhc__title{margin:0 0 8px;font-size:24px;line-height:1.25;font-weight:700;color:var(--vhc-navy);}
.vhc__intro{margin:0;font-size:15px;max-width:60ch;color:var(--vhc-muted);}

/* Progress */
.vhc__progress{
	display:flex;list-style:none;margin:0;padding:6px 34px 20px;gap:6px;
	background:#fff;font-family:"Muro-font","Poppins",sans-serif;
}
.vhc__progress li{
	flex:1;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--vhc-muted);
	position:relative;
}
.vhc__progress li em{
	font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:1px;font-size:13px;
}
.vhc__progress li span{
	width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--vhc-bg);
	border:2px solid var(--vhc-line);display:flex;align-items:center;justify-content:center;
	font-weight:600;color:var(--vhc-muted);transition:.25s;
}
.vhc__progress li.is-active span{background:var(--vhc-orange);border-color:var(--vhc-orange);color:#fff;}
.vhc__progress li.is-active em{color:var(--vhc-navy);font-weight:500;}
.vhc__progress li.is-done span{background:var(--vhc-navy);border-color:var(--vhc-navy);color:#fff;}
.vhc__progress li.is-clickable{cursor:pointer;}
.vhc__progress li:not(.is-active):not(.is-done).is-clickable:hover span{border-color:var(--vhc-orange);color:var(--vhc-orange);}
.vhc__progress li.is-clickable:hover em{color:var(--vhc-navy);}
@media(max-width:640px){
	.vhc__progress li em{display:none;}
	.vhc__progress{padding:16px;}
}

/* Steps */
.vhc__form{padding:30px 34px 26px;}
.vhc__step{display:none;animation:vhc-fade .35s ease;}
.vhc__step.is-active{display:block;}
@keyframes vhc-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.vhc__q{margin:0 0 4px;font-size:20px;font-weight:700;color:var(--vhc-navy);}
.vhc__hint{margin:0 0 18px;color:var(--vhc-muted);font-size:14px;}

/* Option grids */
.vhc__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.vhc__grid{grid-template-columns:1fr;}}
.vhc__opt{position:relative;display:block;cursor:pointer;}
.vhc__opt input{position:absolute;opacity:0;inset:0;cursor:pointer;}
.vhc__optbox{
	display:flex;align-items:center;gap:10px;min-height:100%;
	padding:15px 16px;border:1px solid var(--vhc-field-border);border-radius:0;
	font-size:15px;font-weight:400;color:var(--vhc-navy);background:#fff;transition:.2s;height:100%;
}
.vhc__opt--check .vhc__optbox{padding-left:46px;}
.vhc__opt--check .vhc__optbox::before{
	content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
	width:20px;height:20px;border:1px solid var(--vhc-field-border);border-radius:0;background:#fff;transition:.2s;
}
.vhc__opt:hover .vhc__optbox{border-color:var(--vhc-orange);}
.vhc__opt input:focus-visible + .vhc__optbox{outline:3px solid rgba(244,102,6,.35);outline-offset:2px;}
.vhc__opt input:checked + .vhc__optbox{
	border-color:var(--vhc-orange);background:#fff7f1;color:var(--vhc-navy);
}
.vhc__opt--check input:checked + .vhc__optbox::before{
	background:var(--vhc-orange);border-color:var(--vhc-orange);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size:14px;background-position:center;background-repeat:no-repeat;
}

/* Fields / pills */
.vhc__field{margin-bottom:22px;}
.vhc__label{display:block;font-weight:600;color:var(--vhc-navy);margin-bottom:10px;font-size:15px;}
.vhc__label small{font-weight:400;color:var(--vhc-muted);}
.vhc__pills{display:flex;flex-wrap:wrap;gap:10px;}
.vhc__pills--big .vhc__optbox{padding:16px 24px;font-size:15.5px;}
.vhc__pills .vhc__opt{flex:0 1 auto;}
.vhc__pills .vhc__optbox{border-radius:0;}

/* Text inputs */
.vhc__grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
@media(max-width:640px){.vhc__grid2{grid-template-columns:1fr;}}
.vhc__input{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:400;color:var(--vhc-muted);}
.vhc__input i{color:var(--vhc-orange);font-style:normal;}
.vhc .vhc__input input{
	padding:14px 16px !important;border:1px solid var(--vhc-field-border) !important;border-radius:0 !important;
	font:inherit;font-weight:400;font-size:16px !important;color:var(--vhc-navy) !important;transition:.2s;
	background:#fff !important;width:100%;box-shadow:none !important;
}
.vhc .vhc__input input::placeholder{color:var(--vhc-muted);}
.vhc .vhc__input input:focus{outline:none;border-color:var(--vhc-orange) !important;box-shadow:none !important;}

.vhc__consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--vhc-muted);margin-top:6px;cursor:pointer;}
.vhc__consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--vhc-orange);flex:0 0 18px;}

/* Match panel */
.vhc__match{
	background:var(--vhc-bg);border:1px solid var(--vhc-field-border);border-left:4px solid var(--vhc-orange);
	border-radius:0;padding:16px 18px;margin-bottom:22px;
}
.vhc__match-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--vhc-orange);font-weight:700;}
.vhc__match-body{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.vhc__match-item{
	display:flex;align-items:center;justify-content:space-between;gap:14px;
	background:#fff;border:1px solid var(--vhc-field-border);border-radius:0;padding:12px 14px;
}
.vhc__match-item b{color:var(--vhc-navy);font-weight:600;font-size:15px;}
.vhc .vhc__match-item a{
	color:#fff !important;background:var(--vhc-navy) !important;text-decoration:none;font-size:13px;font-weight:600;
	padding:8px 14px;border-radius:999px !important;white-space:nowrap;transition:.2s;border:none;
}
.vhc .vhc__match-item a:hover{background:var(--vhc-orange) !important;}

/* Error */
.vhc__error{display:none;color:#c0392b;font-size:13.5px;font-weight:500;margin:14px 0 0;}
.vhc__error.is-visible{display:block;}

/* Nav */
.vhc__nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;}
.vhc .vhc__btn{
	font:inherit;font-weight:600;font-size:16px;border:none !important;cursor:pointer;border-radius:50px !important;
	padding:13px 30px;transition:.2s;text-transform:none;letter-spacing:normal;line-height:1.2;width:auto;
}
.vhc .vhc__btn--primary{background:var(--vhc-orange) !important;color:#fff !important;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-left:auto;}
.vhc .vhc__btn--primary:hover{background:var(--vhc-orange-dark) !important;}
.vhc .vhc__btn--primary:disabled{opacity:.6;cursor:not-allowed;}
.vhc .vhc__btn--ghost{background:transparent !important;color:var(--vhc-navy) !important;border:1px solid var(--vhc-field-border) !important;}
.vhc .vhc__btn--ghost:hover{border-color:var(--vhc-navy) !important;}

/* Thanks */
.vhc__thanks{text-align:center;padding:20px 0;}
.vhc__check{
	width:64px;height:64px;border-radius:50%;background:#eafaf0;color:#1e9e5a;
	display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 16px;font-weight:700;
}
.vhc__thanks .vhc__match-body{max-width:460px;margin:16px auto 0;}
.vhc--loading{opacity:.6;pointer-events:none;}

/* Volwaardige sectie-band waarin de configurator op de dienstpagina's staat.
   Full-width (breekt uit de content-kolom) met een lichte achtergrond, zodat het
   als een bewuste sectie oogt in plaats van een los kaartje onderaan. */
.vhc-band{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	background:var(--vhc-bg,#f5f7fb);
	padding:72px 16px;
	scroll-margin-top:80px;
}
.vhc-band .vhc{max-width:860px;}
@media(max-width:640px){ .vhc-band{padding:48px 14px;} }

/* ---- Popup / modal ---- */
.vhc-modal{position:fixed;inset:0;z-index:1000000;display:none;}
.vhc-modal.is-open{display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px;overscroll-behavior:contain;}
.vhc-modal__overlay{position:fixed;inset:0;background:rgba(0,24,61,.62);animation:vhc-fade-in .2s ease;}
.vhc-modal__dialog{position:relative;z-index:1;width:100%;max-width:880px;margin:auto;animation:vhc-pop .25s ease;}
.vhc-modal .vhc-modal__close{
	position:absolute;top:12px;right:14px;z-index:5;width:40px !important;height:40px !important;
	border:0 !important;border-radius:0 !important;background:transparent !important;color:#333 !important;
	font-size:28px !important;font-weight:400 !important;line-height:1;cursor:pointer;
	display:flex;align-items:center;justify-content:center;padding:0 !important;
	opacity:.8;transition:opacity .2s;box-shadow:none !important;text-shadow:none;
}
.vhc-modal .vhc-modal__close:hover{opacity:1;background:transparent !important;}
.vhc-modal__dialog .vhc{max-width:100%;}
@keyframes vhc-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes vhc-pop{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

body.vhc-modal-open{overflow:hidden;}
/* Zwevende widgets uit zolang de popup open is */
body.vhc-modal-open #futy-container,
body.vhc-modal-open .pxl-cursor{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}

@media(max-width:640px){
	.vhc-modal.is-open{padding:0;}
	.vhc-modal__dialog{max-width:100%;margin:0;min-height:100%;}
	.vhc-modal__dialog .vhc__inner{border-radius:0;box-shadow:none;min-height:100vh;}
	.vhc-modal .vhc-modal__close{top:10px !important;right:10px !important;}
}

/* Verberg de zwevende chat-widget (Futy) én de custom cursor-bol (The Plus Addons)
   tijdens hover over de configurator, zodat ze de opties/knoppen niet overlappen. */
#futy-container{transition:opacity .25s ease,visibility .25s ease;}
body.vhc-hide-widget #futy-container,
body.vhc-hide-widget .pxl-cursor{
	opacity:0 !important;
	visibility:hidden !important;
	pointer-events:none !important;
}