/* Conditional field visibility — duplicated in embed-form.css (different delivery context) */
.wm-form-field--conditional {
  display: none;
}

.wm-form-field--conditional.wm-form-field--visible {
  display: block;
}

.form-options-stacked {
  display: block;
}

.form-options-stacked > label {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-bottom: 0.35em;
}

.form-options-stacked.formgrid > label {
  grid-column: span 3;
}

/* Checkbox-group "Kolommen" (x-columns): the options wrapper is a nested
   .formgrid (3 cols by default); a modifier picks 2/3/4 instead. Self-contained
   responsive — phones always stack — so it works regardless of the separate
   nested-formgrid mobile fix. Duplicated in embed-form.css (embeds serve only
   that file). */
.formgrid.wm-options-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.formgrid.wm-options-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.formgrid.wm-options-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 560px) {
  .formgrid.wm-options-cols-2,
  .formgrid.wm-options-cols-3,
  .formgrid.wm-options-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* "Other" text input — duplicated in embed-form.css (different delivery context) */
.wm-other-wrap {
  margin-top: 0.5em;
}

.wm-other-wrap input[type="text"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}