/* EV Offerte – Clean styling (thema-proof, iOS switches, radio's onder elkaar) */

#ev-offerte-form {
  --ev-text:#111827;
  --ev-bg:#ffffff;
  --ev-muted:#6b7280;
  --ev-border:#e5e7eb;

  background:var(--ev-bg) !important;
  color:var(--ev-desc) !important; /* standaard lopende tekst */
  padding:28px !important;
  border-radius:14px !important;
  max-width:720px !important;
  margin:0 auto !important;
  box-shadow:0 6px 24px rgba(0,0,0,.08) !important;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
}

/* Koppen */
#ev-offerte-form h3{
  font-size:20px !important;
  margin:6px 0 18px !important;
  font-weight:800 !important;
  color:var(--ev-title) !important;
  border:0 !important;
  padding:0 !important;
}
#ev-offerte-form .ev-group-title{
  font-size:16px !important;
  font-weight:700 !important;
  margin:14px 0 10px !important;
  color:var(--ev-title) !important;
}

/* Wrapper per veldgroep */
#ev-offerte-form .ev-field{ margin-bottom:18px !important; }

/* Tekstlabels */
#ev-offerte-form .ev-field.text label,
#ev-offerte-form .ev-field.file label,
#ev-offerte-form .ev-field.textarea label{
  display:block !important;
  font-size:14px !important;
  font-weight:700 !important;
  margin:0 0 6px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--ev-desc) !important;
}

/* Inputs */
#ev-offerte-form input[type="text"],
#ev-offerte-form input[type="email"],
#ev-offerte-form input[type="tel"],
#ev-offerte-form input[type="number"],
#ev-offerte-form textarea,
#ev-offerte-form input[type="file"]{
  width:100% !important;
  padding:11px 12px !important;
  border:1px solid #d1d5db !important;
  border-radius:10px !important;
  background:#fff !important;
  color:var(--ev-text) !important;
  font-size:15px !important;
  font-family:inherit !important;
  margin:4px 0 0 !important;
  transition:border .15s ease, box-shadow .15s ease !important;
  box-sizing:border-box !important;
}
#ev-offerte-form input:focus,
#ev-offerte-form textarea:focus{
  border-color:var(--ev-accent) !important;
  box-shadow:0 0 0 3px rgba(11,122,62,.12) !important;
  outline:none !important;
}

/* iOS-switches (radios) */
#ev-offerte-form input[type="radio"]{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:46px !important;
  height:26px !important;
  border-radius:9999px !important;
  background:#d1d5db !important;
  position:relative !important;
  cursor:pointer !important;
  transition:background .2s ease !important;
  flex:0 0 46px !important;
  margin:0 !important;
  outline:none !important;
  border:none !important;
}
#ev-offerte-form input[type="radio"]::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  left:3px !important;
  transform:translateY(-50%) !important;
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.25) !important;
  transition:left .2s ease !important;
}
#ev-offerte-form input[type="radio"]:checked{ background:var(--ev-accent) !important; }
#ev-offerte-form input[type="radio"]:checked::after{ left:calc(100% - 23px) !important; }

/* Radio-tegels: opties ONDER ELKAAR */
#ev-offerte-form .ev-field.radio{ display:block !important; }
#ev-offerte-form .ev-field.radio label{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  padding:12px 14px !important;
  margin:0 0 10px !important;
  border:1px solid var(--ev-border) !important;
  border-radius:12px !important;
  background:#fff !important;
  cursor:pointer !important;
  transition:border .2s ease, background .2s ease, box-shadow .2s ease !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--ev-desc) !important;
}
#ev-offerte-form .ev-field.radio label:hover{
  border-color:var(--ev-accent) !important;
  background:#f9fafb !important;
  box-shadow:0 2px 8px rgba(11,122,62,.08) !important;
}

/* Knoppen */
#ev-offerte-form .ev-actions{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-top:20px !important;
}
#ev-offerte-form .button,
#ev-offerte-form button,
#ev-offerte-form input[type="submit"],
#ev-offerte-form .ev-actions .button{
  font-size:15px !important;
  padding:12px 20px !important;
  border-radius:12px !important;
  font-weight:700 !important;
  background:var(--ev-accent) !important;
  border:1px solid var(--ev-accent) !important;
  color:var(--ev-on-accent) !important;
  cursor:pointer !important;
  transition:background .2s ease, transform .1s ease, box-shadow .2s ease !important;
  text-decoration:none !important;
  display:inline-block !important;
}
#ev-offerte-form .button:hover,
#ev-offerte-form button:hover,
#ev-offerte-form input[type="submit"]:hover,
#ev-offerte-form .ev-actions .button:hover{
  background:var(--ev-accent-600) !important;
  color:var(--ev-on-accent) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 4px 14px rgba(11,122,62,.22) !important;
}

/* Secondary (outline) */
#ev-offerte-form .button.secondary{
  background:#fff !important;
  color:var(--ev-accent) !important;
  border:1px solid var(--ev-accent) !important;
}
#ev-offerte-form .button.secondary:hover{
  background:#f3f4f6 !important;
  color:var(--ev-accent) !important;
}

/* Footnote */
#ev-offerte-form .ev-footnote{
  font-size:13px !important;
  color:var(--ev-desc) !important;
  background:#f9fafb !important;
  padding:12px !important;
  border-radius:10px !important;
  border:1px solid var(--ev-border) !important;
  margin-top:14px !important;
}

/* Step animatie */
#ev-offerte-form .ev-step{ animation:evFade .22s ease; }
@keyframes evFade{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }