/* Gravity Forms in de opmaak van de site.
   De eigen stylesheet van de plugin staat uit (inc/formulieren.php). Het formulier heeft
   de klasse .form, dus de regels voor velden uit uitendaal.css gelden vanzelf; hier staat
   wat nodig is om de opbouw van Gravity Forms op het ontwerp te laten passen. */

/* In het formulierblok staat de uitleg links en het formulier rechts. */
@media(min-width:980px){
  .formblok>.gform_wrapper{grid-column:2;grid-row:1 / span 12;margin-top:0}
}
.gform_wrapper{margin-top:24px}
.gform_wrapper form.form{margin-top:0}
.gform_wrapper .gform_heading,.gform_wrapper .gform_required_legend{display:none}

/* Velden: twee naast elkaar waar het formulier dat vraagt, anders onder elkaar. */
.gform_wrapper .gform_fields{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:0;margin:0;padding:0;list-style:none}
.gform_wrapper .gfield{grid-column:span 12;margin:0 0 20px;padding:0;border:0;min-width:0}
@media(min-width:620px){.gform_wrapper .gfield.gfield--width-half{grid-column:span 6}}
.gform_wrapper .gfield_label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;padding:0;font-size:inherit}
.gform_wrapper legend.gfield_label{margin-bottom:8px}
.gform_wrapper .gfield_description{margin:6px 0 0;font-size:.9375rem;color:var(--muted)}
.gform_wrapper .ginput_container{margin:0}

/* Keuzerondjes en vinkjes: grote aanraakvlakken, het vakje links. */
.gform_wrapper .gfield_radio,.gform_wrapper .gfield_checkbox{margin:0;padding:0}
.gform_wrapper .gchoice{display:flex;gap:12px;align-items:center;min-height:44px;padding:6px 0}
.gform_wrapper .gchoice label{font-weight:400;cursor:pointer;margin:0}
.gform_wrapper .gchoice input{flex:none;width:24px;height:24px;min-height:0;margin:0;padding:0;accent-color:var(--accent)}
@media(min-width:620px){.gform_wrapper .gfield_checkbox{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}}

/* Wat een bezoeker niet hoort te zien: de spamval en verborgen velden. Uit beeld, maar
   niet display:none, want dat vullen robots juist wel in. */
.gform_wrapper .gform_validation_container,.gform_wrapper .gfield--type-honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.gform_wrapper .gform_hidden,.gform_wrapper .gfield--type-hidden,.gform_wrapper .gfield_visibility_hidden,.gform_wrapper .screen-reader-text,.gform_wrapper .gform-loader,.gform_wrapper .gform_ajax_spinner{display:none}
.gform_wrapper .gform_footer,.gform_wrapper .gform_page_footer{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.gform_wrapper .gform_page_footer .btn-row{margin:0}

/* Stappen van het offerteformulier. */
.gform_wrapper .gf_progressbar_wrapper,.gform_wrapper .gf_page_steps{display:none}
.gform_wrapper .gfield--type-html .form__stapkop{margin:0}
.gform_wrapper .form__terug{order:2}

/* Foutmeldingen. */
.gform_wrapper .gfield_validation_message,.gform_wrapper .validation_message{margin:6px 0 0;padding:0;font-size:.9375rem;font-weight:600;color:var(--fout);background:none;border:0}
.gform_wrapper .gfield_error input,.gform_wrapper .gfield_error select,.gform_wrapper .gfield_error textarea{border-color:var(--fout);box-shadow:0 0 0 1px var(--fout)}
.gform_wrapper .gform_validation_errors{margin:0 0 22px;padding:0;border:0;background:none;box-shadow:none}
.gform_wrapper .gform_validation_errors>h2{display:none}
.gform_confirmation_message{padding:16px 20px;border-radius:var(--r-card);background:var(--urgent-soft);border:1px solid var(--urgent-line)}

/* "Iets toevoegen": de vrije velden achter een uitklapper (formulier.js bouwt hem). */
.gform_wrapper .gfield.form__meer-vak{margin:0}
.gform_wrapper .form__meer .gform_fields{display:block}
.gform_wrapper .form__meer .gfield:last-child{margin-bottom:0}

/* De kleuren voor fouten stonden in het prototype alleen op de formulierpagina's. */
:root{--fout:#A3241F;--fout-zacht:#FBEEEC;--fout-lijn:#E3BDB8}