/* Sloopautokopers: de aanvraagstraat en het eigen gezicht (08-10-2026).
   Kentekenplaat, bod-venster, tegels, indicatie, sticky kentekenbalk, no-JS.
   Kleuren uit sh.css (diepgroen drager, oranje accent). */

/* ---------- hero: een kolom met de kentekenplaat binnen het eerste scherm ---------- */
.hero-duo.hero-enkel{grid-template-columns:1fr;max-width:860px;padding-bottom:46px}
.hero-enkel .hero-tekst{text-align:center}
.hero-enkel .hero-titel,.hero-enkel h1{margin-inline:auto;max-width:760px}
.hero-enkel .hero-sub{margin-inline:auto;max-width:640px}
.hero-enkel .hero-vinkjes{margin:18px auto 0}
@media(min-width:1024px){
  .hero-duo.hero-enkel{grid-template-columns:1fr}
  .hero-duo.hero-enkel .hero-tekst{text-align:center}
  .hero-enkel .hero-titel{margin-inline:auto;max-width:760px}
  .hero-enkel .hero-sub,.hero-enkel .hero-vinkjes{margin-inline:auto}
}
.hero.hero-home{min-height:min(720px,100svh)}
.hero-home .hero-titel{font-size:clamp(30px,4.4vw,54px);line-height:1.12;color:#fff}
.hero-plaat{margin:22px auto 0;max-width:620px}
.hero-label{font-family:'Nunito',sans-serif;font-weight:800}
.geldhero .hero-foto::after,.hero-vloer .hero-dia::after{
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.70) 0%,rgba(var(--ink-rgb),.58) 45%,rgba(var(--ink-rgb),.78) 100%)}
@media(max-width:640px){
  .geldhero .hero-duo{padding-bottom:30px}
  .geldhero h1,.hero-home .hero-titel{font-size:27px;line-height:1.2}
  .hero-sub{font-size:15.5px!important}
  .hero-enkel .hero-vinkjes li{font-size:14.5px;margin-bottom:6px}
  .hero.hero-home{min-height:0}
}

/* ---------- de gele Nederlandse kentekenplaat ---------- */
.plaat-form{display:flex;gap:12px;align-items:stretch;justify-content:center;width:100%}
.plaat{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;max-width:380px;height:62px;
  background:#f7c600;border:3px solid #111;border-radius:10px;overflow:hidden;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55);cursor:text}
.plaat-nl{flex:0 0 40px;background:#0b3d91;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.plaat-nl svg{width:24px;height:24px}
.plaat-nl i{font-style:normal;font:800 13px/1 Arial,Helvetica,sans-serif;color:#fff;letter-spacing:.04em}
.plaat input{flex:1 1 auto;min-width:0;width:100%;border:0;background:transparent;outline:none;
  font:800 29px/1 'Arial Black',Arial,Helvetica,sans-serif;letter-spacing:.06em;color:#111;
  text-transform:uppercase;text-align:center;padding:0 10px}
.plaat input::placeholder{color:rgba(17,17,17,.38)}
.plaat:focus-within{box-shadow:0 0 0 4px rgba(232,118,26,.55),0 10px 26px -10px rgba(0,0,0,.55)}
.plaat-knop{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;font-size:17px;
  padding:0 24px;min-height:62px;border-radius:12px!important;box-shadow:0 10px 26px -8px rgba(191,84,9,.6)}
@media(max-width:640px){
  .plaat-form{flex-direction:column;align-items:center;gap:10px}
  .plaat{width:100%;max-width:340px;height:58px}
  .plaat input{font-size:26px}
  .plaat-knop{width:100%;max-width:340px;min-height:54px;font-size:16.5px}
}

/* tussenblok en onderaan */
.plaat-blok{background:var(--tint);border:2px solid var(--salie);border-radius:var(--r-kaart);
  padding:clamp(22px,3vw,34px);text-align:center;margin:34px auto;max-width:860px}
.plaat-blok .plaat-blok-kop{font-size:clamp(22px,2.4vw,28px);margin-bottom:6px;color:var(--ink)}
.plaat-blok p{margin:0 auto 16px;max-width:620px;color:var(--tekst)}
.plaat-blok .plaat-gerust{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:14px 0 0;font-size:14.5px;color:var(--ink)}
.plaat-blok .plaat-gerust svg{width:15px;height:15px;vertical-align:-2px;margin-right:2px}
.cta-plaat{background:var(--petrol);padding:clamp(40px,6vw,72px) 0}
.cta-plaat .plaat-blok{background:transparent;border:0;margin:0 auto}
.cta-plaat .plaat-blok-kop,.cta-plaat .plaat-blok p,.cta-plaat .plaat-gerust{color:#fff}
.cta-plaat .plaat-gerust svg path{stroke:#7ce0a3}

/* ---------- bod-venster ---------- */
.bod-dialoog{border:0;padding:0;width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);
  border-radius:26px;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:auto;margin:auto}
.bod-dialoog::backdrop{background:rgba(8,29,21,.62);backdrop-filter:blur(2px)}
.bod-sluit{position:sticky;top:10px;float:right;margin:10px 10px 0 0;width:40px;height:40px;border-radius:50%;
  border:0;background:var(--tint);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;z-index:3}
.bod-sluit:hover{background:var(--salie)}
html.bod-open{overflow:hidden}
@media(max-width:640px){
  .bod-dialoog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
}
.bod-inline{max-width:640px;margin:0 auto;background:#fff;border-radius:26px;box-shadow:0 26px 60px -18px rgba(var(--ink-rgb),.3)}
.calc[data-bod]{text-align:left}
.calc[data-bod] .calc-kop{font-size:clamp(23px,2.6vw,29px);color:var(--ink);margin:2px 0 14px}
.calc[data-bod] h3{font-size:21px;color:var(--ink)}
.calc[data-bod] .eyebrow{margin-bottom:2px}
.calc[data-bod] .calc-stap-blok{min-height:250px}
.calc[data-bod] .calc-voortgang span{font-size:0}
.calc[data-bod] .plaat-wizard{max-width:100%;margin:6px 0 4px;box-shadow:none}
@media(max-width:640px){.calc[data-bod]{text-align:center}.calc[data-bod] .calc-stap-blok{min-height:0}}

/* tegels als radioknop: groot en goed aan te tikken */
.bod-tegel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px}
.bod-tegel input{position:absolute;opacity:0;pointer-events:none}
.bod-tegel b{font-size:15px!important;font-weight:800!important}
.bod-tegel small{display:block;font-size:12.5px;color:var(--tekst);margin-top:3px;line-height:1.3}
.bod-tegel:has(input:checked){border-color:var(--accent-licht);background:rgba(232,118,26,.10)}
.bod-tegel:has(input:focus-visible){outline:3px solid rgba(232,118,26,.5);outline-offset:2px}
.calc-tegels.drie{grid-template-columns:1fr}
.calc-tegels.twee{grid-template-columns:1fr 1fr}
@media(min-width:641px){.calc-tegels.drie{grid-template-columns:repeat(3,1fr)}}
.calc[data-bod] .veld{margin-top:12px}
.calc[data-bod] .veld label,.bod-dagen legend{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:5px;text-align:left}
.calc[data-bod] .veld input,.calc[data-bod] .veld textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid #dfe7e2;border-radius:12px;background:#fff}
.calc[data-bod] .veld input:focus,.calc[data-bod] .veld textarea:focus{outline:none;border-color:var(--petrol)}
.calc[data-bod] .form-rij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.calc[data-bod] .form-rij{grid-template-columns:1fr}}
.bod-aanlevering{margin-top:16px}
.bod-zonder{margin-top:10px}
.tekstknop{background:none;border:0;padding:0;font:inherit;font-size:14.5px;color:var(--petrol);text-decoration:underline;cursor:pointer;text-align:left}
.bod-auto{margin-top:12px;border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.45;text-align:left}
.bod-auto b{display:block;color:var(--ink);font-size:16px}
.bod-auto span{display:block;color:var(--tekst)}
.bod-auto .tekstknop{margin-top:6px;font-size:13.5px}
.bod-auto.gevonden{background:var(--tint);border:1.5px solid var(--salie)}
.bod-auto.niet{background:#fff4ea;border:1.5px solid #f3c9a3}
.bod-auto.zonder{background:var(--tint2);border:1.5px solid #f0d9bd}
.bod-let{margin-top:6px;font-size:13.5px}
.bod-indicatie{text-align:center;padding:10px 0}
.bod-bedrag{font:900 clamp(40px,7vw,56px)/1.05 'Nunito',sans-serif;color:var(--petrol);margin:6px 0 2px}
.bod-bedrag.bod-gratis,.bod-bedrag.bod-persoonlijk{font-size:clamp(30px,5vw,40px)}
.bod-label{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-tekst);
  border:1.5px solid var(--accent-licht);border-radius:999px;padding:3px 12px}
.bod-regel{margin:14px auto 0;max-width:460px;font-size:15px;color:var(--tekst)}
.bod-zeker{margin:10px auto 0;max-width:460px;font-size:15px;font-weight:700;color:var(--ink)}
.bod-dagen{border:0;padding:0;margin:14px 0 4px}
.bod-dagen legend{margin-bottom:8px}
.bod-dag{display:inline-block;margin:0 6px 6px 0}
.bod-dag input{position:absolute;opacity:0;pointer-events:none}
.bod-dag span{display:inline-grid;place-items:center;width:46px;height:42px;border:1.5px solid #dfe7e2;border-radius:12px;
  font-weight:800;text-transform:capitalize;cursor:pointer;color:var(--ink);background:#fff}
.bod-dag input:checked + span{border-color:var(--accent-licht);background:rgba(232,118,26,.12)}
.bod-dag input:focus-visible + span{outline:3px solid rgba(232,118,26,.5)}
.calc[data-bod] .calc-fotoknop{margin-top:12px}
.calc[data-bod] .calc-volgende{border-radius:999px;font-family:'Nunito',sans-serif;font-weight:800;font-size:17.5px}

/* ---------- sticky kentekenbalk (mobiel) en de zwevende knop linksonder ---------- */
.plaat-balk{display:none}
@media(max-width:900px){
  .mobiel-balk{right:auto!important;left:12px}
  .mobiel-balk .zwevend-knop{flex:0 0 auto!important;padding:13px 20px!important;border-radius:999px!important;
    background:var(--accent)!important;color:#fff!important;box-shadow:0 12px 26px -8px rgba(0,0,0,.45)}
  .mobiel-balk.weg{opacity:0;pointer-events:none;transform:translateY(20px)}
  .mobiel-balk{transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .plaat-balk{display:block;position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--petrol);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -12px rgba(0,0,0,.45);
    transform:translateY(110%);transition:transform .35s var(--ease)}
  .plaat-balk.zichtbaar{transform:none}
  .plaat-balk .plaat-form{flex-direction:row;gap:8px}
  .plaat-balk .plaat{height:48px;max-width:none;border-width:2px;box-shadow:none}
  .plaat-balk .plaat-nl{flex-basis:30px}
  .plaat-balk .plaat-nl svg{width:18px;height:18px}
  .plaat-balk .plaat input{font-size:21px}
  .plaat-balk .plaat-knop{width:auto;min-height:48px;padding:0 14px;font-size:15px;flex:0 0 auto;box-shadow:none}
  body{padding-bottom:0}
}

/* ---------- plaats- en regiopagina's ---------- */
.kernen{margin:20px 0 6px;text-align:center;line-height:2.1}
.kernen b{display:block;color:var(--ink);margin-bottom:4px}
.kern-chip{display:inline-block;background:var(--tint);border:1px solid var(--salie);border-radius:999px;padding:2px 12px;margin:0 3px 6px;font-size:14.5px;color:var(--ink)}
.feiten-balk b{font-family:'Nunito',sans-serif}
.stappen.vijf-stappen{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.stappen.vijf-stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.stappen.vijf-stappen{grid-template-columns:1fr}}
.bedankt-stappen{text-align:left;max-width:640px;margin:16px auto 0;padding-left:22px}
.bedankt-stappen li{margin-bottom:8px}

/* ---------- vriendelijke, ronde vormen ---------- */
.kaart,.stap,.faq details,.kortblok,.tussen-cta,.silo-kolom{border-radius:var(--r-kaart)}
.knop{border-radius:999px}
.eyebrow-pill{border-radius:999px}
.usp-c b{font-family:'Nunito',sans-serif;font-weight:900}

/* ---------- zonder JavaScript: alles zichtbaar, gewoon formulier ---------- */
.no-js .calc[data-bod] .calc-stap{display:block;margin-bottom:26px}
.no-js .js-alleen,.no-js .calc-voortgang,.no-js .calc-stapnr,.no-js .calc-terug,.no-js .bod-dialoog{display:none!important}
.no-js .bod-tegel input{position:static;opacity:1;pointer-events:auto;margin-bottom:6px}
.no-js .bod-dag input{position:static;opacity:1}
.no-js .plaat-balk{display:none!important}

@media print{.plaat-form,.plaat-blok,.cta-plaat,.bod-dialoog,.plaat-balk,.mobiel-balk{display:none!important}}
.hero-titel,.geldhero h1,.hero h1{text-transform:none!important;letter-spacing:-.005em}
/* oneven aantal tegels: de laatste over de volle breedte, geen gat */
.calc[data-bod] .calc-tegels:not(.drie):not(.twee) > .bod-tegel:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:561px){.calc[data-bod] .calc-tegels:not(.drie):not(.twee){grid-template-columns:repeat(2,1fr)}}
.bod-dagen{display:flex;flex-wrap:wrap;gap:6px}
.bod-dagen legend{flex:0 0 100%;width:100%}
.bod-dag{flex:1 1 0;margin:0;min-width:40px}
.bod-dag span{width:100%}
.usp-binnen.usp-cijfers{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;text-align:center}
@media(max-width:760px){.usp-binnen.usp-cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bod-sectie{padding-top:clamp(20px,3vw,40px)!important}
@media(max-width:640px){
  .geldhero h1{font-size:25px}
  .calc[data-bod]{padding:22px 16px}
}