/* ————————————————————————————— */
/* FORMULIER & VELDEN — NIET-FOOTER */
/* ————————————————————————————— */

.zpform-outer {
  width: 100% !important;
  max-width: none !important;
  font-family: "Mulish", Arial, sans-serif;
  color: #333333; /* tekstkleur */
}

/* Labels */
.zpform-outer .zpform-label-container label {
  font-size: 1em;
  font-weight: inherit;
  color: #333333;
  margin-bottom: 0.3em;
  display: block;
}

/* Invoervelden */
.zpform-outer input[type="text"],
.zpform-outer input[type="email"],
.zpform-outer input[type="tel"],
.zpform-outer input[type="number"],
.zpform-outer select,
.zpform-outer textarea {
  background-color: transparent !important;
  border: 1px solid #233f8f !important;
  border-radius: 4px;
  color: #333333 !important;
  padding: 0.6em 0.8em;
  font-size: 1em;
  box-sizing: border-box;
}

/* Focus-staat */
.zpform-outer input:focus,
.zpform-outer select:focus,
.zpform-outer textarea:focus {
  border: 1px solid #333333 !important;
  outline: none;
  box-shadow: 0 0 4px rgba(51, 51, 51, 0.35);
  background-color: transparent !important;
}

/* Knoppen */
.zpform-outer .zpform-button input[type="submit"],
.zpform-outer .zpform-button input[type="reset"] {
  background-color: #0077cc !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  font-family: "Mulish", Arial, sans-serif !important;
  font-weight: bold !important;
  text-transform: lowercase !important;
  font-size: inherit !important;
  height: 55px !important;
  line-height: 55px !important;
  padding: 0 2em !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease-in-out !important;
  box-sizing: border-box !important;
}

/* Hover */
.zpform-outer .zpform-button input[type="submit"]:hover,
.zpform-outer .zpform-button input[type="reset"]:hover {
  background-color: #005fa3 !important;
}

/* Reset-knop (optioneel verbergen) */
.zpform-outer .zpform-button input[type="reset"] {
  background-color: #cccccc !important;
  color: #333333 !important;
}
.zpform-outer input[type="reset"] {
  visibility: hidden !important; /* of display: none !important; */
}

/* h2 verbergen */
.zpform-container.zpform-topspace > div > h2.zpheading.zpheading-align-left {
  display: none !important;
}


/* ————————————————————————————— */
/* FORMULIER & VELDEN — FOOTER */
/* ————————————————————————————— */

.theme-footer-area .zpform-outer {
  width: 100% !important;
  max-width: none !important;
  font-family: "Mulish", Arial, sans-serif;
  color: #333333;
}

/* Labels */
.theme-footer-area .zpform-outer .zpform-label-container label {
  font-size: 1em;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.3em;
  display: block;
}

/* Invoervelden */
.theme-footer-area .zpform-outer input[type="text"],
.theme-footer-area .zpform-outer select {
  background-color: transparent !important;
  border: 1px solid #ffffff !important;
  border-radius: 4px;
  color: #ffffff !important;
  padding: 0.6em 0.8em;
  font-size: 1em;
  box-sizing: border-box;
}

/* Focus-staat */
.theme-footer-area .zpform-outer input[type="text"]:focus,
.theme-footer-area .zpform-outer select:focus {
  border: 1px solid #ffffff !important;
  outline: none;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  background-color: transparent !important;
}

/* Knoppen */
.theme-footer-area .zpform-outer .zpform-button input[type="submit"],
.theme-footer-area .zpform-outer .zpform-button input[type="reset"] {
  background-color: #0077cc !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important;
  font-family: "Mulish", Arial, sans-serif !important;
  font-weight: bold !important;
  text-transform: lowercase !important;
  font-size: inherit !important;
  height: 55px !important;
  line-height: 55px !important;
  padding: 0 2em !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease-in-out !important;
  box-sizing: border-box !important;
}

/* Hover */
.theme-footer-area .zpform-outer .zpform-button input[type="submit"]:hover,
.theme-footer-area .zpform-outer .zpform-button input[type="reset"]:hover {
  background-color: #005fa3 !important;
}

/* Reset-knop */
.theme-footer-area .zpform-outer .zpform-button input[type="reset"] {
  background-color: #cccccc !important;
  color: #333333 !important;
}

/* Reset-knop verbergen */
.theme-footer-area .zpform-outer input[type="reset"] {
  visibility: hidden !important; /* of display: none !important; */
}

/* h2 verbergen */
.theme-footer-area .zpform-container.zpform-topspace > div > h2.zpheading.zpheading-align-left {
  display: none !important;
}
/*IN FORMULIEREN TEKSTLABELS BOVEN DE INVOERVELDEN*/

/* Zorg dat verborgen velden verborgen blijven */
.zpform-outer li[style*="display:none"],
.zpform-outer li.hidden {
  display: none !important;
}

/* Labels boven velden voor zichtbare velden */
.zpform-outer li:not([style*="display:none"]) .zpform-label-container {
  display: block !important;
  white-space: nowrap !important;
}

.zpform-outer li:not([style*="display:none"]) .zpform-field-container {
  display: block !important;
  margin-top: 0.25em !important;
}

/* li zelf als kolomflex voor zichtbare velden */
.zpform-outer li:not([style*="display:none"]) {
  display: flex !important;
  flex-direction: column !important;
}

/* Breedte-instelling (optioneel) */
.zpform-outer li:not([style*="display:none"]) .zpform-label-container,
.zpform-outer li:not([style*="display:none"]) .zpform-field-container {
  width: 100% !important;
}