/* Fluent Forms — opmaak gelijk aan de statische formulieren.
   De Events-vinkjes van formulier 6 zitten in de donkere lijst erboven;
   Fluent houdt ze bij, maar toont ze hier niet.

   Alleen wegstoppen als het sjabloon die lijst ook echt heeft kunnen tekenen.
   PHP zet daarvoor heeft-eigen-agendalijst op de body; zonder die klasse
   blijft het veld van Fluent gewoon staan. */

.heeft-eigen-agendalijst #fluentform_6 .ff-el-group:has(input[name="checkbox[]"]),
.heeft-eigen-agendalijst #fluentform_6 .ff-el-group:has(input[data-name="checkbox"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fluentform,
.fluentform .ff-el-group,
.fluentform .ff-t-container,
.fluentform .ff-t-cell {
  max-width: none;
}

.panel__inner--smal .fluentform,
.overlay__inhoud .fluentform {
  margin-top: clamp(2rem, 3.3vw, 48px);
  text-align: left;
  color: var(--c-antraciet);
}

.fluentform .ff-el-form-top,
.fluentform .ff-el-group {
  margin: 0;
}

.fluentform .ff-el-group + .ff-el-group,
.fluentform .ff-name-field-wrapper + .ff-el-group {
  margin-top: 1rem;
}

.fluentform .ff-t-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.fluentform .ff-el-input--label {
  margin: 0 0 .375rem;
  padding: 0;
}

.fluentform .ff-el-input--label label {
  display: block;
  margin: 0;
  font-size: var(--fs-mini);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-antraciet);
}

.fluentform .ff-el-is-required.asterisk-right label::after,
.fluentform .ff-el-is-required.asterisk-left label::before {
  content: none;
}

.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform textarea {
  width: 100%;
  height: 56px;
  padding-inline: .9375rem;
  font: inherit;
  font-size: var(--fs-klein);
  color: var(--c-antraciet);
  background: var(--c-wit);
  border: 1px solid #d0d0d0;
  border-radius: 0;
  box-shadow: none;
  transition: border-color .15s ease;
}

.fluentform textarea.ff-el-form-control,
.fluentform textarea {
  height: auto;
  min-height: 152px;
  padding-block: .9375rem;
  line-height: 1.5;
  resize: vertical;
}

.fluentform .ff-el-form-control::placeholder {
  color: #9a9a9a;
}

.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible {
  border: 2px solid var(--c-zwart);
  outline: none;
  padding-inline: calc(.9375rem - 1px);
  box-shadow: none;
}

.fluentform .ff-el-form-control.ff-el-is-error,
.fluentform .ff-el-form-control.error {
  border: 2px solid var(--c-zalm);
  color: var(--c-zalm);
}

.fluentform .ff-el-is-error .error,
.fluentform .error-text,
.fluentform .text-danger,
.fluentform .ff-el-help-message {
  margin-top: .375rem;
  font-size: var(--fs-mini);
  color: var(--c-zalm);
}

.fluentform .ff-el-tc,
.fluentform .ff-el-group:has(.ff_t_c) {
  margin-top: 1.75rem;
}

.fluentform .ff-el-form-check-label.ff_tc_label,
.fluentform .ff_t_c {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: var(--fs-klein);
  line-height: 1.4;
  color: var(--c-antraciet);
}

.fluentform .ff_tc_checkbox {
  flex: 0 0 auto;
}

.fluentform .ff-el-form-check-input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--c-zwart);
}

.fluentform .ff_t_c p,
.fluentform .ff_t_c a {
  margin: 0;
}

.fluentform .ff_t_c a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fluentform .ff_submit_btn_wrapper {
  margin-top: 2rem;
  text-align: left;
}

.fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding-inline: 2.25rem;
  background: var(--c-antraciet);
  color: var(--c-wit);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-body);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus {
  background: var(--c-zwart);
  color: var(--c-wit);
}

.overlay .fluentform .ff-btn-submit,
.panel__inner--smal .fluentform .ff-btn-submit {
  width: 100%;
}

.fluentform .ff-message-success {
  margin: 1.5rem 0 0;
  font-family: var(--ff-serif);
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--c-antraciet);
  text-align: center;
  background: none;
  border: 0;
}

.admin-bar .menu-toggle { top: calc(var(--menu-top) + 32px); }
.admin-bar .site-nav { top: calc(var(--menu-top) + 46px + 32px); }

@media screen and (max-width: 782px) {
  .admin-bar .menu-toggle { top: calc(var(--menu-top) + 46px); }
  .admin-bar .site-nav { top: calc(var(--menu-top) + 46px + 46px); }
}

@media (max-width: 900px) {
  .fluentform .ff-t-container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .fluentform .ff-t-cell + .ff-t-cell .ff-el-group {
    margin-top: 1rem;
  }
}