/* Custom CSS here */
span.mobile_menu_bar:before{
  color:#ffffff;
}

/* =========================================================
   GRAVITY FORMS in DIVI – module met class: contactform
   Basis (licht) + Dark overrides + jouw tweaks
   ========================================================= */

/* -------------------------
   BASIS (LICHTE OPMAAK)
   ------------------------- */
.contactform .gform_wrapper {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: #111 !important;
}

/* Labels */
.contactform .gform_wrapper .gfield_label {
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #005297 !important; /* Meijer donkerblauw */
  margin-bottom: 6px !important;
  font-size: 15px !important;
}

/* Formulierbeschrijving (boven het eerste veld) */
.contactform .gform_wrapper .gform_description {
  color: #5e6b7a !important;
  margin-bottom: 12px !important; /* extra ruimte vóór eerste veld */
}

/* Veld-beschrijvingen / helptesten onder velden */
.contactform .gform_wrapper .gfield_description,
.contactform .gform_wrapper .instruction,
.contactform .gform_wrapper .description {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #5e6b7a !important;
  margin-top: 6px !important;
}

/* Velden */
.contactform .gform_wrapper input[type="text"],
.contactform .gform_wrapper input[type="email"],
.contactform .gform_wrapper input[type="tel"],
.contactform .gform_wrapper input[type="url"],
.contactform .gform_wrapper input[type="number"],
.contactform .gform_wrapper input[type="password"],
.contactform .gform_wrapper textarea,
.contactform .gform_wrapper select {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid #d3d9df !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  width: 100% !important;
  font-size: 15px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.contactform .gform_wrapper input:focus,
.contactform .gform_wrapper textarea:focus,
.contactform .gform_wrapper select:focus {
  border-color: #0D93D2 !important; /* Meijer blauw */
  box-shadow: 0 0 0 3px rgba(13,147,210,.15) !important;
  outline: none !important;
}

/* Spacing per veld */
.contactform .gform_wrapper .gfield { margin-bottom: 20px !important; }

/* Consent/checkbox (licht) */
.contactform .gform_wrapper .gfield_checkbox label,
.contactform .gform_wrapper .gfield_consent_label {
  color: #111 !important;
}

/* CAPTCHA – minimaal verticaal (licht én donker, padding max 5px) */
.contactform .gform_wrapper .ginput_recaptcha,
.contactform .gform_wrapper .gfield.gfield--type-captcha {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Validatie (licht) */
.contactform .gform_wrapper .gform_validation_errors {
  background: #fff4db !important;
  color: #4b3a07 !important;
  border: 1px solid #ffd880 !important;
  border-radius: 5px !important;
  padding: 5px 5px !important;
  margin-bottom: 5px !important;
}
.contactform .gform_wrapper .validation_message {
  color: #b40000 !important;
  font-size: 13px !important;
  margin-top: 6px !important;
}

/* VERZENDKNOP – forceer Meijer-geel + zwarte tekst, Fira Sans Bold, scherpe hoeken */
.contactform .gform_wrapper .gform_footer .gform_button,
.contactform .gform_wrapper .gform_page_footer .gform_button,
.contactform .gform_wrapper input[type="submit"].gform_button,
.contactform .gform_wrapper button.gform_button {
  background: #FFD046 !important;        /* Meijer geel */
  background-image: none !important;      /* geen gradients van thema */
  color: #000000 !important;              /* zwart */
  border-color: #FFD046 !important;
  border-radius: 0 !important;            /* scherpe hoeken */
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;            /* Bold */
  font-size: 18px !important;
  padding: 10px 10px !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: transform .06s ease, background-color .2s ease !important;
}
.contactform .gform_wrapper .gform_footer .gform_button:hover,
.contactform .gform_wrapper .gform_page_footer .gform_button:hover,
.contactform .gform_wrapper input[type="submit"].gform_button:hover,
.contactform .gform_wrapper button.gform_button:hover {
  background: #e7bd3f !important;
  background-image: none !important;
  transform: translateY(-1px) !important;
}
.contactform .gform_wrapper .gform_footer .gform_button:focus-visible,
.contactform .gform_wrapper .gform_page_footer .gform_button:focus-visible,
.contactform .gform_wrapper input[type="submit"].gform_button:focus-visible,
.contactform .gform_wrapper button.gform_button:focus-visible {
  outline: 3px solid #0D93D2 !important;
  outline-offset: 2px !important;
}

/* Footer spacing onder het formulier */
.contactform .gform_wrapper .gform_footer { margin-top: 10px !important; }

/* -------------------------------------------------
   DARK OVERRIDES – activeer met:
   - module class: contactform is-dark
   - OF ouder sectie/row class: dark-section
   ------------------------------------------------- */

/* Basiskleur + typografie op donker */
.dark-section .contactform .gform_wrapper,
.contactform.is-dark .gform_wrapper {
  color: #e9eef5 !important;
}

/* Labels en asterisk op donker */
.dark-section .contactform .gform_wrapper .gfield_label,
.contactform.is-dark .gform_wrapper .gfield_label {
  color: #f3f7fb !important;
}
.dark-section .contactform .gform_wrapper .gfield_required,
.contactform.is-dark .gform_wrapper .gfield_required {
  color: #FFD046 !important; /* Meijer-geel asterisk */
}

/* Formulierbeschrijving (boven het eerste veld) – wit + extra ruimte */
.dark-section .contactform .gform_wrapper .gform_description,
.contactform.is-dark .gform_wrapper .gform_description {
  color: #ffffff !important;
  margin-bottom: 12px !important; /* méér afstand voor leesbaarheid */
}

/* Veld-beschrijvingen / helptesten op donker – wit */
.dark-section .contactform .gform_wrapper .gfield_description,
.dark-section .contactform .gform_wrapper .instruction,
.dark-section .contactform .gform_wrapper .description,
.contactform.is-dark .gform_wrapper .gfield_description,
.contactform.is-dark .gform_wrapper .instruction,
.contactform.is-dark .gform_wrapper .description {
  color: #ffffff !important;
}

/* Velden op donker – witte velden met donkere tekst */
.dark-section .contactform .gform_wrapper input[type="text"],
.dark-section .contactform .gform_wrapper input[type="email"],
.dark-section .contactform .gform_wrapper input[type="tel"],
.dark-section .contactform .gform_wrapper input[type="url"],
.dark-section .contactform .gform_wrapper input[type="number"],
.dark-section .contactform .gform_wrapper input[type="password"],
.dark-section .contactform .gform_wrapper textarea,
.dark-section .contactform .gform_wrapper select,
.contactform.is-dark .gform_wrapper input[type="text"],
.contactform.is-dark .gform_wrapper input[type="email"],
.contactform.is-dark .gform_wrapper input[type="tel"],
.contactform.is-dark .gform_wrapper input[type="url"],
.contactform.is-dark .gform_wrapper input[type="number"],
.contactform.is-dark .gform_wrapper input[type="password"],
.contactform.is-dark .gform_wrapper textarea,
.contactform.is-dark .gform_wrapper select {
  background: #ffffff !important;   /* witte inputvelden */
  color: #111111 !important;
  border: 1px solid #2a3441 !important;
  border-radius: 0 !important;
}

/* Placeholder op donker – ZWART (leesbaar op witte velden) */
.dark-section .contactform .gform_wrapper ::placeholder,
.contactform.is-dark .gform_wrapper ::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Focus op donker */
.dark-section .contactform .gform_wrapper input:focus,
.dark-section .contactform .gform_wrapper textarea:focus,
.dark-section .contactform .gform_wrapper select:focus,
.contactform.is-dark .gform_wrapper input:focus,
.contactform.is-dark .gform_wrapper textarea:focus,
.contactform.is-dark .gform_wrapper select:focus {
  border-color: #0D93D2 !important;
  box-shadow: 0 0 0 3px rgba(13,147,210,.25) !important;
  background: #ffffff !important;
}

/* Minder verticale ruimte op donker (velden + consent/checkbox; jouw wens) */
.dark-section .contactform .gform_wrapper .gfield,
.contactform.is-dark .gform_wrapper .gfield {
  margin-bottom: 4px !important; /* compacter dan licht */
}

/* Consent/checkbox tekst op donker – wit */
.dark-section .contactform .gform_wrapper .gfield_checkbox label,
.dark-section .contactform .gform_wrapper .gfield_consent_label,
.contactform.is-dark .gform_wrapper .gfield_checkbox label,
.contactform.is-dark .gform_wrapper .gfield_consent_label {
  color: #ffffff !important;
}
/* Links in consent tekst op donker */
.dark-section .contactform .gform_wrapper .gfield_consent_label a,
.contactform.is-dark .gform_wrapper .gfield_consent_label a {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* CAPTCHA – idem compact (al toegepast in basis), staat hier nogmaals voor zekerheid */
.dark-section .contactform .gform_wrapper .ginput_recaptcha,
.dark-section .contactform .gform_wrapper .gfield.gfield--type-captcha,
.contactform.is-dark .gform_wrapper .ginput_recaptcha,
.contactform.is-dark .gform_wrapper .gfield.gfield--type-captcha {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Verzendknop op donker – zelfde CTA, scherpe hoeken, bold zwart */
.dark-section .contactform .gform_wrapper .gform_footer .gform_button,
.dark-section .contactform .gform_wrapper .gform_page_footer .gform_button,
.dark-section .contactform .gform_wrapper input[type="submit"].gform_button,
.dark-section .contactform .gform_wrapper button.gform_button,
.contactform.is-dark .gform_wrapper .gform_footer .gform_button,
.contactform.is-dark .gform_wrapper .gform_page_footer .gform_button,
.contactform.is-dark .gform_wrapper input[type="submit"].gform_button,
.contactform.is-dark .gform_wrapper button.gform_button {
  background: #FFD046 !important;
  background-image: none !important;
  color: #000000 !important;            /* zwart */
  border-color: #FFD046 !important;
  border-radius: 0 !important;           /* scherpe hoeken */
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;           /* Bold */
  font-size: 18px !important;
  padding: 14px 22px !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: transform .06s ease, background-color .2s ease !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.35) !important; /* beter zichtbaar op donker */
}
.dark-section .contactform .gform_wrapper .gform_footer .gform_button:hover,
.dark-section .contactform .gform_wrapper .gform_page_footer .gform_button:hover,
.dark-section .contactform .gform_wrapper input[type="submit"].gform_button:hover,
.dark-section .contactform .gform_wrapper button.gform_button:hover,
.contactform.is-dark .gform_wrapper .gform_footer .gform_button:hover,
.contactform.is-dark .gform_wrapper .gform_page_footer .gform_button:hover,
.contactform.is-dark .gform_wrapper input[type="submit"].gform_button:hover,
.contactform.is-dark .gform_wrapper button.gform_button:hover {
  background: #e7bd3f !important;
  background-image: none !important;
  transform: translateY(-1px) !important;
}


/* Hover/active */
.contactform .gform_wrapper .gform_footer .gform_button:hover,
.contactform .gform_wrapper .gform_page_footer .gform_button:hover,
.contactform .gform_wrapper input[type="submit"].gform_button:hover,
.contactform .gform_wrapper button.gform_button:hover,
.dark-section .contactform .gform_wrapper .gform_footer .gform_button:hover,
.dark-section .contactform .gform_wrapper .gform_page_footer .gform_button:hover,
.dark-section .contactform .gform_wrapper input[type="submit"].gform_button:hover,
.dark-section .contactform .gform_wrapper button.gform_button:hover,
.contactform.is-dark .gform_wrapper .gform_footer .gform_button:hover,
.contactform.is-dark .gform_wrapper .gform_page_footer .gform_button:hover,
.contactform.is-dark .gform_wrapper input[type="submit"].gform_button:hover,
.contactform.is-dark .gform_wrapper button.gform_button:hover {
  background: #e7bd3f !important;
  background-image: none !important;
  transform: translateY(-1px) !important;
}

/* Disabled (voor de zekerheid) */
.contactform .gform_wrapper .gform_button:disabled {
  opacity: .65 !important;
  cursor: not-allowed !important;
}  
/* Opmaak voor vergelijkbare schrobmachines*/
/* =========================================================
   Meijer - Vergelijkbare Machines (final versie)
   ========================================================= */

/* ===== Achtergrond & layout ===== */
.meijer-related-wrap {
  background: #FFFFFF; /* wit i.p.v. lichtblauw */
  padding: 48px 0;
}
.meijer-related-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -14px;
}
.meijer-related-card {
  box-sizing: border-box;
  width: 25%;
  padding: 14px;
}
@media (max-width: 1200px){ .meijer-related-card{ width:50%; } }
@media (max-width: 640px){  .meijer-related-card{ width:100%; } }

/* ===== Kaartstijl ===== */
.meijer-related-card .meijer-related-body {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 18px;
  display: flex;
  flex-direction: column;
  height: auto;
  transition: box-shadow .15s ease, transform .08s ease;
}
.meijer-related-card:hover .meijer-related-body {
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* ===== Afbeelding ===== */
.meijer-related-imgbox {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  background: #fff;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  margin-bottom: 0;
}
.meijer-related-imgbox img.fit {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== Titel ===== */
.meijer-related-title {
  font-weight: 700;
  margin: 8px 0 6px;
  font-size: 25px;
  line-height: 1.22;
  color: #111;
}
.meijer-related-title a {
  color: inherit;
  text-decoration: none;
}
.meijer-related-title a:hover {
  text-decoration: underline;
}

/* ===== Lease-regel ===== */
.meijer-related-lease {
  color: #0D93D2;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 15px;
  border-bottom: 1px solid #d9d9d9; /* grijze lijn onder leaseprijs */
  padding-bottom: 8px;
}

/* ===== Specificaties ===== */
.meijer-related-specs {
  list-style: none;
  margin: 10px 0 6px;
  padding: 0;
}
.meijer-related-specs li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}
.meijer-related-specs .spec-value {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700; /* semibold */
  color: #5d656d;
}

/* ===== Iconen (png's) ===== */
.meijer-related-specs .ico {
  display: inline-block;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  margin-top: 2px;
}
.meijer-related-specs .ico-cap {
  background-image: url('https://meijermachines.nl/wp-content/uploads/2020/08/image002-480x487.png');
}
.meijer-related-specs .ico-tank {
  background-image: url('https://meijermachines.nl/wp-content/uploads/2020/08/image001.png');
}
.meijer-related-specs .ico-width {
  background-image: url('https://meijermachines.nl/wp-content/uploads/2020/08/image003-1.png');
}

/* ---------- Meijer Related: rechthoekige knop ---------- */
.meijer-related-btn-wrap{
  margin-top: 16px;
  text-align: center;
}

/* reset Divi button wrapper */
.meijer-related-btn-wrap .et_pb_button{
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;         /* padding zetten we op de  zelf */
  line-height: 1 !important;
}

/* Nieuwe knopstijl (rechthoek) */
.meijer-related-btn-wrap a.et_pb_button.blauwe-knop-meer-info{
  display: inline-block;
  background-color: #0D93D2 !important;   /* knopkleur */
  color: #FFFFFF !important;              /* tekstkleur */
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;            /* Bold */
  font-style: normal !important;          /* geen italic */
  font-size: 17px !important;
  text-transform: none !important;        /* niet ALL CAPS */
  letter-spacing: 0 !important;
  text-decoration: none !important;
  padding: 14px 40px !important;          /* buffer: 40px links/rechts */
  border: none !important;
  border-radius: 0 !important;            /* strakke rechthoek */
  box-shadow: none !important;            /* geen schaduw */
  clip-path: none !important;             /* weg met parallellogram */
  -webkit-clip-path: none !important;
  transition: none !important;
  position: relative;
}

/* Geen pictogram/pijltje (zet Divi’s pseudo-elementen uit) */
.meijer-related-btn-wrap a.et_pb_button.blauwe-knop-meer-info::before,
.meijer-related-btn-wrap a.et_pb_button.blauwe-knop-meer-info::after,
.meijer-related-btn-wrap .et_pb_button:before,
.meijer-related-btn-wrap .et_pb_button:after{
  display: none !important;
  content: none !important;
}

/* Hover identiek houden (geen animaties/kleurwissel) */
.meijer-related-btn-wrap a.et_pb_button.blauwe-knop-meer-info:hover,
.meijer-related-btn-wrap a.et_pb_button.blauwe-knop-meer-info:focus,
.meijer-related-btn-wrap a.et_pb_button.blauwe-knop-meer-info:active{
  background-color: #0D93D2 !important;
  color: #FFFFFF !important;
  transform: none !important;
}

/* =====================================================
   Meijer – Contactformulier (GF id=3) — final compact
   Scope: #contact.contactform
   ===================================================== */

/* Basis */
#contact.contactform .gform_wrapper form#gform_3{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#000;
}

/* -----------------------------------------------------
   1) Beschrijving even breed als de velden
   ----------------------------------------------------- */
#contact.contactform .gform_wrapper form#gform_3 .gform_heading .gform_description{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 10px !important;
}

/* -----------------------------------------------------
   2) Layout velden: Naam 100%, Telefoon + Email 50/50, Bericht 100%
   ----------------------------------------------------- */
#contact.contactform .gform_wrapper form#gform_3 .gform_body .gform_fields{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;   /* 2 kolommen */
  gap:16px 20px !important;
  grid-auto-flow:dense !important;
}

#contact.contactform .gform_wrapper form#gform_3 .gform_body .gform_fields .gfield{
  margin:0 !important; float:none !important; width:auto !important; clear:none !important;
}

/* Naam (id=1) volledige breedte */
#contact.contactform .gform_wrapper form#gform_3 #field_3_1{ grid-column:1 / -1 !important; grid-row:1 !important }

/* Telefoon (id=14) links, E-mail (id=3) rechts */
#contact.contactform .gform_wrapper form#gform_3 #field_3_14{ grid-column:1 / 2 !important; grid-row:2 !important }
#contact.contactform .gform_wrapper form#gform_3 #field_3_3 { grid-column:2 / 3 !important; grid-row:2 !important }

/* Bericht volle breedte (vang id én textarea-type af) */
#contact.contactform .gform_wrapper form#gform_3 #field_3_4,
#contact.contactform .gform_wrapper form#gform_3 .gfield--type-textarea{
  grid-column:1 / -1 !important;
}

/* Mobiel: alles onder elkaar + knop centreren */
@media (max-width:768px){
  #contact.contactform .gform_wrapper form#gform_3 .gform_body .gform_fields{ grid-template-columns:1fr !important }
  #contact.contactform .gform_wrapper form#gform_3 #field_3_1,
  #contact.contactform .gform_wrapper form#gform_3 #field_3_14,
  #contact.contactform .gform_wrapper form#gform_3 #field_3_3,
  #contact.contactform .gform_wrapper form#gform_3 #field_3_4,
  #contact.contactform .gform_wrapper form#gform_3 .gfield--type-textarea{
    grid-column:1 / -1 !important; grid-row:auto !important;
  }
}

/* -----------------------------------------------------
   3) Knop rechts uitlijnen met velden
   ----------------------------------------------------- */
/* Zorg dat de footer zich aan de rechterkant van dezelfde binnenbreedte hecht */
#contact.contactform .gform_wrapper form#gform_3 .gform_footer{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  margin-top:18px !important;
  /* Als de velden visueel 12px “binnen” het grid lijken te staan, 
     corrigeer dan de rechterpadding om exact gelijk te trekken: */
  padding-right: 12px !important;   /* pas aan naar 0 / 8 / 12 / 14 voor pixel-perfect */
}

/* Mobiel: centreren (optioneel full-width) */
@media (max-width:768px){
  #contact.contactform .gform_wrapper form#gform_3 .gform_footer{
    justify-content:center !important;
    padding-right:0 !important;
  }
  #contact.contactform .gform_wrapper form#gform_3 .gform_footer .gform_button{
    width:100% !important; text-align:center !important;
  }
}

/* -----------------------------------------------------
   4) Inputs/textarea (visuele stijl – ongewijzigd)
   ----------------------------------------------------- */
#contact.contactform .gform_wrapper form#gform_3 .ginput_container input[type=text],
#contact.contactform .gform_wrapper form#gform_3 .ginput_container input[type=email],
#contact.contactform .gform_wrapper form#gform_3 .ginput_container input[type=tel],
#contact.contactform .gform_wrapper form#gform_3 .ginput_container input[type=url],
#contact.contactform .gform_wrapper form#gform_3 .ginput_container input[type=number],
#contact.contactform .gform_wrapper form#gform_3 .ginput_container select,
#contact.contactform .gform_wrapper form#gform_3 .ginput_container textarea{
  width:100%; box-sizing:border-box; background:#fff; color:#000;
  border:1px solid #d9d9d9; border-radius:8px; padding:12px 14px; font-size:16px; line-height:1.35; transition:none;
}
#contact.contactform .gform_wrapper form#gform_3 .ginput_container input:focus,
#contact.contactform .gform_wrapper form#gform_3 .ginput_container select:focus,
#contact.contactform .gform_wrapper form#gform_3 .ginput_container textarea:focus{
  outline:none; border-color:#FFD046; box-shadow:0 0 0 3px rgba(255,208,70,.25);
}

/* Knop (geel, statisch) – blijft zoals je had */
#contact.contactform .gform_wrapper form#gform_3 .gform_button{
  display:inline-block; background:#FFD046!important; color:#000!important;
  font-family:"Fira Sans",sans-serif!important; font-weight:700!important; font-style:italic!important;
  font-size:14px!important; text-transform:uppercase!important; letter-spacing:3px!important;
  border:none!important; border-radius:0!important; padding:16px 40px!important; line-height:1!important;
  box-shadow:0 10px 18px rgba(0,0,0,.15)!important;
  -webkit-clip-path:polygon(8% 0,100% 0,92% 100%,0 100%); clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  transition:none!important; cursor:pointer;
}
#contact.contactform .gform_wrapper form#gform_3 .gform_button:hover,
#contact.contactform .gform_wrapper form#gform_3 .gform_button:focus,
#contact.contactform .gform_wrapper form#gform_3 .gform_button:active{
  background:#FFD046!important; color:#000!important; box-shadow:0 10px 18px rgba(0,0,0,.15)!important; transform:none!important;
}

/* ====== GF #3 in één grid zetten ====== */
#contact.contactform form#gform_3{
  display:grid !important;
  grid-template-columns: 1fr 1fr;   /* zelfde 2 kolommen als de velden */
  row-gap: 14px;
}

/* heading/body/footer nemen dezelfde gridbreedte in */
#contact.contactform #gform_3 .gform_heading,
#contact.contactform #gform_3 .gform_body,
#contact.contactform #gform_3 .gform_footer{
  grid-column: 1 / -1 !important;   /* even breed als de velden */
}

/* knop rechts laten “vastklikken” aan grid-rand */
#contact.contactform #gform_3 .gform_footer{
  justify-self: end !important;     /* uitlijnen aan rechterkant velden */
}

/* mobiel: alles 1 kolom en knop centreren */
@media (max-width:768px){
  #contact.contactform form#gform_3{ grid-template-columns:1fr !important; }
  #contact.contactform #gform_3 .gform_footer{ justify-self:center !important; }
}

/* ====== Veldraster binnen de body ====== */
#contact.contactform #gform_3 .gform_body .gform_fields{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:16px 20px !important;
  grid-auto-flow:dense !important;
}
#contact.contactform #gform_3 .gform_body .gform_fields .gfield{
  margin:0 !important; float:none !important; width:auto !important; clear:none !important;
}

/* Naam (id=1) 100% */
#contact.contactform #gform_3 #field_3_1{ grid-column:1 / -1 !important; grid-row:1 !important; }

/* Telefoon (id=14) links — E-mail (id=3) rechts */
#contact.contactform #gform_3 #field_3_14{ grid-column:1 / 2 !important; grid-row:2 !important; }
#contact.contactform #gform_3 #field_3_3 { grid-column:2 / 3 !important; grid-row:2 !important; }

/* Bericht 100% (zowel op id als type) */
#contact.contactform #gform_3 #field_3_4,
#contact.contactform #gform_3 .gfield--type-textarea{ grid-column:1 / -1 !important; }

/* mobiel: alle velden onder elkaar */
@media (max-width:768px){
  #contact.contactform #gform_3 .gform_body .gform_fields{ grid-template-columns:1fr !important; }
  #contact.contactform #gform_3 #field_3_1,
  #contact.contactform #gform_3 #field_3_14,
  #contact.contactform #gform_3 #field_3_3,
  #contact.contactform #gform_3 #field_3_4,
  #contact.contactform #gform_3 .gfield--type-textarea{ grid-column:1 / -1 !important; grid-row:auto !important; }
}

/* Volledige breedte mobiele knoppen (Download + Offerte) */
@media (max-width: 768px) {
  .downloads-anchor-mobiel,
  .offerte-anchor-mobiel {
    display: block !important;
    width: 100% !important;          /* vult containerbreedte */
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Als de knoppen in een kolom met padding staan (zoals bij Divi), compenseer dat: */
  .et_pb_column .downloads-anchor-mobiel,
  .et_pb_column .offerte-anchor-mobiel {
    width: 100vw !important;         /* 100% van de viewport */
    margin-left: -10px !important;   /* corrigeer kolom-padding (pas aan indien nodig) */
    margin-right: -10px !important;
  }
}

/* Mobiel sticky header (klassieke Divi-header + Theme Builder header) */
@media (max-width: 980px) {

  /* Klassieke Divi-header */
  #main-header,
  #main-header.et-fixed-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999 !important;
  }

  /* Theme Builder header (et-l--header) */
  .et-l--header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999 !important;
  }

  /* Ruimte onder de header zodat content niet eronder verdwijnt */
  #page-container {
    padding-top: 80px !important; /* hoogte header inschatten en later fine-tunen */
  }
}

/* Kleine fix als je in de backend bent ingelogd (WP admin bar) */
@media (max-width: 980px) {
  body.admin-bar .et-l--header,
  body.admin-bar #main-header,
  body.admin-bar #main-header.et-fixed-header {
    top: 32px !important;
  }
}

/* =========================================
   DEMO-formulier – contactform-licht-desktop
   (alleen styling & spacing, layout laten we met rust)
   ========================================= */

/* [CF-LD-BASE] Basis: lettertype & tekstkleur */
.contactform-licht-desktop .gform_wrapper form {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #000;
}

/* [CF-LD-HEADINGS] Titel + beschrijving */
.contactform-licht-desktop .gform_wrapper .gform_heading .gform_title {
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 6px;
}

/* 10px buffer tussen beschrijving en eerste veld */
.contactform-licht-desktop .gform_wrapper .gform_heading .gform_description {
  margin: 0 0 10px !important;
}

/* =========================================
   VELDEN & LABELS
   ========================================= */

/* [CF-LD-LABELS] Labels compacter */
.contactform-licht-desktop .gform_wrapper .gfield_label {
  font-family: inherit;
  font-weight: 700;
  margin: 0 0 3px !important;
}

/* [CF-LD-FIELDS] Algemene veldspacing (verticale witruimte) */
.contactform-licht-desktop .gform_wrapper .gform_body .gfield {
  margin: 0 0 6px !important;   /* compact: 6px onder elk veld */
  padding: 0 !important;
}

/* [CF-LD-CONTAINERS] Inputcontainers zonder extra marge */
.contactform-licht-desktop .gform_wrapper .ginput_container {
  margin: 0 !important;
  padding: 0 !important;
}

/* [CF-LD-INPUTS] Inputs / select / textarea styling */
.contactform-licht-desktop .gform_wrapper .ginput_container input[type="text"],
.contactform-licht-desktop .gform_wrapper .ginput_container input[type="email"],
.contactform-licht-desktop .gform_wrapper .ginput_container input[type="tel"],
.contactform-licht-desktop .gform_wrapper .ginput_container input[type="url"],
.contactform-licht-desktop .gform_wrapper .ginput_container input[type="number"],
.contactform-licht-desktop .gform_wrapper .ginput_container select,
.contactform-licht-desktop .gform_wrapper .ginput_container textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  color: #111;
}

/* [CF-LD-FOCUS] Focus-states */
.contactform-licht-desktop .gform_wrapper .ginput_container input:focus,
.contactform-licht-desktop .gform_wrapper .ginput_container select:focus,
.contactform-licht-desktop .gform_wrapper .ginput_container textarea:focus {
  outline: none;
  border-color: #0D93D2;
  box-shadow: 0 0 0 3px rgba(13,147,210,.18);
}

/* [CF-LD-FULLWIDTH-FIELDS] Specifieke velden altijd volle breedte
   (o.a. "Voor welke machine(s) wil je een demo aanvragen?" en checkbox) */
.contactform-licht-desktop .gform_wrapper .gfield.gfield--type-select,
.contactform-licht-desktop .gform_wrapper .gfield.gfield--type-textarea,
.contactform-licht-desktop .gform_wrapper .gfield.gfield--type-consent,
.contactform-licht-desktop .gform_wrapper .gfield.gfield--type-checkbox,
.contactform-licht-desktop .gform_wrapper .gfield.gfield--width-full {
  width: 100% !important;
}

/* Extra klein beetje ruimte onder select/checkbox-blokken */
.contactform-licht-desktop .gform_wrapper .gfield.gfield--type-select,
.contactform-licht-desktop .gform_wrapper .gfield.gfield--type-consent,
.contactform-licht-desktop .gform_wrapper .gfield.gfield--type-checkbox {
  margin-bottom: 8px !important;
}

/* =========================================
   KNOP – GELE volledige breedte
   ========================================= */

/* [CF-LD-FOOTER] Footerafstand */
.contactform-licht-desktop .gform_wrapper .gform_footer {
  margin-top: 10px !important;   /* iets compacter boven de knop */
}

/* [CF-LD-BUTTON] Gele knopstijl – full width */
.contactform-licht-desktop .gform_wrapper .gform_footer .gform_button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background-color: #FFD046 !important;
  color: #000000 !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 7px 5px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: none !important;
}

/* [CF-LD-BUTTON-HOVER] Hover = zelfde als default (geen animaties) */
.contactform-licht-desktop .gform_wrapper .gform_footer .gform_button:hover,
.contactform-licht-desktop .gform_wrapper .gform_footer .gform_button:focus,
.contactform-licht-desktop .gform_wrapper .gform_footer .gform_button:active {
  background-color: #FFD046 !important;
  color: #000000 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* [CF-LD-GRID-SPACING] Compactere grid-gap voor desktop variant */
.contactform-licht-desktop .gform_wrapper .gform_body .gform_fields{
  /* zorg dat we de grid-gap expliciet bepalen */
  row-gap: 6px;
  column-gap: 16px;
  gap: 6px 16px;
}

/* Als dit formulier zowel .contactform-licht als .contactform-licht-desktop heeft,
   dan winnen we 100% zeker van de .contactform-licht-instelling: */
.contactform-licht.contactform-licht-desktop .gform_wrapper .gform_body .gform_fields{
  row-gap: 6px;
  column-gap: 16px;
  gap: 6px 16px;
}

/* =========================================
   Gravity Forms – Licht thema
   Scope: .contactform-licht
   ========================================= */
.contactform-licht .gform_wrapper form {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #111;
}

/* Grid: compacter (minder verticale ruimte) */
.contactform-licht .gform_wrapper .gform_body .gform_fields{
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 2 kolommen op desktop */
  gap: 12px 16px;                     /* compacter dan standaard */
}

/* Mobiel onder elkaar */
@media (max-width: 768px){
  .contactform-licht .gform_wrapper .gform_body .gform_fields{
    grid-template-columns: 1fr;
  }
}

/* Minder marge per veld */
.contactform-licht .gform_wrapper .gform_body .gfield{
  margin: 0 !important;
}

/* Labels compacter */
.contactform-licht .gform_wrapper .gfield_label{
  font-family: inherit;
  font-weight: 700;
  margin: 0 0 4px;                    /* was ~10–12px */
}

/* Inputs/selects/textarea consistent & compact */
.contactform-licht .gform_wrapper .ginput_container input[type="text"],
.contactform-licht .gform_wrapper .ginput_container input[type="email"],
.contactform-licht .gform_wrapper .ginput_container input[type="tel"],
.contactform-licht .gform_wrapper .ginput_container input[type="url"],
.contactform-licht .gform_wrapper .ginput_container input[type="number"],
.contactform-licht .gform_wrapper .ginput_container select,
.contactform-licht .gform_wrapper .ginput_container textarea{
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  padding: 14px 12px;                 /* iets lager dan standaard */
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  color: #111;
}

/* Focus subtiel */
.contactform-licht .gform_wrapper .ginput_container input:focus,
.contactform-licht .gform_wrapper .ginput_container select:focus,
.contactform-licht .gform_wrapper .ginput_container textarea:focus{
  outline: none;
  border-color: #0D93D2;
  box-shadow: 0 0 0 3px rgba(13,147,210,.18);
}

/* 10px ruimte onder de beschrijving vóór het eerste veld */
.contactform-licht .gform_wrapper .gform_heading .gform_description {
  margin: 0 0 10px;
}

/* Volledige-breedte velden (select/textarea etc.) automatisch laten spannen */
.contactform-licht .gform_wrapper .gfield--type-select,
.contactform-licht .gform_wrapper .gfield--type-textarea,
.contactform-licht .gform_wrapper .gfield--width-full{
  grid-column: 1 / -1;
}

/* Checkbox/voorwaarden net wat dichterbij */
.contactform-licht .gform_wrapper .gfield--type-consent,
.contactform-licht .gform_wrapper .gfield--type-checkbox{
  grid-column: 1 / -1;
  margin-top: 4px !important;
}

/* Footer/submit in hetzelfde raster en 100% breed */
.contactform-licht .gform_wrapper .gform_footer{
  grid-column: 1 / -1;                /* uitlijnen met velden */
  margin-top: 12px;                   /* compacter */
}

/* Gele knopstijl – contactform-licht */
.contactform-licht .gform_wrapper .gform_footer .gform_button {
  display: block !important;
  width: 100% !important;                /* volle breedte */
  text-align: center !important;
  background-color: #FFD046 !important;  /* geel */
  color: #000000 !important;             /* zwarte tekst */
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: none !important;
}

/* Hover exact hetzelfde (geen kleurverandering) */
.contactform-licht .gform_wrapper .gform_footer .gform_button:hover,
.contactform-licht .gform_wrapper .gform_footer .gform_button:focus,
.contactform-licht .gform_wrapper .gform_footer .gform_button:active {
  background-color: #FFD046 !important;
  color: #000000 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   DEMOFORMULIER (.contactform-licht-desktop)
   MOBIEL FIX — velden 100% breed
   ============================================================ */
/*@media (max-width: 768px) {*/

/* ============================================================
   NUCLEAR MOBILE OVERRIDE — Demo formulier full width
   Scope: .contactform-licht-desktop
   Zet ALLES op 1 kolom + 100% breed
   ============================================================ */
@media (max-width: 768px){

  /* 1) Forceer 1 kolom op de gform_fields wrapper */
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .gform_body .gform_fields{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* 2) Breek alle GF/Divi half/third/full width classes */
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .gform_body .gfield,
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .gform_body .gfield--width-half,
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .gform_body .gfield--width-third,
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .gform_body .gfield--width-quarter{
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Sommige themes zetten display:flex op ul/li → kill */
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .gform_body .gform_fields,
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .gform_body .gform_fields > li{
    display: block !important;
  }

  /* 4) Input containers & inputs ALWAYS full width */
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .ginput_container,
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] input,
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] select,
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] textarea{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5) Submit rij + knop full width */
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .gform_footer{
    width: 100% !important;
    display: block !important;
  }
  .contactform-licht-desktop .gform_wrapper form[id^="gform_"] .gform_footer .gform_button{
    width: 100% !important;
    display: block !important;
  }
}
	
/* ACF gallery (Divi Gallery module) – consistente grid */
.acf-gallery .et_pb_gallery_items{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 28px;
}
.acf-gallery .et_pb_gallery_items .et_pb_gallery_item {
width: 100% !important;
}

@media (max-width: 980px){
  .acf-gallery .et_pb_gallery_items{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .acf-gallery .et_pb_gallery_items{ grid-template-columns: 1fr; }
}

.acf-gallery .et_pb_gallery_item{
  margin: 0 !important; /* Divi zet soms margins */
}

.acf-gallery .et_pb_gallery_image{
  overflow: hidden;
  border-radius: 0;
}

.acf-gallery .et_pb_gallery_image img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.acf-gallery .et_pb_gallery_items 

.grecaptcha-badge { visibility: hidden; opacity: 0; }