.elementor-5884 .elementor-element.elementor-element-d62e417{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.45;--margin-top:-125px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;}.elementor-5884 .elementor-element.elementor-element-d62e417:not(.elementor-motion-effects-element-type-background), .elementor-5884 .elementor-element.elementor-element-d62e417 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-5884 .elementor-element.elementor-element-d62e417::before, .elementor-5884 .elementor-element.elementor-element-d62e417 > .elementor-background-video-container::before, .elementor-5884 .elementor-element.elementor-element-d62e417 > .e-con-inner > .elementor-background-video-container::before, .elementor-5884 .elementor-element.elementor-element-d62e417 > .elementor-background-slideshow::before, .elementor-5884 .elementor-element.elementor-element-d62e417 > .e-con-inner > .elementor-background-slideshow::before, .elementor-5884 .elementor-element.elementor-element-d62e417 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://sprankelendaandeslag.nl/wp-content/uploads/2024/11/WhatsApp-Image-2024-11-13-at-13.27.34-1.jpeg");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-5884 .elementor-element.elementor-element-b2e07d8{--display:flex;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5884 .elementor-element.elementor-element-b2e07d8.e-con{--align-self:center;}.elementor-5884 .elementor-element.elementor-element-bbced53{text-align:center;}.elementor-5884 .elementor-element.elementor-element-bbced53 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:#FFFFFF;}.elementor-5884 .elementor-element.elementor-element-aab2b6b{--divider-border-style:solid;--divider-color:#FFFFFF26;--divider-border-width:1px;}.elementor-5884 .elementor-element.elementor-element-aab2b6b .elementor-divider-separator{width:100%;}.elementor-5884 .elementor-element.elementor-element-aab2b6b .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-5884 .elementor-element.elementor-element-2036ad1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:5%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;}.elementor-5884 .elementor-element.elementor-element-2036ad1:not(.elementor-motion-effects-element-type-background), .elementor-5884 .elementor-element.elementor-element-2036ad1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-1ed29bd );}.elementor-5884 .elementor-element.elementor-element-0303ad7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:90px 90px;--row-gap:90px;--column-gap:90px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5884 .elementor-element.elementor-element-6bc9ce3{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-5884 .elementor-element.elementor-element-d62e417{--content-width:1140px;}.elementor-5884 .elementor-element.elementor-element-b2e07d8{--width:65%;}}@media(max-width:1024px){.elementor-5884 .elementor-element.elementor-element-d62e417{--padding-top:160px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-5884 .elementor-element.elementor-element-bbced53 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-5884 .elementor-element.elementor-element-2036ad1{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-5884 .elementor-element.elementor-element-0303ad7{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}}@media(max-width:767px){.elementor-5884 .elementor-element.elementor-element-d62e417{--padding-top:150px;--padding-bottom:40px;--padding-left:30px;--padding-right:30px;}.elementor-5884 .elementor-element.elementor-element-bbced53 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-5884 .elementor-element.elementor-element-2036ad1{--padding-top:40px;--padding-bottom:40px;--padding-left:30px;--padding-right:30px;}.elementor-5884 .elementor-element.elementor-element-0303ad7{--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-5884 .elementor-element.elementor-element-6bc9ce3{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for shortcode, class: .elementor-element-16d489f *//* ============================================================
   Thema-test - opmaak formulier
   Sprankelend aan de Slag

   Alle .elementor-5884 .elementor-element.elementor-element-16d489fs mikken op de klassen die Gravity Forms zelf
   uitspuugt. Er is geen eigen HTML nodig: zet de shortcode op
   de pagina en laad dit bestand.

       [gravityform id="2" title="false" description="false" ajax="true"]

   Optioneel: zet de shortcode in <div class="testdoos"> ... </div>
   voor het witte kader. Laat je dat weg, dan valt het formulier
   direct op de achtergrond van de pagina.
   ============================================================ */

:root{
  --sds-inkt:#4A1030;
  --sds-pruim:#6B3A4F;
  --sds-koraal:#E8857A;
  --sds-koraal-diep:#C25E63;
  --sds-rand:#E3CDD6;
  --sds-rand-zacht:#EADCE3;
  --sds-display:'Fraunces',Georgia,serif;
  --sds-body:'Poppins',system-ui,sans-serif;
}

/* ---------- optioneel kader om het formulier ---------- */
.testdoos{
  width:min(100%,720px);
  margin-inline:auto;
  background:#fff;
  border-radius:1.6rem;
  padding:clamp(1.5rem,4vw,3.2rem);
  box-shadow:0 30px 60px -40px rgba(74,16,48,.45);
}

/* ---------- Gravity Forms Theme Framework (2.7 en nieuwer) ---------- */
.gform-theme--framework,
.gform_wrapper.gravity-theme{
  --gf-color-primary:#E8857A;
  --gf-color-primary-rgb:232,133,122;
  --gf-color-primary-contrast:#fff;
  --gf-color-primary-darker:#C25E63;
  --gf-color-primary-lighter:#F2AFA7;
  --gf-color-secondary:#FFFFFF;
  --gf-color-secondary-contrast:#4A1030;
  --gf-color-out-ctrl-light-darker:#E3CDD6;
  --gf-color-in-ctrl-primary:#E8857A;
  --gf-ctrl-radius:12px;
  --gf-ctrl-btn-radius:999px;
  --gf-ctrl-border-color:#E3CDD6;
  --gf-ctrl-label-color-primary:#4A1030;
  --gf-font-family-base:'Poppins',system-ui,sans-serif;
  --gf-local-radius:12px;
}

.gform_wrapper{
  font-family:var(--sds-body);
  font-weight:300;
  line-height:1.7;
  color:var(--sds-inkt);
}

/* ---------- afstand tussen de vragen ---------- */
.gform_wrapper .gform_fields{display:grid;gap:2.4rem}

/* ---------- vraag ---------- */
.gform_wrapper .gfield_label{
  display:block;
  font-family:var(--sds-display);
  font-weight:500;
  font-size:1.24rem;
  line-height:1.3;
  color:var(--sds-inkt);
  margin:0 0 .35rem;
}
.gform_wrapper .gfield_required{color:var(--sds-koraal);font-family:var(--sds-body)}
.gform_wrapper .gfield_description{
  font-size:.84rem;
  color:var(--sds-pruim);
  margin:0 0 .9rem;
  padding:0;
}

/* ---------- tussenkop boven de contactgegevens ---------- */
.gform_wrapper .gsection{
  border:0;
  border-top:1px solid var(--sds-rand);
  padding-top:2.4rem;
  margin:.6rem 0 0;
}
.gform_wrapper .gsection_title{
  font-family:var(--sds-display);
  font-weight:500;
  font-size:1.5rem;
  margin:0 0 .3rem;
  color:var(--sds-inkt);
}
.gform_wrapper .gsection_description{
  font-size:.84rem;
  color:var(--sds-pruim);
  padding:0;
}

/* ---------- antwoorden als aanklikbare rijen ----------
   Het echte vakje wordt NIET verstopt. Het krijgt appearance:none
   en wordt zelf het bolletje. Zo staat er nergens een onzichtbaar
   element dat de browser bij focus in beeld probeert te scrollen,
   en kan geen enkele andere regel het van zijn plek duwen.
   ------------------------------------------------------- */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox{
  display:grid;
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none;
}

.gform_wrapper .gchoice{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  margin:0;
  padding:.85rem 1.1rem;
  border:1px solid var(--sds-rand-zacht);
  border-radius:12px;
  background:#fff;
  transition:border-color .15s ease,background .15s ease;
}
.gform_wrapper .gchoice:hover{border-color:var(--sds-koraal);background:#FEF8F7}

/* rij kleurt mee zodra het vakje aan staat */
.gform_wrapper .gchoice:has(input:checked){
  border-color:var(--sds-koraal);
  background:#FDF1EF;
}

.gform_wrapper .gchoice input[type=radio],
.gform_wrapper .gchoice input[type=checkbox]{
  /* !important is hier bewust: als GF, Elementor of het thema het vakje
     absoluut positioneert, springt de pagina bij elke klik naar dat vakje toe.
     Deze twee regels houden het vakje op zijn plek naast het antwoord. */
  position:static !important;
  inset:auto !important;
  transform:none !important;
  clip-path:none !important;
  flex:0 0 auto;
  appearance:none;
  -webkit-appearance:none;
  width:1.15rem;
  height:1.15rem;
  margin:.26rem 0 0;
  padding:0;
  border:1.5px solid #D3B6C1;
  background:#fff;
  opacity:1;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.gform_wrapper .gchoice input[type=radio]{border-radius:50%}
.gform_wrapper .gchoice input[type=checkbox]{border-radius:4px}
.gform_wrapper .gchoice input:checked{
  background:var(--sds-koraal);
  border-color:var(--sds-koraal);
  box-shadow:inset 0 0 0 3px #fff;
}
.gform_wrapper .gchoice input:focus-visible{
  outline:3px solid var(--sds-koraal);
  outline-offset:2px;
}

.gform_wrapper .gchoice label{
  flex:1 1 auto;
  margin:0;
  padding:0;
  line-height:1.5;
  cursor:pointer;
  font-weight:300;
}

/* ---------- invoervelden ---------- */
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel]{
  width:100%;
  font-family:var(--sds-body);
  font-size:1rem;
  color:var(--sds-inkt);
  padding:.85rem 1.05rem;
  border:1px solid var(--sds-rand);
  border-radius:12px;
  background:#fff;
}
.gform_wrapper input[type=text]:focus,
.gform_wrapper input[type=email]:focus,
.gform_wrapper input[type=tel]:focus{
  outline:3px solid var(--sds-koraal);
  outline-offset:2px;
  border-color:var(--sds-koraal);
}
.gform_wrapper .ginput_complex{display:grid;gap:.7rem;grid-template-columns:1fr 1fr}
.gform_wrapper .ginput_complex span{display:block}
.gform_wrapper .gform-field-label--type-sub{
  font-size:.78rem;
  color:var(--sds-pruim);
  font-weight:400;
}

/* ---------- verzendknop ---------- */
.gform_wrapper .gform_footer{margin-top:2.6rem;padding:0}
.gform_wrapper .gform_button{
  width:100%;
  font-family:var(--sds-body);
  font-weight:500;
  font-size:1.02rem;
  background:var(--sds-koraal);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:1.05rem 2.4rem;
  cursor:pointer;
  box-shadow:0 8px 24px -12px rgba(232,133,122,.9);
  transition:transform .18s ease;
}
.gform_wrapper .gform_button:hover{transform:translateY(-2px)}
.gform_wrapper .gform_button:focus-visible{
  outline:3px solid var(--sds-koraal-diep);
  outline-offset:3px;
}

/* ---------- validatie ---------- */
.gform_wrapper .gform_validation_errors{
  border-radius:12px;
  border-color:var(--sds-koraal-diep);
  background:#FDF1EF;
}
.gform_wrapper .gform_validation_errors h2{
  font-family:var(--sds-body);
  font-size:.95rem;
  color:var(--sds-koraal-diep);
}
.gform_wrapper .gfield_error .gfield_label{color:var(--sds-koraal-diep)}
.gform_wrapper .gfield_error .gchoice label{border-color:var(--sds-koraal-diep)}
.gform_wrapper .validation_message{
  font-size:.84rem;
  color:var(--sds-koraal-diep);
  margin-top:.5rem;
  background:none;
  border:0;
  padding:0;
}

/* ---------- klein scherm ---------- */
@media (max-width:520px){
  .gform_wrapper .ginput_complex{grid-template-columns:1fr}
  .gform_wrapper .gfield_label{font-size:1.12rem}
  .gform_wrapper .gform_fields{gap:2rem}
}

@media (prefers-reduced-motion:reduce){
  .gform_wrapper *,
  .gform_wrapper *::before{transition-duration:.001ms !important}
}/* End custom CSS */