/* 1. CSS‑variabelen */
:root {
  --bg-dark:      #323232;
  --bg-mid:       #636363;
  --text-light:   #f2f2f2;
  --text-dark:    #000;
  --error-col:    #e74c3c;
  --success-col:  #27ae60;
  --font-main:    Arial, sans-serif;
  --label-width:  130px;
  --input-padding:0.2rem;
  --radius:       3px;
  --gap-small: 0.2rem;
  --gap-medium: 0.8rem;
  --gap-large: 1.5rem;
  --error-bg:    #ffc7c1; /* lichtroze */
  --success-bg:  #b4f9c8; /* lichtgroen */
  --error-border:    var(--error-col);  /* #e74c3c */
  --success-border:  #27ae60;
}

.site-main form button {
    cursor: pointer;
    font-size: 11px;
    color: #ffffff;
    padding: 3px 10px;
    margin: -4px 0;
    background: -moz-linear-gradient(top,from(rgb(43, 43, 43)) 0%,#616161 50%,#333333 50%,#313131);
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(43, 43, 43)), color-stop(0.50, #616161), color-stop(0.50, #333333), to(#313131));
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px dotted rgba(255, 255, 255, 0.6);
    -moz-box-shadow: 0 1px 3px rgba(000,000,000,0.5),inset 0 0 2px rgba(51,51,51,1);
    -webkit-box-shadow: 0 1px 3px rgba(000, 000, 000, 0.5), inset 0 0 2px rgba(51, 51, 51, 1);
    box-shadow: 0 1px 3px rgba(000, 000, 000, 0.5), inset 0 0 2px rgba(51, 51, 51, 1);
    text-shadow: 0 -1px 0 rgba(000, 000, 000, 0.2), 0px 1px 0 rgba(0, 0, 0, 1);
}

.site-main form button:hover {
    background: -moz-linear-gradient(top,#345763 0%,#375a66 50%,#20363d 50%,#2b4852);
    background: -webkit-gradient(linear, left top, left bottom,from(#345763),color-stop(0.50, #375a66),color-stop(0.50, #20363d),to(#2b4852))
}

.site-main form button:active {
  transform: translateY(1px);
}

/* Foutveld */
input.input-error,
select.input-error {
  border: 1px solid var(--error-border) !important;
  background-color: var(--error-bg) !important;
  color: var(--text-dark) !important;       /* zwarte tekst */
}

/* Succesveld */
input.input-success,
select.input-success {
  border: 1px solid var(--success-border) !important;
  background-color: var(--success-bg) !important; /* lichtgroen */
  color: var(--text-dark) !important;             /* zwarte tekst */
}

/* Autofill – succes‑stijl */
input.input-success:-webkit-autofill,
input.input-success:-webkit-autofill:hover,
input.input-success:-webkit-autofill:focus {
  border: 1px solid var(--success-border) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--success-bg) inset !important;
  -webkit-text-fill-color: var(--text-dark) !important; /* zwart */
}

/* Autofill – error‑stijl */
input.input-error:-webkit-autofill,
input.input-error:-webkit-autofill:hover,
input.input-error:-webkit-autofill:focus {
  border: 1px solid var(--error-border) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--error-bg) inset !important;
  -webkit-text-fill-color: var(--text-dark) !important; /* zwart */
}

/* optioneel: neutrale kleur voor de “nog niks”‑tekst */
.ajax-placeholder {
  color: #aeabab !important;
  font-size: 0.5rem !important;
}