/* =========================================================
   contact_forms_v2  — geport vanuit het ECG project
   Plain CSS (rem→px omgerekend), tokens gemapt op de
   Verloskundige-praktijk-Putten kleuren.
   ========================================================= */

.contact-form--v2 {
  /* light variant (standaard) */
  --form-text-color: #434633;
  --form-placeholder-color: rgba(67, 70, 51, 0.5);
  --form-border-color: rgba(67, 70, 51, 0.2);
  --form-border-color-hover: rgba(67, 70, 51, 0.45);
  --form-border-active-hover: var(--m-color-dark, #af4838);
  --form-label-color: var(--m-color-dark, #af4838);
  --form-label-opa: 0.6;
  --error-empty: #c0392b;
  --error-invalid: #e67e22;
  --bezier: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* dark / op-foto variant */
.contact-form--v2.diapositive {
  --form-text-color: #ffffff;
  --form-placeholder-color: rgba(255, 255, 255, 0.48);
  --form-border-color: rgba(255, 255, 255, 0.12);
  --form-border-color-hover: rgba(255, 255, 255, 0.4);
  --form-border-active-hover: var(--accent-light, #e9b28b);
  --form-label-color: rgba(255, 255, 255, 0.8);
}

.contact-form--v2 .form-font-size {
  font-size: 0;
}

.contact-form--v2 .contact-form__top {
  margin-bottom: 32px;
}
.contact-form--v2 .contact-form__top h2 {
  margin-bottom: 12px;
}
.contact-form--v2 .contact-form__top p {
  color: var(--form-text-color);
}

.contact-form--v2 .contact-form__fields {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* ---------- velden ---------- */
.contact-form--v2 .form-field-container {
  --form-gap: 48px;
  position: relative;
  margin-bottom: 40px;
  width: 100%;
}
.contact-form--v2 .form-field {
  display: block;
  position: relative;
  z-index: 3;
  width: 100%;
}
.contact-form--v2 .form-field.floating-label {
  --floating-label-y: 0px;
  --floating-label-active-y: -22px;
}

.contact-form--v2 .form-field__input,
.contact-form--v2 .form-field__textarea,
.contact-form--v2 .form-field__select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  display: block;
  outline: 0;
  width: 100%;
  height: auto;
  color: var(--form-text-color);
  font-family: 'PT Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  border-radius: 0;
  line-height: 1.2;
  background-color: transparent;
  padding: 0 0 14px 0;
  border-bottom: 1px solid var(--form-border-color);
  transition: border-color 0.4s var(--bezier);
}
.contact-form--v2 .floating-label .form-field__input::placeholder,
.contact-form--v2 .floating-label .form-field__textarea::placeholder {
  color: transparent;
}
.contact-form--v2 .form-field__label {
  position: absolute;
  top: var(--floating-label-y);
  left: 0;
  z-index: 2;
  max-width: calc(100% - 28px);
  color: var(--form-placeholder-color);
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  pointer-events: none;
  transform: translateY(0) scale(1);
  transform-origin: left top;
  transition: color 0.25s var(--bezier), transform 0.35s var(--bezier);
}
.contact-form--v2 .form-field.active .form-field__label,
.contact-form--v2 .form-field.filled .form-field__label {
  color: var(--form-label-color);
  transform: translateY(var(--floating-label-active-y)) scale(0.78);
}
.contact-form--v2 .form-field__input.invalid ~ .form-field__label,
.contact-form--v2 .form-field__textarea.invalid ~ .form-field__label,
.contact-form--v2 .form-field__select.invalid ~ .form-field__label,
.contact-form--v2 .form-field__error .form-field__label {
  color: var(--error-empty);
}
.contact-form--v2 .form-field__textarea {
  min-height: 120px;
  resize: vertical;
}
.contact-form--v2 .form-field:hover .form-field__input,
.contact-form--v2 .form-field:hover .form-field__textarea,
.contact-form--v2 .form-field:hover .form-field__select {
  border-bottom-color: var(--form-border-color-hover);
}
.contact-form--v2 .form-field__input:focus,
.contact-form--v2 .form-field__textarea:focus,
.contact-form--v2 .form-field__select:focus {
  border-bottom-color: var(--form-border-active-hover);
}

.contact-form--v2 .form-field__input.invalid,
.contact-form--v2 .form-field__textarea.invalid,
.contact-form--v2 .form-field__select.invalid,
.contact-form--v2 .form-field-file.invalid,
.contact-form--v2 .form-field__error .form-field__input,
.contact-form--v2 .form-field__error .form-field__textarea,
.contact-form--v2 .form-field__select.form-field__error,
.contact-form--v2 .form-field-file.form-field__error {
  border-bottom-color: var(--error-empty);
  color: var(--error-empty);
}
.contact-form--v2 .form-field__input.invalid-input {
  border-bottom-color: var(--error-invalid);
}

/* placeholders */
.contact-form--v2 ::placeholder {
  color: var(--form-placeholder-color);
  opacity: 1;
}

/* ---------- select ---------- */
.contact-form--v2 .form-field.select {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.contact-form--v2 .form-field__select option {
  color: #000;
}
.contact-form--v2 .form-field .select-arrow {
  position: absolute;
  right: 0;
  top: 4px;
  line-height: 0;
  pointer-events: none;
  color: var(--form-text-color);
}
.contact-form--v2 .form-field__select.invalid ~ .select-arrow,
.contact-form--v2 .form-field__select.form-field__error ~ .select-arrow {
  color: var(--error-empty);
}

.contact-form--v2 .form-field__input[type="date"].invalid::-webkit-calendar-picker-indicator,
.contact-form--v2 .form-field__error .form-field__input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(24%) sepia(93%) saturate(1564%) hue-rotate(345deg) brightness(87%) contrast(86%);
}

/* ---------- radio & checkbox ---------- */
.contact-form--v2 .form-field.radio,
.contact-form--v2 .form-field.checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.contact-form--v2 .form-field.radio .option-group,
.contact-form--v2 .form-field.checkbox .option-group {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.contact-form--v2 .form-field.radio .option,
.contact-form--v2 .form-field.checkbox .option {
  margin-right: 20px;
  margin-bottom: 10px;
}
.contact-form--v2 .form-field.radio label,
.contact-form--v2 .form-field.checkbox label {
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  line-height: 1.6;
  font-size: 16px;
  color: var(--form-text-color);
}
.contact-form--v2 .form-field.radio input,
.contact-form--v2 .form-field.checkbox input {
  --input-width: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  width: var(--input-width);
  height: var(--input-width);
  border-radius: 0;
  background-color: transparent;
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
  border: 1px solid var(--form-border-color);
  transition: border-color 0.4s var(--bezier);
  cursor: pointer;
}
.contact-form--v2 .form-field.radio input::after,
.contact-form--v2 .form-field.checkbox input::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--form-border-active-hover);
  opacity: 0;
  transition: opacity 0.3s var(--bezier);
}
.contact-form--v2 .form-field.radio input:hover,
.contact-form--v2 .form-field.checkbox input:hover {
  border-color: var(--form-border-color-hover);
}
.contact-form--v2 .form-field.radio input:checked::after,
.contact-form--v2 .form-field.checkbox input:checked::after {
  opacity: 1;
}
.contact-form--v2 .form-field.radio input {
  border-radius: 50%;
}
.contact-form--v2 .form-field.radio input::after {
  border-radius: 50%;
}
.contact-form--v2 .form-field.radio.invalid input,
.contact-form--v2 .form-field.checkbox.invalid input {
  border-color: var(--error-empty) !important;
}

/* ---------- file ---------- */
.contact-form--v2 .form-field-file {
  display: block;
  position: relative;
  width: 100%;
  color: var(--form-text-color);
  font-size: 16px;
  line-height: 1;
  background-color: transparent;
  padding: 0 0 17px 0;
  border-bottom: 1px solid var(--form-border-color);
  transition: border-color 0.4s var(--bezier);
}
.contact-form--v2 .form-field-file .form-field__file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.contact-form--v2 .form-field-file .form-field__file__label {
  position: absolute;
  display: inline-block;
  margin-bottom: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  border: 0;
}
.contact-form--v2 .form-field-file__list {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.contact-form--v2 .form-field-file__list svg {
  width: 14px;
  height: auto;
  color: var(--form-text-color);
}
.contact-form--v2 .form-field-file__list span {
  color: var(--form-placeholder-color);
  font-size: 16px;
  line-height: 1;
  transition: color 0.4s var(--bezier);
}
.contact-form--v2 .form-field-file__list a {
  text-decoration: underline;
}
.contact-form--v2 .form-field-file.invalid {
  border-bottom-color: var(--error-empty);
}
.contact-form--v2 .form-field-file.invalid .form-field-file__list,
.contact-form--v2 .form-field-file.invalid .form-field-file__list span,
.contact-form--v2 .form-field-file.invalid .form-field-file__list svg {
  color: var(--error-empty);
}

/* ---------- AVG + knop rij ---------- */
.contact-form--v2 .validatie-forms {
  width: 100%;
  margin-bottom: 24px;
}
.contact-form--v2 .validatie-forms:empty {
  display: none;
}

.contact-form--v2 .form-field-container.is-placed-inline {
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap:0px;
  margin-top: 0;
}
.contact-form--v2 .avg_checkbox {
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  margin-bottom: 0 !important;
}
.contact-form--v2 .avg_checkbox .option {
  margin-bottom: 0;
}
.contact-form--v2 .avg_checkbox label {
  align-items: center;
}
.contact-form--v2 .avg_checkbox p {
  position: relative;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--form-text-color);
}
.contact-form--v2 .avg_checkbox a {
  text-decoration: underline;
}
.contact-form--v2 .avg_checkbox.invalid .form-field__avg {
  border-color: var(--error-empty) !important;
}

/* ---------- breedtes ---------- */
.contact-form--v2 .form-field-container.whole {
  width: 100%;
}
.contact-form--v2 .form-field-container.half {
  width: calc(50% - (var(--form-gap) / 2));
}
.contact-form--v2 .form-field-container.third {
  width: calc((100% / 3) - (var(--form-gap) * 2 / 3));
}

/* ---------- verzendknop ---------- */
.contact-form--v2 .form-button {
  flex-shrink: 0;
}
.contact-form--v2 .submit-form-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  background-color: var(--m-color-dark, #af4838);
  color: #fff;
  font-family: 'Bree Serif', serif;
  font-size: 18px;
  line-height: 1;
  padding: 16px 32px;
  border-radius: 4px;
  transition: opacity 0.3s var(--bezier), transform 0.3s var(--bezier);
}
.contact-form--v2 .submit-form-btn:hover {
  opacity: 0.85;
}
.contact-form--v2 form.is-submitting .submit-form-btn,
.contact-form--v2 .form-button.load .submit-form-btn,
.contact-form--v2 .form-button.is-submitting .submit-form-btn {
  opacity: 0.6;
  pointer-events: none;
}
.contact-form--v2 form.is-submitting .submit-form-btn {
  cursor: progress;
}
.contact-form--v2 .submit-form-btn .button__text {
  color: #fff;
  font-size: 18px;
}

/* recaptcha badge verbergen */
.grecaptcha-badge {
  visibility: hidden;
}

/* ---------- mobiel ---------- */
@media only screen and (max-width: 767.98px) {
  .contact-form--v2 .form-field-container.half,
  .contact-form--v2 .form-field-container.third {
    width: 100%;
  }
  .contact-form--v2 .form-field-container.is-placed-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
  }
  .contact-form--v2 .submit-form-btn {
    width: 100%;
  }
}