/**
 * Formulieren (contact, webform, inloggen, zoeken) en knoppen.
 */
.form-item,
.form-actions {
  margin: 0 0 var(--s-4);
}

label,
.form-item__label,
legend {
  display: block;
  font-weight: 700;
  margin-bottom: var(--s-1);
}

label.option {
  display: inline;
  font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: var(--touch);
  padding: var(--s-2) var(--s-3);
  color: var(--c-inkt);
  background: var(--c-wit);
  border: 1px solid #8c8a85;
  border-radius: var(--radius);
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--c-groen);
  vertical-align: middle;
}

.form-item .description,
.form-item__description {
  font-size: var(--fs-klein);
  opacity: 0.9;
}

.form-item--error-message {
  color: #b3261e;
}

input.error,
textarea.error,
select.error {
  border: 2px solid #b3261e;
}

/* Knoppen: hoekig, in Big John, altijd donkere tekst op groen (contrast 8,5:1). */
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--touch);
  padding: var(--s-2) var(--s-4);
  font-family: var(--f-kop);
  font-size: var(--fs-basis);
  line-height: 1.1;
  color: var(--c-inkt);
  background: var(--c-groen);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--overgang);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--c-groen-licht);
}

fieldset {
  border: 1px solid var(--c-lijn);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
}