/* AluShip offerte-configurator (publieke testversie) */
:root{
  --groen:#0f766e;
  --groen-donker:#134e4a;
  --blauw:#0284c7;
  --rand:#e2e8f0;
  --grijs:#64748b;
  --bg:#f8fafc;
  --wit:#ffffff;
  --warn-bg:#fef3c7;
  --warn-rand:#fcd34d;
  --succes-bg:#ecfdf5;
  --succes-rand:#6ee7b7;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);
  font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:#0f172a;line-height:1.5}
.wrap{max-width:960px;margin:0 auto;padding:16px}

.hdr{display:flex;align-items:center;gap:16px;padding:14px 0 20px}
.logo{font-weight:800;font-size:22px;color:var(--groen)}
.logo .dot{color:var(--blauw);margin:0 4px}
.head-title h1{margin:0;font-size:22px}
.head-title .lead{margin:2px 0 0;color:var(--grijs);font-size:14px}

/* Voortgangs-balk */
.stappen{display:flex;flex-wrap:wrap;gap:6px;background:var(--wit);border:1px solid var(--rand);
  border-radius:10px;padding:8px;margin-bottom:12px}
.stap{flex:1;min-width:110px;padding:8px 10px;border-radius:6px;background:#f1f5f9;
  font-size:13px;color:var(--grijs);display:flex;align-items:center;gap:8px}
.stap b{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;
  border-radius:50%;background:#cbd5e1;color:#334155;font-size:12px;font-weight:700}
.stap.aan{background:var(--groen);color:#fff}
.stap.aan b{background:var(--wit);color:var(--groen)}
.stap.gedaan{background:#d1fae5;color:var(--groen-donker)}
.stap.gedaan b{background:var(--groen);color:#fff}

.paneel{background:var(--wit);border:1px solid var(--rand);border-radius:12px;padding:20px;
  margin-bottom:14px;box-shadow:0 1px 2px rgba(15,23,42,.03)}
.intro h2{margin:0 0 4px;font-size:18px}
.intro p{margin:0 0 14px;color:var(--grijs);font-size:14px}
.intro .warn{background:var(--warn-bg);border:1px solid var(--warn-rand);border-radius:8px;
  padding:10px 12px;color:#78350f;font-size:13.5px}
.intro.succes{background:var(--succes-bg);border:1px solid var(--succes-rand);border-radius:8px;
  padding:16px;margin-bottom:14px}
.intro.succes h2{color:var(--groen-donker);margin-bottom:6px}
.intro.succes p{color:var(--groen-donker)}

/* Modellen-grid */
.modellen{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;
  margin-bottom:12px}
.model-kaart{background:#f8fafc;border:2px solid var(--rand);border-radius:10px;padding:12px;
  cursor:pointer;transition:all .15s;position:relative}
.model-kaart:hover{border-color:var(--blauw);background:#eff6ff}
.model-kaart.aan{border-color:var(--groen);background:var(--succes-bg);box-shadow:0 0 0 3px #ccfbf1}
.model-kaart .naam{font-weight:700;font-size:15px;color:#0f172a}
.model-kaart .serie{color:var(--grijs);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.model-kaart .prijs{font-weight:700;color:var(--groen-donker);margin-top:6px;font-size:14px}
.model-kaart .specs{font-size:11.5px;color:var(--grijs);margin-top:4px;line-height:1.35}
.model-kaart .aanbevolen{position:absolute;top:6px;right:6px;font-size:10px;
  background:var(--blauw);color:#fff;padding:2px 6px;border-radius:4px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px}
.model-kaart.aan::after{content:'✓';position:absolute;bottom:8px;right:10px;color:var(--groen);
  font-weight:800;font-size:20px}

/* Accessoires per groep */
.groep{border:1px solid var(--rand);border-radius:8px;margin-bottom:8px;overflow:hidden}
.groep-kop{padding:10px 14px;background:#f1f5f9;font-weight:700;font-size:14px;
  display:flex;justify-content:space-between;cursor:pointer;user-select:none}
.groep-kop:hover{background:#e2e8f0}
.groep-body{padding:6px}
.groep-body.dicht{display:none}
.acc-regel{display:grid;grid-template-columns:24px 1fr 120px;gap:10px;
  padding:7px 8px;border-radius:6px;align-items:center;font-size:13.5px}
.acc-regel:hover{background:#f8fafc}
.acc-regel.std{background:#ecfeff;color:#155e75}
.acc-regel.niet{opacity:.4;pointer-events:none}
.acc-regel input[type=checkbox]{width:18px;height:18px;accent-color:var(--groen);cursor:pointer}
.acc-regel .naam{font-weight:500}
.acc-regel .oms{color:var(--grijs);font-size:12px;margin-top:1px}
.acc-regel .prijs{text-align:right;font-weight:600;color:var(--groen-donker);white-space:nowrap}
.acc-regel .prijs.std{color:#0891b2}
.acc-regel .prijs .btw{color:var(--grijs);font-size:11px;font-weight:400}

/* Actie-balk */
.actie-balk{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-top:14px;margin-top:14px;border-top:1px solid var(--rand);flex-wrap:wrap}
.live-totaal{text-align:right;flex:1}
.live-totaal .bedrag{font-size:17px;font-weight:700;color:var(--groen-donker)}
.live-totaal .btw{color:var(--grijs);font-size:12px;font-weight:400}
.muted{color:var(--grijs);font-size:13px}

.knop{background:#f1f5f9;color:#334155;border:1px solid var(--rand);padding:9px 16px;
  border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .1s}
.knop:hover{background:#e2e8f0}
.knop:disabled{opacity:.4;cursor:not-allowed}
.knop.primair{background:var(--groen);color:#fff;border-color:var(--groen);font-weight:600}
.knop.primair:hover{background:var(--groen-donker);border-color:var(--groen-donker)}

/* Overzicht (stap 3) */
.overz-groep{margin-bottom:14px}
.overz-groep h3{margin:0 0 6px;font-size:14px;color:var(--grijs);text-transform:uppercase;
  letter-spacing:.5px;font-weight:600}
.overz-regel{display:flex;justify-content:space-between;padding:6px 0;
  border-bottom:1px dashed #e2e8f0;font-size:14px}
.overz-regel:last-child{border-bottom:0}
.overz-regel .naam{flex:1}
.overz-regel .prijs{font-weight:600}
.overz-tot{margin-top:14px;padding:14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px}
.overz-tot .rij{display:flex;justify-content:space-between;padding:3px 0}
.overz-tot .rij.tot{border-top:1px solid #86efac;margin-top:6px;padding-top:8px;font-size:18px;font-weight:800;color:var(--groen-donker)}
.overz-tot .rij .lb{color:#065f46}
.overz-tot .rij .val{font-variant-numeric:tabular-nums}

/* Contact-formulier */
#contact-form label{display:block;font-size:13px;color:#334155;font-weight:500;margin-bottom:10px}
#contact-form input[type=text],
#contact-form input[type=email],
#contact-form input[type=tel],
#contact-form textarea{width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:6px;
  font-size:14px;font-family:inherit;margin-top:3px;background:#fff}
#contact-form input:focus,#contact-form textarea:focus{outline:none;border-color:var(--groen);
  box-shadow:0 0 0 3px #ccfbf1}
#contact-form .rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.privacy{font-size:13px;color:var(--grijs);padding:10px 12px;background:#f8fafc;
  border:1px solid var(--rand);border-radius:6px;margin:10px 0}
.privacy input{margin-right:6px;vertical-align:middle;accent-color:var(--groen)}

/* Honeypot verbergen */
.honingpot{position:absolute;left:-9999px;height:0;overflow:hidden;visibility:hidden}

/* Footer */
.ft{margin-top:18px;padding:14px;background:var(--wit);border:1px solid var(--rand);
  border-radius:10px;font-size:12.5px;text-align:center;line-height:1.5}
.ft .muted{color:var(--grijs)}

@media (max-width:600px){
  #contact-form .rij{grid-template-columns:1fr}
  .stap{min-width:0;padding:6px 8px;font-size:11.5px}
  .stap b{width:18px;height:18px;font-size:10px}
  .acc-regel{grid-template-columns:24px 1fr 90px}
}