/* Offerteformulier versie 2 (pagina offerte-aanvragen, sectie #aanvraag). Markup: inc/offerte-v2.php, script: offerte.js.
   Alles hangt onder .hxq, zodat de rest van de pagina niet verandert. Zonder JavaScript staan alle stappen onder elkaar. */
.hxq{container-type:inline-size;font:400 16px/1.6 Inter,system-ui,sans-serif;color:var(--tx)}
.hxq [hidden]{display:none!important}
.hxq .hxq-js{display:none}
.hxq--js .hxq-js{display:inline-flex}
.hxq--js .hxq-foot.hxq-js{display:flex}
.hxq--js .hxq-nojs{display:none}

/* stappen; --p (0 tot 1) is hoe ver de groene lijn loopt, gezet door offerte.js */
.hxq-stepper{display:none;position:relative;justify-content:space-between;max-width:460px;margin:0 auto 26px}
.hxq--js .hxq-stepper{display:flex}
.hxq-stepper:before,.hxq-stepper:after{content:"";position:absolute;left:44px;top:22px;height:2px}
.hxq-stepper:before{right:44px;background:var(--line)}
.hxq-stepper:after{width:calc((100% - 88px) * var(--p,0));background:var(--g);transition:width .5s}
.hxq-st{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:88px;text-align:center}
.hxq-st i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 17px Manrope,sans-serif;font-style:normal;background:var(--bg2);border:2px solid var(--line);color:var(--mut);transition:all .3s}
.hxq-st span{font:700 13px Manrope,sans-serif;color:var(--mut);white-space:nowrap}
.hxq-st.is-on i{background:var(--g);border-color:var(--g);color:#04130a;box-shadow:0 0 0 6px rgba(34,197,94,.15)}
.hxq-st.is-on span{color:#fff}
.hxq-st.is-done i{background:rgba(34,197,94,.15);border-color:var(--g);color:var(--g)}

/* pagina's */
.hxq--js .hxq-page{display:none}
.hxq--js .hxq-page.is-on{display:block;animation:hxq-in .35s ease}
.hxq-page+.hxq-page{margin-top:34px}
.hxq--js .hxq-page+.hxq-page{margin-top:0}
@keyframes hxq-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hxq-intro{color:var(--mut);font-size:15px;margin-bottom:4px}

/* vraag-rijen: smal = vraag boven de keuzes, breed = vraag links */
.hxq-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 18px;border-radius:16px;background:rgba(15,23,42,.55);border:1px solid var(--line);margin-top:14px;overflow:hidden}
.hxq-row.is-bad{border-color:rgba(248,113,113,.55)}
.hxq-lab{display:block;font:700 16px/1.4 Manrope,sans-serif;color:#fff}
.hxq-lab small{display:block;margin-top:6px;font:500 13px/1.5 Inter,sans-serif;color:var(--mut)}
.hxq-req{color:#f87171;margin-left:4px}
.hxq-rec{padding-top:52px}
.hxq-badge{position:absolute;top:0;left:0;padding:8px 22px 8px 18px;background:var(--g);color:#04130a;font:800 13px Manrope,sans-serif;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}

/* keuzes */
.hxq-opts{display:grid;gap:10px}
.hxq-opt{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:13px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.hxq-opt:hover{border-color:rgba(34,197,94,.45)}
.hxq-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.hxq-dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid rgba(148,163,184,.45);transition:all .2s}
.hxq-cb .hxq-dot{border-radius:6px}
.hxq-t{flex:1;min-width:0;font:500 15.5px/1.45 Inter,sans-serif;color:#e2e8f0}
.hxq-t small{display:block;color:var(--mut);font-size:13px;margin-top:2px}
.hxq-pop{display:none;flex:none;font:800 10px Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:rgba(34,197,94,.15);color:#86efac}
.hxq-ok{flex:none;width:22px;height:22px;border-radius:50%;background:var(--g);color:#04130a;display:none;place-items:center;font:800 12px Manrope,sans-serif}
.hxq-opt:has(input:checked){border-color:var(--g);background:rgba(34,197,94,.08);box-shadow:0 0 0 1px var(--g)}
.hxq-opt:has(input:checked) .hxq-dot{border-color:var(--g);background:radial-gradient(circle,var(--g) 0 4px,transparent 5px)}
.hxq-cb:has(input:checked) .hxq-dot{background:var(--g)}
.hxq-opt:has(input:checked) .hxq-ok{display:grid}
.hxq-opt:has(input:checked) .hxq-pop{display:none!important}
.hxq-opt:has(input:focus-visible){outline:2px solid var(--g);outline-offset:2px}

/* budget: per dienst een eigen groep bedragen, of helemaal geen budgetvraag (beheer).
   Met JavaScript is alleen wat past zichtbaar; data-off wordt gezet door de server en offerte.js. */
.hxq--js [data-off]{display:none}
.hxq-bgroup+.hxq-bgroup{margin-top:16px}
.hxq-sub{font:700 13px Manrope,sans-serif;color:var(--mut);margin-bottom:8px}

/* tekstvelden */
.hxq-in{display:block;width:100%;padding:14px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--line);color:#fff;font:400 16px Inter,sans-serif;transition:border-color .25s,box-shadow .25s}
textarea.hxq-in{min-height:96px;resize:vertical}
.hxq-in:focus{outline:0;border-color:var(--g);box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.hxq-in::placeholder{color:#64748b}
.hxq-in.is-bad{border-color:#f87171;box-shadow:0 0 0 4px rgba(248,113,113,.12)}
.hxq-fields,.hxq-pair{display:grid;gap:12px}
.hxq-err{color:#fca5a5;font-size:13px;margin-top:8px}
.hxq-alert{margin:14px 0 0;padding:14px 18px;border-radius:14px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.5);color:#fecaca;font-weight:600;font-size:15px}
.hxq-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* knoppen en onderkant */
.hxq-foot{display:flex;flex-direction:column-reverse;align-items:stretch;gap:12px;margin-top:26px}
.hxq-btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;font:700 15px/1 Manrope,sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.hxq-btn--g{background:var(--g);color:#04130a;box-shadow:0 10px 40px -10px var(--glow)}
.hxq-btn--g:hover{background:#4ade80;transform:translateY(-2px)}
.hxq-btn--o{background:transparent;border-color:var(--line);color:#e2e8f0}
.hxq-btn--o:hover{border-color:rgba(34,197,94,.45)}
.hxq-btn:disabled{opacity:.6;cursor:wait;transform:none}
.hxq-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hxq-privacy{color:var(--mut);font-size:13px;margin-top:14px}
.hxq-privacy a,.hxq-done a{color:#bbf7d0;text-decoration:underline}
.hxq-trust{margin-top:24px;padding-top:18px;border-top:1px dashed var(--line);text-align:center;color:var(--mut);font-size:14px}
.hxq-trust b{color:var(--g)}

/* bedankt */
.hxq-done{text-align:center;padding:24px 6px 6px}
.hxq-okc{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(34,197,94,.15);color:var(--g);font:800 32px Manrope,sans-serif;box-shadow:0 0 0 10px rgba(34,197,94,.06)}
.hxq-done h3{font:800 clamp(22px,3vw,28px)/1.2 Manrope,sans-serif;color:#fff}
.hxq-done p{color:var(--mut);max-width:48ch;margin:10px auto 0}

/* breder: knoppen naast elkaar, keuzes in twee kolommen (houdt elke stap op de computer kort) */
@container (min-width:420px){
  .hxq-two,.hxq-pair{grid-template-columns:1fr 1fr}
  .hxq-foot{flex-direction:row;justify-content:space-between;align-items:center}
}
@container (min-width:460px){
  .hxq-opts{grid-template-columns:1fr 1fr}
  .hxq-opt{gap:10px;padding:12px}
  .hxq-t{font-size:15px}
  .hxq-ok{display:none!important}
}
@container (min-width:640px){
  .hxq-row{grid-template-columns:190px minmax(0,1fr);gap:24px;padding:24px 26px}
  .hxq-rec{padding-top:58px}
  .hxq-lab{padding-top:12px}
  .hxq-opt{gap:14px;padding:14px 18px}
  .hxq-opt .hxq-pop{display:inline-block}
}
@container (min-width:860px){
  .hxq-ok{display:none}
  .hxq-opt:has(input:checked) .hxq-ok{display:grid!important}
}
@media(prefers-reduced-motion:reduce){.hxq *{animation:none!important;transition:none!important}}

/* Kaarten naast het formulier (inc/offerte-v2-side.php): computer links onder de titel, smal onder het formulier.
   1020px = het punt waarop de .split van het thema naar één kolom gaat. */
.hxs{display:grid;gap:16px}
.hxs--wide{margin-top:36px}
.hxs--narrow{display:none}
@media(max-width:1020px){
  .hxs--wide{display:none}
  .hxs--narrow{display:grid}
}
@media(min-width:700px) and (max-width:1020px){.hxs--narrow{grid-template-columns:1fr 1fr;align-items:start}}
.hxs-card{padding:24px 26px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line)}
.hxs h3{font:800 18px/1.25 Manrope,sans-serif;color:#fff;letter-spacing:-.01em}
.hxs-s{color:var(--mut);font-size:14px;margin-top:2px}
.hxs-glogo{font:800 24px/1 Manrope,sans-serif;letter-spacing:-.02em;margin-top:14px}
.hxs-glogo span:nth-child(1),.hxs-glogo span:nth-child(4){color:#4285f4}
.hxs-glogo span:nth-child(2),.hxs-glogo span:nth-child(6){color:#ea4335}
.hxs-glogo span:nth-child(3){color:#fbbc05}
.hxs-glogo span:nth-child(5){color:#34a853}
.hxs-score{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.hxs-score b{font:800 22px/1 Manrope,sans-serif;color:#fff}
/* sterren naar de echte score gevuld (--r = score van 0 tot 5) */
.hxs-stars{font-size:21px;line-height:1;background:linear-gradient(90deg,#fbbc05 calc(var(--r,0) / 5 * 100%),rgba(148,163,184,.35) 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hxs-stars:before{content:"\2605\2605\2605\2605\2605"}
.hxs-n{color:var(--mut);font-size:14px}
.hxs-gr a{display:inline-block;margin-top:14px;color:#bbf7d0;font-size:15px;text-decoration:underline}
.hxs-why ul{display:grid;gap:12px;margin-top:14px}
.hxs-why li{display:flex;gap:12px;font-size:15px;line-height:1.5;color:#cbd5e1}
.hxs-why li:before{content:"\2713";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(34,197,94,.15);color:var(--g);font:800 12px Manrope,sans-serif;margin-top:1px}
.hxs-me{display:flex;gap:14px;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.hxs-av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:#04130a;font:800 17px Manrope,sans-serif}
.hxs-me b{display:block;font:700 15px Manrope,sans-serif;color:#fff}
.hxs-me span{color:var(--mut);font-size:14px}
.hxs-me a{color:#bbf7d0;text-decoration:underline}
/* reviews onder de Google-score (tekst uit de reviewplugin; geen profielfoto's van Google) */
.hxs-revs{display:grid;gap:12px;margin-top:18px}
.hxs-rev{padding:14px 16px;border-radius:14px;background:rgba(2,6,23,.45);border:1px solid var(--line)}
.hxs-rev-top{display:flex;align-items:center;gap:10px}
.hxs-rev-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(66,133,244,.18);color:#93c5fd;font:800 14px Manrope,sans-serif}
.hxs-rev-who{flex:1;min-width:0}
.hxs-rev-who b{display:block;font:700 14.5px/1.3 Manrope,sans-serif;color:#fff}
.hxs-rev-who small{color:var(--mut);font-size:12.5px}
.hxs-stars--sm{font-size:15px}
.hxs-rev p{margin-top:10px;font-size:14.5px;line-height:1.6;color:#cbd5e1;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}