PERI

/* ============================================================ Prijsindicatie slide-in (GF 10): voortgang + stap 1 "Ik ben" ============================================================ */ /* Voortgangsbalk: dunne lijn in huisstijl, geen blauw, geen percentage */ #gform_10 .gf_progressbar_wrapper { margin: 0 0 28px 0 !important; padding: 0 !important; } #gform_10 .gf_progressbar_title { font-family: "Roboto", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: #525149 !important; margin: 0 0 8px 0 !important; padding: 0 !important; } #gform_10 .gf_progressbar { height: 3px !important; background: #cfcdc6 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: hidden !important; } #gform_10 .gf_progressbar_percentage { height: 3px !important; min-width: 0 !important; padding: 0 !important; line-height: 3px !important; background: #00b0a5 !important; border-radius: 0 !important; box-shadow: none !important; transition: width .3s ease !important; } #gform_10 .gf_progressbar_percentage span { display: none !important; } /* Vraag */ #gform_10 .ik_ben legend.gfield_label { font-family: "Roboto", sans-serif !important; font-size: 20px !important; font-weight: 700 !important; color: #3d3935 !important; margin: 0 0 14px 0 !important; padding: 0 !important; } /* Twee keuzekaarten naast elkaar */ #gform_10 .ik_ben .gfield_radio { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } #gform_10 .ik_ben .gchoice { position: relative !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* Native radio onzichtbaar, maar bereikbaar voor toetsenbord */ #gform_10 .ik_ben .gchoice input[type=radio] { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; pointer-events: none !important; } /* Het label is de kaart */ #gform_10 .ik_ben .gchoice label { display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; max-width: none !important; min-height: 64px !important; margin: 0 !important; padding: 18px 20px !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #cfcdc6 !important; border-radius: 0 !important; font-family: "Roboto", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; color: #3d3935 !important; cursor: pointer !important; transition: border-color .15s ease, box-shadow .15s ease !important; } /* Eigen radio-bolletje */ #gform_10 .ik_ben .gchoice label::before { content: "" !important; flex: 0 0 auto !important; width: 20px !important; height: 20px !important; box-sizing: border-box !important; border: 2px solid #cfcdc6 !important; border-radius: 50% !important; background: #ffffff !important; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important; } /* Hover */ #gform_10 .ik_ben .gchoice label:hover { border-color: #3d3935 !important; } #gform_10 .ik_ben .gchoice label:hover::before { border-color: #3d3935 !important; } /* Gekozen */ #gform_10 .ik_ben .gchoice input[type=radio]:checked + label { border-color: #00b0a5 !important; box-shadow: inset 0 0 0 1px #00b0a5 !important; } #gform_10 .ik_ben .gchoice input[type=radio]:checked + label::before { border-color: #00b0a5 !important; background: #00b0a5 !important; box-shadow: inset 0 0 0 4px #ffffff !important; } /* Toetsenbordfocus */ #gform_10 .ik_ben .gchoice input[type=radio]:focus-visible + label { outline: 2px solid #00b0a5 !important; outline-offset: 2px !important; } /* Stap 1 heeft geen "Volgende"-knop meer: de keuze is de knop */ #gform_10 #gform_page_10_1 .gform_page_footer { display: none !important; } /* Mobiel: kaarten onder elkaar */ @media (max-width: 480px) { #gform_10 .ik_ben .gfield_radio { grid-template-columns: 1fr !important; } } /* Stap 2: knoppenrij */ #gform_10 #gform_page_10_2 .gform_page_footer { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 24px !important; margin: 28px 0 0 0 !important; padding: 0 !important; } /* "Vorige": tekstlink, geen knop */ #gform_10 #gform_page_10_2 .gform_previous_button { order: 2 !important; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Roboto", sans-serif !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1 !important; color: #525149 !important; text-decoration: underline !important; text-underline-offset: 3px !important; cursor: pointer !important; } #gform_10 #gform_page_10_2 .gform_previous_button:hover { color: #3d3935 !important; background: transparent !important; } /* "Send request": zelfde knop als de rest van de site */ #gform_10 #gform_page_10_2 .gform_button[type=submit] { order: 1 !important; width: auto !important; min-width: 150px !important; height: 45px !important; margin: 0 !important; padding: 0 28px !important; background: #00b0a5 !important; border: 1px solid #00b0a5 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Roboto", sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; color: #ffffff !important; cursor: pointer !important; transition: background .15s ease, border-color .15s ease !important; } #gform_10 #gform_page_10_2 .gform_button[type=submit]:hover { background: #00988f !important; border-color: #00988f !important; color: #ffffff !important; } /* Mobiel: knop over de volle breedte, terug-link eronder */ @media (max-width: 480px) { #gform_10 #gform_page_10_2 .gform_page_footer { flex-wrap: wrap !important; gap: 16px !important; } #gform_10 #gform_page_10_2 .gform_button[type=submit] { width: 100% !important; } } (function () { document.addEventListener('click', function (e) { var input = e.target; if (!input || !input.matches || !input.matches('#gform_10 .ik_ben input[type=radio]')) { return; } var page = input.closest('.gform_page'); var next = page ? page.querySelector('.gform_next_button') : null; if (!next) { return; } setTimeout(function () { next.click(); }, 180); }, true); })(); (function ($) { $(document).on('elementor/popup/show', function (event, popupId, popup) { $('.gform_wrapper', popup.$element).each(function () { const gformId = $(this).attr('id').replace('gform_wrapper_', ''); if (gformId) { $(document).trigger('gform_post_render', [parseInt(gformId), 1]); if (typeof gformInitDatepicker === 'function') { gformInitDatepicker(); // Reinitialize date pickers if applicable } } }); }); })(jQuery);