/* ====================================================================
   Freshworks embed -> opmaak gelijktrekken met het originele formulier
   (geïntegreerd op de gele balk, witte rondhoek-velden, donkere knop)
   Gescoped onder #fw-leadform (id-niveau) + !important zodat het de
   Freshworks-eigen id-selectoren overschrijft.
   ==================================================================== */

/* Wrappers + witte kaart transparant maken (id-niveau, extra diep voor
   .fserv-container omdat Freshworks die met een id-selector kleurt) */
#fw-leadform,
#fw-leadform .fserv-form-loaded,
#fw-leadform .fs-webform-container,
#fw-leadform .fserv-container,
#fw-leadform .fserv-form-loaded .fs-webform-container .fserv-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Dubbele Freshworks-titel/omschrijving + "powered by" verbergen */
#fw-leadform .fserv-form-name,
#fw-leadform .fserv-form-description,
#fw-leadform .powered-by {
  display: none !important;
}

/* Velden in een raster (2 koloms) */
#fw-leadform .fserv-form {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  width: 100% !important;
}

#fw-leadform .fserv-field {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Submit-knop op een eigen volledige rij */
#fw-leadform .fserv-form > div:last-child {
  grid-column: 1 / -1 !important;
  margin-top: .25rem !important;
}

/* Labels: compact, in huisstijl (Raleway) */
#fw-leadform .fserv-label {
  font-family: Raleway, sans-serif !important;
  color: #433c38 !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  margin: 0 0 .35rem !important;
  text-align: left !important;
}

/* Invoervelden: wit, rondhoek 1rem, subtiele rand (zoals .text-field) */
#fw-leadform .fserv-input-text,
#fw-leadform .fserv-select,
#fw-leadform input[type="text"],
#fw-leadform input[type="email"],
#fw-leadform input[type="tel"],
#fw-leadform select,
#fw-leadform .select2-selection,
#fw-leadform .fs-country-phone {
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #d8d4d0 !important;
  border-radius: 1rem !important;
  padding: .7rem 1rem !important;
  min-height: 48px !important;
  height: auto !important;
  box-shadow: none !important;
  font-family: Raleway, sans-serif !important;
  font-size: 1rem !important;
  color: #433c38 !important;
  box-sizing: border-box !important;
}

#fw-leadform input::placeholder { color: #8a8a8a !important; }

/* Select2 (dropdowns) uitlijnen */
#fw-leadform .select2-container { width: 100% !important; }
#fw-leadform .select2-selection--single {
  display: flex !important;
  align-items: center !important;
}
#fw-leadform .select2-selection__rendered {
  padding: 0 !important;
  line-height: normal !important;
  color: #433c38 !important;
}
#fw-leadform .select2-selection__arrow { height: 100% !important; }

/* Telefoonveld met landselector netjes uitlijnen */
#fw-leadform .fs-country-phone {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .25rem .5rem !important;
}
#fw-leadform .fs-country-phone input {
  border: 0 !important;
  min-height: auto !important;
  padding: .45rem .5rem !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Submit-knop: donker (#433c38), wit, vol breed, pill (zoals .button.brown).
   height/line-height resetten: Freshworks forceert height:38px + overflow:hidden
   waardoor de tekst werd afgeknipt. */
#fw-leadform .fserv-button-submit {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
  overflow: visible !important;
  background: #433c38 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10rem !important;
  padding: .9rem 1.5rem !important;
  font-family: Raleway, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: opacity .2s ease !important;
  box-sizing: border-box !important;
}
#fw-leadform .fserv-button-submit:hover { opacity: .9 !important; }

/* Notifier/scheidingslijn boven de knop weghalen */
#fw-leadform .fserv-form > div:last-child { border-top: 0 !important; }

/* Verplicht-sterretjes in huisstijl */
#fw-leadform .fserv-required-symbol,
#fw-leadform .fserv-label .required { color: #e2483d !important; }

/* Mobiel: 1 kolom */
@media screen and (max-width: 767px) {
  #fw-leadform .fserv-form { grid-template-columns: 1fr !important; }
}