/* 9. Forms */
.site-main form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-medium);
    width: 375px;
}
.form-row {
  display: grid;
  grid-template-columns: var(--label-width) 1fr;
  column-gap: var(--gap-small);
  row-gap: var(--gap-small);
}
.form-row label,
.form-row input,
.form-row select {
  align-self: center;  /* centreert alleen in hun rij, niet in de hele grid */
  font-size: 0.6rem;
}
/* maak alle dropdowns iets kleiner */
.form-row select {
  font-size: 0.6rem;    /* of wat jij wilt */
}

/* én voor de opties zelf */
.form-row select option {
  font-size: 0.7rem;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
}
.form-row input,
.form-row select {
  grid-column: 2;
  grid-row: 1;
  padding: var(--input-padding);
  background: #484848;
  color: #fff;
  border: 1px solid #333;
  border-radius: var(--radius);
  font-size: 0.5rem;
}
.form-row .field-error,
.form-row .ajax-error,
.form-row .ajax-success {
  grid-column: 2;
  grid-row:    2;
  margin:      0; /* of: margin-top: var(--gap-small); */
  font-size:   0.5rem;
  display:     block;
  height: 10px;
}
.field-error,
.ajax-error {
  color: var(--error-col);
}
.field-success,
.ajax-success {
  color: var(--success-col);
}
.success-msg {
  color: var(--success-col);
  font-size: 1rem;
  text-align: center;
  margin-bottom: 10px;
}
/* Captcha‐rij: drie kolommen (label, afbeelding, foutmelding) */
body.page-register .form-row.captcha-row {
  /* label, image, error */
  grid-template-columns: var(--label-width) auto 1fr;
  grid-template-rows: auto auto; /* rij 1: label+img+error, rij 2: invoer */
}

/* Label in kolom 1, rij 1 */
body.page-register .form-row.captcha-row > label {
  grid-column: 1;
  grid-row:    1;
}

/* Afbeelding in kolom 2, rij 1 */
body.page-register .form-row.captcha-row > img {
  grid-column: 2;
  grid-row:    1;
  margin-bottom: var(--gap-small);
  margin-top: var(--gap-small);
}

/* Foutmelding naast de afbeelding: kolom 3, rij 1 */
body.page-register .form-row.captcha-row .field-error {
  grid-column: 3;
  grid-row:    1;
  margin: 13px 0px 0px -40px;
}

/* Input onder de afbeelding: kolom 2, rij 2 */
body.page-register .form-row.captcha-row input#captcha {
  grid-column: 2;
  grid-row:    2;
  width: 230%;
}