{"id":145,"date":"2024-12-16T14:03:54","date_gmt":"2024-12-16T14:03:54","guid":{"rendered":"https:\/\/miers.be\/?page_id=145"},"modified":"2025-07-14T08:13:21","modified_gmt":"2025-07-14T08:13:21","slug":"onderhoud-afspraak","status":"publish","type":"page","link":"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/","title":{"rendered":"Onderhoud afspraak"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; background_enable_color=&#8221;off&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_stops=&#8221;rgba(0, 0, 0, 0.35) 35%|rgba(0,0,0,0.35) 58%&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;https:\/\/miers.be\/wp-content\/uploads\/2025\/07\/Banner_onderhoud.jpg&#8221; min_height=&#8221;20vh&#8221; custom_padding=&#8221;||0px||false|false&#8221; custom_css_main_element=&#8221;display:flex;||flex-direction:column;&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row make_equal=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;100px||||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; module_class=&#8221;inline-buttons&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; text_text_color=&#8221;rgba(255,255,255,0.79)&#8221; text_font_size=&#8221;17px&#8221; header_font=&#8221;&#8211;et_global_heading_font||||||||&#8221; header_text_color=&#8221;#FFFFFF&#8221; header_font_size=&#8221;60px&#8221; header_letter_spacing=&#8221;3px&#8221; header_line_height=&#8221;1.1em&#8221; header_2_text_color=&#8221;#FFFFFF&#8221; header_font_size_tablet=&#8221;40px&#8221; header_font_size_phone=&#8221;30px&#8221; header_font_size_last_edited=&#8221;on|phone&#8221; custom_css_free_form=&#8221;h3 {||  padding-bottom:30px;||}&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>Plan je interventie in<\/h1>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; width=&#8221;90%&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text module_id=&#8221;AfspraakInboeken&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; header_2_text_color=&#8221;#0C5453&#8243; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2>Onderhoud inboeken<\/h2>\n<p>[\/et_pb_text][et_pb_code disabled_on=&#8221;on|on|on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; disabled=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;]<!-- [et_pb_line_break_holder] --><div class=\"bootstrap-wrapper\">\n    <!-- MultiStep Form -->\n    <div class=\"container-fluid\" id=\"grad1\">\n        <div class=\"row justify-content-center mt-0\">\n            <div class=\"col-md-12 text-center p-0 mt-3 mb-2\">\n                <div class=\"card px-0 pt-4 pb-0 mt-3 mb-3\">\n                    <div class=\"row\">\n                        <div class=\"col-md-12 mx-0\">\n                            <form id=\"appointment_form\">\n                                <!-- progressbar -->\n                                <ul id=\"progressbar\">\n                                    <li class=\"active\" id=\"account\"><strong>Gegevens wagen<\/strong><\/li>\n                                    <li id=\"personal\"><strong>Interventies<\/strong><\/li>\n                                    <li id=\"payment\"><strong>Datum en uur<\/strong><\/li>\n                                    <li id=\"confirm\"><strong>Persoonsgegevens<\/strong><\/li>\n                                    <li id=\"confirm\"><strong>Bevestiging<\/strong><\/li>\n                                <\/ul>\n                                <!-- fieldsets -->\n                                <fieldset>\n                                    <div class=\"form-card\">\n                                        <h2 class=\"fs-title\">Voer de gegevens van jouw wagen in<\/h2>\n                                        <input type=\"text\" name=\"license_plate\" placeholder=\"Nummerplaat\" required \/>\n                                        <input type=\"number\" name=\"mileage\" placeholder=\"Kilometerstand\" required \/>\n                                        <input type=\"text\" name=\"brand\" placeholder=\"Merk\" \/>\n                                        <input type=\"text\" name=\"vin_number\" placeholder=\"VIN Nummer\" \/>\n\n                                        <div class=\"form-group\">\n                                            <select class=\"form-control\" id=\"car_type\" name=\"car_type\" required>\n                                                <option value=\"\" selected disabled>Please select car type<\/option>\n                                                                                                    <option value=\"\"><\/option>\n\n                                                                                                    <option value=\"\"><\/option>\n\n                                                                                            <\/select>\n                                        <\/div>\n                                    <\/div>\n                                    <input type=\"button\" name=\"next\" class=\"next action-button\" value=\"Volgende\" \/>\n                                <\/fieldset>\n                                <fieldset>\n                                    <div class=\"form-card\">\n                                        <h2 class=\"fs-title\">Selecteer tot 3 interventies voor jouw wagen<\/h2>\n                                        <h5>Interventies<\/h5>\n                                        <ul class=\"appointment_intervention_list hi_intervention_list\">\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"onderhoud\" id=\"interv1\" \/>\n                                                    <label for=\"interv1\">\n                                                        <span>Onderhoud<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_onderhoud.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"technische-keuring\" id=\"interv2\" \/>\n                                                    <label for=\"interv2\">\n                                                        <span>Technische keuring<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_keuring.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"check-up\" id=\"interv3\" \/>\n                                                    <label for=\"interv3\">\n                                                        <span>Check-up<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"olie-verversen\" id=\"interv4\" \/>\n                                                    <label for=\"interv4\">\n                                                        <span>Olie verversen<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup_adv.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"banden\" id=\"interv5\" \/>\n                                                    <label for=\"interv5\">\n                                                        <span>Banden<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_banden.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"schokdempers\" id=\"interv6\" \/>\n                                                    <label for=\"interv6\">\n                                                        <span>Schokdempers<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_schokdempers.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"remmen\" id=\"interv7\" \/>\n                                                    <label for=\"interv7\">\n                                                        <span>Remmen<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_remmen.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"koplampen\" id=\"interv8\" \/>\n                                                    <label for=\"interv8\">\n                                                        <span>Koplampen<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_koplampen.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"centrale-vergrendeling-alarm\" id=\"interv9\" \/>\n                                                    <label for=\"interv9\">\n                                                        <span>Centrale vergrendeling & alarm<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/icon-faq-vraag.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"uitlaat\" id=\"interv10\" \/>\n                                                    <label for=\"interv10\">\n                                                        <span>Uitlaat<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"motor\" id=\"interv11\" \/>\n                                                    <label for=\"interv11\">\n                                                        <span>Motor<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"versnellingsbak\" id=\"interv12\" \/>\n                                                    <label for=\"interv12\">\n                                                        <span>Versnellingsbak<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"koelsysteem\" id=\"interv13\" \/>\n                                                    <label for=\"interv13\">\n                                                        <span>Koelsysteem<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"batterij\" id=\"interv14\" \/>\n                                                    <label for=\"interv14\">\n                                                        <span>Batterij<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_batterij.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"elektrische-problemen\" id=\"interv15\" \/>\n                                                    <label for=\"interv15\">\n                                                        <span>Elektrische problemen<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"airconditioning\" id=\"interv16\" \/>\n                                                    <label for=\"interv16\">\n                                                        <span>Airconditioning<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_airco.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"stuur\" id=\"interv17\" \/>\n                                                    <label for=\"interv17\">\n                                                        <span>Stuur<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"luchtleidingen\" id=\"interv18\" \/>\n                                                    <label for=\"interv18\">\n                                                        <span>Luchtleidingen<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"laadklep\" id=\"interv19\" \/>\n                                                    <label for=\"interv19\">\n                                                        <span>Laadklep<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"tachygraaf\" id=\"interv20\" \/>\n                                                    <label for=\"interv20\">\n                                                        <span>Tachygraaf<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"carrosserie\" id=\"interv21\" \/>\n                                                    <label for=\"interv21\">\n                                                        <span>carrosserie<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_carrosserie.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"glasbreuk\" id=\"interv22\" \/>\n                                                    <label for=\"interv22\">\n                                                        <span>Glasbreuk<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_glasbreuk.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"truckwash\" id=\"interv23\" \/>\n                                                    <label for=\"interv23\">\n                                                        <span>Truckwash<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/interventie_checkup.png\" \/><\/label>\n                                                <\/li>\n                                                                                            <li>\n                                                    <input type=\"checkbox\" name=\"interventions[]\" value=\"test-e\" id=\"interv24\" \/>\n                                                    <label for=\"interv24\">\n                                                        <span>test e<\/span>\n                                                        <img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/plugins\/-YY - car plugin\/assets\/images\/interventions\/car-door.png\" \/><\/label>\n                                                <\/li>\n                                            \n                                        <\/ul>\n                                        <h5>Meer interventies<\/h5>\n                                        <!-- <button type=\"button\" class=\"btn btn-info btn-lg\" data-toggle=\"modal\" data-target=\"#myModal\">Create interventions<\/button> -->\n\n                                        <ul class=\"appointment_intervention_list meer_intervention_list\">\n\n                                            \n                                        <\/ul>\n                                    <\/div>\n                                    <input type=\"button\" name=\"previous\" class=\"previous action-button-previous\" value=\"Vorige\" \/>\n                                    <input type=\"button\" name=\"next\" class=\"next action-button\" value=\"Volgende\" \/>\n                                <\/fieldset>\n                                <fieldset>\n                                    <div class=\"form-card\">\n                                        <h2 class=\"fs-title\">Selecteer datum en uur<\/h2>\n                                        <h4>Let op! Dit is een aanvraag om een afspraak vast te leggen, deze moet eerst bevestigd worden. Wacht op de bevestiging vanje verdeler voordat je naar de werkplaats komt.<\/h4>\n                                        <div class=\"form-group\">\n                                            <input type=\"text\" value=\"\" id=\"datetimepicker\" name=\"datetime\" placeholder=\"Datum en uur\" \/>\n                                        <\/div>\n                                        <div class=\"form-group\">\n                                            <label for=\"mobility_solution\">Mobility solutions:<\/label>\n                                            <select class=\"form-control\" id=\"mobility_solution\" name=\"mobility_solution\">\n                                                <option value=\"wait\">Ik zal wachten<\/option>\n                                                <option value=\"replacement_car\">Ik wil een vervangwagen<\/option>\n                                                <option value=\"replacement_bike\">Ik wil een vervangfiets<\/option>\n                                            <\/select>\n                                        <\/div><br><br>\n                                    <\/div>\n                                    <input type=\"button\" name=\"previous\" class=\"previous action-button-previous\" value=\"Vorige\" \/>\n                                    <input type=\"button\" name=\"make_payment\" class=\"next action-button\" value=\"Volgende\" \/>\n                                <\/fieldset>\n                                <fieldset name=\"customer_information\">\n                                    <div class=\"form-card\">\n                                        <h2 class=\"fs-title\">Controleer en vul je gegevens aan<\/h2>\n                                        <div class=\"form-group\">\n                                            <label class=\"radio-inline\">\n                                                <input type=\"radio\" name=\"private_professional\" value=\"private\" checked>Een particulier\n                                            <\/label>\n                                            <label class=\"radio-inline\">\n                                                <input type=\"radio\" name=\"private_professional\" value=\"professional\">Een professional\n                                            <\/label>\n                                        <\/div>\n                                        <div class=\"company_tax_wrapper\" style=\"display: none;\">\n                                            <div class=\"form-group\">\n                                                <label for=\"company_name\">Company Name:<\/label>\n                                                <input name=\"company_name\" class=\"form-control\" id=\"company_name\">\n                                            <\/div>\n                                            <div class=\"form-group\">\n                                                <label for=\"tax_number\">TAX Number:<\/label>\n                                                <input name=\"tax_number\" class=\"form-control\" id=\"tax_number\">\n                                            <\/div>\n                                        <\/div>\n\n                                        <div class=\"form-group\">\n                                            <label for=\"fname\">Voornaam:<\/label>\n                                            <input name=\"fname\" class=\"form-control\" id=\"fname\">\n\n                                            <label for=\"lname\">Achternaam:<\/label>\n                                            <input name=\"lname\" class=\"form-control\" id=\"lname\">\n                                        <\/div>\n                                        <div class=\"form-group\">\n                                            <label for=\"email\">E-mailadres:<\/label>\n                                            <input name=\"email\" class=\"form-control\" id=\"email\" required>\n\n                                            <label for=\"telephone\">Telefoon:<\/label>\n                                            <input name=\"telephone\" class=\"form-control\" id=\"telephone\">\n                                        <\/div>\n\n\n                                        <div class=\"form-group\">\n                                            <label for=\"message\">Boodschap (optioneel):<\/label>\n                                            <textarea class=\"form-control\" rows=\"5\" id=\"message\" name=\"message\"><\/textarea>\n                                        <\/div>\n                                        <p>Ik ga ermee akkoord om aanbiedingen en promoties te ontvangen met betrekking tot de diensten en producten van Miers.be:<\/p>\n                                        <div class=\"form-group\">\n                                            Via E-mail\n                                            <label class=\"radio-inline\">\n                                                <input type=\"radio\" name=\"by_email\" value=\"1\" checked>Ja\n                                            <\/label>\n                                            <label class=\"radio-inline\">\n                                                <input type=\"radio\" name=\"by_email\" value=\"\">Nee\n                                            <\/label>\n                                        <\/div>\n                                        <div class=\"form-group\">\n                                            <label class=\"radio-inline\">\n                                                <input type=\"checkbox\" name=\"account_create\" value=\"1\">Create Account\n                                            <\/label>\n                                        <\/div>\n                                        <div class=\"form-group\">\n                                            <label class=\"radio-inline\">\n                                                <input type=\"checkbox\" name=\"agree_privacy\" value=\"1\" required>Agree to privacy policy\n                                            <\/label>\n                                        <\/div>\n                                    <\/div>\n                                    <input type=\"button\" name=\"previous\" class=\"previous action-button-previous\" value=\"Vorige\" \/>\n                                    <input type=\"submit\" name=\"make_payment\" class=\"next action-button\" value=\"Bevestig\" \/>\n                                <\/fieldset>\n                                <fieldset name=\"success\">\n                                    <div class=\"form-card\">\n                                        <h2 class=\"fs-title text-center\">Je afspraakaanvraag is geregistreerd<\/h2>\n                                        We hebben je aanvraag goed ontvangen. Een van onze raadgevers zal je binnenkort contacteren om je afspraak te bevestigen en de praktische details te regelen.\n                                        <br><br>\n                                        <div class=\"row justify-content-center\">\n                                            <div class=\"col-3\" style=\"display: flex; justify-content: center;\">\n                                                <img decoding=\"async\" src=\"https:\/\/img.icons8.com\/color\/96\/000000\/ok--v2.png\" height=\"70px\" width=\"70px\">\n                                            <\/div>\n                                        <\/div>\n                                        <br>Let op! Dit is een aanvraag om een afspraak vast te leggen, deze moet eerst bevestigd worden. Wacht op de bevestiging vanje verdeler voordat je naar de werkplaats komt.\n                                        <br>\n                                    <\/div>\n                                <\/fieldset>\n                            <\/form>\n                            <!-- Modal -->\n                            <div id=\"myModal\" class=\"modal fade\" role=\"dialog\">\n                                <div class=\"modal-dialog\">\n\n                                    <!-- Modal content-->\n                                    <div class=\"modal-content\">\n                                        <div class=\"modal-header\">\n                                            <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;<\/button>\n                                            <h4 class=\"modal-title\">Create intervension<\/h4>\n                                        <\/div>\n                                        <div class=\"modal-body\">\n                                            <form class=\"\" action=\"https:\/\/miers.be\/wp-admin\/admin-post.php\" method=\"POST\" enctype=\"multipart\/form-data\">\n                                                <input type=\"hidden\" name=\"action\" value=\"yy_make_intervention\">\n                                                <input type=\"hidden\" id=\"yy_make_intervention\" name=\"yy_make_intervention\" value=\"230442b1ac\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/nl\/wp-json\/wp\/v2\/pages\/145\" \/>                                                <div class=\"form-group\">\n                                                    <label for=\"name\">Name<\/label>\n                                                    <input type=\"text\" class=\"form-control\" id=\"name\" name=\"name\" required>\n                                                <\/div>\n                                                <div class=\"form-group\">\n                                                    <label for=\"email\">Email:<\/label>\n                                                    <input type=\"text\" class=\"form-control\" id=\"email\" name=\"email\" required>\n                                                <\/div>\n                                                <div class=\"form-group\">\n                                                    <label for=\"icon\">Icon:<\/label>\n                                                    <input type=\"file\" class=\"form-control\" id=\"icon\" name=\"icon\">\n                                                <\/div>\n                                                <button type=\"submit\" class=\"btn btn-default\">Submit<\/button>\n                                            <\/form>\n                                        <\/div>\n                                        <div class=\"modal-footer\">\n                                            <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button>\n                                        <\/div>\n                                    <\/div>\n\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code disabled_on=&#8221;on|on|on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; disabled=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;]<!-- === CONSOLIDEERDE MULTI-STEP LOGICA + localStorage + flatpickr === --><!-- [et_pb_line_break_holder] --><!-- 1) zorg dat flatpickr.js vooraf is opgenomen --><!-- [et_pb_line_break_holder] --><link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\"><!-- [et_pb_line_break_holder] --><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.js\"><\/script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ A. STEP-INDEX & HASH<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  let currentStep = 0;<!-- [et_pb_line_break_holder] -->  const formSteps      = document.querySelectorAll('.form-step');<!-- [et_pb_line_break_holder] -->  const stepIndicators = document.querySelectorAll('.step');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function showStep(stepIndex) {<!-- [et_pb_line_break_holder] -->    formSteps.forEach((stepEl, idx) => {<!-- [et_pb_line_break_holder] -->      stepEl.classList.toggle('active', idx === stepIndex);<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    stepIndicators.forEach((indEl, idx) => {<!-- [et_pb_line_break_holder] -->      indEl.classList.toggle('active',    idx <= stepIndex);<!-- [et_pb_line_break_holder] -->      indEl.classList.toggle('completed', idx <  stepIndex);<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    currentStep = stepIndex;<!-- [et_pb_line_break_holder] -->    window.location.hash = 'step' + stepIndex;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function nextStep() {<!-- [et_pb_line_break_holder] -->    if (currentStep < formSteps.length - 1) {<!-- [et_pb_line_break_holder] -->      showStep(currentStep + 1);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function prevStep() {<!-- [et_pb_line_break_holder] -->    if (currentStep > 0) {<!-- [et_pb_line_break_holder] -->      showStep(currentStep - 1);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Maak clickable: klik op een step-indicator<!-- [et_pb_line_break_holder] -->  stepIndicators.forEach((stepEl, idx) => {<!-- [et_pb_line_break_holder] -->    stepEl.style.cursor = 'pointer';<!-- [et_pb_line_break_holder] -->    stepEl.addEventListener('click', () => {<!-- [et_pb_line_break_holder] -->      showStep(idx);<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ B. localStorage: STAP 1 (Wagen)<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  const LS_KEYS = {<!-- [et_pb_line_break_holder] -->    license_plate: 'msf_license_plate',<!-- [et_pb_line_break_holder] -->    mileage:       'msf_mileage',<!-- [et_pb_line_break_holder] -->    car_type:      'msf_car_type',<!-- [et_pb_line_break_holder] -->    brand:         'msf_brand'<!-- [et_pb_line_break_holder] -->  };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function saveStep1ValuesToStorage() {<!-- [et_pb_line_break_holder] -->    const lp   = document.getElementById('license_plate')?.value || '';<!-- [et_pb_line_break_holder] -->    const km   = document.getElementById('mileage')?.value || '';<!-- [et_pb_line_break_holder] -->    const type = document.getElementById('car_type')?.value || '';<!-- [et_pb_line_break_holder] -->    const merk = document.getElementById('brand_select')?.value || '';<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS.license_plate, lp);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS.mileage,       km);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS.car_type,      type);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS.brand,         merk);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function loadStep1ValuesFromStorage() {<!-- [et_pb_line_break_holder] -->    const lpStored   = localStorage.getItem(LS_KEYS.license_plate);<!-- [et_pb_line_break_holder] -->    const kmStored   = localStorage.getItem(LS_KEYS.mileage);<!-- [et_pb_line_break_holder] -->    const typeStored = localStorage.getItem(LS_KEYS.car_type);<!-- [et_pb_line_break_holder] -->    const merkStored = localStorage.getItem(LS_KEYS.brand);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    if (lpStored   !== null) document.getElementById('license_plate').value = lpStored;<!-- [et_pb_line_break_holder] -->    if (kmStored   !== null) document.getElementById('mileage').value       = kmStored;<!-- [et_pb_line_break_holder] -->    if (typeStored !== null) document.getElementById('car_type').value      = typeStored;<!-- [et_pb_line_break_holder] -->    if (merkStored !== null) {<!-- [et_pb_line_break_holder] -->      const brandSelect = document.getElementById('brand_select');<!-- [et_pb_line_break_holder] -->      if (brandSelect) {<!-- [et_pb_line_break_holder] -->        brandSelect.value = merkStored;<!-- [et_pb_line_break_holder] -->        \/\/ Als Select2 actief is, trigger change.select2<!-- [et_pb_line_break_holder] -->        if (window.jQuery && jQuery('#brand_select').data('select2')) {<!-- [et_pb_line_break_holder] -->          jQuery('#brand_select').trigger('change.select2');<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function initStep1Listeners() {<!-- [et_pb_line_break_holder] -->    ['license_plate','mileage','car_type','brand_select'].forEach(id => {<!-- [et_pb_line_break_holder] -->      const el = document.getElementById(id);<!-- [et_pb_line_break_holder] -->      if (!el) return;<!-- [et_pb_line_break_holder] -->      \/\/ Voor input-velden (text\/number)<!-- [et_pb_line_break_holder] -->      el.addEventListener('input', () => {<!-- [et_pb_line_break_holder] -->        saveStep1ValuesToStorage();<!-- [et_pb_line_break_holder] -->        updateAllPreviews();<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->      \/\/ Voor <select> (car_type, brand_select)<!-- [et_pb_line_break_holder] -->      if (el.tagName.toLowerCase() === 'select') {<!-- [et_pb_line_break_holder] -->        el.addEventListener('change', () => {<!-- [et_pb_line_break_holder] -->          saveStep1ValuesToStorage();<!-- [et_pb_line_break_holder] -->          updateAllPreviews();<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ C. localStorage: STAP 2 (Interventies)<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  const LS_KEYS_2 = {<!-- [et_pb_line_break_holder] -->    interventies: 'msf_interventies'<!-- [et_pb_line_break_holder] -->  };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function saveStep2ValuesToStorage() {<!-- [et_pb_line_break_holder] -->    const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');<!-- [et_pb_line_break_holder] -->    const ids = Array.from(checkedBoxes).map(cb => cb.value);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_2.interventies, JSON.stringify(ids));<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function loadStep2ValuesFromStorage() {<!-- [et_pb_line_break_holder] -->    const stored = localStorage.getItem(LS_KEYS_2.interventies);<!-- [et_pb_line_break_holder] -->    if (stored) {<!-- [et_pb_line_break_holder] -->      try {<!-- [et_pb_line_break_holder] -->        const ids = JSON.parse(stored);<!-- [et_pb_line_break_holder] -->        ids.forEach(id => {<!-- [et_pb_line_break_holder] -->          const cb = document.querySelector('.inventory-checkbox[value=\"'+id+'\"]');<!-- [et_pb_line_break_holder] -->          if (cb) {<!-- [et_pb_line_break_holder] -->            cb.checked = true;<!-- [et_pb_line_break_holder] -->            const lab = cb.closest('label');<!-- [et_pb_line_break_holder] -->            if (lab) lab.classList.add('selected');<!-- [et_pb_line_break_holder] -->          }<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->      } catch(e){ console.error(e); }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function updateStep2PreviewCards() {<!-- [et_pb_line_break_holder] -->    const selectedImages = document.querySelectorAll('.inventory-checkbox:checked');<!-- [et_pb_line_break_holder] -->    document.querySelectorAll('.selected_images_preview').forEach(container => {<!-- [et_pb_line_break_holder] -->      container.innerHTML = '';<!-- [et_pb_line_break_holder] -->      selectedImages.forEach(checkbox => {<!-- [et_pb_line_break_holder] -->        const title = checkbox.dataset.title || 'Onbekende interventie';<!-- [et_pb_line_break_holder] -->        const span  = document.createElement('span');<!-- [et_pb_line_break_holder] -->        span.style.display = 'block';<!-- [et_pb_line_break_holder] -->        span.style.marginBottom = '5px';<!-- [et_pb_line_break_holder] -->        span.textContent = title;<!-- [et_pb_line_break_holder] -->        container.appendChild(span);<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function initStep2Listeners() {<!-- [et_pb_line_break_holder] -->    const checkboxes = document.querySelectorAll('.inventory-checkbox');<!-- [et_pb_line_break_holder] -->    checkboxes.forEach(cb => {<!-- [et_pb_line_break_holder] -->      cb.addEventListener('change', () => {<!-- [et_pb_line_break_holder] -->        const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');<!-- [et_pb_line_break_holder] -->        if (checkedBoxes.length > 3) {<!-- [et_pb_line_break_holder] -->          cb.checked = false;<!-- [et_pb_line_break_holder] -->          alert('Je kan maximaal 3 interventies selecteren.');<!-- [et_pb_line_break_holder] -->          return;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        const lab = cb.closest('label');<!-- [et_pb_line_break_holder] -->        if (lab) lab.classList.toggle('selected', cb.checked);<!-- [et_pb_line_break_holder] -->        saveStep2ValuesToStorage();<!-- [et_pb_line_break_holder] -->        updateStep2PreviewCards();<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ D. Preview STAP 1 voor STAP 2+ (kaart in stap 2\/3\/4)<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  function updateStep1PreviewCards() {<!-- [et_pb_line_break_holder] -->    const lpStored   = localStorage.getItem(LS_KEYS.license_plate) || 'Not entered';<!-- [et_pb_line_break_holder] -->    const kmStored   = localStorage.getItem(LS_KEYS.mileage) || 'Not entered';<!-- [et_pb_line_break_holder] -->    const typeStored = localStorage.getItem(LS_KEYS.car_type) || 'Not selected';<!-- [et_pb_line_break_holder] -->    const merkStored = localStorage.getItem(LS_KEYS.brand);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.querySelectorAll('.license_plate_preview').forEach(el => el.textContent = lpStored);<!-- [et_pb_line_break_holder] -->    document.querySelectorAll('.mileage_preview').forEach(el => el.textContent = kmStored);<!-- [et_pb_line_break_holder] -->    document.querySelectorAll('.car_type_preview').forEach(el => el.textContent = typeStored);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.querySelectorAll('.brand_preview').forEach(el => {<!-- [et_pb_line_break_holder] -->      const parentP = el.closest('.brand-line');<!-- [et_pb_line_break_holder] -->      if (merkStored && merkStored.trim() !== '') {<!-- [et_pb_line_break_holder] -->        el.textContent = merkStored;<!-- [et_pb_line_break_holder] -->        if (parentP) parentP.style.display = 'block';<!-- [et_pb_line_break_holder] -->      } else {<!-- [et_pb_line_break_holder] -->        el.textContent = 'Not entered';<!-- [et_pb_line_break_holder] -->        if (parentP) parentP.style.display = 'none';<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ E. \u201cMeer laden\u2026\u201d in STAP 2<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  function initLoadMoreButton() {<!-- [et_pb_line_break_holder] -->    const btn = document.getElementById('loadMoreBtn');<!-- [et_pb_line_break_holder] -->    if (!btn) return;<!-- [et_pb_line_break_holder] -->    btn.addEventListener('click', () => {<!-- [et_pb_line_break_holder] -->      document.querySelectorAll('.hidden-more').forEach(el => el.classList.remove('hidden-more'));<!-- [et_pb_line_break_holder] -->      btn.style.display = 'none';<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ F. localStorage: STAP 3 (Datum & tijd & mobiliteit)<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  const LS_KEYS_3 = {<!-- [et_pb_line_break_holder] -->    date:            'msf_date',<!-- [et_pb_line_break_holder] -->    time:            'msf_time',<!-- [et_pb_line_break_holder] -->    mobility_option: 'msf_mobility_option'<!-- [et_pb_line_break_holder] -->  };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function saveStep3ValuesToStorage() {<!-- [et_pb_line_break_holder] -->    const dateVal   = document.getElementById('datepicker')?.value || '';<!-- [et_pb_line_break_holder] -->    const timeVal   = localStorage.getItem(LS_KEYS_3.time) || '';<!-- [et_pb_line_break_holder] -->    const mobVal    = document.getElementById('mobility_option')?.value || '';<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_3.date,            dateVal);<!-- [et_pb_line_break_holder] -->    \/\/ time wordt weggeschreven zodra er op een tijdknop gedrukt wordt (zie verder). <!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_3.mobility_option, mobVal);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function loadStep3ValuesFromStorage() {<!-- [et_pb_line_break_holder] -->    const dateStored = localStorage.getItem(LS_KEYS_3.date);<!-- [et_pb_line_break_holder] -->    const timeStored = localStorage.getItem(LS_KEYS_3.time);<!-- [et_pb_line_break_holder] -->    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    if (dateStored !== null) {<!-- [et_pb_line_break_holder] -->      const dateInput = document.getElementById('datepicker');<!-- [et_pb_line_break_holder] -->      if (dateInput) dateInput.value = dateStored;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    if (timeStored !== null) {<!-- [et_pb_line_break_holder] -->      \/\/ We zetten dit in de verborgen <input name=\"time\"> bij de tijdknoppen<!-- [et_pb_line_break_holder] -->      const hiddenTimeInput = document.querySelector('input[name=\"time\"]');<!-- [et_pb_line_break_holder] -->      if (hiddenTimeInput) hiddenTimeInput.value = timeStored;<!-- [et_pb_line_break_holder] -->      \/\/ Daarnaast highlighten we de juiste knop:<!-- [et_pb_line_break_holder] -->      document.querySelectorAll('#time-slots button').forEach(btn => {<!-- [et_pb_line_break_holder] -->        if (btn.dataset.time === timeStored) {<!-- [et_pb_line_break_holder] -->          btn.classList.add('active');<!-- [et_pb_line_break_holder] -->          document.getElementById('selected_time').textContent = timeStored;<!-- [et_pb_line_break_holder] -->        } else {<!-- [et_pb_line_break_holder] -->          btn.classList.remove('active');<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    if (mobStored !== null) {<!-- [et_pb_line_break_holder] -->      const mobSelect = document.getElementById('mobility_option');<!-- [et_pb_line_break_holder] -->      if (mobSelect) mobSelect.value = mobStored;<!-- [et_pb_line_break_holder] -->      document.getElementById('selected_mobility').textContent = mobStored || 'Not selected';<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function initStep3Listeners() {<!-- [et_pb_line_break_holder] -->    \/\/ 1) Flatpickr initialiseren<!-- [et_pb_line_break_holder] -->    const dateInput = document.getElementById('datepicker');<!-- [et_pb_line_break_holder] -->    if (dateInput) {<!-- [et_pb_line_break_holder] -->      flatpickr(dateInput, {<!-- [et_pb_line_break_holder] -->        inline:   true,<!-- [et_pb_line_break_holder] -->        minDate:  new Date().fp_incr(7),<!-- [et_pb_line_break_holder] -->        dateFormat: \"Y-m-d\",<!-- [et_pb_line_break_holder] -->        onChange: function(selectedDates, dateStr) {<!-- [et_pb_line_break_holder] -->          saveStep3ValuesToStorage();<!-- [et_pb_line_break_holder] -->          document.getElementById('selected_date').textContent = dateStr || 'Not selected';<!-- [et_pb_line_break_holder] -->          \/\/ Toon time-slots zodra er een datum is gekozen<!-- [et_pb_line_break_holder] -->          document.getElementById('time-slots').style.display = dateStr ? 'block' : 'none';<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ 2) Tijd-knoppen<!-- [et_pb_line_break_holder] -->    const timeButtons = document.querySelectorAll('#time-slots button');<!-- [et_pb_line_break_holder] -->    timeButtons.forEach(btn => {<!-- [et_pb_line_break_holder] -->      btn.addEventListener('click', function() {<!-- [et_pb_line_break_holder] -->        timeButtons.forEach(b => b.classList.remove('active'));<!-- [et_pb_line_break_holder] -->        this.classList.add('active');<!-- [et_pb_line_break_holder] -->        const chosen = this.dataset.time || '';<!-- [et_pb_line_break_holder] -->        \/\/ Zet in verborgen <input name=\"time\"><!-- [et_pb_line_break_holder] -->        let hiddenTimeInput = document.querySelector('input[name=\"time\"]');<!-- [et_pb_line_break_holder] -->        if (!hiddenTimeInput) {<!-- [et_pb_line_break_holder] -->          \/\/ Maak \u2018m aan als het nog niet bestaat<!-- [et_pb_line_break_holder] -->          hiddenTimeInput = document.createElement('input');<!-- [et_pb_line_break_holder] -->          hiddenTimeInput.type = 'hidden';<!-- [et_pb_line_break_holder] -->          hiddenTimeInput.name = 'time';<!-- [et_pb_line_break_holder] -->          document.getElementById('multiStepForm').appendChild(hiddenTimeInput);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        hiddenTimeInput.value = chosen;<!-- [et_pb_line_break_holder] -->        localStorage.setItem(LS_KEYS_3.time, chosen);<!-- [et_pb_line_break_holder] -->        document.getElementById('selected_time').textContent = chosen || 'Not selected';<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ 3) Mobiliteit-select<!-- [et_pb_line_break_holder] -->    const mobSelect = document.getElementById('mobility_option');<!-- [et_pb_line_break_holder] -->    if (mobSelect) {<!-- [et_pb_line_break_holder] -->      mobSelect.addEventListener('change', () => {<!-- [et_pb_line_break_holder] -->        saveStep3ValuesToStorage();<!-- [et_pb_line_break_holder] -->        document.getElementById('selected_mobility').textContent = mobSelect.value || 'Not selected';<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ G. localStorage: STAP 4 (Contactgegevens)<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  const LS_KEYS_4 = {<!-- [et_pb_line_break_holder] -->    user_type:    'msf_user_type',<!-- [et_pb_line_break_holder] -->    company_name: 'msf_company_name',<!-- [et_pb_line_break_holder] -->    tax_number:   'msf_tax_number',<!-- [et_pb_line_break_holder] -->    first_name:   'msf_first_name',<!-- [et_pb_line_break_holder] -->    surname:      'msf_surname',<!-- [et_pb_line_break_holder] -->    email:        'msf_email',<!-- [et_pb_line_break_holder] -->    phone:        'msf_phone',<!-- [et_pb_line_break_holder] -->    message:      'msf_message',<!-- [et_pb_line_break_holder] -->    create_account: 'msf_create_account',<!-- [et_pb_line_break_holder] -->    agree_policy:   'msf_agree_policy'<!-- [et_pb_line_break_holder] -->  };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function saveStep4ValuesToStorage() {<!-- [et_pb_line_break_holder] -->    const ut = document.querySelector('input[name=\"user_type\"]:checked')?.value || '';<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_4.user_type, ut);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    if (ut === 'professional') {<!-- [et_pb_line_break_holder] -->      const cn = document.querySelector('input[name=\"company_name\"]')?.value || '';<!-- [et_pb_line_break_holder] -->      const tn = document.querySelector('input[name=\"tax_number\"]')?.value || '';<!-- [et_pb_line_break_holder] -->      localStorage.setItem(LS_KEYS_4.company_name, cn);<!-- [et_pb_line_break_holder] -->      localStorage.setItem(LS_KEYS_4.tax_number,   tn);<!-- [et_pb_line_break_holder] -->    } else {<!-- [et_pb_line_break_holder] -->      localStorage.removeItem(LS_KEYS_4.company_name);<!-- [et_pb_line_break_holder] -->      localStorage.removeItem(LS_KEYS_4.tax_number);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const fn = document.querySelector('input[name=\"first_name\"]')?.value || '';<!-- [et_pb_line_break_holder] -->    const sn = document.querySelector('input[name=\"surname\"]')?.value || '';<!-- [et_pb_line_break_holder] -->    const em = document.querySelector('input[name=\"email\"]')?.value || '';<!-- [et_pb_line_break_holder] -->    const ph = document.querySelector('input[name=\"phone\"]')?.value || '';<!-- [et_pb_line_break_holder] -->    const ms = document.querySelector('textarea[name=\"message\"]')?.value || '';<!-- [et_pb_line_break_holder] -->    const ca = document.querySelector('select[name=\"create_account\"]')?.value || 'no';<!-- [et_pb_line_break_holder] -->    const ap = document.querySelector('input[name=\"agree_policy\"]')?.checked || false;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_4.first_name,   fn);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_4.surname,      sn);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_4.email,        em);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_4.phone,        ph);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_4.message,      ms);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_4.create_account, ca);<!-- [et_pb_line_break_holder] -->    localStorage.setItem(LS_KEYS_4.agree_policy,   ap ? 'yes' : 'no');<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function loadStep4ValuesFromStorage() {<!-- [et_pb_line_break_holder] -->    const utStored = localStorage.getItem(LS_KEYS_4.user_type);<!-- [et_pb_line_break_holder] -->    if (utStored) {<!-- [et_pb_line_break_holder] -->      const utRadio = document.querySelector('input[name=\"user_type\"][value=\"'+utStored+'\"]');<!-- [et_pb_line_break_holder] -->      if (utRadio) utRadio.checked = true;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    const proFields = document.getElementById('proFields');<!-- [et_pb_line_break_holder] -->    if (proFields) {<!-- [et_pb_line_break_holder] -->      proFields.style.display = (utStored === 'professional') ? 'block' : 'none';<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const companyStored = localStorage.getItem(LS_KEYS_4.company_name);<!-- [et_pb_line_break_holder] -->    if (companyStored !== null) {<!-- [et_pb_line_break_holder] -->      document.querySelector('input[name=\"company_name\"]').value = companyStored;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    const taxStored = localStorage.getItem(LS_KEYS_4.tax_number);<!-- [et_pb_line_break_holder] -->    if (taxStored !== null) {<!-- [et_pb_line_break_holder] -->      document.querySelector('input[name=\"tax_number\"]').value = taxStored;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const fnStored = localStorage.getItem(LS_KEYS_4.first_name);<!-- [et_pb_line_break_holder] -->    if (fnStored !== null) {<!-- [et_pb_line_break_holder] -->      document.querySelector('input[name=\"first_name\"]').value = fnStored;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    const snStored = localStorage.getItem(LS_KEYS_4.surname);<!-- [et_pb_line_break_holder] -->    if (snStored !== null) {<!-- [et_pb_line_break_holder] -->      document.querySelector('input[name=\"surname\"]').value = snStored;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    const emStored = localStorage.getItem(LS_KEYS_4.email);<!-- [et_pb_line_break_holder] -->    if (emStored !== null) {<!-- [et_pb_line_break_holder] -->      document.querySelector('input[name=\"email\"]').value = emStored;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    const phStored = localStorage.getItem(LS_KEYS_4.phone);<!-- [et_pb_line_break_holder] -->    if (phStored !== null) {<!-- [et_pb_line_break_holder] -->      document.querySelector('input[name=\"phone\"]').value = phStored;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    const msStored = localStorage.getItem(LS_KEYS_4.message);<!-- [et_pb_line_break_holder] -->    if (msStored !== null) {<!-- [et_pb_line_break_holder] -->      document.querySelector('textarea[name=\"message\"]').value = msStored;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    const caStored = localStorage.getItem(LS_KEYS_4.create_account);<!-- [et_pb_line_break_holder] -->    if (caStored !== null) {<!-- [et_pb_line_break_holder] -->      const caSelect = document.querySelector('select[name=\"create_account\"]');<!-- [et_pb_line_break_holder] -->      if (caSelect) caSelect.value = caStored;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    const apStored = localStorage.getItem(LS_KEYS_4.agree_policy);<!-- [et_pb_line_break_holder] -->    if (apStored === 'yes') {<!-- [et_pb_line_break_holder] -->      document.querySelector('input[name=\"agree_policy\"]').checked = true;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function initStep4Listeners() {<!-- [et_pb_line_break_holder] -->    \/\/ 1) \u201cType klant\u201d radiobuttons<!-- [et_pb_line_break_holder] -->    document.querySelectorAll('input[name=\"user_type\"]').forEach(radio => {<!-- [et_pb_line_break_holder] -->      radio.addEventListener('change', () => {<!-- [et_pb_line_break_holder] -->        const sel = document.querySelector('input[name=\"user_type\"]:checked')?.value;<!-- [et_pb_line_break_holder] -->        const proFields = document.getElementById('proFields');<!-- [et_pb_line_break_holder] -->        if (proFields) proFields.style.display = (sel === 'professional') ? 'block' : 'none';<!-- [et_pb_line_break_holder] -->        saveStep4ValuesToStorage();<!-- [et_pb_line_break_holder] -->        updateStep4PreviewCards();<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ 2) Bedrijfsnaam en btw-nr<!-- [et_pb_line_break_holder] -->    ['company_name','tax_number'].forEach(name => {<!-- [et_pb_line_break_holder] -->      const el = document.querySelector(`input[name=\"${name}\"]`);<!-- [et_pb_line_break_holder] -->      if (!el) return;<!-- [et_pb_line_break_holder] -->      el.addEventListener('input', () => {<!-- [et_pb_line_break_holder] -->        saveStep4ValuesToStorage();<!-- [et_pb_line_break_holder] -->        updateStep4PreviewCards();<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ 3) Voornaam, Achternaam, E-mail, Telefoon, Boodschap<!-- [et_pb_line_break_holder] -->    ['first_name','surname','email','phone'].forEach(name => {<!-- [et_pb_line_break_holder] -->      const el = document.querySelector(`input[name=\"${name}\"]`);<!-- [et_pb_line_break_holder] -->      if (!el) return;<!-- [et_pb_line_break_holder] -->      el.addEventListener('input', () => {<!-- [et_pb_line_break_holder] -->        saveStep4ValuesToStorage();<!-- [et_pb_line_break_holder] -->        updateStep4PreviewCards();<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    const msgEl = document.querySelector('textarea[name=\"message\"]');<!-- [et_pb_line_break_holder] -->    if (msgEl) {<!-- [et_pb_line_break_holder] -->      msgEl.addEventListener('input', () => {<!-- [et_pb_line_break_holder] -->        saveStep4ValuesToStorage();<!-- [et_pb_line_break_holder] -->        updateStep4PreviewCards();<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ 4) Create Account-select<!-- [et_pb_line_break_holder] -->    const caSelect = document.querySelector('select[name=\"create_account\"]');<!-- [et_pb_line_break_holder] -->    if (caSelect) {<!-- [et_pb_line_break_holder] -->      caSelect.addEventListener('change', () => {<!-- [et_pb_line_break_holder] -->        saveStep4ValuesToStorage();<!-- [et_pb_line_break_holder] -->        updateStep4PreviewCards();<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ 5) Privacy checkbox<!-- [et_pb_line_break_holder] -->    const apCheckbox = document.querySelector('input[name=\"agree_policy\"]');<!-- [et_pb_line_break_holder] -->    if (apCheckbox) {<!-- [et_pb_line_break_holder] -->      apCheckbox.addEventListener('change', () => {<!-- [et_pb_line_break_holder] -->        saveStep4ValuesToStorage();<!-- [et_pb_line_break_holder] -->        updateStep4PreviewCards();<!-- [et_pb_line_break_holder] -->      });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ H. Preview STAP 3 in STAP 4\/5 (datum\/tijd\/mobility)<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  function updateStep3PreviewCards() {<!-- [et_pb_line_break_holder] -->    const dateStored = localStorage.getItem(LS_KEYS_3.date) || 'Not selected';<!-- [et_pb_line_break_holder] -->    const timeStored = localStorage.getItem(LS_KEYS_3.time) || 'Not selected';<!-- [et_pb_line_break_holder] -->    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option) || 'Not selected';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    document.getElementById('selected_date').textContent     = dateStored;<!-- [et_pb_line_break_holder] -->    document.getElementById('selected_time').textContent     = timeStored;<!-- [et_pb_line_break_holder] -->    document.getElementById('selected_mobility').textContent = mobStored;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ I. Preview STAP 4 in STAP 5 (contactgegevens)<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  function updateStep4PreviewCards() {<!-- [et_pb_line_break_holder] -->    \/\/ Vul de preview-velden in stap 5 (Bevestiging)<!-- [et_pb_line_break_holder] -->    \/\/ Bijvoorbeeld:<!-- [et_pb_line_break_holder] -->    \/\/ document.querySelector('#confirm_first_name').textContent = localStorage.getItem(LS_KEYS_4.first_name) || '';<!-- [et_pb_line_break_holder] -->    \/\/ enz. (afhankelijk van welke preview-elementen je in Stap 5 hebt geplaatst)<!-- [et_pb_line_break_holder] -->    \/\/ Hier moet je de juiste <span id=\"\u2026\"> in Stap 5 matchen.<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ J. Alles updaten bij laden<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  function loadFormValuesFromStorage() {<!-- [et_pb_line_break_holder] -->    \/\/ Stap 1<!-- [et_pb_line_break_holder] -->    loadStep1ValuesFromStorage();<!-- [et_pb_line_break_holder] -->    initStep1Listeners();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Stap 2<!-- [et_pb_line_break_holder] -->    loadStep2ValuesFromStorage();<!-- [et_pb_line_break_holder] -->    initStep2Listeners();<!-- [et_pb_line_break_holder] -->    updateStep2PreviewCards();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Stap 3<!-- [et_pb_line_break_holder] -->    loadStep3ValuesFromStorage();<!-- [et_pb_line_break_holder] -->    initStep3Listeners();<!-- [et_pb_line_break_holder] -->    updateStep3PreviewCards();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Stap 4<!-- [et_pb_line_break_holder] -->    loadStep4ValuesFromStorage();<!-- [et_pb_line_break_holder] -->    initStep4Listeners();<!-- [et_pb_line_break_holder] -->    updateStep4PreviewCards();<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function updateAllPreviews() {<!-- [et_pb_line_break_holder] -->    updateStep1PreviewCards();<!-- [et_pb_line_break_holder] -->    updateStep2PreviewCards();<!-- [et_pb_line_break_holder] -->    updateStep3PreviewCards();<!-- [et_pb_line_break_holder] -->    updateStep4PreviewCards();<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  \/\/ K. Initialisatie bij page load<!-- [et_pb_line_break_holder] -->  \/\/ ====================<!-- [et_pb_line_break_holder] -->  document.addEventListener('DOMContentLoaded', () => {<!-- [et_pb_line_break_holder] -->    \/\/ 1) Lees hash (#step0\u2026#step4)<!-- [et_pb_line_break_holder] -->    const hash = window.location.hash;<!-- [et_pb_line_break_holder] -->    if (hash && hash.startsWith('#step')) {<!-- [et_pb_line_break_holder] -->      const idx = parseInt(hash.replace('#step', ''), 10);<!-- [et_pb_line_break_holder] -->      if (!isNaN(idx) && idx >= 0 && idx < formSteps.length) {<!-- [et_pb_line_break_holder] -->        currentStep = idx;<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    showStep(currentStep);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ 2) Laad alle opgeslagen waarden & listeners<!-- [et_pb_line_break_holder] -->    loadFormValuesFromStorage();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ 3) Initialiseer \u201cMeer laden\u201d-knop (stap 2)<!-- [et_pb_line_break_holder] -->    initLoadMoreButton();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ 4) Update alle previews (indien terug van stap naar stap)<!-- [et_pb_line_break_holder] -->    updateAllPreviews();<!-- [et_pb_line_break_holder] -->  });<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][et_pb_code disabled_on=&#8221;on|on|on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; disabled=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;]\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/l10n\/nl.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.5.1\/dist\/confetti.browser.min.js\"><\/script>\n   \n<div class=\"step-container\" id=\"stepIndicator\">\n  <div   class=\"step active\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Wagen<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Interventies<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Datum &amp; uur<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Gegevens<\/div>\n   <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Bevestiging<\/div>\n <\/div>\n  \n  \n<div id=\"multiStepForm\" class=\"msf-form\">\n\t\t<div class=\"form-step active\">\n\t\t  <h3>Voer de gegevens van jouw wagen in<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<div class=\"f-123\">\n\t\t\t  <h4>Vul hier in<\/h4>\n\n\t\t\t  <label>\n\t\t\t\tNummerplaat <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<input id=\"license_plate\" type=\"text\" name=\"license_plate\" required>\n\t\t\t  <\/label>\n\t\t\t  <label>\n\t\t\t\tKilometerstand <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<input id=\"mileage\" type=\"number\" name=\"mileage\" required>\n\t\t\t  <\/label>\n\t\t\t  <label>\n\t\t\t\tChassisnummer\n\t\t\t\t<input id=\"chassis\" type=\"text\" name=\"chassis\" required>\n\t\t\t  <\/label>\n\n\t\t\t  \t\t\t  <label>\n\t\t\t\tType wagen <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<select id=\"car_type\" name=\"car_type\" required>\n\t\t\t\t  <option value=\"\">Selecteer type\u2026<\/option>\n\t\t\t\t  \t\t\t\t\t\t\t\t\t\t  <option value=\"bestelwagens-groot\">\n\t\t\t\t\t\tBestelwagens groot\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"bestelwagens-klein\">\n\t\t\t\t\t\tBestelwagens klein\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"opleggers\">\n\t\t\t\t\t\tOpleggers\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"personenwagens\">\n\t\t\t\t\t\tPersonenwagens\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"trekkers\">\n\t\t\t\t\t\tTrekkers\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"vrachtwagens\">\n\t\t\t\t\t\tVrachtwagens\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t  \t\t\t\t<\/select>\n\t\t\t  <\/label>\n\n\t\t\t  \t\t\t  <label>\n\t\t\t\tMerk\n\t\t\t\t<select id=\"brand_select\" name=\"brand\" class=\"searchable-dropdown\">\n\t\t\t\t  <option value=\"\">Selecteer merk\u2026<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"A&amp;D\">\n\t\t\t\t\t  A&amp;D\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Citro\u00ebn\">\n\t\t\t\t\t  Citro\u00ebn\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"DAF\">\n\t\t\t\t\t  DAF\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Ford\">\n\t\t\t\t\t  Ford\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Iveco\">\n\t\t\t\t\t  Iveco\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Krone\">\n\t\t\t\t\t  Krone\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"K\u00f6gel\">\n\t\t\t\t\t  K\u00f6gel\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"LAG trailers\">\n\t\t\t\t\t  LAG trailers\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"MAN\">\n\t\t\t\t\t  MAN\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Mercedes\">\n\t\t\t\t\t  Mercedes\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Opel\">\n\t\t\t\t\t  Opel\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Peugeot\">\n\t\t\t\t\t  Peugeot\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Renault\">\n\t\t\t\t\t  Renault\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Scania\">\n\t\t\t\t\t  Scania\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Schmitz Cargobull\">\n\t\t\t\t\t  Schmitz Cargobull\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Smart\">\n\t\t\t\t\t  Smart\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Van Hool\">\n\t\t\t\t\t  Van Hool\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Volvo\">\n\t\t\t\t\t  Volvo\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Andere\">\n\t\t\t\t\t  Andere\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t<\/select>\n\t\t\t  <\/label>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t  <div class=\"msf-note\" style=\"margin-top: 1em; font-size: 14px; text-align: center;\">\n\t\t\t\tHeb je al een account? \n\t\t\t\t<a href=\"#\" id=\"msf-open-login-step1\" class=\"msf-open-login\">Klik hier om in te loggen<\/a>.\n\t\t\t  <\/div>\n\t\t\t\n\n\t\t\t<\/div> <!-- einde f-123 -->\n\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div> <!-- einde form-step -->\n  \n\n\t\t<div class=\"form-step\">\n\t\t  <h3>Selecteer tot 3 interventies<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- LINKS: keuzevak (.f-123, 60% breed) -->\n\t\t\t<div class=\"f-123 interventies\">\n\t\t\t  <!-- ---- \u201cMeest gekozen\u201d sectie ---- -->\n\t\t\t  <h4>Onze populairste interventies<\/h4>\n\t\t\t  <div class=\"Inventory-2\">\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2083\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Remmen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-remmen.png\"\n\t\t\t\t\t\t alt=\"Remmen\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Remmen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2081\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Onderhoud\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-onderhoud.png\"\n\t\t\t\t\t\t alt=\"Onderhoud\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Onderhoud<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2078\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Keuring\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-technische-keuring.png\"\n\t\t\t\t\t\t alt=\"Keuring\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Keuring<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2631\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Carrosserie\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-carrosserie.png\"\n\t\t\t\t\t\t alt=\"Carrosserie\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Carrosserie<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t  <\/div><!-- .Inventory-2 -->\n\n\t\t\t  <br><br>\n\n\t\t\t  <!-- ---- \u201cMeer interventies\u201d sectie ---- -->\n\t\t\t  <h4>Meer interventies<\/h4>\n\t\t\t  <div class=\"Inventory-2\">\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2734\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Frigo\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-frigo.png\"\n\t\t\t\t\t\t alt=\"Frigo\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Frigo<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2085\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Schokdempers\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-schokdempers.png\"\n\t\t\t\t\t\t alt=\"Schokdempers\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Schokdempers<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2084\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Ruitenwissers\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-ruitenwissers.png\"\n\t\t\t\t\t\t alt=\"Ruitenwissers\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Ruitenwissers<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2080\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Koplampen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-koplampen.png\"\n\t\t\t\t\t\t alt=\"Koplampen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Koplampen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2079\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Glasbreuk\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-glasbreuk.png\"\n\t\t\t\t\t\t alt=\"Glasbreuk\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Glasbreuk<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2077\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Distributieriem\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-distributieriem.png\"\n\t\t\t\t\t\t alt=\"Distributieriem\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Distributieriem<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2076\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Batterij\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-batterij.png\"\n\t\t\t\t\t\t alt=\"Batterij\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Batterij<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2075\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Check Up\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-check-up.png\"\n\t\t\t\t\t\t alt=\"Check Up\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Check Up<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2082\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Banden\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-banden.png\"\n\t\t\t\t\t\t alt=\"Banden\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Banden<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2073\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Airco\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-airco.png\"\n\t\t\t\t\t\t alt=\"Airco\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Airco<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2074\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Accessoires\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-centraal-slot-en-alarm.png\"\n\t\t\t\t\t\t alt=\"Accessoires\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Accessoires<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2072\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Truckwash\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-truckwash.png\"\n\t\t\t\t\t\t alt=\"Truckwash\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Truckwash<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2070\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Elektrische problemen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-elektrische-problemen.png\"\n\t\t\t\t\t\t alt=\"Elektrische problemen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Elektrische problemen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2071\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Koelsysteem\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-koeling.png\"\n\t\t\t\t\t\t alt=\"Koelsysteem\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Koelsysteem<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2068\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Laadklep\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-laadklep.png\"\n\t\t\t\t\t\t alt=\"Laadklep\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Laadklep<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2069\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Luchtleidingen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-luchtleidingen.png\"\n\t\t\t\t\t\t alt=\"Luchtleidingen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Luchtleidingen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2067\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Motor\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-motor.png\"\n\t\t\t\t\t\t alt=\"Motor\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Motor<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2066\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Olie verversen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-olie-verversen.png\"\n\t\t\t\t\t\t alt=\"Olie verversen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Olie verversen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2065\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Stuur\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-stuur.png\"\n\t\t\t\t\t\t alt=\"Stuur\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Stuur<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2057\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Uitlaat\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-uitlaat.png\"\n\t\t\t\t\t\t alt=\"Uitlaat\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Uitlaat<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2629\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Versnellingsbak\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-versnellingsbak.png\"\n\t\t\t\t\t\t alt=\"Versnellingsbak\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Versnellingsbak<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2630\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Tachygraaf\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-tachygraaf.png\"\n\t\t\t\t\t\t alt=\"Tachygraaf\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Tachygraaf<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <button type=\"button\" id=\"loadMoreBtn\" class=\"btn-load-more\">Meer laden\u2026<\/button>\n\t\t\t\t\t\t\t  <\/div><!-- .Inventory-2 -->\n\t\t\t<\/div><!-- .f-123 interventies -->\n\n\n\t\t\t<!-- RECHTS: preview (.f-124, 38% breed) -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\n\t\t\t  <!-- Vaste locatie\u2010kaart -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\n\t\t\t  <!-- Preview\u2010kaart STEP 1 -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\n\t\t\t  <!-- Preview\u2010kaart interventies (titels) -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" id=\"nextStepBtn\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div> <!-- einde form-step -->\n\n\t \n\t \n\t\t <div class=\"form-step\">\n\t\t  <h3>Selecteer datum en uur<\/h3>\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- === LINKER KOLOM: FLATPICKR === -->\n\t\t\t<div class=\"f-123\" style=\"background-color: #f6f6f6;\">\n\t\t\t  <div class=\"f-1\" style=\"background-color: #f3faf9;\">\n\t\t\t\t<p id=\"tr3\">\n\t\t\t\t  <strong>Let op!<\/strong> Dit is een aanvraag om een afspraak vast te leggen, \n\t\t\t\t  deze moet eerst bevestigd worden. Wacht op de bevestiging van uw verdeler voordat \n\t\t\t\t  u naar de werkplaats komt.<br>\n\t\t\t\t<\/p>\n\t\t\t  <\/div>\n\t\t\t\t\n\t\t\t  <div class=\"f-1 kalender\">\n\t\t\t\t  <label>Uw gewenste datum en uur selecteren <span style=\"color: #e74c3c;\">*<\/span><\/label>\n\t\t\t\t<div class=\"calendar-time-container\">\n\t\t\t\t  <!-- 1a) Flatpickr calendar -->\n\t\t\t\t  <div class=\"calendar-column\">\n\t\t\t\t\t<!-- We verbergen het standaard Flatpickr-inputveld zelf (maar laten het inline kalenderpaneel zien) -->\n\t\t\t\t\t<input\n\t\t\t\t\t  type=\"text\"\n\t\t\t\t\t  id=\"datepicker\"\n\t\t\t\t\t  name=\"date\"\n\t\t\t\t\t  placeholder=\"Selecteer een datum\"\n\t\t\t\t\t  readonly\n\t\t\t\t\t  required\n\t\t\t\t\t\/>\n\t\t\t\t  <\/div>\n\t\t\t\t  <!-- 1b) Tijdselectie rechts -->\n\t\t\t\t  <div class=\"time-column\" id=\"timeColumn\">\n\t\t\t\t\t<!-- Hier komt de \u201cVrijdag 9\/05\u201d bv te staan -->\n\t\t\t\t\t<div id=\"selectedDateDisplay\" class=\"selected-date-display\">Kies eerst een datum<\/div>\n\t\t\t\t\t<div class=\"slots\">\n\t\t\t\t\t  <button type=\"button\" data-time=\"08:00\">08:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"09:00\">09:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"10:00\">10:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"11:00\">11:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"14:00\">14:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"15:00\">15:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"16:00\">16:00<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<!-- Verborgen input om de gekozen tijd door te sturen -->\n\t\t\t\t\t<input type=\"hidden\" name=\"time\" id=\"selectedTimeInput\" required>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<br><br>\n\t\t\t\t<div class=\"f-1\" id=\"renting-question\">\n\t\t\t\t  <label><strong>Ben je een renting klant? <span style=\"color:#e74c3c\">*<\/span><\/strong><\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"renting_customer\" value=\"ja\"> Ja<\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"renting_customer\" value=\"nee\"> Nee<\/label>\n\t\t\t\t<\/div>\n\t\t\t\t<div id=\"mobility-container\" style=\"display:none;\">\n\t\t\t\t  <label>\n\t\t\t\t\tMobiliteitsoplossing <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t\t<select id=\"mobility_option\" name=\"mobility_option\" required>\n\t\t\t\t\t  <option value=\"\">Maak een keuze<\/option>\n\t\t\t\t\t<\/select>\n\t\t\t\t  <\/label>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div>\n\n\t\t\t<!-- === RECHTER KOLOM: OVERZICHT (wagen + interventies) === -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div>\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div>\n\t \n\t \n\t \t \n\n\t\t<div class=\"form-step\" id=\"msf-step-4\">\n\t\t  <h3>Controleer en vul je gegevens aan<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- LINKER KOLOM: INGAVEVELDEN -->\n\t\t\t<div class=\"f-123\">\n\t\t\t  <!-- Type klant (Particulier \/ Zakelijk) -->\n\t\t\t  <div class=\"type-klant-container\">\n\t\t\t\t<label class=\"type-klant-label\">Type klant:<\/label>\n\t\t\t\t<div id=\"b3\" class=\"radio-2\">\n\t\t\t\t  <label><input type=\"radio\" name=\"user_type\" value=\"private\" checked id=\"user_type_private_formstep\"> Particulier<\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"user_type\" value=\"professional\" id=\"user_type_professional_formstep\"> Zakelijk<\/label>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- Zakelijk-velden (Bedrijfsnaam + BTW) -->\n\t\t\t  <div id=\"proFields\" class=\"input-pair pro-fields\">\n\t\t\t\t<input type=\"text\" name=\"company_name\" id=\"company_name_formstep\" placeholder=\"Bedrijfsnaam\">\n\t\t\t\t<input type=\"text\" name=\"tax_number\" id=\"tax_number_formstep\" placeholder=\"BTW-nummer\">\n\t\t\t  <\/div>\n\n\t\t\t  <!-- Voornaam + Achternaam -->\n\t\t\t  <div class=\"input-pair\">\n\t\t\t  <input type=\"text\" name=\"first_name\" id=\"first_name_formstep\" placeholder=\"Voornaam *\" required value=\"\" >\n\t\t\t  <input type=\"text\" name=\"surname\" id=\"surname_formstep\" placeholder=\"Achternaam *\" required value=\"\" >\n\t\t\t<\/div>\n\n\t\t\t  <!-- E-mail + Telefoonnummer -->\n\t\t\t  <div class=\"input-pair\">\n\t\t\t\t<input type=\"email\" name=\"email\" id=\"email_formstep\" placeholder=\"E-mail *\" required value=\"\" >\n\t\t\t\t  <div id=\"msf-email-exists\" class=\"msf-error\" style=\"display:none\">\n\t\t\t\t\t  Dit e-mailadres is al geregistreerd. <a href=\"#\" id=\"msf-open-login\">Log hier in<\/a>.\n\t\t\t\t\t<\/div>\n\t\t\t\t<input  type=\"text\" name=\"phone\" id=\"phone_formstep\" placeholder=\"Telefoonnummer\" value=\"\" >\n\t\t\t  <\/div>\n\n\t\t\t  <textarea name=\"message\" id=\"message_formstep\" placeholder=\"Boodschap\"><\/textarea>\n\t\t\t\t<div id=\"hidden-cf7\" class=\"msf-cf7-shadow\">\n\t\t\t\t  \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2709-o1\" lang=\"nl-BE\" dir=\"ltr\" data-wpcf7-id=\"2709\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/nl\/wp-json\/wp\/v2\/pages\/145#wpcf7-f2709-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contactformulier\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2709\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"nl_BE\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2709-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:2709,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;repeater_remove_button&quot;:&quot;bottom&quot;}}\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"license_plate\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_license_plate\" aria-invalid=\"false\" placeholder=\"Nummerplaat\" value=\"\" type=\"text\" name=\"license_plate\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mileage\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_mileage\" aria-invalid=\"false\" placeholder=\"Kilometerstand\" value=\"\" type=\"text\" name=\"mileage\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"chassis\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_chassis\" aria-invalid=\"false\" placeholder=\"Chassisnummer\" value=\"\" type=\"text\" name=\"chassis\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"brand\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_brand\" aria-invalid=\"false\" placeholder=\"Merk\" value=\"\" type=\"text\" name=\"brand\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"car_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_car_type\" aria-invalid=\"false\" placeholder=\"Type wagen\" value=\"\" type=\"text\" name=\"car_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies_id\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_inventory_ids\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies_id\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_interventies\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"date\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_date\" aria-invalid=\"false\" placeholder=\"Datum\" value=\"\" type=\"text\" name=\"date\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"time\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_time\" aria-invalid=\"false\" placeholder=\"Tijd\" value=\"\" type=\"text\" name=\"time\" \/><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" id=\"cf7_renting_customer\" value=\"\" type=\"hidden\" name=\"renting_customer\" \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mobility_option\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_mobility_option\" aria-invalid=\"false\" placeholder=\"Mobiliteitsoplossing\" value=\"\" type=\"text\" name=\"mobility_option\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"user_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_user_type\" aria-invalid=\"false\" placeholder=\"Type klant\" value=\"\" type=\"text\" name=\"user_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"company_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_company_name\" aria-invalid=\"false\" placeholder=\"Bedrijfsnaam\" value=\"\" type=\"text\" name=\"company_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tax_number\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_tax_number\" aria-invalid=\"false\" placeholder=\"BTW-nummer\" value=\"\" type=\"text\" name=\"tax_number\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"first_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_first_name\" aria-invalid=\"false\" placeholder=\"Voornaam\" value=\"\" type=\"text\" name=\"first_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"surname\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"cf7_surname\" aria-invalid=\"false\" placeholder=\"Achternaam\" value=\"\" type=\"text\" name=\"surname\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" id=\"cf7_email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" id=\"cf7_phone\" aria-invalid=\"false\" placeholder=\"Telefoon\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" id=\"cf7_message\" aria-invalid=\"false\" placeholder=\"Boodschap\" name=\"message\"><\/textarea><\/span>\n<div class=\"msf-file-only\">\n  <span class=\"wpcf7-form-control-wrap\" data-name=\"bestanden\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-drag-n-drop-file d-none\" id=\"bestanden\" aria-invalid=\"false\" type=\"file\" multiple=\"multiple\" data-name=\"bestanden\" data-type=\"jpg|jpeg|png|pdf\" data-limit=\"3000000\" data-max=\"10\" data-id=\"2709\" data-version=\"free version 1.3.9.8\" accept=\".jpg, .jpeg, .png, .pdf\" \/><\/span>\n<\/div>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"create_account\"><span class=\"wpcf7-form-control wpcf7-checkbox\" id=\"cf7_create_account\"><span class=\"wpcf7-list-item first last\"><input type=\"checkbox\" name=\"create_account[]\" value=\"Ja, maak een account\" \/><span class=\"wpcf7-list-item-label\">Ja, maak een account<\/span><\/span><\/span><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" id=\"url\" value=\"\" type=\"hidden\" name=\"url\" \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Verzenden\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t\n\t\t\t  <div id=\"ca-container\" class=\"checkbox-container\" style=\"display: block;\">\n\t\t\t\t<input type=\"checkbox\" id=\"create_account_formstep\" name=\"create_account\">\n\t\t\t\t<label style=\"width:100%!important;\" for=\"create_account_formstep\" class=\"custom-checkbox-label\">\n\t\t\t\t  Registreer je en volg je aanvragen in \u00e9\u00e9n oogopslag.\n\t\t\t\t<\/label>\n\t\t\t  <\/div>\n\n\t\t\t  <div id=\"have-account-container\" class=\"msf-note\" style=\"display:none; margin-bottom:1em;font-size:14px;\">\n\t\t\t\tZo te zien heb je al een account. \n\t\t\t\t<a href=\"#\" class=\"msf-open-login\">Klik hier om in te loggen<\/a>.\n\t\t\t  <\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t  <!-- Checkbox \u201cIk ga akkoord met privacy policy\u201d -->\n\t\t\t  <div class=\"checkbox-container\">\n\t\t\t\t<input type=\"checkbox\" id=\"agree_policy_formstep\" name=\"agree_policy\">\n\t\t\t\t<label style=\"width:100%!important;\" for=\"agree_policy_formstep\" class=\"custom-checkbox-label\">\n\t\t\t\t  Ik ga akkoord met de &nbsp;<a href=\"\/privacy-policy\/\" target=\"_blank\"> privacy policy<\/a>  <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<\/label>\n\t\t\t\t<div class=\"error agree-error\" style=\"display:none;color:#e74c3c;font-size:0.9em;\">\n\t\t\t\t\tJe moet akkoord gaan met de privacy policy.\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-123 -->\n\n\n\t\t\t<!-- RECHTER KOLOM: OVERZICHT AFSPRAAK -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t<div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t<div>1730 Kobbegem - Asse<\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-datum.png\" alt=\"Datum Icon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Datum en uur<\/h4>\n\t\t\t\t\t<div class=\"datetime-preview\">\n\t\t\t\t\t  <p><strong>Datum:<\/strong> <span id=\"selected_date\">Not selected<\/span><\/p>\n\t\t\t\t\t  <p><strong>Tijdstip:<\/strong> <span id=\"selected_time\">Not selected<\/span><\/p>\n\t\t\t\t\t  <p><strong>Mobiliteitsoplossing:<\/strong> <span id=\"selected_mobility\">Not selected<\/span><\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" id=\"msfFinalBtn\">Afspraak aanvragen<\/button>\n\t\t  <\/div>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t \n\t \n\t \n\t \n\t\t<div class=\"form-step\" id=\"form-submit\">\n\t\t  <div class=\"f-row\">\n\n\t\t\t<!-- ========== LINKER KOLOM: BEVESTIGINGSMESSAGE ========== -->\n\t\t\t<div class=\"f-123\" style=\"text-align: center; background-color: #f6f6f6;\">\n\t\t\t  <!-- Bovenste melding -->\n\t\t\t  <div class=\"f-1\" style=\"text-align: center; background-color: #ffffff; padding: 20px; border-radius: 10px;\">\n\t\t\t\t<p>\n\t\t\t\t  <strong>We hebben uw aanvraag goed ontvangen.<\/strong><br>\n\t\t\t\t  Een van onze collega's zal u binnenkort contacteren om uw afspraak te bevestigen en de praktische details te regelen.\n\t\t\t\t<\/p>\n\t\t\t\t<img\n\t\t\t\t  decoding=\"async\"\n\t\t\t\t  width=\"296\"\n\t\t\t\t  height=\"285\"\n\t\t\t\t  src=\"\/wp-content\/uploads\/2025\/06\/checkmark-miers.png\"\n\t\t\t\t  alt=\"Confirmation check\"\n\t\t\t\t  title=\"Confirmation check\"\n\t\t\t\t>\n\t\t\t  <\/div>\n\t\t\t  <br><br>\n\t\t\t  <!-- Onderstaande \u201cLet op!\u201d-box -->\n\t\t\t  <div class=\"f-1\" style=\"background-color: #f3faf9; border-radius: 10px;\">\n\t\t\t\t<p id=\"tr3\">\n\t\t\t\t  <strong>Let op!<\/strong> Dit is een aanvraag om een afspraak vast te leggen, deze moet eerst bevestigd worden.\n\t\t\t\t  Wacht op de bevestiging van uw verdeler voordat u naar de werkplaats komt.\n\t\t\t\t<\/p>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde linker kolom -->\n\n\n\t\t\t<!-- ========== RECHTER KOLOM: OVERZICHT VAN ALLE INGAVEN ========== -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Uw ingevulde gegevens<\/h4>\n\n\t\t\t  <!-- 1) Vaste locatie\u2010kaart -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<p>\n\t\t\t\t\t  <strong>Locatie:<\/strong>\n\t\t\t\t\t  <strong>MIERS Group<\/strong><br>\n\t\t\t\t\t  Brusselsesteenweg 333<br>\n\t\t\t\t\t  1730 Kobbegem - Asse\n\t\t\t\t\t<\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 2) Wagen\u2010gegevens -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 3) Interventies -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 4) Datum & Tijd & Mobiliteit -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-datum.png\" alt=\"Datum icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Datum en uur<\/h4>\n\t\t\t\t\t<p><strong>Datum:<\/strong> <span id=\"selected_date\">Not selected<\/span><\/p>\n\t\t\t\t\t<p><strong>Tijdstip:<\/strong> <span id=\"selected_time\">Not selected<\/span><\/p>\n\t\t\t\t\t<p><strong>Mobiliteitsoplossing:<\/strong> <span id=\"selected_mobility\">Not selected<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 5) Persoonlijke gegevens -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-user.png\" alt=\"Gebruikers icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Persoonlijke gegevens<\/h4>\n\t\t\t\t\t<p><strong>Type klant:<\/strong> <span class=\"user_type_preview\">Not selected<\/span><\/p>\n\t\t\t\t\t<!-- Enkel zichtbaar als er \u201cZakelijk\u201d is gekozen -->\n\t\t\t\t\t<p class=\"company-line\" style=\"display: none;\"><strong>Bedrijfsnaam:<\/strong> <span class=\"company_name_preview\"><\/span><\/p>\n\t\t\t\t\t<p class=\"tax-line\" style=\"display: none;\"><strong>BTW-nummer:<\/strong> <span class=\"tax_number_preview\"><\/span><\/p>\n\t\t\t\t\t<p><strong>Voornaam:<\/strong> <span class=\"first_name_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Achternaam:<\/strong> <span class=\"surname_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>E-mail:<\/strong> <span class=\"email_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Telefoon:<\/strong> <span class=\"phone_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Boodschap:<\/strong><\/p>\n\t\t\t\t\t<p><span class=\"message_preview\">\u2013 geen boodschap \u2013<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t<\/div> <!-- einde rechter kolom -->\n\t\t  <\/div> <!-- einde f-row -->\n\t\t<\/div> <!-- einde form-step #form-submit -->\n<\/div>\n\t\t<!-- Login Modal (verborgen) -->\n\t\t<div id=\"msf-login-modal\" class=\"msf-modal\">\n\t\t  <div class=\"msf-modal-content\">\n\t\t\t<form name=\"loginform\" id=\"loginform\" action=\"https:\/\/miers.be\/wp-login.php\" method=\"post\"><p class=\"login-username\">\n\t\t\t\t<label for=\"user_login\">E-mail<\/label>\n\t\t\t\t<input type=\"text\" name=\"log\" id=\"user_login\" autocomplete=\"username\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-password\">\n\t\t\t\t<label for=\"user_pass\">Wachtwoord<\/label>\n\t\t\t\t<input type=\"password\" name=\"pwd\" id=\"user_pass\" autocomplete=\"current-password\" spellcheck=\"false\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-remember\"><label><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/> Mij onthouden<\/label><\/p><p class=\"login-submit\">\n\t\t\t\t<input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button button-primary\" value=\"Inloggen\" \/>\n\t\t\t\t<input type=\"hidden\" name=\"redirect_to\" value=\"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/\" \/>\n\t\t\t<\/p><\/form>\t\t\t<button type=\"button\" id=\"msf-close-login\">Sluiten<\/button>\n\t\t  <\/div>\n\t\t<\/div>\n\n\t\t\t<div id=\"hidden-cf7\">\n\t\t\t  \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2709-o2\" lang=\"nl-BE\" dir=\"ltr\" data-wpcf7-id=\"2709\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/nl\/wp-json\/wp\/v2\/pages\/145#wpcf7-f2709-o2\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contactformulier\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2709\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"nl_BE\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2709-o2\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:2709,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;repeater_remove_button&quot;:&quot;bottom&quot;}}\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"license_plate\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Nummerplaat\" value=\"\" type=\"text\" name=\"license_plate\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mileage\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Kilometerstand\" value=\"\" type=\"text\" name=\"mileage\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"chassis\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Chassisnummer\" value=\"\" type=\"text\" name=\"chassis\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"brand\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Merk\" value=\"\" type=\"text\" name=\"brand\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"car_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type wagen\" value=\"\" type=\"text\" name=\"car_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies_id\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies_id\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"date\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Datum\" value=\"\" type=\"text\" name=\"date\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"time\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Tijd\" value=\"\" type=\"text\" name=\"time\" \/><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"renting_customer\" \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mobility_option\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Mobiliteitsoplossing\" value=\"\" type=\"text\" name=\"mobility_option\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"user_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type klant\" value=\"\" type=\"text\" name=\"user_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"company_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Bedrijfsnaam\" value=\"\" type=\"text\" name=\"company_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tax_number\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"BTW-nummer\" value=\"\" type=\"text\" name=\"tax_number\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"first_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Voornaam\" value=\"\" type=\"text\" name=\"first_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"surname\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Achternaam\" value=\"\" type=\"text\" name=\"surname\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"Telefoon\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Boodschap\" name=\"message\"><\/textarea><\/span>\n<div class=\"msf-file-only\">\n  <span class=\"wpcf7-form-control-wrap\" data-name=\"bestanden\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-drag-n-drop-file d-none\" aria-invalid=\"false\" type=\"file\" multiple=\"multiple\" data-name=\"bestanden\" data-type=\"jpg|jpeg|png|pdf\" data-limit=\"3000000\" data-max=\"10\" data-id=\"2709\" data-version=\"free version 1.3.9.8\" accept=\".jpg, .jpeg, .png, .pdf\" \/><\/span>\n<\/div>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"create_account\"><span class=\"wpcf7-form-control wpcf7-checkbox\"><span class=\"wpcf7-list-item first last\"><input type=\"checkbox\" name=\"create_account[]\" value=\"Ja, maak een account\" \/><span class=\"wpcf7-list-item-label\">Ja, maak een account<\/span><\/span><\/span><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"url\" \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Verzenden\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t<\/div>\n\n\n\n\n\n\n\n<!-- === CONSOLIDEERDE MULTI-STEP LOGICA + localStorage + flatpickr === -->\n\n\n<script>\n  \/\/ ================================\n  \/\/ A. STEP-INDEX & HASH\n  \/\/ ================================\n  let currentStep = 0;\n  const formSteps      = document.querySelectorAll('.form-step');\n  const stepIndicators = document.querySelectorAll('.step');\n\tconst LAST_STEP_INDEX = formSteps.length - 1;\n\n  function showStep(stepIndex) {\n    formSteps.forEach((stepEl, idx) => {\n      stepEl.classList.toggle('active', idx === stepIndex);\n    });\n    stepIndicators.forEach((indEl, idx) => {\n      indEl.classList.toggle('active',    idx <= stepIndex);\n      indEl.classList.toggle('completed', idx <  stepIndex);\n    });\n    currentStep = stepIndex;\n    window.location.hash = 'step' + stepIndex;\n\t  \n\t  onStepChange(stepIndex);\n\t  \n\t  if (stepIndex >= 3) {\n\t\tupdateStep3PreviewCards();\n\t  }\n\n\t  const anchor = document.getElementById('AfspraakInboeken');\n\t  if (anchor) {\n\t\tanchor.scrollIntoView({ behavior: 'smooth' });\n\t  }\n    \n    if (stepIndex === LAST_STEP_INDEX) {\n\t\tconst mob = (localStorage.getItem('msf_mobility_option') || '').toLowerCase();\n\n\t\tif (mob.includes('huurwagen')) {\n\t\t  const container = document.querySelector('#form-submit .f-123');\n\t\t  \/\/ enkel \u00e9\u00e9n keer toevoegen\n\t\t  if (!container.querySelector('.msf-to-rental')) {\n\t\t\tcontainer.insertAdjacentHTML('beforeend', `\n\t\t\t  <div class=\"msf-to-rental\" style=\"margin-top:1.5em; padding:1em; background:#eef; border-radius:8px;\">\n\t\t\t\t<p><strong>Wil je alvast je huurwagen boeken?<\/strong><br>\n\t\t\t\t   Bekijk dan snel onze verhuurpagina.<\/p>\n\t\t\t\t<a href=\"verhuur-van-bestelwagens-bedrijfsvoertuigen\/#resultaten\" class=\"button\" style=\"display:inline-block;margin-top:0.5em;padding:0.75em 1.5em;\n\t\t\t\t   background:#0C5453;color:#fff;border-radius:5px;text-decoration:none;\">\n\t\t\t\t  Naar verhuur\n\t\t\t\t<\/a>\n\t\t\t  <\/div>\n\t\t\t`);\n\t\t  }\n\t\t}\n      launchConfetti();\n    }\n  }\n\n  function nextStep() {\n\t  \/\/ 0) Verwijder oude foutmeldingen\n\t  document.querySelectorAll('.msf-error').forEach(e => e.remove());\n\n\t  \/\/ 1) Validatie per stap\n\t  if (currentStep === 0) {\n\t\t\/\/ stap 1: nummerplaat, kilometerstand, type wagen\n\t\tlet valid = true;\n\t\tconst plate   = document.getElementById('license_plate');\n\t\tconst mileage = document.getElementById('mileage');\n\t\tconst carType = document.getElementById('car_type');\n\n\t\tif (!plate.value.trim()) {\n\t\t  plate.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Vul je nummerplaat in<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!mileage.value.trim()) {\n\t\t  mileage.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Vul je kilometerstand in<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!carType.value.trim()) {\n\t\t  carType.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een type wagen<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!valid) return;\n\t  }\n\n\t  if (currentStep === 1) {\n\t\t\/\/ stap 2: minstens 1 interventie\n\t\tconst checked = document.querySelectorAll('.inventory-checkbox:checked');\n\t\tif (checked.length < 1) {\n\t\t  const container = document.querySelector('.f-123.interventies');\n\t\t  container.insertAdjacentHTML('beforeend',\n\t\t\t'<div class=\"msf-error\">Kies minstens 1 interventie<\/div>'\n\t\t  );\n\t\t  return;\n\t\t}\n\t  }\n\n\t  if (currentStep === 2) {\n\t\t\/\/ stap 3: datum, tijd en mobiliteitsoplossing\n\t\tlet ok = true;\n\t\tconst dateInput = document.getElementById('datepicker');\n\t\tconst timeInput = document.getElementById('selectedTimeInput');\n\t\tconst rentingQuestion = document.getElementById('renting-question');\n\t\tconst rentChecked = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t\tconst mobInput  = document.getElementById('mobility_option');\n\n\t\tif (!dateInput.value) {\n\t\t  dateInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een datum<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!timeInput.value) {\n\t\t  timeInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een uur<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!rentChecked) {\n\t\t\trentingQuestion.insertAdjacentHTML('beforeend',\n\t\t\t  '<div class=\"msf-error\">Geef aan of je een renting klant bent<\/div>'\n\t\t\t);\n\t\t\tok = false;\n  \t\t}\n\t\tif (!mobInput.value) {\n\t\t  mobInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een mobiliteitsoplossing<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!ok) return;\n\t  }\n\n\t  if (currentStep === 3) {\n\t\t\/\/ stap 4: voornaam, achternaam, email, privacy\n\t\tlet ok = true;\n\n\t\t\/\/ required fields\n\t\tconst fields = [\n\t\t  { id: 'first_name_formstep',  msg: 'Vul je voornaam in'},\n\t\t  { id: 'surname_formstep',     msg: 'Vul je achternaam in'},\n\t\t  { id: 'email_formstep',       msg: 'Vul je e-mail in'},\n\t\t];\n\t\tfields.forEach(({id,msg}) => {\n\t\t  const el = document.getElementById(id);\n\t\t  if (!el.value.trim()) {\n\t\t\tel.insertAdjacentHTML('afterend',\n\t\t\t  `<div class=\"msf-error\">${msg}<\/div>`\n\t\t\t);\n\t\t\tok = false;\n\t\t  }\n\t\t});\n\n\t\t\/\/ privacy checkbox\n\t\tconst agreeEl = document.getElementById('agree_policy_formstep');\n\t\tif (!agreeEl.checked) {\n\t\t  \/\/ plaats de foutmelding onder de .checkbox-container\n\t\t  const wrapper = agreeEl.closest('.checkbox-container');\n\t\t  wrapper.insertAdjacentHTML('beforeend',\n\t\t\t'<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t  if (window.initDragDrop) {\n\t\t\t\twindow.initDragDrop(); \n\t\t\t  }\n\t\t\t}, 50);\n\n\t\tif (!ok) return;\n\t  }\n\n\t  \/\/ 2) Als alles ok is: naar de volgende stap\n\t  showStep(currentStep + 1);\n\t}\n\n  function prevStep() {\n    if (currentStep > 0) {\n      showStep(currentStep - 1);\n    }\n  }\n\n  \/\/ Alleen stappen \u2264 currentStep zijn \u201cklikbaar\u201d\n  stepIndicators.forEach((stepEl, idx) => {\n    stepEl.style.cursor = (idx <= currentStep ? 'pointer' : 'not-allowed');\n    stepEl.addEventListener('click', () => {\n      if (idx <= currentStep) {\n        showStep(idx);\n      }\n    });\n  });\n\n\n  \/\/ ================================\n  \/\/ B. localStorage: STAP 1 (Wagen)\n  \/\/ ================================\n  const LS_KEYS = {\n    license_plate: 'msf_license_plate',\n    mileage:       'msf_mileage',\n\tchassis: \t   'msf_chassis',\n    car_type:      'msf_car_type',\n    brand:         'msf_brand'\n  };\n\n  function saveStep1ValuesToStorage() {\n    const lp   = document.getElementById('license_plate')?.value || '';\n    const km   = document.getElementById('mileage')?.value || '';\n\tconst ch = document.getElementById('chassis')?.value || '';\n    const type = document.getElementById('car_type')?.value || '';\n    const merk = document.getElementById('brand_select')?.value || '';\n    localStorage.setItem(LS_KEYS.license_plate, lp);\n    localStorage.setItem(LS_KEYS.mileage,       km);\n\tlocalStorage.setItem(LS_KEYS.chassis, ch);\n    localStorage.setItem(LS_KEYS.car_type,      type);\n    localStorage.setItem(LS_KEYS.brand,         merk);\n  }\n\n  function loadStep1ValuesFromStorage() {\n    const lpStored   = localStorage.getItem(LS_KEYS.license_plate);\n    const kmStored   = localStorage.getItem(LS_KEYS.mileage);\n\tconst chStored = localStorage.getItem(LS_KEYS.chassis);\n    const typeStored = localStorage.getItem(LS_KEYS.car_type);\n    const merkStored = localStorage.getItem(LS_KEYS.brand);\n\n    if (lpStored   !== null) document.getElementById('license_plate').value = lpStored;\n    if (kmStored   !== null) document.getElementById('mileage').value       = kmStored;\n\tif (chStored !== null) document.getElementById('chassis').value = chStored;\n    if (typeStored !== null) document.getElementById('car_type').value      = typeStored;\n    if (merkStored !== null) {\n      const brandSelect = document.getElementById('brand_select');\n      if (brandSelect) {\n        brandSelect.value = merkStored;\n        if (window.jQuery && jQuery('#brand_select').data('select2')) {\n          jQuery('#brand_select').trigger('change.select2');\n        }\n      }\n    }\n  }\n\n  function initStep1Listeners() {\n    ['license_plate','mileage', 'chassis', 'car_type','brand_select'].forEach(id => {\n      const el = document.getElementById(id);\n      if (!el) return;\n      \/\/ Input\u2010velden (text\/number) \u2192 input\u2010event\n      el.addEventListener('input', () => {\n        saveStep1ValuesToStorage();\n        updateAllPreviews();\n      });\n      \/\/ <select> \u2192 change\u2010event\n      if (el.tagName.toLowerCase() === 'select') {\n        el.addEventListener('change', () => {\n          saveStep1ValuesToStorage();\n          updateAllPreviews();\n        });\n      }\n    });\n  }\n\n\n  \/\/ ============================================\n  \/\/ C. localStorage: STAP 2 (Interventies)\n  \/\/ ============================================\n  const LS_KEYS_2 = {\n    interventies: 'msf_interventies'\n  };\n\n  function saveStep2ValuesToStorage() {\n    const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');\n    const ids = Array.from(checkedBoxes).map(cb => cb.value);\n    localStorage.setItem(LS_KEYS_2.interventies, JSON.stringify(ids));\n  }\n\n  function loadStep2ValuesFromStorage() {\n    const stored = localStorage.getItem(LS_KEYS_2.interventies);\n    if (stored) {\n      try {\n        const ids = JSON.parse(stored);\n        ids.forEach(id => {\n          const cb = document.querySelector('.inventory-checkbox[value=\"' + id + '\"]');\n          if (cb) {\n            cb.checked = true;\n            const lab = cb.closest('label');\n            if (lab) lab.classList.add('selected');\n          }\n        });\n      } catch(e) {\n        console.error(e);\n      }\n    }\n  }\n\n  function updateStep2PreviewCards() {\n    const selectedImages = document.querySelectorAll('.inventory-checkbox:checked');\n    document.querySelectorAll('.selected_images_preview').forEach(container => {\n      container.innerHTML = '';\n      \/\/ Toon alles in \u00e9\u00e9n regel, gescheiden door komma + spatie\n      const titles = Array.from(selectedImages).map(cb => cb.dataset.title.trim());\n      if (titles.length) {\n        container.textContent = titles.join(', ');\n      } else {\n        container.textContent = ''; \n      }\n    });\n  }\n\n  function initStep2Listeners() {\n    const checkboxes = document.querySelectorAll('.inventory-checkbox');\n    checkboxes.forEach(cb => {\n      cb.addEventListener('change', () => {\n        const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');\n        if (checkedBoxes.length > 3) {\n          \/\/ Als er al 3 zijn, zet deze uit en toon waarschuwing\n          cb.checked = false;\n          alert('Je kan maximaal 3 interventies selecteren.');\n          return;\n        }\n        \/\/ Toggle .selected\u2010klasse op label\n        const lab = cb.closest('label');\n        if (lab) lab.classList.toggle('selected', cb.checked);\n\n        \/\/ Sla selectie op + update preview\n        saveStep2ValuesToStorage();\n        updateStep2PreviewCards();\n\n        \/\/ Als er nu \u2265 3 geselecteerd zijn \u2192 disable de rest\n        const newCheckedCount = document.querySelectorAll('.inventory-checkbox:checked').length;\n        if (newCheckedCount >= 3) {\n          document.querySelectorAll('.inventory-checkbox:not(:checked)').forEach(uncheckedCb => {\n            uncheckedCb.disabled = true;\n            const lbl = uncheckedCb.closest('label');\n            if (lbl) lbl.style.opacity = '0.5';\n          });\n        } else {\n          \/\/ Anders: alles weer inschakelen\n          document.querySelectorAll('.inventory-checkbox').forEach(allCb => {\n            allCb.disabled = false;\n            const lbl = allCb.closest('label');\n            if (lbl) lbl.style.opacity = '1';\n          });\n        }\n      });\n    });\n  }\n\n  \/\/ \u201cMeer laden\u2026\u201d\u2010knop (stap 2)\n  function initLoadMoreButton() {\n    const loadMoreBtn = document.getElementById('loadMoreBtn');\n    if (loadMoreBtn) {\n      loadMoreBtn.addEventListener('click', () => {\n        document.querySelectorAll('.hidden-more').forEach(el => el.classList.remove('hidden-more'));\n        loadMoreBtn.style.display = 'none';\n      });\n    }\n  }\n\n\n  \/\/ ================================================\n  \/\/ D. Preview STAP 1 voor STAP 2\/3\/4 (locatie-kaarten)\n  \/\/ ================================================\n\t  function updateStep1PreviewCards() {\n\t\tconst lpStored   = localStorage.getItem(LS_KEYS.license_plate) || 'Niet toegevoegd';\n\t\tconst kmStored   = localStorage.getItem(LS_KEYS.mileage) || 'Niet toegevoegd';\n\t\tconst chStored   = localStorage.getItem(LS_KEYS.chassis) || 'Niet toegevoegd';\n\t\tconst merkStored = localStorage.getItem(LS_KEYS.brand);\n\n\t\tlet carTypeText = 'Niet toegevoegd';\n\t\tconst carTypeEl = document.getElementById('car_type');\n\t\tif (carTypeEl) {\n\t\t  const idx = carTypeEl.selectedIndex;\n\t\t  if (idx > 0) {\n\t\t\tcarTypeText = carTypeEl.options[idx].text;\n\t\t  } else {\n\t\t\tconst storedSlug = localStorage.getItem(LS_KEYS.car_type);\n\t\t\tif (storedSlug) {\n\t\t\t  const opt = Array.from(carTypeEl.options).find(o => o.value === storedSlug);\n\t\t\t  if (opt) carTypeText = opt.text;\n\t\t\t}\n\t\t  }\n\t\t}\n\n\t\t\/\/ update previews\n\t\tdocument.querySelectorAll('.license_plate_preview').forEach(el => el.textContent = lpStored);\n\t\tdocument.querySelectorAll('.mileage_preview').forEach(el     => el.textContent = kmStored);\n\t\tdocument.querySelectorAll('.chassis_preview').forEach(el     => el.textContent = chStored);\n\t\tdocument.querySelectorAll('.car_type_preview').forEach(el    => el.textContent = carTypeText);\n\n\t\tdocument.querySelectorAll('.brand_preview').forEach(el => {\n\t\t  const parentP = el.closest('.brand-line');\n\t\t  if (merkStored && merkStored.trim() !== '') {\n\t\t\tel.textContent = merkStored;\n\t\t\tif (parentP) parentP.style.display = 'block';\n\t\t  } else {\n\t\t\tel.textContent = 'Not entered';\n\t\t\tif (parentP) parentP.style.display = 'none';\n\t\t  }\n\t\t});\n\t}\n\n\n  \/\/ ================================================\n  \/\/ E. localStorage: STAP 3 (Datum & tijd & mobiliteit)\n  \/\/ ================================================\n  const LS_KEYS_3 = {\n    date:            'msf_date',\n    time:            'msf_time',\n\trenting_customer: 'msf_renting_customer',\n    mobility_option: 'msf_mobility_option'\n  };\n\n  function saveStep3ValuesToStorage() {\n    const dateVal = document.getElementById('datepicker')?.value || '';\n    const timeVal = document.getElementById('selectedTimeInput')?.value || '';\n\tconst rentingVal = document.querySelector('input[name=\"renting_customer\"]:checked')?.value || '';\n    const mobVal  = document.getElementById('mobility_option')?.value || '';\n    localStorage.setItem(LS_KEYS_3.date,            dateVal);\n    localStorage.setItem(LS_KEYS_3.time,            timeVal);\n\tlocalStorage.setItem(LS_KEYS_3.renting_customer, rentingVal);\n    localStorage.setItem(LS_KEYS_3.mobility_option, mobVal);\n  }\n\n  function loadStep3ValuesFromStorage() {\n    const dateStored = localStorage.getItem(LS_KEYS_3.date);\n    const timeStored = localStorage.getItem(LS_KEYS_3.time);\n\tconst rentStored = localStorage.getItem(LS_KEYS_3.renting_customer);\n    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option);\n\n    if (dateStored !== null) {\n      const dateInput = document.getElementById('datepicker');\n      if (dateInput) dateInput.value = dateStored;\n    }\n    if (timeStored !== null) {\n      \/\/ Hidden input \u201cselectedTimeInput\u201d\n      const hiddenTimeInput = document.getElementById('selectedTimeInput');\n      if (hiddenTimeInput) hiddenTimeInput.value = timeStored;\n      \/\/ Highlight de juiste knop in de \u201cslots\u201d-div\n      document.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n        if (btn.dataset.time === timeStored) {\n          btn.classList.add('active');\n          document.getElementById('selected_time').textContent = timeStored;\n        } else {\n          btn.classList.remove('active');\n        }\n      });\n    }\n\tif (rentStored) {\n\t\tconst radio = document.querySelector(`input[name=\"renting_customer\"][value=\"${rentStored}\"]`);\n\t\tif (radio) {\n\t\t  radio.checked = true;\n\t\t  radio.dispatchEvent(new Event('change'));\n\t\t}\n\t  }\n    if (mobStored !== null) {\n      const mobSelect = document.getElementById('mobility_option');\n      if (mobSelect) mobSelect.value = mobStored;\n      document.getElementById('selected_mobility').textContent = mobStored || 'Not selected';\n    }\n  }\n\n\tfunction initStep3Listeners() {\n\t  const dateInput = document.getElementById('datepicker');\n\t  if (!dateInput) return;\n\n\t  \/\/ === Initialiseer Flatpickr met dynamische disable-functie ===\n\t  flatpickr(dateInput, {\n\t\t  inline: true,\n\t\t  dateFormat: \"Y-m-d\",\n\t\t  locale: 'nl',\n\t\t  disable: [\n\t\t\tfunction(date) {\n\t\t\t  const dow = date.getDay();\n\t\t\t  const ctText = document\n\t\t\t\t.getElementById('car_type')\n\t\t\t\t.options[\n\t\t\t\t  document.getElementById('car_type').selectedIndex\n\t\t\t\t]?.text\n\t\t\t\t.toLowerCase() || '';\n\t\t\t  \/\/ altijd zondag, en zaterdag alleen uit als personenwagen\n\t\t\t  return dow === 0 || (dow === 6 && ctText.includes('personenwagen'));\n\t\t\t}\n\t\t  ],\n\t\t  onChange(selectedDates, dateStr) {\n\t\t\tif (!selectedDates.length) return;\n\n\t\t\tconst jsDate = selectedDates[0];\n\t\t\tconst dow    = jsDate.getDay();\n\t\t\tconst ctSelect = document.getElementById('car_type');\n\t\t\tconst ctText   = ctSelect.options[ctSelect.selectedIndex]?.text.toLowerCase() || '';\n\n\t\t\t\/\/ toon de tijdkolom\n\t\t\tdocument.getElementById('selectedDateDisplay').textContent = dateStr;\n\t\t\tdocument.getElementById('timeColumn').classList.add('visible');\n\t\t\tsaveStep3ValuesToStorage();\n\t\t\tupdateStep3PreviewCards();\n\n\t\t\t\/\/ filter de knoppen\n\t\t\tdocument.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n\t\t\t  const uur = parseInt(btn.dataset.time.split(':')[0], 10);\n\t\t\t  if (dow === 6 && !ctText.includes('personenwagen')) {\n\t\t\t\t\/\/ zaterdag & niet personenwagen \u2192 enkel 08\u201311 (voor 12u)\n\t\t\t\tbtn.style.display = (uur >= 8 && uur < 12) ? 'block' : 'none';\n\t\t\t  } else {\n\t\t\t\t\/\/ alle andere dagen \/ personenwagens \u2192 alles\n\t\t\t\tbtn.style.display = 'block';\n\t\t\t  }\n\t\t\t});\n\t\t  }\n\t\t});\n\n\t  \/\/ bij wijzigen van het type wagen kalender hertekenen\n\t  document.getElementById('car_type').addEventListener('change', () => {\n\t\tconst fp = dateInput._flatpickr;\n\t\tif (fp) fp.redraw();\n\t  });\n\n\t  \/\/ === Tijd-knoppen ===\n\t  document.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n\t\tbtn.addEventListener('click', function() {\n\t\t  \/\/ active-state\n\t\t  document.querySelectorAll('#timeColumn .slots button')\n\t\t\t\t  .forEach(b => b.classList.remove('active'));\n\t\t  this.classList.add('active');\n\t\t  const chosen = this.dataset.time || '';\n\n\t\t  \/\/ hidden input\n\t\t  let hidden = document.getElementById('selectedTimeInput');\n\t\t  if (!hidden) {\n\t\t\thidden = document.createElement('input');\n\t\t\thidden.type = 'hidden';\n\t\t\thidden.name = 'time';\n\t\t\thidden.id   = 'selectedTimeInput';\n\t\t\tdocument.getElementById('multiStepForm').appendChild(hidden);\n\t\t  }\n\t\t  hidden.value = chosen;\n\n\t\t  \/\/ sla op & preview\n\t\t  saveStep3ValuesToStorage();\n\t\t  document.getElementById('selected_time').textContent = chosen || 'Not selected';\n\t\t  updateStep3PreviewCards();\n\n\t\t  \/\/ waarschuwing na 14u\n\t\t  const old = document.getElementById('msf-time-warning');\n\t\t  if (old) old.remove();\n\t\t  const uur = parseInt(chosen.split(':')[0], 10);\n\t\t  if (!isNaN(uur) && uur >= 14) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.id = 'msf-time-warning';\n\t\t\tdiv.className = 'f-1';\n\t\t\tdiv.style.cssText = 'background-color: #f3faf9; border-radius:10px; margin-top:1em;';\n\t\t\tdiv.innerHTML = `\n\t\t\t  <p id=\"tr3\">\n\t\t\t\t<strong>Let op!<\/strong> vanaf ${chosen} kunnen we niet garanderen dat de wagen vandaag zal voltooid zijn.\n\t\t\t  <\/p>`;\n\t\t\tdocument.querySelector('.kalender').appendChild(div);\n\t\t  }\n\t\t});\n\t  });\n\t\n\t\t\/\/ === Renting logica ===\n\t\tconst rentingRadios = document.querySelectorAll('input[name=\"renting_customer\"]');\n\t\tconst mobContainer  = document.getElementById('mobility-container');\n\t\tconst mobSelect     = document.getElementById('mobility_option');\n\n\t\trentingRadios.forEach(radio => {\n\t\t  radio.addEventListener('change', () => {\n\t\t\t\/\/ leeg oude opties\n\t\t\tmobSelect.innerHTML = '<option value=\"\">Maak een keuze<\/option>';\n\t\t\tif (radio.value === 'ja') {\n\t\t\t  ['Ik zal wachten','Ik wil een vervangwagen','Ik wil een fiets']\n\t\t\t\t.forEach(text => {\n\t\t\t\t  const opt = document.createElement('option');\n\t\t\t\t  opt.textContent = text;\n\t\t\t\t  mobSelect.appendChild(opt);\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t  ['Ik zal wachten','Ik wil een huurwagen ( vanaf \u20ac100 \/ dag )','Ik wil een fiets']\n\t\t\t\t.forEach(text => {\n\t\t\t\t  const opt = document.createElement('option');\n\t\t\t\t  opt.textContent = text;\n\t\t\t\t  mobSelect.appendChild(opt);\n\t\t\t\t});\n\t\t\t}\n\t\t\t\/\/ toon dropdown + opslaan\n\t\t\tmobContainer.style.display = 'block';\n\t\t\tsaveStep3ValuesToStorage();\n\t\t  });\n\t\t});\n\t\n\n\t  \/\/ === Mobiliteits-dropdown ===\n\t  const mob = document.getElementById('mobility_option');\n\t  if (mob) {\n\t\tmob.addEventListener('change', () => {\n\t\t  saveStep3ValuesToStorage();\n\t\t  document.getElementById('selected_mobility').textContent = mob.value || 'Not selected';\n\t\t  updateStep3PreviewCards();\n\t\t});\n\t  }\n\t  const preChecked = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  if (preChecked) {\n\t\t\/\/ hiermee wordt de hierboven geregistreerde change-handler \u00e9\u00e9n keer aangeroepen\n\t\tpreChecked.dispatchEvent(new Event('change'));\n\t\t\/\/ \u00e9n meteen de eerder gekozen optie selecteren in de dropdown\n\t\tconst storedMob = localStorage.getItem(LS_KEYS_3.mobility_option);\n\t\tif (storedMob) {\n\t\t  mobSelect.value = storedMob;\n\t\t  document.getElementById('selected_mobility').textContent = storedMob;\n\t\t  updateStep3PreviewCards();\n\t\t}\n\t  }\n\t}\n\n\n  \/\/ ================================================\n  \/\/ G. localStorage: STAP 4 (Contactgegevens)\n  \/\/ ================================================\n  const LS_KEYS_4 = {\n    user_type:    'msf_user_type',\n    company_name: 'msf_company_name',\n    tax_number:   'msf_tax_number',\n    first_name:   'msf_first_name',\n    surname:      'msf_surname',\n    email:        'msf_email',\n    phone:        'msf_phone',\n    message:      'msf_message',\n    create_account: 'msf_create_account',\n    agree_policy:   'msf_agree_policy'\n  };\n\n  function saveStep4ValuesToStorage() {\n    const ut = document.querySelector('input[name=\"user_type\"]:checked')?.value || '';\n    localStorage.setItem(LS_KEYS_4.user_type, ut);\n\n    if (ut === 'professional') {\n      const cn = document.querySelector('input[name=\"company_name\"]')?.value || '';\n      const tn = document.querySelector('input[name=\"tax_number\"]')?.value || '';\n      localStorage.setItem(LS_KEYS_4.company_name, cn);\n      localStorage.setItem(LS_KEYS_4.tax_number,   tn);\n    } else {\n      localStorage.removeItem(LS_KEYS_4.company_name);\n      localStorage.removeItem(LS_KEYS_4.tax_number);\n    }\n\n    const fn = document.querySelector('input[name=\"first_name\"]')?.value || '';\n    const sn = document.querySelector('input[name=\"surname\"]')?.value || '';\n    const em = document.querySelector('input[name=\"email\"]')?.value || '';\n    const ph = document.querySelector('input[name=\"phone\"]')?.value || '';\n    const ms = document.querySelector('textarea[name=\"message\"]')?.value || '';\n    const ca = document.querySelector('input[name=\"create_account\"]')?.checked || false;\n    const ap = document.querySelector('input[name=\"agree_policy\"]')?.checked || false;\n\n    localStorage.setItem(LS_KEYS_4.first_name,   fn);\n    localStorage.setItem(LS_KEYS_4.surname,      sn);\n    localStorage.setItem(LS_KEYS_4.email,        em);\n    localStorage.setItem(LS_KEYS_4.phone,        ph);\n    localStorage.setItem(LS_KEYS_4.message,      ms);\n    localStorage.setItem(LS_KEYS_4.create_account, ca ? 'yes' : 'no');\n    localStorage.setItem(LS_KEYS_4.agree_policy,   ap ? 'yes' : 'no');\n  }\n\n  function loadStep4ValuesFromStorage() {\n    const utStored = localStorage.getItem(LS_KEYS_4.user_type);\n    if (utStored) {\n      const utRadio = document.querySelector('input[name=\"user_type\"][value=\"' + utStored + '\"]');\n      if (utRadio) utRadio.checked = true;\n    }\n    \/\/ Toon of verberg bedrijfs\u2010velden\n    const proFields = document.getElementById('proFields');\n    if (proFields) {\n      proFields.style.display = (utStored === 'professional') ? 'block' : 'none';\n    }\n\n    const companyStored = localStorage.getItem(LS_KEYS_4.company_name);\n    if (companyStored !== null) {\n      document.querySelector('input[name=\"company_name\"]').value = companyStored;\n    }\n    const taxStored = localStorage.getItem(LS_KEYS_4.tax_number);\n    if (taxStored !== null) {\n      document.querySelector('input[name=\"tax_number\"]').value = taxStored;\n    }\n\n    const fnStored = localStorage.getItem(LS_KEYS_4.first_name);\n    if (fnStored !== null) {\n      document.querySelector('input[name=\"first_name\"]').value = fnStored;\n    }\n    const snStored = localStorage.getItem(LS_KEYS_4.surname);\n    if (snStored !== null) {\n      document.querySelector('input[name=\"surname\"]').value = snStored;\n    }\n    const emStored = localStorage.getItem(LS_KEYS_4.email);\n    if (emStored !== null) {\n      document.querySelector('input[name=\"email\"]').value = emStored;\n    }\n    const phStored = localStorage.getItem(LS_KEYS_4.phone);\n    if (phStored !== null) {\n      document.querySelector('input[name=\"phone\"]').value = phStored;\n    }\n    const msStored = localStorage.getItem(LS_KEYS_4.message);\n    if (msStored !== null) {\n      document.querySelector('textarea[name=\"message\"]').value = msStored;\n    }\n    const caStored = localStorage.getItem(LS_KEYS_4.create_account);\n    if (caStored === 'yes') {\n      document.querySelector('input[name=\"create_account\"]').checked = true;\n    }\n    const apStored = localStorage.getItem(LS_KEYS_4.agree_policy);\n    if (apStored === 'yes') {\n      document.querySelector('input[name=\"agree_policy\"]').checked = true;\n    }\n  }\n\n  function initStep4Listeners() {\n    \/\/ 1) \u201cType klant\u201d radiobuttons\n    document.querySelectorAll('input[name=\"user_type\"]').forEach(radio => {\n      radio.addEventListener('change', () => {\n        const sel = document.querySelector('input[name=\"user_type\"]:checked')?.value;\n        const proFields = document.getElementById('proFields');\n        if (proFields) proFields.style.display = (sel === 'professional') ? 'block' : 'none';\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n\n    \/\/ 2) Bedrijfsnaam + btw\u2010nr\n    ['company_name','tax_number'].forEach(name => {\n      const el = document.querySelector(`input[name=\"${name}\"]`);\n      if (!el) return;\n      el.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n\n    \/\/ 3) Voornaam, Achternaam, E-mail, Telefoon\n    ['first_name','surname','email','phone'].forEach(name => {\n      const el = document.querySelector(`input[name=\"${name}\"]`);\n      if (!el) return;\n      el.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n    const msgEl = document.querySelector('textarea[name=\"message\"]');\n    if (msgEl) {\n      msgEl.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n\n    \/\/ 4) \u201cMaak account\u201d\u2010checkbox\n    const caCb = document.querySelector('input[name=\"create_account\"]');\n    if (caCb) {\n      caCb.addEventListener('change', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n\n    \/\/ 5) \u201cPrivacy policy\u201d\u2010checkbox\n    const apCb = document.querySelector('input[name=\"agree_policy\"]');\n    if (apCb) {\n      apCb.addEventListener('change', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n  }\n\n\n  \/\/ =======================================================\n  \/\/ H. Preview STAP 3 in STAP 4\/5 (datum\/tijd\/mobiliteit)\n  \/\/ =======================================================\n  function updateStep3PreviewCards() {\n    const dateStored = localStorage.getItem(LS_KEYS_3.date) || 'Not selected';\n    const timeStored = localStorage.getItem(LS_KEYS_3.time) || 'Not selected';\n    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option) || 'Not selected';\n\n    document.querySelectorAll('#selected_date').forEach(el => {\n    el.textContent = dateStored;\n  });\n  document.querySelectorAll('#selected_time').forEach(el => {\n    el.textContent = timeStored;\n  });\n  document.querySelectorAll('#selected_mobility').forEach(el => {\n    el.textContent = mobStored;\n  });\n  }\n\n\n  \/\/ =======================================================\n  \/\/ I. Preview STAP 4 in STAP 5 (contactgegevens)\n  \/\/ =======================================================\n function updateStep4PreviewCards() {\n\t  \/\/ Haal user_type uit localStorage\n\t  const ut = localStorage.getItem('msf_user_type') || '';\n\t  document.querySelectorAll('.user_type_preview').forEach(el => {\n\t\tel.textContent = ut || 'Not selected';\n\t  });\n\n\t  \/\/ Toon\/verberg bedrijfsnaam + tax\u2010nummer\n\t  const showPro = (ut === 'professional');\n\t  document.querySelector('.company-line').style.display = showPro ? 'block' : 'none';\n\t  document.querySelector('.tax-line').style.display     = showPro ? 'block' : 'none';\n\n\t  \/\/ Vul bedrijfsnaam en tax_\u200bnummer\n\t  const cn = localStorage.getItem('msf_company_name') || '';\n\t  const tn = localStorage.getItem('msf_tax_number')   || '';\n\t  document.querySelectorAll('.company_name_preview').forEach(e => e.textContent = cn);\n\t  document.querySelectorAll('.tax_number_preview').forEach(e => e.textContent   = tn);\n\n\t  \/\/ Vul voornaam, achternaam, e-mail, telefoon, boodschap\n\t  const fn = localStorage.getItem('msf_first_name') || '';\n\t  const sn = localStorage.getItem('msf_surname')    || '';\n\t  const em = localStorage.getItem('msf_email')      || '';\n\t  const ph = localStorage.getItem('msf_phone')      || '';\n\t  const ms = localStorage.getItem('msf_message')    || '';\n\t  document.querySelectorAll('.first_name_preview').forEach(e => e.textContent = fn || 'Not entered');\n\t  document.querySelectorAll('.surname_preview').forEach(e    => e.textContent = sn || 'Not entered');\n\t  document.querySelectorAll('.email_preview').forEach(e      => e.textContent = em || 'Not entered');\n\t  document.querySelectorAll('.phone_preview').forEach(e      => e.textContent = ph || 'Not entered');\n\t  document.querySelectorAll('.message_preview').forEach(e    => e.textContent = ms || '\u2013 geen boodschap \u2013');\n\t}\n\n\n  \/\/ =======================================================\n  \/\/ J. Alles updaten bij laden\n  \/\/ =======================================================\n  function loadFormValuesFromStorage() {\n    \/\/ Stap 1\n    loadStep1ValuesFromStorage();\n    initStep1Listeners();\n\n    \/\/ Stap 2\n    loadStep2ValuesFromStorage();\n    initStep2Listeners();\n    updateStep2PreviewCards();\n\n    \/\/ Stap 3\n    loadStep3ValuesFromStorage();\n    initStep3Listeners();\n    updateStep3PreviewCards();\n\n    \/\/ Stap 4\n    loadStep4ValuesFromStorage();\n    initStep4Listeners();\n    updateStep4PreviewCards();\n  }\n\n  function updateAllPreviews() {\n    updateStep1PreviewCards();\n    updateStep2PreviewCards();\n    updateStep3PreviewCards();\n    updateStep4PreviewCards();\n  }\n\n\n  \/\/ =======================================================\n  \/\/ K. Initialisatie bij page load\n  \/\/ =======================================================\n  document.addEventListener('DOMContentLoaded', () => {\n\n    \/\/ 1) Step Indicators & Hash\n    \/\/initStepIndicators();\n    \/\/ 2) Lees hash (#step0\u2026#step4) indien aanwezig\n    const hash = window.location.hash;\n    if (hash && hash.startsWith('#step')) {\n      const idx = parseInt(hash.replace('#step', ''), 10);\n      if (!isNaN(idx) && idx >= 0 && idx < formSteps.length) {\n        currentStep = idx;\n      }\n    }\n    showStep(currentStep);\n\n    \/\/ 3) Laad alle opgeslagen waarden & listeners\n    loadFormValuesFromStorage();\n\n    \/\/ 4) Init \u201cMeer laden\u201d-knop (stap 2)\n    initLoadMoreButton();\n\n    \/\/ 5) Initialiseer Flatpickr, tijdselect en mobiliteit (stap 3) \u2192 zat al in initStep3Listeners()\n\n    \/\/ 6) Update alle previews (indien terug navigeren)\n    updateAllPreviews();\n\t  \n\t  (function(){\n\t\t\tconst carSelect = document.getElementById('car_type');\n\t\t\tif (!carSelect) return;\n\n\t\t\tfunction filterInterventions(){\n\t\t\t  const selected = carSelect.value;\n\t\t\t  document.querySelectorAll('.interventie-optie').forEach(label => {\n\t\t\t\tconst hl = label.dataset.highlights.split(' ').filter(s => s);\n\t\t\t\tif (selected && hl.indexOf(selected) === -1) {\n\t\t\t\t  label.style.display = 'none';\n\t\t\t\t  const cb = label.querySelector('input[type=\"checkbox\"]');\n\t\t\t\t  if (cb) cb.checked = false;\n\t\t\t\t} else {\n\t\t\t\t  label.style.display = '';\n\t\t\t\t}\n\t\t\t  });\n\t\t\t}\n\n\t\t\t\/\/ bind en init\n\t\t\tcarSelect.addEventListener('change', filterInterventions);\n\t\t\tfilterInterventions();\n\t\t  })();\n\t  \n\t  \n  });\n\n\t\n\tfunction initStep4FieldSync() {\n  const ids = [\n    'cf_company_name_formstep',\n    'cf_tax_number_formstep',\n    'cf_first_name_formstep',\n    'cf_surname_formstep',\n    'cf_email_formstep',\n    'cf_phone_formstep',\n    'cf_message_formstep',\n    'cf_create_account_formstep',\n    'cf_agree_policy_formstep'\n  ];\n  ids.forEach(id => {\n    const el = document.getElementById(id);\n    if (!el) return;\n    el.addEventListener('input', syncAllValuesToCF7);\n    el.addEventListener('change', syncAllValuesToCF7);\n  });\n}\n\t\n\n\t\n\tdocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ \u2026 je bestaande initialisaties voor stap 1\u20133 \u2026\n  initStep4FieldSync();\n\n  \/\/ \u201cMeer laden\u201d knop, flatpickr, enz. \u2026\n\n  const cf7Button = document.getElementById('cf7SubmitButton');\n  if (cf7Button) {\n    cf7Button.addEventListener('click', function(e) {\n      e.preventDefault();\n      \/\/ Zorg dat alle waarden in CF7-velden staan\n      syncAllValuesToCF7();\n      \/\/ Vind het CF7\u2010formulier in de DOM:\n      const cf7Form = document.querySelector('#cf7-wrapper form.wpcf7-form');\n      if (cf7Form) {\n        \/\/ klik op het verborgen CF7-submit\u2010veld:\n        cf7Form.querySelector('input[type=\"submit\"]').click();\n      }\n    });\n  }\n});\n\n\t\n\t\n\tdocument.addEventListener('wpcf7invalid', function(e) {\n  showStep(3); \/\/ blijf in stap 4 als validatie fout gaat\n}, false);\n\ndocument.addEventListener('wpcf7spam', function(e) {\n  showStep(3);\n}, false);\n\ndocument.addEventListener('wpcf7mailfailed', function(e) {\n  alert('Er is een fout opgetreden bij het verzenden. Probeer later opnieuw.');\n  showStep(3);\n}, false);\n\t\n\t\n\t\n\t\n\t\n  \/\/ =======================================================\n  \/\/ L. Verzenden naar CF7 & Bevestiging\n  \/\/ =======================================================\n  function verzendNaarCF7EnBevestig(event) {\n    event.preventDefault();\n\n    \/\/ MAP Multi-Step \u2192 CF7: ID\u2019s\n    const mapping = [\n      { msf: 'license_plate',       cf7: 'cf7_license_plate' },\n      { msf: 'mileage',             cf7: 'cf7_mileage' },\n\t  { msf: 'chassis',             cf7: 'cf7_chassis' },\n      { msf: 'car_type',            cf7: 'cf7_car_type' },\n      { msf: 'brand_select',        cf7: 'cf7_brand' },\n      { msf: 'datepicker',          cf7: 'cf7_date' },\n      { msf: 'selectedTimeInput',   cf7: 'cf7_time' },\n      { msf: 'mobility_option',     cf7: 'cf7_mobility_option' },\n      { msf: 'first_name',          cf7: 'cf7_first_name' },\n      { msf: 'surname',             cf7: 'cf7_surname' },\n      { msf: 'email_formstep',      cf7: 'cf7_email' },\n      { msf: 'phone',               cf7: 'cf7_phone' },\n      { msf: 'message_formstep',    cf7: 'cf7_message' },\n      \/\/ \u201cuser_type\u201d \u2192 CF7\u2010radio\n      { msf: 'userTypeHolder',      cf7: 'cf7_user_type' },     \n      { msf: 'company_name',        cf7: 'cf7_company_name' },\n      { msf: 'tax_number',          cf7: 'cf7_tax_number' }\n    ];\n\n    \/\/ Waarden kopi\u00ebren\n    mapping.forEach(pair => {\n      const msfEl = document.getElementById(pair.msf);\n      const cf7El = document.getElementById(pair.cf7);\n      if (!msfEl || !cf7El) return;\n\n      \/\/ Radio \u201cuser_type\u201d: we slaan de waarde (checked radio) in een hidden <input id=\"userTypeHolder\">\n      if (pair.msf === 'userTypeHolder') {\n        \/\/ Bepaal welke radio \u201cuser_type\u201d is aangevinkt\n        const checkedRadio = document.querySelector('input[name=\"user_type\"]:checked');\n        cf7El.value = checkedRadio ? checkedRadio.value : '';\n      } else {\n        cf7El.value = msfEl.value || '';\n      }\n    });\n\t  \n\t  const rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  const cf7Rent = document.getElementById('cf7_renting_customer');\n\t  if (rent && cf7Rent) {\n\t\tcf7Rent.value = rent.value;\n\t  }\n\n    \/\/ Inventory (max. 3) \u2192 bundle als comma\u2010string\n    const checkedInterventies = Array.from(\n      document.querySelectorAll('.inventory-checkbox:checked')\n    ).map(cb => cb.dataset.title.trim());\n    const invField = document.getElementById('cf7_inventory_ids');\n    if (invField) {\n      invField.value = checkedInterventies.join(', ');\n    }\n\n    \/\/ \u201cMaak account\u201d\u2010checkbox \u2192 CF7\n    const makeAccountChecked = !!document.getElementById('create_account_formstep')?.checked;\n    document\n\t  .querySelectorAll('#hidden-cf7 input[name=\"create_account[]\"]')\n\t  .forEach((cb) => {\n\t\tcb.checked = makeAccountChecked;\n\t  });\n\n    \/\/ \u201cPrivacy policy\u201d verplicht \u2192 CF7\n    const cf7Agree = document.getElementById('cf7_agree_policy');\n    if (cf7Agree) {\n      cf7Agree.checked = true;\n    }\n\n    \/\/ Submit het verborgen CF7-formulier\n    const cf7Form = document.querySelector('#hidden-cf7 form');\n    if (cf7Form) {\n  const cf7SendBtn = cf7Form.querySelector('input[type=\"submit\"]');\n  if (cf7SendBtn) {\n    cf7SendBtn.click();\n  }\n}\n  }\n\n  \/\/ Bind MSF\u2010submit (indien het formulier bestaat)\n \/* document.addEventListener('DOMContentLoaded', function () {\n    const msfForm = document.getElementById('multiStepForm');\n    if (msfForm) {\n      msfForm.addEventListener('submit', verzendNaarCF7EnBevestig);\n    }\n  });*\/\n\t\n\t\n\tdocument.addEventListener('wpcf7mailsent', function(event) {\n\n\t\tconst MIJN_CF7_ID = 2709;\n\t\tif (event.detail.contactFormId === MIJN_CF7_ID) {\n\t\t  const laatsteStapIndex = formSteps.length - 1; \n\t\t  window.location.hash = 'step' + laatsteStapIndex;\n\t\t  showStep(laatsteStapIndex);\n\n\t\t  if (window.confetti) {\n\t\t\tconfetti({\n\t\t\t  particleCount: 100,\n\t\t\t  spread: 70,\n\t\t\t  origin: { y: 0.6 }\n\t\t\t});\n\t\t  }\n\t\t}\n\t  }, false);\n\t\n\tfunction clearMSFData() {\n\t  \/\/ 1) localStorage keys verwijderen\n\t  const keys = [\n\t\t'msf_license_plate',\n\t\t'msf_mileage',\n\t\t'msf_chassis',\n\t\t'msf_car_type',\n\t\t'msf_brand',\n\t\t'msf_interventies',\n\t\t'msf_date',\n\t\t'msf_time',\n\t\t'msf_renting_customer',\n\t\t'msf_mobility_option',\n\t\t'msf_user_type',\n\t\t'msf_company_name',\n\t\t'msf_tax_number',\n\t\t'msf_first_name',\n\t\t'msf_surname',\n\t\t'msf_email',\n\t\t'msf_phone',\n\t\t'msf_message',\n\t\t'msf_create_account',\n\t\t'msf_agree_policy'\n\t  ];\n\t  keys.forEach(k => localStorage.removeItem(k));\n\n\t  \/\/ 2) Reset alle invoervelden in de multi-step form\n\t  const form = document.getElementById('multiStepForm');\n\t  if (form) {\n\t\tform.reset();\n\t  }\n\n\t  \/\/ 3) Zet alle interventie-checkboxen terug naar \u201cniet\u2010selected\u201d\n\t  document.querySelectorAll('.inventory-checkbox').forEach(cb => {\n\t\tcb.checked = false;\n\t\tcb.disabled = false;\n\t\tconst lab = cb.closest('label');\n\t\tif (lab) {\n\t\t  lab.classList.remove('selected');\n\t\t  lab.style.opacity = '1';\n\t\t}\n\t  });\n\n\t  \/\/ Let op: n\u00edet de preview\u2010velden (license_plate_preview, mileage_preview, etc.) leegschrijven!\n\t}\n\t\n\twindow.addEventListener('hashchange', function() {\n\t  const h = window.location.hash;\n\t  if (h.startsWith('#wpcf7')) {\n\t\twindow.location.hash = 'step' + currentStep;\n\t  }\n\t});\n\t\n\t\/\/ ====================\n  \/\/ Z. Confetti-functie\n  \/\/ ====================\n  function launchConfetti() {\n    \/\/ Zorg dat het confetti-effect \u00e9\u00e9n keer start\n    \/\/ Je kunt de opties naar wens aanpassen (aantal deeltjes, snelheid, kleuren, enz.).\n    confetti({\n      particleCount: 150,\n      spread: 70,\n      origin: { y: 0.6 }\n    });\n  }\n\t\n\t\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 1) syncAllValuesToCF7: kopie\u0308er alle waarden uit jouw multi-step\u2010velden \n  \/\/    naar de corresponderende CF7\u2010velden (hidden inputs).\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function syncAllValuesToCF7() {\n    \/\/ Helper\u2010functies om enkel te schrijven als het element bestaat\n    function setIfExists(id, value) {\n      const el = document.getElementById(id);\n      if (el) el.value = value;\n    }\n    function checkIfExists(id, checked) {\n      const el = document.getElementById(id);\n      if (el) el.checked = checked;\n    }\n\n    \/\/ \u2014 Stap 1 (Wagen) \u2014\n    const lp = document.getElementById('license_plate')?.value || '';\n    const km = document.getElementById('mileage')?.value || '';\n\tconst ch = document.getElementById('chassis')?.value || '';\n    const ct = document.getElementById('car_type')?.value || '';\n    const br = document.getElementById('brand_select')?.value || '';\n\n    \/\/ \u2014 Stap 2 (Interventies) \u2014\n    const checked = Array.from(document.querySelectorAll('.inventory-checkbox:checked'));\n\tconst names = checked.map(cb => cb.dataset.title.trim()).join(', ');\n\tconst ids = checked.map(cb => cb.value).join(',');\n\n    \/\/ \u2014 Stap 3 (Datum, Tijd & Mobility) \u2014\n    const dt = document.getElementById('datepicker')?.value || '';\n    const tm = document.getElementById('selectedTimeInput')?.value || '';\n\tconst rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n    const mo = document.getElementById('mobility_option')?.value || '';\n\n    \/\/ \u2014 Stap 4 (Persoonsgegevens) \u2014\n    const ut = document.querySelector('input[name=\"user_type\"]:checked')?.value || '';\n    const cn = document.getElementById('company_name_formstep')?.value || '';\n    const tn = document.getElementById('tax_number_formstep')?.value || '';\n    const fn = document.getElementById('first_name_formstep')?.value || '';\n    const sn = document.getElementById('surname_formstep')?.value || '';\n    const em = document.getElementById('email_formstep')?.value || '';\n    const ph = document.getElementById('phone_formstep')?.value || '';\n    const ms = document.getElementById('message_formstep')?.value || '';\n    const ca = !!document.getElementById('create_account_formstep')?.checked;\n    const ap = document.getElementById('agree_policy_formstep')?.checked;\n\n    \/\/ \u2014 Vul de corresponderende CF7-velden (pas deze IDs aan naar jouw CF7-shortcode) \u2014\n    setIfExists('cf7_license_plate', lp);\n    setIfExists('cf7_mileage', km);\n\tsetIfExists('cf7_chassis', ch);\n    setIfExists('cf7_car_type', ct);\n    setIfExists('cf7_brand', br);\n    setIfExists('cf7_interventies', names);\n\tsetIfExists('cf7_inventory_ids', ids);\n    setIfExists('cf7_date', dt);\n    setIfExists('cf7_time', tm);\n\tsetIfExists('cf7_renting_customer', rent ? rent.value : '');\n    setIfExists('cf7_mobility_option', mo);\n    setIfExists('cf7_user_type', ut);\n    setIfExists('cf7_company_name', cn);\n    setIfExists('cf7_tax_number', tn);\n    setIfExists('cf7_first_name', fn);\n    setIfExists('cf7_surname', sn);\n    setIfExists('cf7_email', em);\n    setIfExists('cf7_phone', ph);\n    setIfExists('cf7_message', ms);\n    document\n  .querySelectorAll('#hidden-cf7 input[name=\"create_account[]\"]')\n  .forEach((cb) => {\n    cb.checked = ca;\n  });\n    checkIfExists('cf7_agree_policy', ap);\n  }\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 2) \u201cLive\u201d listeners: zodra een bronveld verandert, roep direct syncAllValuesToCF7() aan\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function initCF7SyncListeners() {\n    \/\/ Helper: registeer evenementlistener als element bestaat\n    function onEvent(id, eventName) {\n      const el = document.getElementById(id);\n      if (el) el.addEventListener(eventName, syncAllValuesToCF7);\n    }\n\n    \/\/ --- Stap 1: tekst en select velden ---\n    onEvent('license_plate', 'input');\n    onEvent('mileage', 'input');\n    onEvent('car_type', 'change');\n    onEvent('brand_select', 'change');\n\n    \/\/ --- Stap 2: interventie-checkboxes ---\n    document.querySelectorAll('.inventory-checkbox').forEach(cb => {\n      cb.addEventListener('change', syncAllValuesToCF7);\n    });\n\n    \/\/ --- Stap 3: datum & tijd & mobiliteit ---\n    \/\/ Flatpickr selecteert datum, deze gebruikt onChange; we luisteren op het verborgen <input> zelf:\n    onEvent('datepicker', 'change');          \/\/ indien je Flatpickr onchange naar dat input zet\n    onEvent('selectedTimeInput', 'change');    \/\/ verborgen tijd-input\n\tdocument.querySelectorAll('input[name=\"renting_customer\"]').forEach(radio => {\n\t  radio.addEventListener('change', syncAllValuesToCF7);\n\t});\n    onEvent('mobility_option', 'change');\n\n    \/\/ Tijd-knoppen:\n    document.querySelectorAll('.slots button').forEach(btn => {\n      btn.addEventListener('click', () => {\n        \/\/ nadat tijd in het verborgen veld is gezet, sync:\n        setTimeout(syncAllValuesToCF7, 0);\n      });\n    });\n\n    \/\/ --- Stap 4: persoonsgegevens ---\n    onEvent('company_name_formstep', 'input');\n    onEvent('tax_number_formstep', 'input');\n    onEvent('first_name_formstep', 'input');\n    onEvent('surname_formstep', 'input');\n    onEvent('email_formstep', 'input');\n    onEvent('phone_formstep', 'input');\n    onEvent('message_formstep', 'input');\n    \/\/ radio buttons:\n    document.querySelectorAll('input[name=\"user_type\"]').forEach(radio => {\n      radio.addEventListener('change', syncAllValuesToCF7);\n    });\n    \/\/ checkboxes in stap 4:\n    onEvent('create_account_formstep', 'change');\n    onEvent('agree_policy_formstep', 'change');\n  }\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 3) Wanneer CF7\u2010formulier er is, onderscheppen we ook 'submit' om zeker alles mee te geven\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  document.addEventListener('DOMContentLoaded', function() {\n    \/\/ 3a) start de live\u2010listeners\n    initCF7SyncListeners();\n    \/\/ 3b) onderschep CF7 submit\n    const cf7Wrapper = document.getElementById('hidden-cf7');\n    if (!cf7Wrapper) return;\n    setTimeout(() => {\n      const cf7Form = cf7Wrapper.querySelector('form.wpcf7-form');\n      if (!cf7Form) return;\n      cf7Form.addEventListener('submit', function() {\n        syncAllValuesToCF7();\n      });\n    }, 200);\n  });\n\n\n  function onStepChange(newStepIndex) {\n    \/\/ Als we net Stap 4 hebben ingevuld en op Next klikken:\n    if (newStepIndex === 4) {\n      \/\/ Eerst waarden synchroniseren naar CF7\n      syncAllValuesToCF7();\n      \/\/ Scrollen naar het verborgen CF7-formulier (optioneel)\n      const cf7Anchor = document.getElementById('hidden-cf7');\n      if (cf7Anchor) {\n        cf7Anchor.scrollIntoView({ behavior: 'smooth' });\n      }\n    }\n    \/\/ De rest van je bestaande onStepChange-logica (bv. validatie per stap) blijft ongewijzigd.\n  }\n\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 3) CF7-submit-event onderscheppen en w\u00e9\u00e9r syncAllValuesToCF7 aanroepen\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  document.addEventListener('DOMContentLoaded', function() {\n    const cf7Wrapper = document.getElementById('hidden-cf7');\n    if (!cf7Wrapper) return;\n\n    \/\/ Wacht kort tot CF7 zijn form heeft gegenereerd\n    setTimeout(() => {\n      const cf7Form = cf7Wrapper.querySelector('form.wpcf7-form');\n      if (!cf7Form) return;\n\n      cf7Form.addEventListener('submit', function(e) {\n        syncAllValuesToCF7();\n        \/\/ Daarna laat CF7 gewoon verder verzenden\n      });\n    }, 200);\n  });\n<\/script>\n\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n  \/\/ TIJDBUTTONS IN DE RECHTERKOLOM\n  const timeButtons = document.querySelectorAll('#timeColumn .slots button');\n  timeButtons.forEach(btn => {\n    btn.addEventListener('click', () => {\n      \/\/ Verwijder .active van alle knoppen\n      timeButtons.forEach(b => b.classList.remove('active'));\n      \/\/ Voeg .active toe aan de geklikte knop\n      btn.classList.add('active');\n      \/\/ Schrijf de gekozen tijd weg in het verborgen input-veld\n      const gekozen = btn.getAttribute('data-time');\n      document.getElementById('selectedTimeInput').value = gekozen;\n      localStorage.setItem('msf_time', gekozen);\n\n      \/\/ Update preview in stap 4\/5\n      const previewTime = document.getElementById('selected_time');\n      if (previewTime) previewTime.textContent = gekozen || 'Not selected';\n    });\n  });\n\n  \/\/ 3) LAAD EERDERE WAARDEN UIT localStorage\n  const storedDate = localStorage.getItem('msf_date');\n  const storedTime = localStorage.getItem('msf_time');\n  if (storedDate) {\n    \/\/ Stel de datum in Flatpickr in\n    const fpInstance = document.querySelector('#datepicker')._flatpickr;\n    fpInstance.setDate(storedDate, true);\n  }\n  if (storedTime) {\n    \/\/ Markeer de juiste tijdknop\n    const knop = document.querySelector(\n      `#timeColumn .slots button[data-time=\"${storedTime}\"]`\n    );\n    if (knop) knop.classList.add('active');\n    document.getElementById('selectedTimeInput').value = storedTime;\n  }\n});\n\t\n\t\/\/ pak je form\n\/*const msfForm = document.getElementById('multiStepForm');\nmsfForm.addEventListener('submit', function(e) {\n  \/\/ all\u00e9\u00e9n stap 3 (index 3) validatie\n  if (currentStep === 3) {\n    \/\/ verwijder oude foutmeldingen\n    document.querySelectorAll('.msf-error').forEach(el => el.remove());\n\n    let ok = true;\n    \/\/ veld-validaties\n    ['first_name_formstep','surname_formstep','email_formstep']\n      .forEach(id => {\n        const el = document.getElementById(id);\n        if (!el.value.trim()) {\n          el.insertAdjacentHTML('afterend',\n            '<div class=\"msf-error\">Dit veld is verplicht<\/div>'\n          );\n          ok = false;\n        }\n      });\n\n    \/\/ privacy checkbox\n    const agreeEl = document.getElementById('agree_policy_formstep');\n    if (!agreeEl.checked) {\n      const wrapper = agreeEl.closest('.checkbox-container');\n      wrapper.insertAdjacentHTML('beforeend',\n        '<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>'\n      );\n      ok = false;\n    }\n\n    if (!ok) {\n      e.preventDefault();      \/\/ formulier niet versturen\n      \/\/ blijf op stap 3\n      showStep(3);\n    }\n  }\n});*\/\n\t\n\tdocument.getElementById('msfFinalBtn').addEventListener('click', function() {\n  \/\/ eerst uitvoeren wat nextStep() doet voor stap 3 \u2192 privacy-validatie\n  \/\/ maar in plaats van showStep(4), doen we nu de submit naar CF7\n\n  \/\/ 1) run je bestaande validatie voor currentStep===3:\n  let ok = true;\n  document.querySelectorAll('.msf-error').forEach(e=>e.remove());\n  ['first_name_formstep','surname_formstep','email_formstep'].forEach(id=>{\n    const el=document.getElementById(id);\n    if(!el.value.trim()){\n      el.insertAdjacentHTML('afterend','<div class=\"msf-error\">Dit veld is verplicht<\/div>');\n      ok=false;\n    }\n  });\n  const agreeEl = document.getElementById('agree_policy_formstep');\n  if(!agreeEl.checked){\n    agreeEl.closest('.checkbox-container')\n      .insertAdjacentHTML('beforeend','<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>');\n    ok=false;\n  }\n  if(!ok){\n    showStep(3);\n    return;\n  }\n\n  \/\/ 2) als alles ok is: syncAllValuesToCF7() \u00e9n trigger CF7\n  syncAllValuesToCF7();\n  const cf7Form = document.querySelector('#hidden-cf7 form');\n  cf7Form.querySelector('input[type=\"submit\"]').click();\n});\n\t\n\tdocument.addEventListener('DOMContentLoaded', function(){\n\t  const emailEl    = document.getElementById('email_formstep');\n\t  const caContainer= document.getElementById('ca-container');\n\t  const haveAcc    = document.getElementById('have-account-container');\n\t  const createCb   = document.getElementById('create_account_formstep');\n\t  const openBtns  = document.querySelectorAll('.msf-open-login');\n\t  const closeBtn   = document.getElementById('msf-close-login');\n\t  const modal      = document.getElementById('msf-login-modal');\n\t\t\n\n\t  \/\/ 1) Check bij blur of e-mail al bestaat\n\t  emailEl.addEventListener('blur', () => {\n\t\tconst email = emailEl.value.trim();\n\t\tif (!email) return;\n\t\tconst data = new URLSearchParams({ action:'check_email_exists', email });\n\t\tfetch('https:\/\/miers.be\/wp-admin\/admin-ajax.php', {\n\t\t  method:'POST',\n\t\t  headers:{'Content-Type':'application\/x-www-form-urlencoded'},\n\t\t  body: data.toString()\n\t\t})\n\t\t.then(r=>r.json())\n\t\t.then(res=>{\n\t\t  if (res.success && res.data.exists) {\n\t\t\t\/\/ verberg \u201cMaak account\u201d en toon login-link\n\t\t\tcaContainer.style.display   = 'none';\n\t\t\thaveAcc.style.display       = 'block';\n\t\t\tcreateCb.checked            = false;\n\t\t  } else {\n\t\t\tcaContainer.style.display   = '';\n\t\t\thaveAcc.style.display       = 'none';\n\t\t  }\n\t\t});\n\t  });\n\n\t  openBtns.forEach(btn => {\n\t\tbtn.addEventListener('click', function(e) {\n\t\t  e.preventDefault();\n\t\t  modal.classList.add('open');\n\t\t});\n\t  });\n\n\t  closeBtn.addEventListener('click', function() {\n\t\tmodal.classList.remove('open');\n\t  });\n\t});\n\t\n\tdocument.addEventListener('wpcf7beforesubmit', function(event) {\n\t  var rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  var hidden = event.target.querySelector('input[type=\"hidden\"][name=\"renting_customer\"]');\n\t  if (rent && hidden) {\n\t\thidden.value = rent.value;\n\t  }\n\t}, false);\n\n\tdocument.addEventListener('DOMContentLoaded', function () {\n  const cf7Root = document.getElementById('hidden-cf7');\n  if (!cf7Root) return;\n\n  const cf7Form = cf7Root.querySelector('form.wpcf7-form');\n  if (!cf7Form) return;\n\n  if (!cf7Form.id) {\n    cf7Form.id = 'cf7-form-2709';\n  }\n  const fileInput = cf7Form.querySelector('input[type=\"file\"]#bestanden');\n  if (!fileInput) return;\n\n  const wrap = fileInput.closest('.wpcf7-form-control-wrap');\n  if (!wrap) return;\n\n  const slot = document.getElementById('msf-upload-slot');\n  if (!slot) return;\n  slot.appendChild(wrap);\n  fileInput.setAttribute('form', cf7Form.id);\n\n  if (!slot.querySelector('.msf-upload-title')) {\n    const title = document.createElement('div');\n    title.className = 'msf-upload-title';\n    title.style.marginTop = '12px';\n    title.style.fontWeight = '600';\n    title.textContent = \"Foto's\/bestanden toevoegen\";\n    slot.prepend(title);\n  }\n});\n<\/script>\n\n\n\n\n<style>\n  option {\n    color: #0C5453;\n}\n  \n  \n  \n  .flatpickr-rContainer {\n    display: inline-grid !important\n;\n    padding: 0;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n  \n  \n  \n  \n  .slots button\nSpecificity: (0,1,1)\n {\n    WIDTH: 20% ! IMPORTANT;\n}\n  \n  \n  \n  .flatpickr-rContainer {\n    width: 309px ! IMPORTANT;\n}\n  \n  \n  \n  span.flatpickr-day  {\n    background-color: #e6e6e6;\n    color: #000;\n}\n  \n  span.flatpickr-day.nextMonthDay {\n    background-color: #e6e6e6;\n    color: #000;\n}\n  \n  \n  \n  \n\n  span.flatpickr-day.selected {\n    background-color: #0C5453 !important;\n}\n  \n  \n  \n  .preview {\n  \n    padding: 10px;\n    border-radius: 10px;\n \n}\n  \n  \n  p {\n    padding-bottom: 0px !important;\n}\n  \n  \n  form.register {\n    text-align: left;\n}\n .et_builder_inner_content {\n    z-index: inherit !important;\n}\n.et_pb_column {  \n    z-index: auto !important;    \n}\n  \n  \n  \n  \n  \n  \n  \n  .form-buttons input[type=\"submit\"] {\n    width: 20% !important;\n    color: #ffffff;\n    background-color: #0C5453;\n}\n  .f-123 h3 {\n    font-size: 20px !important;\n    text-align: left !important;\n}\n  \n  .f-123 label.selected {\n    background-color:  #0C5453;;\n  }\n\n.f-123 input[type=\"checkbox\"] {\n    display:none;\n}\n  .f-123 label.selected img {\n    filter: brightness(0) invert(1); \/* Makes image appear white *\/\n  }\n<\/style>\n\n<style>\n   \n \/* Step Indicator *\/\n.step-container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    border-bottom: 2px solid #ccc;\n    margin-bottom: 20px;\n}\n\n.step {\n    flex: 1 1 20%;\n    text-align: center;\n    padding: 10px;\n    color: gray;\n    font-weight: bold;\n    display: flex\n;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    font-size: 14px;\n    border: 1px solid #ccc;\n}\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n.f-123 {\n  background-color: #ffffff;\n  \n  flex: 0 0 60%;\n  box-sizing: border-box;\n}\n\t.f-123.interventies {\n  background-color: transparent!important;\n\t\t}\n\ninput[type=\"number\"] {\n    padding: 18px !important;\n\tfont-size:16px!important;\n}\n\n.form-step input, .form-step select, .form-step textarea {\n    width: 100%;\n    padding: 10px;\n    margin: 10px 7px;\n    border-radius: 5px;\n    border: 1px solid #ccc;\n    box-sizing: border-box;\n}\nlabel {\n    width: 48%;\n  color: #0C5453;\n}\n.f-123 {\n    padding: 18px 18px;\n    border-radius: 10px;\n}\n.f-124 {\n    padding: 18px 18px;\n    border-radius: 10px;\n}\nform#multiStepForm h3 {\n    text-align: center;\n    padding: 20px;\n    font-size: 30px;\n    color: #0C5453;\n}\n.Inventory-2 {\n  display: flex;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 20px;\n  margin-top: 20px;\n}\n\n.Inventory-2 label {\n  \/*display: flex;*\/\n  flex-direction: column;\n  align-items: center;\n  border: 2px solid #0C5453;\n  border-radius: 16px;\n  padding: 20px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  background: #fff;\n}\n\n.Inventory-2 label:hover {\n  box-shadow: 0 0 10px rgba(0, 181, 165, 0.2);\n}\n\n\n\n.Inventory-2 input[type=\"checkbox\"]:checked + img,\n.Inventory-2 input[type=\"checkbox\"]:checked ~ img {\n  filter: brightness(0) invert(1);\n}\n\n.Inventory-2 input[type=\"checkbox\"]:checked ~ span {\n  color: #fff;\n}\n\n.Inventory-2 input[type=\"checkbox\"]:checked ~ label {\n  background-color: #0C5453;\n  color: white;\n  border-color: #0C5453;\n}\n\n\n.Inventory-2 span {\n  font-size: 16px;\n  color: #0C5453;\n  font-weight: 500;\n  transition: color 0.3s ease;\n}\n\n.step.completed {\n  color: #00bcd4;\n}\n\n.step.active {\n  border-bottom: 3px solid #0C5453;\n  color: #0C5453 !important;\n  \n}\n\n\n\n\/* Form Step *\/\n.form-step {\n  display: none;\n  background: #f6f6f6;\n  padding: 20px;\n  border-radius: 10px;\n  \n}\n\n.form-step.active {\n  display: block;\n}\n\n.form-step input,\n.form-step select,\n.form-step textarea {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  box-sizing: border-box;\n}\n\n.form-buttons {\n  text-align: right;\n  margin-top: 15px;\n}\n\n.form-buttons button {\n  padding: 10px 20px;\n  background-color: #0C5453;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  margin-left: 10px;\n}\n.location-card {\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 15px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n  justify-content: space-between;\n \u00a0gap: 15px;\n\tmargin-bottom:10px;\n}\n\n\n\n.location-details {\n  flex-grow: 1;\n  color: #333;\n  font-size: 14px;\n}\n\n.location-details strong {\n  color: #000;\n}\n\n.location-edit {\n  color: #b0b0b0;\n  font-size: 14px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.Inventory-2 input[type=\"checkbox\"]:checked + img, .Inventory-2 input[type=\"checkbox\"]:checked ~ img {\n    filter: contrast(-1.5) !important;\n}\n.Inventory-2 label {\n    width: 30%;\n}\nspan.mk-098 {\n    display: block;\n}\n.calendar-container {\n  display: flex;\n  gap: 40px;\n  margin-top: 20px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n#datepicker {\n  border: none;\n}\n\n.time-slots {\n  display: none;\n}\n\n.time-slots p {\n  margin-bottom: 10px;\n  font-weight: 600;\n}\n\n.slots {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.slots button {\n  border: 1px solid #00a89c;\n  background: white;\n  color: #00a89c;\n  border-radius: 20px;\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n\n.slots button.active,\n.slots button:hover {\n  background-color: #00a89c;\n  color: white;\n}\n.flatpickr-calendar.inline {\n    width: 490px;\n}\n.flatpickr-rContainer {\n    width: 490px;\n}\n.flatpickr-days {\n    width: 490px;\n}\n.radio-2 label {\n  display: inline-block;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.radio-2 input[type=\"radio\"] {\n  margin-right: 5px;\n}\ninput[type=\"radio\"] {\n    width: auto ! IMPORTANT;\n}\ninput[type=\"checkbox\"] {\n    width: auto !important;\n    margin-right: 10px;\n}\n.Inventory-2 input[type=\"checkbox\"] {\n    width: 100% !important;\n}\n\/* Responsive Styles *\/\n@media (max-width: 768px) {\n  .step {\n    flex: 1 1 50%;\n    font-size: 13px;\n  }\n\n  .form-buttons {\n    text-align: center;\n  }\n\n  .form-buttons button {\n    margin-top: 10px;\n    width: 100%;\n  }\n}\n@media (max-width: 600px) {\n  .location-card {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .location-edit {\n    align-self: flex-end;\n    margin-top: 10px;\n  }\n}\n@media (max-width: 480px) {\n  .step {\n    flex: 1 1 100%;\n    font-size: 12px;\n    padding: 8px;\n  }\n\n  .form-step {\n    padding: 15px;\n  }\n\n  .form-step input,\n  .form-step select,\n  .form-step textarea {\n    padding: 8px;\n    font-size: 14px;\n  }\n\n  .form-buttons button {\n    font-size: 14px;\n    padding: 10px;\n  }\n}\n\n   p#tr3 {\n    border: solid 1px #0C5453;\n    padding: 20px!important;\n    border-radius: 20px;\n    color: #0C5453;\n    font-weight: 400;\n\t   margin-bottom:20px;\n\t   text-align:left;\n}\n  \n  \n\n  \n  \n  .flatpickr-innerContainer {\n    display: flow ! IMPORTANT;   \n}\n  .flatpickr-weekdays {\n    WIDTH: 63% ! IMPORTANT;\n}\n  \n  div#b3 label {\n    border: solid 1px #0C5453;\n    padding: 10px;\n    border-radius: 10px;\n    color: #0C5453;\n}\n  div#b3 input[type=\"radio\"] {\n    accent-color: #0C5453;\n}\n  \n  \n  .last-3 {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    font-family: sans-serif;\n  }\n\n  .type-klant-label {\n    font-weight: 600;\n    color: #2da49c;\n        width: 24%;\n  }\n\n  .radio-2 {\n    display: flex;\n    gap: 1rem;\n    align-items: center;\n    width: 80%;\n  }\n\n#brand_select.searchable-dropdown {\n  height: 42px !important;\n  box-sizing: border-box;\n}\n\n\n.select2-container--default .select2-selection--single {\n  height: 42px !important;\n  margin-top: 10px !important;\n  box-sizing: border-box;\n}\n\n\n.select2-container--default .select2-selection--single .select2-selection__rendered {\n  line-height: 426px !important;\n}\n\n\n.select2-container--default .select2-selection--single .select2-selection__arrow {\n  height: 42px !important;\n}\n  \n  .hidden-more {\n  display: none;\n}\n  \n  \/* Verberg extra interventies in eerste weergave *\/\n.hidden-more {\n  display: none;\n}\n\n\/* Wanneer een interventie is geselecteerd *\/\n.f-123 label.selected {\n  background-color: #0C5453;\n  color: #fff;\n}\n.f-123 label.selected img {\n  filter: brightness(0) invert(1);\n}\n\n\/* Standaard on\u2010selected labels (om ervoor te zorgen dat de tekst in #0C5453 blijft) *\/\n.f-123 label {\n  color: #0C5453;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Image\u2010transition (altijd aanwezig) *\/\n.Inventory-2 img {\n  transition: filter 0.3s ease;\n}\n\t\n\/* --------------------------------------------------\n   1) Forceer .f-123 en .f-124 in .f-row op 60% \/ 38%\n   -------------------------------------------------- *\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap; \/* indien scherm te smal, stapelen ze onder elkaar *\/\n}\n\n\n\n\/* -------------------------------------------------------\n   2) Maak .Inventory-2 tot flex-wrap: 4 items per rij\n   ------------------------------------------------------- *\/\n.Inventory-2 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  margin-top: 10px;\n}\n\n\/* Elk label neemt ongeveer 25% breedte (minus gap) *\/\n.Inventory-2 label.interventie-optie {\n  flex: 0 0 calc(25% - 20px);\n  max-width: calc(25% - 20px);\n  box-sizing: border-box;\n  \/*display: flex;*\/\n  flex-direction: column;\n  align-items: center;\n  border: 2px solid #0C5453;\n  border-radius: 16px;\n  padding: 20px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  background: #fff;\n}\n\n.Inventory-2 label.interventie-optie:hover {\n  box-shadow: 0 0 10px rgba(0, 181, 165, 0.2);\n}\n\n\/* Standaard: niet\u2010geselecteerde labels *\/\n.f-123 label.interventie-optie {\n  color: #0C5453;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Geselecteerde labels *\/\n.f-123 label.selected {\n  background-color: #0C5453;\n  color: #fff;\n}\n.f-123 label.selected img {\n  filter: brightness(0) invert(1);\n}\n\n\/* Hidden-more: vanaf de 7e in \u201cMeer interventies\u201d *\/\n.hidden-more {\n  display: none;\n}\n\n\/* \u201cMeer laden\u2026\u201d-knop *\/\n.btn-load-more {\n  padding: 8px 24px;\n  background-color: #0C5453;\n  color: #fff;\n  border: 1px solid #0C5453;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n.btn-load-more:hover {\n  background-color: transparent;\n\tcolor: #0C5453;\n}\n\n\/* Image-transition (altijd aanwezig) *\/\n.Inventory-2 img {\n  width: 62.3px;\n  transition: filter 0.3s ease;\n}\n\t\n\t\/* Step 3 *\/\n.kalender {\n\t\tbackground-color: #fff;\n\t\tborder-radius:20px;\n\tpadding:20px;\n\t}\n\t\n\t\n\t\n\t\/* ---------------------------------------------------\n   ALLE KLEUREN & STYLING F\u00d6R FLATPICKR & TIJDSELECTIE\n   --------------------------------------------------- *\/\n\n\/* Container voor kalender + tijd *\/\n.calendar-time-container {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n\/* Linker kolom: de inline Flatpickr *\/\n.calendar-column {\n  flex: 2 1 300px;   \/* minimaal 300px breed *\/\n  position: relative;\/* zodat maand\/jaar-dropdowns linksboven komen *\/\n}\n\n\/* Rechter kolom: tijdselectie *\/\n.time-column {\n  flex: 1 1 150px;   \/* minimaal 150px breed *\/\n  display: none;     \/* pas zichtbaar nadat datum gekozen *\/\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: sans-serif;\n}\n.time-column.visible {\n  display: flex;\n\tmargin:auto;\n}\n\/* \u201cKies eerst een datum\u201d of de gekozen datum *\/\n.selected-date-display {\n  font-size: 16px;\n  color: #0C5453;\n  margin-bottom: 10px;\n  font-weight: bold;\n}\n\n\/* TIJD BUTTONS *\/\n.time-column .slots {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.time-column .slots button {\n  width: 100%;\n  border: 1px solid #888888;\n  background: white;\n  color: #626262;\n  border-radius: 10px;\n  padding: 8px 12px;\n  text-align: center;\n  font-size: 14px;\n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n\tpadding: 1px 30px;\n}\n.time-column .slots button.active,\n.time-column .slots button:hover {\n  background-color: #0C5453;\n  color: white;\n  border-color: #0C5453;\n}\n\n\/* FLATPICKR OVERRIDES *\/\n\/* Verberg standaard input (we tonen alleen inline kalender) *\/\n#datepicker {\n  display: none;\n}\n\n\/* Maak flatpickr inline kalender full-width in container *\/\n.flatpickr-calendar.inline {\n  width: 100% !important;\n  max-width: 420px;        \/* pas eventueel aan *\/\n  border: none;\n  box-shadow: none;\n}\n\n\n\n\/* WEEKDAGEN LIJN (MO, DI, WO, DO, VR, ZA, ZO) *\/\n\/* Onderliggend gebruiken we Flatpickr locale-shorthand. We styleen met groene rand en afgeronde hoeken *\/\n.flatpickr-weekday {\n  font-weight: 600;\n  font-size: 14px!important;\n  color: #0C5453!important;\n  border: 1px solid #0C5453;\n  margin: 2px;\n\twidth: 40px;\n    height: 27px;\n    line-height: 27px!important;\n    text-align: center;\n    margin: 2px!important;\n    border-radius: 10px;\n    background-color: transparent!important;\n\t\n}\n\n\/* DAGEN-REGIO *\/\n.flatpickr-days {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n}\n\n\/* Elke dagcel *\/\n.flatpickr-day {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n  text-align: center;\n  margin: 2px;\n  border: none;\n  border-radius: 10px;   \n  background-color: rgba(136, 136, 136, 0.05)!important; \n  color: #626262;     \n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Niet-selecteerbare (disabled) datums, incl. weekend *\/\n.flatpickr-day.disabled {\n  background-color: #f0f0f0 !important;\n  color: #cccccc !important;\n  cursor: not-allowed;\n}\n\n\/* Hover-effect enkel voor actieve (selecteerbare) dagen *\/\n.flatpickr-day:not(.disabled):hover {\n  background-color: #0C5453!important;\n  color: #ffffff;\n}\n\n\/* Geselecteerde dag *\/\n.flatpickr-day.selected {\n  background-color: #0C5453 !important;\n  color: #ffffff !important;\n}\n\n\/* Focused dag (toetsenbordnavigatie) *\/\n.flatpickr-day:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(44,160,144,0.5);\n}\n\n\/* Verberg standaard grid voor weeknummers e.d. *\/\n.flatpickr-weekWrapper,\n.flatpickr-weekdaycontainer {\n  \/* we vangen .flatpickr-weekdaycontainer er al mee, maar extra zekerheid *\/\n  margin: 0;\n  padding: 0;\n}\n\n\/* Ruimte rondom de kalender (optioneel) *\/\n.flatpickr-innerContainer {\n  padding: 0;\n  margin: 0;\n}\n\t\n\t\/* =======================================================\n   1) Zorg dat de header (maand + jaar + pijltjes) zichtbaar is\n   ======================================================= *\/\n\n\/* Maak de header (de container met pijltjes en maandnaam) altijd zichtbaar *\/\n.flatpickr-months {\n  display: flex !important;\n  align-items: center;\n  justify-content: center; \/* Je gebruikte dit al inline, maar we herhalen het hier *\/\n  background: transparent !important; \/* zorg dat er geen achtergrondkleur van elders overheen komt *\/\n  margin-bottom: 8px;\n}\n\n\/* Pijltjes < en > *\/\n.flatpickr-prev-month,\n.flatpickr-next-month {\n  font-size: 20px !important;\n  color: #0C5453 !important;      \/* Of een andere accentkleur naar wens *\/\n  cursor: pointer;\n  user-select: none;\n  padding: 0 10px;\n}\n\n\/* Container waarin de maandnaam en het jaarnummer zitten *\/\n.flatpickr-current-month {\n  align-items: center;\n  gap: 6px;\n}\n\n\/* De maandnaam (\u201cJuli\u201d, \u201cMei\u201d, etc.) *\/\n.flatpickr-current-month .cur-month {\n  font-size: 16px !important;\n  color: #333333 !important;       \/* Tekstkleur van de maandnaam *\/\n  font-weight: 600;\n  text-transform: capitalize;      \/* Zorgt dat \u2018mei\u2019 \u2192 \u2018Mei\u2019 wordt, etc. *\/\n}\n\n\/* Het jaarnummer (input field met pijltjes omhoog\/omlaag) *\/\n.flatpickr-current-month .cur-year {\n  width: 50px !important;          \/* Genoeg breedte voor 4\u2010cijferig jaar *\/\n  font-size: 16px !important;\n  color: #333333 !important;\n  font-weight: 600;\n  text-align: center; \n  border: none !important;         \/* Geen rand rond het input\u2010veld *\/\n  background: transparent !important; \/* Doorzichtig, zodat het niet blinkt *\/\n  box-shadow: none !important;     \/* Verwijder eventuele schaduw of outline *\/\n  appearance: none !important;     \/* Verwijder browser\u2010specifieke pijltjes\/styling *\/\n  -moz-appearance: textfield !important;\n}\n\n\/* Verberg de pijltjes binnen het input\u2010jaarnummer (omdat we geen spin\u2010controls willen zien) *\/\n.flatpickr-current-month .cur-year::-webkit-outer-spin-button,\n.flatpickr-current-month .cur-year::-webkit-inner-spin-button {\n  -webkit-appearance: none !important;\n  margin: 0;\n}\n.flatpickr-current-month .cur-year[type=\"number\"] {\n  -moz-appearance: textfield !important;\n}\n\n\/* =======================================================\n   2) Optioneel: iets meer padding\/marge aan de header geven\n   ======================================================= *\/\n\n\/* Zet wat ruimte boven de kalender, zodat hij niet \u201caan je form\u201d kleeft *\/\n.flatpickr-calendar {\n  margin-top: 10px !important;\n}\n\n\/* =======================================================\n   3) Controleer dat er geen regel is die .flatpickr\u2010tekst \u201cverbergt\u201d\n   ======================================================= *\/\n\n\/* Soms zet men in een thema global \u201cinput { color: transparent; }\u201d of \u201c.flatpickr\u2010* { display: none }\u201d \n   Controleer je eigen CSS op zulk soort regels en overschrijf ze zo nodig: *\/\n.flatpickr-current-month,\n.flatpickr-prev-month,\n.flatpickr-next-month {\n \n  visibility: visible !important;\n  opacity: 1 !important;\n}\n\t\n\t.flatpickr-current-month .numInputWrapper {\n\t\tdisplay:none!important;\n\t}\n\t\n\t\/* 1) Zorg dat de header een flex-container is *\/\n.flatpickr-months {\n  display: flex !important;\n  align-items: center;\n  justify-content: space-between; \/* pijltjes en maand verdelen zich over de breedte *\/\n  padding: 0 10px;                \/* optioneel wat ruimte aan linker-\/rechterzijde *\/\n}\n\n\/* 2) Laat de maand-container (flatpickr-month) groeien zodat cur-month in het midden staat *\/\n.flatpickr-month {\n  flex: 1;                        \/* neemt alle resterende ruimte in beslag tussen de pijltjes *\/\n  display: block!important;\n  justify-content: center;       \/* centreert de cur-month horizontaal *\/\n}\n\n\/* 3) Verberg het jaarnummer-inputveld (numInputWrapper) *\/\n.flatpickr-current-month .numInputWrapper {\n  display: none !important;\n}\n\n\/* 4) Optioneel: style het cur-month zelf nog iets *\/\n.flatpickr-current-month .cur-month {\n  font-size: 16px !important;\n  font-weight: 400;\n  color: #0C5453!important;       \/* of welke kleur je wilt *\/\n  text-transform: capitalize;\n}\n\n\/* 5) Style de pijltjes: *\/\n.flatpickr-prev-month,\n.flatpickr-next-month {\n  font-size: 20px !important;\n  color: #0C5453 !important;\n  cursor: pointer;\n  user-select: none;\n  padding: 0 8px;\n}\n\t\n\t\/* ===================================================================\n   Stap 4: Layout en styling ingavevelden\n   =================================================================== *\/\n\n\/* F-rij: twee kolommen naast elkaar *\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n\n\/* ==== Input-paar: twee inputs naast elkaar ==== *\/\n.input-pair {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n.input-pair input {\n  flex: 1;\n}\n\n\/* Zakelijk-velden: standaard verborgen *\/\n.pro-fields {\n  display: none;\n  margin-bottom: 16px;\n}\n\n\/* ==== Algemene stijl voor tekstvelden en textarea ==== *\/\n.f-123 input[type=\"text\"]:not(#license_plate):not(#chassis),\n.f-123 input[type=\"email\"],\n.f-123 textarea {\n  width: 100%;\n  padding: 8px 4px;\n  margin: 0; \n  font-size: 14px;\n  color: #0C5453;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid #0C5453;\n\tborder-radius:0px!important;\n  box-sizing: border-box;\n  outline: none;\n}\n\n\/* Placeholder-kleur iets lichter *\/\n.f-123 input::placeholder,\n.f-123 textarea::placeholder {\n  color: #888888;\n}\n\n\/* Bij focus onderlijn accentueren *\/\n.f-123 input:focus,\n.f-123 textarea:focus {\n  border-bottom: 2px solid #0C5453;\n  color: #222222;\n}\n\n\/* Textarea min-hoogte *\/\n.f-123 textarea {\n  min-height: 80px;\n  resize: vertical;\n}\n\n\/* ==== Radiobuttons \u201cType klant\u201d ==== *\/\n.type-klant-container {\n  margin-bottom: 20px;\n}\n.type-klant-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 8px;\n  color: #0C5453;\n  font-size: 14px;\n}\n.radio-2 {\n  display: flex;\n  gap: 20px;\n}\n.radio-2 label {\n  display: inline-flex;\n  align-items: center;\n  font-size: 14px;\n  color: #333333;\n  cursor: pointer;\n  gap: 4px;\n  user-select: none;\n}\n.radio-2 input[type=\"radio\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: #0C5453; \/* groen accent voor bolletje *\/\n}\n\n\/* ==== Checkbox-container (custom versie) ==== *\/\n.checkbox-container {\n  margin: 12px 0;\n}\n.checkbox-container input[type=\"checkbox\"] {\n  display: none; \/* verberg standaard element *\/\n}\n.custom-checkbox-label {\n  position: relative;\n  padding-left: 28px;\n  font-size: 14px;\n  color: #333333;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n}\n.custom-checkbox-label::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 18px;\n  height: 18px;\n  border: 2px solid #ccc;\n  border-radius: 4px;\n  background: #ffffff;\n  box-sizing: border-box;\n  transition: border-color 0.2s ease, background-color 0.2s ease;\n}\n.custom-checkbox-label::after {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 50%;\n  transform: translateY(-50%) scale(0);\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 15%, 80% 0, 43% 62%);\n  \/* een eenvoudig vink-icoon met polygon *\/\n  transition: transform 0.15s ease;\n  opacity: 0;\n}\n.checkbox-container input[type=\"checkbox\"]:checked + .custom-checkbox-label::before {\n  border-color: #0C5453;\n  background-color: #0C5453;\n}\n.checkbox-container input[type=\"checkbox\"]:checked + .custom-checkbox-label::after {\n  transform: translateY(-50%) scale(1);\n  opacity: 1;\n}\n\n\/* Link in checkbox-tekst *\/\n.custom-checkbox-label a {\n  color: #0C5453;\n  text-decoration: underline;\n}\n\n\/* ==== Overzicht-kaarten (rechter kolom) ==== *\/\n.location-card {\n  display: flex;\n  align-items: flex-start;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 12px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n  margin-bottom: 16px;\n  gap: 12px;\n}\n.icon-box img {\n  width: 50px;\n  height: 50px;\n}\n.location-details {\n  flex-grow: 1;\n  font-size: 14px;\n  color: #333333;\n}\n.location-details strong {\n  color: #000;\n}\n.selected_images_preview span {\n  display: inline;\n  margin-right: 6px;\n  font-weight: 500;\n  color: #0C5453;\n}\n\n\/* ==== Form-knoppen onderaan ==== *\/\n.form-buttons {\n  text-align: right;\n  margin-top: 20px;\n}\n.form-buttons button,\n.form-buttons input[type=\"submit\"] {\n  background-color: #0C5453;\n  color: #ffffff;\n  border: 1px solid #0C5453;\n  border-radius: 5px;\n  padding: 10px 20px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.form-buttons button:hover,\n.form-buttons input[type=\"submit\"]:hover {\n  background-color: transparent;\n  color: #0C5453;\n}\n\/* Zorg dat de label + radiobuttons naast elkaar komen *\/\n.type-klant-container {\n  display: flex;\n  align-items: center;\n  gap: 10px; \/* afstand tussen \u201cType klant:\u201d en de knoppen *\/\n}\n\n\/* Reset eventuele vaste breedte op het label zodat het meegroeit met de tekst *\/\n.type-klant-container .type-klant-label {\n  width: auto;\n  margin: 0;\n  white-space: nowrap;\n}\n\t.radio-2 label {\n\t\twidth:auto!important;\n\t}\n\t\n#hidden-cf7 { \n  display: none !important; \n}\n\n#msf-step-4.active #hidden-cf7 { \n  display: block !important; \n}\n\n#hidden-cf7 .wpcf7-form > * { display: none !important; }\n#hidden-cf7 .msf-file-only { display: block !important; }\n#hidden-cf7 input[type=\"submit\"],\n#hidden-cf7 .wpcf7-response-output,\n#hidden-cf7 .wpcf7-spinner { display:none !important; }\n.msf-error {\n  color: #e74c3c;\n  font-size: 0.9em;\n  margin-top: 4px;\n}\n\n#multiStepForm .form-step:nth-of-type(1) .f-123 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n}\n\n\/* Labels 2-per-rij *\/\n#multiStepForm .form-step:nth-of-type(1) .f-123 > label {\n  flex: 0 0 calc(50% - 10px);\n}\n\n\/* Heading over beide kolommen *\/\n#multiStepForm .form-step:nth-of-type(1) .f-123 > h4 {\n  flex: 0 0 100%;\n}\n\t\n\t\n\t\/* container voor je login-modal *\/\n.msf-modal {\n  display: none;               \/* standaard verborgen *\/\n  position: fixed;\n  top: 0; left: 0;\n  width: 100%;  height: 100%;\n  background: rgba(0,0,0,0.5);\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n\/* wanneer we de class \u201copen\u201d toevoegen, tonen we hem *\/\n.msf-modal.open {\n  display: flex;\n}\n.msf-modal-content {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  max-width: 400px;\n  width: 100%;\n}\n\t\n\t\/* Modal container *\/\n.msf-modal-content {\n  background: #fff;\n  padding: 2rem;\n  border-radius: 0.5rem;\n  max-width: 400px;\n  margin: 2rem auto;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n  font-family: inherit;\n}\n\n\/* Form labels *\/\n.msf-modal-content label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: 600;\n  color: #333;\n}\n\n\/* Text inputs *\/\n.msf-modal-content .input {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  font-size: 1rem;\n  border: 1px solid #ccd0d4;\n  border-radius: 0.375rem;\n  margin-bottom: 1rem;\n  box-sizing: border-box;\n  transition: border-color 0.2s;\n}\n.msf-modal-content .input:focus {\n  border-color: #0C5453;\n  outline: none;\n}\n\n\/* Checkbox row *\/\n.msf-modal-content .login-remember {\n  margin-bottom: 1.5rem;\n}\n.msf-modal-content .login-remember input {\n  vertical-align: middle;\n  margin-right: 0.5rem;\n}\n\n\/* Submit button *\/\n.msf-modal-content .button-primary {\n  background: #0C5453;\n  border: none;\n  color: #fff;\n  padding: 0.75rem 1.5rem;\n  border-radius: 0.375rem;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.msf-modal-content .button-primary:hover {\n  background: #238a75;\n}\n\n\/* Close button *\/\n#msf-close-login {\n  display: block;\n  margin: 1.5rem auto 0;\n  background: transparent;\n  border: 1px solid #ccd0d4;\n  color: #555;\n  padding: 0.5rem 1rem;\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: background-color 0.2s, color 0.2s;\n}\n#msf-close-login:hover {\n  background: #f7f7f7;\n  color: #333;\n}\n\t\n\t\/* ==========================================\n   Step Indicators: Only on small screens\n   ==========================================\n*\/\n@media (max-width: 768px) {\n  .step-container {\n    display: flex;\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n  .step-container .step {\n    flex: 0 0 auto;\n    min-width: 80px;\n    padding: 8px 4px;\n    font-size: 12px;\n  }\n}\n\n\/* ==========================================\n   Two-column form layout\n   ==========================================\n*\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n.f-123 {\n  flex: 1 1 60%;\n  min-width: 60%;\n  box-sizing: border-box;\n}\n.f-124 {\n  flex: 1 1 38%;\n  min-width: 30%;\n  box-sizing: border-box;\n}\n\n\/* Stack columns under 768px *\/\n@media (max-width: 768px) {\n  .f-123,\n  .f-124 {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n}\n\t\n\t@media (max-width: 640px) {\n\t\t.f-124 {\n\t\t\tdisplay:none;\n\t\t}\t\n\t\t\n.f-123 {\n    padding: 0px;\n    border-radius: 10px;\n}\n\t\t.form-step {\n   padding: 10px!important;\n}\n.form-step {\n    padding: 0px;\n}\n\n.Inventory-2 label.interventie-optie {\n    flex: 0 0 45%;\n    max-width: 45%;\n    padding: 20px 5px;\n}\n\t\tform#multiStepForm h3 {\n    font-size: 25px;\n}\n\n  .calendar-column .flatpickr-days,\n  .calendar-column .flatpickr-rContainer {\n    width: auto !important;\n\n  }\n\t\t.flatpickr-weekdays {\n\t\t\twidth:100%!important;\n\t\t}\n\n  .calendar-column .flatpickr-day {\n    width: 30px      !important;\n    height: 30px     !important;\n    line-height: 30px!important;\n    margin: 2px      !important;\n    font-size: 0.75em!important;\n  }\n\t\t\n\n\n\n}\n\t\n\t@media (max-width: 768px) {\n  \/* make your two-up labels collapse to 100% *\/\n  #multiStepForm .form-step:nth-of-type(1) .f-123 > label {\n    flex: 0 0 100% !important;\n  }\n}\n\t\n\t\n\t\n\t\n\n\/* ==========================================\n   Base styles (unique rules)\n   ==========================================\n*\/\n.form-step {\n  background: #f6f6f6;\n  padding: 20px;\n  border-radius: 10px;\n}\n  <\/style>\n\n\n\n    \n    \n    \n    \n    \n    <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->  option {<!-- [et_pb_line_break_holder] -->    color: #2ca090;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .flatpickr-rContainer {<!-- [et_pb_line_break_holder] -->    display: inline-grid !important<!-- [et_pb_line_break_holder] -->;<!-- [et_pb_line_break_holder] -->    padding: 0;<!-- [et_pb_line_break_holder] -->    -webkit-box-sizing: border-box;<!-- [et_pb_line_break_holder] -->    box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .slots button<!-- [et_pb_line_break_holder] -->Specificity: (0,1,1)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] -->    WIDTH: 20% ! IMPORTANT;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .flatpickr-rContainer {<!-- [et_pb_line_break_holder] -->    width: 309px ! IMPORTANT;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  span.flatpickr-day  {<!-- [et_pb_line_break_holder] -->    background-color: #e6e6e6;<!-- [et_pb_line_break_holder] -->    color: #000;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  span.flatpickr-day.nextMonthDay {<!-- [et_pb_line_break_holder] -->    background-color: #e6e6e6;<!-- [et_pb_line_break_holder] -->    color: #000;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  span.flatpickr-day.selected {<!-- [et_pb_line_break_holder] -->    background-color: #2ca090 !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .et_pb_row {<!-- [et_pb_line_break_holder] -->    width: 100% !important;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .preview {<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    border-radius: 10px;<!-- [et_pb_line_break_holder] -->    margin-top: 15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  p {<!-- [et_pb_line_break_holder] -->    padding-bottom: 0px !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  form.register {<!-- [et_pb_line_break_holder] -->    text-align: left;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --> .et_builder_inner_content {<!-- [et_pb_line_break_holder] -->    z-index: inherit !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.et_pb_column {  <!-- [et_pb_line_break_holder] -->    z-index: auto !important;    <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .form-buttons input[type=\"submit\"] {<!-- [et_pb_line_break_holder] -->    width: 20% !important;<!-- [et_pb_line_break_holder] -->    color: #ffffff;<!-- [et_pb_line_break_holder] -->    background-color: #2ca090;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  .f-123 h3 {<!-- [et_pb_line_break_holder] -->    font-size: 20px !important;<!-- [et_pb_line_break_holder] -->    text-align: left !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .f-123 label.selected {<!-- [et_pb_line_break_holder] -->    background-color:  #2ca090;;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.f-123 input[type=\"checkbox\"] {<!-- [et_pb_line_break_holder] -->    visibility: hidden;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  .f-123 label.selected img {<!-- [et_pb_line_break_holder] -->    filter: brightness(0) invert(1); \/* Makes image appear white *\/<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->   <!-- [et_pb_line_break_holder] --> \/* Step Indicator *\/<!-- [et_pb_line_break_holder] -->.step-container {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    flex-wrap: wrap;<!-- [et_pb_line_break_holder] -->    justify-content: space-between;<!-- [et_pb_line_break_holder] -->    border-bottom: 2px solid #ccc;<!-- [et_pb_line_break_holder] -->    margin-bottom: 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.step {<!-- [et_pb_line_break_holder] -->    flex: 1 1 20%;<!-- [et_pb_line_break_holder] -->    text-align: center;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    color: gray;<!-- [et_pb_line_break_holder] -->    font-weight: bold;<!-- [et_pb_line_break_holder] -->    display: flex<!-- [et_pb_line_break_holder] -->;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->    justify-content: center;<!-- [et_pb_line_break_holder] -->    gap: 5px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    border: 1px solid #ccc;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.f-row {<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  gap: 20px;<!-- [et_pb_line_break_holder] -->  flex-wrap: wrap;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.f-123 {<!-- [et_pb_line_break_holder] -->  background-color: #ffffff;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  flex: 0 0 60%;<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.f-124 {<!-- [et_pb_line_break_holder] -->  flex: 0 0 38%;<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->input[type=\"number\"] {<!-- [et_pb_line_break_holder] -->    padding: 23px !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.form-step input, .form-step select, .form-step textarea {<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    margin: 10px 7px;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    border: 1px solid #ccc;<!-- [et_pb_line_break_holder] -->    box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->label {<!-- [et_pb_line_break_holder] -->    width: 48%;<!-- [et_pb_line_break_holder] -->  color: #2ca090;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.f-123 {<!-- [et_pb_line_break_holder] -->    padding: 18px 18px;<!-- [et_pb_line_break_holder] -->   <!-- [et_pb_line_break_holder] -->    border-radius: 10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.f-124 {<!-- [et_pb_line_break_holder] -->    padding: 18px 18px;<!-- [et_pb_line_break_holder] -->   <!-- [et_pb_line_break_holder] -->    border-radius: 10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->form#multiStepForm h3 {<!-- [et_pb_line_break_holder] -->    text-align: center;<!-- [et_pb_line_break_holder] -->    padding: 20px;<!-- [et_pb_line_break_holder] -->    font-size: 30px;<!-- [et_pb_line_break_holder] -->    color: #2ca090;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.Inventory-2 {<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));<!-- [et_pb_line_break_holder] -->  gap: 20px;<!-- [et_pb_line_break_holder] -->  margin-top: 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.Inventory-2 label {<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  flex-direction: column;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  border: 2px solid #00b5a5;<!-- [et_pb_line_break_holder] -->  border-radius: 16px;<!-- [et_pb_line_break_holder] -->  padding: 20px;<!-- [et_pb_line_break_holder] -->  text-align: center;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->  transition: all 0.3s ease;<!-- [et_pb_line_break_holder] -->  position: relative;<!-- [et_pb_line_break_holder] -->  background: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.Inventory-2 label:hover {<!-- [et_pb_line_break_holder] -->  box-shadow: 0 0 10px rgba(0, 181, 165, 0.2);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.Inventory-2 input[type=\"checkbox\"]:checked + img,<!-- [et_pb_line_break_holder] -->.Inventory-2 input[type=\"checkbox\"]:checked ~ img {<!-- [et_pb_line_break_holder] -->  filter: brightness(0) invert(1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.Inventory-2 input[type=\"checkbox\"]:checked ~ span {<!-- [et_pb_line_break_holder] -->  color: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.Inventory-2 input[type=\"checkbox\"]:checked ~ label {<!-- [et_pb_line_break_holder] -->  background-color: #00b5a5;<!-- [et_pb_line_break_holder] -->  color: white;<!-- [et_pb_line_break_holder] -->  border-color: #00b5a5;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.Inventory-2 img {<!-- [et_pb_line_break_holder] -->  width: 48px;<!-- [et_pb_line_break_holder] -->  height: 48px;<!-- [et_pb_line_break_holder] -->  margin-bottom: 10px;<!-- [et_pb_line_break_holder] -->  transition: filter 0.3s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.Inventory-2 span {<!-- [et_pb_line_break_holder] -->  font-size: 16px;<!-- [et_pb_line_break_holder] -->  color: #00b5a5;<!-- [et_pb_line_break_holder] -->  font-weight: 500;<!-- [et_pb_line_break_holder] -->  transition: color 0.3s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Responsive: Stack on small screens *\/<!-- [et_pb_line_break_holder] -->@media (max-width: 768px) {<!-- [et_pb_line_break_holder] -->  .f-123,<!-- [et_pb_line_break_holder] -->  .f-124 {<!-- [et_pb_line_break_holder] -->    flex: 0 0 100%;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.step.completed {<!-- [et_pb_line_break_holder] -->  color: #00bcd4;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.step.active {<!-- [et_pb_line_break_holder] -->  border-bottom: 3px solid #2ca090;<!-- [et_pb_line_break_holder] -->  color: #2ca090 !important;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Form Step *\/<!-- [et_pb_line_break_holder] -->.form-step {<!-- [et_pb_line_break_holder] -->  display: none;<!-- [et_pb_line_break_holder] -->  background: #f6f6f6;<!-- [et_pb_line_break_holder] -->  padding: 20px;<!-- [et_pb_line_break_holder] -->  border-radius: 10px;<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.form-step.active {<!-- [et_pb_line_break_holder] -->  display: block;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.form-step input,<!-- [et_pb_line_break_holder] -->.form-step select,<!-- [et_pb_line_break_holder] -->.form-step textarea {<!-- [et_pb_line_break_holder] -->  width: 100%;<!-- [et_pb_line_break_holder] -->  padding: 10px;<!-- [et_pb_line_break_holder] -->  margin: 10px 0;<!-- [et_pb_line_break_holder] -->  border-radius: 5px;<!-- [et_pb_line_break_holder] -->  border: 1px solid #ccc;<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.form-buttons {<!-- [et_pb_line_break_holder] -->  text-align: right;<!-- [et_pb_line_break_holder] -->  margin-top: 15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.form-buttons button {<!-- [et_pb_line_break_holder] -->  padding: 10px 20px;<!-- [et_pb_line_break_holder] -->  background-color: #2ca090;<!-- [et_pb_line_break_holder] -->  color: white;<!-- [et_pb_line_break_holder] -->  border: none;<!-- [et_pb_line_break_holder] -->  border-radius: 5px;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->  margin-left: 10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.location-card {<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  background: #ffffff;<!-- [et_pb_line_break_holder] -->  border-radius: 12px;<!-- [et_pb_line_break_holder] -->  padding: 15px;<!-- [et_pb_line_break_holder] -->  box-shadow: 0 1px 3px rgba(0,0,0,0.05);<!-- [et_pb_line_break_holder] -->  justify-content: space-between;<!-- [et_pb_line_break_holder] -->  gap: 15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.icon-box {<!-- [et_pb_line_break_holder] -->  background: #eef8f8;<!-- [et_pb_line_break_holder] -->  padding: 12px;<!-- [et_pb_line_break_holder] -->  border-radius: 12px;<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  align-items: center;<!-- [et_pb_line_break_holder] -->  justify-content: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.icon-box img {<!-- [et_pb_line_break_holder] -->  width: 24px;<!-- [et_pb_line_break_holder] -->  height: 24px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.location-details {<!-- [et_pb_line_break_holder] -->  flex-grow: 1;<!-- [et_pb_line_break_holder] -->  color: #333;<!-- [et_pb_line_break_holder] -->  font-size: 14px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.location-details strong {<!-- [et_pb_line_break_holder] -->  color: #000;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.location-edit {<!-- [et_pb_line_break_holder] -->  color: #b0b0b0;<!-- [et_pb_line_break_holder] -->  font-size: 14px;<!-- [et_pb_line_break_holder] -->  white-space: nowrap;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.Inventory-2 input[type=\"checkbox\"]:checked + img, .Inventory-2 input[type=\"checkbox\"]:checked ~ img {<!-- [et_pb_line_break_holder] -->    filter: contrast(-1.5) !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.Inventory-2 label {<!-- [et_pb_line_break_holder] -->   display: inline-block !important;<!-- [et_pb_line_break_holder] -->    width: 28%;<!-- [et_pb_line_break_holder] -->    margin: 15px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->span.mk-098 {<!-- [et_pb_line_break_holder] -->    display: block;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.calendar-container {<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  gap: 40px;<!-- [et_pb_line_break_holder] -->  margin-top: 20px;<!-- [et_pb_line_break_holder] -->  align-items: flex-start;<!-- [et_pb_line_break_holder] -->  flex-wrap: wrap;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#datepicker {<!-- [et_pb_line_break_holder] -->  border: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.time-slots {<!-- [et_pb_line_break_holder] -->  display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.time-slots p {<!-- [et_pb_line_break_holder] -->  margin-bottom: 10px;<!-- [et_pb_line_break_holder] -->  font-weight: 600;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slots {<!-- [et_pb_line_break_holder] -->  display: flex;<!-- [et_pb_line_break_holder] -->  flex-direction: column;<!-- [et_pb_line_break_holder] -->  gap: 10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slots button {<!-- [et_pb_line_break_holder] -->  border: 1px solid #00a89c;<!-- [et_pb_line_break_holder] -->  background: white;<!-- [et_pb_line_break_holder] -->  color: #00a89c;<!-- [et_pb_line_break_holder] -->  border-radius: 20px;<!-- [et_pb_line_break_holder] -->  padding: 10px 20px;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->  transition: 0.3s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.slots button.active,<!-- [et_pb_line_break_holder] -->.slots button:hover {<!-- [et_pb_line_break_holder] -->  background-color: #00a89c;<!-- [et_pb_line_break_holder] -->  color: white;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.flatpickr-calendar.inline {<!-- [et_pb_line_break_holder] -->    width: 490px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.flatpickr-rContainer {<!-- [et_pb_line_break_holder] -->    width: 490px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.flatpickr-days {<!-- [et_pb_line_break_holder] -->    width: 490px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.radio-2 label {<!-- [et_pb_line_break_holder] -->  display: inline-block;<!-- [et_pb_line_break_holder] -->  margin-right: 20px;<!-- [et_pb_line_break_holder] -->  font-size: 16px;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.radio-2 input[type=\"radio\"] {<!-- [et_pb_line_break_holder] -->  margin-right: 5px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->input[type=\"radio\"] {<!-- [et_pb_line_break_holder] -->    width: auto ! IMPORTANT;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->input[type=\"checkbox\"] {<!-- [et_pb_line_break_holder] -->    width: auto !important;<!-- [et_pb_line_break_holder] -->    margin-right: 10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.Inventory-2 input[type=\"checkbox\"] {<!-- [et_pb_line_break_holder] -->    width: 100% !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->\/* Responsive Styles *\/<!-- [et_pb_line_break_holder] -->@media (max-width: 768px) {<!-- [et_pb_line_break_holder] -->  .step {<!-- [et_pb_line_break_holder] -->    flex: 1 1 50%;<!-- [et_pb_line_break_holder] -->    font-size: 13px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .form-buttons {<!-- [et_pb_line_break_holder] -->    text-align: center;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .form-buttons button {<!-- [et_pb_line_break_holder] -->    margin-top: 10px;<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media (max-width: 600px) {<!-- [et_pb_line_break_holder] -->  .location-card {<!-- [et_pb_line_break_holder] -->    flex-direction: column;<!-- [et_pb_line_break_holder] -->    align-items: flex-start;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .location-edit {<!-- [et_pb_line_break_holder] -->    align-self: flex-end;<!-- [et_pb_line_break_holder] -->    margin-top: 10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media (max-width: 480px) {<!-- [et_pb_line_break_holder] -->  .step {<!-- [et_pb_line_break_holder] -->    flex: 1 1 100%;<!-- [et_pb_line_break_holder] -->    font-size: 12px;<!-- [et_pb_line_break_holder] -->    padding: 8px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .form-step {<!-- [et_pb_line_break_holder] -->    padding: 15px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .form-step input,<!-- [et_pb_line_break_holder] -->  .form-step select,<!-- [et_pb_line_break_holder] -->  .form-step textarea {<!-- [et_pb_line_break_holder] -->    padding: 8px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .form-buttons button {<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->   p#tr3 {<!-- [et_pb_line_break_holder] -->    border: solid 2px #2ca090;<!-- [et_pb_line_break_holder] -->    padding: 20px;<!-- [et_pb_line_break_holder] -->    border-radius: 20px;<!-- [et_pb_line_break_holder] -->    color: #2ca090;<!-- [et_pb_line_break_holder] -->    font-weight: 600;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .flatpickr-calendar.inline {<!-- [et_pb_line_break_holder] -->    width: 398px ! IMPORTANT;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .flatpickr-innerContainer {<!-- [et_pb_line_break_holder] -->    display: flow ! IMPORTANT;   <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  .flatpickr-weekdays {<!-- [et_pb_line_break_holder] -->    WIDTH: 63% ! IMPORTANT;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  div#b3 label {<!-- [et_pb_line_break_holder] -->    border: solid 2px #2ca090;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    border-radius: 10px;<!-- [et_pb_line_break_holder] -->    color: #2ca090;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  div#b3 input[type=\"radio\"] {<!-- [et_pb_line_break_holder] -->    accent-color: #2ca090;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .last-3 {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->    gap: 20px;<!-- [et_pb_line_break_holder] -->    font-family: sans-serif;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .type-klant-label {<!-- [et_pb_line_break_holder] -->    font-weight: 600;<!-- [et_pb_line_break_holder] -->    color: #2da49c;<!-- [et_pb_line_break_holder] -->        width: 24%;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  .radio-2 {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    gap: 1rem;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->    width: 80%;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Zorg dat de originele <select> zelf 46 px hoog is *\/<!-- [et_pb_line_break_holder] -->#brand_select.searchable-dropdown {<!-- [et_pb_line_break_holder] -->  height: 46px !important;<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* En pas de Select2\u2010wrapper hierop aan *\/<!-- [et_pb_line_break_holder] -->.select2-container--default .select2-selection--single {<!-- [et_pb_line_break_holder] -->  height: 46px !important;<!-- [et_pb_line_break_holder] -->  margin-top: 10px !important;<!-- [et_pb_line_break_holder] -->  box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Verticaal centreren van de tekst binnen Select2 *\/<!-- [et_pb_line_break_holder] -->.select2-container--default .select2-selection--single .select2-selection__rendered {<!-- [et_pb_line_break_holder] -->  line-height: 46px !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Zorg dat de pijltjes\u2010arrow ook 46 px hoog blijft *\/<!-- [et_pb_line_break_holder] -->.select2-container--default .select2-selection--single .select2-selection__arrow {<!-- [et_pb_line_break_holder] -->  height: 46px !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  .hidden-more {<!-- [et_pb_line_break_holder] -->  display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.btn-load-more {<!-- [et_pb_line_break_holder] -->  margin-top: 10px;<!-- [et_pb_line_break_holder] -->  padding: 8px 12px;<!-- [et_pb_line_break_holder] -->  background-color: #2ca090;<!-- [et_pb_line_break_holder] -->  color: #fff;<!-- [et_pb_line_break_holder] -->  border: none;<!-- [et_pb_line_break_holder] -->  border-radius: 4px;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.btn-load-more:hover {<!-- [et_pb_line_break_holder] -->  background-color: #249780;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <!-- [et_pb_line_break_holder] -->  \/* Verberg extra interventies in eerste weergave *\/<!-- [et_pb_line_break_holder] -->.hidden-more {<!-- [et_pb_line_break_holder] -->  display: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* \u201cMeer laden\u2026\u201d-knop *\/<!-- [et_pb_line_break_holder] -->.btn-load-more {<!-- [et_pb_line_break_holder] -->  margin-top: 10px;<!-- [et_pb_line_break_holder] -->  padding: 8px 12px;<!-- [et_pb_line_break_holder] -->  background-color: #2ca090;<!-- [et_pb_line_break_holder] -->  color: #fff;<!-- [et_pb_line_break_holder] -->  border: none;<!-- [et_pb_line_break_holder] -->  border-radius: 4px;<!-- [et_pb_line_break_holder] -->  cursor: pointer;<!-- [et_pb_line_break_holder] -->  transition: background-color 0.3s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.btn-load-more:hover {<!-- [et_pb_line_break_holder] -->  background-color: #249780;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Wanneer een interventie is geselecteerd *\/<!-- [et_pb_line_break_holder] -->.f-123 label.selected {<!-- [et_pb_line_break_holder] -->  background-color: #2ca090;<!-- [et_pb_line_break_holder] -->  color: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.f-123 label.selected img {<!-- [et_pb_line_break_holder] -->  filter: brightness(0) invert(1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Standaard on\u2010selected labels (om ervoor te zorgen dat de tekst in #2ca090 blijft) *\/<!-- [et_pb_line_break_holder] -->.f-123 label {<!-- [et_pb_line_break_holder] -->  color: #2ca090;<!-- [et_pb_line_break_holder] -->  transition: background-color 0.3s ease, color 0.3s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Image\u2010transition (altijd aanwezig) *\/<!-- [et_pb_line_break_holder] -->.Inventory-2 img {<!-- [et_pb_line_break_holder] -->  transition: filter 0.3s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->  <\/style>\n<p>[\/et_pb_code][et_pb_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/l10n\/nl.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.5.1\/dist\/confetti.browser.min.js\"><\/script>\n   \n<div class=\"step-container\" id=\"stepIndicator\">\n  <div   class=\"step active\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Wagen<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Interventies<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Datum &amp; uur<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Gegevens<\/div>\n   <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Bevestiging<\/div>\n <\/div>\n  \n  \n<div id=\"multiStepForm\" class=\"msf-form\">\n\t\t<div class=\"form-step active\">\n\t\t  <h3>Voer de gegevens van jouw wagen in<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<div class=\"f-123\">\n\t\t\t  <h4>Vul hier in<\/h4>\n\n\t\t\t  <label>\n\t\t\t\tNummerplaat <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<input id=\"license_plate\" type=\"text\" name=\"license_plate\" required>\n\t\t\t  <\/label>\n\t\t\t  <label>\n\t\t\t\tKilometerstand <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<input id=\"mileage\" type=\"number\" name=\"mileage\" required>\n\t\t\t  <\/label>\n\t\t\t  <label>\n\t\t\t\tChassisnummer\n\t\t\t\t<input id=\"chassis\" type=\"text\" name=\"chassis\" required>\n\t\t\t  <\/label>\n\n\t\t\t  \t\t\t  <label>\n\t\t\t\tType wagen <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<select id=\"car_type\" name=\"car_type\" required>\n\t\t\t\t  <option value=\"\">Selecteer type\u2026<\/option>\n\t\t\t\t  \t\t\t\t\t\t\t\t\t\t  <option value=\"bestelwagens-groot\">\n\t\t\t\t\t\tBestelwagens groot\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"bestelwagens-klein\">\n\t\t\t\t\t\tBestelwagens klein\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"opleggers\">\n\t\t\t\t\t\tOpleggers\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"personenwagens\">\n\t\t\t\t\t\tPersonenwagens\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"trekkers\">\n\t\t\t\t\t\tTrekkers\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"vrachtwagens\">\n\t\t\t\t\t\tVrachtwagens\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t  \t\t\t\t<\/select>\n\t\t\t  <\/label>\n\n\t\t\t  \t\t\t  <label>\n\t\t\t\tMerk\n\t\t\t\t<select id=\"brand_select\" name=\"brand\" class=\"searchable-dropdown\">\n\t\t\t\t  <option value=\"\">Selecteer merk\u2026<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"A&amp;D\">\n\t\t\t\t\t  A&amp;D\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Citro\u00ebn\">\n\t\t\t\t\t  Citro\u00ebn\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"DAF\">\n\t\t\t\t\t  DAF\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Ford\">\n\t\t\t\t\t  Ford\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Iveco\">\n\t\t\t\t\t  Iveco\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Krone\">\n\t\t\t\t\t  Krone\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"K\u00f6gel\">\n\t\t\t\t\t  K\u00f6gel\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"LAG trailers\">\n\t\t\t\t\t  LAG trailers\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"MAN\">\n\t\t\t\t\t  MAN\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Mercedes\">\n\t\t\t\t\t  Mercedes\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Opel\">\n\t\t\t\t\t  Opel\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Peugeot\">\n\t\t\t\t\t  Peugeot\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Renault\">\n\t\t\t\t\t  Renault\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Scania\">\n\t\t\t\t\t  Scania\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Schmitz Cargobull\">\n\t\t\t\t\t  Schmitz Cargobull\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Smart\">\n\t\t\t\t\t  Smart\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Van Hool\">\n\t\t\t\t\t  Van Hool\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Volvo\">\n\t\t\t\t\t  Volvo\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Andere\">\n\t\t\t\t\t  Andere\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t<\/select>\n\t\t\t  <\/label>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t  <div class=\"msf-note\" style=\"margin-top: 1em; font-size: 14px; text-align: center;\">\n\t\t\t\tHeb je al een account? \n\t\t\t\t<a href=\"#\" id=\"msf-open-login-step1\" class=\"msf-open-login\">Klik hier om in te loggen<\/a>.\n\t\t\t  <\/div>\n\t\t\t\n\n\t\t\t<\/div> <!-- einde f-123 -->\n\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div> <!-- einde form-step -->\n  \n\n\t\t<div class=\"form-step\">\n\t\t  <h3>Selecteer tot 3 interventies<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- LINKS: keuzevak (.f-123, 60% breed) -->\n\t\t\t<div class=\"f-123 interventies\">\n\t\t\t  <!-- ---- \u201cMeest gekozen\u201d sectie ---- -->\n\t\t\t  <h4>Onze populairste interventies<\/h4>\n\t\t\t  <div class=\"Inventory-2\">\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2083\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Remmen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-remmen.png\"\n\t\t\t\t\t\t alt=\"Remmen\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Remmen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2081\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Onderhoud\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-onderhoud.png\"\n\t\t\t\t\t\t alt=\"Onderhoud\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Onderhoud<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2078\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Keuring\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-technische-keuring.png\"\n\t\t\t\t\t\t alt=\"Keuring\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Keuring<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2631\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Carrosserie\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-carrosserie.png\"\n\t\t\t\t\t\t alt=\"Carrosserie\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Carrosserie<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t  <\/div><!-- .Inventory-2 -->\n\n\t\t\t  <br><br>\n\n\t\t\t  <!-- ---- \u201cMeer interventies\u201d sectie ---- -->\n\t\t\t  <h4>Meer interventies<\/h4>\n\t\t\t  <div class=\"Inventory-2\">\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2734\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Frigo\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-frigo.png\"\n\t\t\t\t\t\t alt=\"Frigo\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Frigo<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2085\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Schokdempers\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-schokdempers.png\"\n\t\t\t\t\t\t alt=\"Schokdempers\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Schokdempers<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2084\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Ruitenwissers\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-ruitenwissers.png\"\n\t\t\t\t\t\t alt=\"Ruitenwissers\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Ruitenwissers<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2080\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Koplampen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-koplampen.png\"\n\t\t\t\t\t\t alt=\"Koplampen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Koplampen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2079\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Glasbreuk\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-glasbreuk.png\"\n\t\t\t\t\t\t alt=\"Glasbreuk\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Glasbreuk<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2077\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Distributieriem\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-distributieriem.png\"\n\t\t\t\t\t\t alt=\"Distributieriem\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Distributieriem<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2076\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Batterij\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-batterij.png\"\n\t\t\t\t\t\t alt=\"Batterij\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Batterij<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2075\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Check Up\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-check-up.png\"\n\t\t\t\t\t\t alt=\"Check Up\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Check Up<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2082\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Banden\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-banden.png\"\n\t\t\t\t\t\t alt=\"Banden\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Banden<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2073\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Airco\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-airco.png\"\n\t\t\t\t\t\t alt=\"Airco\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Airco<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2074\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Accessoires\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-centraal-slot-en-alarm.png\"\n\t\t\t\t\t\t alt=\"Accessoires\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Accessoires<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2072\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Truckwash\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-truckwash.png\"\n\t\t\t\t\t\t alt=\"Truckwash\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Truckwash<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2070\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Elektrische problemen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-elektrische-problemen.png\"\n\t\t\t\t\t\t alt=\"Elektrische problemen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Elektrische problemen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2071\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Koelsysteem\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-koeling.png\"\n\t\t\t\t\t\t alt=\"Koelsysteem\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Koelsysteem<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2068\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Laadklep\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-laadklep.png\"\n\t\t\t\t\t\t alt=\"Laadklep\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Laadklep<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2069\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Luchtleidingen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-luchtleidingen.png\"\n\t\t\t\t\t\t alt=\"Luchtleidingen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Luchtleidingen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2067\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Motor\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-motor.png\"\n\t\t\t\t\t\t alt=\"Motor\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Motor<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2066\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Olie verversen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-olie-verversen.png\"\n\t\t\t\t\t\t alt=\"Olie verversen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Olie verversen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2065\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Stuur\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-stuur.png\"\n\t\t\t\t\t\t alt=\"Stuur\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Stuur<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2057\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Uitlaat\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-uitlaat.png\"\n\t\t\t\t\t\t alt=\"Uitlaat\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Uitlaat<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2629\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Versnellingsbak\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-versnellingsbak.png\"\n\t\t\t\t\t\t alt=\"Versnellingsbak\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Versnellingsbak<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2630\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Tachygraaf\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-tachygraaf.png\"\n\t\t\t\t\t\t alt=\"Tachygraaf\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Tachygraaf<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <button type=\"button\" id=\"loadMoreBtn\" class=\"btn-load-more\">Meer laden\u2026<\/button>\n\t\t\t\t\t\t\t  <\/div><!-- .Inventory-2 -->\n\t\t\t<\/div><!-- .f-123 interventies -->\n\n\n\t\t\t<!-- RECHTS: preview (.f-124, 38% breed) -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\n\t\t\t  <!-- Vaste locatie\u2010kaart -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\n\t\t\t  <!-- Preview\u2010kaart STEP 1 -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\n\t\t\t  <!-- Preview\u2010kaart interventies (titels) -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" id=\"nextStepBtn\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div> <!-- einde form-step -->\n\n\t \n\t \n\t\t <div class=\"form-step\">\n\t\t  <h3>Selecteer datum en uur<\/h3>\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- === LINKER KOLOM: FLATPICKR === -->\n\t\t\t<div class=\"f-123\" style=\"background-color: #f6f6f6;\">\n\t\t\t  <div class=\"f-1\" style=\"background-color: #f3faf9;\">\n\t\t\t\t<p id=\"tr3\">\n\t\t\t\t  <strong>Let op!<\/strong> Dit is een aanvraag om een afspraak vast te leggen, \n\t\t\t\t  deze moet eerst bevestigd worden. Wacht op de bevestiging van uw verdeler voordat \n\t\t\t\t  u naar de werkplaats komt.<br>\n\t\t\t\t<\/p>\n\t\t\t  <\/div>\n\t\t\t\t\n\t\t\t  <div class=\"f-1 kalender\">\n\t\t\t\t  <label>Uw gewenste datum en uur selecteren <span style=\"color: #e74c3c;\">*<\/span><\/label>\n\t\t\t\t<div class=\"calendar-time-container\">\n\t\t\t\t  <!-- 1a) Flatpickr calendar -->\n\t\t\t\t  <div class=\"calendar-column\">\n\t\t\t\t\t<!-- We verbergen het standaard Flatpickr-inputveld zelf (maar laten het inline kalenderpaneel zien) -->\n\t\t\t\t\t<input\n\t\t\t\t\t  type=\"text\"\n\t\t\t\t\t  id=\"datepicker\"\n\t\t\t\t\t  name=\"date\"\n\t\t\t\t\t  placeholder=\"Selecteer een datum\"\n\t\t\t\t\t  readonly\n\t\t\t\t\t  required\n\t\t\t\t\t\/>\n\t\t\t\t  <\/div>\n\t\t\t\t  <!-- 1b) Tijdselectie rechts -->\n\t\t\t\t  <div class=\"time-column\" id=\"timeColumn\">\n\t\t\t\t\t<!-- Hier komt de \u201cVrijdag 9\/05\u201d bv te staan -->\n\t\t\t\t\t<div id=\"selectedDateDisplay\" class=\"selected-date-display\">Kies eerst een datum<\/div>\n\t\t\t\t\t<div class=\"slots\">\n\t\t\t\t\t  <button type=\"button\" data-time=\"08:00\">08:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"09:00\">09:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"10:00\">10:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"11:00\">11:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"14:00\">14:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"15:00\">15:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"16:00\">16:00<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<!-- Verborgen input om de gekozen tijd door te sturen -->\n\t\t\t\t\t<input type=\"hidden\" name=\"time\" id=\"selectedTimeInput\" required>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<br><br>\n\t\t\t\t<div class=\"f-1\" id=\"renting-question\">\n\t\t\t\t  <label><strong>Ben je een renting klant? <span style=\"color:#e74c3c\">*<\/span><\/strong><\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"renting_customer\" value=\"ja\"> Ja<\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"renting_customer\" value=\"nee\"> Nee<\/label>\n\t\t\t\t<\/div>\n\t\t\t\t<div id=\"mobility-container\" style=\"display:none;\">\n\t\t\t\t  <label>\n\t\t\t\t\tMobiliteitsoplossing <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t\t<select id=\"mobility_option\" name=\"mobility_option\" required>\n\t\t\t\t\t  <option value=\"\">Maak een keuze<\/option>\n\t\t\t\t\t<\/select>\n\t\t\t\t  <\/label>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div>\n\n\t\t\t<!-- === RECHTER KOLOM: OVERZICHT (wagen + interventies) === -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div>\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div>\n\t \n\t \n\t \t \n\n\t\t<div class=\"form-step\" id=\"msf-step-4\">\n\t\t  <h3>Controleer en vul je gegevens aan<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- LINKER KOLOM: INGAVEVELDEN -->\n\t\t\t<div class=\"f-123\">\n\t\t\t  <!-- Type klant (Particulier \/ Zakelijk) -->\n\t\t\t  <div class=\"type-klant-container\">\n\t\t\t\t<label class=\"type-klant-label\">Type klant:<\/label>\n\t\t\t\t<div id=\"b3\" class=\"radio-2\">\n\t\t\t\t  <label><input type=\"radio\" name=\"user_type\" value=\"private\" checked id=\"user_type_private_formstep\"> Particulier<\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"user_type\" value=\"professional\" id=\"user_type_professional_formstep\"> Zakelijk<\/label>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- Zakelijk-velden (Bedrijfsnaam + BTW) -->\n\t\t\t  <div id=\"proFields\" class=\"input-pair pro-fields\">\n\t\t\t\t<input type=\"text\" name=\"company_name\" id=\"company_name_formstep\" placeholder=\"Bedrijfsnaam\">\n\t\t\t\t<input type=\"text\" name=\"tax_number\" id=\"tax_number_formstep\" placeholder=\"BTW-nummer\">\n\t\t\t  <\/div>\n\n\t\t\t  <!-- Voornaam + Achternaam -->\n\t\t\t  <div class=\"input-pair\">\n\t\t\t  <input type=\"text\" name=\"first_name\" id=\"first_name_formstep\" placeholder=\"Voornaam *\" required value=\"\" >\n\t\t\t  <input type=\"text\" name=\"surname\" id=\"surname_formstep\" placeholder=\"Achternaam *\" required value=\"\" >\n\t\t\t<\/div>\n\n\t\t\t  <!-- E-mail + Telefoonnummer -->\n\t\t\t  <div class=\"input-pair\">\n\t\t\t\t<input type=\"email\" name=\"email\" id=\"email_formstep\" placeholder=\"E-mail *\" required value=\"\" >\n\t\t\t\t  <div id=\"msf-email-exists\" class=\"msf-error\" style=\"display:none\">\n\t\t\t\t\t  Dit e-mailadres is al geregistreerd. <a href=\"#\" id=\"msf-open-login\">Log hier in<\/a>.\n\t\t\t\t\t<\/div>\n\t\t\t\t<input  type=\"text\" name=\"phone\" id=\"phone_formstep\" placeholder=\"Telefoonnummer\" value=\"\" >\n\t\t\t  <\/div>\n\n\t\t\t  <textarea name=\"message\" id=\"message_formstep\" placeholder=\"Boodschap\"><\/textarea>\n\t\t\t\t<div id=\"hidden-cf7\" class=\"msf-cf7-shadow\">\n\t\t\t\t  \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2709-o3\" lang=\"nl-BE\" dir=\"ltr\" data-wpcf7-id=\"2709\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/nl\/wp-json\/wp\/v2\/pages\/145#wpcf7-f2709-o3\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contactformulier\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2709\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"nl_BE\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2709-o3\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:2709,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;repeater_remove_button&quot;:&quot;bottom&quot;}}\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"license_plate\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Nummerplaat\" value=\"\" type=\"text\" name=\"license_plate\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mileage\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Kilometerstand\" value=\"\" type=\"text\" name=\"mileage\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"chassis\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Chassisnummer\" value=\"\" type=\"text\" name=\"chassis\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"brand\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Merk\" value=\"\" type=\"text\" name=\"brand\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"car_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type wagen\" value=\"\" type=\"text\" name=\"car_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies_id\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies_id\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"date\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Datum\" value=\"\" type=\"text\" name=\"date\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"time\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Tijd\" value=\"\" type=\"text\" name=\"time\" \/><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"renting_customer\" \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mobility_option\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Mobiliteitsoplossing\" value=\"\" type=\"text\" name=\"mobility_option\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"user_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type klant\" value=\"\" type=\"text\" name=\"user_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"company_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Bedrijfsnaam\" value=\"\" type=\"text\" name=\"company_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tax_number\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"BTW-nummer\" value=\"\" type=\"text\" name=\"tax_number\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"first_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Voornaam\" value=\"\" type=\"text\" name=\"first_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"surname\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Achternaam\" value=\"\" type=\"text\" name=\"surname\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"Telefoon\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Boodschap\" name=\"message\"><\/textarea><\/span>\n<div class=\"msf-file-only\">\n  <span class=\"wpcf7-form-control-wrap\" data-name=\"bestanden\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-drag-n-drop-file d-none\" aria-invalid=\"false\" type=\"file\" multiple=\"multiple\" data-name=\"bestanden\" data-type=\"jpg|jpeg|png|pdf\" data-limit=\"3000000\" data-max=\"10\" data-id=\"2709\" data-version=\"free version 1.3.9.8\" accept=\".jpg, .jpeg, .png, .pdf\" \/><\/span>\n<\/div>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"create_account\"><span class=\"wpcf7-form-control wpcf7-checkbox\"><span class=\"wpcf7-list-item first last\"><input type=\"checkbox\" name=\"create_account[]\" value=\"Ja, maak een account\" \/><span class=\"wpcf7-list-item-label\">Ja, maak een account<\/span><\/span><\/span><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"url\" \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Verzenden\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t\n\t\t\t  <div id=\"ca-container\" class=\"checkbox-container\" style=\"display: block;\">\n\t\t\t\t<input type=\"checkbox\" id=\"create_account_formstep\" name=\"create_account\">\n\t\t\t\t<label style=\"width:100%!important;\" for=\"create_account_formstep\" class=\"custom-checkbox-label\">\n\t\t\t\t  Registreer je en volg je aanvragen in \u00e9\u00e9n oogopslag.\n\t\t\t\t<\/label>\n\t\t\t  <\/div>\n\n\t\t\t  <div id=\"have-account-container\" class=\"msf-note\" style=\"display:none; margin-bottom:1em;font-size:14px;\">\n\t\t\t\tZo te zien heb je al een account. \n\t\t\t\t<a href=\"#\" class=\"msf-open-login\">Klik hier om in te loggen<\/a>.\n\t\t\t  <\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t  <!-- Checkbox \u201cIk ga akkoord met privacy policy\u201d -->\n\t\t\t  <div class=\"checkbox-container\">\n\t\t\t\t<input type=\"checkbox\" id=\"agree_policy_formstep\" name=\"agree_policy\">\n\t\t\t\t<label style=\"width:100%!important;\" for=\"agree_policy_formstep\" class=\"custom-checkbox-label\">\n\t\t\t\t  Ik ga akkoord met de &nbsp;<a href=\"\/privacy-policy\/\" target=\"_blank\"> privacy policy<\/a>  <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<\/label>\n\t\t\t\t<div class=\"error agree-error\" style=\"display:none;color:#e74c3c;font-size:0.9em;\">\n\t\t\t\t\tJe moet akkoord gaan met de privacy policy.\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-123 -->\n\n\n\t\t\t<!-- RECHTER KOLOM: OVERZICHT AFSPRAAK -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t<div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t<div>1730 Kobbegem - Asse<\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-datum.png\" alt=\"Datum Icon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Datum en uur<\/h4>\n\t\t\t\t\t<div class=\"datetime-preview\">\n\t\t\t\t\t  <p><strong>Datum:<\/strong> <span id=\"selected_date\">Not selected<\/span><\/p>\n\t\t\t\t\t  <p><strong>Tijdstip:<\/strong> <span id=\"selected_time\">Not selected<\/span><\/p>\n\t\t\t\t\t  <p><strong>Mobiliteitsoplossing:<\/strong> <span id=\"selected_mobility\">Not selected<\/span><\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" id=\"msfFinalBtn\">Afspraak aanvragen<\/button>\n\t\t  <\/div>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t \n\t \n\t \n\t \n\t\t<div class=\"form-step\" id=\"form-submit\">\n\t\t  <div class=\"f-row\">\n\n\t\t\t<!-- ========== LINKER KOLOM: BEVESTIGINGSMESSAGE ========== -->\n\t\t\t<div class=\"f-123\" style=\"text-align: center; background-color: #f6f6f6;\">\n\t\t\t  <!-- Bovenste melding -->\n\t\t\t  <div class=\"f-1\" style=\"text-align: center; background-color: #ffffff; padding: 20px; border-radius: 10px;\">\n\t\t\t\t<p>\n\t\t\t\t  <strong>We hebben uw aanvraag goed ontvangen.<\/strong><br>\n\t\t\t\t  Een van onze collega's zal u binnenkort contacteren om uw afspraak te bevestigen en de praktische details te regelen.\n\t\t\t\t<\/p>\n\t\t\t\t<img\n\t\t\t\t  decoding=\"async\"\n\t\t\t\t  width=\"296\"\n\t\t\t\t  height=\"285\"\n\t\t\t\t  src=\"\/wp-content\/uploads\/2025\/06\/checkmark-miers.png\"\n\t\t\t\t  alt=\"Confirmation check\"\n\t\t\t\t  title=\"Confirmation check\"\n\t\t\t\t>\n\t\t\t  <\/div>\n\t\t\t  <br><br>\n\t\t\t  <!-- Onderstaande \u201cLet op!\u201d-box -->\n\t\t\t  <div class=\"f-1\" style=\"background-color: #f3faf9; border-radius: 10px;\">\n\t\t\t\t<p id=\"tr3\">\n\t\t\t\t  <strong>Let op!<\/strong> Dit is een aanvraag om een afspraak vast te leggen, deze moet eerst bevestigd worden.\n\t\t\t\t  Wacht op de bevestiging van uw verdeler voordat u naar de werkplaats komt.\n\t\t\t\t<\/p>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde linker kolom -->\n\n\n\t\t\t<!-- ========== RECHTER KOLOM: OVERZICHT VAN ALLE INGAVEN ========== -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Uw ingevulde gegevens<\/h4>\n\n\t\t\t  <!-- 1) Vaste locatie\u2010kaart -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<p>\n\t\t\t\t\t  <strong>Locatie:<\/strong>\n\t\t\t\t\t  <strong>MIERS Group<\/strong><br>\n\t\t\t\t\t  Brusselsesteenweg 333<br>\n\t\t\t\t\t  1730 Kobbegem - Asse\n\t\t\t\t\t<\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 2) Wagen\u2010gegevens -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 3) Interventies -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 4) Datum & Tijd & Mobiliteit -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-datum.png\" alt=\"Datum icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Datum en uur<\/h4>\n\t\t\t\t\t<p><strong>Datum:<\/strong> <span id=\"selected_date\">Not selected<\/span><\/p>\n\t\t\t\t\t<p><strong>Tijdstip:<\/strong> <span id=\"selected_time\">Not selected<\/span><\/p>\n\t\t\t\t\t<p><strong>Mobiliteitsoplossing:<\/strong> <span id=\"selected_mobility\">Not selected<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 5) Persoonlijke gegevens -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-user.png\" alt=\"Gebruikers icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Persoonlijke gegevens<\/h4>\n\t\t\t\t\t<p><strong>Type klant:<\/strong> <span class=\"user_type_preview\">Not selected<\/span><\/p>\n\t\t\t\t\t<!-- Enkel zichtbaar als er \u201cZakelijk\u201d is gekozen -->\n\t\t\t\t\t<p class=\"company-line\" style=\"display: none;\"><strong>Bedrijfsnaam:<\/strong> <span class=\"company_name_preview\"><\/span><\/p>\n\t\t\t\t\t<p class=\"tax-line\" style=\"display: none;\"><strong>BTW-nummer:<\/strong> <span class=\"tax_number_preview\"><\/span><\/p>\n\t\t\t\t\t<p><strong>Voornaam:<\/strong> <span class=\"first_name_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Achternaam:<\/strong> <span class=\"surname_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>E-mail:<\/strong> <span class=\"email_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Telefoon:<\/strong> <span class=\"phone_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Boodschap:<\/strong><\/p>\n\t\t\t\t\t<p><span class=\"message_preview\">\u2013 geen boodschap \u2013<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t<\/div> <!-- einde rechter kolom -->\n\t\t  <\/div> <!-- einde f-row -->\n\t\t<\/div> <!-- einde form-step #form-submit -->\n<\/div>\n\t\t<!-- Login Modal (verborgen) -->\n\t\t<div id=\"msf-login-modal\" class=\"msf-modal\">\n\t\t  <div class=\"msf-modal-content\">\n\t\t\t<form name=\"loginform\" id=\"loginform\" action=\"https:\/\/miers.be\/wp-login.php\" method=\"post\"><p class=\"login-username\">\n\t\t\t\t<label for=\"user_login\">E-mail<\/label>\n\t\t\t\t<input type=\"text\" name=\"log\" id=\"user_login\" autocomplete=\"username\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-password\">\n\t\t\t\t<label for=\"user_pass\">Wachtwoord<\/label>\n\t\t\t\t<input type=\"password\" name=\"pwd\" id=\"user_pass\" autocomplete=\"current-password\" spellcheck=\"false\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-remember\"><label><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/> Mij onthouden<\/label><\/p><p class=\"login-submit\">\n\t\t\t\t<input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button button-primary\" value=\"Inloggen\" \/>\n\t\t\t\t<input type=\"hidden\" name=\"redirect_to\" value=\"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/\" \/>\n\t\t\t<\/p><\/form>\t\t\t<button type=\"button\" id=\"msf-close-login\">Sluiten<\/button>\n\t\t  <\/div>\n\t\t<\/div>\n\n\t\t\t<div id=\"hidden-cf7\">\n\t\t\t  \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2709-o4\" lang=\"nl-BE\" dir=\"ltr\" data-wpcf7-id=\"2709\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/nl\/wp-json\/wp\/v2\/pages\/145#wpcf7-f2709-o4\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contactformulier\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2709\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"nl_BE\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2709-o4\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:2709,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;repeater_remove_button&quot;:&quot;bottom&quot;}}\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"license_plate\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Nummerplaat\" value=\"\" type=\"text\" name=\"license_plate\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mileage\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Kilometerstand\" value=\"\" type=\"text\" name=\"mileage\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"chassis\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Chassisnummer\" value=\"\" type=\"text\" name=\"chassis\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"brand\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Merk\" value=\"\" type=\"text\" name=\"brand\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"car_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type wagen\" value=\"\" type=\"text\" name=\"car_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies_id\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies_id\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"date\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Datum\" value=\"\" type=\"text\" name=\"date\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"time\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Tijd\" value=\"\" type=\"text\" name=\"time\" \/><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"renting_customer\" \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mobility_option\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Mobiliteitsoplossing\" value=\"\" type=\"text\" name=\"mobility_option\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"user_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type klant\" value=\"\" type=\"text\" name=\"user_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"company_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Bedrijfsnaam\" value=\"\" type=\"text\" name=\"company_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tax_number\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"BTW-nummer\" value=\"\" type=\"text\" name=\"tax_number\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"first_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Voornaam\" value=\"\" type=\"text\" name=\"first_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"surname\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Achternaam\" value=\"\" type=\"text\" name=\"surname\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"Telefoon\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Boodschap\" name=\"message\"><\/textarea><\/span>\n<div class=\"msf-file-only\">\n  <span class=\"wpcf7-form-control-wrap\" data-name=\"bestanden\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-drag-n-drop-file d-none\" aria-invalid=\"false\" type=\"file\" multiple=\"multiple\" data-name=\"bestanden\" data-type=\"jpg|jpeg|png|pdf\" data-limit=\"3000000\" data-max=\"10\" data-id=\"2709\" data-version=\"free version 1.3.9.8\" accept=\".jpg, .jpeg, .png, .pdf\" \/><\/span>\n<\/div>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"create_account\"><span class=\"wpcf7-form-control wpcf7-checkbox\"><span class=\"wpcf7-list-item first last\"><input type=\"checkbox\" name=\"create_account[]\" value=\"Ja, maak een account\" \/><span class=\"wpcf7-list-item-label\">Ja, maak een account<\/span><\/span><\/span><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"url\" \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Verzenden\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t<\/div>\n\n\n\n\n\n\n\n<!-- === CONSOLIDEERDE MULTI-STEP LOGICA + localStorage + flatpickr === -->\n\n\n<script>\n  \/\/ ================================\n  \/\/ A. STEP-INDEX & HASH\n  \/\/ ================================\n  let currentStep = 0;\n  const formSteps      = document.querySelectorAll('.form-step');\n  const stepIndicators = document.querySelectorAll('.step');\n\tconst LAST_STEP_INDEX = formSteps.length - 1;\n\n  function showStep(stepIndex) {\n    formSteps.forEach((stepEl, idx) => {\n      stepEl.classList.toggle('active', idx === stepIndex);\n    });\n    stepIndicators.forEach((indEl, idx) => {\n      indEl.classList.toggle('active',    idx <= stepIndex);\n      indEl.classList.toggle('completed', idx <  stepIndex);\n    });\n    currentStep = stepIndex;\n    window.location.hash = 'step' + stepIndex;\n\t  \n\t  onStepChange(stepIndex);\n\t  \n\t  if (stepIndex >= 3) {\n\t\tupdateStep3PreviewCards();\n\t  }\n\n\t  const anchor = document.getElementById('AfspraakInboeken');\n\t  if (anchor) {\n\t\tanchor.scrollIntoView({ behavior: 'smooth' });\n\t  }\n    \n    if (stepIndex === LAST_STEP_INDEX) {\n\t\tconst mob = (localStorage.getItem('msf_mobility_option') || '').toLowerCase();\n\n\t\tif (mob.includes('huurwagen')) {\n\t\t  const container = document.querySelector('#form-submit .f-123');\n\t\t  \/\/ enkel \u00e9\u00e9n keer toevoegen\n\t\t  if (!container.querySelector('.msf-to-rental')) {\n\t\t\tcontainer.insertAdjacentHTML('beforeend', `\n\t\t\t  <div class=\"msf-to-rental\" style=\"margin-top:1.5em; padding:1em; background:#eef; border-radius:8px;\">\n\t\t\t\t<p><strong>Wil je alvast je huurwagen boeken?<\/strong><br>\n\t\t\t\t   Bekijk dan snel onze verhuurpagina.<\/p>\n\t\t\t\t<a href=\"verhuur-van-bestelwagens-bedrijfsvoertuigen\/#resultaten\" class=\"button\" style=\"display:inline-block;margin-top:0.5em;padding:0.75em 1.5em;\n\t\t\t\t   background:#0C5453;color:#fff;border-radius:5px;text-decoration:none;\">\n\t\t\t\t  Naar verhuur\n\t\t\t\t<\/a>\n\t\t\t  <\/div>\n\t\t\t`);\n\t\t  }\n\t\t}\n      launchConfetti();\n    }\n  }\n\n  function nextStep() {\n\t  \/\/ 0) Verwijder oude foutmeldingen\n\t  document.querySelectorAll('.msf-error').forEach(e => e.remove());\n\n\t  \/\/ 1) Validatie per stap\n\t  if (currentStep === 0) {\n\t\t\/\/ stap 1: nummerplaat, kilometerstand, type wagen\n\t\tlet valid = true;\n\t\tconst plate   = document.getElementById('license_plate');\n\t\tconst mileage = document.getElementById('mileage');\n\t\tconst carType = document.getElementById('car_type');\n\n\t\tif (!plate.value.trim()) {\n\t\t  plate.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Vul je nummerplaat in<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!mileage.value.trim()) {\n\t\t  mileage.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Vul je kilometerstand in<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!carType.value.trim()) {\n\t\t  carType.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een type wagen<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!valid) return;\n\t  }\n\n\t  if (currentStep === 1) {\n\t\t\/\/ stap 2: minstens 1 interventie\n\t\tconst checked = document.querySelectorAll('.inventory-checkbox:checked');\n\t\tif (checked.length < 1) {\n\t\t  const container = document.querySelector('.f-123.interventies');\n\t\t  container.insertAdjacentHTML('beforeend',\n\t\t\t'<div class=\"msf-error\">Kies minstens 1 interventie<\/div>'\n\t\t  );\n\t\t  return;\n\t\t}\n\t  }\n\n\t  if (currentStep === 2) {\n\t\t\/\/ stap 3: datum, tijd en mobiliteitsoplossing\n\t\tlet ok = true;\n\t\tconst dateInput = document.getElementById('datepicker');\n\t\tconst timeInput = document.getElementById('selectedTimeInput');\n\t\tconst rentingQuestion = document.getElementById('renting-question');\n\t\tconst rentChecked = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t\tconst mobInput  = document.getElementById('mobility_option');\n\n\t\tif (!dateInput.value) {\n\t\t  dateInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een datum<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!timeInput.value) {\n\t\t  timeInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een uur<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!rentChecked) {\n\t\t\trentingQuestion.insertAdjacentHTML('beforeend',\n\t\t\t  '<div class=\"msf-error\">Geef aan of je een renting klant bent<\/div>'\n\t\t\t);\n\t\t\tok = false;\n  \t\t}\n\t\tif (!mobInput.value) {\n\t\t  mobInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een mobiliteitsoplossing<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!ok) return;\n\t  }\n\n\t  if (currentStep === 3) {\n\t\t\/\/ stap 4: voornaam, achternaam, email, privacy\n\t\tlet ok = true;\n\n\t\t\/\/ required fields\n\t\tconst fields = [\n\t\t  { id: 'first_name_formstep',  msg: 'Vul je voornaam in'},\n\t\t  { id: 'surname_formstep',     msg: 'Vul je achternaam in'},\n\t\t  { id: 'email_formstep',       msg: 'Vul je e-mail in'},\n\t\t];\n\t\tfields.forEach(({id,msg}) => {\n\t\t  const el = document.getElementById(id);\n\t\t  if (!el.value.trim()) {\n\t\t\tel.insertAdjacentHTML('afterend',\n\t\t\t  `<div class=\"msf-error\">${msg}<\/div>`\n\t\t\t);\n\t\t\tok = false;\n\t\t  }\n\t\t});\n\n\t\t\/\/ privacy checkbox\n\t\tconst agreeEl = document.getElementById('agree_policy_formstep');\n\t\tif (!agreeEl.checked) {\n\t\t  \/\/ plaats de foutmelding onder de .checkbox-container\n\t\t  const wrapper = agreeEl.closest('.checkbox-container');\n\t\t  wrapper.insertAdjacentHTML('beforeend',\n\t\t\t'<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t  if (window.initDragDrop) {\n\t\t\t\twindow.initDragDrop(); \n\t\t\t  }\n\t\t\t}, 50);\n\n\t\tif (!ok) return;\n\t  }\n\n\t  \/\/ 2) Als alles ok is: naar de volgende stap\n\t  showStep(currentStep + 1);\n\t}\n\n  function prevStep() {\n    if (currentStep > 0) {\n      showStep(currentStep - 1);\n    }\n  }\n\n  \/\/ Alleen stappen \u2264 currentStep zijn \u201cklikbaar\u201d\n  stepIndicators.forEach((stepEl, idx) => {\n    stepEl.style.cursor = (idx <= currentStep ? 'pointer' : 'not-allowed');\n    stepEl.addEventListener('click', () => {\n      if (idx <= currentStep) {\n        showStep(idx);\n      }\n    });\n  });\n\n\n  \/\/ ================================\n  \/\/ B. localStorage: STAP 1 (Wagen)\n  \/\/ ================================\n  const LS_KEYS = {\n    license_plate: 'msf_license_plate',\n    mileage:       'msf_mileage',\n\tchassis: \t   'msf_chassis',\n    car_type:      'msf_car_type',\n    brand:         'msf_brand'\n  };\n\n  function saveStep1ValuesToStorage() {\n    const lp   = document.getElementById('license_plate')?.value || '';\n    const km   = document.getElementById('mileage')?.value || '';\n\tconst ch = document.getElementById('chassis')?.value || '';\n    const type = document.getElementById('car_type')?.value || '';\n    const merk = document.getElementById('brand_select')?.value || '';\n    localStorage.setItem(LS_KEYS.license_plate, lp);\n    localStorage.setItem(LS_KEYS.mileage,       km);\n\tlocalStorage.setItem(LS_KEYS.chassis, ch);\n    localStorage.setItem(LS_KEYS.car_type,      type);\n    localStorage.setItem(LS_KEYS.brand,         merk);\n  }\n\n  function loadStep1ValuesFromStorage() {\n    const lpStored   = localStorage.getItem(LS_KEYS.license_plate);\n    const kmStored   = localStorage.getItem(LS_KEYS.mileage);\n\tconst chStored = localStorage.getItem(LS_KEYS.chassis);\n    const typeStored = localStorage.getItem(LS_KEYS.car_type);\n    const merkStored = localStorage.getItem(LS_KEYS.brand);\n\n    if (lpStored   !== null) document.getElementById('license_plate').value = lpStored;\n    if (kmStored   !== null) document.getElementById('mileage').value       = kmStored;\n\tif (chStored !== null) document.getElementById('chassis').value = chStored;\n    if (typeStored !== null) document.getElementById('car_type').value      = typeStored;\n    if (merkStored !== null) {\n      const brandSelect = document.getElementById('brand_select');\n      if (brandSelect) {\n        brandSelect.value = merkStored;\n        if (window.jQuery && jQuery('#brand_select').data('select2')) {\n          jQuery('#brand_select').trigger('change.select2');\n        }\n      }\n    }\n  }\n\n  function initStep1Listeners() {\n    ['license_plate','mileage', 'chassis', 'car_type','brand_select'].forEach(id => {\n      const el = document.getElementById(id);\n      if (!el) return;\n      \/\/ Input\u2010velden (text\/number) \u2192 input\u2010event\n      el.addEventListener('input', () => {\n        saveStep1ValuesToStorage();\n        updateAllPreviews();\n      });\n      \/\/ <select> \u2192 change\u2010event\n      if (el.tagName.toLowerCase() === 'select') {\n        el.addEventListener('change', () => {\n          saveStep1ValuesToStorage();\n          updateAllPreviews();\n        });\n      }\n    });\n  }\n\n\n  \/\/ ============================================\n  \/\/ C. localStorage: STAP 2 (Interventies)\n  \/\/ ============================================\n  const LS_KEYS_2 = {\n    interventies: 'msf_interventies'\n  };\n\n  function saveStep2ValuesToStorage() {\n    const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');\n    const ids = Array.from(checkedBoxes).map(cb => cb.value);\n    localStorage.setItem(LS_KEYS_2.interventies, JSON.stringify(ids));\n  }\n\n  function loadStep2ValuesFromStorage() {\n    const stored = localStorage.getItem(LS_KEYS_2.interventies);\n    if (stored) {\n      try {\n        const ids = JSON.parse(stored);\n        ids.forEach(id => {\n          const cb = document.querySelector('.inventory-checkbox[value=\"' + id + '\"]');\n          if (cb) {\n            cb.checked = true;\n            const lab = cb.closest('label');\n            if (lab) lab.classList.add('selected');\n          }\n        });\n      } catch(e) {\n        console.error(e);\n      }\n    }\n  }\n\n  function updateStep2PreviewCards() {\n    const selectedImages = document.querySelectorAll('.inventory-checkbox:checked');\n    document.querySelectorAll('.selected_images_preview').forEach(container => {\n      container.innerHTML = '';\n      \/\/ Toon alles in \u00e9\u00e9n regel, gescheiden door komma + spatie\n      const titles = Array.from(selectedImages).map(cb => cb.dataset.title.trim());\n      if (titles.length) {\n        container.textContent = titles.join(', ');\n      } else {\n        container.textContent = ''; \n      }\n    });\n  }\n\n  function initStep2Listeners() {\n    const checkboxes = document.querySelectorAll('.inventory-checkbox');\n    checkboxes.forEach(cb => {\n      cb.addEventListener('change', () => {\n        const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');\n        if (checkedBoxes.length > 3) {\n          \/\/ Als er al 3 zijn, zet deze uit en toon waarschuwing\n          cb.checked = false;\n          alert('Je kan maximaal 3 interventies selecteren.');\n          return;\n        }\n        \/\/ Toggle .selected\u2010klasse op label\n        const lab = cb.closest('label');\n        if (lab) lab.classList.toggle('selected', cb.checked);\n\n        \/\/ Sla selectie op + update preview\n        saveStep2ValuesToStorage();\n        updateStep2PreviewCards();\n\n        \/\/ Als er nu \u2265 3 geselecteerd zijn \u2192 disable de rest\n        const newCheckedCount = document.querySelectorAll('.inventory-checkbox:checked').length;\n        if (newCheckedCount >= 3) {\n          document.querySelectorAll('.inventory-checkbox:not(:checked)').forEach(uncheckedCb => {\n            uncheckedCb.disabled = true;\n            const lbl = uncheckedCb.closest('label');\n            if (lbl) lbl.style.opacity = '0.5';\n          });\n        } else {\n          \/\/ Anders: alles weer inschakelen\n          document.querySelectorAll('.inventory-checkbox').forEach(allCb => {\n            allCb.disabled = false;\n            const lbl = allCb.closest('label');\n            if (lbl) lbl.style.opacity = '1';\n          });\n        }\n      });\n    });\n  }\n\n  \/\/ \u201cMeer laden\u2026\u201d\u2010knop (stap 2)\n  function initLoadMoreButton() {\n    const loadMoreBtn = document.getElementById('loadMoreBtn');\n    if (loadMoreBtn) {\n      loadMoreBtn.addEventListener('click', () => {\n        document.querySelectorAll('.hidden-more').forEach(el => el.classList.remove('hidden-more'));\n        loadMoreBtn.style.display = 'none';\n      });\n    }\n  }\n\n\n  \/\/ ================================================\n  \/\/ D. Preview STAP 1 voor STAP 2\/3\/4 (locatie-kaarten)\n  \/\/ ================================================\n\t  function updateStep1PreviewCards() {\n\t\tconst lpStored   = localStorage.getItem(LS_KEYS.license_plate) || 'Niet toegevoegd';\n\t\tconst kmStored   = localStorage.getItem(LS_KEYS.mileage) || 'Niet toegevoegd';\n\t\tconst chStored   = localStorage.getItem(LS_KEYS.chassis) || 'Niet toegevoegd';\n\t\tconst merkStored = localStorage.getItem(LS_KEYS.brand);\n\n\t\tlet carTypeText = 'Niet toegevoegd';\n\t\tconst carTypeEl = document.getElementById('car_type');\n\t\tif (carTypeEl) {\n\t\t  const idx = carTypeEl.selectedIndex;\n\t\t  if (idx > 0) {\n\t\t\tcarTypeText = carTypeEl.options[idx].text;\n\t\t  } else {\n\t\t\tconst storedSlug = localStorage.getItem(LS_KEYS.car_type);\n\t\t\tif (storedSlug) {\n\t\t\t  const opt = Array.from(carTypeEl.options).find(o => o.value === storedSlug);\n\t\t\t  if (opt) carTypeText = opt.text;\n\t\t\t}\n\t\t  }\n\t\t}\n\n\t\t\/\/ update previews\n\t\tdocument.querySelectorAll('.license_plate_preview').forEach(el => el.textContent = lpStored);\n\t\tdocument.querySelectorAll('.mileage_preview').forEach(el     => el.textContent = kmStored);\n\t\tdocument.querySelectorAll('.chassis_preview').forEach(el     => el.textContent = chStored);\n\t\tdocument.querySelectorAll('.car_type_preview').forEach(el    => el.textContent = carTypeText);\n\n\t\tdocument.querySelectorAll('.brand_preview').forEach(el => {\n\t\t  const parentP = el.closest('.brand-line');\n\t\t  if (merkStored && merkStored.trim() !== '') {\n\t\t\tel.textContent = merkStored;\n\t\t\tif (parentP) parentP.style.display = 'block';\n\t\t  } else {\n\t\t\tel.textContent = 'Not entered';\n\t\t\tif (parentP) parentP.style.display = 'none';\n\t\t  }\n\t\t});\n\t}\n\n\n  \/\/ ================================================\n  \/\/ E. localStorage: STAP 3 (Datum & tijd & mobiliteit)\n  \/\/ ================================================\n  const LS_KEYS_3 = {\n    date:            'msf_date',\n    time:            'msf_time',\n\trenting_customer: 'msf_renting_customer',\n    mobility_option: 'msf_mobility_option'\n  };\n\n  function saveStep3ValuesToStorage() {\n    const dateVal = document.getElementById('datepicker')?.value || '';\n    const timeVal = document.getElementById('selectedTimeInput')?.value || '';\n\tconst rentingVal = document.querySelector('input[name=\"renting_customer\"]:checked')?.value || '';\n    const mobVal  = document.getElementById('mobility_option')?.value || '';\n    localStorage.setItem(LS_KEYS_3.date,            dateVal);\n    localStorage.setItem(LS_KEYS_3.time,            timeVal);\n\tlocalStorage.setItem(LS_KEYS_3.renting_customer, rentingVal);\n    localStorage.setItem(LS_KEYS_3.mobility_option, mobVal);\n  }\n\n  function loadStep3ValuesFromStorage() {\n    const dateStored = localStorage.getItem(LS_KEYS_3.date);\n    const timeStored = localStorage.getItem(LS_KEYS_3.time);\n\tconst rentStored = localStorage.getItem(LS_KEYS_3.renting_customer);\n    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option);\n\n    if (dateStored !== null) {\n      const dateInput = document.getElementById('datepicker');\n      if (dateInput) dateInput.value = dateStored;\n    }\n    if (timeStored !== null) {\n      \/\/ Hidden input \u201cselectedTimeInput\u201d\n      const hiddenTimeInput = document.getElementById('selectedTimeInput');\n      if (hiddenTimeInput) hiddenTimeInput.value = timeStored;\n      \/\/ Highlight de juiste knop in de \u201cslots\u201d-div\n      document.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n        if (btn.dataset.time === timeStored) {\n          btn.classList.add('active');\n          document.getElementById('selected_time').textContent = timeStored;\n        } else {\n          btn.classList.remove('active');\n        }\n      });\n    }\n\tif (rentStored) {\n\t\tconst radio = document.querySelector(`input[name=\"renting_customer\"][value=\"${rentStored}\"]`);\n\t\tif (radio) {\n\t\t  radio.checked = true;\n\t\t  radio.dispatchEvent(new Event('change'));\n\t\t}\n\t  }\n    if (mobStored !== null) {\n      const mobSelect = document.getElementById('mobility_option');\n      if (mobSelect) mobSelect.value = mobStored;\n      document.getElementById('selected_mobility').textContent = mobStored || 'Not selected';\n    }\n  }\n\n\tfunction initStep3Listeners() {\n\t  const dateInput = document.getElementById('datepicker');\n\t  if (!dateInput) return;\n\n\t  \/\/ === Initialiseer Flatpickr met dynamische disable-functie ===\n\t  flatpickr(dateInput, {\n\t\t  inline: true,\n\t\t  dateFormat: \"Y-m-d\",\n\t\t  locale: 'nl',\n\t\t  disable: [\n\t\t\tfunction(date) {\n\t\t\t  const dow = date.getDay();\n\t\t\t  const ctText = document\n\t\t\t\t.getElementById('car_type')\n\t\t\t\t.options[\n\t\t\t\t  document.getElementById('car_type').selectedIndex\n\t\t\t\t]?.text\n\t\t\t\t.toLowerCase() || '';\n\t\t\t  \/\/ altijd zondag, en zaterdag alleen uit als personenwagen\n\t\t\t  return dow === 0 || (dow === 6 && ctText.includes('personenwagen'));\n\t\t\t}\n\t\t  ],\n\t\t  onChange(selectedDates, dateStr) {\n\t\t\tif (!selectedDates.length) return;\n\n\t\t\tconst jsDate = selectedDates[0];\n\t\t\tconst dow    = jsDate.getDay();\n\t\t\tconst ctSelect = document.getElementById('car_type');\n\t\t\tconst ctText   = ctSelect.options[ctSelect.selectedIndex]?.text.toLowerCase() || '';\n\n\t\t\t\/\/ toon de tijdkolom\n\t\t\tdocument.getElementById('selectedDateDisplay').textContent = dateStr;\n\t\t\tdocument.getElementById('timeColumn').classList.add('visible');\n\t\t\tsaveStep3ValuesToStorage();\n\t\t\tupdateStep3PreviewCards();\n\n\t\t\t\/\/ filter de knoppen\n\t\t\tdocument.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n\t\t\t  const uur = parseInt(btn.dataset.time.split(':')[0], 10);\n\t\t\t  if (dow === 6 && !ctText.includes('personenwagen')) {\n\t\t\t\t\/\/ zaterdag & niet personenwagen \u2192 enkel 08\u201311 (voor 12u)\n\t\t\t\tbtn.style.display = (uur >= 8 && uur < 12) ? 'block' : 'none';\n\t\t\t  } else {\n\t\t\t\t\/\/ alle andere dagen \/ personenwagens \u2192 alles\n\t\t\t\tbtn.style.display = 'block';\n\t\t\t  }\n\t\t\t});\n\t\t  }\n\t\t});\n\n\t  \/\/ bij wijzigen van het type wagen kalender hertekenen\n\t  document.getElementById('car_type').addEventListener('change', () => {\n\t\tconst fp = dateInput._flatpickr;\n\t\tif (fp) fp.redraw();\n\t  });\n\n\t  \/\/ === Tijd-knoppen ===\n\t  document.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n\t\tbtn.addEventListener('click', function() {\n\t\t  \/\/ active-state\n\t\t  document.querySelectorAll('#timeColumn .slots button')\n\t\t\t\t  .forEach(b => b.classList.remove('active'));\n\t\t  this.classList.add('active');\n\t\t  const chosen = this.dataset.time || '';\n\n\t\t  \/\/ hidden input\n\t\t  let hidden = document.getElementById('selectedTimeInput');\n\t\t  if (!hidden) {\n\t\t\thidden = document.createElement('input');\n\t\t\thidden.type = 'hidden';\n\t\t\thidden.name = 'time';\n\t\t\thidden.id   = 'selectedTimeInput';\n\t\t\tdocument.getElementById('multiStepForm').appendChild(hidden);\n\t\t  }\n\t\t  hidden.value = chosen;\n\n\t\t  \/\/ sla op & preview\n\t\t  saveStep3ValuesToStorage();\n\t\t  document.getElementById('selected_time').textContent = chosen || 'Not selected';\n\t\t  updateStep3PreviewCards();\n\n\t\t  \/\/ waarschuwing na 14u\n\t\t  const old = document.getElementById('msf-time-warning');\n\t\t  if (old) old.remove();\n\t\t  const uur = parseInt(chosen.split(':')[0], 10);\n\t\t  if (!isNaN(uur) && uur >= 14) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.id = 'msf-time-warning';\n\t\t\tdiv.className = 'f-1';\n\t\t\tdiv.style.cssText = 'background-color: #f3faf9; border-radius:10px; margin-top:1em;';\n\t\t\tdiv.innerHTML = `\n\t\t\t  <p id=\"tr3\">\n\t\t\t\t<strong>Let op!<\/strong> vanaf ${chosen} kunnen we niet garanderen dat de wagen vandaag zal voltooid zijn.\n\t\t\t  <\/p>`;\n\t\t\tdocument.querySelector('.kalender').appendChild(div);\n\t\t  }\n\t\t});\n\t  });\n\t\n\t\t\/\/ === Renting logica ===\n\t\tconst rentingRadios = document.querySelectorAll('input[name=\"renting_customer\"]');\n\t\tconst mobContainer  = document.getElementById('mobility-container');\n\t\tconst mobSelect     = document.getElementById('mobility_option');\n\n\t\trentingRadios.forEach(radio => {\n\t\t  radio.addEventListener('change', () => {\n\t\t\t\/\/ leeg oude opties\n\t\t\tmobSelect.innerHTML = '<option value=\"\">Maak een keuze<\/option>';\n\t\t\tif (radio.value === 'ja') {\n\t\t\t  ['Ik zal wachten','Ik wil een vervangwagen','Ik wil een fiets']\n\t\t\t\t.forEach(text => {\n\t\t\t\t  const opt = document.createElement('option');\n\t\t\t\t  opt.textContent = text;\n\t\t\t\t  mobSelect.appendChild(opt);\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t  ['Ik zal wachten','Ik wil een huurwagen ( vanaf \u20ac100 \/ dag )','Ik wil een fiets']\n\t\t\t\t.forEach(text => {\n\t\t\t\t  const opt = document.createElement('option');\n\t\t\t\t  opt.textContent = text;\n\t\t\t\t  mobSelect.appendChild(opt);\n\t\t\t\t});\n\t\t\t}\n\t\t\t\/\/ toon dropdown + opslaan\n\t\t\tmobContainer.style.display = 'block';\n\t\t\tsaveStep3ValuesToStorage();\n\t\t  });\n\t\t});\n\t\n\n\t  \/\/ === Mobiliteits-dropdown ===\n\t  const mob = document.getElementById('mobility_option');\n\t  if (mob) {\n\t\tmob.addEventListener('change', () => {\n\t\t  saveStep3ValuesToStorage();\n\t\t  document.getElementById('selected_mobility').textContent = mob.value || 'Not selected';\n\t\t  updateStep3PreviewCards();\n\t\t});\n\t  }\n\t  const preChecked = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  if (preChecked) {\n\t\t\/\/ hiermee wordt de hierboven geregistreerde change-handler \u00e9\u00e9n keer aangeroepen\n\t\tpreChecked.dispatchEvent(new Event('change'));\n\t\t\/\/ \u00e9n meteen de eerder gekozen optie selecteren in de dropdown\n\t\tconst storedMob = localStorage.getItem(LS_KEYS_3.mobility_option);\n\t\tif (storedMob) {\n\t\t  mobSelect.value = storedMob;\n\t\t  document.getElementById('selected_mobility').textContent = storedMob;\n\t\t  updateStep3PreviewCards();\n\t\t}\n\t  }\n\t}\n\n\n  \/\/ ================================================\n  \/\/ G. localStorage: STAP 4 (Contactgegevens)\n  \/\/ ================================================\n  const LS_KEYS_4 = {\n    user_type:    'msf_user_type',\n    company_name: 'msf_company_name',\n    tax_number:   'msf_tax_number',\n    first_name:   'msf_first_name',\n    surname:      'msf_surname',\n    email:        'msf_email',\n    phone:        'msf_phone',\n    message:      'msf_message',\n    create_account: 'msf_create_account',\n    agree_policy:   'msf_agree_policy'\n  };\n\n  function saveStep4ValuesToStorage() {\n    const ut = document.querySelector('input[name=\"user_type\"]:checked')?.value || '';\n    localStorage.setItem(LS_KEYS_4.user_type, ut);\n\n    if (ut === 'professional') {\n      const cn = document.querySelector('input[name=\"company_name\"]')?.value || '';\n      const tn = document.querySelector('input[name=\"tax_number\"]')?.value || '';\n      localStorage.setItem(LS_KEYS_4.company_name, cn);\n      localStorage.setItem(LS_KEYS_4.tax_number,   tn);\n    } else {\n      localStorage.removeItem(LS_KEYS_4.company_name);\n      localStorage.removeItem(LS_KEYS_4.tax_number);\n    }\n\n    const fn = document.querySelector('input[name=\"first_name\"]')?.value || '';\n    const sn = document.querySelector('input[name=\"surname\"]')?.value || '';\n    const em = document.querySelector('input[name=\"email\"]')?.value || '';\n    const ph = document.querySelector('input[name=\"phone\"]')?.value || '';\n    const ms = document.querySelector('textarea[name=\"message\"]')?.value || '';\n    const ca = document.querySelector('input[name=\"create_account\"]')?.checked || false;\n    const ap = document.querySelector('input[name=\"agree_policy\"]')?.checked || false;\n\n    localStorage.setItem(LS_KEYS_4.first_name,   fn);\n    localStorage.setItem(LS_KEYS_4.surname,      sn);\n    localStorage.setItem(LS_KEYS_4.email,        em);\n    localStorage.setItem(LS_KEYS_4.phone,        ph);\n    localStorage.setItem(LS_KEYS_4.message,      ms);\n    localStorage.setItem(LS_KEYS_4.create_account, ca ? 'yes' : 'no');\n    localStorage.setItem(LS_KEYS_4.agree_policy,   ap ? 'yes' : 'no');\n  }\n\n  function loadStep4ValuesFromStorage() {\n    const utStored = localStorage.getItem(LS_KEYS_4.user_type);\n    if (utStored) {\n      const utRadio = document.querySelector('input[name=\"user_type\"][value=\"' + utStored + '\"]');\n      if (utRadio) utRadio.checked = true;\n    }\n    \/\/ Toon of verberg bedrijfs\u2010velden\n    const proFields = document.getElementById('proFields');\n    if (proFields) {\n      proFields.style.display = (utStored === 'professional') ? 'block' : 'none';\n    }\n\n    const companyStored = localStorage.getItem(LS_KEYS_4.company_name);\n    if (companyStored !== null) {\n      document.querySelector('input[name=\"company_name\"]').value = companyStored;\n    }\n    const taxStored = localStorage.getItem(LS_KEYS_4.tax_number);\n    if (taxStored !== null) {\n      document.querySelector('input[name=\"tax_number\"]').value = taxStored;\n    }\n\n    const fnStored = localStorage.getItem(LS_KEYS_4.first_name);\n    if (fnStored !== null) {\n      document.querySelector('input[name=\"first_name\"]').value = fnStored;\n    }\n    const snStored = localStorage.getItem(LS_KEYS_4.surname);\n    if (snStored !== null) {\n      document.querySelector('input[name=\"surname\"]').value = snStored;\n    }\n    const emStored = localStorage.getItem(LS_KEYS_4.email);\n    if (emStored !== null) {\n      document.querySelector('input[name=\"email\"]').value = emStored;\n    }\n    const phStored = localStorage.getItem(LS_KEYS_4.phone);\n    if (phStored !== null) {\n      document.querySelector('input[name=\"phone\"]').value = phStored;\n    }\n    const msStored = localStorage.getItem(LS_KEYS_4.message);\n    if (msStored !== null) {\n      document.querySelector('textarea[name=\"message\"]').value = msStored;\n    }\n    const caStored = localStorage.getItem(LS_KEYS_4.create_account);\n    if (caStored === 'yes') {\n      document.querySelector('input[name=\"create_account\"]').checked = true;\n    }\n    const apStored = localStorage.getItem(LS_KEYS_4.agree_policy);\n    if (apStored === 'yes') {\n      document.querySelector('input[name=\"agree_policy\"]').checked = true;\n    }\n  }\n\n  function initStep4Listeners() {\n    \/\/ 1) \u201cType klant\u201d radiobuttons\n    document.querySelectorAll('input[name=\"user_type\"]').forEach(radio => {\n      radio.addEventListener('change', () => {\n        const sel = document.querySelector('input[name=\"user_type\"]:checked')?.value;\n        const proFields = document.getElementById('proFields');\n        if (proFields) proFields.style.display = (sel === 'professional') ? 'block' : 'none';\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n\n    \/\/ 2) Bedrijfsnaam + btw\u2010nr\n    ['company_name','tax_number'].forEach(name => {\n      const el = document.querySelector(`input[name=\"${name}\"]`);\n      if (!el) return;\n      el.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n\n    \/\/ 3) Voornaam, Achternaam, E-mail, Telefoon\n    ['first_name','surname','email','phone'].forEach(name => {\n      const el = document.querySelector(`input[name=\"${name}\"]`);\n      if (!el) return;\n      el.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n    const msgEl = document.querySelector('textarea[name=\"message\"]');\n    if (msgEl) {\n      msgEl.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n\n    \/\/ 4) \u201cMaak account\u201d\u2010checkbox\n    const caCb = document.querySelector('input[name=\"create_account\"]');\n    if (caCb) {\n      caCb.addEventListener('change', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n\n    \/\/ 5) \u201cPrivacy policy\u201d\u2010checkbox\n    const apCb = document.querySelector('input[name=\"agree_policy\"]');\n    if (apCb) {\n      apCb.addEventListener('change', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n  }\n\n\n  \/\/ =======================================================\n  \/\/ H. Preview STAP 3 in STAP 4\/5 (datum\/tijd\/mobiliteit)\n  \/\/ =======================================================\n  function updateStep3PreviewCards() {\n    const dateStored = localStorage.getItem(LS_KEYS_3.date) || 'Not selected';\n    const timeStored = localStorage.getItem(LS_KEYS_3.time) || 'Not selected';\n    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option) || 'Not selected';\n\n    document.querySelectorAll('#selected_date').forEach(el => {\n    el.textContent = dateStored;\n  });\n  document.querySelectorAll('#selected_time').forEach(el => {\n    el.textContent = timeStored;\n  });\n  document.querySelectorAll('#selected_mobility').forEach(el => {\n    el.textContent = mobStored;\n  });\n  }\n\n\n  \/\/ =======================================================\n  \/\/ I. Preview STAP 4 in STAP 5 (contactgegevens)\n  \/\/ =======================================================\n function updateStep4PreviewCards() {\n\t  \/\/ Haal user_type uit localStorage\n\t  const ut = localStorage.getItem('msf_user_type') || '';\n\t  document.querySelectorAll('.user_type_preview').forEach(el => {\n\t\tel.textContent = ut || 'Not selected';\n\t  });\n\n\t  \/\/ Toon\/verberg bedrijfsnaam + tax\u2010nummer\n\t  const showPro = (ut === 'professional');\n\t  document.querySelector('.company-line').style.display = showPro ? 'block' : 'none';\n\t  document.querySelector('.tax-line').style.display     = showPro ? 'block' : 'none';\n\n\t  \/\/ Vul bedrijfsnaam en tax_\u200bnummer\n\t  const cn = localStorage.getItem('msf_company_name') || '';\n\t  const tn = localStorage.getItem('msf_tax_number')   || '';\n\t  document.querySelectorAll('.company_name_preview').forEach(e => e.textContent = cn);\n\t  document.querySelectorAll('.tax_number_preview').forEach(e => e.textContent   = tn);\n\n\t  \/\/ Vul voornaam, achternaam, e-mail, telefoon, boodschap\n\t  const fn = localStorage.getItem('msf_first_name') || '';\n\t  const sn = localStorage.getItem('msf_surname')    || '';\n\t  const em = localStorage.getItem('msf_email')      || '';\n\t  const ph = localStorage.getItem('msf_phone')      || '';\n\t  const ms = localStorage.getItem('msf_message')    || '';\n\t  document.querySelectorAll('.first_name_preview').forEach(e => e.textContent = fn || 'Not entered');\n\t  document.querySelectorAll('.surname_preview').forEach(e    => e.textContent = sn || 'Not entered');\n\t  document.querySelectorAll('.email_preview').forEach(e      => e.textContent = em || 'Not entered');\n\t  document.querySelectorAll('.phone_preview').forEach(e      => e.textContent = ph || 'Not entered');\n\t  document.querySelectorAll('.message_preview').forEach(e    => e.textContent = ms || '\u2013 geen boodschap \u2013');\n\t}\n\n\n  \/\/ =======================================================\n  \/\/ J. Alles updaten bij laden\n  \/\/ =======================================================\n  function loadFormValuesFromStorage() {\n    \/\/ Stap 1\n    loadStep1ValuesFromStorage();\n    initStep1Listeners();\n\n    \/\/ Stap 2\n    loadStep2ValuesFromStorage();\n    initStep2Listeners();\n    updateStep2PreviewCards();\n\n    \/\/ Stap 3\n    loadStep3ValuesFromStorage();\n    initStep3Listeners();\n    updateStep3PreviewCards();\n\n    \/\/ Stap 4\n    loadStep4ValuesFromStorage();\n    initStep4Listeners();\n    updateStep4PreviewCards();\n  }\n\n  function updateAllPreviews() {\n    updateStep1PreviewCards();\n    updateStep2PreviewCards();\n    updateStep3PreviewCards();\n    updateStep4PreviewCards();\n  }\n\n\n  \/\/ =======================================================\n  \/\/ K. Initialisatie bij page load\n  \/\/ =======================================================\n  document.addEventListener('DOMContentLoaded', () => {\n\n    \/\/ 1) Step Indicators & Hash\n    \/\/initStepIndicators();\n    \/\/ 2) Lees hash (#step0\u2026#step4) indien aanwezig\n    const hash = window.location.hash;\n    if (hash && hash.startsWith('#step')) {\n      const idx = parseInt(hash.replace('#step', ''), 10);\n      if (!isNaN(idx) && idx >= 0 && idx < formSteps.length) {\n        currentStep = idx;\n      }\n    }\n    showStep(currentStep);\n\n    \/\/ 3) Laad alle opgeslagen waarden & listeners\n    loadFormValuesFromStorage();\n\n    \/\/ 4) Init \u201cMeer laden\u201d-knop (stap 2)\n    initLoadMoreButton();\n\n    \/\/ 5) Initialiseer Flatpickr, tijdselect en mobiliteit (stap 3) \u2192 zat al in initStep3Listeners()\n\n    \/\/ 6) Update alle previews (indien terug navigeren)\n    updateAllPreviews();\n\t  \n\t  (function(){\n\t\t\tconst carSelect = document.getElementById('car_type');\n\t\t\tif (!carSelect) return;\n\n\t\t\tfunction filterInterventions(){\n\t\t\t  const selected = carSelect.value;\n\t\t\t  document.querySelectorAll('.interventie-optie').forEach(label => {\n\t\t\t\tconst hl = label.dataset.highlights.split(' ').filter(s => s);\n\t\t\t\tif (selected && hl.indexOf(selected) === -1) {\n\t\t\t\t  label.style.display = 'none';\n\t\t\t\t  const cb = label.querySelector('input[type=\"checkbox\"]');\n\t\t\t\t  if (cb) cb.checked = false;\n\t\t\t\t} else {\n\t\t\t\t  label.style.display = '';\n\t\t\t\t}\n\t\t\t  });\n\t\t\t}\n\n\t\t\t\/\/ bind en init\n\t\t\tcarSelect.addEventListener('change', filterInterventions);\n\t\t\tfilterInterventions();\n\t\t  })();\n\t  \n\t  \n  });\n\n\t\n\tfunction initStep4FieldSync() {\n  const ids = [\n    'cf_company_name_formstep',\n    'cf_tax_number_formstep',\n    'cf_first_name_formstep',\n    'cf_surname_formstep',\n    'cf_email_formstep',\n    'cf_phone_formstep',\n    'cf_message_formstep',\n    'cf_create_account_formstep',\n    'cf_agree_policy_formstep'\n  ];\n  ids.forEach(id => {\n    const el = document.getElementById(id);\n    if (!el) return;\n    el.addEventListener('input', syncAllValuesToCF7);\n    el.addEventListener('change', syncAllValuesToCF7);\n  });\n}\n\t\n\n\t\n\tdocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ \u2026 je bestaande initialisaties voor stap 1\u20133 \u2026\n  initStep4FieldSync();\n\n  \/\/ \u201cMeer laden\u201d knop, flatpickr, enz. \u2026\n\n  const cf7Button = document.getElementById('cf7SubmitButton');\n  if (cf7Button) {\n    cf7Button.addEventListener('click', function(e) {\n      e.preventDefault();\n      \/\/ Zorg dat alle waarden in CF7-velden staan\n      syncAllValuesToCF7();\n      \/\/ Vind het CF7\u2010formulier in de DOM:\n      const cf7Form = document.querySelector('#cf7-wrapper form.wpcf7-form');\n      if (cf7Form) {\n        \/\/ klik op het verborgen CF7-submit\u2010veld:\n        cf7Form.querySelector('input[type=\"submit\"]').click();\n      }\n    });\n  }\n});\n\n\t\n\t\n\tdocument.addEventListener('wpcf7invalid', function(e) {\n  showStep(3); \/\/ blijf in stap 4 als validatie fout gaat\n}, false);\n\ndocument.addEventListener('wpcf7spam', function(e) {\n  showStep(3);\n}, false);\n\ndocument.addEventListener('wpcf7mailfailed', function(e) {\n  alert('Er is een fout opgetreden bij het verzenden. Probeer later opnieuw.');\n  showStep(3);\n}, false);\n\t\n\t\n\t\n\t\n\t\n  \/\/ =======================================================\n  \/\/ L. Verzenden naar CF7 & Bevestiging\n  \/\/ =======================================================\n  function verzendNaarCF7EnBevestig(event) {\n    event.preventDefault();\n\n    \/\/ MAP Multi-Step \u2192 CF7: ID\u2019s\n    const mapping = [\n      { msf: 'license_plate',       cf7: 'cf7_license_plate' },\n      { msf: 'mileage',             cf7: 'cf7_mileage' },\n\t  { msf: 'chassis',             cf7: 'cf7_chassis' },\n      { msf: 'car_type',            cf7: 'cf7_car_type' },\n      { msf: 'brand_select',        cf7: 'cf7_brand' },\n      { msf: 'datepicker',          cf7: 'cf7_date' },\n      { msf: 'selectedTimeInput',   cf7: 'cf7_time' },\n      { msf: 'mobility_option',     cf7: 'cf7_mobility_option' },\n      { msf: 'first_name',          cf7: 'cf7_first_name' },\n      { msf: 'surname',             cf7: 'cf7_surname' },\n      { msf: 'email_formstep',      cf7: 'cf7_email' },\n      { msf: 'phone',               cf7: 'cf7_phone' },\n      { msf: 'message_formstep',    cf7: 'cf7_message' },\n      \/\/ \u201cuser_type\u201d \u2192 CF7\u2010radio\n      { msf: 'userTypeHolder',      cf7: 'cf7_user_type' },     \n      { msf: 'company_name',        cf7: 'cf7_company_name' },\n      { msf: 'tax_number',          cf7: 'cf7_tax_number' }\n    ];\n\n    \/\/ Waarden kopi\u00ebren\n    mapping.forEach(pair => {\n      const msfEl = document.getElementById(pair.msf);\n      const cf7El = document.getElementById(pair.cf7);\n      if (!msfEl || !cf7El) return;\n\n      \/\/ Radio \u201cuser_type\u201d: we slaan de waarde (checked radio) in een hidden <input id=\"userTypeHolder\">\n      if (pair.msf === 'userTypeHolder') {\n        \/\/ Bepaal welke radio \u201cuser_type\u201d is aangevinkt\n        const checkedRadio = document.querySelector('input[name=\"user_type\"]:checked');\n        cf7El.value = checkedRadio ? checkedRadio.value : '';\n      } else {\n        cf7El.value = msfEl.value || '';\n      }\n    });\n\t  \n\t  const rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  const cf7Rent = document.getElementById('cf7_renting_customer');\n\t  if (rent && cf7Rent) {\n\t\tcf7Rent.value = rent.value;\n\t  }\n\n    \/\/ Inventory (max. 3) \u2192 bundle als comma\u2010string\n    const checkedInterventies = Array.from(\n      document.querySelectorAll('.inventory-checkbox:checked')\n    ).map(cb => cb.dataset.title.trim());\n    const invField = document.getElementById('cf7_inventory_ids');\n    if (invField) {\n      invField.value = checkedInterventies.join(', ');\n    }\n\n    \/\/ \u201cMaak account\u201d\u2010checkbox \u2192 CF7\n    const makeAccountChecked = !!document.getElementById('create_account_formstep')?.checked;\n    document\n\t  .querySelectorAll('#hidden-cf7 input[name=\"create_account[]\"]')\n\t  .forEach((cb) => {\n\t\tcb.checked = makeAccountChecked;\n\t  });\n\n    \/\/ \u201cPrivacy policy\u201d verplicht \u2192 CF7\n    const cf7Agree = document.getElementById('cf7_agree_policy');\n    if (cf7Agree) {\n      cf7Agree.checked = true;\n    }\n\n    \/\/ Submit het verborgen CF7-formulier\n    const cf7Form = document.querySelector('#hidden-cf7 form');\n    if (cf7Form) {\n  const cf7SendBtn = cf7Form.querySelector('input[type=\"submit\"]');\n  if (cf7SendBtn) {\n    cf7SendBtn.click();\n  }\n}\n  }\n\n  \/\/ Bind MSF\u2010submit (indien het formulier bestaat)\n \/* document.addEventListener('DOMContentLoaded', function () {\n    const msfForm = document.getElementById('multiStepForm');\n    if (msfForm) {\n      msfForm.addEventListener('submit', verzendNaarCF7EnBevestig);\n    }\n  });*\/\n\t\n\t\n\tdocument.addEventListener('wpcf7mailsent', function(event) {\n\n\t\tconst MIJN_CF7_ID = 2709;\n\t\tif (event.detail.contactFormId === MIJN_CF7_ID) {\n\t\t  const laatsteStapIndex = formSteps.length - 1; \n\t\t  window.location.hash = 'step' + laatsteStapIndex;\n\t\t  showStep(laatsteStapIndex);\n\n\t\t  if (window.confetti) {\n\t\t\tconfetti({\n\t\t\t  particleCount: 100,\n\t\t\t  spread: 70,\n\t\t\t  origin: { y: 0.6 }\n\t\t\t});\n\t\t  }\n\t\t}\n\t  }, false);\n\t\n\tfunction clearMSFData() {\n\t  \/\/ 1) localStorage keys verwijderen\n\t  const keys = [\n\t\t'msf_license_plate',\n\t\t'msf_mileage',\n\t\t'msf_chassis',\n\t\t'msf_car_type',\n\t\t'msf_brand',\n\t\t'msf_interventies',\n\t\t'msf_date',\n\t\t'msf_time',\n\t\t'msf_renting_customer',\n\t\t'msf_mobility_option',\n\t\t'msf_user_type',\n\t\t'msf_company_name',\n\t\t'msf_tax_number',\n\t\t'msf_first_name',\n\t\t'msf_surname',\n\t\t'msf_email',\n\t\t'msf_phone',\n\t\t'msf_message',\n\t\t'msf_create_account',\n\t\t'msf_agree_policy'\n\t  ];\n\t  keys.forEach(k => localStorage.removeItem(k));\n\n\t  \/\/ 2) Reset alle invoervelden in de multi-step form\n\t  const form = document.getElementById('multiStepForm');\n\t  if (form) {\n\t\tform.reset();\n\t  }\n\n\t  \/\/ 3) Zet alle interventie-checkboxen terug naar \u201cniet\u2010selected\u201d\n\t  document.querySelectorAll('.inventory-checkbox').forEach(cb => {\n\t\tcb.checked = false;\n\t\tcb.disabled = false;\n\t\tconst lab = cb.closest('label');\n\t\tif (lab) {\n\t\t  lab.classList.remove('selected');\n\t\t  lab.style.opacity = '1';\n\t\t}\n\t  });\n\n\t  \/\/ Let op: n\u00edet de preview\u2010velden (license_plate_preview, mileage_preview, etc.) leegschrijven!\n\t}\n\t\n\twindow.addEventListener('hashchange', function() {\n\t  const h = window.location.hash;\n\t  if (h.startsWith('#wpcf7')) {\n\t\twindow.location.hash = 'step' + currentStep;\n\t  }\n\t});\n\t\n\t\/\/ ====================\n  \/\/ Z. Confetti-functie\n  \/\/ ====================\n  function launchConfetti() {\n    \/\/ Zorg dat het confetti-effect \u00e9\u00e9n keer start\n    \/\/ Je kunt de opties naar wens aanpassen (aantal deeltjes, snelheid, kleuren, enz.).\n    confetti({\n      particleCount: 150,\n      spread: 70,\n      origin: { y: 0.6 }\n    });\n  }\n\t\n\t\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 1) syncAllValuesToCF7: kopie\u0308er alle waarden uit jouw multi-step\u2010velden \n  \/\/    naar de corresponderende CF7\u2010velden (hidden inputs).\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function syncAllValuesToCF7() {\n    \/\/ Helper\u2010functies om enkel te schrijven als het element bestaat\n    function setIfExists(id, value) {\n      const el = document.getElementById(id);\n      if (el) el.value = value;\n    }\n    function checkIfExists(id, checked) {\n      const el = document.getElementById(id);\n      if (el) el.checked = checked;\n    }\n\n    \/\/ \u2014 Stap 1 (Wagen) \u2014\n    const lp = document.getElementById('license_plate')?.value || '';\n    const km = document.getElementById('mileage')?.value || '';\n\tconst ch = document.getElementById('chassis')?.value || '';\n    const ct = document.getElementById('car_type')?.value || '';\n    const br = document.getElementById('brand_select')?.value || '';\n\n    \/\/ \u2014 Stap 2 (Interventies) \u2014\n    const checked = Array.from(document.querySelectorAll('.inventory-checkbox:checked'));\n\tconst names = checked.map(cb => cb.dataset.title.trim()).join(', ');\n\tconst ids = checked.map(cb => cb.value).join(',');\n\n    \/\/ \u2014 Stap 3 (Datum, Tijd & Mobility) \u2014\n    const dt = document.getElementById('datepicker')?.value || '';\n    const tm = document.getElementById('selectedTimeInput')?.value || '';\n\tconst rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n    const mo = document.getElementById('mobility_option')?.value || '';\n\n    \/\/ \u2014 Stap 4 (Persoonsgegevens) \u2014\n    const ut = document.querySelector('input[name=\"user_type\"]:checked')?.value || '';\n    const cn = document.getElementById('company_name_formstep')?.value || '';\n    const tn = document.getElementById('tax_number_formstep')?.value || '';\n    const fn = document.getElementById('first_name_formstep')?.value || '';\n    const sn = document.getElementById('surname_formstep')?.value || '';\n    const em = document.getElementById('email_formstep')?.value || '';\n    const ph = document.getElementById('phone_formstep')?.value || '';\n    const ms = document.getElementById('message_formstep')?.value || '';\n    const ca = !!document.getElementById('create_account_formstep')?.checked;\n    const ap = document.getElementById('agree_policy_formstep')?.checked;\n\n    \/\/ \u2014 Vul de corresponderende CF7-velden (pas deze IDs aan naar jouw CF7-shortcode) \u2014\n    setIfExists('cf7_license_plate', lp);\n    setIfExists('cf7_mileage', km);\n\tsetIfExists('cf7_chassis', ch);\n    setIfExists('cf7_car_type', ct);\n    setIfExists('cf7_brand', br);\n    setIfExists('cf7_interventies', names);\n\tsetIfExists('cf7_inventory_ids', ids);\n    setIfExists('cf7_date', dt);\n    setIfExists('cf7_time', tm);\n\tsetIfExists('cf7_renting_customer', rent ? rent.value : '');\n    setIfExists('cf7_mobility_option', mo);\n    setIfExists('cf7_user_type', ut);\n    setIfExists('cf7_company_name', cn);\n    setIfExists('cf7_tax_number', tn);\n    setIfExists('cf7_first_name', fn);\n    setIfExists('cf7_surname', sn);\n    setIfExists('cf7_email', em);\n    setIfExists('cf7_phone', ph);\n    setIfExists('cf7_message', ms);\n    document\n  .querySelectorAll('#hidden-cf7 input[name=\"create_account[]\"]')\n  .forEach((cb) => {\n    cb.checked = ca;\n  });\n    checkIfExists('cf7_agree_policy', ap);\n  }\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 2) \u201cLive\u201d listeners: zodra een bronveld verandert, roep direct syncAllValuesToCF7() aan\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function initCF7SyncListeners() {\n    \/\/ Helper: registeer evenementlistener als element bestaat\n    function onEvent(id, eventName) {\n      const el = document.getElementById(id);\n      if (el) el.addEventListener(eventName, syncAllValuesToCF7);\n    }\n\n    \/\/ --- Stap 1: tekst en select velden ---\n    onEvent('license_plate', 'input');\n    onEvent('mileage', 'input');\n    onEvent('car_type', 'change');\n    onEvent('brand_select', 'change');\n\n    \/\/ --- Stap 2: interventie-checkboxes ---\n    document.querySelectorAll('.inventory-checkbox').forEach(cb => {\n      cb.addEventListener('change', syncAllValuesToCF7);\n    });\n\n    \/\/ --- Stap 3: datum & tijd & mobiliteit ---\n    \/\/ Flatpickr selecteert datum, deze gebruikt onChange; we luisteren op het verborgen <input> zelf:\n    onEvent('datepicker', 'change');          \/\/ indien je Flatpickr onchange naar dat input zet\n    onEvent('selectedTimeInput', 'change');    \/\/ verborgen tijd-input\n\tdocument.querySelectorAll('input[name=\"renting_customer\"]').forEach(radio => {\n\t  radio.addEventListener('change', syncAllValuesToCF7);\n\t});\n    onEvent('mobility_option', 'change');\n\n    \/\/ Tijd-knoppen:\n    document.querySelectorAll('.slots button').forEach(btn => {\n      btn.addEventListener('click', () => {\n        \/\/ nadat tijd in het verborgen veld is gezet, sync:\n        setTimeout(syncAllValuesToCF7, 0);\n      });\n    });\n\n    \/\/ --- Stap 4: persoonsgegevens ---\n    onEvent('company_name_formstep', 'input');\n    onEvent('tax_number_formstep', 'input');\n    onEvent('first_name_formstep', 'input');\n    onEvent('surname_formstep', 'input');\n    onEvent('email_formstep', 'input');\n    onEvent('phone_formstep', 'input');\n    onEvent('message_formstep', 'input');\n    \/\/ radio buttons:\n    document.querySelectorAll('input[name=\"user_type\"]').forEach(radio => {\n      radio.addEventListener('change', syncAllValuesToCF7);\n    });\n    \/\/ checkboxes in stap 4:\n    onEvent('create_account_formstep', 'change');\n    onEvent('agree_policy_formstep', 'change');\n  }\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 3) Wanneer CF7\u2010formulier er is, onderscheppen we ook 'submit' om zeker alles mee te geven\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  document.addEventListener('DOMContentLoaded', function() {\n    \/\/ 3a) start de live\u2010listeners\n    initCF7SyncListeners();\n    \/\/ 3b) onderschep CF7 submit\n    const cf7Wrapper = document.getElementById('hidden-cf7');\n    if (!cf7Wrapper) return;\n    setTimeout(() => {\n      const cf7Form = cf7Wrapper.querySelector('form.wpcf7-form');\n      if (!cf7Form) return;\n      cf7Form.addEventListener('submit', function() {\n        syncAllValuesToCF7();\n      });\n    }, 200);\n  });\n\n\n  function onStepChange(newStepIndex) {\n    \/\/ Als we net Stap 4 hebben ingevuld en op Next klikken:\n    if (newStepIndex === 4) {\n      \/\/ Eerst waarden synchroniseren naar CF7\n      syncAllValuesToCF7();\n      \/\/ Scrollen naar het verborgen CF7-formulier (optioneel)\n      const cf7Anchor = document.getElementById('hidden-cf7');\n      if (cf7Anchor) {\n        cf7Anchor.scrollIntoView({ behavior: 'smooth' });\n      }\n    }\n    \/\/ De rest van je bestaande onStepChange-logica (bv. validatie per stap) blijft ongewijzigd.\n  }\n\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 3) CF7-submit-event onderscheppen en w\u00e9\u00e9r syncAllValuesToCF7 aanroepen\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  document.addEventListener('DOMContentLoaded', function() {\n    const cf7Wrapper = document.getElementById('hidden-cf7');\n    if (!cf7Wrapper) return;\n\n    \/\/ Wacht kort tot CF7 zijn form heeft gegenereerd\n    setTimeout(() => {\n      const cf7Form = cf7Wrapper.querySelector('form.wpcf7-form');\n      if (!cf7Form) return;\n\n      cf7Form.addEventListener('submit', function(e) {\n        syncAllValuesToCF7();\n        \/\/ Daarna laat CF7 gewoon verder verzenden\n      });\n    }, 200);\n  });\n<\/script>\n\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n  \/\/ TIJDBUTTONS IN DE RECHTERKOLOM\n  const timeButtons = document.querySelectorAll('#timeColumn .slots button');\n  timeButtons.forEach(btn => {\n    btn.addEventListener('click', () => {\n      \/\/ Verwijder .active van alle knoppen\n      timeButtons.forEach(b => b.classList.remove('active'));\n      \/\/ Voeg .active toe aan de geklikte knop\n      btn.classList.add('active');\n      \/\/ Schrijf de gekozen tijd weg in het verborgen input-veld\n      const gekozen = btn.getAttribute('data-time');\n      document.getElementById('selectedTimeInput').value = gekozen;\n      localStorage.setItem('msf_time', gekozen);\n\n      \/\/ Update preview in stap 4\/5\n      const previewTime = document.getElementById('selected_time');\n      if (previewTime) previewTime.textContent = gekozen || 'Not selected';\n    });\n  });\n\n  \/\/ 3) LAAD EERDERE WAARDEN UIT localStorage\n  const storedDate = localStorage.getItem('msf_date');\n  const storedTime = localStorage.getItem('msf_time');\n  if (storedDate) {\n    \/\/ Stel de datum in Flatpickr in\n    const fpInstance = document.querySelector('#datepicker')._flatpickr;\n    fpInstance.setDate(storedDate, true);\n  }\n  if (storedTime) {\n    \/\/ Markeer de juiste tijdknop\n    const knop = document.querySelector(\n      `#timeColumn .slots button[data-time=\"${storedTime}\"]`\n    );\n    if (knop) knop.classList.add('active');\n    document.getElementById('selectedTimeInput').value = storedTime;\n  }\n});\n\t\n\t\/\/ pak je form\n\/*const msfForm = document.getElementById('multiStepForm');\nmsfForm.addEventListener('submit', function(e) {\n  \/\/ all\u00e9\u00e9n stap 3 (index 3) validatie\n  if (currentStep === 3) {\n    \/\/ verwijder oude foutmeldingen\n    document.querySelectorAll('.msf-error').forEach(el => el.remove());\n\n    let ok = true;\n    \/\/ veld-validaties\n    ['first_name_formstep','surname_formstep','email_formstep']\n      .forEach(id => {\n        const el = document.getElementById(id);\n        if (!el.value.trim()) {\n          el.insertAdjacentHTML('afterend',\n            '<div class=\"msf-error\">Dit veld is verplicht<\/div>'\n          );\n          ok = false;\n        }\n      });\n\n    \/\/ privacy checkbox\n    const agreeEl = document.getElementById('agree_policy_formstep');\n    if (!agreeEl.checked) {\n      const wrapper = agreeEl.closest('.checkbox-container');\n      wrapper.insertAdjacentHTML('beforeend',\n        '<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>'\n      );\n      ok = false;\n    }\n\n    if (!ok) {\n      e.preventDefault();      \/\/ formulier niet versturen\n      \/\/ blijf op stap 3\n      showStep(3);\n    }\n  }\n});*\/\n\t\n\tdocument.getElementById('msfFinalBtn').addEventListener('click', function() {\n  \/\/ eerst uitvoeren wat nextStep() doet voor stap 3 \u2192 privacy-validatie\n  \/\/ maar in plaats van showStep(4), doen we nu de submit naar CF7\n\n  \/\/ 1) run je bestaande validatie voor currentStep===3:\n  let ok = true;\n  document.querySelectorAll('.msf-error').forEach(e=>e.remove());\n  ['first_name_formstep','surname_formstep','email_formstep'].forEach(id=>{\n    const el=document.getElementById(id);\n    if(!el.value.trim()){\n      el.insertAdjacentHTML('afterend','<div class=\"msf-error\">Dit veld is verplicht<\/div>');\n      ok=false;\n    }\n  });\n  const agreeEl = document.getElementById('agree_policy_formstep');\n  if(!agreeEl.checked){\n    agreeEl.closest('.checkbox-container')\n      .insertAdjacentHTML('beforeend','<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>');\n    ok=false;\n  }\n  if(!ok){\n    showStep(3);\n    return;\n  }\n\n  \/\/ 2) als alles ok is: syncAllValuesToCF7() \u00e9n trigger CF7\n  syncAllValuesToCF7();\n  const cf7Form = document.querySelector('#hidden-cf7 form');\n  cf7Form.querySelector('input[type=\"submit\"]').click();\n});\n\t\n\tdocument.addEventListener('DOMContentLoaded', function(){\n\t  const emailEl    = document.getElementById('email_formstep');\n\t  const caContainer= document.getElementById('ca-container');\n\t  const haveAcc    = document.getElementById('have-account-container');\n\t  const createCb   = document.getElementById('create_account_formstep');\n\t  const openBtns  = document.querySelectorAll('.msf-open-login');\n\t  const closeBtn   = document.getElementById('msf-close-login');\n\t  const modal      = document.getElementById('msf-login-modal');\n\t\t\n\n\t  \/\/ 1) Check bij blur of e-mail al bestaat\n\t  emailEl.addEventListener('blur', () => {\n\t\tconst email = emailEl.value.trim();\n\t\tif (!email) return;\n\t\tconst data = new URLSearchParams({ action:'check_email_exists', email });\n\t\tfetch('https:\/\/miers.be\/wp-admin\/admin-ajax.php', {\n\t\t  method:'POST',\n\t\t  headers:{'Content-Type':'application\/x-www-form-urlencoded'},\n\t\t  body: data.toString()\n\t\t})\n\t\t.then(r=>r.json())\n\t\t.then(res=>{\n\t\t  if (res.success && res.data.exists) {\n\t\t\t\/\/ verberg \u201cMaak account\u201d en toon login-link\n\t\t\tcaContainer.style.display   = 'none';\n\t\t\thaveAcc.style.display       = 'block';\n\t\t\tcreateCb.checked            = false;\n\t\t  } else {\n\t\t\tcaContainer.style.display   = '';\n\t\t\thaveAcc.style.display       = 'none';\n\t\t  }\n\t\t});\n\t  });\n\n\t  openBtns.forEach(btn => {\n\t\tbtn.addEventListener('click', function(e) {\n\t\t  e.preventDefault();\n\t\t  modal.classList.add('open');\n\t\t});\n\t  });\n\n\t  closeBtn.addEventListener('click', function() {\n\t\tmodal.classList.remove('open');\n\t  });\n\t});\n\t\n\tdocument.addEventListener('wpcf7beforesubmit', function(event) {\n\t  var rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  var hidden = event.target.querySelector('input[type=\"hidden\"][name=\"renting_customer\"]');\n\t  if (rent && hidden) {\n\t\thidden.value = rent.value;\n\t  }\n\t}, false);\n\n\tdocument.addEventListener('DOMContentLoaded', function () {\n  const cf7Root = document.getElementById('hidden-cf7');\n  if (!cf7Root) return;\n\n  const cf7Form = cf7Root.querySelector('form.wpcf7-form');\n  if (!cf7Form) return;\n\n  if (!cf7Form.id) {\n    cf7Form.id = 'cf7-form-2709';\n  }\n  const fileInput = cf7Form.querySelector('input[type=\"file\"]#bestanden');\n  if (!fileInput) return;\n\n  const wrap = fileInput.closest('.wpcf7-form-control-wrap');\n  if (!wrap) return;\n\n  const slot = document.getElementById('msf-upload-slot');\n  if (!slot) return;\n  slot.appendChild(wrap);\n  fileInput.setAttribute('form', cf7Form.id);\n\n  if (!slot.querySelector('.msf-upload-title')) {\n    const title = document.createElement('div');\n    title.className = 'msf-upload-title';\n    title.style.marginTop = '12px';\n    title.style.fontWeight = '600';\n    title.textContent = \"Foto's\/bestanden toevoegen\";\n    slot.prepend(title);\n  }\n});\n<\/script>\n\n\n\n\n<style>\n  option {\n    color: #0C5453;\n}\n  \n  \n  \n  .flatpickr-rContainer {\n    display: inline-grid !important\n;\n    padding: 0;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n  \n  \n  \n  \n  .slots button\nSpecificity: (0,1,1)\n {\n    WIDTH: 20% ! IMPORTANT;\n}\n  \n  \n  \n  .flatpickr-rContainer {\n    width: 309px ! IMPORTANT;\n}\n  \n  \n  \n  span.flatpickr-day  {\n    background-color: #e6e6e6;\n    color: #000;\n}\n  \n  span.flatpickr-day.nextMonthDay {\n    background-color: #e6e6e6;\n    color: #000;\n}\n  \n  \n  \n  \n\n  span.flatpickr-day.selected {\n    background-color: #0C5453 !important;\n}\n  \n  \n  \n  .preview {\n  \n    padding: 10px;\n    border-radius: 10px;\n \n}\n  \n  \n  p {\n    padding-bottom: 0px !important;\n}\n  \n  \n  form.register {\n    text-align: left;\n}\n .et_builder_inner_content {\n    z-index: inherit !important;\n}\n.et_pb_column {  \n    z-index: auto !important;    \n}\n  \n  \n  \n  \n  \n  \n  \n  .form-buttons input[type=\"submit\"] {\n    width: 20% !important;\n    color: #ffffff;\n    background-color: #0C5453;\n}\n  .f-123 h3 {\n    font-size: 20px !important;\n    text-align: left !important;\n}\n  \n  .f-123 label.selected {\n    background-color:  #0C5453;;\n  }\n\n.f-123 input[type=\"checkbox\"] {\n    display:none;\n}\n  .f-123 label.selected img {\n    filter: brightness(0) invert(1); \/* Makes image appear white *\/\n  }\n<\/style>\n\n<style>\n   \n \/* Step Indicator *\/\n.step-container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    border-bottom: 2px solid #ccc;\n    margin-bottom: 20px;\n}\n\n.step {\n    flex: 1 1 20%;\n    text-align: center;\n    padding: 10px;\n    color: gray;\n    font-weight: bold;\n    display: flex\n;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    font-size: 14px;\n    border: 1px solid #ccc;\n}\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n.f-123 {\n  background-color: #ffffff;\n  \n  flex: 0 0 60%;\n  box-sizing: border-box;\n}\n\t.f-123.interventies {\n  background-color: transparent!important;\n\t\t}\n\ninput[type=\"number\"] {\n    padding: 18px !important;\n\tfont-size:16px!important;\n}\n\n.form-step input, .form-step select, .form-step textarea {\n    width: 100%;\n    padding: 10px;\n    margin: 10px 7px;\n    border-radius: 5px;\n    border: 1px solid #ccc;\n    box-sizing: border-box;\n}\nlabel {\n    width: 48%;\n  color: #0C5453;\n}\n.f-123 {\n    padding: 18px 18px;\n    border-radius: 10px;\n}\n.f-124 {\n    padding: 18px 18px;\n    border-radius: 10px;\n}\nform#multiStepForm h3 {\n    text-align: center;\n    padding: 20px;\n    font-size: 30px;\n    color: #0C5453;\n}\n.Inventory-2 {\n  display: flex;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 20px;\n  margin-top: 20px;\n}\n\n.Inventory-2 label {\n  \/*display: flex;*\/\n  flex-direction: column;\n  align-items: center;\n  border: 2px solid #0C5453;\n  border-radius: 16px;\n  padding: 20px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  background: #fff;\n}\n\n.Inventory-2 label:hover {\n  box-shadow: 0 0 10px rgba(0, 181, 165, 0.2);\n}\n\n\n\n.Inventory-2 input[type=\"checkbox\"]:checked + img,\n.Inventory-2 input[type=\"checkbox\"]:checked ~ img {\n  filter: brightness(0) invert(1);\n}\n\n.Inventory-2 input[type=\"checkbox\"]:checked ~ span {\n  color: #fff;\n}\n\n.Inventory-2 input[type=\"checkbox\"]:checked ~ label {\n  background-color: #0C5453;\n  color: white;\n  border-color: #0C5453;\n}\n\n\n.Inventory-2 span {\n  font-size: 16px;\n  color: #0C5453;\n  font-weight: 500;\n  transition: color 0.3s ease;\n}\n\n.step.completed {\n  color: #00bcd4;\n}\n\n.step.active {\n  border-bottom: 3px solid #0C5453;\n  color: #0C5453 !important;\n  \n}\n\n\n\n\/* Form Step *\/\n.form-step {\n  display: none;\n  background: #f6f6f6;\n  padding: 20px;\n  border-radius: 10px;\n  \n}\n\n.form-step.active {\n  display: block;\n}\n\n.form-step input,\n.form-step select,\n.form-step textarea {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  box-sizing: border-box;\n}\n\n.form-buttons {\n  text-align: right;\n  margin-top: 15px;\n}\n\n.form-buttons button {\n  padding: 10px 20px;\n  background-color: #0C5453;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  margin-left: 10px;\n}\n.location-card {\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 15px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n  justify-content: space-between;\n \u00a0gap: 15px;\n\tmargin-bottom:10px;\n}\n\n\n\n.location-details {\n  flex-grow: 1;\n  color: #333;\n  font-size: 14px;\n}\n\n.location-details strong {\n  color: #000;\n}\n\n.location-edit {\n  color: #b0b0b0;\n  font-size: 14px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.Inventory-2 input[type=\"checkbox\"]:checked + img, .Inventory-2 input[type=\"checkbox\"]:checked ~ img {\n    filter: contrast(-1.5) !important;\n}\n.Inventory-2 label {\n    width: 30%;\n}\nspan.mk-098 {\n    display: block;\n}\n.calendar-container {\n  display: flex;\n  gap: 40px;\n  margin-top: 20px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n#datepicker {\n  border: none;\n}\n\n.time-slots {\n  display: none;\n}\n\n.time-slots p {\n  margin-bottom: 10px;\n  font-weight: 600;\n}\n\n.slots {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.slots button {\n  border: 1px solid #00a89c;\n  background: white;\n  color: #00a89c;\n  border-radius: 20px;\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n\n.slots button.active,\n.slots button:hover {\n  background-color: #00a89c;\n  color: white;\n}\n.flatpickr-calendar.inline {\n    width: 490px;\n}\n.flatpickr-rContainer {\n    width: 490px;\n}\n.flatpickr-days {\n    width: 490px;\n}\n.radio-2 label {\n  display: inline-block;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.radio-2 input[type=\"radio\"] {\n  margin-right: 5px;\n}\ninput[type=\"radio\"] {\n    width: auto ! IMPORTANT;\n}\ninput[type=\"checkbox\"] {\n    width: auto !important;\n    margin-right: 10px;\n}\n.Inventory-2 input[type=\"checkbox\"] {\n    width: 100% !important;\n}\n\/* Responsive Styles *\/\n@media (max-width: 768px) {\n  .step {\n    flex: 1 1 50%;\n    font-size: 13px;\n  }\n\n  .form-buttons {\n    text-align: center;\n  }\n\n  .form-buttons button {\n    margin-top: 10px;\n    width: 100%;\n  }\n}\n@media (max-width: 600px) {\n  .location-card {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .location-edit {\n    align-self: flex-end;\n    margin-top: 10px;\n  }\n}\n@media (max-width: 480px) {\n  .step {\n    flex: 1 1 100%;\n    font-size: 12px;\n    padding: 8px;\n  }\n\n  .form-step {\n    padding: 15px;\n  }\n\n  .form-step input,\n  .form-step select,\n  .form-step textarea {\n    padding: 8px;\n    font-size: 14px;\n  }\n\n  .form-buttons button {\n    font-size: 14px;\n    padding: 10px;\n  }\n}\n\n   p#tr3 {\n    border: solid 1px #0C5453;\n    padding: 20px!important;\n    border-radius: 20px;\n    color: #0C5453;\n    font-weight: 400;\n\t   margin-bottom:20px;\n\t   text-align:left;\n}\n  \n  \n\n  \n  \n  .flatpickr-innerContainer {\n    display: flow ! IMPORTANT;   \n}\n  .flatpickr-weekdays {\n    WIDTH: 63% ! IMPORTANT;\n}\n  \n  div#b3 label {\n    border: solid 1px #0C5453;\n    padding: 10px;\n    border-radius: 10px;\n    color: #0C5453;\n}\n  div#b3 input[type=\"radio\"] {\n    accent-color: #0C5453;\n}\n  \n  \n  .last-3 {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    font-family: sans-serif;\n  }\n\n  .type-klant-label {\n    font-weight: 600;\n    color: #2da49c;\n        width: 24%;\n  }\n\n  .radio-2 {\n    display: flex;\n    gap: 1rem;\n    align-items: center;\n    width: 80%;\n  }\n\n#brand_select.searchable-dropdown {\n  height: 42px !important;\n  box-sizing: border-box;\n}\n\n\n.select2-container--default .select2-selection--single {\n  height: 42px !important;\n  margin-top: 10px !important;\n  box-sizing: border-box;\n}\n\n\n.select2-container--default .select2-selection--single .select2-selection__rendered {\n  line-height: 426px !important;\n}\n\n\n.select2-container--default .select2-selection--single .select2-selection__arrow {\n  height: 42px !important;\n}\n  \n  .hidden-more {\n  display: none;\n}\n  \n  \/* Verberg extra interventies in eerste weergave *\/\n.hidden-more {\n  display: none;\n}\n\n\/* Wanneer een interventie is geselecteerd *\/\n.f-123 label.selected {\n  background-color: #0C5453;\n  color: #fff;\n}\n.f-123 label.selected img {\n  filter: brightness(0) invert(1);\n}\n\n\/* Standaard on\u2010selected labels (om ervoor te zorgen dat de tekst in #0C5453 blijft) *\/\n.f-123 label {\n  color: #0C5453;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Image\u2010transition (altijd aanwezig) *\/\n.Inventory-2 img {\n  transition: filter 0.3s ease;\n}\n\t\n\/* --------------------------------------------------\n   1) Forceer .f-123 en .f-124 in .f-row op 60% \/ 38%\n   -------------------------------------------------- *\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap; \/* indien scherm te smal, stapelen ze onder elkaar *\/\n}\n\n\n\n\/* -------------------------------------------------------\n   2) Maak .Inventory-2 tot flex-wrap: 4 items per rij\n   ------------------------------------------------------- *\/\n.Inventory-2 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  margin-top: 10px;\n}\n\n\/* Elk label neemt ongeveer 25% breedte (minus gap) *\/\n.Inventory-2 label.interventie-optie {\n  flex: 0 0 calc(25% - 20px);\n  max-width: calc(25% - 20px);\n  box-sizing: border-box;\n  \/*display: flex;*\/\n  flex-direction: column;\n  align-items: center;\n  border: 2px solid #0C5453;\n  border-radius: 16px;\n  padding: 20px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  background: #fff;\n}\n\n.Inventory-2 label.interventie-optie:hover {\n  box-shadow: 0 0 10px rgba(0, 181, 165, 0.2);\n}\n\n\/* Standaard: niet\u2010geselecteerde labels *\/\n.f-123 label.interventie-optie {\n  color: #0C5453;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Geselecteerde labels *\/\n.f-123 label.selected {\n  background-color: #0C5453;\n  color: #fff;\n}\n.f-123 label.selected img {\n  filter: brightness(0) invert(1);\n}\n\n\/* Hidden-more: vanaf de 7e in \u201cMeer interventies\u201d *\/\n.hidden-more {\n  display: none;\n}\n\n\/* \u201cMeer laden\u2026\u201d-knop *\/\n.btn-load-more {\n  padding: 8px 24px;\n  background-color: #0C5453;\n  color: #fff;\n  border: 1px solid #0C5453;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n.btn-load-more:hover {\n  background-color: transparent;\n\tcolor: #0C5453;\n}\n\n\/* Image-transition (altijd aanwezig) *\/\n.Inventory-2 img {\n  width: 62.3px;\n  transition: filter 0.3s ease;\n}\n\t\n\t\/* Step 3 *\/\n.kalender {\n\t\tbackground-color: #fff;\n\t\tborder-radius:20px;\n\tpadding:20px;\n\t}\n\t\n\t\n\t\n\t\/* ---------------------------------------------------\n   ALLE KLEUREN & STYLING F\u00d6R FLATPICKR & TIJDSELECTIE\n   --------------------------------------------------- *\/\n\n\/* Container voor kalender + tijd *\/\n.calendar-time-container {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n\/* Linker kolom: de inline Flatpickr *\/\n.calendar-column {\n  flex: 2 1 300px;   \/* minimaal 300px breed *\/\n  position: relative;\/* zodat maand\/jaar-dropdowns linksboven komen *\/\n}\n\n\/* Rechter kolom: tijdselectie *\/\n.time-column {\n  flex: 1 1 150px;   \/* minimaal 150px breed *\/\n  display: none;     \/* pas zichtbaar nadat datum gekozen *\/\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: sans-serif;\n}\n.time-column.visible {\n  display: flex;\n\tmargin:auto;\n}\n\/* \u201cKies eerst een datum\u201d of de gekozen datum *\/\n.selected-date-display {\n  font-size: 16px;\n  color: #0C5453;\n  margin-bottom: 10px;\n  font-weight: bold;\n}\n\n\/* TIJD BUTTONS *\/\n.time-column .slots {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.time-column .slots button {\n  width: 100%;\n  border: 1px solid #888888;\n  background: white;\n  color: #626262;\n  border-radius: 10px;\n  padding: 8px 12px;\n  text-align: center;\n  font-size: 14px;\n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n\tpadding: 1px 30px;\n}\n.time-column .slots button.active,\n.time-column .slots button:hover {\n  background-color: #0C5453;\n  color: white;\n  border-color: #0C5453;\n}\n\n\/* FLATPICKR OVERRIDES *\/\n\/* Verberg standaard input (we tonen alleen inline kalender) *\/\n#datepicker {\n  display: none;\n}\n\n\/* Maak flatpickr inline kalender full-width in container *\/\n.flatpickr-calendar.inline {\n  width: 100% !important;\n  max-width: 420px;        \/* pas eventueel aan *\/\n  border: none;\n  box-shadow: none;\n}\n\n\n\n\/* WEEKDAGEN LIJN (MO, DI, WO, DO, VR, ZA, ZO) *\/\n\/* Onderliggend gebruiken we Flatpickr locale-shorthand. We styleen met groene rand en afgeronde hoeken *\/\n.flatpickr-weekday {\n  font-weight: 600;\n  font-size: 14px!important;\n  color: #0C5453!important;\n  border: 1px solid #0C5453;\n  margin: 2px;\n\twidth: 40px;\n    height: 27px;\n    line-height: 27px!important;\n    text-align: center;\n    margin: 2px!important;\n    border-radius: 10px;\n    background-color: transparent!important;\n\t\n}\n\n\/* DAGEN-REGIO *\/\n.flatpickr-days {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n}\n\n\/* Elke dagcel *\/\n.flatpickr-day {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n  text-align: center;\n  margin: 2px;\n  border: none;\n  border-radius: 10px;   \n  background-color: rgba(136, 136, 136, 0.05)!important; \n  color: #626262;     \n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Niet-selecteerbare (disabled) datums, incl. weekend *\/\n.flatpickr-day.disabled {\n  background-color: #f0f0f0 !important;\n  color: #cccccc !important;\n  cursor: not-allowed;\n}\n\n\/* Hover-effect enkel voor actieve (selecteerbare) dagen *\/\n.flatpickr-day:not(.disabled):hover {\n  background-color: #0C5453!important;\n  color: #ffffff;\n}\n\n\/* Geselecteerde dag *\/\n.flatpickr-day.selected {\n  background-color: #0C5453 !important;\n  color: #ffffff !important;\n}\n\n\/* Focused dag (toetsenbordnavigatie) *\/\n.flatpickr-day:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(44,160,144,0.5);\n}\n\n\/* Verberg standaard grid voor weeknummers e.d. *\/\n.flatpickr-weekWrapper,\n.flatpickr-weekdaycontainer {\n  \/* we vangen .flatpickr-weekdaycontainer er al mee, maar extra zekerheid *\/\n  margin: 0;\n  padding: 0;\n}\n\n\/* Ruimte rondom de kalender (optioneel) *\/\n.flatpickr-innerContainer {\n  padding: 0;\n  margin: 0;\n}\n\t\n\t\/* =======================================================\n   1) Zorg dat de header (maand + jaar + pijltjes) zichtbaar is\n   ======================================================= *\/\n\n\/* Maak de header (de container met pijltjes en maandnaam) altijd zichtbaar *\/\n.flatpickr-months {\n  display: flex !important;\n  align-items: center;\n  justify-content: center; \/* Je gebruikte dit al inline, maar we herhalen het hier *\/\n  background: transparent !important; \/* zorg dat er geen achtergrondkleur van elders overheen komt *\/\n  margin-bottom: 8px;\n}\n\n\/* Pijltjes < en > *\/\n.flatpickr-prev-month,\n.flatpickr-next-month {\n  font-size: 20px !important;\n  color: #0C5453 !important;      \/* Of een andere accentkleur naar wens *\/\n  cursor: pointer;\n  user-select: none;\n  padding: 0 10px;\n}\n\n\/* Container waarin de maandnaam en het jaarnummer zitten *\/\n.flatpickr-current-month {\n  align-items: center;\n  gap: 6px;\n}\n\n\/* De maandnaam (\u201cJuli\u201d, \u201cMei\u201d, etc.) *\/\n.flatpickr-current-month .cur-month {\n  font-size: 16px !important;\n  color: #333333 !important;       \/* Tekstkleur van de maandnaam *\/\n  font-weight: 600;\n  text-transform: capitalize;      \/* Zorgt dat \u2018mei\u2019 \u2192 \u2018Mei\u2019 wordt, etc. *\/\n}\n\n\/* Het jaarnummer (input field met pijltjes omhoog\/omlaag) *\/\n.flatpickr-current-month .cur-year {\n  width: 50px !important;          \/* Genoeg breedte voor 4\u2010cijferig jaar *\/\n  font-size: 16px !important;\n  color: #333333 !important;\n  font-weight: 600;\n  text-align: center; \n  border: none !important;         \/* Geen rand rond het input\u2010veld *\/\n  background: transparent !important; \/* Doorzichtig, zodat het niet blinkt *\/\n  box-shadow: none !important;     \/* Verwijder eventuele schaduw of outline *\/\n  appearance: none !important;     \/* Verwijder browser\u2010specifieke pijltjes\/styling *\/\n  -moz-appearance: textfield !important;\n}\n\n\/* Verberg de pijltjes binnen het input\u2010jaarnummer (omdat we geen spin\u2010controls willen zien) *\/\n.flatpickr-current-month .cur-year::-webkit-outer-spin-button,\n.flatpickr-current-month .cur-year::-webkit-inner-spin-button {\n  -webkit-appearance: none !important;\n  margin: 0;\n}\n.flatpickr-current-month .cur-year[type=\"number\"] {\n  -moz-appearance: textfield !important;\n}\n\n\/* =======================================================\n   2) Optioneel: iets meer padding\/marge aan de header geven\n   ======================================================= *\/\n\n\/* Zet wat ruimte boven de kalender, zodat hij niet \u201caan je form\u201d kleeft *\/\n.flatpickr-calendar {\n  margin-top: 10px !important;\n}\n\n\/* =======================================================\n   3) Controleer dat er geen regel is die .flatpickr\u2010tekst \u201cverbergt\u201d\n   ======================================================= *\/\n\n\/* Soms zet men in een thema global \u201cinput { color: transparent; }\u201d of \u201c.flatpickr\u2010* { display: none }\u201d \n   Controleer je eigen CSS op zulk soort regels en overschrijf ze zo nodig: *\/\n.flatpickr-current-month,\n.flatpickr-prev-month,\n.flatpickr-next-month {\n \n  visibility: visible !important;\n  opacity: 1 !important;\n}\n\t\n\t.flatpickr-current-month .numInputWrapper {\n\t\tdisplay:none!important;\n\t}\n\t\n\t\/* 1) Zorg dat de header een flex-container is *\/\n.flatpickr-months {\n  display: flex !important;\n  align-items: center;\n  justify-content: space-between; \/* pijltjes en maand verdelen zich over de breedte *\/\n  padding: 0 10px;                \/* optioneel wat ruimte aan linker-\/rechterzijde *\/\n}\n\n\/* 2) Laat de maand-container (flatpickr-month) groeien zodat cur-month in het midden staat *\/\n.flatpickr-month {\n  flex: 1;                        \/* neemt alle resterende ruimte in beslag tussen de pijltjes *\/\n  display: block!important;\n  justify-content: center;       \/* centreert de cur-month horizontaal *\/\n}\n\n\/* 3) Verberg het jaarnummer-inputveld (numInputWrapper) *\/\n.flatpickr-current-month .numInputWrapper {\n  display: none !important;\n}\n\n\/* 4) Optioneel: style het cur-month zelf nog iets *\/\n.flatpickr-current-month .cur-month {\n  font-size: 16px !important;\n  font-weight: 400;\n  color: #0C5453!important;       \/* of welke kleur je wilt *\/\n  text-transform: capitalize;\n}\n\n\/* 5) Style de pijltjes: *\/\n.flatpickr-prev-month,\n.flatpickr-next-month {\n  font-size: 20px !important;\n  color: #0C5453 !important;\n  cursor: pointer;\n  user-select: none;\n  padding: 0 8px;\n}\n\t\n\t\/* ===================================================================\n   Stap 4: Layout en styling ingavevelden\n   =================================================================== *\/\n\n\/* F-rij: twee kolommen naast elkaar *\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n\n\/* ==== Input-paar: twee inputs naast elkaar ==== *\/\n.input-pair {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n.input-pair input {\n  flex: 1;\n}\n\n\/* Zakelijk-velden: standaard verborgen *\/\n.pro-fields {\n  display: none;\n  margin-bottom: 16px;\n}\n\n\/* ==== Algemene stijl voor tekstvelden en textarea ==== *\/\n.f-123 input[type=\"text\"]:not(#license_plate):not(#chassis),\n.f-123 input[type=\"email\"],\n.f-123 textarea {\n  width: 100%;\n  padding: 8px 4px;\n  margin: 0; \n  font-size: 14px;\n  color: #0C5453;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid #0C5453;\n\tborder-radius:0px!important;\n  box-sizing: border-box;\n  outline: none;\n}\n\n\/* Placeholder-kleur iets lichter *\/\n.f-123 input::placeholder,\n.f-123 textarea::placeholder {\n  color: #888888;\n}\n\n\/* Bij focus onderlijn accentueren *\/\n.f-123 input:focus,\n.f-123 textarea:focus {\n  border-bottom: 2px solid #0C5453;\n  color: #222222;\n}\n\n\/* Textarea min-hoogte *\/\n.f-123 textarea {\n  min-height: 80px;\n  resize: vertical;\n}\n\n\/* ==== Radiobuttons \u201cType klant\u201d ==== *\/\n.type-klant-container {\n  margin-bottom: 20px;\n}\n.type-klant-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 8px;\n  color: #0C5453;\n  font-size: 14px;\n}\n.radio-2 {\n  display: flex;\n  gap: 20px;\n}\n.radio-2 label {\n  display: inline-flex;\n  align-items: center;\n  font-size: 14px;\n  color: #333333;\n  cursor: pointer;\n  gap: 4px;\n  user-select: none;\n}\n.radio-2 input[type=\"radio\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: #0C5453; \/* groen accent voor bolletje *\/\n}\n\n\/* ==== Checkbox-container (custom versie) ==== *\/\n.checkbox-container {\n  margin: 12px 0;\n}\n.checkbox-container input[type=\"checkbox\"] {\n  display: none; \/* verberg standaard element *\/\n}\n.custom-checkbox-label {\n  position: relative;\n  padding-left: 28px;\n  font-size: 14px;\n  color: #333333;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n}\n.custom-checkbox-label::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 18px;\n  height: 18px;\n  border: 2px solid #ccc;\n  border-radius: 4px;\n  background: #ffffff;\n  box-sizing: border-box;\n  transition: border-color 0.2s ease, background-color 0.2s ease;\n}\n.custom-checkbox-label::after {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 50%;\n  transform: translateY(-50%) scale(0);\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 15%, 80% 0, 43% 62%);\n  \/* een eenvoudig vink-icoon met polygon *\/\n  transition: transform 0.15s ease;\n  opacity: 0;\n}\n.checkbox-container input[type=\"checkbox\"]:checked + .custom-checkbox-label::before {\n  border-color: #0C5453;\n  background-color: #0C5453;\n}\n.checkbox-container input[type=\"checkbox\"]:checked + .custom-checkbox-label::after {\n  transform: translateY(-50%) scale(1);\n  opacity: 1;\n}\n\n\/* Link in checkbox-tekst *\/\n.custom-checkbox-label a {\n  color: #0C5453;\n  text-decoration: underline;\n}\n\n\/* ==== Overzicht-kaarten (rechter kolom) ==== *\/\n.location-card {\n  display: flex;\n  align-items: flex-start;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 12px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n  margin-bottom: 16px;\n  gap: 12px;\n}\n.icon-box img {\n  width: 50px;\n  height: 50px;\n}\n.location-details {\n  flex-grow: 1;\n  font-size: 14px;\n  color: #333333;\n}\n.location-details strong {\n  color: #000;\n}\n.selected_images_preview span {\n  display: inline;\n  margin-right: 6px;\n  font-weight: 500;\n  color: #0C5453;\n}\n\n\/* ==== Form-knoppen onderaan ==== *\/\n.form-buttons {\n  text-align: right;\n  margin-top: 20px;\n}\n.form-buttons button,\n.form-buttons input[type=\"submit\"] {\n  background-color: #0C5453;\n  color: #ffffff;\n  border: 1px solid #0C5453;\n  border-radius: 5px;\n  padding: 10px 20px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.form-buttons button:hover,\n.form-buttons input[type=\"submit\"]:hover {\n  background-color: transparent;\n  color: #0C5453;\n}\n\/* Zorg dat de label + radiobuttons naast elkaar komen *\/\n.type-klant-container {\n  display: flex;\n  align-items: center;\n  gap: 10px; \/* afstand tussen \u201cType klant:\u201d en de knoppen *\/\n}\n\n\/* Reset eventuele vaste breedte op het label zodat het meegroeit met de tekst *\/\n.type-klant-container .type-klant-label {\n  width: auto;\n  margin: 0;\n  white-space: nowrap;\n}\n\t.radio-2 label {\n\t\twidth:auto!important;\n\t}\n\t\n#hidden-cf7 { \n  display: none !important; \n}\n\n#msf-step-4.active #hidden-cf7 { \n  display: block !important; \n}\n\n#hidden-cf7 .wpcf7-form > * { display: none !important; }\n#hidden-cf7 .msf-file-only { display: block !important; }\n#hidden-cf7 input[type=\"submit\"],\n#hidden-cf7 .wpcf7-response-output,\n#hidden-cf7 .wpcf7-spinner { display:none !important; }\n.msf-error {\n  color: #e74c3c;\n  font-size: 0.9em;\n  margin-top: 4px;\n}\n\n#multiStepForm .form-step:nth-of-type(1) .f-123 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n}\n\n\/* Labels 2-per-rij *\/\n#multiStepForm .form-step:nth-of-type(1) .f-123 > label {\n  flex: 0 0 calc(50% - 10px);\n}\n\n\/* Heading over beide kolommen *\/\n#multiStepForm .form-step:nth-of-type(1) .f-123 > h4 {\n  flex: 0 0 100%;\n}\n\t\n\t\n\t\/* container voor je login-modal *\/\n.msf-modal {\n  display: none;               \/* standaard verborgen *\/\n  position: fixed;\n  top: 0; left: 0;\n  width: 100%;  height: 100%;\n  background: rgba(0,0,0,0.5);\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n\/* wanneer we de class \u201copen\u201d toevoegen, tonen we hem *\/\n.msf-modal.open {\n  display: flex;\n}\n.msf-modal-content {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  max-width: 400px;\n  width: 100%;\n}\n\t\n\t\/* Modal container *\/\n.msf-modal-content {\n  background: #fff;\n  padding: 2rem;\n  border-radius: 0.5rem;\n  max-width: 400px;\n  margin: 2rem auto;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n  font-family: inherit;\n}\n\n\/* Form labels *\/\n.msf-modal-content label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: 600;\n  color: #333;\n}\n\n\/* Text inputs *\/\n.msf-modal-content .input {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  font-size: 1rem;\n  border: 1px solid #ccd0d4;\n  border-radius: 0.375rem;\n  margin-bottom: 1rem;\n  box-sizing: border-box;\n  transition: border-color 0.2s;\n}\n.msf-modal-content .input:focus {\n  border-color: #0C5453;\n  outline: none;\n}\n\n\/* Checkbox row *\/\n.msf-modal-content .login-remember {\n  margin-bottom: 1.5rem;\n}\n.msf-modal-content .login-remember input {\n  vertical-align: middle;\n  margin-right: 0.5rem;\n}\n\n\/* Submit button *\/\n.msf-modal-content .button-primary {\n  background: #0C5453;\n  border: none;\n  color: #fff;\n  padding: 0.75rem 1.5rem;\n  border-radius: 0.375rem;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.msf-modal-content .button-primary:hover {\n  background: #238a75;\n}\n\n\/* Close button *\/\n#msf-close-login {\n  display: block;\n  margin: 1.5rem auto 0;\n  background: transparent;\n  border: 1px solid #ccd0d4;\n  color: #555;\n  padding: 0.5rem 1rem;\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: background-color 0.2s, color 0.2s;\n}\n#msf-close-login:hover {\n  background: #f7f7f7;\n  color: #333;\n}\n\t\n\t\/* ==========================================\n   Step Indicators: Only on small screens\n   ==========================================\n*\/\n@media (max-width: 768px) {\n  .step-container {\n    display: flex;\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n  .step-container .step {\n    flex: 0 0 auto;\n    min-width: 80px;\n    padding: 8px 4px;\n    font-size: 12px;\n  }\n}\n\n\/* ==========================================\n   Two-column form layout\n   ==========================================\n*\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n.f-123 {\n  flex: 1 1 60%;\n  min-width: 60%;\n  box-sizing: border-box;\n}\n.f-124 {\n  flex: 1 1 38%;\n  min-width: 30%;\n  box-sizing: border-box;\n}\n\n\/* Stack columns under 768px *\/\n@media (max-width: 768px) {\n  .f-123,\n  .f-124 {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n}\n\t\n\t@media (max-width: 640px) {\n\t\t.f-124 {\n\t\t\tdisplay:none;\n\t\t}\t\n\t\t\n.f-123 {\n    padding: 0px;\n    border-radius: 10px;\n}\n\t\t.form-step {\n   padding: 10px!important;\n}\n.form-step {\n    padding: 0px;\n}\n\n.Inventory-2 label.interventie-optie {\n    flex: 0 0 45%;\n    max-width: 45%;\n    padding: 20px 5px;\n}\n\t\tform#multiStepForm h3 {\n    font-size: 25px;\n}\n\n  .calendar-column .flatpickr-days,\n  .calendar-column .flatpickr-rContainer {\n    width: auto !important;\n\n  }\n\t\t.flatpickr-weekdays {\n\t\t\twidth:100%!important;\n\t\t}\n\n  .calendar-column .flatpickr-day {\n    width: 30px      !important;\n    height: 30px     !important;\n    line-height: 30px!important;\n    margin: 2px      !important;\n    font-size: 0.75em!important;\n  }\n\t\t\n\n\n\n}\n\t\n\t@media (max-width: 768px) {\n  \/* make your two-up labels collapse to 100% *\/\n  #multiStepForm .form-step:nth-of-type(1) .f-123 > label {\n    flex: 0 0 100% !important;\n  }\n}\n\t\n\t\n\t\n\t\n\n\/* ==========================================\n   Base styles (unique rules)\n   ==========================================\n*\/\n.form-step {\n  background: #f6f6f6;\n  padding: 20px;\n  border-radius: 10px;\n}\n  <\/style>\n\n\n\n    \n    \n    \n    \n    \n    [\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Plan je interventie inOnderhoud inboeken\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/l10n\/nl.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.5.1\/dist\/confetti.browser.min.js\"><\/script>\n   \n<div class=\"step-container\" id=\"stepIndicator\">\n  <div   class=\"step active\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Wagen<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Interventies<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Datum &amp; uur<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Gegevens<\/div>\n   <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Bevestiging<\/div>\n <\/div>\n  \n  \n<div id=\"multiStepForm\" class=\"msf-form\">\n\t\t<div class=\"form-step active\">\n\t\t  <h3>Voer de gegevens van jouw wagen in<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<div class=\"f-123\">\n\t\t\t  <h4>Vul hier in<\/h4>\n\n\t\t\t  <label>\n\t\t\t\tNummerplaat <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<input id=\"license_plate\" type=\"text\" name=\"license_plate\" required>\n\t\t\t  <\/label>\n\t\t\t  <label>\n\t\t\t\tKilometerstand <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<input id=\"mileage\" type=\"number\" name=\"mileage\" required>\n\t\t\t  <\/label>\n\t\t\t  <label>\n\t\t\t\tChassisnummer\n\t\t\t\t<input id=\"chassis\" type=\"text\" name=\"chassis\" required>\n\t\t\t  <\/label>\n\n\t\t\t  \t\t\t  <label>\n\t\t\t\tType wagen <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<select id=\"car_type\" name=\"car_type\" required>\n\t\t\t\t  <option value=\"\">Selecteer type\u2026<\/option>\n\t\t\t\t  \t\t\t\t\t\t\t\t\t\t  <option value=\"bestelwagens-groot\">\n\t\t\t\t\t\tBestelwagens groot\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"bestelwagens-klein\">\n\t\t\t\t\t\tBestelwagens klein\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"opleggers\">\n\t\t\t\t\t\tOpleggers\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"personenwagens\">\n\t\t\t\t\t\tPersonenwagens\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"trekkers\">\n\t\t\t\t\t\tTrekkers\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"vrachtwagens\">\n\t\t\t\t\t\tVrachtwagens\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t  \t\t\t\t<\/select>\n\t\t\t  <\/label>\n\n\t\t\t  \t\t\t  <label>\n\t\t\t\tMerk\n\t\t\t\t<select id=\"brand_select\" name=\"brand\" class=\"searchable-dropdown\">\n\t\t\t\t  <option value=\"\">Selecteer merk\u2026<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"A&amp;D\">\n\t\t\t\t\t  A&amp;D\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Citro\u00ebn\">\n\t\t\t\t\t  Citro\u00ebn\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"DAF\">\n\t\t\t\t\t  DAF\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Ford\">\n\t\t\t\t\t  Ford\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Iveco\">\n\t\t\t\t\t  Iveco\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Krone\">\n\t\t\t\t\t  Krone\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"K\u00f6gel\">\n\t\t\t\t\t  K\u00f6gel\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"LAG trailers\">\n\t\t\t\t\t  LAG trailers\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"MAN\">\n\t\t\t\t\t  MAN\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Mercedes\">\n\t\t\t\t\t  Mercedes\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Opel\">\n\t\t\t\t\t  Opel\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Peugeot\">\n\t\t\t\t\t  Peugeot\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Renault\">\n\t\t\t\t\t  Renault\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Scania\">\n\t\t\t\t\t  Scania\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Schmitz Cargobull\">\n\t\t\t\t\t  Schmitz Cargobull\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Smart\">\n\t\t\t\t\t  Smart\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Van Hool\">\n\t\t\t\t\t  Van Hool\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Volvo\">\n\t\t\t\t\t  Volvo\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Andere\">\n\t\t\t\t\t  Andere\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t<\/select>\n\t\t\t  <\/label>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t  <div class=\"msf-note\" style=\"margin-top: 1em; font-size: 14px; text-align: center;\">\n\t\t\t\tHeb je al een account? \n\t\t\t\t<a href=\"#\" id=\"msf-open-login-step1\" class=\"msf-open-login\">Klik hier om in te loggen<\/a>.\n\t\t\t  <\/div>\n\t\t\t\n\n\t\t\t<\/div> <!-- einde f-123 -->\n\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div> <!-- einde form-step -->\n  \n\n\t\t<div class=\"form-step\">\n\t\t  <h3>Selecteer tot 3 interventies<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- LINKS: keuzevak (.f-123, 60% breed) -->\n\t\t\t<div class=\"f-123 interventies\">\n\t\t\t  <!-- ---- \u201cMeest gekozen\u201d sectie ---- -->\n\t\t\t  <h4>Onze populairste interventies<\/h4>\n\t\t\t  <div class=\"Inventory-2\">\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2083\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Remmen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-remmen.png\"\n\t\t\t\t\t\t alt=\"Remmen\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Remmen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2081\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Onderhoud\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-onderhoud.png\"\n\t\t\t\t\t\t alt=\"Onderhoud\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Onderhoud<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2078\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Keuring\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-technische-keuring.png\"\n\t\t\t\t\t\t alt=\"Keuring\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Keuring<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2631\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Carrosserie\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-carrosserie.png\"\n\t\t\t\t\t\t alt=\"Carrosserie\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Carrosserie<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t  <\/div><!-- .Inventory-2 -->\n\n\t\t\t  <br><br>\n\n\t\t\t  <!-- ---- \u201cMeer interventies\u201d sectie ---- -->\n\t\t\t  <h4>Meer interventies<\/h4>\n\t\t\t  <div class=\"Inventory-2\">\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2734\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Frigo\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-frigo.png\"\n\t\t\t\t\t\t alt=\"Frigo\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Frigo<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2085\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Schokdempers\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-schokdempers.png\"\n\t\t\t\t\t\t alt=\"Schokdempers\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Schokdempers<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2084\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Ruitenwissers\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-ruitenwissers.png\"\n\t\t\t\t\t\t alt=\"Ruitenwissers\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Ruitenwissers<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2080\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Koplampen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-koplampen.png\"\n\t\t\t\t\t\t alt=\"Koplampen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Koplampen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2079\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Glasbreuk\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-glasbreuk.png\"\n\t\t\t\t\t\t alt=\"Glasbreuk\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Glasbreuk<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2077\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Distributieriem\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-distributieriem.png\"\n\t\t\t\t\t\t alt=\"Distributieriem\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Distributieriem<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2076\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Batterij\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-batterij.png\"\n\t\t\t\t\t\t alt=\"Batterij\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Batterij<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2075\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Check Up\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-check-up.png\"\n\t\t\t\t\t\t alt=\"Check Up\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Check Up<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2082\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Banden\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-banden.png\"\n\t\t\t\t\t\t alt=\"Banden\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Banden<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2073\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Airco\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-airco.png\"\n\t\t\t\t\t\t alt=\"Airco\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Airco<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2074\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Accessoires\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-centraal-slot-en-alarm.png\"\n\t\t\t\t\t\t alt=\"Accessoires\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Accessoires<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2072\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Truckwash\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-truckwash.png\"\n\t\t\t\t\t\t alt=\"Truckwash\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Truckwash<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2070\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Elektrische problemen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-elektrische-problemen.png\"\n\t\t\t\t\t\t alt=\"Elektrische problemen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Elektrische problemen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2071\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Koelsysteem\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-koeling.png\"\n\t\t\t\t\t\t alt=\"Koelsysteem\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Koelsysteem<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2068\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Laadklep\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-laadklep.png\"\n\t\t\t\t\t\t alt=\"Laadklep\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Laadklep<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2069\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Luchtleidingen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-luchtleidingen.png\"\n\t\t\t\t\t\t alt=\"Luchtleidingen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Luchtleidingen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2067\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Motor\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-motor.png\"\n\t\t\t\t\t\t alt=\"Motor\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Motor<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2066\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Olie verversen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-olie-verversen.png\"\n\t\t\t\t\t\t alt=\"Olie verversen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Olie verversen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2065\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Stuur\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-stuur.png\"\n\t\t\t\t\t\t alt=\"Stuur\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Stuur<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2057\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Uitlaat\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-uitlaat.png\"\n\t\t\t\t\t\t alt=\"Uitlaat\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Uitlaat<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2629\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Versnellingsbak\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-versnellingsbak.png\"\n\t\t\t\t\t\t alt=\"Versnellingsbak\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Versnellingsbak<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2630\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Tachygraaf\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-tachygraaf.png\"\n\t\t\t\t\t\t alt=\"Tachygraaf\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Tachygraaf<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <button type=\"button\" id=\"loadMoreBtn\" class=\"btn-load-more\">Meer laden\u2026<\/button>\n\t\t\t\t\t\t\t  <\/div><!-- .Inventory-2 -->\n\t\t\t<\/div><!-- .f-123 interventies -->\n\n\n\t\t\t<!-- RECHTS: preview (.f-124, 38% breed) -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\n\t\t\t  <!-- Vaste locatie\u2010kaart -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\n\t\t\t  <!-- Preview\u2010kaart STEP 1 -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\n\t\t\t  <!-- Preview\u2010kaart interventies (titels) -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" id=\"nextStepBtn\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div> <!-- einde form-step -->\n\n\t \n\t \n\t\t <div class=\"form-step\">\n\t\t  <h3>Selecteer datum en uur<\/h3>\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- === LINKER KOLOM: FLATPICKR === -->\n\t\t\t<div class=\"f-123\" style=\"background-color: #f6f6f6;\">\n\t\t\t  <div class=\"f-1\" style=\"background-color: #f3faf9;\">\n\t\t\t\t<p id=\"tr3\">\n\t\t\t\t  <strong>Let op!<\/strong> Dit is een aanvraag om een afspraak vast te leggen, \n\t\t\t\t  deze moet eerst bevestigd worden. Wacht op de bevestiging van uw verdeler voordat \n\t\t\t\t  u naar de werkplaats komt.<br>\n\t\t\t\t<\/p>\n\t\t\t  <\/div>\n\t\t\t\t\n\t\t\t  <div class=\"f-1 kalender\">\n\t\t\t\t  <label>Uw gewenste datum en uur selecteren <span style=\"color: #e74c3c;\">*<\/span><\/label>\n\t\t\t\t<div class=\"calendar-time-container\">\n\t\t\t\t  <!-- 1a) Flatpickr calendar -->\n\t\t\t\t  <div class=\"calendar-column\">\n\t\t\t\t\t<!-- We verbergen het standaard Flatpickr-inputveld zelf (maar laten het inline kalenderpaneel zien) -->\n\t\t\t\t\t<input\n\t\t\t\t\t  type=\"text\"\n\t\t\t\t\t  id=\"datepicker\"\n\t\t\t\t\t  name=\"date\"\n\t\t\t\t\t  placeholder=\"Selecteer een datum\"\n\t\t\t\t\t  readonly\n\t\t\t\t\t  required\n\t\t\t\t\t\/>\n\t\t\t\t  <\/div>\n\t\t\t\t  <!-- 1b) Tijdselectie rechts -->\n\t\t\t\t  <div class=\"time-column\" id=\"timeColumn\">\n\t\t\t\t\t<!-- Hier komt de \u201cVrijdag 9\/05\u201d bv te staan -->\n\t\t\t\t\t<div id=\"selectedDateDisplay\" class=\"selected-date-display\">Kies eerst een datum<\/div>\n\t\t\t\t\t<div class=\"slots\">\n\t\t\t\t\t  <button type=\"button\" data-time=\"08:00\">08:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"09:00\">09:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"10:00\">10:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"11:00\">11:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"14:00\">14:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"15:00\">15:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"16:00\">16:00<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<!-- Verborgen input om de gekozen tijd door te sturen -->\n\t\t\t\t\t<input type=\"hidden\" name=\"time\" id=\"selectedTimeInput\" required>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<br><br>\n\t\t\t\t<div class=\"f-1\" id=\"renting-question\">\n\t\t\t\t  <label><strong>Ben je een renting klant? <span style=\"color:#e74c3c\">*<\/span><\/strong><\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"renting_customer\" value=\"ja\"> Ja<\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"renting_customer\" value=\"nee\"> Nee<\/label>\n\t\t\t\t<\/div>\n\t\t\t\t<div id=\"mobility-container\" style=\"display:none;\">\n\t\t\t\t  <label>\n\t\t\t\t\tMobiliteitsoplossing <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t\t<select id=\"mobility_option\" name=\"mobility_option\" required>\n\t\t\t\t\t  <option value=\"\">Maak een keuze<\/option>\n\t\t\t\t\t<\/select>\n\t\t\t\t  <\/label>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div>\n\n\t\t\t<!-- === RECHTER KOLOM: OVERZICHT (wagen + interventies) === -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div>\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div>\n\t \n\t \n\t \t \n\n\t\t<div class=\"form-step\" id=\"msf-step-4\">\n\t\t  <h3>Controleer en vul je gegevens aan<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- LINKER KOLOM: INGAVEVELDEN -->\n\t\t\t<div class=\"f-123\">\n\t\t\t  <!-- Type klant (Particulier \/ Zakelijk) -->\n\t\t\t  <div class=\"type-klant-container\">\n\t\t\t\t<label class=\"type-klant-label\">Type klant:<\/label>\n\t\t\t\t<div id=\"b3\" class=\"radio-2\">\n\t\t\t\t  <label><input type=\"radio\" name=\"user_type\" value=\"private\" checked id=\"user_type_private_formstep\"> Particulier<\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"user_type\" value=\"professional\" id=\"user_type_professional_formstep\"> Zakelijk<\/label>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- Zakelijk-velden (Bedrijfsnaam + BTW) -->\n\t\t\t  <div id=\"proFields\" class=\"input-pair pro-fields\">\n\t\t\t\t<input type=\"text\" name=\"company_name\" id=\"company_name_formstep\" placeholder=\"Bedrijfsnaam\">\n\t\t\t\t<input type=\"text\" name=\"tax_number\" id=\"tax_number_formstep\" placeholder=\"BTW-nummer\">\n\t\t\t  <\/div>\n\n\t\t\t  <!-- Voornaam + Achternaam -->\n\t\t\t  <div class=\"input-pair\">\n\t\t\t  <input type=\"text\" name=\"first_name\" id=\"first_name_formstep\" placeholder=\"Voornaam *\" required value=\"\" >\n\t\t\t  <input type=\"text\" name=\"surname\" id=\"surname_formstep\" placeholder=\"Achternaam *\" required value=\"\" >\n\t\t\t<\/div>\n\n\t\t\t  <!-- E-mail + Telefoonnummer -->\n\t\t\t  <div class=\"input-pair\">\n\t\t\t\t<input type=\"email\" name=\"email\" id=\"email_formstep\" placeholder=\"E-mail *\" required value=\"\" >\n\t\t\t\t  <div id=\"msf-email-exists\" class=\"msf-error\" style=\"display:none\">\n\t\t\t\t\t  Dit e-mailadres is al geregistreerd. <a href=\"#\" id=\"msf-open-login\">Log hier in<\/a>.\n\t\t\t\t\t<\/div>\n\t\t\t\t<input  type=\"text\" name=\"phone\" id=\"phone_formstep\" placeholder=\"Telefoonnummer\" value=\"\" >\n\t\t\t  <\/div>\n\n\t\t\t  <textarea name=\"message\" id=\"message_formstep\" placeholder=\"Boodschap\"><\/textarea>\n\t\t\t\t<div id=\"hidden-cf7\" class=\"msf-cf7-shadow\">\n\t\t\t\t  \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2709-o5\" lang=\"nl-BE\" dir=\"ltr\" data-wpcf7-id=\"2709\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/nl\/wp-json\/wp\/v2\/pages\/145#wpcf7-f2709-o5\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contactformulier\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2709\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"nl_BE\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2709-o5\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:2709,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;repeater_remove_button&quot;:&quot;bottom&quot;}}\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"license_plate\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Nummerplaat\" value=\"\" type=\"text\" name=\"license_plate\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mileage\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Kilometerstand\" value=\"\" type=\"text\" name=\"mileage\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"chassis\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Chassisnummer\" value=\"\" type=\"text\" name=\"chassis\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"brand\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Merk\" value=\"\" type=\"text\" name=\"brand\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"car_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type wagen\" value=\"\" type=\"text\" name=\"car_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies_id\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies_id\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"date\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Datum\" value=\"\" type=\"text\" name=\"date\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"time\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Tijd\" value=\"\" type=\"text\" name=\"time\" \/><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"renting_customer\" \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mobility_option\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Mobiliteitsoplossing\" value=\"\" type=\"text\" name=\"mobility_option\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"user_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type klant\" value=\"\" type=\"text\" name=\"user_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"company_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Bedrijfsnaam\" value=\"\" type=\"text\" name=\"company_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tax_number\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"BTW-nummer\" value=\"\" type=\"text\" name=\"tax_number\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"first_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Voornaam\" value=\"\" type=\"text\" name=\"first_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"surname\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Achternaam\" value=\"\" type=\"text\" name=\"surname\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"Telefoon\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Boodschap\" name=\"message\"><\/textarea><\/span>\n<div class=\"msf-file-only\">\n  <span class=\"wpcf7-form-control-wrap\" data-name=\"bestanden\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-drag-n-drop-file d-none\" aria-invalid=\"false\" type=\"file\" multiple=\"multiple\" data-name=\"bestanden\" data-type=\"jpg|jpeg|png|pdf\" data-limit=\"3000000\" data-max=\"10\" data-id=\"2709\" data-version=\"free version 1.3.9.8\" accept=\".jpg, .jpeg, .png, .pdf\" \/><\/span>\n<\/div>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"create_account\"><span class=\"wpcf7-form-control wpcf7-checkbox\"><span class=\"wpcf7-list-item first last\"><input type=\"checkbox\" name=\"create_account[]\" value=\"Ja, maak een account\" \/><span class=\"wpcf7-list-item-label\">Ja, maak een account<\/span><\/span><\/span><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"url\" \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Verzenden\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t\n\t\t\t  <div id=\"ca-container\" class=\"checkbox-container\" style=\"display: block;\">\n\t\t\t\t<input type=\"checkbox\" id=\"create_account_formstep\" name=\"create_account\">\n\t\t\t\t<label style=\"width:100%!important;\" for=\"create_account_formstep\" class=\"custom-checkbox-label\">\n\t\t\t\t  Registreer je en volg je aanvragen in \u00e9\u00e9n oogopslag.\n\t\t\t\t<\/label>\n\t\t\t  <\/div>\n\n\t\t\t  <div id=\"have-account-container\" class=\"msf-note\" style=\"display:none; margin-bottom:1em;font-size:14px;\">\n\t\t\t\tZo te zien heb je al een account. \n\t\t\t\t<a href=\"#\" class=\"msf-open-login\">Klik hier om in te loggen<\/a>.\n\t\t\t  <\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t  <!-- Checkbox \u201cIk ga akkoord met privacy policy\u201d -->\n\t\t\t  <div class=\"checkbox-container\">\n\t\t\t\t<input type=\"checkbox\" id=\"agree_policy_formstep\" name=\"agree_policy\">\n\t\t\t\t<label style=\"width:100%!important;\" for=\"agree_policy_formstep\" class=\"custom-checkbox-label\">\n\t\t\t\t  Ik ga akkoord met de &nbsp;<a href=\"\/privacy-policy\/\" target=\"_blank\"> privacy policy<\/a>  <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<\/label>\n\t\t\t\t<div class=\"error agree-error\" style=\"display:none;color:#e74c3c;font-size:0.9em;\">\n\t\t\t\t\tJe moet akkoord gaan met de privacy policy.\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-123 -->\n\n\n\t\t\t<!-- RECHTER KOLOM: OVERZICHT AFSPRAAK -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t<div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t<div>1730 Kobbegem - Asse<\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-datum.png\" alt=\"Datum Icon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Datum en uur<\/h4>\n\t\t\t\t\t<div class=\"datetime-preview\">\n\t\t\t\t\t  <p><strong>Datum:<\/strong> <span id=\"selected_date\">Not selected<\/span><\/p>\n\t\t\t\t\t  <p><strong>Tijdstip:<\/strong> <span id=\"selected_time\">Not selected<\/span><\/p>\n\t\t\t\t\t  <p><strong>Mobiliteitsoplossing:<\/strong> <span id=\"selected_mobility\">Not selected<\/span><\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" id=\"msfFinalBtn\">Afspraak aanvragen<\/button>\n\t\t  <\/div>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t \n\t \n\t \n\t \n\t\t<div class=\"form-step\" id=\"form-submit\">\n\t\t  <div class=\"f-row\">\n\n\t\t\t<!-- ========== LINKER KOLOM: BEVESTIGINGSMESSAGE ========== -->\n\t\t\t<div class=\"f-123\" style=\"text-align: center; background-color: #f6f6f6;\">\n\t\t\t  <!-- Bovenste melding -->\n\t\t\t  <div class=\"f-1\" style=\"text-align: center; background-color: #ffffff; padding: 20px; border-radius: 10px;\">\n\t\t\t\t<p>\n\t\t\t\t  <strong>We hebben uw aanvraag goed ontvangen.<\/strong><br>\n\t\t\t\t  Een van onze collega's zal u binnenkort contacteren om uw afspraak te bevestigen en de praktische details te regelen.\n\t\t\t\t<\/p>\n\t\t\t\t<img\n\t\t\t\t  decoding=\"async\"\n\t\t\t\t  width=\"296\"\n\t\t\t\t  height=\"285\"\n\t\t\t\t  src=\"\/wp-content\/uploads\/2025\/06\/checkmark-miers.png\"\n\t\t\t\t  alt=\"Confirmation check\"\n\t\t\t\t  title=\"Confirmation check\"\n\t\t\t\t>\n\t\t\t  <\/div>\n\t\t\t  <br><br>\n\t\t\t  <!-- Onderstaande \u201cLet op!\u201d-box -->\n\t\t\t  <div class=\"f-1\" style=\"background-color: #f3faf9; border-radius: 10px;\">\n\t\t\t\t<p id=\"tr3\">\n\t\t\t\t  <strong>Let op!<\/strong> Dit is een aanvraag om een afspraak vast te leggen, deze moet eerst bevestigd worden.\n\t\t\t\t  Wacht op de bevestiging van uw verdeler voordat u naar de werkplaats komt.\n\t\t\t\t<\/p>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde linker kolom -->\n\n\n\t\t\t<!-- ========== RECHTER KOLOM: OVERZICHT VAN ALLE INGAVEN ========== -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Uw ingevulde gegevens<\/h4>\n\n\t\t\t  <!-- 1) Vaste locatie\u2010kaart -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<p>\n\t\t\t\t\t  <strong>Locatie:<\/strong>\n\t\t\t\t\t  <strong>MIERS Group<\/strong><br>\n\t\t\t\t\t  Brusselsesteenweg 333<br>\n\t\t\t\t\t  1730 Kobbegem - Asse\n\t\t\t\t\t<\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 2) Wagen\u2010gegevens -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 3) Interventies -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 4) Datum & Tijd & Mobiliteit -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-datum.png\" alt=\"Datum icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Datum en uur<\/h4>\n\t\t\t\t\t<p><strong>Datum:<\/strong> <span id=\"selected_date\">Not selected<\/span><\/p>\n\t\t\t\t\t<p><strong>Tijdstip:<\/strong> <span id=\"selected_time\">Not selected<\/span><\/p>\n\t\t\t\t\t<p><strong>Mobiliteitsoplossing:<\/strong> <span id=\"selected_mobility\">Not selected<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 5) Persoonlijke gegevens -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-user.png\" alt=\"Gebruikers icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Persoonlijke gegevens<\/h4>\n\t\t\t\t\t<p><strong>Type klant:<\/strong> <span class=\"user_type_preview\">Not selected<\/span><\/p>\n\t\t\t\t\t<!-- Enkel zichtbaar als er \u201cZakelijk\u201d is gekozen -->\n\t\t\t\t\t<p class=\"company-line\" style=\"display: none;\"><strong>Bedrijfsnaam:<\/strong> <span class=\"company_name_preview\"><\/span><\/p>\n\t\t\t\t\t<p class=\"tax-line\" style=\"display: none;\"><strong>BTW-nummer:<\/strong> <span class=\"tax_number_preview\"><\/span><\/p>\n\t\t\t\t\t<p><strong>Voornaam:<\/strong> <span class=\"first_name_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Achternaam:<\/strong> <span class=\"surname_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>E-mail:<\/strong> <span class=\"email_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Telefoon:<\/strong> <span class=\"phone_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Boodschap:<\/strong><\/p>\n\t\t\t\t\t<p><span class=\"message_preview\">\u2013 geen boodschap \u2013<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t<\/div> <!-- einde rechter kolom -->\n\t\t  <\/div> <!-- einde f-row -->\n\t\t<\/div> <!-- einde form-step #form-submit -->\n<\/div>\n\t\t<!-- Login Modal (verborgen) -->\n\t\t<div id=\"msf-login-modal\" class=\"msf-modal\">\n\t\t  <div class=\"msf-modal-content\">\n\t\t\t<form name=\"loginform\" id=\"loginform\" action=\"https:\/\/miers.be\/wp-login.php\" method=\"post\"><p class=\"login-username\">\n\t\t\t\t<label for=\"user_login\">E-mail<\/label>\n\t\t\t\t<input type=\"text\" name=\"log\" id=\"user_login\" autocomplete=\"username\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-password\">\n\t\t\t\t<label for=\"user_pass\">Wachtwoord<\/label>\n\t\t\t\t<input type=\"password\" name=\"pwd\" id=\"user_pass\" autocomplete=\"current-password\" spellcheck=\"false\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-remember\"><label><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/> Mij onthouden<\/label><\/p><p class=\"login-submit\">\n\t\t\t\t<input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button button-primary\" value=\"Inloggen\" \/>\n\t\t\t\t<input type=\"hidden\" name=\"redirect_to\" value=\"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/\" \/>\n\t\t\t<\/p><\/form>\t\t\t<button type=\"button\" id=\"msf-close-login\">Sluiten<\/button>\n\t\t  <\/div>\n\t\t<\/div>\n\n\t\t\t<div id=\"hidden-cf7\">\n\t\t\t  \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2709-o6\" lang=\"nl-BE\" dir=\"ltr\" data-wpcf7-id=\"2709\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/nl\/wp-json\/wp\/v2\/pages\/145#wpcf7-f2709-o6\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contactformulier\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2709\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"nl_BE\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2709-o6\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:2709,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;repeater_remove_button&quot;:&quot;bottom&quot;}}\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"license_plate\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Nummerplaat\" value=\"\" type=\"text\" name=\"license_plate\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mileage\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Kilometerstand\" value=\"\" type=\"text\" name=\"mileage\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"chassis\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Chassisnummer\" value=\"\" type=\"text\" name=\"chassis\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"brand\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Merk\" value=\"\" type=\"text\" name=\"brand\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"car_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type wagen\" value=\"\" type=\"text\" name=\"car_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies_id\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies_id\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"date\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Datum\" value=\"\" type=\"text\" name=\"date\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"time\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Tijd\" value=\"\" type=\"text\" name=\"time\" \/><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"renting_customer\" \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mobility_option\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Mobiliteitsoplossing\" value=\"\" type=\"text\" name=\"mobility_option\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"user_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type klant\" value=\"\" type=\"text\" name=\"user_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"company_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Bedrijfsnaam\" value=\"\" type=\"text\" name=\"company_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tax_number\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"BTW-nummer\" value=\"\" type=\"text\" name=\"tax_number\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"first_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Voornaam\" value=\"\" type=\"text\" name=\"first_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"surname\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Achternaam\" value=\"\" type=\"text\" name=\"surname\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"Telefoon\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Boodschap\" name=\"message\"><\/textarea><\/span>\n<div class=\"msf-file-only\">\n  <span class=\"wpcf7-form-control-wrap\" data-name=\"bestanden\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-drag-n-drop-file d-none\" aria-invalid=\"false\" type=\"file\" multiple=\"multiple\" data-name=\"bestanden\" data-type=\"jpg|jpeg|png|pdf\" data-limit=\"3000000\" data-max=\"10\" data-id=\"2709\" data-version=\"free version 1.3.9.8\" accept=\".jpg, .jpeg, .png, .pdf\" \/><\/span>\n<\/div>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"create_account\"><span class=\"wpcf7-form-control wpcf7-checkbox\"><span class=\"wpcf7-list-item first last\"><input type=\"checkbox\" name=\"create_account[]\" value=\"Ja, maak een account\" \/><span class=\"wpcf7-list-item-label\">Ja, maak een account<\/span><\/span><\/span><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"url\" \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Verzenden\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t<\/div>\n\n\n\n\n\n\n\n<!-- === CONSOLIDEERDE MULTI-STEP LOGICA + localStorage + flatpickr === -->\n\n\n<script>\n  \/\/ ================================\n  \/\/ A. STEP-INDEX & HASH\n  \/\/ ================================\n  let currentStep = 0;\n  const formSteps      = document.querySelectorAll('.form-step');\n  const stepIndicators = document.querySelectorAll('.step');\n\tconst LAST_STEP_INDEX = formSteps.length - 1;\n\n  function showStep(stepIndex) {\n    formSteps.forEach((stepEl, idx) => {\n      stepEl.classList.toggle('active', idx === stepIndex);\n    });\n    stepIndicators.forEach((indEl, idx) => {\n      indEl.classList.toggle('active',    idx <= stepIndex);\n      indEl.classList.toggle('completed', idx <  stepIndex);\n    });\n    currentStep = stepIndex;\n    window.location.hash = 'step' + stepIndex;\n\t  \n\t  onStepChange(stepIndex);\n\t  \n\t  if (stepIndex >= 3) {\n\t\tupdateStep3PreviewCards();\n\t  }\n\n\t  const anchor = document.getElementById('AfspraakInboeken');\n\t  if (anchor) {\n\t\tanchor.scrollIntoView({ behavior: 'smooth' });\n\t  }\n    \n    if (stepIndex === LAST_STEP_INDEX) {\n\t\tconst mob = (localStorage.getItem('msf_mobility_option') || '').toLowerCase();\n\n\t\tif (mob.includes('huurwagen')) {\n\t\t  const container = document.querySelector('#form-submit .f-123');\n\t\t  \/\/ enkel \u00e9\u00e9n keer toevoegen\n\t\t  if (!container.querySelector('.msf-to-rental')) {\n\t\t\tcontainer.insertAdjacentHTML('beforeend', `\n\t\t\t  <div class=\"msf-to-rental\" style=\"margin-top:1.5em; padding:1em; background:#eef; border-radius:8px;\">\n\t\t\t\t<p><strong>Wil je alvast je huurwagen boeken?<\/strong><br>\n\t\t\t\t   Bekijk dan snel onze verhuurpagina.<\/p>\n\t\t\t\t<a href=\"verhuur-van-bestelwagens-bedrijfsvoertuigen\/#resultaten\" class=\"button\" style=\"display:inline-block;margin-top:0.5em;padding:0.75em 1.5em;\n\t\t\t\t   background:#0C5453;color:#fff;border-radius:5px;text-decoration:none;\">\n\t\t\t\t  Naar verhuur\n\t\t\t\t<\/a>\n\t\t\t  <\/div>\n\t\t\t`);\n\t\t  }\n\t\t}\n      launchConfetti();\n    }\n  }\n\n  function nextStep() {\n\t  \/\/ 0) Verwijder oude foutmeldingen\n\t  document.querySelectorAll('.msf-error').forEach(e => e.remove());\n\n\t  \/\/ 1) Validatie per stap\n\t  if (currentStep === 0) {\n\t\t\/\/ stap 1: nummerplaat, kilometerstand, type wagen\n\t\tlet valid = true;\n\t\tconst plate   = document.getElementById('license_plate');\n\t\tconst mileage = document.getElementById('mileage');\n\t\tconst carType = document.getElementById('car_type');\n\n\t\tif (!plate.value.trim()) {\n\t\t  plate.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Vul je nummerplaat in<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!mileage.value.trim()) {\n\t\t  mileage.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Vul je kilometerstand in<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!carType.value.trim()) {\n\t\t  carType.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een type wagen<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!valid) return;\n\t  }\n\n\t  if (currentStep === 1) {\n\t\t\/\/ stap 2: minstens 1 interventie\n\t\tconst checked = document.querySelectorAll('.inventory-checkbox:checked');\n\t\tif (checked.length < 1) {\n\t\t  const container = document.querySelector('.f-123.interventies');\n\t\t  container.insertAdjacentHTML('beforeend',\n\t\t\t'<div class=\"msf-error\">Kies minstens 1 interventie<\/div>'\n\t\t  );\n\t\t  return;\n\t\t}\n\t  }\n\n\t  if (currentStep === 2) {\n\t\t\/\/ stap 3: datum, tijd en mobiliteitsoplossing\n\t\tlet ok = true;\n\t\tconst dateInput = document.getElementById('datepicker');\n\t\tconst timeInput = document.getElementById('selectedTimeInput');\n\t\tconst rentingQuestion = document.getElementById('renting-question');\n\t\tconst rentChecked = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t\tconst mobInput  = document.getElementById('mobility_option');\n\n\t\tif (!dateInput.value) {\n\t\t  dateInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een datum<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!timeInput.value) {\n\t\t  timeInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een uur<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!rentChecked) {\n\t\t\trentingQuestion.insertAdjacentHTML('beforeend',\n\t\t\t  '<div class=\"msf-error\">Geef aan of je een renting klant bent<\/div>'\n\t\t\t);\n\t\t\tok = false;\n  \t\t}\n\t\tif (!mobInput.value) {\n\t\t  mobInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een mobiliteitsoplossing<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!ok) return;\n\t  }\n\n\t  if (currentStep === 3) {\n\t\t\/\/ stap 4: voornaam, achternaam, email, privacy\n\t\tlet ok = true;\n\n\t\t\/\/ required fields\n\t\tconst fields = [\n\t\t  { id: 'first_name_formstep',  msg: 'Vul je voornaam in'},\n\t\t  { id: 'surname_formstep',     msg: 'Vul je achternaam in'},\n\t\t  { id: 'email_formstep',       msg: 'Vul je e-mail in'},\n\t\t];\n\t\tfields.forEach(({id,msg}) => {\n\t\t  const el = document.getElementById(id);\n\t\t  if (!el.value.trim()) {\n\t\t\tel.insertAdjacentHTML('afterend',\n\t\t\t  `<div class=\"msf-error\">${msg}<\/div>`\n\t\t\t);\n\t\t\tok = false;\n\t\t  }\n\t\t});\n\n\t\t\/\/ privacy checkbox\n\t\tconst agreeEl = document.getElementById('agree_policy_formstep');\n\t\tif (!agreeEl.checked) {\n\t\t  \/\/ plaats de foutmelding onder de .checkbox-container\n\t\t  const wrapper = agreeEl.closest('.checkbox-container');\n\t\t  wrapper.insertAdjacentHTML('beforeend',\n\t\t\t'<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t  if (window.initDragDrop) {\n\t\t\t\twindow.initDragDrop(); \n\t\t\t  }\n\t\t\t}, 50);\n\n\t\tif (!ok) return;\n\t  }\n\n\t  \/\/ 2) Als alles ok is: naar de volgende stap\n\t  showStep(currentStep + 1);\n\t}\n\n  function prevStep() {\n    if (currentStep > 0) {\n      showStep(currentStep - 1);\n    }\n  }\n\n  \/\/ Alleen stappen \u2264 currentStep zijn \u201cklikbaar\u201d\n  stepIndicators.forEach((stepEl, idx) => {\n    stepEl.style.cursor = (idx <= currentStep ? 'pointer' : 'not-allowed');\n    stepEl.addEventListener('click', () => {\n      if (idx <= currentStep) {\n        showStep(idx);\n      }\n    });\n  });\n\n\n  \/\/ ================================\n  \/\/ B. localStorage: STAP 1 (Wagen)\n  \/\/ ================================\n  const LS_KEYS = {\n    license_plate: 'msf_license_plate',\n    mileage:       'msf_mileage',\n\tchassis: \t   'msf_chassis',\n    car_type:      'msf_car_type',\n    brand:         'msf_brand'\n  };\n\n  function saveStep1ValuesToStorage() {\n    const lp   = document.getElementById('license_plate')?.value || '';\n    const km   = document.getElementById('mileage')?.value || '';\n\tconst ch = document.getElementById('chassis')?.value || '';\n    const type = document.getElementById('car_type')?.value || '';\n    const merk = document.getElementById('brand_select')?.value || '';\n    localStorage.setItem(LS_KEYS.license_plate, lp);\n    localStorage.setItem(LS_KEYS.mileage,       km);\n\tlocalStorage.setItem(LS_KEYS.chassis, ch);\n    localStorage.setItem(LS_KEYS.car_type,      type);\n    localStorage.setItem(LS_KEYS.brand,         merk);\n  }\n\n  function loadStep1ValuesFromStorage() {\n    const lpStored   = localStorage.getItem(LS_KEYS.license_plate);\n    const kmStored   = localStorage.getItem(LS_KEYS.mileage);\n\tconst chStored = localStorage.getItem(LS_KEYS.chassis);\n    const typeStored = localStorage.getItem(LS_KEYS.car_type);\n    const merkStored = localStorage.getItem(LS_KEYS.brand);\n\n    if (lpStored   !== null) document.getElementById('license_plate').value = lpStored;\n    if (kmStored   !== null) document.getElementById('mileage').value       = kmStored;\n\tif (chStored !== null) document.getElementById('chassis').value = chStored;\n    if (typeStored !== null) document.getElementById('car_type').value      = typeStored;\n    if (merkStored !== null) {\n      const brandSelect = document.getElementById('brand_select');\n      if (brandSelect) {\n        brandSelect.value = merkStored;\n        if (window.jQuery && jQuery('#brand_select').data('select2')) {\n          jQuery('#brand_select').trigger('change.select2');\n        }\n      }\n    }\n  }\n\n  function initStep1Listeners() {\n    ['license_plate','mileage', 'chassis', 'car_type','brand_select'].forEach(id => {\n      const el = document.getElementById(id);\n      if (!el) return;\n      \/\/ Input\u2010velden (text\/number) \u2192 input\u2010event\n      el.addEventListener('input', () => {\n        saveStep1ValuesToStorage();\n        updateAllPreviews();\n      });\n      \/\/ <select> \u2192 change\u2010event\n      if (el.tagName.toLowerCase() === 'select') {\n        el.addEventListener('change', () => {\n          saveStep1ValuesToStorage();\n          updateAllPreviews();\n        });\n      }\n    });\n  }\n\n\n  \/\/ ============================================\n  \/\/ C. localStorage: STAP 2 (Interventies)\n  \/\/ ============================================\n  const LS_KEYS_2 = {\n    interventies: 'msf_interventies'\n  };\n\n  function saveStep2ValuesToStorage() {\n    const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');\n    const ids = Array.from(checkedBoxes).map(cb => cb.value);\n    localStorage.setItem(LS_KEYS_2.interventies, JSON.stringify(ids));\n  }\n\n  function loadStep2ValuesFromStorage() {\n    const stored = localStorage.getItem(LS_KEYS_2.interventies);\n    if (stored) {\n      try {\n        const ids = JSON.parse(stored);\n        ids.forEach(id => {\n          const cb = document.querySelector('.inventory-checkbox[value=\"' + id + '\"]');\n          if (cb) {\n            cb.checked = true;\n            const lab = cb.closest('label');\n            if (lab) lab.classList.add('selected');\n          }\n        });\n      } catch(e) {\n        console.error(e);\n      }\n    }\n  }\n\n  function updateStep2PreviewCards() {\n    const selectedImages = document.querySelectorAll('.inventory-checkbox:checked');\n    document.querySelectorAll('.selected_images_preview').forEach(container => {\n      container.innerHTML = '';\n      \/\/ Toon alles in \u00e9\u00e9n regel, gescheiden door komma + spatie\n      const titles = Array.from(selectedImages).map(cb => cb.dataset.title.trim());\n      if (titles.length) {\n        container.textContent = titles.join(', ');\n      } else {\n        container.textContent = ''; \n      }\n    });\n  }\n\n  function initStep2Listeners() {\n    const checkboxes = document.querySelectorAll('.inventory-checkbox');\n    checkboxes.forEach(cb => {\n      cb.addEventListener('change', () => {\n        const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');\n        if (checkedBoxes.length > 3) {\n          \/\/ Als er al 3 zijn, zet deze uit en toon waarschuwing\n          cb.checked = false;\n          alert('Je kan maximaal 3 interventies selecteren.');\n          return;\n        }\n        \/\/ Toggle .selected\u2010klasse op label\n        const lab = cb.closest('label');\n        if (lab) lab.classList.toggle('selected', cb.checked);\n\n        \/\/ Sla selectie op + update preview\n        saveStep2ValuesToStorage();\n        updateStep2PreviewCards();\n\n        \/\/ Als er nu \u2265 3 geselecteerd zijn \u2192 disable de rest\n        const newCheckedCount = document.querySelectorAll('.inventory-checkbox:checked').length;\n        if (newCheckedCount >= 3) {\n          document.querySelectorAll('.inventory-checkbox:not(:checked)').forEach(uncheckedCb => {\n            uncheckedCb.disabled = true;\n            const lbl = uncheckedCb.closest('label');\n            if (lbl) lbl.style.opacity = '0.5';\n          });\n        } else {\n          \/\/ Anders: alles weer inschakelen\n          document.querySelectorAll('.inventory-checkbox').forEach(allCb => {\n            allCb.disabled = false;\n            const lbl = allCb.closest('label');\n            if (lbl) lbl.style.opacity = '1';\n          });\n        }\n      });\n    });\n  }\n\n  \/\/ \u201cMeer laden\u2026\u201d\u2010knop (stap 2)\n  function initLoadMoreButton() {\n    const loadMoreBtn = document.getElementById('loadMoreBtn');\n    if (loadMoreBtn) {\n      loadMoreBtn.addEventListener('click', () => {\n        document.querySelectorAll('.hidden-more').forEach(el => el.classList.remove('hidden-more'));\n        loadMoreBtn.style.display = 'none';\n      });\n    }\n  }\n\n\n  \/\/ ================================================\n  \/\/ D. Preview STAP 1 voor STAP 2\/3\/4 (locatie-kaarten)\n  \/\/ ================================================\n\t  function updateStep1PreviewCards() {\n\t\tconst lpStored   = localStorage.getItem(LS_KEYS.license_plate) || 'Niet toegevoegd';\n\t\tconst kmStored   = localStorage.getItem(LS_KEYS.mileage) || 'Niet toegevoegd';\n\t\tconst chStored   = localStorage.getItem(LS_KEYS.chassis) || 'Niet toegevoegd';\n\t\tconst merkStored = localStorage.getItem(LS_KEYS.brand);\n\n\t\tlet carTypeText = 'Niet toegevoegd';\n\t\tconst carTypeEl = document.getElementById('car_type');\n\t\tif (carTypeEl) {\n\t\t  const idx = carTypeEl.selectedIndex;\n\t\t  if (idx > 0) {\n\t\t\tcarTypeText = carTypeEl.options[idx].text;\n\t\t  } else {\n\t\t\tconst storedSlug = localStorage.getItem(LS_KEYS.car_type);\n\t\t\tif (storedSlug) {\n\t\t\t  const opt = Array.from(carTypeEl.options).find(o => o.value === storedSlug);\n\t\t\t  if (opt) carTypeText = opt.text;\n\t\t\t}\n\t\t  }\n\t\t}\n\n\t\t\/\/ update previews\n\t\tdocument.querySelectorAll('.license_plate_preview').forEach(el => el.textContent = lpStored);\n\t\tdocument.querySelectorAll('.mileage_preview').forEach(el     => el.textContent = kmStored);\n\t\tdocument.querySelectorAll('.chassis_preview').forEach(el     => el.textContent = chStored);\n\t\tdocument.querySelectorAll('.car_type_preview').forEach(el    => el.textContent = carTypeText);\n\n\t\tdocument.querySelectorAll('.brand_preview').forEach(el => {\n\t\t  const parentP = el.closest('.brand-line');\n\t\t  if (merkStored && merkStored.trim() !== '') {\n\t\t\tel.textContent = merkStored;\n\t\t\tif (parentP) parentP.style.display = 'block';\n\t\t  } else {\n\t\t\tel.textContent = 'Not entered';\n\t\t\tif (parentP) parentP.style.display = 'none';\n\t\t  }\n\t\t});\n\t}\n\n\n  \/\/ ================================================\n  \/\/ E. localStorage: STAP 3 (Datum & tijd & mobiliteit)\n  \/\/ ================================================\n  const LS_KEYS_3 = {\n    date:            'msf_date',\n    time:            'msf_time',\n\trenting_customer: 'msf_renting_customer',\n    mobility_option: 'msf_mobility_option'\n  };\n\n  function saveStep3ValuesToStorage() {\n    const dateVal = document.getElementById('datepicker')?.value || '';\n    const timeVal = document.getElementById('selectedTimeInput')?.value || '';\n\tconst rentingVal = document.querySelector('input[name=\"renting_customer\"]:checked')?.value || '';\n    const mobVal  = document.getElementById('mobility_option')?.value || '';\n    localStorage.setItem(LS_KEYS_3.date,            dateVal);\n    localStorage.setItem(LS_KEYS_3.time,            timeVal);\n\tlocalStorage.setItem(LS_KEYS_3.renting_customer, rentingVal);\n    localStorage.setItem(LS_KEYS_3.mobility_option, mobVal);\n  }\n\n  function loadStep3ValuesFromStorage() {\n    const dateStored = localStorage.getItem(LS_KEYS_3.date);\n    const timeStored = localStorage.getItem(LS_KEYS_3.time);\n\tconst rentStored = localStorage.getItem(LS_KEYS_3.renting_customer);\n    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option);\n\n    if (dateStored !== null) {\n      const dateInput = document.getElementById('datepicker');\n      if (dateInput) dateInput.value = dateStored;\n    }\n    if (timeStored !== null) {\n      \/\/ Hidden input \u201cselectedTimeInput\u201d\n      const hiddenTimeInput = document.getElementById('selectedTimeInput');\n      if (hiddenTimeInput) hiddenTimeInput.value = timeStored;\n      \/\/ Highlight de juiste knop in de \u201cslots\u201d-div\n      document.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n        if (btn.dataset.time === timeStored) {\n          btn.classList.add('active');\n          document.getElementById('selected_time').textContent = timeStored;\n        } else {\n          btn.classList.remove('active');\n        }\n      });\n    }\n\tif (rentStored) {\n\t\tconst radio = document.querySelector(`input[name=\"renting_customer\"][value=\"${rentStored}\"]`);\n\t\tif (radio) {\n\t\t  radio.checked = true;\n\t\t  radio.dispatchEvent(new Event('change'));\n\t\t}\n\t  }\n    if (mobStored !== null) {\n      const mobSelect = document.getElementById('mobility_option');\n      if (mobSelect) mobSelect.value = mobStored;\n      document.getElementById('selected_mobility').textContent = mobStored || 'Not selected';\n    }\n  }\n\n\tfunction initStep3Listeners() {\n\t  const dateInput = document.getElementById('datepicker');\n\t  if (!dateInput) return;\n\n\t  \/\/ === Initialiseer Flatpickr met dynamische disable-functie ===\n\t  flatpickr(dateInput, {\n\t\t  inline: true,\n\t\t  dateFormat: \"Y-m-d\",\n\t\t  locale: 'nl',\n\t\t  disable: [\n\t\t\tfunction(date) {\n\t\t\t  const dow = date.getDay();\n\t\t\t  const ctText = document\n\t\t\t\t.getElementById('car_type')\n\t\t\t\t.options[\n\t\t\t\t  document.getElementById('car_type').selectedIndex\n\t\t\t\t]?.text\n\t\t\t\t.toLowerCase() || '';\n\t\t\t  \/\/ altijd zondag, en zaterdag alleen uit als personenwagen\n\t\t\t  return dow === 0 || (dow === 6 && ctText.includes('personenwagen'));\n\t\t\t}\n\t\t  ],\n\t\t  onChange(selectedDates, dateStr) {\n\t\t\tif (!selectedDates.length) return;\n\n\t\t\tconst jsDate = selectedDates[0];\n\t\t\tconst dow    = jsDate.getDay();\n\t\t\tconst ctSelect = document.getElementById('car_type');\n\t\t\tconst ctText   = ctSelect.options[ctSelect.selectedIndex]?.text.toLowerCase() || '';\n\n\t\t\t\/\/ toon de tijdkolom\n\t\t\tdocument.getElementById('selectedDateDisplay').textContent = dateStr;\n\t\t\tdocument.getElementById('timeColumn').classList.add('visible');\n\t\t\tsaveStep3ValuesToStorage();\n\t\t\tupdateStep3PreviewCards();\n\n\t\t\t\/\/ filter de knoppen\n\t\t\tdocument.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n\t\t\t  const uur = parseInt(btn.dataset.time.split(':')[0], 10);\n\t\t\t  if (dow === 6 && !ctText.includes('personenwagen')) {\n\t\t\t\t\/\/ zaterdag & niet personenwagen \u2192 enkel 08\u201311 (voor 12u)\n\t\t\t\tbtn.style.display = (uur >= 8 && uur < 12) ? 'block' : 'none';\n\t\t\t  } else {\n\t\t\t\t\/\/ alle andere dagen \/ personenwagens \u2192 alles\n\t\t\t\tbtn.style.display = 'block';\n\t\t\t  }\n\t\t\t});\n\t\t  }\n\t\t});\n\n\t  \/\/ bij wijzigen van het type wagen kalender hertekenen\n\t  document.getElementById('car_type').addEventListener('change', () => {\n\t\tconst fp = dateInput._flatpickr;\n\t\tif (fp) fp.redraw();\n\t  });\n\n\t  \/\/ === Tijd-knoppen ===\n\t  document.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n\t\tbtn.addEventListener('click', function() {\n\t\t  \/\/ active-state\n\t\t  document.querySelectorAll('#timeColumn .slots button')\n\t\t\t\t  .forEach(b => b.classList.remove('active'));\n\t\t  this.classList.add('active');\n\t\t  const chosen = this.dataset.time || '';\n\n\t\t  \/\/ hidden input\n\t\t  let hidden = document.getElementById('selectedTimeInput');\n\t\t  if (!hidden) {\n\t\t\thidden = document.createElement('input');\n\t\t\thidden.type = 'hidden';\n\t\t\thidden.name = 'time';\n\t\t\thidden.id   = 'selectedTimeInput';\n\t\t\tdocument.getElementById('multiStepForm').appendChild(hidden);\n\t\t  }\n\t\t  hidden.value = chosen;\n\n\t\t  \/\/ sla op & preview\n\t\t  saveStep3ValuesToStorage();\n\t\t  document.getElementById('selected_time').textContent = chosen || 'Not selected';\n\t\t  updateStep3PreviewCards();\n\n\t\t  \/\/ waarschuwing na 14u\n\t\t  const old = document.getElementById('msf-time-warning');\n\t\t  if (old) old.remove();\n\t\t  const uur = parseInt(chosen.split(':')[0], 10);\n\t\t  if (!isNaN(uur) && uur >= 14) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.id = 'msf-time-warning';\n\t\t\tdiv.className = 'f-1';\n\t\t\tdiv.style.cssText = 'background-color: #f3faf9; border-radius:10px; margin-top:1em;';\n\t\t\tdiv.innerHTML = `\n\t\t\t  <p id=\"tr3\">\n\t\t\t\t<strong>Let op!<\/strong> vanaf ${chosen} kunnen we niet garanderen dat de wagen vandaag zal voltooid zijn.\n\t\t\t  <\/p>`;\n\t\t\tdocument.querySelector('.kalender').appendChild(div);\n\t\t  }\n\t\t});\n\t  });\n\t\n\t\t\/\/ === Renting logica ===\n\t\tconst rentingRadios = document.querySelectorAll('input[name=\"renting_customer\"]');\n\t\tconst mobContainer  = document.getElementById('mobility-container');\n\t\tconst mobSelect     = document.getElementById('mobility_option');\n\n\t\trentingRadios.forEach(radio => {\n\t\t  radio.addEventListener('change', () => {\n\t\t\t\/\/ leeg oude opties\n\t\t\tmobSelect.innerHTML = '<option value=\"\">Maak een keuze<\/option>';\n\t\t\tif (radio.value === 'ja') {\n\t\t\t  ['Ik zal wachten','Ik wil een vervangwagen','Ik wil een fiets']\n\t\t\t\t.forEach(text => {\n\t\t\t\t  const opt = document.createElement('option');\n\t\t\t\t  opt.textContent = text;\n\t\t\t\t  mobSelect.appendChild(opt);\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t  ['Ik zal wachten','Ik wil een huurwagen ( vanaf \u20ac100 \/ dag )','Ik wil een fiets']\n\t\t\t\t.forEach(text => {\n\t\t\t\t  const opt = document.createElement('option');\n\t\t\t\t  opt.textContent = text;\n\t\t\t\t  mobSelect.appendChild(opt);\n\t\t\t\t});\n\t\t\t}\n\t\t\t\/\/ toon dropdown + opslaan\n\t\t\tmobContainer.style.display = 'block';\n\t\t\tsaveStep3ValuesToStorage();\n\t\t  });\n\t\t});\n\t\n\n\t  \/\/ === Mobiliteits-dropdown ===\n\t  const mob = document.getElementById('mobility_option');\n\t  if (mob) {\n\t\tmob.addEventListener('change', () => {\n\t\t  saveStep3ValuesToStorage();\n\t\t  document.getElementById('selected_mobility').textContent = mob.value || 'Not selected';\n\t\t  updateStep3PreviewCards();\n\t\t});\n\t  }\n\t  const preChecked = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  if (preChecked) {\n\t\t\/\/ hiermee wordt de hierboven geregistreerde change-handler \u00e9\u00e9n keer aangeroepen\n\t\tpreChecked.dispatchEvent(new Event('change'));\n\t\t\/\/ \u00e9n meteen de eerder gekozen optie selecteren in de dropdown\n\t\tconst storedMob = localStorage.getItem(LS_KEYS_3.mobility_option);\n\t\tif (storedMob) {\n\t\t  mobSelect.value = storedMob;\n\t\t  document.getElementById('selected_mobility').textContent = storedMob;\n\t\t  updateStep3PreviewCards();\n\t\t}\n\t  }\n\t}\n\n\n  \/\/ ================================================\n  \/\/ G. localStorage: STAP 4 (Contactgegevens)\n  \/\/ ================================================\n  const LS_KEYS_4 = {\n    user_type:    'msf_user_type',\n    company_name: 'msf_company_name',\n    tax_number:   'msf_tax_number',\n    first_name:   'msf_first_name',\n    surname:      'msf_surname',\n    email:        'msf_email',\n    phone:        'msf_phone',\n    message:      'msf_message',\n    create_account: 'msf_create_account',\n    agree_policy:   'msf_agree_policy'\n  };\n\n  function saveStep4ValuesToStorage() {\n    const ut = document.querySelector('input[name=\"user_type\"]:checked')?.value || '';\n    localStorage.setItem(LS_KEYS_4.user_type, ut);\n\n    if (ut === 'professional') {\n      const cn = document.querySelector('input[name=\"company_name\"]')?.value || '';\n      const tn = document.querySelector('input[name=\"tax_number\"]')?.value || '';\n      localStorage.setItem(LS_KEYS_4.company_name, cn);\n      localStorage.setItem(LS_KEYS_4.tax_number,   tn);\n    } else {\n      localStorage.removeItem(LS_KEYS_4.company_name);\n      localStorage.removeItem(LS_KEYS_4.tax_number);\n    }\n\n    const fn = document.querySelector('input[name=\"first_name\"]')?.value || '';\n    const sn = document.querySelector('input[name=\"surname\"]')?.value || '';\n    const em = document.querySelector('input[name=\"email\"]')?.value || '';\n    const ph = document.querySelector('input[name=\"phone\"]')?.value || '';\n    const ms = document.querySelector('textarea[name=\"message\"]')?.value || '';\n    const ca = document.querySelector('input[name=\"create_account\"]')?.checked || false;\n    const ap = document.querySelector('input[name=\"agree_policy\"]')?.checked || false;\n\n    localStorage.setItem(LS_KEYS_4.first_name,   fn);\n    localStorage.setItem(LS_KEYS_4.surname,      sn);\n    localStorage.setItem(LS_KEYS_4.email,        em);\n    localStorage.setItem(LS_KEYS_4.phone,        ph);\n    localStorage.setItem(LS_KEYS_4.message,      ms);\n    localStorage.setItem(LS_KEYS_4.create_account, ca ? 'yes' : 'no');\n    localStorage.setItem(LS_KEYS_4.agree_policy,   ap ? 'yes' : 'no');\n  }\n\n  function loadStep4ValuesFromStorage() {\n    const utStored = localStorage.getItem(LS_KEYS_4.user_type);\n    if (utStored) {\n      const utRadio = document.querySelector('input[name=\"user_type\"][value=\"' + utStored + '\"]');\n      if (utRadio) utRadio.checked = true;\n    }\n    \/\/ Toon of verberg bedrijfs\u2010velden\n    const proFields = document.getElementById('proFields');\n    if (proFields) {\n      proFields.style.display = (utStored === 'professional') ? 'block' : 'none';\n    }\n\n    const companyStored = localStorage.getItem(LS_KEYS_4.company_name);\n    if (companyStored !== null) {\n      document.querySelector('input[name=\"company_name\"]').value = companyStored;\n    }\n    const taxStored = localStorage.getItem(LS_KEYS_4.tax_number);\n    if (taxStored !== null) {\n      document.querySelector('input[name=\"tax_number\"]').value = taxStored;\n    }\n\n    const fnStored = localStorage.getItem(LS_KEYS_4.first_name);\n    if (fnStored !== null) {\n      document.querySelector('input[name=\"first_name\"]').value = fnStored;\n    }\n    const snStored = localStorage.getItem(LS_KEYS_4.surname);\n    if (snStored !== null) {\n      document.querySelector('input[name=\"surname\"]').value = snStored;\n    }\n    const emStored = localStorage.getItem(LS_KEYS_4.email);\n    if (emStored !== null) {\n      document.querySelector('input[name=\"email\"]').value = emStored;\n    }\n    const phStored = localStorage.getItem(LS_KEYS_4.phone);\n    if (phStored !== null) {\n      document.querySelector('input[name=\"phone\"]').value = phStored;\n    }\n    const msStored = localStorage.getItem(LS_KEYS_4.message);\n    if (msStored !== null) {\n      document.querySelector('textarea[name=\"message\"]').value = msStored;\n    }\n    const caStored = localStorage.getItem(LS_KEYS_4.create_account);\n    if (caStored === 'yes') {\n      document.querySelector('input[name=\"create_account\"]').checked = true;\n    }\n    const apStored = localStorage.getItem(LS_KEYS_4.agree_policy);\n    if (apStored === 'yes') {\n      document.querySelector('input[name=\"agree_policy\"]').checked = true;\n    }\n  }\n\n  function initStep4Listeners() {\n    \/\/ 1) \u201cType klant\u201d radiobuttons\n    document.querySelectorAll('input[name=\"user_type\"]').forEach(radio => {\n      radio.addEventListener('change', () => {\n        const sel = document.querySelector('input[name=\"user_type\"]:checked')?.value;\n        const proFields = document.getElementById('proFields');\n        if (proFields) proFields.style.display = (sel === 'professional') ? 'block' : 'none';\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n\n    \/\/ 2) Bedrijfsnaam + btw\u2010nr\n    ['company_name','tax_number'].forEach(name => {\n      const el = document.querySelector(`input[name=\"${name}\"]`);\n      if (!el) return;\n      el.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n\n    \/\/ 3) Voornaam, Achternaam, E-mail, Telefoon\n    ['first_name','surname','email','phone'].forEach(name => {\n      const el = document.querySelector(`input[name=\"${name}\"]`);\n      if (!el) return;\n      el.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n    const msgEl = document.querySelector('textarea[name=\"message\"]');\n    if (msgEl) {\n      msgEl.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n\n    \/\/ 4) \u201cMaak account\u201d\u2010checkbox\n    const caCb = document.querySelector('input[name=\"create_account\"]');\n    if (caCb) {\n      caCb.addEventListener('change', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n\n    \/\/ 5) \u201cPrivacy policy\u201d\u2010checkbox\n    const apCb = document.querySelector('input[name=\"agree_policy\"]');\n    if (apCb) {\n      apCb.addEventListener('change', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n  }\n\n\n  \/\/ =======================================================\n  \/\/ H. Preview STAP 3 in STAP 4\/5 (datum\/tijd\/mobiliteit)\n  \/\/ =======================================================\n  function updateStep3PreviewCards() {\n    const dateStored = localStorage.getItem(LS_KEYS_3.date) || 'Not selected';\n    const timeStored = localStorage.getItem(LS_KEYS_3.time) || 'Not selected';\n    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option) || 'Not selected';\n\n    document.querySelectorAll('#selected_date').forEach(el => {\n    el.textContent = dateStored;\n  });\n  document.querySelectorAll('#selected_time').forEach(el => {\n    el.textContent = timeStored;\n  });\n  document.querySelectorAll('#selected_mobility').forEach(el => {\n    el.textContent = mobStored;\n  });\n  }\n\n\n  \/\/ =======================================================\n  \/\/ I. Preview STAP 4 in STAP 5 (contactgegevens)\n  \/\/ =======================================================\n function updateStep4PreviewCards() {\n\t  \/\/ Haal user_type uit localStorage\n\t  const ut = localStorage.getItem('msf_user_type') || '';\n\t  document.querySelectorAll('.user_type_preview').forEach(el => {\n\t\tel.textContent = ut || 'Not selected';\n\t  });\n\n\t  \/\/ Toon\/verberg bedrijfsnaam + tax\u2010nummer\n\t  const showPro = (ut === 'professional');\n\t  document.querySelector('.company-line').style.display = showPro ? 'block' : 'none';\n\t  document.querySelector('.tax-line').style.display     = showPro ? 'block' : 'none';\n\n\t  \/\/ Vul bedrijfsnaam en tax_\u200bnummer\n\t  const cn = localStorage.getItem('msf_company_name') || '';\n\t  const tn = localStorage.getItem('msf_tax_number')   || '';\n\t  document.querySelectorAll('.company_name_preview').forEach(e => e.textContent = cn);\n\t  document.querySelectorAll('.tax_number_preview').forEach(e => e.textContent   = tn);\n\n\t  \/\/ Vul voornaam, achternaam, e-mail, telefoon, boodschap\n\t  const fn = localStorage.getItem('msf_first_name') || '';\n\t  const sn = localStorage.getItem('msf_surname')    || '';\n\t  const em = localStorage.getItem('msf_email')      || '';\n\t  const ph = localStorage.getItem('msf_phone')      || '';\n\t  const ms = localStorage.getItem('msf_message')    || '';\n\t  document.querySelectorAll('.first_name_preview').forEach(e => e.textContent = fn || 'Not entered');\n\t  document.querySelectorAll('.surname_preview').forEach(e    => e.textContent = sn || 'Not entered');\n\t  document.querySelectorAll('.email_preview').forEach(e      => e.textContent = em || 'Not entered');\n\t  document.querySelectorAll('.phone_preview').forEach(e      => e.textContent = ph || 'Not entered');\n\t  document.querySelectorAll('.message_preview').forEach(e    => e.textContent = ms || '\u2013 geen boodschap \u2013');\n\t}\n\n\n  \/\/ =======================================================\n  \/\/ J. Alles updaten bij laden\n  \/\/ =======================================================\n  function loadFormValuesFromStorage() {\n    \/\/ Stap 1\n    loadStep1ValuesFromStorage();\n    initStep1Listeners();\n\n    \/\/ Stap 2\n    loadStep2ValuesFromStorage();\n    initStep2Listeners();\n    updateStep2PreviewCards();\n\n    \/\/ Stap 3\n    loadStep3ValuesFromStorage();\n    initStep3Listeners();\n    updateStep3PreviewCards();\n\n    \/\/ Stap 4\n    loadStep4ValuesFromStorage();\n    initStep4Listeners();\n    updateStep4PreviewCards();\n  }\n\n  function updateAllPreviews() {\n    updateStep1PreviewCards();\n    updateStep2PreviewCards();\n    updateStep3PreviewCards();\n    updateStep4PreviewCards();\n  }\n\n\n  \/\/ =======================================================\n  \/\/ K. Initialisatie bij page load\n  \/\/ =======================================================\n  document.addEventListener('DOMContentLoaded', () => {\n\n    \/\/ 1) Step Indicators & Hash\n    \/\/initStepIndicators();\n    \/\/ 2) Lees hash (#step0\u2026#step4) indien aanwezig\n    const hash = window.location.hash;\n    if (hash && hash.startsWith('#step')) {\n      const idx = parseInt(hash.replace('#step', ''), 10);\n      if (!isNaN(idx) && idx >= 0 && idx < formSteps.length) {\n        currentStep = idx;\n      }\n    }\n    showStep(currentStep);\n\n    \/\/ 3) Laad alle opgeslagen waarden & listeners\n    loadFormValuesFromStorage();\n\n    \/\/ 4) Init \u201cMeer laden\u201d-knop (stap 2)\n    initLoadMoreButton();\n\n    \/\/ 5) Initialiseer Flatpickr, tijdselect en mobiliteit (stap 3) \u2192 zat al in initStep3Listeners()\n\n    \/\/ 6) Update alle previews (indien terug navigeren)\n    updateAllPreviews();\n\t  \n\t  (function(){\n\t\t\tconst carSelect = document.getElementById('car_type');\n\t\t\tif (!carSelect) return;\n\n\t\t\tfunction filterInterventions(){\n\t\t\t  const selected = carSelect.value;\n\t\t\t  document.querySelectorAll('.interventie-optie').forEach(label => {\n\t\t\t\tconst hl = label.dataset.highlights.split(' ').filter(s => s);\n\t\t\t\tif (selected && hl.indexOf(selected) === -1) {\n\t\t\t\t  label.style.display = 'none';\n\t\t\t\t  const cb = label.querySelector('input[type=\"checkbox\"]');\n\t\t\t\t  if (cb) cb.checked = false;\n\t\t\t\t} else {\n\t\t\t\t  label.style.display = '';\n\t\t\t\t}\n\t\t\t  });\n\t\t\t}\n\n\t\t\t\/\/ bind en init\n\t\t\tcarSelect.addEventListener('change', filterInterventions);\n\t\t\tfilterInterventions();\n\t\t  })();\n\t  \n\t  \n  });\n\n\t\n\tfunction initStep4FieldSync() {\n  const ids = [\n    'cf_company_name_formstep',\n    'cf_tax_number_formstep',\n    'cf_first_name_formstep',\n    'cf_surname_formstep',\n    'cf_email_formstep',\n    'cf_phone_formstep',\n    'cf_message_formstep',\n    'cf_create_account_formstep',\n    'cf_agree_policy_formstep'\n  ];\n  ids.forEach(id => {\n    const el = document.getElementById(id);\n    if (!el) return;\n    el.addEventListener('input', syncAllValuesToCF7);\n    el.addEventListener('change', syncAllValuesToCF7);\n  });\n}\n\t\n\n\t\n\tdocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ \u2026 je bestaande initialisaties voor stap 1\u20133 \u2026\n  initStep4FieldSync();\n\n  \/\/ \u201cMeer laden\u201d knop, flatpickr, enz. \u2026\n\n  const cf7Button = document.getElementById('cf7SubmitButton');\n  if (cf7Button) {\n    cf7Button.addEventListener('click', function(e) {\n      e.preventDefault();\n      \/\/ Zorg dat alle waarden in CF7-velden staan\n      syncAllValuesToCF7();\n      \/\/ Vind het CF7\u2010formulier in de DOM:\n      const cf7Form = document.querySelector('#cf7-wrapper form.wpcf7-form');\n      if (cf7Form) {\n        \/\/ klik op het verborgen CF7-submit\u2010veld:\n        cf7Form.querySelector('input[type=\"submit\"]').click();\n      }\n    });\n  }\n});\n\n\t\n\t\n\tdocument.addEventListener('wpcf7invalid', function(e) {\n  showStep(3); \/\/ blijf in stap 4 als validatie fout gaat\n}, false);\n\ndocument.addEventListener('wpcf7spam', function(e) {\n  showStep(3);\n}, false);\n\ndocument.addEventListener('wpcf7mailfailed', function(e) {\n  alert('Er is een fout opgetreden bij het verzenden. Probeer later opnieuw.');\n  showStep(3);\n}, false);\n\t\n\t\n\t\n\t\n\t\n  \/\/ =======================================================\n  \/\/ L. Verzenden naar CF7 & Bevestiging\n  \/\/ =======================================================\n  function verzendNaarCF7EnBevestig(event) {\n    event.preventDefault();\n\n    \/\/ MAP Multi-Step \u2192 CF7: ID\u2019s\n    const mapping = [\n      { msf: 'license_plate',       cf7: 'cf7_license_plate' },\n      { msf: 'mileage',             cf7: 'cf7_mileage' },\n\t  { msf: 'chassis',             cf7: 'cf7_chassis' },\n      { msf: 'car_type',            cf7: 'cf7_car_type' },\n      { msf: 'brand_select',        cf7: 'cf7_brand' },\n      { msf: 'datepicker',          cf7: 'cf7_date' },\n      { msf: 'selectedTimeInput',   cf7: 'cf7_time' },\n      { msf: 'mobility_option',     cf7: 'cf7_mobility_option' },\n      { msf: 'first_name',          cf7: 'cf7_first_name' },\n      { msf: 'surname',             cf7: 'cf7_surname' },\n      { msf: 'email_formstep',      cf7: 'cf7_email' },\n      { msf: 'phone',               cf7: 'cf7_phone' },\n      { msf: 'message_formstep',    cf7: 'cf7_message' },\n      \/\/ \u201cuser_type\u201d \u2192 CF7\u2010radio\n      { msf: 'userTypeHolder',      cf7: 'cf7_user_type' },     \n      { msf: 'company_name',        cf7: 'cf7_company_name' },\n      { msf: 'tax_number',          cf7: 'cf7_tax_number' }\n    ];\n\n    \/\/ Waarden kopi\u00ebren\n    mapping.forEach(pair => {\n      const msfEl = document.getElementById(pair.msf);\n      const cf7El = document.getElementById(pair.cf7);\n      if (!msfEl || !cf7El) return;\n\n      \/\/ Radio \u201cuser_type\u201d: we slaan de waarde (checked radio) in een hidden <input id=\"userTypeHolder\">\n      if (pair.msf === 'userTypeHolder') {\n        \/\/ Bepaal welke radio \u201cuser_type\u201d is aangevinkt\n        const checkedRadio = document.querySelector('input[name=\"user_type\"]:checked');\n        cf7El.value = checkedRadio ? checkedRadio.value : '';\n      } else {\n        cf7El.value = msfEl.value || '';\n      }\n    });\n\t  \n\t  const rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  const cf7Rent = document.getElementById('cf7_renting_customer');\n\t  if (rent && cf7Rent) {\n\t\tcf7Rent.value = rent.value;\n\t  }\n\n    \/\/ Inventory (max. 3) \u2192 bundle als comma\u2010string\n    const checkedInterventies = Array.from(\n      document.querySelectorAll('.inventory-checkbox:checked')\n    ).map(cb => cb.dataset.title.trim());\n    const invField = document.getElementById('cf7_inventory_ids');\n    if (invField) {\n      invField.value = checkedInterventies.join(', ');\n    }\n\n    \/\/ \u201cMaak account\u201d\u2010checkbox \u2192 CF7\n    const makeAccountChecked = !!document.getElementById('create_account_formstep')?.checked;\n    document\n\t  .querySelectorAll('#hidden-cf7 input[name=\"create_account[]\"]')\n\t  .forEach((cb) => {\n\t\tcb.checked = makeAccountChecked;\n\t  });\n\n    \/\/ \u201cPrivacy policy\u201d verplicht \u2192 CF7\n    const cf7Agree = document.getElementById('cf7_agree_policy');\n    if (cf7Agree) {\n      cf7Agree.checked = true;\n    }\n\n    \/\/ Submit het verborgen CF7-formulier\n    const cf7Form = document.querySelector('#hidden-cf7 form');\n    if (cf7Form) {\n  const cf7SendBtn = cf7Form.querySelector('input[type=\"submit\"]');\n  if (cf7SendBtn) {\n    cf7SendBtn.click();\n  }\n}\n  }\n\n  \/\/ Bind MSF\u2010submit (indien het formulier bestaat)\n \/* document.addEventListener('DOMContentLoaded', function () {\n    const msfForm = document.getElementById('multiStepForm');\n    if (msfForm) {\n      msfForm.addEventListener('submit', verzendNaarCF7EnBevestig);\n    }\n  });*\/\n\t\n\t\n\tdocument.addEventListener('wpcf7mailsent', function(event) {\n\n\t\tconst MIJN_CF7_ID = 2709;\n\t\tif (event.detail.contactFormId === MIJN_CF7_ID) {\n\t\t  const laatsteStapIndex = formSteps.length - 1; \n\t\t  window.location.hash = 'step' + laatsteStapIndex;\n\t\t  showStep(laatsteStapIndex);\n\n\t\t  if (window.confetti) {\n\t\t\tconfetti({\n\t\t\t  particleCount: 100,\n\t\t\t  spread: 70,\n\t\t\t  origin: { y: 0.6 }\n\t\t\t});\n\t\t  }\n\t\t}\n\t  }, false);\n\t\n\tfunction clearMSFData() {\n\t  \/\/ 1) localStorage keys verwijderen\n\t  const keys = [\n\t\t'msf_license_plate',\n\t\t'msf_mileage',\n\t\t'msf_chassis',\n\t\t'msf_car_type',\n\t\t'msf_brand',\n\t\t'msf_interventies',\n\t\t'msf_date',\n\t\t'msf_time',\n\t\t'msf_renting_customer',\n\t\t'msf_mobility_option',\n\t\t'msf_user_type',\n\t\t'msf_company_name',\n\t\t'msf_tax_number',\n\t\t'msf_first_name',\n\t\t'msf_surname',\n\t\t'msf_email',\n\t\t'msf_phone',\n\t\t'msf_message',\n\t\t'msf_create_account',\n\t\t'msf_agree_policy'\n\t  ];\n\t  keys.forEach(k => localStorage.removeItem(k));\n\n\t  \/\/ 2) Reset alle invoervelden in de multi-step form\n\t  const form = document.getElementById('multiStepForm');\n\t  if (form) {\n\t\tform.reset();\n\t  }\n\n\t  \/\/ 3) Zet alle interventie-checkboxen terug naar \u201cniet\u2010selected\u201d\n\t  document.querySelectorAll('.inventory-checkbox').forEach(cb => {\n\t\tcb.checked = false;\n\t\tcb.disabled = false;\n\t\tconst lab = cb.closest('label');\n\t\tif (lab) {\n\t\t  lab.classList.remove('selected');\n\t\t  lab.style.opacity = '1';\n\t\t}\n\t  });\n\n\t  \/\/ Let op: n\u00edet de preview\u2010velden (license_plate_preview, mileage_preview, etc.) leegschrijven!\n\t}\n\t\n\twindow.addEventListener('hashchange', function() {\n\t  const h = window.location.hash;\n\t  if (h.startsWith('#wpcf7')) {\n\t\twindow.location.hash = 'step' + currentStep;\n\t  }\n\t});\n\t\n\t\/\/ ====================\n  \/\/ Z. Confetti-functie\n  \/\/ ====================\n  function launchConfetti() {\n    \/\/ Zorg dat het confetti-effect \u00e9\u00e9n keer start\n    \/\/ Je kunt de opties naar wens aanpassen (aantal deeltjes, snelheid, kleuren, enz.).\n    confetti({\n      particleCount: 150,\n      spread: 70,\n      origin: { y: 0.6 }\n    });\n  }\n\t\n\t\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 1) syncAllValuesToCF7: kopie\u0308er alle waarden uit jouw multi-step\u2010velden \n  \/\/    naar de corresponderende CF7\u2010velden (hidden inputs).\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function syncAllValuesToCF7() {\n    \/\/ Helper\u2010functies om enkel te schrijven als het element bestaat\n    function setIfExists(id, value) {\n      const el = document.getElementById(id);\n      if (el) el.value = value;\n    }\n    function checkIfExists(id, checked) {\n      const el = document.getElementById(id);\n      if (el) el.checked = checked;\n    }\n\n    \/\/ \u2014 Stap 1 (Wagen) \u2014\n    const lp = document.getElementById('license_plate')?.value || '';\n    const km = document.getElementById('mileage')?.value || '';\n\tconst ch = document.getElementById('chassis')?.value || '';\n    const ct = document.getElementById('car_type')?.value || '';\n    const br = document.getElementById('brand_select')?.value || '';\n\n    \/\/ \u2014 Stap 2 (Interventies) \u2014\n    const checked = Array.from(document.querySelectorAll('.inventory-checkbox:checked'));\n\tconst names = checked.map(cb => cb.dataset.title.trim()).join(', ');\n\tconst ids = checked.map(cb => cb.value).join(',');\n\n    \/\/ \u2014 Stap 3 (Datum, Tijd & Mobility) \u2014\n    const dt = document.getElementById('datepicker')?.value || '';\n    const tm = document.getElementById('selectedTimeInput')?.value || '';\n\tconst rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n    const mo = document.getElementById('mobility_option')?.value || '';\n\n    \/\/ \u2014 Stap 4 (Persoonsgegevens) \u2014\n    const ut = document.querySelector('input[name=\"user_type\"]:checked')?.value || '';\n    const cn = document.getElementById('company_name_formstep')?.value || '';\n    const tn = document.getElementById('tax_number_formstep')?.value || '';\n    const fn = document.getElementById('first_name_formstep')?.value || '';\n    const sn = document.getElementById('surname_formstep')?.value || '';\n    const em = document.getElementById('email_formstep')?.value || '';\n    const ph = document.getElementById('phone_formstep')?.value || '';\n    const ms = document.getElementById('message_formstep')?.value || '';\n    const ca = !!document.getElementById('create_account_formstep')?.checked;\n    const ap = document.getElementById('agree_policy_formstep')?.checked;\n\n    \/\/ \u2014 Vul de corresponderende CF7-velden (pas deze IDs aan naar jouw CF7-shortcode) \u2014\n    setIfExists('cf7_license_plate', lp);\n    setIfExists('cf7_mileage', km);\n\tsetIfExists('cf7_chassis', ch);\n    setIfExists('cf7_car_type', ct);\n    setIfExists('cf7_brand', br);\n    setIfExists('cf7_interventies', names);\n\tsetIfExists('cf7_inventory_ids', ids);\n    setIfExists('cf7_date', dt);\n    setIfExists('cf7_time', tm);\n\tsetIfExists('cf7_renting_customer', rent ? rent.value : '');\n    setIfExists('cf7_mobility_option', mo);\n    setIfExists('cf7_user_type', ut);\n    setIfExists('cf7_company_name', cn);\n    setIfExists('cf7_tax_number', tn);\n    setIfExists('cf7_first_name', fn);\n    setIfExists('cf7_surname', sn);\n    setIfExists('cf7_email', em);\n    setIfExists('cf7_phone', ph);\n    setIfExists('cf7_message', ms);\n    document\n  .querySelectorAll('#hidden-cf7 input[name=\"create_account[]\"]')\n  .forEach((cb) => {\n    cb.checked = ca;\n  });\n    checkIfExists('cf7_agree_policy', ap);\n  }\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 2) \u201cLive\u201d listeners: zodra een bronveld verandert, roep direct syncAllValuesToCF7() aan\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function initCF7SyncListeners() {\n    \/\/ Helper: registeer evenementlistener als element bestaat\n    function onEvent(id, eventName) {\n      const el = document.getElementById(id);\n      if (el) el.addEventListener(eventName, syncAllValuesToCF7);\n    }\n\n    \/\/ --- Stap 1: tekst en select velden ---\n    onEvent('license_plate', 'input');\n    onEvent('mileage', 'input');\n    onEvent('car_type', 'change');\n    onEvent('brand_select', 'change');\n\n    \/\/ --- Stap 2: interventie-checkboxes ---\n    document.querySelectorAll('.inventory-checkbox').forEach(cb => {\n      cb.addEventListener('change', syncAllValuesToCF7);\n    });\n\n    \/\/ --- Stap 3: datum & tijd & mobiliteit ---\n    \/\/ Flatpickr selecteert datum, deze gebruikt onChange; we luisteren op het verborgen <input> zelf:\n    onEvent('datepicker', 'change');          \/\/ indien je Flatpickr onchange naar dat input zet\n    onEvent('selectedTimeInput', 'change');    \/\/ verborgen tijd-input\n\tdocument.querySelectorAll('input[name=\"renting_customer\"]').forEach(radio => {\n\t  radio.addEventListener('change', syncAllValuesToCF7);\n\t});\n    onEvent('mobility_option', 'change');\n\n    \/\/ Tijd-knoppen:\n    document.querySelectorAll('.slots button').forEach(btn => {\n      btn.addEventListener('click', () => {\n        \/\/ nadat tijd in het verborgen veld is gezet, sync:\n        setTimeout(syncAllValuesToCF7, 0);\n      });\n    });\n\n    \/\/ --- Stap 4: persoonsgegevens ---\n    onEvent('company_name_formstep', 'input');\n    onEvent('tax_number_formstep', 'input');\n    onEvent('first_name_formstep', 'input');\n    onEvent('surname_formstep', 'input');\n    onEvent('email_formstep', 'input');\n    onEvent('phone_formstep', 'input');\n    onEvent('message_formstep', 'input');\n    \/\/ radio buttons:\n    document.querySelectorAll('input[name=\"user_type\"]').forEach(radio => {\n      radio.addEventListener('change', syncAllValuesToCF7);\n    });\n    \/\/ checkboxes in stap 4:\n    onEvent('create_account_formstep', 'change');\n    onEvent('agree_policy_formstep', 'change');\n  }\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 3) Wanneer CF7\u2010formulier er is, onderscheppen we ook 'submit' om zeker alles mee te geven\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  document.addEventListener('DOMContentLoaded', function() {\n    \/\/ 3a) start de live\u2010listeners\n    initCF7SyncListeners();\n    \/\/ 3b) onderschep CF7 submit\n    const cf7Wrapper = document.getElementById('hidden-cf7');\n    if (!cf7Wrapper) return;\n    setTimeout(() => {\n      const cf7Form = cf7Wrapper.querySelector('form.wpcf7-form');\n      if (!cf7Form) return;\n      cf7Form.addEventListener('submit', function() {\n        syncAllValuesToCF7();\n      });\n    }, 200);\n  });\n\n\n  function onStepChange(newStepIndex) {\n    \/\/ Als we net Stap 4 hebben ingevuld en op Next klikken:\n    if (newStepIndex === 4) {\n      \/\/ Eerst waarden synchroniseren naar CF7\n      syncAllValuesToCF7();\n      \/\/ Scrollen naar het verborgen CF7-formulier (optioneel)\n      const cf7Anchor = document.getElementById('hidden-cf7');\n      if (cf7Anchor) {\n        cf7Anchor.scrollIntoView({ behavior: 'smooth' });\n      }\n    }\n    \/\/ De rest van je bestaande onStepChange-logica (bv. validatie per stap) blijft ongewijzigd.\n  }\n\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 3) CF7-submit-event onderscheppen en w\u00e9\u00e9r syncAllValuesToCF7 aanroepen\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  document.addEventListener('DOMContentLoaded', function() {\n    const cf7Wrapper = document.getElementById('hidden-cf7');\n    if (!cf7Wrapper) return;\n\n    \/\/ Wacht kort tot CF7 zijn form heeft gegenereerd\n    setTimeout(() => {\n      const cf7Form = cf7Wrapper.querySelector('form.wpcf7-form');\n      if (!cf7Form) return;\n\n      cf7Form.addEventListener('submit', function(e) {\n        syncAllValuesToCF7();\n        \/\/ Daarna laat CF7 gewoon verder verzenden\n      });\n    }, 200);\n  });\n<\/script>\n\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n  \/\/ TIJDBUTTONS IN DE RECHTERKOLOM\n  const timeButtons = document.querySelectorAll('#timeColumn .slots button');\n  timeButtons.forEach(btn => {\n    btn.addEventListener('click', () => {\n      \/\/ Verwijder .active van alle knoppen\n      timeButtons.forEach(b => b.classList.remove('active'));\n      \/\/ Voeg .active toe aan de geklikte knop\n      btn.classList.add('active');\n      \/\/ Schrijf de gekozen tijd weg in het verborgen input-veld\n      const gekozen = btn.getAttribute('data-time');\n      document.getElementById('selectedTimeInput').value = gekozen;\n      localStorage.setItem('msf_time', gekozen);\n\n      \/\/ Update preview in stap 4\/5\n      const previewTime = document.getElementById('selected_time');\n      if (previewTime) previewTime.textContent = gekozen || 'Not selected';\n    });\n  });\n\n  \/\/ 3) LAAD EERDERE WAARDEN UIT localStorage\n  const storedDate = localStorage.getItem('msf_date');\n  const storedTime = localStorage.getItem('msf_time');\n  if (storedDate) {\n    \/\/ Stel de datum in Flatpickr in\n    const fpInstance = document.querySelector('#datepicker')._flatpickr;\n    fpInstance.setDate(storedDate, true);\n  }\n  if (storedTime) {\n    \/\/ Markeer de juiste tijdknop\n    const knop = document.querySelector(\n      `#timeColumn .slots button[data-time=\"${storedTime}\"]`\n    );\n    if (knop) knop.classList.add('active');\n    document.getElementById('selectedTimeInput').value = storedTime;\n  }\n});\n\t\n\t\/\/ pak je form\n\/*const msfForm = document.getElementById('multiStepForm');\nmsfForm.addEventListener('submit', function(e) {\n  \/\/ all\u00e9\u00e9n stap 3 (index 3) validatie\n  if (currentStep === 3) {\n    \/\/ verwijder oude foutmeldingen\n    document.querySelectorAll('.msf-error').forEach(el => el.remove());\n\n    let ok = true;\n    \/\/ veld-validaties\n    ['first_name_formstep','surname_formstep','email_formstep']\n      .forEach(id => {\n        const el = document.getElementById(id);\n        if (!el.value.trim()) {\n          el.insertAdjacentHTML('afterend',\n            '<div class=\"msf-error\">Dit veld is verplicht<\/div>'\n          );\n          ok = false;\n        }\n      });\n\n    \/\/ privacy checkbox\n    const agreeEl = document.getElementById('agree_policy_formstep');\n    if (!agreeEl.checked) {\n      const wrapper = agreeEl.closest('.checkbox-container');\n      wrapper.insertAdjacentHTML('beforeend',\n        '<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>'\n      );\n      ok = false;\n    }\n\n    if (!ok) {\n      e.preventDefault();      \/\/ formulier niet versturen\n      \/\/ blijf op stap 3\n      showStep(3);\n    }\n  }\n});*\/\n\t\n\tdocument.getElementById('msfFinalBtn').addEventListener('click', function() {\n  \/\/ eerst uitvoeren wat nextStep() doet voor stap 3 \u2192 privacy-validatie\n  \/\/ maar in plaats van showStep(4), doen we nu de submit naar CF7\n\n  \/\/ 1) run je bestaande validatie voor currentStep===3:\n  let ok = true;\n  document.querySelectorAll('.msf-error').forEach(e=>e.remove());\n  ['first_name_formstep','surname_formstep','email_formstep'].forEach(id=>{\n    const el=document.getElementById(id);\n    if(!el.value.trim()){\n      el.insertAdjacentHTML('afterend','<div class=\"msf-error\">Dit veld is verplicht<\/div>');\n      ok=false;\n    }\n  });\n  const agreeEl = document.getElementById('agree_policy_formstep');\n  if(!agreeEl.checked){\n    agreeEl.closest('.checkbox-container')\n      .insertAdjacentHTML('beforeend','<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>');\n    ok=false;\n  }\n  if(!ok){\n    showStep(3);\n    return;\n  }\n\n  \/\/ 2) als alles ok is: syncAllValuesToCF7() \u00e9n trigger CF7\n  syncAllValuesToCF7();\n  const cf7Form = document.querySelector('#hidden-cf7 form');\n  cf7Form.querySelector('input[type=\"submit\"]').click();\n});\n\t\n\tdocument.addEventListener('DOMContentLoaded', function(){\n\t  const emailEl    = document.getElementById('email_formstep');\n\t  const caContainer= document.getElementById('ca-container');\n\t  const haveAcc    = document.getElementById('have-account-container');\n\t  const createCb   = document.getElementById('create_account_formstep');\n\t  const openBtns  = document.querySelectorAll('.msf-open-login');\n\t  const closeBtn   = document.getElementById('msf-close-login');\n\t  const modal      = document.getElementById('msf-login-modal');\n\t\t\n\n\t  \/\/ 1) Check bij blur of e-mail al bestaat\n\t  emailEl.addEventListener('blur', () => {\n\t\tconst email = emailEl.value.trim();\n\t\tif (!email) return;\n\t\tconst data = new URLSearchParams({ action:'check_email_exists', email });\n\t\tfetch('https:\/\/miers.be\/wp-admin\/admin-ajax.php', {\n\t\t  method:'POST',\n\t\t  headers:{'Content-Type':'application\/x-www-form-urlencoded'},\n\t\t  body: data.toString()\n\t\t})\n\t\t.then(r=>r.json())\n\t\t.then(res=>{\n\t\t  if (res.success && res.data.exists) {\n\t\t\t\/\/ verberg \u201cMaak account\u201d en toon login-link\n\t\t\tcaContainer.style.display   = 'none';\n\t\t\thaveAcc.style.display       = 'block';\n\t\t\tcreateCb.checked            = false;\n\t\t  } else {\n\t\t\tcaContainer.style.display   = '';\n\t\t\thaveAcc.style.display       = 'none';\n\t\t  }\n\t\t});\n\t  });\n\n\t  openBtns.forEach(btn => {\n\t\tbtn.addEventListener('click', function(e) {\n\t\t  e.preventDefault();\n\t\t  modal.classList.add('open');\n\t\t});\n\t  });\n\n\t  closeBtn.addEventListener('click', function() {\n\t\tmodal.classList.remove('open');\n\t  });\n\t});\n\t\n\tdocument.addEventListener('wpcf7beforesubmit', function(event) {\n\t  var rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  var hidden = event.target.querySelector('input[type=\"hidden\"][name=\"renting_customer\"]');\n\t  if (rent && hidden) {\n\t\thidden.value = rent.value;\n\t  }\n\t}, false);\n\n\tdocument.addEventListener('DOMContentLoaded', function () {\n  const cf7Root = document.getElementById('hidden-cf7');\n  if (!cf7Root) return;\n\n  const cf7Form = cf7Root.querySelector('form.wpcf7-form');\n  if (!cf7Form) return;\n\n  if (!cf7Form.id) {\n    cf7Form.id = 'cf7-form-2709';\n  }\n  const fileInput = cf7Form.querySelector('input[type=\"file\"]#bestanden');\n  if (!fileInput) return;\n\n  const wrap = fileInput.closest('.wpcf7-form-control-wrap');\n  if (!wrap) return;\n\n  const slot = document.getElementById('msf-upload-slot');\n  if (!slot) return;\n  slot.appendChild(wrap);\n  fileInput.setAttribute('form', cf7Form.id);\n\n  if (!slot.querySelector('.msf-upload-title')) {\n    const title = document.createElement('div');\n    title.className = 'msf-upload-title';\n    title.style.marginTop = '12px';\n    title.style.fontWeight = '600';\n    title.textContent = \"Foto's\/bestanden toevoegen\";\n    slot.prepend(title);\n  }\n});\n<\/script>\n\n\n\n\n<style>\n  option {\n    color: #0C5453;\n}\n  \n  \n  \n  .flatpickr-rContainer {\n    display: inline-grid !important\n;\n    padding: 0;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n  \n  \n  \n  \n  .slots button\nSpecificity: (0,1,1)\n {\n    WIDTH: 20% ! IMPORTANT;\n}\n  \n  \n  \n  .flatpickr-rContainer {\n    width: 309px ! IMPORTANT;\n}\n  \n  \n  \n  span.flatpickr-day  {\n    background-color: #e6e6e6;\n    color: #000;\n}\n  \n  span.flatpickr-day.nextMonthDay {\n    background-color: #e6e6e6;\n    color: #000;\n}\n  \n  \n  \n  \n\n  span.flatpickr-day.selected {\n    background-color: #0C5453 !important;\n}\n  \n  \n  \n  .preview {\n  \n    padding: 10px;\n    border-radius: 10px;\n \n}\n  \n  \n  p {\n    padding-bottom: 0px !important;\n}\n  \n  \n  form.register {\n    text-align: left;\n}\n .et_builder_inner_content {\n    z-index: inherit !important;\n}\n.et_pb_column {  \n    z-index: auto !important;    \n}\n  \n  \n  \n  \n  \n  \n  \n  .form-buttons input[type=\"submit\"] {\n    width: 20% !important;\n    color: #ffffff;\n    background-color: #0C5453;\n}\n  .f-123 h3 {\n    font-size: 20px !important;\n    text-align: left !important;\n}\n  \n  .f-123 label.selected {\n    background-color:  #0C5453;;\n  }\n\n.f-123 input[type=\"checkbox\"] {\n    display:none;\n}\n  .f-123 label.selected img {\n    filter: brightness(0) invert(1); \/* Makes image appear white *\/\n  }\n<\/style>\n\n<style>\n   \n \/* Step Indicator *\/\n.step-container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    border-bottom: 2px solid #ccc;\n    margin-bottom: 20px;\n}\n\n.step {\n    flex: 1 1 20%;\n    text-align: center;\n    padding: 10px;\n    color: gray;\n    font-weight: bold;\n    display: flex\n;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    font-size: 14px;\n    border: 1px solid #ccc;\n}\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n.f-123 {\n  background-color: #ffffff;\n  \n  flex: 0 0 60%;\n  box-sizing: border-box;\n}\n\t.f-123.interventies {\n  background-color: transparent!important;\n\t\t}\n\ninput[type=\"number\"] {\n    padding: 18px !important;\n\tfont-size:16px!important;\n}\n\n.form-step input, .form-step select, .form-step textarea {\n    width: 100%;\n    padding: 10px;\n    margin: 10px 7px;\n    border-radius: 5px;\n    border: 1px solid #ccc;\n    box-sizing: border-box;\n}\nlabel {\n    width: 48%;\n  color: #0C5453;\n}\n.f-123 {\n    padding: 18px 18px;\n    border-radius: 10px;\n}\n.f-124 {\n    padding: 18px 18px;\n    border-radius: 10px;\n}\nform#multiStepForm h3 {\n    text-align: center;\n    padding: 20px;\n    font-size: 30px;\n    color: #0C5453;\n}\n.Inventory-2 {\n  display: flex;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 20px;\n  margin-top: 20px;\n}\n\n.Inventory-2 label {\n  \/*display: flex;*\/\n  flex-direction: column;\n  align-items: center;\n  border: 2px solid #0C5453;\n  border-radius: 16px;\n  padding: 20px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  background: #fff;\n}\n\n.Inventory-2 label:hover {\n  box-shadow: 0 0 10px rgba(0, 181, 165, 0.2);\n}\n\n\n\n.Inventory-2 input[type=\"checkbox\"]:checked + img,\n.Inventory-2 input[type=\"checkbox\"]:checked ~ img {\n  filter: brightness(0) invert(1);\n}\n\n.Inventory-2 input[type=\"checkbox\"]:checked ~ span {\n  color: #fff;\n}\n\n.Inventory-2 input[type=\"checkbox\"]:checked ~ label {\n  background-color: #0C5453;\n  color: white;\n  border-color: #0C5453;\n}\n\n\n.Inventory-2 span {\n  font-size: 16px;\n  color: #0C5453;\n  font-weight: 500;\n  transition: color 0.3s ease;\n}\n\n.step.completed {\n  color: #00bcd4;\n}\n\n.step.active {\n  border-bottom: 3px solid #0C5453;\n  color: #0C5453 !important;\n  \n}\n\n\n\n\/* Form Step *\/\n.form-step {\n  display: none;\n  background: #f6f6f6;\n  padding: 20px;\n  border-radius: 10px;\n  \n}\n\n.form-step.active {\n  display: block;\n}\n\n.form-step input,\n.form-step select,\n.form-step textarea {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  box-sizing: border-box;\n}\n\n.form-buttons {\n  text-align: right;\n  margin-top: 15px;\n}\n\n.form-buttons button {\n  padding: 10px 20px;\n  background-color: #0C5453;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  margin-left: 10px;\n}\n.location-card {\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 15px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n  justify-content: space-between;\n \u00a0gap: 15px;\n\tmargin-bottom:10px;\n}\n\n\n\n.location-details {\n  flex-grow: 1;\n  color: #333;\n  font-size: 14px;\n}\n\n.location-details strong {\n  color: #000;\n}\n\n.location-edit {\n  color: #b0b0b0;\n  font-size: 14px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.Inventory-2 input[type=\"checkbox\"]:checked + img, .Inventory-2 input[type=\"checkbox\"]:checked ~ img {\n    filter: contrast(-1.5) !important;\n}\n.Inventory-2 label {\n    width: 30%;\n}\nspan.mk-098 {\n    display: block;\n}\n.calendar-container {\n  display: flex;\n  gap: 40px;\n  margin-top: 20px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n#datepicker {\n  border: none;\n}\n\n.time-slots {\n  display: none;\n}\n\n.time-slots p {\n  margin-bottom: 10px;\n  font-weight: 600;\n}\n\n.slots {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.slots button {\n  border: 1px solid #00a89c;\n  background: white;\n  color: #00a89c;\n  border-radius: 20px;\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n\n.slots button.active,\n.slots button:hover {\n  background-color: #00a89c;\n  color: white;\n}\n.flatpickr-calendar.inline {\n    width: 490px;\n}\n.flatpickr-rContainer {\n    width: 490px;\n}\n.flatpickr-days {\n    width: 490px;\n}\n.radio-2 label {\n  display: inline-block;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.radio-2 input[type=\"radio\"] {\n  margin-right: 5px;\n}\ninput[type=\"radio\"] {\n    width: auto ! IMPORTANT;\n}\ninput[type=\"checkbox\"] {\n    width: auto !important;\n    margin-right: 10px;\n}\n.Inventory-2 input[type=\"checkbox\"] {\n    width: 100% !important;\n}\n\/* Responsive Styles *\/\n@media (max-width: 768px) {\n  .step {\n    flex: 1 1 50%;\n    font-size: 13px;\n  }\n\n  .form-buttons {\n    text-align: center;\n  }\n\n  .form-buttons button {\n    margin-top: 10px;\n    width: 100%;\n  }\n}\n@media (max-width: 600px) {\n  .location-card {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .location-edit {\n    align-self: flex-end;\n    margin-top: 10px;\n  }\n}\n@media (max-width: 480px) {\n  .step {\n    flex: 1 1 100%;\n    font-size: 12px;\n    padding: 8px;\n  }\n\n  .form-step {\n    padding: 15px;\n  }\n\n  .form-step input,\n  .form-step select,\n  .form-step textarea {\n    padding: 8px;\n    font-size: 14px;\n  }\n\n  .form-buttons button {\n    font-size: 14px;\n    padding: 10px;\n  }\n}\n\n   p#tr3 {\n    border: solid 1px #0C5453;\n    padding: 20px!important;\n    border-radius: 20px;\n    color: #0C5453;\n    font-weight: 400;\n\t   margin-bottom:20px;\n\t   text-align:left;\n}\n  \n  \n\n  \n  \n  .flatpickr-innerContainer {\n    display: flow ! IMPORTANT;   \n}\n  .flatpickr-weekdays {\n    WIDTH: 63% ! IMPORTANT;\n}\n  \n  div#b3 label {\n    border: solid 1px #0C5453;\n    padding: 10px;\n    border-radius: 10px;\n    color: #0C5453;\n}\n  div#b3 input[type=\"radio\"] {\n    accent-color: #0C5453;\n}\n  \n  \n  .last-3 {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    font-family: sans-serif;\n  }\n\n  .type-klant-label {\n    font-weight: 600;\n    color: #2da49c;\n        width: 24%;\n  }\n\n  .radio-2 {\n    display: flex;\n    gap: 1rem;\n    align-items: center;\n    width: 80%;\n  }\n\n#brand_select.searchable-dropdown {\n  height: 42px !important;\n  box-sizing: border-box;\n}\n\n\n.select2-container--default .select2-selection--single {\n  height: 42px !important;\n  margin-top: 10px !important;\n  box-sizing: border-box;\n}\n\n\n.select2-container--default .select2-selection--single .select2-selection__rendered {\n  line-height: 426px !important;\n}\n\n\n.select2-container--default .select2-selection--single .select2-selection__arrow {\n  height: 42px !important;\n}\n  \n  .hidden-more {\n  display: none;\n}\n  \n  \/* Verberg extra interventies in eerste weergave *\/\n.hidden-more {\n  display: none;\n}\n\n\/* Wanneer een interventie is geselecteerd *\/\n.f-123 label.selected {\n  background-color: #0C5453;\n  color: #fff;\n}\n.f-123 label.selected img {\n  filter: brightness(0) invert(1);\n}\n\n\/* Standaard on\u2010selected labels (om ervoor te zorgen dat de tekst in #0C5453 blijft) *\/\n.f-123 label {\n  color: #0C5453;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Image\u2010transition (altijd aanwezig) *\/\n.Inventory-2 img {\n  transition: filter 0.3s ease;\n}\n\t\n\/* --------------------------------------------------\n   1) Forceer .f-123 en .f-124 in .f-row op 60% \/ 38%\n   -------------------------------------------------- *\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap; \/* indien scherm te smal, stapelen ze onder elkaar *\/\n}\n\n\n\n\/* -------------------------------------------------------\n   2) Maak .Inventory-2 tot flex-wrap: 4 items per rij\n   ------------------------------------------------------- *\/\n.Inventory-2 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  margin-top: 10px;\n}\n\n\/* Elk label neemt ongeveer 25% breedte (minus gap) *\/\n.Inventory-2 label.interventie-optie {\n  flex: 0 0 calc(25% - 20px);\n  max-width: calc(25% - 20px);\n  box-sizing: border-box;\n  \/*display: flex;*\/\n  flex-direction: column;\n  align-items: center;\n  border: 2px solid #0C5453;\n  border-radius: 16px;\n  padding: 20px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  background: #fff;\n}\n\n.Inventory-2 label.interventie-optie:hover {\n  box-shadow: 0 0 10px rgba(0, 181, 165, 0.2);\n}\n\n\/* Standaard: niet\u2010geselecteerde labels *\/\n.f-123 label.interventie-optie {\n  color: #0C5453;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Geselecteerde labels *\/\n.f-123 label.selected {\n  background-color: #0C5453;\n  color: #fff;\n}\n.f-123 label.selected img {\n  filter: brightness(0) invert(1);\n}\n\n\/* Hidden-more: vanaf de 7e in \u201cMeer interventies\u201d *\/\n.hidden-more {\n  display: none;\n}\n\n\/* \u201cMeer laden\u2026\u201d-knop *\/\n.btn-load-more {\n  padding: 8px 24px;\n  background-color: #0C5453;\n  color: #fff;\n  border: 1px solid #0C5453;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n.btn-load-more:hover {\n  background-color: transparent;\n\tcolor: #0C5453;\n}\n\n\/* Image-transition (altijd aanwezig) *\/\n.Inventory-2 img {\n  width: 62.3px;\n  transition: filter 0.3s ease;\n}\n\t\n\t\/* Step 3 *\/\n.kalender {\n\t\tbackground-color: #fff;\n\t\tborder-radius:20px;\n\tpadding:20px;\n\t}\n\t\n\t\n\t\n\t\/* ---------------------------------------------------\n   ALLE KLEUREN & STYLING F\u00d6R FLATPICKR & TIJDSELECTIE\n   --------------------------------------------------- *\/\n\n\/* Container voor kalender + tijd *\/\n.calendar-time-container {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n\/* Linker kolom: de inline Flatpickr *\/\n.calendar-column {\n  flex: 2 1 300px;   \/* minimaal 300px breed *\/\n  position: relative;\/* zodat maand\/jaar-dropdowns linksboven komen *\/\n}\n\n\/* Rechter kolom: tijdselectie *\/\n.time-column {\n  flex: 1 1 150px;   \/* minimaal 150px breed *\/\n  display: none;     \/* pas zichtbaar nadat datum gekozen *\/\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: sans-serif;\n}\n.time-column.visible {\n  display: flex;\n\tmargin:auto;\n}\n\/* \u201cKies eerst een datum\u201d of de gekozen datum *\/\n.selected-date-display {\n  font-size: 16px;\n  color: #0C5453;\n  margin-bottom: 10px;\n  font-weight: bold;\n}\n\n\/* TIJD BUTTONS *\/\n.time-column .slots {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.time-column .slots button {\n  width: 100%;\n  border: 1px solid #888888;\n  background: white;\n  color: #626262;\n  border-radius: 10px;\n  padding: 8px 12px;\n  text-align: center;\n  font-size: 14px;\n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n\tpadding: 1px 30px;\n}\n.time-column .slots button.active,\n.time-column .slots button:hover {\n  background-color: #0C5453;\n  color: white;\n  border-color: #0C5453;\n}\n\n\/* FLATPICKR OVERRIDES *\/\n\/* Verberg standaard input (we tonen alleen inline kalender) *\/\n#datepicker {\n  display: none;\n}\n\n\/* Maak flatpickr inline kalender full-width in container *\/\n.flatpickr-calendar.inline {\n  width: 100% !important;\n  max-width: 420px;        \/* pas eventueel aan *\/\n  border: none;\n  box-shadow: none;\n}\n\n\n\n\/* WEEKDAGEN LIJN (MO, DI, WO, DO, VR, ZA, ZO) *\/\n\/* Onderliggend gebruiken we Flatpickr locale-shorthand. We styleen met groene rand en afgeronde hoeken *\/\n.flatpickr-weekday {\n  font-weight: 600;\n  font-size: 14px!important;\n  color: #0C5453!important;\n  border: 1px solid #0C5453;\n  margin: 2px;\n\twidth: 40px;\n    height: 27px;\n    line-height: 27px!important;\n    text-align: center;\n    margin: 2px!important;\n    border-radius: 10px;\n    background-color: transparent!important;\n\t\n}\n\n\/* DAGEN-REGIO *\/\n.flatpickr-days {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n}\n\n\/* Elke dagcel *\/\n.flatpickr-day {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n  text-align: center;\n  margin: 2px;\n  border: none;\n  border-radius: 10px;   \n  background-color: rgba(136, 136, 136, 0.05)!important; \n  color: #626262;     \n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Niet-selecteerbare (disabled) datums, incl. weekend *\/\n.flatpickr-day.disabled {\n  background-color: #f0f0f0 !important;\n  color: #cccccc !important;\n  cursor: not-allowed;\n}\n\n\/* Hover-effect enkel voor actieve (selecteerbare) dagen *\/\n.flatpickr-day:not(.disabled):hover {\n  background-color: #0C5453!important;\n  color: #ffffff;\n}\n\n\/* Geselecteerde dag *\/\n.flatpickr-day.selected {\n  background-color: #0C5453 !important;\n  color: #ffffff !important;\n}\n\n\/* Focused dag (toetsenbordnavigatie) *\/\n.flatpickr-day:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(44,160,144,0.5);\n}\n\n\/* Verberg standaard grid voor weeknummers e.d. *\/\n.flatpickr-weekWrapper,\n.flatpickr-weekdaycontainer {\n  \/* we vangen .flatpickr-weekdaycontainer er al mee, maar extra zekerheid *\/\n  margin: 0;\n  padding: 0;\n}\n\n\/* Ruimte rondom de kalender (optioneel) *\/\n.flatpickr-innerContainer {\n  padding: 0;\n  margin: 0;\n}\n\t\n\t\/* =======================================================\n   1) Zorg dat de header (maand + jaar + pijltjes) zichtbaar is\n   ======================================================= *\/\n\n\/* Maak de header (de container met pijltjes en maandnaam) altijd zichtbaar *\/\n.flatpickr-months {\n  display: flex !important;\n  align-items: center;\n  justify-content: center; \/* Je gebruikte dit al inline, maar we herhalen het hier *\/\n  background: transparent !important; \/* zorg dat er geen achtergrondkleur van elders overheen komt *\/\n  margin-bottom: 8px;\n}\n\n\/* Pijltjes < en > *\/\n.flatpickr-prev-month,\n.flatpickr-next-month {\n  font-size: 20px !important;\n  color: #0C5453 !important;      \/* Of een andere accentkleur naar wens *\/\n  cursor: pointer;\n  user-select: none;\n  padding: 0 10px;\n}\n\n\/* Container waarin de maandnaam en het jaarnummer zitten *\/\n.flatpickr-current-month {\n  align-items: center;\n  gap: 6px;\n}\n\n\/* De maandnaam (\u201cJuli\u201d, \u201cMei\u201d, etc.) *\/\n.flatpickr-current-month .cur-month {\n  font-size: 16px !important;\n  color: #333333 !important;       \/* Tekstkleur van de maandnaam *\/\n  font-weight: 600;\n  text-transform: capitalize;      \/* Zorgt dat \u2018mei\u2019 \u2192 \u2018Mei\u2019 wordt, etc. *\/\n}\n\n\/* Het jaarnummer (input field met pijltjes omhoog\/omlaag) *\/\n.flatpickr-current-month .cur-year {\n  width: 50px !important;          \/* Genoeg breedte voor 4\u2010cijferig jaar *\/\n  font-size: 16px !important;\n  color: #333333 !important;\n  font-weight: 600;\n  text-align: center; \n  border: none !important;         \/* Geen rand rond het input\u2010veld *\/\n  background: transparent !important; \/* Doorzichtig, zodat het niet blinkt *\/\n  box-shadow: none !important;     \/* Verwijder eventuele schaduw of outline *\/\n  appearance: none !important;     \/* Verwijder browser\u2010specifieke pijltjes\/styling *\/\n  -moz-appearance: textfield !important;\n}\n\n\/* Verberg de pijltjes binnen het input\u2010jaarnummer (omdat we geen spin\u2010controls willen zien) *\/\n.flatpickr-current-month .cur-year::-webkit-outer-spin-button,\n.flatpickr-current-month .cur-year::-webkit-inner-spin-button {\n  -webkit-appearance: none !important;\n  margin: 0;\n}\n.flatpickr-current-month .cur-year[type=\"number\"] {\n  -moz-appearance: textfield !important;\n}\n\n\/* =======================================================\n   2) Optioneel: iets meer padding\/marge aan de header geven\n   ======================================================= *\/\n\n\/* Zet wat ruimte boven de kalender, zodat hij niet \u201caan je form\u201d kleeft *\/\n.flatpickr-calendar {\n  margin-top: 10px !important;\n}\n\n\/* =======================================================\n   3) Controleer dat er geen regel is die .flatpickr\u2010tekst \u201cverbergt\u201d\n   ======================================================= *\/\n\n\/* Soms zet men in een thema global \u201cinput { color: transparent; }\u201d of \u201c.flatpickr\u2010* { display: none }\u201d \n   Controleer je eigen CSS op zulk soort regels en overschrijf ze zo nodig: *\/\n.flatpickr-current-month,\n.flatpickr-prev-month,\n.flatpickr-next-month {\n \n  visibility: visible !important;\n  opacity: 1 !important;\n}\n\t\n\t.flatpickr-current-month .numInputWrapper {\n\t\tdisplay:none!important;\n\t}\n\t\n\t\/* 1) Zorg dat de header een flex-container is *\/\n.flatpickr-months {\n  display: flex !important;\n  align-items: center;\n  justify-content: space-between; \/* pijltjes en maand verdelen zich over de breedte *\/\n  padding: 0 10px;                \/* optioneel wat ruimte aan linker-\/rechterzijde *\/\n}\n\n\/* 2) Laat de maand-container (flatpickr-month) groeien zodat cur-month in het midden staat *\/\n.flatpickr-month {\n  flex: 1;                        \/* neemt alle resterende ruimte in beslag tussen de pijltjes *\/\n  display: block!important;\n  justify-content: center;       \/* centreert de cur-month horizontaal *\/\n}\n\n\/* 3) Verberg het jaarnummer-inputveld (numInputWrapper) *\/\n.flatpickr-current-month .numInputWrapper {\n  display: none !important;\n}\n\n\/* 4) Optioneel: style het cur-month zelf nog iets *\/\n.flatpickr-current-month .cur-month {\n  font-size: 16px !important;\n  font-weight: 400;\n  color: #0C5453!important;       \/* of welke kleur je wilt *\/\n  text-transform: capitalize;\n}\n\n\/* 5) Style de pijltjes: *\/\n.flatpickr-prev-month,\n.flatpickr-next-month {\n  font-size: 20px !important;\n  color: #0C5453 !important;\n  cursor: pointer;\n  user-select: none;\n  padding: 0 8px;\n}\n\t\n\t\/* ===================================================================\n   Stap 4: Layout en styling ingavevelden\n   =================================================================== *\/\n\n\/* F-rij: twee kolommen naast elkaar *\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n\n\/* ==== Input-paar: twee inputs naast elkaar ==== *\/\n.input-pair {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n.input-pair input {\n  flex: 1;\n}\n\n\/* Zakelijk-velden: standaard verborgen *\/\n.pro-fields {\n  display: none;\n  margin-bottom: 16px;\n}\n\n\/* ==== Algemene stijl voor tekstvelden en textarea ==== *\/\n.f-123 input[type=\"text\"]:not(#license_plate):not(#chassis),\n.f-123 input[type=\"email\"],\n.f-123 textarea {\n  width: 100%;\n  padding: 8px 4px;\n  margin: 0; \n  font-size: 14px;\n  color: #0C5453;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid #0C5453;\n\tborder-radius:0px!important;\n  box-sizing: border-box;\n  outline: none;\n}\n\n\/* Placeholder-kleur iets lichter *\/\n.f-123 input::placeholder,\n.f-123 textarea::placeholder {\n  color: #888888;\n}\n\n\/* Bij focus onderlijn accentueren *\/\n.f-123 input:focus,\n.f-123 textarea:focus {\n  border-bottom: 2px solid #0C5453;\n  color: #222222;\n}\n\n\/* Textarea min-hoogte *\/\n.f-123 textarea {\n  min-height: 80px;\n  resize: vertical;\n}\n\n\/* ==== Radiobuttons \u201cType klant\u201d ==== *\/\n.type-klant-container {\n  margin-bottom: 20px;\n}\n.type-klant-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 8px;\n  color: #0C5453;\n  font-size: 14px;\n}\n.radio-2 {\n  display: flex;\n  gap: 20px;\n}\n.radio-2 label {\n  display: inline-flex;\n  align-items: center;\n  font-size: 14px;\n  color: #333333;\n  cursor: pointer;\n  gap: 4px;\n  user-select: none;\n}\n.radio-2 input[type=\"radio\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: #0C5453; \/* groen accent voor bolletje *\/\n}\n\n\/* ==== Checkbox-container (custom versie) ==== *\/\n.checkbox-container {\n  margin: 12px 0;\n}\n.checkbox-container input[type=\"checkbox\"] {\n  display: none; \/* verberg standaard element *\/\n}\n.custom-checkbox-label {\n  position: relative;\n  padding-left: 28px;\n  font-size: 14px;\n  color: #333333;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n}\n.custom-checkbox-label::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 18px;\n  height: 18px;\n  border: 2px solid #ccc;\n  border-radius: 4px;\n  background: #ffffff;\n  box-sizing: border-box;\n  transition: border-color 0.2s ease, background-color 0.2s ease;\n}\n.custom-checkbox-label::after {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 50%;\n  transform: translateY(-50%) scale(0);\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 15%, 80% 0, 43% 62%);\n  \/* een eenvoudig vink-icoon met polygon *\/\n  transition: transform 0.15s ease;\n  opacity: 0;\n}\n.checkbox-container input[type=\"checkbox\"]:checked + .custom-checkbox-label::before {\n  border-color: #0C5453;\n  background-color: #0C5453;\n}\n.checkbox-container input[type=\"checkbox\"]:checked + .custom-checkbox-label::after {\n  transform: translateY(-50%) scale(1);\n  opacity: 1;\n}\n\n\/* Link in checkbox-tekst *\/\n.custom-checkbox-label a {\n  color: #0C5453;\n  text-decoration: underline;\n}\n\n\/* ==== Overzicht-kaarten (rechter kolom) ==== *\/\n.location-card {\n  display: flex;\n  align-items: flex-start;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 12px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n  margin-bottom: 16px;\n  gap: 12px;\n}\n.icon-box img {\n  width: 50px;\n  height: 50px;\n}\n.location-details {\n  flex-grow: 1;\n  font-size: 14px;\n  color: #333333;\n}\n.location-details strong {\n  color: #000;\n}\n.selected_images_preview span {\n  display: inline;\n  margin-right: 6px;\n  font-weight: 500;\n  color: #0C5453;\n}\n\n\/* ==== Form-knoppen onderaan ==== *\/\n.form-buttons {\n  text-align: right;\n  margin-top: 20px;\n}\n.form-buttons button,\n.form-buttons input[type=\"submit\"] {\n  background-color: #0C5453;\n  color: #ffffff;\n  border: 1px solid #0C5453;\n  border-radius: 5px;\n  padding: 10px 20px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.form-buttons button:hover,\n.form-buttons input[type=\"submit\"]:hover {\n  background-color: transparent;\n  color: #0C5453;\n}\n\/* Zorg dat de label + radiobuttons naast elkaar komen *\/\n.type-klant-container {\n  display: flex;\n  align-items: center;\n  gap: 10px; \/* afstand tussen \u201cType klant:\u201d en de knoppen *\/\n}\n\n\/* Reset eventuele vaste breedte op het label zodat het meegroeit met de tekst *\/\n.type-klant-container .type-klant-label {\n  width: auto;\n  margin: 0;\n  white-space: nowrap;\n}\n\t.radio-2 label {\n\t\twidth:auto!important;\n\t}\n\t\n#hidden-cf7 { \n  display: none !important; \n}\n\n#msf-step-4.active #hidden-cf7 { \n  display: block !important; \n}\n\n#hidden-cf7 .wpcf7-form > * { display: none !important; }\n#hidden-cf7 .msf-file-only { display: block !important; }\n#hidden-cf7 input[type=\"submit\"],\n#hidden-cf7 .wpcf7-response-output,\n#hidden-cf7 .wpcf7-spinner { display:none !important; }\n.msf-error {\n  color: #e74c3c;\n  font-size: 0.9em;\n  margin-top: 4px;\n}\n\n#multiStepForm .form-step:nth-of-type(1) .f-123 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n}\n\n\/* Labels 2-per-rij *\/\n#multiStepForm .form-step:nth-of-type(1) .f-123 > label {\n  flex: 0 0 calc(50% - 10px);\n}\n\n\/* Heading over beide kolommen *\/\n#multiStepForm .form-step:nth-of-type(1) .f-123 > h4 {\n  flex: 0 0 100%;\n}\n\t\n\t\n\t\/* container voor je login-modal *\/\n.msf-modal {\n  display: none;               \/* standaard verborgen *\/\n  position: fixed;\n  top: 0; left: 0;\n  width: 100%;  height: 100%;\n  background: rgba(0,0,0,0.5);\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n\/* wanneer we de class \u201copen\u201d toevoegen, tonen we hem *\/\n.msf-modal.open {\n  display: flex;\n}\n.msf-modal-content {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  max-width: 400px;\n  width: 100%;\n}\n\t\n\t\/* Modal container *\/\n.msf-modal-content {\n  background: #fff;\n  padding: 2rem;\n  border-radius: 0.5rem;\n  max-width: 400px;\n  margin: 2rem auto;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n  font-family: inherit;\n}\n\n\/* Form labels *\/\n.msf-modal-content label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: 600;\n  color: #333;\n}\n\n\/* Text inputs *\/\n.msf-modal-content .input {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  font-size: 1rem;\n  border: 1px solid #ccd0d4;\n  border-radius: 0.375rem;\n  margin-bottom: 1rem;\n  box-sizing: border-box;\n  transition: border-color 0.2s;\n}\n.msf-modal-content .input:focus {\n  border-color: #0C5453;\n  outline: none;\n}\n\n\/* Checkbox row *\/\n.msf-modal-content .login-remember {\n  margin-bottom: 1.5rem;\n}\n.msf-modal-content .login-remember input {\n  vertical-align: middle;\n  margin-right: 0.5rem;\n}\n\n\/* Submit button *\/\n.msf-modal-content .button-primary {\n  background: #0C5453;\n  border: none;\n  color: #fff;\n  padding: 0.75rem 1.5rem;\n  border-radius: 0.375rem;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.msf-modal-content .button-primary:hover {\n  background: #238a75;\n}\n\n\/* Close button *\/\n#msf-close-login {\n  display: block;\n  margin: 1.5rem auto 0;\n  background: transparent;\n  border: 1px solid #ccd0d4;\n  color: #555;\n  padding: 0.5rem 1rem;\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: background-color 0.2s, color 0.2s;\n}\n#msf-close-login:hover {\n  background: #f7f7f7;\n  color: #333;\n}\n\t\n\t\/* ==========================================\n   Step Indicators: Only on small screens\n   ==========================================\n*\/\n@media (max-width: 768px) {\n  .step-container {\n    display: flex;\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n  .step-container .step {\n    flex: 0 0 auto;\n    min-width: 80px;\n    padding: 8px 4px;\n    font-size: 12px;\n  }\n}\n\n\/* ==========================================\n   Two-column form layout\n   ==========================================\n*\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n.f-123 {\n  flex: 1 1 60%;\n  min-width: 60%;\n  box-sizing: border-box;\n}\n.f-124 {\n  flex: 1 1 38%;\n  min-width: 30%;\n  box-sizing: border-box;\n}\n\n\/* Stack columns under 768px *\/\n@media (max-width: 768px) {\n  .f-123,\n  .f-124 {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n}\n\t\n\t@media (max-width: 640px) {\n\t\t.f-124 {\n\t\t\tdisplay:none;\n\t\t}\t\n\t\t\n.f-123 {\n    padding: 0px;\n    border-radius: 10px;\n}\n\t\t.form-step {\n   padding: 10px!important;\n}\n.form-step {\n    padding: 0px;\n}\n\n.Inventory-2 label.interventie-optie {\n    flex: 0 0 45%;\n    max-width: 45%;\n    padding: 20px 5px;\n}\n\t\tform#multiStepForm h3 {\n    font-size: 25px;\n}\n\n  .calendar-column .flatpickr-days,\n  .calendar-column .flatpickr-rContainer {\n    width: auto !important;\n\n  }\n\t\t.flatpickr-weekdays {\n\t\t\twidth:100%!important;\n\t\t}\n\n  .calendar-column .flatpickr-day {\n    width: 30px      !important;\n    height: 30px     !important;\n    line-height: 30px!important;\n    margin: 2px      !important;\n    font-size: 0.75em!important;\n  }\n\t\t\n\n\n\n}\n\t\n\t@media (max-width: 768px) {\n  \/* make your two-up labels collapse to 100% *\/\n  #multiStepForm .form-step:nth-of-type(1) .f-123 > label {\n    flex: 0 0 100% !important;\n  }\n}\n\t\n\t\n\t\n\t\n\n\/* ==========================================\n   Base styles (unique rules)\n   ==========================================\n*\/\n.form-step {\n  background: #f6f6f6;\n  padding: 20px;\n  border-radius: 10px;\n}\n  <\/style>\n\n\n\n    \n    \n    \n    \n    \n    \n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/l10n\/nl.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.5.1\/dist\/confetti.browser.min.js\"><\/script>\n   \n<div class=\"step-container\" id=\"stepIndicator\">\n  <div   class=\"step active\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Wagen<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Interventies<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Datum &amp; uur<\/div>\n  <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Gegevens<\/div>\n   <div class=\"step\"><span class=\"icon\"><i class=\"fa fa-check\" style=\"font-size:18px\"><\/i><\/span>Bevestiging<\/div>\n <\/div>\n  \n  \n<div id=\"multiStepForm\" class=\"msf-form\">\n\t\t<div class=\"form-step active\">\n\t\t  <h3>Voer de gegevens van jouw wagen in<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<div class=\"f-123\">\n\t\t\t  <h4>Vul hier in<\/h4>\n\n\t\t\t  <label>\n\t\t\t\tNummerplaat <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<input id=\"license_plate\" type=\"text\" name=\"license_plate\" required>\n\t\t\t  <\/label>\n\t\t\t  <label>\n\t\t\t\tKilometerstand <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<input id=\"mileage\" type=\"number\" name=\"mileage\" required>\n\t\t\t  <\/label>\n\t\t\t  <label>\n\t\t\t\tChassisnummer\n\t\t\t\t<input id=\"chassis\" type=\"text\" name=\"chassis\" required>\n\t\t\t  <\/label>\n\n\t\t\t  \t\t\t  <label>\n\t\t\t\tType wagen <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<select id=\"car_type\" name=\"car_type\" required>\n\t\t\t\t  <option value=\"\">Selecteer type\u2026<\/option>\n\t\t\t\t  \t\t\t\t\t\t\t\t\t\t  <option value=\"bestelwagens-groot\">\n\t\t\t\t\t\tBestelwagens groot\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"bestelwagens-klein\">\n\t\t\t\t\t\tBestelwagens klein\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"opleggers\">\n\t\t\t\t\t\tOpleggers\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"personenwagens\">\n\t\t\t\t\t\tPersonenwagens\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"trekkers\">\n\t\t\t\t\t\tTrekkers\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t\t  <option value=\"vrachtwagens\">\n\t\t\t\t\t\tVrachtwagens\t\t\t\t\t  <\/option>\n\t\t\t\t\t\t\t\t\t  \t\t\t\t<\/select>\n\t\t\t  <\/label>\n\n\t\t\t  \t\t\t  <label>\n\t\t\t\tMerk\n\t\t\t\t<select id=\"brand_select\" name=\"brand\" class=\"searchable-dropdown\">\n\t\t\t\t  <option value=\"\">Selecteer merk\u2026<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"A&amp;D\">\n\t\t\t\t\t  A&amp;D\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Citro\u00ebn\">\n\t\t\t\t\t  Citro\u00ebn\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"DAF\">\n\t\t\t\t\t  DAF\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Ford\">\n\t\t\t\t\t  Ford\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Iveco\">\n\t\t\t\t\t  Iveco\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Krone\">\n\t\t\t\t\t  Krone\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"K\u00f6gel\">\n\t\t\t\t\t  K\u00f6gel\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"LAG trailers\">\n\t\t\t\t\t  LAG trailers\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"MAN\">\n\t\t\t\t\t  MAN\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Mercedes\">\n\t\t\t\t\t  Mercedes\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Opel\">\n\t\t\t\t\t  Opel\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Peugeot\">\n\t\t\t\t\t  Peugeot\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Renault\">\n\t\t\t\t\t  Renault\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Scania\">\n\t\t\t\t\t  Scania\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Schmitz Cargobull\">\n\t\t\t\t\t  Schmitz Cargobull\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Smart\">\n\t\t\t\t\t  Smart\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Van Hool\">\n\t\t\t\t\t  Van Hool\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Volvo\">\n\t\t\t\t\t  Volvo\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t\t<option value=\"Andere\">\n\t\t\t\t\t  Andere\t\t\t\t\t<\/option>\n\t\t\t\t  \t\t\t\t<\/select>\n\t\t\t  <\/label>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t  <div class=\"msf-note\" style=\"margin-top: 1em; font-size: 14px; text-align: center;\">\n\t\t\t\tHeb je al een account? \n\t\t\t\t<a href=\"#\" id=\"msf-open-login-step1\" class=\"msf-open-login\">Klik hier om in te loggen<\/a>.\n\t\t\t  <\/div>\n\t\t\t\n\n\t\t\t<\/div> <!-- einde f-123 -->\n\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div> <!-- einde form-step -->\n  \n\n\t\t<div class=\"form-step\">\n\t\t  <h3>Selecteer tot 3 interventies<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- LINKS: keuzevak (.f-123, 60% breed) -->\n\t\t\t<div class=\"f-123 interventies\">\n\t\t\t  <!-- ---- \u201cMeest gekozen\u201d sectie ---- -->\n\t\t\t  <h4>Onze populairste interventies<\/h4>\n\t\t\t  <div class=\"Inventory-2\">\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2083\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Remmen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-remmen.png\"\n\t\t\t\t\t\t alt=\"Remmen\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Remmen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2081\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Onderhoud\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-onderhoud.png\"\n\t\t\t\t\t\t alt=\"Onderhoud\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Onderhoud<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2078\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Keuring\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-technische-keuring.png\"\n\t\t\t\t\t\t alt=\"Keuring\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Keuring<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2631\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Carrosserie\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-carrosserie.png\"\n\t\t\t\t\t\t alt=\"Carrosserie\"\n\t\t\t\t\t\t height=\"40\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Carrosserie<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t  <\/div><!-- .Inventory-2 -->\n\n\t\t\t  <br><br>\n\n\t\t\t  <!-- ---- \u201cMeer interventies\u201d sectie ---- -->\n\t\t\t  <h4>Meer interventies<\/h4>\n\t\t\t  <div class=\"Inventory-2\">\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2734\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Frigo\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-frigo.png\"\n\t\t\t\t\t\t alt=\"Frigo\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Frigo<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2085\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Schokdempers\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-schokdempers.png\"\n\t\t\t\t\t\t alt=\"Schokdempers\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Schokdempers<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2084\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Ruitenwissers\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-ruitenwissers.png\"\n\t\t\t\t\t\t alt=\"Ruitenwissers\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Ruitenwissers<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2080\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Koplampen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-koplampen.png\"\n\t\t\t\t\t\t alt=\"Koplampen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Koplampen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2079\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Glasbreuk\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-glasbreuk.png\"\n\t\t\t\t\t\t alt=\"Glasbreuk\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Glasbreuk<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie \"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2077\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Distributieriem\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-distributieriem.png\"\n\t\t\t\t\t\t alt=\"Distributieriem\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Distributieriem<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2076\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Batterij\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-batterij.png\"\n\t\t\t\t\t\t alt=\"Batterij\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Batterij<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2075\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Check Up\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-check-up.png\"\n\t\t\t\t\t\t alt=\"Check Up\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Check Up<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2082\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Banden\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-banden.png\"\n\t\t\t\t\t\t alt=\"Banden\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Banden<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2073\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Airco\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-airco.png\"\n\t\t\t\t\t\t alt=\"Airco\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Airco<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2074\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Accessoires\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-centraal-slot-en-alarm.png\"\n\t\t\t\t\t\t alt=\"Accessoires\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Accessoires<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2072\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Truckwash\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-truckwash.png\"\n\t\t\t\t\t\t alt=\"Truckwash\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Truckwash<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2070\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Elektrische problemen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-elektrische-problemen.png\"\n\t\t\t\t\t\t alt=\"Elektrische problemen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Elektrische problemen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2071\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Koelsysteem\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-koeling.png\"\n\t\t\t\t\t\t alt=\"Koelsysteem\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Koelsysteem<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2068\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Laadklep\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-laadklep.png\"\n\t\t\t\t\t\t alt=\"Laadklep\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Laadklep<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein opleggers personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2069\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Luchtleidingen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-luchtleidingen.png\"\n\t\t\t\t\t\t alt=\"Luchtleidingen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Luchtleidingen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2067\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Motor\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-motor.png\"\n\t\t\t\t\t\t alt=\"Motor\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Motor<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2066\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Olie verversen\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-olie-verversen.png\"\n\t\t\t\t\t\t alt=\"Olie verversen\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Olie verversen<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2065\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Stuur\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-stuur.png\"\n\t\t\t\t\t\t alt=\"Stuur\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Stuur<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2057\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Uitlaat\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-uitlaat.png\"\n\t\t\t\t\t\t alt=\"Uitlaat\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Uitlaat<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"bestelwagens-groot bestelwagens-klein personenwagens trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2629\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Versnellingsbak\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-versnellingsbak.png\"\n\t\t\t\t\t\t alt=\"Versnellingsbak\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Versnellingsbak<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <label class=\"interventie-optie hidden-more\"\n\t\t\t\t\t\t data-highlights=\"trekkers vrachtwagens\">\n\t\t\t\t\t<input type=\"checkbox\"\n\t\t\t\t\t\t   name=\"inventory_ids[]\"\n\t\t\t\t\t\t   value=\"2630\"\n\t\t\t\t\t\t   class=\"inventory-checkbox\"\n\t\t\t\t\t\t   data-title=\"Tachygraaf\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/miers.be\/wp-content\/uploads\/2025\/06\/icon-tachygraaf.png\"\n\t\t\t\t\t\t alt=\"Tachygraaf\"\n\t\t\t\t\t\t width=\"48\" height=\"48\"\n\t\t\t\t\t\t style=\"transition: filter 0.3s ease;\">\n\t\t\t\t\t<span class=\"mk-098\">Tachygraaf<\/span>\n\t\t\t\t  <\/label>\n\t\t\t\t\t\t\t\t  <button type=\"button\" id=\"loadMoreBtn\" class=\"btn-load-more\">Meer laden\u2026<\/button>\n\t\t\t\t\t\t\t  <\/div><!-- .Inventory-2 -->\n\t\t\t<\/div><!-- .f-123 interventies -->\n\n\n\t\t\t<!-- RECHTS: preview (.f-124, 38% breed) -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\n\t\t\t  <!-- Vaste locatie\u2010kaart -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\n\t\t\t  <!-- Preview\u2010kaart STEP 1 -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\n\t\t\t  <!-- Preview\u2010kaart interventies (titels) -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" id=\"nextStepBtn\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div> <!-- einde form-step -->\n\n\t \n\t \n\t\t <div class=\"form-step\">\n\t\t  <h3>Selecteer datum en uur<\/h3>\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- === LINKER KOLOM: FLATPICKR === -->\n\t\t\t<div class=\"f-123\" style=\"background-color: #f6f6f6;\">\n\t\t\t  <div class=\"f-1\" style=\"background-color: #f3faf9;\">\n\t\t\t\t<p id=\"tr3\">\n\t\t\t\t  <strong>Let op!<\/strong> Dit is een aanvraag om een afspraak vast te leggen, \n\t\t\t\t  deze moet eerst bevestigd worden. Wacht op de bevestiging van uw verdeler voordat \n\t\t\t\t  u naar de werkplaats komt.<br>\n\t\t\t\t<\/p>\n\t\t\t  <\/div>\n\t\t\t\t\n\t\t\t  <div class=\"f-1 kalender\">\n\t\t\t\t  <label>Uw gewenste datum en uur selecteren <span style=\"color: #e74c3c;\">*<\/span><\/label>\n\t\t\t\t<div class=\"calendar-time-container\">\n\t\t\t\t  <!-- 1a) Flatpickr calendar -->\n\t\t\t\t  <div class=\"calendar-column\">\n\t\t\t\t\t<!-- We verbergen het standaard Flatpickr-inputveld zelf (maar laten het inline kalenderpaneel zien) -->\n\t\t\t\t\t<input\n\t\t\t\t\t  type=\"text\"\n\t\t\t\t\t  id=\"datepicker\"\n\t\t\t\t\t  name=\"date\"\n\t\t\t\t\t  placeholder=\"Selecteer een datum\"\n\t\t\t\t\t  readonly\n\t\t\t\t\t  required\n\t\t\t\t\t\/>\n\t\t\t\t  <\/div>\n\t\t\t\t  <!-- 1b) Tijdselectie rechts -->\n\t\t\t\t  <div class=\"time-column\" id=\"timeColumn\">\n\t\t\t\t\t<!-- Hier komt de \u201cVrijdag 9\/05\u201d bv te staan -->\n\t\t\t\t\t<div id=\"selectedDateDisplay\" class=\"selected-date-display\">Kies eerst een datum<\/div>\n\t\t\t\t\t<div class=\"slots\">\n\t\t\t\t\t  <button type=\"button\" data-time=\"08:00\">08:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"09:00\">09:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"10:00\">10:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"11:00\">11:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"14:00\">14:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"15:00\">15:00<\/button>\n\t\t\t\t\t  <button type=\"button\" data-time=\"16:00\">16:00<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<!-- Verborgen input om de gekozen tijd door te sturen -->\n\t\t\t\t\t<input type=\"hidden\" name=\"time\" id=\"selectedTimeInput\" required>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<br><br>\n\t\t\t\t<div class=\"f-1\" id=\"renting-question\">\n\t\t\t\t  <label><strong>Ben je een renting klant? <span style=\"color:#e74c3c\">*<\/span><\/strong><\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"renting_customer\" value=\"ja\"> Ja<\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"renting_customer\" value=\"nee\"> Nee<\/label>\n\t\t\t\t<\/div>\n\t\t\t\t<div id=\"mobility-container\" style=\"display:none;\">\n\t\t\t\t  <label>\n\t\t\t\t\tMobiliteitsoplossing <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t\t<select id=\"mobility_option\" name=\"mobility_option\" required>\n\t\t\t\t\t  <option value=\"\">Maak een keuze<\/option>\n\t\t\t\t\t<\/select>\n\t\t\t\t  <\/label>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div>\n\n\t\t\t<!-- === RECHTER KOLOM: OVERZICHT (wagen + interventies) === -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t\t<div class=\"preview\">\n\t\t\t\t\t  <span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t  <div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t  <div>1730 Kobbegem \u2013 Asse<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div>\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" onclick=\"nextStep()\">Volgende<\/button>\n\t\t  <\/div>\n\t\t<\/div>\n\t \n\t \n\t \t \n\n\t\t<div class=\"form-step\" id=\"msf-step-4\">\n\t\t  <h3>Controleer en vul je gegevens aan<\/h3>\n\n\t\t  <div class=\"f-row\">\n\t\t\t<!-- LINKER KOLOM: INGAVEVELDEN -->\n\t\t\t<div class=\"f-123\">\n\t\t\t  <!-- Type klant (Particulier \/ Zakelijk) -->\n\t\t\t  <div class=\"type-klant-container\">\n\t\t\t\t<label class=\"type-klant-label\">Type klant:<\/label>\n\t\t\t\t<div id=\"b3\" class=\"radio-2\">\n\t\t\t\t  <label><input type=\"radio\" name=\"user_type\" value=\"private\" checked id=\"user_type_private_formstep\"> Particulier<\/label>\n\t\t\t\t  <label><input type=\"radio\" name=\"user_type\" value=\"professional\" id=\"user_type_professional_formstep\"> Zakelijk<\/label>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- Zakelijk-velden (Bedrijfsnaam + BTW) -->\n\t\t\t  <div id=\"proFields\" class=\"input-pair pro-fields\">\n\t\t\t\t<input type=\"text\" name=\"company_name\" id=\"company_name_formstep\" placeholder=\"Bedrijfsnaam\">\n\t\t\t\t<input type=\"text\" name=\"tax_number\" id=\"tax_number_formstep\" placeholder=\"BTW-nummer\">\n\t\t\t  <\/div>\n\n\t\t\t  <!-- Voornaam + Achternaam -->\n\t\t\t  <div class=\"input-pair\">\n\t\t\t  <input type=\"text\" name=\"first_name\" id=\"first_name_formstep\" placeholder=\"Voornaam *\" required value=\"\" >\n\t\t\t  <input type=\"text\" name=\"surname\" id=\"surname_formstep\" placeholder=\"Achternaam *\" required value=\"\" >\n\t\t\t<\/div>\n\n\t\t\t  <!-- E-mail + Telefoonnummer -->\n\t\t\t  <div class=\"input-pair\">\n\t\t\t\t<input type=\"email\" name=\"email\" id=\"email_formstep\" placeholder=\"E-mail *\" required value=\"\" >\n\t\t\t\t  <div id=\"msf-email-exists\" class=\"msf-error\" style=\"display:none\">\n\t\t\t\t\t  Dit e-mailadres is al geregistreerd. <a href=\"#\" id=\"msf-open-login\">Log hier in<\/a>.\n\t\t\t\t\t<\/div>\n\t\t\t\t<input  type=\"text\" name=\"phone\" id=\"phone_formstep\" placeholder=\"Telefoonnummer\" value=\"\" >\n\t\t\t  <\/div>\n\n\t\t\t  <textarea name=\"message\" id=\"message_formstep\" placeholder=\"Boodschap\"><\/textarea>\n\t\t\t\t<div id=\"hidden-cf7\" class=\"msf-cf7-shadow\">\n\t\t\t\t  \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2709-o7\" lang=\"nl-BE\" dir=\"ltr\" data-wpcf7-id=\"2709\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/nl\/wp-json\/wp\/v2\/pages\/145#wpcf7-f2709-o7\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contactformulier\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2709\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"nl_BE\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2709-o7\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:2709,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;repeater_remove_button&quot;:&quot;bottom&quot;}}\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"license_plate\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Nummerplaat\" value=\"\" type=\"text\" name=\"license_plate\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mileage\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Kilometerstand\" value=\"\" type=\"text\" name=\"mileage\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"chassis\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Chassisnummer\" value=\"\" type=\"text\" name=\"chassis\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"brand\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Merk\" value=\"\" type=\"text\" name=\"brand\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"car_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type wagen\" value=\"\" type=\"text\" name=\"car_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies_id\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies_id\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"date\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Datum\" value=\"\" type=\"text\" name=\"date\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"time\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Tijd\" value=\"\" type=\"text\" name=\"time\" \/><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"renting_customer\" \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mobility_option\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Mobiliteitsoplossing\" value=\"\" type=\"text\" name=\"mobility_option\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"user_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type klant\" value=\"\" type=\"text\" name=\"user_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"company_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Bedrijfsnaam\" value=\"\" type=\"text\" name=\"company_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tax_number\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"BTW-nummer\" value=\"\" type=\"text\" name=\"tax_number\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"first_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Voornaam\" value=\"\" type=\"text\" name=\"first_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"surname\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Achternaam\" value=\"\" type=\"text\" name=\"surname\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"Telefoon\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Boodschap\" name=\"message\"><\/textarea><\/span>\n<div class=\"msf-file-only\">\n  <span class=\"wpcf7-form-control-wrap\" data-name=\"bestanden\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-drag-n-drop-file d-none\" aria-invalid=\"false\" type=\"file\" multiple=\"multiple\" data-name=\"bestanden\" data-type=\"jpg|jpeg|png|pdf\" data-limit=\"3000000\" data-max=\"10\" data-id=\"2709\" data-version=\"free version 1.3.9.8\" accept=\".jpg, .jpeg, .png, .pdf\" \/><\/span>\n<\/div>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"create_account\"><span class=\"wpcf7-form-control wpcf7-checkbox\"><span class=\"wpcf7-list-item first last\"><input type=\"checkbox\" name=\"create_account[]\" value=\"Ja, maak een account\" \/><span class=\"wpcf7-list-item-label\">Ja, maak een account<\/span><\/span><\/span><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"url\" \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Verzenden\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t\n\t\t\t  <div id=\"ca-container\" class=\"checkbox-container\" style=\"display: block;\">\n\t\t\t\t<input type=\"checkbox\" id=\"create_account_formstep\" name=\"create_account\">\n\t\t\t\t<label style=\"width:100%!important;\" for=\"create_account_formstep\" class=\"custom-checkbox-label\">\n\t\t\t\t  Registreer je en volg je aanvragen in \u00e9\u00e9n oogopslag.\n\t\t\t\t<\/label>\n\t\t\t  <\/div>\n\n\t\t\t  <div id=\"have-account-container\" class=\"msf-note\" style=\"display:none; margin-bottom:1em;font-size:14px;\">\n\t\t\t\tZo te zien heb je al een account. \n\t\t\t\t<a href=\"#\" class=\"msf-open-login\">Klik hier om in te loggen<\/a>.\n\t\t\t  <\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t  <!-- Checkbox \u201cIk ga akkoord met privacy policy\u201d -->\n\t\t\t  <div class=\"checkbox-container\">\n\t\t\t\t<input type=\"checkbox\" id=\"agree_policy_formstep\" name=\"agree_policy\">\n\t\t\t\t<label style=\"width:100%!important;\" for=\"agree_policy_formstep\" class=\"custom-checkbox-label\">\n\t\t\t\t  Ik ga akkoord met de &nbsp;<a href=\"\/privacy-policy\/\" target=\"_blank\"> privacy policy<\/a>  <span style=\"color: #e74c3c;\">*<\/span>\n\t\t\t\t<\/label>\n\t\t\t\t<div class=\"error agree-error\" style=\"display:none;color:#e74c3c;font-size:0.9em;\">\n\t\t\t\t\tJe moet akkoord gaan met de privacy policy.\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-123 -->\n\n\n\t\t\t<!-- RECHTER KOLOM: OVERZICHT AFSPRAAK -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Jouw afspraak<\/h4>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<span><strong>Locatie:<\/strong> <strong>MIERS Group<\/strong><\/span>\n\t\t\t\t\t<div>Brusselsesteenweg 333<\/div>\n\t\t\t\t\t<div>1730 Kobbegem - Asse<\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-datum.png\" alt=\"Datum Icon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Datum en uur<\/h4>\n\t\t\t\t\t<div class=\"datetime-preview\">\n\t\t\t\t\t  <p><strong>Datum:<\/strong> <span id=\"selected_date\">Not selected<\/span><\/p>\n\t\t\t\t\t  <p><strong>Tijdstip:<\/strong> <span id=\"selected_time\">Not selected<\/span><\/p>\n\t\t\t\t\t  <p><strong>Mobiliteitsoplossing:<\/strong> <span id=\"selected_mobility\">Not selected<\/span><\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde f-124 -->\n\t\t  <\/div> <!-- einde f-row -->\n\n\t\t  <div class=\"form-buttons\">\n\t\t\t<button type=\"button\" onclick=\"prevStep()\">Terug<\/button>\n\t\t\t<button type=\"button\" id=\"msfFinalBtn\">Afspraak aanvragen<\/button>\n\t\t  <\/div>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t \n\t \n\t \n\t \n\t\t<div class=\"form-step\" id=\"form-submit\">\n\t\t  <div class=\"f-row\">\n\n\t\t\t<!-- ========== LINKER KOLOM: BEVESTIGINGSMESSAGE ========== -->\n\t\t\t<div class=\"f-123\" style=\"text-align: center; background-color: #f6f6f6;\">\n\t\t\t  <!-- Bovenste melding -->\n\t\t\t  <div class=\"f-1\" style=\"text-align: center; background-color: #ffffff; padding: 20px; border-radius: 10px;\">\n\t\t\t\t<p>\n\t\t\t\t  <strong>We hebben uw aanvraag goed ontvangen.<\/strong><br>\n\t\t\t\t  Een van onze collega's zal u binnenkort contacteren om uw afspraak te bevestigen en de praktische details te regelen.\n\t\t\t\t<\/p>\n\t\t\t\t<img\n\t\t\t\t  decoding=\"async\"\n\t\t\t\t  width=\"296\"\n\t\t\t\t  height=\"285\"\n\t\t\t\t  src=\"\/wp-content\/uploads\/2025\/06\/checkmark-miers.png\"\n\t\t\t\t  alt=\"Confirmation check\"\n\t\t\t\t  title=\"Confirmation check\"\n\t\t\t\t>\n\t\t\t  <\/div>\n\t\t\t  <br><br>\n\t\t\t  <!-- Onderstaande \u201cLet op!\u201d-box -->\n\t\t\t  <div class=\"f-1\" style=\"background-color: #f3faf9; border-radius: 10px;\">\n\t\t\t\t<p id=\"tr3\">\n\t\t\t\t  <strong>Let op!<\/strong> Dit is een aanvraag om een afspraak vast te leggen, deze moet eerst bevestigd worden.\n\t\t\t\t  Wacht op de bevestiging van uw verdeler voordat u naar de werkplaats komt.\n\t\t\t\t<\/p>\n\t\t\t  <\/div>\n\t\t\t<\/div> <!-- einde linker kolom -->\n\n\n\t\t\t<!-- ========== RECHTER KOLOM: OVERZICHT VAN ALLE INGAVEN ========== -->\n\t\t\t<div class=\"f-124\">\n\t\t\t  <h4>Uw ingevulde gegevens<\/h4>\n\n\t\t\t  <!-- 1) Vaste locatie\u2010kaart -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-locatie.png\" alt=\"Locatie icoon\" \/>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<p>\n\t\t\t\t\t  <strong>Locatie:<\/strong>\n\t\t\t\t\t  <strong>MIERS Group<\/strong><br>\n\t\t\t\t\t  Brusselsesteenweg 333<br>\n\t\t\t\t\t  1730 Kobbegem - Asse\n\t\t\t\t\t<\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 2) Wagen\u2010gegevens -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-wagen.png\" alt=\"Wagen icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Details wagen<\/h4>\n\t\t\t\t\t<p><strong>Nummerplaat:<\/strong> <span class=\"license_plate_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Kilometerstand:<\/strong> <span class=\"mileage_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Chassisnummer:<\/strong> <span class=\"chassis_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p class=\"brand-line\" style=\"display: none;\"><strong>Merk:<\/strong> <span class=\"brand_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t\t<p><strong>Type wagen:<\/strong> <span class=\"car_type_preview\">Niet toegevoegd<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 3) Interventies -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-interventies.png\" alt=\"Interventies icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Interventies<\/h4>\n\t\t\t\t\t<div class=\"selected_images_preview\"><\/div>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 4) Datum & Tijd & Mobiliteit -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-datum.png\" alt=\"Datum icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Datum en uur<\/h4>\n\t\t\t\t\t<p><strong>Datum:<\/strong> <span id=\"selected_date\">Not selected<\/span><\/p>\n\t\t\t\t\t<p><strong>Tijdstip:<\/strong> <span id=\"selected_time\">Not selected<\/span><\/p>\n\t\t\t\t\t<p><strong>Mobiliteitsoplossing:<\/strong> <span id=\"selected_mobility\">Not selected<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t  <!-- 5) Persoonlijke gegevens -->\n\t\t\t  <div class=\"location-card\">\n\t\t\t\t<div class=\"icon-box\">\n\t\t\t\t  <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/06\/preview-user.png\" alt=\"Gebruikers icoon\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"location-details\">\n\t\t\t\t  <div class=\"preview\">\n\t\t\t\t\t<h4>Persoonlijke gegevens<\/h4>\n\t\t\t\t\t<p><strong>Type klant:<\/strong> <span class=\"user_type_preview\">Not selected<\/span><\/p>\n\t\t\t\t\t<!-- Enkel zichtbaar als er \u201cZakelijk\u201d is gekozen -->\n\t\t\t\t\t<p class=\"company-line\" style=\"display: none;\"><strong>Bedrijfsnaam:<\/strong> <span class=\"company_name_preview\"><\/span><\/p>\n\t\t\t\t\t<p class=\"tax-line\" style=\"display: none;\"><strong>BTW-nummer:<\/strong> <span class=\"tax_number_preview\"><\/span><\/p>\n\t\t\t\t\t<p><strong>Voornaam:<\/strong> <span class=\"first_name_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Achternaam:<\/strong> <span class=\"surname_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>E-mail:<\/strong> <span class=\"email_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Telefoon:<\/strong> <span class=\"phone_preview\">Not entered<\/span><\/p>\n\t\t\t\t\t<p><strong>Boodschap:<\/strong><\/p>\n\t\t\t\t\t<p><span class=\"message_preview\">\u2013 geen boodschap \u2013<\/span><\/p>\n\t\t\t\t  <\/div>\n\t\t\t\t<\/div>\n\t\t\t  <\/div>\n\n\t\t\t<\/div> <!-- einde rechter kolom -->\n\t\t  <\/div> <!-- einde f-row -->\n\t\t<\/div> <!-- einde form-step #form-submit -->\n<\/div>\n\t\t<!-- Login Modal (verborgen) -->\n\t\t<div id=\"msf-login-modal\" class=\"msf-modal\">\n\t\t  <div class=\"msf-modal-content\">\n\t\t\t<form name=\"loginform\" id=\"loginform\" action=\"https:\/\/miers.be\/wp-login.php\" method=\"post\"><p class=\"login-username\">\n\t\t\t\t<label for=\"user_login\">E-mail<\/label>\n\t\t\t\t<input type=\"text\" name=\"log\" id=\"user_login\" autocomplete=\"username\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-password\">\n\t\t\t\t<label for=\"user_pass\">Wachtwoord<\/label>\n\t\t\t\t<input type=\"password\" name=\"pwd\" id=\"user_pass\" autocomplete=\"current-password\" spellcheck=\"false\" class=\"input\" value=\"\" size=\"20\" \/>\n\t\t\t<\/p><p class=\"login-remember\"><label><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/> Mij onthouden<\/label><\/p><p class=\"login-submit\">\n\t\t\t\t<input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button button-primary\" value=\"Inloggen\" \/>\n\t\t\t\t<input type=\"hidden\" name=\"redirect_to\" value=\"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/\" \/>\n\t\t\t<\/p><\/form>\t\t\t<button type=\"button\" id=\"msf-close-login\">Sluiten<\/button>\n\t\t  <\/div>\n\t\t<\/div>\n\n\t\t\t<div id=\"hidden-cf7\">\n\t\t\t  \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2709-o8\" lang=\"nl-BE\" dir=\"ltr\" data-wpcf7-id=\"2709\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/nl\/wp-json\/wp\/v2\/pages\/145#wpcf7-f2709-o8\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contactformulier\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2709\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"nl_BE\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2709-o8\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:2709,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;repeater_remove_button&quot;:&quot;bottom&quot;}}\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"license_plate\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Nummerplaat\" value=\"\" type=\"text\" name=\"license_plate\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mileage\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Kilometerstand\" value=\"\" type=\"text\" name=\"mileage\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"chassis\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Chassisnummer\" value=\"\" type=\"text\" name=\"chassis\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"brand\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Merk\" value=\"\" type=\"text\" name=\"brand\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"car_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type wagen\" value=\"\" type=\"text\" name=\"car_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies_id\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies_id\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"interventies\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Interventies\" value=\"\" type=\"text\" name=\"interventies\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"date\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Datum\" value=\"\" type=\"text\" name=\"date\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"time\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Tijd\" value=\"\" type=\"text\" name=\"time\" \/><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"renting_customer\" \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"mobility_option\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Mobiliteitsoplossing\" value=\"\" type=\"text\" name=\"mobility_option\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"user_type\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Type klant\" value=\"\" type=\"text\" name=\"user_type\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"company_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Bedrijfsnaam\" value=\"\" type=\"text\" name=\"company_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tax_number\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"BTW-nummer\" value=\"\" type=\"text\" name=\"tax_number\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"first_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Voornaam\" value=\"\" type=\"text\" name=\"first_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"surname\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Achternaam\" value=\"\" type=\"text\" name=\"surname\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"E-mail\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"Telefoon\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\" placeholder=\"Boodschap\" name=\"message\"><\/textarea><\/span>\n<div class=\"msf-file-only\">\n  <span class=\"wpcf7-form-control-wrap\" data-name=\"bestanden\"><input size=\"40\" class=\"wpcf7-form-control wpcf7-drag-n-drop-file d-none\" aria-invalid=\"false\" type=\"file\" multiple=\"multiple\" data-name=\"bestanden\" data-type=\"jpg|jpeg|png|pdf\" data-limit=\"3000000\" data-max=\"10\" data-id=\"2709\" data-version=\"free version 1.3.9.8\" accept=\".jpg, .jpeg, .png, .pdf\" \/><\/span>\n<\/div>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"create_account\"><span class=\"wpcf7-form-control wpcf7-checkbox\"><span class=\"wpcf7-list-item first last\"><input type=\"checkbox\" name=\"create_account[]\" value=\"Ja, maak een account\" \/><span class=\"wpcf7-list-item-label\">Ja, maak een account<\/span><\/span><\/span><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"url\" \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Verzenden\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\t\t\t<\/div>\n\n\n\n\n\n\n\n<!-- === CONSOLIDEERDE MULTI-STEP LOGICA + localStorage + flatpickr === -->\n\n\n<script>\n  \/\/ ================================\n  \/\/ A. STEP-INDEX & HASH\n  \/\/ ================================\n  let currentStep = 0;\n  const formSteps      = document.querySelectorAll('.form-step');\n  const stepIndicators = document.querySelectorAll('.step');\n\tconst LAST_STEP_INDEX = formSteps.length - 1;\n\n  function showStep(stepIndex) {\n    formSteps.forEach((stepEl, idx) => {\n      stepEl.classList.toggle('active', idx === stepIndex);\n    });\n    stepIndicators.forEach((indEl, idx) => {\n      indEl.classList.toggle('active',    idx <= stepIndex);\n      indEl.classList.toggle('completed', idx <  stepIndex);\n    });\n    currentStep = stepIndex;\n    window.location.hash = 'step' + stepIndex;\n\t  \n\t  onStepChange(stepIndex);\n\t  \n\t  if (stepIndex >= 3) {\n\t\tupdateStep3PreviewCards();\n\t  }\n\n\t  const anchor = document.getElementById('AfspraakInboeken');\n\t  if (anchor) {\n\t\tanchor.scrollIntoView({ behavior: 'smooth' });\n\t  }\n    \n    if (stepIndex === LAST_STEP_INDEX) {\n\t\tconst mob = (localStorage.getItem('msf_mobility_option') || '').toLowerCase();\n\n\t\tif (mob.includes('huurwagen')) {\n\t\t  const container = document.querySelector('#form-submit .f-123');\n\t\t  \/\/ enkel \u00e9\u00e9n keer toevoegen\n\t\t  if (!container.querySelector('.msf-to-rental')) {\n\t\t\tcontainer.insertAdjacentHTML('beforeend', `\n\t\t\t  <div class=\"msf-to-rental\" style=\"margin-top:1.5em; padding:1em; background:#eef; border-radius:8px;\">\n\t\t\t\t<p><strong>Wil je alvast je huurwagen boeken?<\/strong><br>\n\t\t\t\t   Bekijk dan snel onze verhuurpagina.<\/p>\n\t\t\t\t<a href=\"verhuur-van-bestelwagens-bedrijfsvoertuigen\/#resultaten\" class=\"button\" style=\"display:inline-block;margin-top:0.5em;padding:0.75em 1.5em;\n\t\t\t\t   background:#0C5453;color:#fff;border-radius:5px;text-decoration:none;\">\n\t\t\t\t  Naar verhuur\n\t\t\t\t<\/a>\n\t\t\t  <\/div>\n\t\t\t`);\n\t\t  }\n\t\t}\n      launchConfetti();\n    }\n  }\n\n  function nextStep() {\n\t  \/\/ 0) Verwijder oude foutmeldingen\n\t  document.querySelectorAll('.msf-error').forEach(e => e.remove());\n\n\t  \/\/ 1) Validatie per stap\n\t  if (currentStep === 0) {\n\t\t\/\/ stap 1: nummerplaat, kilometerstand, type wagen\n\t\tlet valid = true;\n\t\tconst plate   = document.getElementById('license_plate');\n\t\tconst mileage = document.getElementById('mileage');\n\t\tconst carType = document.getElementById('car_type');\n\n\t\tif (!plate.value.trim()) {\n\t\t  plate.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Vul je nummerplaat in<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!mileage.value.trim()) {\n\t\t  mileage.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Vul je kilometerstand in<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!carType.value.trim()) {\n\t\t  carType.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een type wagen<\/div>'\n\t\t  );\n\t\t  valid = false;\n\t\t}\n\t\tif (!valid) return;\n\t  }\n\n\t  if (currentStep === 1) {\n\t\t\/\/ stap 2: minstens 1 interventie\n\t\tconst checked = document.querySelectorAll('.inventory-checkbox:checked');\n\t\tif (checked.length < 1) {\n\t\t  const container = document.querySelector('.f-123.interventies');\n\t\t  container.insertAdjacentHTML('beforeend',\n\t\t\t'<div class=\"msf-error\">Kies minstens 1 interventie<\/div>'\n\t\t  );\n\t\t  return;\n\t\t}\n\t  }\n\n\t  if (currentStep === 2) {\n\t\t\/\/ stap 3: datum, tijd en mobiliteitsoplossing\n\t\tlet ok = true;\n\t\tconst dateInput = document.getElementById('datepicker');\n\t\tconst timeInput = document.getElementById('selectedTimeInput');\n\t\tconst rentingQuestion = document.getElementById('renting-question');\n\t\tconst rentChecked = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t\tconst mobInput  = document.getElementById('mobility_option');\n\n\t\tif (!dateInput.value) {\n\t\t  dateInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een datum<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!timeInput.value) {\n\t\t  timeInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een uur<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!rentChecked) {\n\t\t\trentingQuestion.insertAdjacentHTML('beforeend',\n\t\t\t  '<div class=\"msf-error\">Geef aan of je een renting klant bent<\/div>'\n\t\t\t);\n\t\t\tok = false;\n  \t\t}\n\t\tif (!mobInput.value) {\n\t\t  mobInput.insertAdjacentHTML('afterend',\n\t\t\t'<div class=\"msf-error\">Kies een mobiliteitsoplossing<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\tif (!ok) return;\n\t  }\n\n\t  if (currentStep === 3) {\n\t\t\/\/ stap 4: voornaam, achternaam, email, privacy\n\t\tlet ok = true;\n\n\t\t\/\/ required fields\n\t\tconst fields = [\n\t\t  { id: 'first_name_formstep',  msg: 'Vul je voornaam in'},\n\t\t  { id: 'surname_formstep',     msg: 'Vul je achternaam in'},\n\t\t  { id: 'email_formstep',       msg: 'Vul je e-mail in'},\n\t\t];\n\t\tfields.forEach(({id,msg}) => {\n\t\t  const el = document.getElementById(id);\n\t\t  if (!el.value.trim()) {\n\t\t\tel.insertAdjacentHTML('afterend',\n\t\t\t  `<div class=\"msf-error\">${msg}<\/div>`\n\t\t\t);\n\t\t\tok = false;\n\t\t  }\n\t\t});\n\n\t\t\/\/ privacy checkbox\n\t\tconst agreeEl = document.getElementById('agree_policy_formstep');\n\t\tif (!agreeEl.checked) {\n\t\t  \/\/ plaats de foutmelding onder de .checkbox-container\n\t\t  const wrapper = agreeEl.closest('.checkbox-container');\n\t\t  wrapper.insertAdjacentHTML('beforeend',\n\t\t\t'<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>'\n\t\t  );\n\t\t  ok = false;\n\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t  if (window.initDragDrop) {\n\t\t\t\twindow.initDragDrop(); \n\t\t\t  }\n\t\t\t}, 50);\n\n\t\tif (!ok) return;\n\t  }\n\n\t  \/\/ 2) Als alles ok is: naar de volgende stap\n\t  showStep(currentStep + 1);\n\t}\n\n  function prevStep() {\n    if (currentStep > 0) {\n      showStep(currentStep - 1);\n    }\n  }\n\n  \/\/ Alleen stappen \u2264 currentStep zijn \u201cklikbaar\u201d\n  stepIndicators.forEach((stepEl, idx) => {\n    stepEl.style.cursor = (idx <= currentStep ? 'pointer' : 'not-allowed');\n    stepEl.addEventListener('click', () => {\n      if (idx <= currentStep) {\n        showStep(idx);\n      }\n    });\n  });\n\n\n  \/\/ ================================\n  \/\/ B. localStorage: STAP 1 (Wagen)\n  \/\/ ================================\n  const LS_KEYS = {\n    license_plate: 'msf_license_plate',\n    mileage:       'msf_mileage',\n\tchassis: \t   'msf_chassis',\n    car_type:      'msf_car_type',\n    brand:         'msf_brand'\n  };\n\n  function saveStep1ValuesToStorage() {\n    const lp   = document.getElementById('license_plate')?.value || '';\n    const km   = document.getElementById('mileage')?.value || '';\n\tconst ch = document.getElementById('chassis')?.value || '';\n    const type = document.getElementById('car_type')?.value || '';\n    const merk = document.getElementById('brand_select')?.value || '';\n    localStorage.setItem(LS_KEYS.license_plate, lp);\n    localStorage.setItem(LS_KEYS.mileage,       km);\n\tlocalStorage.setItem(LS_KEYS.chassis, ch);\n    localStorage.setItem(LS_KEYS.car_type,      type);\n    localStorage.setItem(LS_KEYS.brand,         merk);\n  }\n\n  function loadStep1ValuesFromStorage() {\n    const lpStored   = localStorage.getItem(LS_KEYS.license_plate);\n    const kmStored   = localStorage.getItem(LS_KEYS.mileage);\n\tconst chStored = localStorage.getItem(LS_KEYS.chassis);\n    const typeStored = localStorage.getItem(LS_KEYS.car_type);\n    const merkStored = localStorage.getItem(LS_KEYS.brand);\n\n    if (lpStored   !== null) document.getElementById('license_plate').value = lpStored;\n    if (kmStored   !== null) document.getElementById('mileage').value       = kmStored;\n\tif (chStored !== null) document.getElementById('chassis').value = chStored;\n    if (typeStored !== null) document.getElementById('car_type').value      = typeStored;\n    if (merkStored !== null) {\n      const brandSelect = document.getElementById('brand_select');\n      if (brandSelect) {\n        brandSelect.value = merkStored;\n        if (window.jQuery && jQuery('#brand_select').data('select2')) {\n          jQuery('#brand_select').trigger('change.select2');\n        }\n      }\n    }\n  }\n\n  function initStep1Listeners() {\n    ['license_plate','mileage', 'chassis', 'car_type','brand_select'].forEach(id => {\n      const el = document.getElementById(id);\n      if (!el) return;\n      \/\/ Input\u2010velden (text\/number) \u2192 input\u2010event\n      el.addEventListener('input', () => {\n        saveStep1ValuesToStorage();\n        updateAllPreviews();\n      });\n      \/\/ <select> \u2192 change\u2010event\n      if (el.tagName.toLowerCase() === 'select') {\n        el.addEventListener('change', () => {\n          saveStep1ValuesToStorage();\n          updateAllPreviews();\n        });\n      }\n    });\n  }\n\n\n  \/\/ ============================================\n  \/\/ C. localStorage: STAP 2 (Interventies)\n  \/\/ ============================================\n  const LS_KEYS_2 = {\n    interventies: 'msf_interventies'\n  };\n\n  function saveStep2ValuesToStorage() {\n    const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');\n    const ids = Array.from(checkedBoxes).map(cb => cb.value);\n    localStorage.setItem(LS_KEYS_2.interventies, JSON.stringify(ids));\n  }\n\n  function loadStep2ValuesFromStorage() {\n    const stored = localStorage.getItem(LS_KEYS_2.interventies);\n    if (stored) {\n      try {\n        const ids = JSON.parse(stored);\n        ids.forEach(id => {\n          const cb = document.querySelector('.inventory-checkbox[value=\"' + id + '\"]');\n          if (cb) {\n            cb.checked = true;\n            const lab = cb.closest('label');\n            if (lab) lab.classList.add('selected');\n          }\n        });\n      } catch(e) {\n        console.error(e);\n      }\n    }\n  }\n\n  function updateStep2PreviewCards() {\n    const selectedImages = document.querySelectorAll('.inventory-checkbox:checked');\n    document.querySelectorAll('.selected_images_preview').forEach(container => {\n      container.innerHTML = '';\n      \/\/ Toon alles in \u00e9\u00e9n regel, gescheiden door komma + spatie\n      const titles = Array.from(selectedImages).map(cb => cb.dataset.title.trim());\n      if (titles.length) {\n        container.textContent = titles.join(', ');\n      } else {\n        container.textContent = ''; \n      }\n    });\n  }\n\n  function initStep2Listeners() {\n    const checkboxes = document.querySelectorAll('.inventory-checkbox');\n    checkboxes.forEach(cb => {\n      cb.addEventListener('change', () => {\n        const checkedBoxes = document.querySelectorAll('.inventory-checkbox:checked');\n        if (checkedBoxes.length > 3) {\n          \/\/ Als er al 3 zijn, zet deze uit en toon waarschuwing\n          cb.checked = false;\n          alert('Je kan maximaal 3 interventies selecteren.');\n          return;\n        }\n        \/\/ Toggle .selected\u2010klasse op label\n        const lab = cb.closest('label');\n        if (lab) lab.classList.toggle('selected', cb.checked);\n\n        \/\/ Sla selectie op + update preview\n        saveStep2ValuesToStorage();\n        updateStep2PreviewCards();\n\n        \/\/ Als er nu \u2265 3 geselecteerd zijn \u2192 disable de rest\n        const newCheckedCount = document.querySelectorAll('.inventory-checkbox:checked').length;\n        if (newCheckedCount >= 3) {\n          document.querySelectorAll('.inventory-checkbox:not(:checked)').forEach(uncheckedCb => {\n            uncheckedCb.disabled = true;\n            const lbl = uncheckedCb.closest('label');\n            if (lbl) lbl.style.opacity = '0.5';\n          });\n        } else {\n          \/\/ Anders: alles weer inschakelen\n          document.querySelectorAll('.inventory-checkbox').forEach(allCb => {\n            allCb.disabled = false;\n            const lbl = allCb.closest('label');\n            if (lbl) lbl.style.opacity = '1';\n          });\n        }\n      });\n    });\n  }\n\n  \/\/ \u201cMeer laden\u2026\u201d\u2010knop (stap 2)\n  function initLoadMoreButton() {\n    const loadMoreBtn = document.getElementById('loadMoreBtn');\n    if (loadMoreBtn) {\n      loadMoreBtn.addEventListener('click', () => {\n        document.querySelectorAll('.hidden-more').forEach(el => el.classList.remove('hidden-more'));\n        loadMoreBtn.style.display = 'none';\n      });\n    }\n  }\n\n\n  \/\/ ================================================\n  \/\/ D. Preview STAP 1 voor STAP 2\/3\/4 (locatie-kaarten)\n  \/\/ ================================================\n\t  function updateStep1PreviewCards() {\n\t\tconst lpStored   = localStorage.getItem(LS_KEYS.license_plate) || 'Niet toegevoegd';\n\t\tconst kmStored   = localStorage.getItem(LS_KEYS.mileage) || 'Niet toegevoegd';\n\t\tconst chStored   = localStorage.getItem(LS_KEYS.chassis) || 'Niet toegevoegd';\n\t\tconst merkStored = localStorage.getItem(LS_KEYS.brand);\n\n\t\tlet carTypeText = 'Niet toegevoegd';\n\t\tconst carTypeEl = document.getElementById('car_type');\n\t\tif (carTypeEl) {\n\t\t  const idx = carTypeEl.selectedIndex;\n\t\t  if (idx > 0) {\n\t\t\tcarTypeText = carTypeEl.options[idx].text;\n\t\t  } else {\n\t\t\tconst storedSlug = localStorage.getItem(LS_KEYS.car_type);\n\t\t\tif (storedSlug) {\n\t\t\t  const opt = Array.from(carTypeEl.options).find(o => o.value === storedSlug);\n\t\t\t  if (opt) carTypeText = opt.text;\n\t\t\t}\n\t\t  }\n\t\t}\n\n\t\t\/\/ update previews\n\t\tdocument.querySelectorAll('.license_plate_preview').forEach(el => el.textContent = lpStored);\n\t\tdocument.querySelectorAll('.mileage_preview').forEach(el     => el.textContent = kmStored);\n\t\tdocument.querySelectorAll('.chassis_preview').forEach(el     => el.textContent = chStored);\n\t\tdocument.querySelectorAll('.car_type_preview').forEach(el    => el.textContent = carTypeText);\n\n\t\tdocument.querySelectorAll('.brand_preview').forEach(el => {\n\t\t  const parentP = el.closest('.brand-line');\n\t\t  if (merkStored && merkStored.trim() !== '') {\n\t\t\tel.textContent = merkStored;\n\t\t\tif (parentP) parentP.style.display = 'block';\n\t\t  } else {\n\t\t\tel.textContent = 'Not entered';\n\t\t\tif (parentP) parentP.style.display = 'none';\n\t\t  }\n\t\t});\n\t}\n\n\n  \/\/ ================================================\n  \/\/ E. localStorage: STAP 3 (Datum & tijd & mobiliteit)\n  \/\/ ================================================\n  const LS_KEYS_3 = {\n    date:            'msf_date',\n    time:            'msf_time',\n\trenting_customer: 'msf_renting_customer',\n    mobility_option: 'msf_mobility_option'\n  };\n\n  function saveStep3ValuesToStorage() {\n    const dateVal = document.getElementById('datepicker')?.value || '';\n    const timeVal = document.getElementById('selectedTimeInput')?.value || '';\n\tconst rentingVal = document.querySelector('input[name=\"renting_customer\"]:checked')?.value || '';\n    const mobVal  = document.getElementById('mobility_option')?.value || '';\n    localStorage.setItem(LS_KEYS_3.date,            dateVal);\n    localStorage.setItem(LS_KEYS_3.time,            timeVal);\n\tlocalStorage.setItem(LS_KEYS_3.renting_customer, rentingVal);\n    localStorage.setItem(LS_KEYS_3.mobility_option, mobVal);\n  }\n\n  function loadStep3ValuesFromStorage() {\n    const dateStored = localStorage.getItem(LS_KEYS_3.date);\n    const timeStored = localStorage.getItem(LS_KEYS_3.time);\n\tconst rentStored = localStorage.getItem(LS_KEYS_3.renting_customer);\n    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option);\n\n    if (dateStored !== null) {\n      const dateInput = document.getElementById('datepicker');\n      if (dateInput) dateInput.value = dateStored;\n    }\n    if (timeStored !== null) {\n      \/\/ Hidden input \u201cselectedTimeInput\u201d\n      const hiddenTimeInput = document.getElementById('selectedTimeInput');\n      if (hiddenTimeInput) hiddenTimeInput.value = timeStored;\n      \/\/ Highlight de juiste knop in de \u201cslots\u201d-div\n      document.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n        if (btn.dataset.time === timeStored) {\n          btn.classList.add('active');\n          document.getElementById('selected_time').textContent = timeStored;\n        } else {\n          btn.classList.remove('active');\n        }\n      });\n    }\n\tif (rentStored) {\n\t\tconst radio = document.querySelector(`input[name=\"renting_customer\"][value=\"${rentStored}\"]`);\n\t\tif (radio) {\n\t\t  radio.checked = true;\n\t\t  radio.dispatchEvent(new Event('change'));\n\t\t}\n\t  }\n    if (mobStored !== null) {\n      const mobSelect = document.getElementById('mobility_option');\n      if (mobSelect) mobSelect.value = mobStored;\n      document.getElementById('selected_mobility').textContent = mobStored || 'Not selected';\n    }\n  }\n\n\tfunction initStep3Listeners() {\n\t  const dateInput = document.getElementById('datepicker');\n\t  if (!dateInput) return;\n\n\t  \/\/ === Initialiseer Flatpickr met dynamische disable-functie ===\n\t  flatpickr(dateInput, {\n\t\t  inline: true,\n\t\t  dateFormat: \"Y-m-d\",\n\t\t  locale: 'nl',\n\t\t  disable: [\n\t\t\tfunction(date) {\n\t\t\t  const dow = date.getDay();\n\t\t\t  const ctText = document\n\t\t\t\t.getElementById('car_type')\n\t\t\t\t.options[\n\t\t\t\t  document.getElementById('car_type').selectedIndex\n\t\t\t\t]?.text\n\t\t\t\t.toLowerCase() || '';\n\t\t\t  \/\/ altijd zondag, en zaterdag alleen uit als personenwagen\n\t\t\t  return dow === 0 || (dow === 6 && ctText.includes('personenwagen'));\n\t\t\t}\n\t\t  ],\n\t\t  onChange(selectedDates, dateStr) {\n\t\t\tif (!selectedDates.length) return;\n\n\t\t\tconst jsDate = selectedDates[0];\n\t\t\tconst dow    = jsDate.getDay();\n\t\t\tconst ctSelect = document.getElementById('car_type');\n\t\t\tconst ctText   = ctSelect.options[ctSelect.selectedIndex]?.text.toLowerCase() || '';\n\n\t\t\t\/\/ toon de tijdkolom\n\t\t\tdocument.getElementById('selectedDateDisplay').textContent = dateStr;\n\t\t\tdocument.getElementById('timeColumn').classList.add('visible');\n\t\t\tsaveStep3ValuesToStorage();\n\t\t\tupdateStep3PreviewCards();\n\n\t\t\t\/\/ filter de knoppen\n\t\t\tdocument.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n\t\t\t  const uur = parseInt(btn.dataset.time.split(':')[0], 10);\n\t\t\t  if (dow === 6 && !ctText.includes('personenwagen')) {\n\t\t\t\t\/\/ zaterdag & niet personenwagen \u2192 enkel 08\u201311 (voor 12u)\n\t\t\t\tbtn.style.display = (uur >= 8 && uur < 12) ? 'block' : 'none';\n\t\t\t  } else {\n\t\t\t\t\/\/ alle andere dagen \/ personenwagens \u2192 alles\n\t\t\t\tbtn.style.display = 'block';\n\t\t\t  }\n\t\t\t});\n\t\t  }\n\t\t});\n\n\t  \/\/ bij wijzigen van het type wagen kalender hertekenen\n\t  document.getElementById('car_type').addEventListener('change', () => {\n\t\tconst fp = dateInput._flatpickr;\n\t\tif (fp) fp.redraw();\n\t  });\n\n\t  \/\/ === Tijd-knoppen ===\n\t  document.querySelectorAll('#timeColumn .slots button').forEach(btn => {\n\t\tbtn.addEventListener('click', function() {\n\t\t  \/\/ active-state\n\t\t  document.querySelectorAll('#timeColumn .slots button')\n\t\t\t\t  .forEach(b => b.classList.remove('active'));\n\t\t  this.classList.add('active');\n\t\t  const chosen = this.dataset.time || '';\n\n\t\t  \/\/ hidden input\n\t\t  let hidden = document.getElementById('selectedTimeInput');\n\t\t  if (!hidden) {\n\t\t\thidden = document.createElement('input');\n\t\t\thidden.type = 'hidden';\n\t\t\thidden.name = 'time';\n\t\t\thidden.id   = 'selectedTimeInput';\n\t\t\tdocument.getElementById('multiStepForm').appendChild(hidden);\n\t\t  }\n\t\t  hidden.value = chosen;\n\n\t\t  \/\/ sla op & preview\n\t\t  saveStep3ValuesToStorage();\n\t\t  document.getElementById('selected_time').textContent = chosen || 'Not selected';\n\t\t  updateStep3PreviewCards();\n\n\t\t  \/\/ waarschuwing na 14u\n\t\t  const old = document.getElementById('msf-time-warning');\n\t\t  if (old) old.remove();\n\t\t  const uur = parseInt(chosen.split(':')[0], 10);\n\t\t  if (!isNaN(uur) && uur >= 14) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.id = 'msf-time-warning';\n\t\t\tdiv.className = 'f-1';\n\t\t\tdiv.style.cssText = 'background-color: #f3faf9; border-radius:10px; margin-top:1em;';\n\t\t\tdiv.innerHTML = `\n\t\t\t  <p id=\"tr3\">\n\t\t\t\t<strong>Let op!<\/strong> vanaf ${chosen} kunnen we niet garanderen dat de wagen vandaag zal voltooid zijn.\n\t\t\t  <\/p>`;\n\t\t\tdocument.querySelector('.kalender').appendChild(div);\n\t\t  }\n\t\t});\n\t  });\n\t\n\t\t\/\/ === Renting logica ===\n\t\tconst rentingRadios = document.querySelectorAll('input[name=\"renting_customer\"]');\n\t\tconst mobContainer  = document.getElementById('mobility-container');\n\t\tconst mobSelect     = document.getElementById('mobility_option');\n\n\t\trentingRadios.forEach(radio => {\n\t\t  radio.addEventListener('change', () => {\n\t\t\t\/\/ leeg oude opties\n\t\t\tmobSelect.innerHTML = '<option value=\"\">Maak een keuze<\/option>';\n\t\t\tif (radio.value === 'ja') {\n\t\t\t  ['Ik zal wachten','Ik wil een vervangwagen','Ik wil een fiets']\n\t\t\t\t.forEach(text => {\n\t\t\t\t  const opt = document.createElement('option');\n\t\t\t\t  opt.textContent = text;\n\t\t\t\t  mobSelect.appendChild(opt);\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t  ['Ik zal wachten','Ik wil een huurwagen ( vanaf \u20ac100 \/ dag )','Ik wil een fiets']\n\t\t\t\t.forEach(text => {\n\t\t\t\t  const opt = document.createElement('option');\n\t\t\t\t  opt.textContent = text;\n\t\t\t\t  mobSelect.appendChild(opt);\n\t\t\t\t});\n\t\t\t}\n\t\t\t\/\/ toon dropdown + opslaan\n\t\t\tmobContainer.style.display = 'block';\n\t\t\tsaveStep3ValuesToStorage();\n\t\t  });\n\t\t});\n\t\n\n\t  \/\/ === Mobiliteits-dropdown ===\n\t  const mob = document.getElementById('mobility_option');\n\t  if (mob) {\n\t\tmob.addEventListener('change', () => {\n\t\t  saveStep3ValuesToStorage();\n\t\t  document.getElementById('selected_mobility').textContent = mob.value || 'Not selected';\n\t\t  updateStep3PreviewCards();\n\t\t});\n\t  }\n\t  const preChecked = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  if (preChecked) {\n\t\t\/\/ hiermee wordt de hierboven geregistreerde change-handler \u00e9\u00e9n keer aangeroepen\n\t\tpreChecked.dispatchEvent(new Event('change'));\n\t\t\/\/ \u00e9n meteen de eerder gekozen optie selecteren in de dropdown\n\t\tconst storedMob = localStorage.getItem(LS_KEYS_3.mobility_option);\n\t\tif (storedMob) {\n\t\t  mobSelect.value = storedMob;\n\t\t  document.getElementById('selected_mobility').textContent = storedMob;\n\t\t  updateStep3PreviewCards();\n\t\t}\n\t  }\n\t}\n\n\n  \/\/ ================================================\n  \/\/ G. localStorage: STAP 4 (Contactgegevens)\n  \/\/ ================================================\n  const LS_KEYS_4 = {\n    user_type:    'msf_user_type',\n    company_name: 'msf_company_name',\n    tax_number:   'msf_tax_number',\n    first_name:   'msf_first_name',\n    surname:      'msf_surname',\n    email:        'msf_email',\n    phone:        'msf_phone',\n    message:      'msf_message',\n    create_account: 'msf_create_account',\n    agree_policy:   'msf_agree_policy'\n  };\n\n  function saveStep4ValuesToStorage() {\n    const ut = document.querySelector('input[name=\"user_type\"]:checked')?.value || '';\n    localStorage.setItem(LS_KEYS_4.user_type, ut);\n\n    if (ut === 'professional') {\n      const cn = document.querySelector('input[name=\"company_name\"]')?.value || '';\n      const tn = document.querySelector('input[name=\"tax_number\"]')?.value || '';\n      localStorage.setItem(LS_KEYS_4.company_name, cn);\n      localStorage.setItem(LS_KEYS_4.tax_number,   tn);\n    } else {\n      localStorage.removeItem(LS_KEYS_4.company_name);\n      localStorage.removeItem(LS_KEYS_4.tax_number);\n    }\n\n    const fn = document.querySelector('input[name=\"first_name\"]')?.value || '';\n    const sn = document.querySelector('input[name=\"surname\"]')?.value || '';\n    const em = document.querySelector('input[name=\"email\"]')?.value || '';\n    const ph = document.querySelector('input[name=\"phone\"]')?.value || '';\n    const ms = document.querySelector('textarea[name=\"message\"]')?.value || '';\n    const ca = document.querySelector('input[name=\"create_account\"]')?.checked || false;\n    const ap = document.querySelector('input[name=\"agree_policy\"]')?.checked || false;\n\n    localStorage.setItem(LS_KEYS_4.first_name,   fn);\n    localStorage.setItem(LS_KEYS_4.surname,      sn);\n    localStorage.setItem(LS_KEYS_4.email,        em);\n    localStorage.setItem(LS_KEYS_4.phone,        ph);\n    localStorage.setItem(LS_KEYS_4.message,      ms);\n    localStorage.setItem(LS_KEYS_4.create_account, ca ? 'yes' : 'no');\n    localStorage.setItem(LS_KEYS_4.agree_policy,   ap ? 'yes' : 'no');\n  }\n\n  function loadStep4ValuesFromStorage() {\n    const utStored = localStorage.getItem(LS_KEYS_4.user_type);\n    if (utStored) {\n      const utRadio = document.querySelector('input[name=\"user_type\"][value=\"' + utStored + '\"]');\n      if (utRadio) utRadio.checked = true;\n    }\n    \/\/ Toon of verberg bedrijfs\u2010velden\n    const proFields = document.getElementById('proFields');\n    if (proFields) {\n      proFields.style.display = (utStored === 'professional') ? 'block' : 'none';\n    }\n\n    const companyStored = localStorage.getItem(LS_KEYS_4.company_name);\n    if (companyStored !== null) {\n      document.querySelector('input[name=\"company_name\"]').value = companyStored;\n    }\n    const taxStored = localStorage.getItem(LS_KEYS_4.tax_number);\n    if (taxStored !== null) {\n      document.querySelector('input[name=\"tax_number\"]').value = taxStored;\n    }\n\n    const fnStored = localStorage.getItem(LS_KEYS_4.first_name);\n    if (fnStored !== null) {\n      document.querySelector('input[name=\"first_name\"]').value = fnStored;\n    }\n    const snStored = localStorage.getItem(LS_KEYS_4.surname);\n    if (snStored !== null) {\n      document.querySelector('input[name=\"surname\"]').value = snStored;\n    }\n    const emStored = localStorage.getItem(LS_KEYS_4.email);\n    if (emStored !== null) {\n      document.querySelector('input[name=\"email\"]').value = emStored;\n    }\n    const phStored = localStorage.getItem(LS_KEYS_4.phone);\n    if (phStored !== null) {\n      document.querySelector('input[name=\"phone\"]').value = phStored;\n    }\n    const msStored = localStorage.getItem(LS_KEYS_4.message);\n    if (msStored !== null) {\n      document.querySelector('textarea[name=\"message\"]').value = msStored;\n    }\n    const caStored = localStorage.getItem(LS_KEYS_4.create_account);\n    if (caStored === 'yes') {\n      document.querySelector('input[name=\"create_account\"]').checked = true;\n    }\n    const apStored = localStorage.getItem(LS_KEYS_4.agree_policy);\n    if (apStored === 'yes') {\n      document.querySelector('input[name=\"agree_policy\"]').checked = true;\n    }\n  }\n\n  function initStep4Listeners() {\n    \/\/ 1) \u201cType klant\u201d radiobuttons\n    document.querySelectorAll('input[name=\"user_type\"]').forEach(radio => {\n      radio.addEventListener('change', () => {\n        const sel = document.querySelector('input[name=\"user_type\"]:checked')?.value;\n        const proFields = document.getElementById('proFields');\n        if (proFields) proFields.style.display = (sel === 'professional') ? 'block' : 'none';\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n\n    \/\/ 2) Bedrijfsnaam + btw\u2010nr\n    ['company_name','tax_number'].forEach(name => {\n      const el = document.querySelector(`input[name=\"${name}\"]`);\n      if (!el) return;\n      el.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n\n    \/\/ 3) Voornaam, Achternaam, E-mail, Telefoon\n    ['first_name','surname','email','phone'].forEach(name => {\n      const el = document.querySelector(`input[name=\"${name}\"]`);\n      if (!el) return;\n      el.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    });\n    const msgEl = document.querySelector('textarea[name=\"message\"]');\n    if (msgEl) {\n      msgEl.addEventListener('input', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n\n    \/\/ 4) \u201cMaak account\u201d\u2010checkbox\n    const caCb = document.querySelector('input[name=\"create_account\"]');\n    if (caCb) {\n      caCb.addEventListener('change', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n\n    \/\/ 5) \u201cPrivacy policy\u201d\u2010checkbox\n    const apCb = document.querySelector('input[name=\"agree_policy\"]');\n    if (apCb) {\n      apCb.addEventListener('change', () => {\n        saveStep4ValuesToStorage();\n        updateStep4PreviewCards();\n      });\n    }\n  }\n\n\n  \/\/ =======================================================\n  \/\/ H. Preview STAP 3 in STAP 4\/5 (datum\/tijd\/mobiliteit)\n  \/\/ =======================================================\n  function updateStep3PreviewCards() {\n    const dateStored = localStorage.getItem(LS_KEYS_3.date) || 'Not selected';\n    const timeStored = localStorage.getItem(LS_KEYS_3.time) || 'Not selected';\n    const mobStored  = localStorage.getItem(LS_KEYS_3.mobility_option) || 'Not selected';\n\n    document.querySelectorAll('#selected_date').forEach(el => {\n    el.textContent = dateStored;\n  });\n  document.querySelectorAll('#selected_time').forEach(el => {\n    el.textContent = timeStored;\n  });\n  document.querySelectorAll('#selected_mobility').forEach(el => {\n    el.textContent = mobStored;\n  });\n  }\n\n\n  \/\/ =======================================================\n  \/\/ I. Preview STAP 4 in STAP 5 (contactgegevens)\n  \/\/ =======================================================\n function updateStep4PreviewCards() {\n\t  \/\/ Haal user_type uit localStorage\n\t  const ut = localStorage.getItem('msf_user_type') || '';\n\t  document.querySelectorAll('.user_type_preview').forEach(el => {\n\t\tel.textContent = ut || 'Not selected';\n\t  });\n\n\t  \/\/ Toon\/verberg bedrijfsnaam + tax\u2010nummer\n\t  const showPro = (ut === 'professional');\n\t  document.querySelector('.company-line').style.display = showPro ? 'block' : 'none';\n\t  document.querySelector('.tax-line').style.display     = showPro ? 'block' : 'none';\n\n\t  \/\/ Vul bedrijfsnaam en tax_\u200bnummer\n\t  const cn = localStorage.getItem('msf_company_name') || '';\n\t  const tn = localStorage.getItem('msf_tax_number')   || '';\n\t  document.querySelectorAll('.company_name_preview').forEach(e => e.textContent = cn);\n\t  document.querySelectorAll('.tax_number_preview').forEach(e => e.textContent   = tn);\n\n\t  \/\/ Vul voornaam, achternaam, e-mail, telefoon, boodschap\n\t  const fn = localStorage.getItem('msf_first_name') || '';\n\t  const sn = localStorage.getItem('msf_surname')    || '';\n\t  const em = localStorage.getItem('msf_email')      || '';\n\t  const ph = localStorage.getItem('msf_phone')      || '';\n\t  const ms = localStorage.getItem('msf_message')    || '';\n\t  document.querySelectorAll('.first_name_preview').forEach(e => e.textContent = fn || 'Not entered');\n\t  document.querySelectorAll('.surname_preview').forEach(e    => e.textContent = sn || 'Not entered');\n\t  document.querySelectorAll('.email_preview').forEach(e      => e.textContent = em || 'Not entered');\n\t  document.querySelectorAll('.phone_preview').forEach(e      => e.textContent = ph || 'Not entered');\n\t  document.querySelectorAll('.message_preview').forEach(e    => e.textContent = ms || '\u2013 geen boodschap \u2013');\n\t}\n\n\n  \/\/ =======================================================\n  \/\/ J. Alles updaten bij laden\n  \/\/ =======================================================\n  function loadFormValuesFromStorage() {\n    \/\/ Stap 1\n    loadStep1ValuesFromStorage();\n    initStep1Listeners();\n\n    \/\/ Stap 2\n    loadStep2ValuesFromStorage();\n    initStep2Listeners();\n    updateStep2PreviewCards();\n\n    \/\/ Stap 3\n    loadStep3ValuesFromStorage();\n    initStep3Listeners();\n    updateStep3PreviewCards();\n\n    \/\/ Stap 4\n    loadStep4ValuesFromStorage();\n    initStep4Listeners();\n    updateStep4PreviewCards();\n  }\n\n  function updateAllPreviews() {\n    updateStep1PreviewCards();\n    updateStep2PreviewCards();\n    updateStep3PreviewCards();\n    updateStep4PreviewCards();\n  }\n\n\n  \/\/ =======================================================\n  \/\/ K. Initialisatie bij page load\n  \/\/ =======================================================\n  document.addEventListener('DOMContentLoaded', () => {\n\n    \/\/ 1) Step Indicators & Hash\n    \/\/initStepIndicators();\n    \/\/ 2) Lees hash (#step0\u2026#step4) indien aanwezig\n    const hash = window.location.hash;\n    if (hash && hash.startsWith('#step')) {\n      const idx = parseInt(hash.replace('#step', ''), 10);\n      if (!isNaN(idx) && idx >= 0 && idx < formSteps.length) {\n        currentStep = idx;\n      }\n    }\n    showStep(currentStep);\n\n    \/\/ 3) Laad alle opgeslagen waarden & listeners\n    loadFormValuesFromStorage();\n\n    \/\/ 4) Init \u201cMeer laden\u201d-knop (stap 2)\n    initLoadMoreButton();\n\n    \/\/ 5) Initialiseer Flatpickr, tijdselect en mobiliteit (stap 3) \u2192 zat al in initStep3Listeners()\n\n    \/\/ 6) Update alle previews (indien terug navigeren)\n    updateAllPreviews();\n\t  \n\t  (function(){\n\t\t\tconst carSelect = document.getElementById('car_type');\n\t\t\tif (!carSelect) return;\n\n\t\t\tfunction filterInterventions(){\n\t\t\t  const selected = carSelect.value;\n\t\t\t  document.querySelectorAll('.interventie-optie').forEach(label => {\n\t\t\t\tconst hl = label.dataset.highlights.split(' ').filter(s => s);\n\t\t\t\tif (selected && hl.indexOf(selected) === -1) {\n\t\t\t\t  label.style.display = 'none';\n\t\t\t\t  const cb = label.querySelector('input[type=\"checkbox\"]');\n\t\t\t\t  if (cb) cb.checked = false;\n\t\t\t\t} else {\n\t\t\t\t  label.style.display = '';\n\t\t\t\t}\n\t\t\t  });\n\t\t\t}\n\n\t\t\t\/\/ bind en init\n\t\t\tcarSelect.addEventListener('change', filterInterventions);\n\t\t\tfilterInterventions();\n\t\t  })();\n\t  \n\t  \n  });\n\n\t\n\tfunction initStep4FieldSync() {\n  const ids = [\n    'cf_company_name_formstep',\n    'cf_tax_number_formstep',\n    'cf_first_name_formstep',\n    'cf_surname_formstep',\n    'cf_email_formstep',\n    'cf_phone_formstep',\n    'cf_message_formstep',\n    'cf_create_account_formstep',\n    'cf_agree_policy_formstep'\n  ];\n  ids.forEach(id => {\n    const el = document.getElementById(id);\n    if (!el) return;\n    el.addEventListener('input', syncAllValuesToCF7);\n    el.addEventListener('change', syncAllValuesToCF7);\n  });\n}\n\t\n\n\t\n\tdocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ \u2026 je bestaande initialisaties voor stap 1\u20133 \u2026\n  initStep4FieldSync();\n\n  \/\/ \u201cMeer laden\u201d knop, flatpickr, enz. \u2026\n\n  const cf7Button = document.getElementById('cf7SubmitButton');\n  if (cf7Button) {\n    cf7Button.addEventListener('click', function(e) {\n      e.preventDefault();\n      \/\/ Zorg dat alle waarden in CF7-velden staan\n      syncAllValuesToCF7();\n      \/\/ Vind het CF7\u2010formulier in de DOM:\n      const cf7Form = document.querySelector('#cf7-wrapper form.wpcf7-form');\n      if (cf7Form) {\n        \/\/ klik op het verborgen CF7-submit\u2010veld:\n        cf7Form.querySelector('input[type=\"submit\"]').click();\n      }\n    });\n  }\n});\n\n\t\n\t\n\tdocument.addEventListener('wpcf7invalid', function(e) {\n  showStep(3); \/\/ blijf in stap 4 als validatie fout gaat\n}, false);\n\ndocument.addEventListener('wpcf7spam', function(e) {\n  showStep(3);\n}, false);\n\ndocument.addEventListener('wpcf7mailfailed', function(e) {\n  alert('Er is een fout opgetreden bij het verzenden. Probeer later opnieuw.');\n  showStep(3);\n}, false);\n\t\n\t\n\t\n\t\n\t\n  \/\/ =======================================================\n  \/\/ L. Verzenden naar CF7 & Bevestiging\n  \/\/ =======================================================\n  function verzendNaarCF7EnBevestig(event) {\n    event.preventDefault();\n\n    \/\/ MAP Multi-Step \u2192 CF7: ID\u2019s\n    const mapping = [\n      { msf: 'license_plate',       cf7: 'cf7_license_plate' },\n      { msf: 'mileage',             cf7: 'cf7_mileage' },\n\t  { msf: 'chassis',             cf7: 'cf7_chassis' },\n      { msf: 'car_type',            cf7: 'cf7_car_type' },\n      { msf: 'brand_select',        cf7: 'cf7_brand' },\n      { msf: 'datepicker',          cf7: 'cf7_date' },\n      { msf: 'selectedTimeInput',   cf7: 'cf7_time' },\n      { msf: 'mobility_option',     cf7: 'cf7_mobility_option' },\n      { msf: 'first_name',          cf7: 'cf7_first_name' },\n      { msf: 'surname',             cf7: 'cf7_surname' },\n      { msf: 'email_formstep',      cf7: 'cf7_email' },\n      { msf: 'phone',               cf7: 'cf7_phone' },\n      { msf: 'message_formstep',    cf7: 'cf7_message' },\n      \/\/ \u201cuser_type\u201d \u2192 CF7\u2010radio\n      { msf: 'userTypeHolder',      cf7: 'cf7_user_type' },     \n      { msf: 'company_name',        cf7: 'cf7_company_name' },\n      { msf: 'tax_number',          cf7: 'cf7_tax_number' }\n    ];\n\n    \/\/ Waarden kopi\u00ebren\n    mapping.forEach(pair => {\n      const msfEl = document.getElementById(pair.msf);\n      const cf7El = document.getElementById(pair.cf7);\n      if (!msfEl || !cf7El) return;\n\n      \/\/ Radio \u201cuser_type\u201d: we slaan de waarde (checked radio) in een hidden <input id=\"userTypeHolder\">\n      if (pair.msf === 'userTypeHolder') {\n        \/\/ Bepaal welke radio \u201cuser_type\u201d is aangevinkt\n        const checkedRadio = document.querySelector('input[name=\"user_type\"]:checked');\n        cf7El.value = checkedRadio ? checkedRadio.value : '';\n      } else {\n        cf7El.value = msfEl.value || '';\n      }\n    });\n\t  \n\t  const rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  const cf7Rent = document.getElementById('cf7_renting_customer');\n\t  if (rent && cf7Rent) {\n\t\tcf7Rent.value = rent.value;\n\t  }\n\n    \/\/ Inventory (max. 3) \u2192 bundle als comma\u2010string\n    const checkedInterventies = Array.from(\n      document.querySelectorAll('.inventory-checkbox:checked')\n    ).map(cb => cb.dataset.title.trim());\n    const invField = document.getElementById('cf7_inventory_ids');\n    if (invField) {\n      invField.value = checkedInterventies.join(', ');\n    }\n\n    \/\/ \u201cMaak account\u201d\u2010checkbox \u2192 CF7\n    const makeAccountChecked = !!document.getElementById('create_account_formstep')?.checked;\n    document\n\t  .querySelectorAll('#hidden-cf7 input[name=\"create_account[]\"]')\n\t  .forEach((cb) => {\n\t\tcb.checked = makeAccountChecked;\n\t  });\n\n    \/\/ \u201cPrivacy policy\u201d verplicht \u2192 CF7\n    const cf7Agree = document.getElementById('cf7_agree_policy');\n    if (cf7Agree) {\n      cf7Agree.checked = true;\n    }\n\n    \/\/ Submit het verborgen CF7-formulier\n    const cf7Form = document.querySelector('#hidden-cf7 form');\n    if (cf7Form) {\n  const cf7SendBtn = cf7Form.querySelector('input[type=\"submit\"]');\n  if (cf7SendBtn) {\n    cf7SendBtn.click();\n  }\n}\n  }\n\n  \/\/ Bind MSF\u2010submit (indien het formulier bestaat)\n \/* document.addEventListener('DOMContentLoaded', function () {\n    const msfForm = document.getElementById('multiStepForm');\n    if (msfForm) {\n      msfForm.addEventListener('submit', verzendNaarCF7EnBevestig);\n    }\n  });*\/\n\t\n\t\n\tdocument.addEventListener('wpcf7mailsent', function(event) {\n\n\t\tconst MIJN_CF7_ID = 2709;\n\t\tif (event.detail.contactFormId === MIJN_CF7_ID) {\n\t\t  const laatsteStapIndex = formSteps.length - 1; \n\t\t  window.location.hash = 'step' + laatsteStapIndex;\n\t\t  showStep(laatsteStapIndex);\n\n\t\t  if (window.confetti) {\n\t\t\tconfetti({\n\t\t\t  particleCount: 100,\n\t\t\t  spread: 70,\n\t\t\t  origin: { y: 0.6 }\n\t\t\t});\n\t\t  }\n\t\t}\n\t  }, false);\n\t\n\tfunction clearMSFData() {\n\t  \/\/ 1) localStorage keys verwijderen\n\t  const keys = [\n\t\t'msf_license_plate',\n\t\t'msf_mileage',\n\t\t'msf_chassis',\n\t\t'msf_car_type',\n\t\t'msf_brand',\n\t\t'msf_interventies',\n\t\t'msf_date',\n\t\t'msf_time',\n\t\t'msf_renting_customer',\n\t\t'msf_mobility_option',\n\t\t'msf_user_type',\n\t\t'msf_company_name',\n\t\t'msf_tax_number',\n\t\t'msf_first_name',\n\t\t'msf_surname',\n\t\t'msf_email',\n\t\t'msf_phone',\n\t\t'msf_message',\n\t\t'msf_create_account',\n\t\t'msf_agree_policy'\n\t  ];\n\t  keys.forEach(k => localStorage.removeItem(k));\n\n\t  \/\/ 2) Reset alle invoervelden in de multi-step form\n\t  const form = document.getElementById('multiStepForm');\n\t  if (form) {\n\t\tform.reset();\n\t  }\n\n\t  \/\/ 3) Zet alle interventie-checkboxen terug naar \u201cniet\u2010selected\u201d\n\t  document.querySelectorAll('.inventory-checkbox').forEach(cb => {\n\t\tcb.checked = false;\n\t\tcb.disabled = false;\n\t\tconst lab = cb.closest('label');\n\t\tif (lab) {\n\t\t  lab.classList.remove('selected');\n\t\t  lab.style.opacity = '1';\n\t\t}\n\t  });\n\n\t  \/\/ Let op: n\u00edet de preview\u2010velden (license_plate_preview, mileage_preview, etc.) leegschrijven!\n\t}\n\t\n\twindow.addEventListener('hashchange', function() {\n\t  const h = window.location.hash;\n\t  if (h.startsWith('#wpcf7')) {\n\t\twindow.location.hash = 'step' + currentStep;\n\t  }\n\t});\n\t\n\t\/\/ ====================\n  \/\/ Z. Confetti-functie\n  \/\/ ====================\n  function launchConfetti() {\n    \/\/ Zorg dat het confetti-effect \u00e9\u00e9n keer start\n    \/\/ Je kunt de opties naar wens aanpassen (aantal deeltjes, snelheid, kleuren, enz.).\n    confetti({\n      particleCount: 150,\n      spread: 70,\n      origin: { y: 0.6 }\n    });\n  }\n\t\n\t\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 1) syncAllValuesToCF7: kopie\u0308er alle waarden uit jouw multi-step\u2010velden \n  \/\/    naar de corresponderende CF7\u2010velden (hidden inputs).\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function syncAllValuesToCF7() {\n    \/\/ Helper\u2010functies om enkel te schrijven als het element bestaat\n    function setIfExists(id, value) {\n      const el = document.getElementById(id);\n      if (el) el.value = value;\n    }\n    function checkIfExists(id, checked) {\n      const el = document.getElementById(id);\n      if (el) el.checked = checked;\n    }\n\n    \/\/ \u2014 Stap 1 (Wagen) \u2014\n    const lp = document.getElementById('license_plate')?.value || '';\n    const km = document.getElementById('mileage')?.value || '';\n\tconst ch = document.getElementById('chassis')?.value || '';\n    const ct = document.getElementById('car_type')?.value || '';\n    const br = document.getElementById('brand_select')?.value || '';\n\n    \/\/ \u2014 Stap 2 (Interventies) \u2014\n    const checked = Array.from(document.querySelectorAll('.inventory-checkbox:checked'));\n\tconst names = checked.map(cb => cb.dataset.title.trim()).join(', ');\n\tconst ids = checked.map(cb => cb.value).join(',');\n\n    \/\/ \u2014 Stap 3 (Datum, Tijd & Mobility) \u2014\n    const dt = document.getElementById('datepicker')?.value || '';\n    const tm = document.getElementById('selectedTimeInput')?.value || '';\n\tconst rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n    const mo = document.getElementById('mobility_option')?.value || '';\n\n    \/\/ \u2014 Stap 4 (Persoonsgegevens) \u2014\n    const ut = document.querySelector('input[name=\"user_type\"]:checked')?.value || '';\n    const cn = document.getElementById('company_name_formstep')?.value || '';\n    const tn = document.getElementById('tax_number_formstep')?.value || '';\n    const fn = document.getElementById('first_name_formstep')?.value || '';\n    const sn = document.getElementById('surname_formstep')?.value || '';\n    const em = document.getElementById('email_formstep')?.value || '';\n    const ph = document.getElementById('phone_formstep')?.value || '';\n    const ms = document.getElementById('message_formstep')?.value || '';\n    const ca = !!document.getElementById('create_account_formstep')?.checked;\n    const ap = document.getElementById('agree_policy_formstep')?.checked;\n\n    \/\/ \u2014 Vul de corresponderende CF7-velden (pas deze IDs aan naar jouw CF7-shortcode) \u2014\n    setIfExists('cf7_license_plate', lp);\n    setIfExists('cf7_mileage', km);\n\tsetIfExists('cf7_chassis', ch);\n    setIfExists('cf7_car_type', ct);\n    setIfExists('cf7_brand', br);\n    setIfExists('cf7_interventies', names);\n\tsetIfExists('cf7_inventory_ids', ids);\n    setIfExists('cf7_date', dt);\n    setIfExists('cf7_time', tm);\n\tsetIfExists('cf7_renting_customer', rent ? rent.value : '');\n    setIfExists('cf7_mobility_option', mo);\n    setIfExists('cf7_user_type', ut);\n    setIfExists('cf7_company_name', cn);\n    setIfExists('cf7_tax_number', tn);\n    setIfExists('cf7_first_name', fn);\n    setIfExists('cf7_surname', sn);\n    setIfExists('cf7_email', em);\n    setIfExists('cf7_phone', ph);\n    setIfExists('cf7_message', ms);\n    document\n  .querySelectorAll('#hidden-cf7 input[name=\"create_account[]\"]')\n  .forEach((cb) => {\n    cb.checked = ca;\n  });\n    checkIfExists('cf7_agree_policy', ap);\n  }\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 2) \u201cLive\u201d listeners: zodra een bronveld verandert, roep direct syncAllValuesToCF7() aan\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function initCF7SyncListeners() {\n    \/\/ Helper: registeer evenementlistener als element bestaat\n    function onEvent(id, eventName) {\n      const el = document.getElementById(id);\n      if (el) el.addEventListener(eventName, syncAllValuesToCF7);\n    }\n\n    \/\/ --- Stap 1: tekst en select velden ---\n    onEvent('license_plate', 'input');\n    onEvent('mileage', 'input');\n    onEvent('car_type', 'change');\n    onEvent('brand_select', 'change');\n\n    \/\/ --- Stap 2: interventie-checkboxes ---\n    document.querySelectorAll('.inventory-checkbox').forEach(cb => {\n      cb.addEventListener('change', syncAllValuesToCF7);\n    });\n\n    \/\/ --- Stap 3: datum & tijd & mobiliteit ---\n    \/\/ Flatpickr selecteert datum, deze gebruikt onChange; we luisteren op het verborgen <input> zelf:\n    onEvent('datepicker', 'change');          \/\/ indien je Flatpickr onchange naar dat input zet\n    onEvent('selectedTimeInput', 'change');    \/\/ verborgen tijd-input\n\tdocument.querySelectorAll('input[name=\"renting_customer\"]').forEach(radio => {\n\t  radio.addEventListener('change', syncAllValuesToCF7);\n\t});\n    onEvent('mobility_option', 'change');\n\n    \/\/ Tijd-knoppen:\n    document.querySelectorAll('.slots button').forEach(btn => {\n      btn.addEventListener('click', () => {\n        \/\/ nadat tijd in het verborgen veld is gezet, sync:\n        setTimeout(syncAllValuesToCF7, 0);\n      });\n    });\n\n    \/\/ --- Stap 4: persoonsgegevens ---\n    onEvent('company_name_formstep', 'input');\n    onEvent('tax_number_formstep', 'input');\n    onEvent('first_name_formstep', 'input');\n    onEvent('surname_formstep', 'input');\n    onEvent('email_formstep', 'input');\n    onEvent('phone_formstep', 'input');\n    onEvent('message_formstep', 'input');\n    \/\/ radio buttons:\n    document.querySelectorAll('input[name=\"user_type\"]').forEach(radio => {\n      radio.addEventListener('change', syncAllValuesToCF7);\n    });\n    \/\/ checkboxes in stap 4:\n    onEvent('create_account_formstep', 'change');\n    onEvent('agree_policy_formstep', 'change');\n  }\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 3) Wanneer CF7\u2010formulier er is, onderscheppen we ook 'submit' om zeker alles mee te geven\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  document.addEventListener('DOMContentLoaded', function() {\n    \/\/ 3a) start de live\u2010listeners\n    initCF7SyncListeners();\n    \/\/ 3b) onderschep CF7 submit\n    const cf7Wrapper = document.getElementById('hidden-cf7');\n    if (!cf7Wrapper) return;\n    setTimeout(() => {\n      const cf7Form = cf7Wrapper.querySelector('form.wpcf7-form');\n      if (!cf7Form) return;\n      cf7Form.addEventListener('submit', function() {\n        syncAllValuesToCF7();\n      });\n    }, 200);\n  });\n\n\n  function onStepChange(newStepIndex) {\n    \/\/ Als we net Stap 4 hebben ingevuld en op Next klikken:\n    if (newStepIndex === 4) {\n      \/\/ Eerst waarden synchroniseren naar CF7\n      syncAllValuesToCF7();\n      \/\/ Scrollen naar het verborgen CF7-formulier (optioneel)\n      const cf7Anchor = document.getElementById('hidden-cf7');\n      if (cf7Anchor) {\n        cf7Anchor.scrollIntoView({ behavior: 'smooth' });\n      }\n    }\n    \/\/ De rest van je bestaande onStepChange-logica (bv. validatie per stap) blijft ongewijzigd.\n  }\n\n\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ 3) CF7-submit-event onderscheppen en w\u00e9\u00e9r syncAllValuesToCF7 aanroepen\n  \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  document.addEventListener('DOMContentLoaded', function() {\n    const cf7Wrapper = document.getElementById('hidden-cf7');\n    if (!cf7Wrapper) return;\n\n    \/\/ Wacht kort tot CF7 zijn form heeft gegenereerd\n    setTimeout(() => {\n      const cf7Form = cf7Wrapper.querySelector('form.wpcf7-form');\n      if (!cf7Form) return;\n\n      cf7Form.addEventListener('submit', function(e) {\n        syncAllValuesToCF7();\n        \/\/ Daarna laat CF7 gewoon verder verzenden\n      });\n    }, 200);\n  });\n<\/script>\n\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n  \/\/ TIJDBUTTONS IN DE RECHTERKOLOM\n  const timeButtons = document.querySelectorAll('#timeColumn .slots button');\n  timeButtons.forEach(btn => {\n    btn.addEventListener('click', () => {\n      \/\/ Verwijder .active van alle knoppen\n      timeButtons.forEach(b => b.classList.remove('active'));\n      \/\/ Voeg .active toe aan de geklikte knop\n      btn.classList.add('active');\n      \/\/ Schrijf de gekozen tijd weg in het verborgen input-veld\n      const gekozen = btn.getAttribute('data-time');\n      document.getElementById('selectedTimeInput').value = gekozen;\n      localStorage.setItem('msf_time', gekozen);\n\n      \/\/ Update preview in stap 4\/5\n      const previewTime = document.getElementById('selected_time');\n      if (previewTime) previewTime.textContent = gekozen || 'Not selected';\n    });\n  });\n\n  \/\/ 3) LAAD EERDERE WAARDEN UIT localStorage\n  const storedDate = localStorage.getItem('msf_date');\n  const storedTime = localStorage.getItem('msf_time');\n  if (storedDate) {\n    \/\/ Stel de datum in Flatpickr in\n    const fpInstance = document.querySelector('#datepicker')._flatpickr;\n    fpInstance.setDate(storedDate, true);\n  }\n  if (storedTime) {\n    \/\/ Markeer de juiste tijdknop\n    const knop = document.querySelector(\n      `#timeColumn .slots button[data-time=\"${storedTime}\"]`\n    );\n    if (knop) knop.classList.add('active');\n    document.getElementById('selectedTimeInput').value = storedTime;\n  }\n});\n\t\n\t\/\/ pak je form\n\/*const msfForm = document.getElementById('multiStepForm');\nmsfForm.addEventListener('submit', function(e) {\n  \/\/ all\u00e9\u00e9n stap 3 (index 3) validatie\n  if (currentStep === 3) {\n    \/\/ verwijder oude foutmeldingen\n    document.querySelectorAll('.msf-error').forEach(el => el.remove());\n\n    let ok = true;\n    \/\/ veld-validaties\n    ['first_name_formstep','surname_formstep','email_formstep']\n      .forEach(id => {\n        const el = document.getElementById(id);\n        if (!el.value.trim()) {\n          el.insertAdjacentHTML('afterend',\n            '<div class=\"msf-error\">Dit veld is verplicht<\/div>'\n          );\n          ok = false;\n        }\n      });\n\n    \/\/ privacy checkbox\n    const agreeEl = document.getElementById('agree_policy_formstep');\n    if (!agreeEl.checked) {\n      const wrapper = agreeEl.closest('.checkbox-container');\n      wrapper.insertAdjacentHTML('beforeend',\n        '<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>'\n      );\n      ok = false;\n    }\n\n    if (!ok) {\n      e.preventDefault();      \/\/ formulier niet versturen\n      \/\/ blijf op stap 3\n      showStep(3);\n    }\n  }\n});*\/\n\t\n\tdocument.getElementById('msfFinalBtn').addEventListener('click', function() {\n  \/\/ eerst uitvoeren wat nextStep() doet voor stap 3 \u2192 privacy-validatie\n  \/\/ maar in plaats van showStep(4), doen we nu de submit naar CF7\n\n  \/\/ 1) run je bestaande validatie voor currentStep===3:\n  let ok = true;\n  document.querySelectorAll('.msf-error').forEach(e=>e.remove());\n  ['first_name_formstep','surname_formstep','email_formstep'].forEach(id=>{\n    const el=document.getElementById(id);\n    if(!el.value.trim()){\n      el.insertAdjacentHTML('afterend','<div class=\"msf-error\">Dit veld is verplicht<\/div>');\n      ok=false;\n    }\n  });\n  const agreeEl = document.getElementById('agree_policy_formstep');\n  if(!agreeEl.checked){\n    agreeEl.closest('.checkbox-container')\n      .insertAdjacentHTML('beforeend','<div class=\"msf-error\">Je moet akkoord gaan met de privacy policy<\/div>');\n    ok=false;\n  }\n  if(!ok){\n    showStep(3);\n    return;\n  }\n\n  \/\/ 2) als alles ok is: syncAllValuesToCF7() \u00e9n trigger CF7\n  syncAllValuesToCF7();\n  const cf7Form = document.querySelector('#hidden-cf7 form');\n  cf7Form.querySelector('input[type=\"submit\"]').click();\n});\n\t\n\tdocument.addEventListener('DOMContentLoaded', function(){\n\t  const emailEl    = document.getElementById('email_formstep');\n\t  const caContainer= document.getElementById('ca-container');\n\t  const haveAcc    = document.getElementById('have-account-container');\n\t  const createCb   = document.getElementById('create_account_formstep');\n\t  const openBtns  = document.querySelectorAll('.msf-open-login');\n\t  const closeBtn   = document.getElementById('msf-close-login');\n\t  const modal      = document.getElementById('msf-login-modal');\n\t\t\n\n\t  \/\/ 1) Check bij blur of e-mail al bestaat\n\t  emailEl.addEventListener('blur', () => {\n\t\tconst email = emailEl.value.trim();\n\t\tif (!email) return;\n\t\tconst data = new URLSearchParams({ action:'check_email_exists', email });\n\t\tfetch('https:\/\/miers.be\/wp-admin\/admin-ajax.php', {\n\t\t  method:'POST',\n\t\t  headers:{'Content-Type':'application\/x-www-form-urlencoded'},\n\t\t  body: data.toString()\n\t\t})\n\t\t.then(r=>r.json())\n\t\t.then(res=>{\n\t\t  if (res.success && res.data.exists) {\n\t\t\t\/\/ verberg \u201cMaak account\u201d en toon login-link\n\t\t\tcaContainer.style.display   = 'none';\n\t\t\thaveAcc.style.display       = 'block';\n\t\t\tcreateCb.checked            = false;\n\t\t  } else {\n\t\t\tcaContainer.style.display   = '';\n\t\t\thaveAcc.style.display       = 'none';\n\t\t  }\n\t\t});\n\t  });\n\n\t  openBtns.forEach(btn => {\n\t\tbtn.addEventListener('click', function(e) {\n\t\t  e.preventDefault();\n\t\t  modal.classList.add('open');\n\t\t});\n\t  });\n\n\t  closeBtn.addEventListener('click', function() {\n\t\tmodal.classList.remove('open');\n\t  });\n\t});\n\t\n\tdocument.addEventListener('wpcf7beforesubmit', function(event) {\n\t  var rent = document.querySelector('input[name=\"renting_customer\"]:checked');\n\t  var hidden = event.target.querySelector('input[type=\"hidden\"][name=\"renting_customer\"]');\n\t  if (rent && hidden) {\n\t\thidden.value = rent.value;\n\t  }\n\t}, false);\n\n\tdocument.addEventListener('DOMContentLoaded', function () {\n  const cf7Root = document.getElementById('hidden-cf7');\n  if (!cf7Root) return;\n\n  const cf7Form = cf7Root.querySelector('form.wpcf7-form');\n  if (!cf7Form) return;\n\n  if (!cf7Form.id) {\n    cf7Form.id = 'cf7-form-2709';\n  }\n  const fileInput = cf7Form.querySelector('input[type=\"file\"]#bestanden');\n  if (!fileInput) return;\n\n  const wrap = fileInput.closest('.wpcf7-form-control-wrap');\n  if (!wrap) return;\n\n  const slot = document.getElementById('msf-upload-slot');\n  if (!slot) return;\n  slot.appendChild(wrap);\n  fileInput.setAttribute('form', cf7Form.id);\n\n  if (!slot.querySelector('.msf-upload-title')) {\n    const title = document.createElement('div');\n    title.className = 'msf-upload-title';\n    title.style.marginTop = '12px';\n    title.style.fontWeight = '600';\n    title.textContent = \"Foto's\/bestanden toevoegen\";\n    slot.prepend(title);\n  }\n});\n<\/script>\n\n\n\n\n<style>\n  option {\n    color: #0C5453;\n}\n  \n  \n  \n  .flatpickr-rContainer {\n    display: inline-grid !important\n;\n    padding: 0;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n  \n  \n  \n  \n  .slots button\nSpecificity: (0,1,1)\n {\n    WIDTH: 20% ! IMPORTANT;\n}\n  \n  \n  \n  .flatpickr-rContainer {\n    width: 309px ! IMPORTANT;\n}\n  \n  \n  \n  span.flatpickr-day  {\n    background-color: #e6e6e6;\n    color: #000;\n}\n  \n  span.flatpickr-day.nextMonthDay {\n    background-color: #e6e6e6;\n    color: #000;\n}\n  \n  \n  \n  \n\n  span.flatpickr-day.selected {\n    background-color: #0C5453 !important;\n}\n  \n  \n  \n  .preview {\n  \n    padding: 10px;\n    border-radius: 10px;\n \n}\n  \n  \n  p {\n    padding-bottom: 0px !important;\n}\n  \n  \n  form.register {\n    text-align: left;\n}\n .et_builder_inner_content {\n    z-index: inherit !important;\n}\n.et_pb_column {  \n    z-index: auto !important;    \n}\n  \n  \n  \n  \n  \n  \n  \n  .form-buttons input[type=\"submit\"] {\n    width: 20% !important;\n    color: #ffffff;\n    background-color: #0C5453;\n}\n  .f-123 h3 {\n    font-size: 20px !important;\n    text-align: left !important;\n}\n  \n  .f-123 label.selected {\n    background-color:  #0C5453;;\n  }\n\n.f-123 input[type=\"checkbox\"] {\n    display:none;\n}\n  .f-123 label.selected img {\n    filter: brightness(0) invert(1); \/* Makes image appear white *\/\n  }\n<\/style>\n\n<style>\n   \n \/* Step Indicator *\/\n.step-container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    border-bottom: 2px solid #ccc;\n    margin-bottom: 20px;\n}\n\n.step {\n    flex: 1 1 20%;\n    text-align: center;\n    padding: 10px;\n    color: gray;\n    font-weight: bold;\n    display: flex\n;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    font-size: 14px;\n    border: 1px solid #ccc;\n}\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n.f-123 {\n  background-color: #ffffff;\n  \n  flex: 0 0 60%;\n  box-sizing: border-box;\n}\n\t.f-123.interventies {\n  background-color: transparent!important;\n\t\t}\n\ninput[type=\"number\"] {\n    padding: 18px !important;\n\tfont-size:16px!important;\n}\n\n.form-step input, .form-step select, .form-step textarea {\n    width: 100%;\n    padding: 10px;\n    margin: 10px 7px;\n    border-radius: 5px;\n    border: 1px solid #ccc;\n    box-sizing: border-box;\n}\nlabel {\n    width: 48%;\n  color: #0C5453;\n}\n.f-123 {\n    padding: 18px 18px;\n    border-radius: 10px;\n}\n.f-124 {\n    padding: 18px 18px;\n    border-radius: 10px;\n}\nform#multiStepForm h3 {\n    text-align: center;\n    padding: 20px;\n    font-size: 30px;\n    color: #0C5453;\n}\n.Inventory-2 {\n  display: flex;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 20px;\n  margin-top: 20px;\n}\n\n.Inventory-2 label {\n  \/*display: flex;*\/\n  flex-direction: column;\n  align-items: center;\n  border: 2px solid #0C5453;\n  border-radius: 16px;\n  padding: 20px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  position: relative;\n  background: #fff;\n}\n\n.Inventory-2 label:hover {\n  box-shadow: 0 0 10px rgba(0, 181, 165, 0.2);\n}\n\n\n\n.Inventory-2 input[type=\"checkbox\"]:checked + img,\n.Inventory-2 input[type=\"checkbox\"]:checked ~ img {\n  filter: brightness(0) invert(1);\n}\n\n.Inventory-2 input[type=\"checkbox\"]:checked ~ span {\n  color: #fff;\n}\n\n.Inventory-2 input[type=\"checkbox\"]:checked ~ label {\n  background-color: #0C5453;\n  color: white;\n  border-color: #0C5453;\n}\n\n\n.Inventory-2 span {\n  font-size: 16px;\n  color: #0C5453;\n  font-weight: 500;\n  transition: color 0.3s ease;\n}\n\n.step.completed {\n  color: #00bcd4;\n}\n\n.step.active {\n  border-bottom: 3px solid #0C5453;\n  color: #0C5453 !important;\n  \n}\n\n\n\n\/* Form Step *\/\n.form-step {\n  display: none;\n  background: #f6f6f6;\n  padding: 20px;\n  border-radius: 10px;\n  \n}\n\n.form-step.active {\n  display: block;\n}\n\n.form-step input,\n.form-step select,\n.form-step textarea {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  box-sizing: border-box;\n}\n\n.form-buttons {\n  text-align: right;\n  margin-top: 15px;\n}\n\n.form-buttons button {\n  padding: 10px 20px;\n  background-color: #0C5453;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  margin-left: 10px;\n}\n.location-card {\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 15px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n  justify-content: space-between;\n \u00a0gap: 15px;\n\tmargin-bottom:10px;\n}\n\n\n\n.location-details {\n  flex-grow: 1;\n  color: #333;\n  font-size: 14px;\n}\n\n.location-details strong {\n  color: #000;\n}\n\n.location-edit {\n  color: #b0b0b0;\n  font-size: 14px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.Inventory-2 input[type=\"checkbox\"]:checked + img, .Inventory-2 input[type=\"checkbox\"]:checked ~ img {\n    filter: contrast(-1.5) !important;\n}\n.Inventory-2 label {\n    width: 30%;\n}\nspan.mk-098 {\n    display: block;\n}\n.calendar-container {\n  display: flex;\n  gap: 40px;\n  margin-top: 20px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n#datepicker {\n  border: none;\n}\n\n.time-slots {\n  display: none;\n}\n\n.time-slots p {\n  margin-bottom: 10px;\n  font-weight: 600;\n}\n\n.slots {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.slots button {\n  border: 1px solid #00a89c;\n  background: white;\n  color: #00a89c;\n  border-radius: 20px;\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n\n.slots button.active,\n.slots button:hover {\n  background-color: #00a89c;\n  color: white;\n}\n.flatpickr-calendar.inline {\n    width: 490px;\n}\n.flatpickr-rContainer {\n    width: 490px;\n}\n.flatpickr-days {\n    width: 490px;\n}\n.radio-2 label {\n  display: inline-block;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.radio-2 input[type=\"radio\"] {\n  margin-right: 5px;\n}\ninput[type=\"radio\"] {\n    width: auto ! IMPORTANT;\n}\ninput[type=\"checkbox\"] {\n    width: auto !important;\n    margin-right: 10px;\n}\n.Inventory-2 input[type=\"checkbox\"] {\n    width: 100% !important;\n}\n\/* Responsive Styles *\/\n@media (max-width: 768px) {\n  .step {\n    flex: 1 1 50%;\n    font-size: 13px;\n  }\n\n  .form-buttons {\n    text-align: center;\n  }\n\n  .form-buttons button {\n    margin-top: 10px;\n    width: 100%;\n  }\n}\n@media (max-width: 600px) {\n  .location-card {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .location-edit {\n    align-self: flex-end;\n    margin-top: 10px;\n  }\n}\n@media (max-width: 480px) {\n  .step {\n    flex: 1 1 100%;\n    font-size: 12px;\n    padding: 8px;\n  }\n\n  .form-step {\n    padding: 15px;\n  }\n\n  .form-step input,\n  .form-step select,\n  .form-step textarea {\n    padding: 8px;\n    font-size: 14px;\n  }\n\n  .form-buttons button {\n    font-size: 14px;\n    padding: 10px;\n  }\n}\n\n   p#tr3 {\n    border: solid 1px #0C5453;\n    padding: 20px!important;\n    border-radius: 20px;\n    color: #0C5453;\n    font-weight: 400;\n\t   margin-bottom:20px;\n\t   text-align:left;\n}\n  \n  \n\n  \n  \n  .flatpickr-innerContainer {\n    display: flow ! IMPORTANT;   \n}\n  .flatpickr-weekdays {\n    WIDTH: 63% ! IMPORTANT;\n}\n  \n  div#b3 label {\n    border: solid 1px #0C5453;\n    padding: 10px;\n    border-radius: 10px;\n    color: #0C5453;\n}\n  div#b3 input[type=\"radio\"] {\n    accent-color: #0C5453;\n}\n  \n  \n  .last-3 {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    font-family: sans-serif;\n  }\n\n  .type-klant-label {\n    font-weight: 600;\n    color: #2da49c;\n        width: 24%;\n  }\n\n  .radio-2 {\n    display: flex;\n    gap: 1rem;\n    align-items: center;\n    width: 80%;\n  }\n\n#brand_select.searchable-dropdown {\n  height: 42px !important;\n  box-sizing: border-box;\n}\n\n\n.select2-container--default .select2-selection--single {\n  height: 42px !important;\n  margin-top: 10px !important;\n  box-sizing: border-box;\n}\n\n\n.select2-container--default .select2-selection--single .select2-selection__rendered {\n  line-height: 426px !important;\n}\n\n\n.select2-container--default .select2-selection--single .select2-selection__arrow {\n  height: 42px !important;\n}\n  \n  .hidden-more {\n  display: none;\n}\n  \n  \/* Verberg extra interventies in eerste weergave *\/\n.hidden-more {\n  display: none;\n}\n\n\/* Wanneer een interventie is geselecteerd *\/\n.f-123 label.selected {\n  background-color: #0C5453;\n  color: #fff;\n}\n.f-123 label.selected img {\n  filter: brightness(0) invert(1);\n}\n\n\/* Standaard on\u2010selected labels (om ervoor te zorgen dat de tekst in #0C5453 blijft) *\/\n.f-123 label {\n  color: #0C5453;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Image\u2010transition (altijd aanwezig) *\/\n.Inventory-2 img {\n  transition: filter 0.3s ease;\n}\n\t\n\/* --------------------------------------------------\n   1) Forceer .f-123 en .f-124 in .f-row op 60% \/ 38%\n   -------------------------------------------------- *\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap; \/* indien scherm te smal, stapelen ze onder elkaar *\/\n}\n\n\n\n\/* -------------------------------------------------------\n   2) Maak .Inventory-2 tot flex-wrap: 4 items per rij\n   ------------------------------------------------------- *\/\n.Inventory-2 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  margin-top: 10px;\n}\n\n\/* Elk label neemt ongeveer 25% breedte (minus gap) *\/\n.Inventory-2 label.interventie-optie {\n  flex: 0 0 calc(25% - 20px);\n  max-width: calc(25% - 20px);\n  box-sizing: border-box;\n  \/*display: flex;*\/\n  flex-direction: column;\n  align-items: center;\n  border: 2px solid #0C5453;\n  border-radius: 16px;\n  padding: 20px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  background: #fff;\n}\n\n.Inventory-2 label.interventie-optie:hover {\n  box-shadow: 0 0 10px rgba(0, 181, 165, 0.2);\n}\n\n\/* Standaard: niet\u2010geselecteerde labels *\/\n.f-123 label.interventie-optie {\n  color: #0C5453;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Geselecteerde labels *\/\n.f-123 label.selected {\n  background-color: #0C5453;\n  color: #fff;\n}\n.f-123 label.selected img {\n  filter: brightness(0) invert(1);\n}\n\n\/* Hidden-more: vanaf de 7e in \u201cMeer interventies\u201d *\/\n.hidden-more {\n  display: none;\n}\n\n\/* \u201cMeer laden\u2026\u201d-knop *\/\n.btn-load-more {\n  padding: 8px 24px;\n  background-color: #0C5453;\n  color: #fff;\n  border: 1px solid #0C5453;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n.btn-load-more:hover {\n  background-color: transparent;\n\tcolor: #0C5453;\n}\n\n\/* Image-transition (altijd aanwezig) *\/\n.Inventory-2 img {\n  width: 62.3px;\n  transition: filter 0.3s ease;\n}\n\t\n\t\/* Step 3 *\/\n.kalender {\n\t\tbackground-color: #fff;\n\t\tborder-radius:20px;\n\tpadding:20px;\n\t}\n\t\n\t\n\t\n\t\/* ---------------------------------------------------\n   ALLE KLEUREN & STYLING F\u00d6R FLATPICKR & TIJDSELECTIE\n   --------------------------------------------------- *\/\n\n\/* Container voor kalender + tijd *\/\n.calendar-time-container {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n\n\/* Linker kolom: de inline Flatpickr *\/\n.calendar-column {\n  flex: 2 1 300px;   \/* minimaal 300px breed *\/\n  position: relative;\/* zodat maand\/jaar-dropdowns linksboven komen *\/\n}\n\n\/* Rechter kolom: tijdselectie *\/\n.time-column {\n  flex: 1 1 150px;   \/* minimaal 150px breed *\/\n  display: none;     \/* pas zichtbaar nadat datum gekozen *\/\n  flex-direction: column;\n  align-items: flex-start;\n  font-family: sans-serif;\n}\n.time-column.visible {\n  display: flex;\n\tmargin:auto;\n}\n\/* \u201cKies eerst een datum\u201d of de gekozen datum *\/\n.selected-date-display {\n  font-size: 16px;\n  color: #0C5453;\n  margin-bottom: 10px;\n  font-weight: bold;\n}\n\n\/* TIJD BUTTONS *\/\n.time-column .slots {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.time-column .slots button {\n  width: 100%;\n  border: 1px solid #888888;\n  background: white;\n  color: #626262;\n  border-radius: 10px;\n  padding: 8px 12px;\n  text-align: center;\n  font-size: 14px;\n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n\tpadding: 1px 30px;\n}\n.time-column .slots button.active,\n.time-column .slots button:hover {\n  background-color: #0C5453;\n  color: white;\n  border-color: #0C5453;\n}\n\n\/* FLATPICKR OVERRIDES *\/\n\/* Verberg standaard input (we tonen alleen inline kalender) *\/\n#datepicker {\n  display: none;\n}\n\n\/* Maak flatpickr inline kalender full-width in container *\/\n.flatpickr-calendar.inline {\n  width: 100% !important;\n  max-width: 420px;        \/* pas eventueel aan *\/\n  border: none;\n  box-shadow: none;\n}\n\n\n\n\/* WEEKDAGEN LIJN (MO, DI, WO, DO, VR, ZA, ZO) *\/\n\/* Onderliggend gebruiken we Flatpickr locale-shorthand. We styleen met groene rand en afgeronde hoeken *\/\n.flatpickr-weekday {\n  font-weight: 600;\n  font-size: 14px!important;\n  color: #0C5453!important;\n  border: 1px solid #0C5453;\n  margin: 2px;\n\twidth: 40px;\n    height: 27px;\n    line-height: 27px!important;\n    text-align: center;\n    margin: 2px!important;\n    border-radius: 10px;\n    background-color: transparent!important;\n\t\n}\n\n\/* DAGEN-REGIO *\/\n.flatpickr-days {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n}\n\n\/* Elke dagcel *\/\n.flatpickr-day {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n  text-align: center;\n  margin: 2px;\n  border: none;\n  border-radius: 10px;   \n  background-color: rgba(136, 136, 136, 0.05)!important; \n  color: #626262;     \n  cursor: pointer;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n\/* Niet-selecteerbare (disabled) datums, incl. weekend *\/\n.flatpickr-day.disabled {\n  background-color: #f0f0f0 !important;\n  color: #cccccc !important;\n  cursor: not-allowed;\n}\n\n\/* Hover-effect enkel voor actieve (selecteerbare) dagen *\/\n.flatpickr-day:not(.disabled):hover {\n  background-color: #0C5453!important;\n  color: #ffffff;\n}\n\n\/* Geselecteerde dag *\/\n.flatpickr-day.selected {\n  background-color: #0C5453 !important;\n  color: #ffffff !important;\n}\n\n\/* Focused dag (toetsenbordnavigatie) *\/\n.flatpickr-day:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(44,160,144,0.5);\n}\n\n\/* Verberg standaard grid voor weeknummers e.d. *\/\n.flatpickr-weekWrapper,\n.flatpickr-weekdaycontainer {\n  \/* we vangen .flatpickr-weekdaycontainer er al mee, maar extra zekerheid *\/\n  margin: 0;\n  padding: 0;\n}\n\n\/* Ruimte rondom de kalender (optioneel) *\/\n.flatpickr-innerContainer {\n  padding: 0;\n  margin: 0;\n}\n\t\n\t\/* =======================================================\n   1) Zorg dat de header (maand + jaar + pijltjes) zichtbaar is\n   ======================================================= *\/\n\n\/* Maak de header (de container met pijltjes en maandnaam) altijd zichtbaar *\/\n.flatpickr-months {\n  display: flex !important;\n  align-items: center;\n  justify-content: center; \/* Je gebruikte dit al inline, maar we herhalen het hier *\/\n  background: transparent !important; \/* zorg dat er geen achtergrondkleur van elders overheen komt *\/\n  margin-bottom: 8px;\n}\n\n\/* Pijltjes < en > *\/\n.flatpickr-prev-month,\n.flatpickr-next-month {\n  font-size: 20px !important;\n  color: #0C5453 !important;      \/* Of een andere accentkleur naar wens *\/\n  cursor: pointer;\n  user-select: none;\n  padding: 0 10px;\n}\n\n\/* Container waarin de maandnaam en het jaarnummer zitten *\/\n.flatpickr-current-month {\n  align-items: center;\n  gap: 6px;\n}\n\n\/* De maandnaam (\u201cJuli\u201d, \u201cMei\u201d, etc.) *\/\n.flatpickr-current-month .cur-month {\n  font-size: 16px !important;\n  color: #333333 !important;       \/* Tekstkleur van de maandnaam *\/\n  font-weight: 600;\n  text-transform: capitalize;      \/* Zorgt dat \u2018mei\u2019 \u2192 \u2018Mei\u2019 wordt, etc. *\/\n}\n\n\/* Het jaarnummer (input field met pijltjes omhoog\/omlaag) *\/\n.flatpickr-current-month .cur-year {\n  width: 50px !important;          \/* Genoeg breedte voor 4\u2010cijferig jaar *\/\n  font-size: 16px !important;\n  color: #333333 !important;\n  font-weight: 600;\n  text-align: center; \n  border: none !important;         \/* Geen rand rond het input\u2010veld *\/\n  background: transparent !important; \/* Doorzichtig, zodat het niet blinkt *\/\n  box-shadow: none !important;     \/* Verwijder eventuele schaduw of outline *\/\n  appearance: none !important;     \/* Verwijder browser\u2010specifieke pijltjes\/styling *\/\n  -moz-appearance: textfield !important;\n}\n\n\/* Verberg de pijltjes binnen het input\u2010jaarnummer (omdat we geen spin\u2010controls willen zien) *\/\n.flatpickr-current-month .cur-year::-webkit-outer-spin-button,\n.flatpickr-current-month .cur-year::-webkit-inner-spin-button {\n  -webkit-appearance: none !important;\n  margin: 0;\n}\n.flatpickr-current-month .cur-year[type=\"number\"] {\n  -moz-appearance: textfield !important;\n}\n\n\/* =======================================================\n   2) Optioneel: iets meer padding\/marge aan de header geven\n   ======================================================= *\/\n\n\/* Zet wat ruimte boven de kalender, zodat hij niet \u201caan je form\u201d kleeft *\/\n.flatpickr-calendar {\n  margin-top: 10px !important;\n}\n\n\/* =======================================================\n   3) Controleer dat er geen regel is die .flatpickr\u2010tekst \u201cverbergt\u201d\n   ======================================================= *\/\n\n\/* Soms zet men in een thema global \u201cinput { color: transparent; }\u201d of \u201c.flatpickr\u2010* { display: none }\u201d \n   Controleer je eigen CSS op zulk soort regels en overschrijf ze zo nodig: *\/\n.flatpickr-current-month,\n.flatpickr-prev-month,\n.flatpickr-next-month {\n \n  visibility: visible !important;\n  opacity: 1 !important;\n}\n\t\n\t.flatpickr-current-month .numInputWrapper {\n\t\tdisplay:none!important;\n\t}\n\t\n\t\/* 1) Zorg dat de header een flex-container is *\/\n.flatpickr-months {\n  display: flex !important;\n  align-items: center;\n  justify-content: space-between; \/* pijltjes en maand verdelen zich over de breedte *\/\n  padding: 0 10px;                \/* optioneel wat ruimte aan linker-\/rechterzijde *\/\n}\n\n\/* 2) Laat de maand-container (flatpickr-month) groeien zodat cur-month in het midden staat *\/\n.flatpickr-month {\n  flex: 1;                        \/* neemt alle resterende ruimte in beslag tussen de pijltjes *\/\n  display: block!important;\n  justify-content: center;       \/* centreert de cur-month horizontaal *\/\n}\n\n\/* 3) Verberg het jaarnummer-inputveld (numInputWrapper) *\/\n.flatpickr-current-month .numInputWrapper {\n  display: none !important;\n}\n\n\/* 4) Optioneel: style het cur-month zelf nog iets *\/\n.flatpickr-current-month .cur-month {\n  font-size: 16px !important;\n  font-weight: 400;\n  color: #0C5453!important;       \/* of welke kleur je wilt *\/\n  text-transform: capitalize;\n}\n\n\/* 5) Style de pijltjes: *\/\n.flatpickr-prev-month,\n.flatpickr-next-month {\n  font-size: 20px !important;\n  color: #0C5453 !important;\n  cursor: pointer;\n  user-select: none;\n  padding: 0 8px;\n}\n\t\n\t\/* ===================================================================\n   Stap 4: Layout en styling ingavevelden\n   =================================================================== *\/\n\n\/* F-rij: twee kolommen naast elkaar *\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n\n\/* ==== Input-paar: twee inputs naast elkaar ==== *\/\n.input-pair {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n.input-pair input {\n  flex: 1;\n}\n\n\/* Zakelijk-velden: standaard verborgen *\/\n.pro-fields {\n  display: none;\n  margin-bottom: 16px;\n}\n\n\/* ==== Algemene stijl voor tekstvelden en textarea ==== *\/\n.f-123 input[type=\"text\"]:not(#license_plate):not(#chassis),\n.f-123 input[type=\"email\"],\n.f-123 textarea {\n  width: 100%;\n  padding: 8px 4px;\n  margin: 0; \n  font-size: 14px;\n  color: #0C5453;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid #0C5453;\n\tborder-radius:0px!important;\n  box-sizing: border-box;\n  outline: none;\n}\n\n\/* Placeholder-kleur iets lichter *\/\n.f-123 input::placeholder,\n.f-123 textarea::placeholder {\n  color: #888888;\n}\n\n\/* Bij focus onderlijn accentueren *\/\n.f-123 input:focus,\n.f-123 textarea:focus {\n  border-bottom: 2px solid #0C5453;\n  color: #222222;\n}\n\n\/* Textarea min-hoogte *\/\n.f-123 textarea {\n  min-height: 80px;\n  resize: vertical;\n}\n\n\/* ==== Radiobuttons \u201cType klant\u201d ==== *\/\n.type-klant-container {\n  margin-bottom: 20px;\n}\n.type-klant-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 8px;\n  color: #0C5453;\n  font-size: 14px;\n}\n.radio-2 {\n  display: flex;\n  gap: 20px;\n}\n.radio-2 label {\n  display: inline-flex;\n  align-items: center;\n  font-size: 14px;\n  color: #333333;\n  cursor: pointer;\n  gap: 4px;\n  user-select: none;\n}\n.radio-2 input[type=\"radio\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: #0C5453; \/* groen accent voor bolletje *\/\n}\n\n\/* ==== Checkbox-container (custom versie) ==== *\/\n.checkbox-container {\n  margin: 12px 0;\n}\n.checkbox-container input[type=\"checkbox\"] {\n  display: none; \/* verberg standaard element *\/\n}\n.custom-checkbox-label {\n  position: relative;\n  padding-left: 28px;\n  font-size: 14px;\n  color: #333333;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n}\n.custom-checkbox-label::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 18px;\n  height: 18px;\n  border: 2px solid #ccc;\n  border-radius: 4px;\n  background: #ffffff;\n  box-sizing: border-box;\n  transition: border-color 0.2s ease, background-color 0.2s ease;\n}\n.custom-checkbox-label::after {\n  content: \"\";\n  position: absolute;\n  left: 4px;\n  top: 50%;\n  transform: translateY(-50%) scale(0);\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 15%, 80% 0, 43% 62%);\n  \/* een eenvoudig vink-icoon met polygon *\/\n  transition: transform 0.15s ease;\n  opacity: 0;\n}\n.checkbox-container input[type=\"checkbox\"]:checked + .custom-checkbox-label::before {\n  border-color: #0C5453;\n  background-color: #0C5453;\n}\n.checkbox-container input[type=\"checkbox\"]:checked + .custom-checkbox-label::after {\n  transform: translateY(-50%) scale(1);\n  opacity: 1;\n}\n\n\/* Link in checkbox-tekst *\/\n.custom-checkbox-label a {\n  color: #0C5453;\n  text-decoration: underline;\n}\n\n\/* ==== Overzicht-kaarten (rechter kolom) ==== *\/\n.location-card {\n  display: flex;\n  align-items: flex-start;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 12px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n  margin-bottom: 16px;\n  gap: 12px;\n}\n.icon-box img {\n  width: 50px;\n  height: 50px;\n}\n.location-details {\n  flex-grow: 1;\n  font-size: 14px;\n  color: #333333;\n}\n.location-details strong {\n  color: #000;\n}\n.selected_images_preview span {\n  display: inline;\n  margin-right: 6px;\n  font-weight: 500;\n  color: #0C5453;\n}\n\n\/* ==== Form-knoppen onderaan ==== *\/\n.form-buttons {\n  text-align: right;\n  margin-top: 20px;\n}\n.form-buttons button,\n.form-buttons input[type=\"submit\"] {\n  background-color: #0C5453;\n  color: #ffffff;\n  border: 1px solid #0C5453;\n  border-radius: 5px;\n  padding: 10px 20px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.form-buttons button:hover,\n.form-buttons input[type=\"submit\"]:hover {\n  background-color: transparent;\n  color: #0C5453;\n}\n\/* Zorg dat de label + radiobuttons naast elkaar komen *\/\n.type-klant-container {\n  display: flex;\n  align-items: center;\n  gap: 10px; \/* afstand tussen \u201cType klant:\u201d en de knoppen *\/\n}\n\n\/* Reset eventuele vaste breedte op het label zodat het meegroeit met de tekst *\/\n.type-klant-container .type-klant-label {\n  width: auto;\n  margin: 0;\n  white-space: nowrap;\n}\n\t.radio-2 label {\n\t\twidth:auto!important;\n\t}\n\t\n#hidden-cf7 { \n  display: none !important; \n}\n\n#msf-step-4.active #hidden-cf7 { \n  display: block !important; \n}\n\n#hidden-cf7 .wpcf7-form > * { display: none !important; }\n#hidden-cf7 .msf-file-only { display: block !important; }\n#hidden-cf7 input[type=\"submit\"],\n#hidden-cf7 .wpcf7-response-output,\n#hidden-cf7 .wpcf7-spinner { display:none !important; }\n.msf-error {\n  color: #e74c3c;\n  font-size: 0.9em;\n  margin-top: 4px;\n}\n\n#multiStepForm .form-step:nth-of-type(1) .f-123 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n}\n\n\/* Labels 2-per-rij *\/\n#multiStepForm .form-step:nth-of-type(1) .f-123 > label {\n  flex: 0 0 calc(50% - 10px);\n}\n\n\/* Heading over beide kolommen *\/\n#multiStepForm .form-step:nth-of-type(1) .f-123 > h4 {\n  flex: 0 0 100%;\n}\n\t\n\t\n\t\/* container voor je login-modal *\/\n.msf-modal {\n  display: none;               \/* standaard verborgen *\/\n  position: fixed;\n  top: 0; left: 0;\n  width: 100%;  height: 100%;\n  background: rgba(0,0,0,0.5);\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n\/* wanneer we de class \u201copen\u201d toevoegen, tonen we hem *\/\n.msf-modal.open {\n  display: flex;\n}\n.msf-modal-content {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  max-width: 400px;\n  width: 100%;\n}\n\t\n\t\/* Modal container *\/\n.msf-modal-content {\n  background: #fff;\n  padding: 2rem;\n  border-radius: 0.5rem;\n  max-width: 400px;\n  margin: 2rem auto;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n  font-family: inherit;\n}\n\n\/* Form labels *\/\n.msf-modal-content label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: 600;\n  color: #333;\n}\n\n\/* Text inputs *\/\n.msf-modal-content .input {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  font-size: 1rem;\n  border: 1px solid #ccd0d4;\n  border-radius: 0.375rem;\n  margin-bottom: 1rem;\n  box-sizing: border-box;\n  transition: border-color 0.2s;\n}\n.msf-modal-content .input:focus {\n  border-color: #0C5453;\n  outline: none;\n}\n\n\/* Checkbox row *\/\n.msf-modal-content .login-remember {\n  margin-bottom: 1.5rem;\n}\n.msf-modal-content .login-remember input {\n  vertical-align: middle;\n  margin-right: 0.5rem;\n}\n\n\/* Submit button *\/\n.msf-modal-content .button-primary {\n  background: #0C5453;\n  border: none;\n  color: #fff;\n  padding: 0.75rem 1.5rem;\n  border-radius: 0.375rem;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: background 0.2s;\n}\n.msf-modal-content .button-primary:hover {\n  background: #238a75;\n}\n\n\/* Close button *\/\n#msf-close-login {\n  display: block;\n  margin: 1.5rem auto 0;\n  background: transparent;\n  border: 1px solid #ccd0d4;\n  color: #555;\n  padding: 0.5rem 1rem;\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: background-color 0.2s, color 0.2s;\n}\n#msf-close-login:hover {\n  background: #f7f7f7;\n  color: #333;\n}\n\t\n\t\/* ==========================================\n   Step Indicators: Only on small screens\n   ==========================================\n*\/\n@media (max-width: 768px) {\n  .step-container {\n    display: flex;\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n  .step-container .step {\n    flex: 0 0 auto;\n    min-width: 80px;\n    padding: 8px 4px;\n    font-size: 12px;\n  }\n}\n\n\/* ==========================================\n   Two-column form layout\n   ==========================================\n*\/\n.f-row {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n.f-123 {\n  flex: 1 1 60%;\n  min-width: 60%;\n  box-sizing: border-box;\n}\n.f-124 {\n  flex: 1 1 38%;\n  min-width: 30%;\n  box-sizing: border-box;\n}\n\n\/* Stack columns under 768px *\/\n@media (max-width: 768px) {\n  .f-123,\n  .f-124 {\n    flex: 0 0 100%;\n    max-width: 100%;\n  }\n}\n\t\n\t@media (max-width: 640px) {\n\t\t.f-124 {\n\t\t\tdisplay:none;\n\t\t}\t\n\t\t\n.f-123 {\n    padding: 0px;\n    border-radius: 10px;\n}\n\t\t.form-step {\n   padding: 10px!important;\n}\n.form-step {\n    padding: 0px;\n}\n\n.Inventory-2 label.interventie-optie {\n    flex: 0 0 45%;\n    max-width: 45%;\n    padding: 20px 5px;\n}\n\t\tform#multiStepForm h3 {\n    font-size: 25px;\n}\n\n  .calendar-column .flatpickr-days,\n  .calendar-column .flatpickr-rContainer {\n    width: auto !important;\n\n  }\n\t\t.flatpickr-weekdays {\n\t\t\twidth:100%!important;\n\t\t}\n\n  .calendar-column .flatpickr-day {\n    width: 30px      !important;\n    height: 30px     !important;\n    line-height: 30px!important;\n    margin: 2px      !important;\n    font-size: 0.75em!important;\n  }\n\t\t\n\n\n\n}\n\t\n\t@media (max-width: 768px) {\n  \/* make your two-up labels collapse to 100% *\/\n  #multiStepForm .form-step:nth-of-type(1) .f-123 > label {\n    flex: 0 0 100% !important;\n  }\n}\n\t\n\t\n\t\n\t\n\n\/* ==========================================\n   Base styles (unique rules)\n   ==========================================\n*\/\n.form-step {\n  background: #f6f6f6;\n  padding: 20px;\n  border-radius: 10px;\n}\n  <\/style>\n\n\n\n    \n    \n    \n    \n    \n    <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":100,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:divi\/placeholder \/-->","_et_gb_content_width":"","footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-145","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Onderhoud afspraak | Miers<\/title>\n<meta name=\"description\" content=\"Plan eenvoudig een onderhoudsafspraak met ons! Kies een geschikt tijdstip en onze experts staan klaar om je te helpen met het onderhoud.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/\" \/>\n<meta property=\"og:locale\" content=\"nl_BE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Onderhoud afspraak | Miers\" \/>\n<meta property=\"og:description\" content=\"Plan eenvoudig een onderhoudsafspraak met ons! Kies een geschikt tijdstip en onze experts staan klaar om je te helpen met het onderhoud.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/\" \/>\n<meta property=\"og:site_name\" content=\"Miers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/garagemiers\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-14T08:13:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/miers.be\/wp-content\/assets\/images\/2025\/03\/Logo-miers-transparant-dark.png\" \/>\n\t<meta property=\"og:image:width\" content=\"181\" \/>\n\t<meta property=\"og:image:height\" content=\"57\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/miers.be\\\/nl\\\/onderhoud-en-herstellingen\\\/onderhoud-afspraak\\\/\",\"url\":\"https:\\\/\\\/miers.be\\\/nl\\\/onderhoud-en-herstellingen\\\/onderhoud-afspraak\\\/\",\"name\":\"Onderhoud afspraak | Miers\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/miers.be\\\/nl\\\/#website\"},\"datePublished\":\"2024-12-16T14:03:54+00:00\",\"dateModified\":\"2025-07-14T08:13:21+00:00\",\"description\":\"Plan eenvoudig een onderhoudsafspraak met ons! Kies een geschikt tijdstip en onze experts staan klaar om je te helpen met het onderhoud.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/miers.be\\\/nl\\\/onderhoud-en-herstellingen\\\/onderhoud-afspraak\\\/#breadcrumb\"},\"inLanguage\":\"nl-BE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/miers.be\\\/nl\\\/onderhoud-en-herstellingen\\\/onderhoud-afspraak\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/miers.be\\\/nl\\\/onderhoud-en-herstellingen\\\/onderhoud-afspraak\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/miers.be\\\/nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Onderhoud\",\"item\":\"https:\\\/\\\/miers.be\\\/nl\\\/onderhoud-en-herstellingen\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Onderhoud afspraak\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/miers.be\\\/nl\\\/#website\",\"url\":\"https:\\\/\\\/miers.be\\\/nl\\\/\",\"name\":\"Miers Group\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/miers.be\\\/nl\\\/#organization\"},\"alternateName\":\"Miers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/miers.be\\\/nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-BE\"},{\"@type\":[\"Organization\",\"AutoDealer\"],\"@id\":\"https:\\\/\\\/miers.be\\\/nl\\\/#organization\",\"name\":\"Miers\",\"alternateName\":\"Miers group\",\"url\":\"https:\\\/\\\/miers.be\\\/nl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-BE\",\"@id\":\"https:\\\/\\\/miers.be\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"\\\/wp-content\\\/assets\\\/images\\\/2025\\\/03\\\/Logo-miers-transparant-dark.png\",\"contentUrl\":\"\\\/wp-content\\\/assets\\\/images\\\/2025\\\/03\\\/Logo-miers-transparant-dark.png\",\"width\":181,\"height\":57,\"caption\":\"Miers\"},\"image\":{\"@id\":\"https:\\\/\\\/miers.be\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/garagemiers\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/miers-group-66493b2a0\\\/\"],\"address\":{\"@type\":\"PostalAddress\",\"streetAddress\":\"Brusselsesteenweg 333\",\"postalCode\":\"1730\",\"addressLocality\":\"Kobbegem\",\"addressRegion\":\"Vlaams-Brabant\",\"addressCountry\":\"BE\"},\"email\":\"info@miers.be\",\"telephone\":\"+32 2 452 72 82\",\"areaServed\":[\"Belgi\u00eb\"],\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":50.8954,\"longitude\":4.2405},\"openingHoursSpecification\":[{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\"],\"opens\":\"08:00\",\"closes\":\"18:30\"},{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Saturday\"],\"opens\":\"08:00\",\"closes\":\"12:00\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Onderhoud afspraak | Miers","description":"Plan eenvoudig een onderhoudsafspraak met ons! Kies een geschikt tijdstip en onze experts staan klaar om je te helpen met het onderhoud.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/","og_locale":"nl_BE","og_type":"article","og_title":"Onderhoud afspraak | Miers","og_description":"Plan eenvoudig een onderhoudsafspraak met ons! Kies een geschikt tijdstip en onze experts staan klaar om je te helpen met het onderhoud.","og_url":"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/","og_site_name":"Miers","article_publisher":"https:\/\/www.facebook.com\/garagemiers","article_modified_time":"2025-07-14T08:13:21+00:00","og_image":[{"width":181,"height":57,"url":"https:\/\/miers.be\/wp-content\/assets\/images\/2025\/03\/Logo-miers-transparant-dark.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"2 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/","url":"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/","name":"Onderhoud afspraak | Miers","isPartOf":{"@id":"https:\/\/miers.be\/nl\/#website"},"datePublished":"2024-12-16T14:03:54+00:00","dateModified":"2025-07-14T08:13:21+00:00","description":"Plan eenvoudig een onderhoudsafspraak met ons! Kies een geschikt tijdstip en onze experts staan klaar om je te helpen met het onderhoud.","breadcrumb":{"@id":"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/#breadcrumb"},"inLanguage":"nl-BE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/onderhoud-afspraak\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/miers.be\/nl\/"},{"@type":"ListItem","position":2,"name":"Onderhoud","item":"https:\/\/miers.be\/nl\/onderhoud-en-herstellingen\/"},{"@type":"ListItem","position":3,"name":"Onderhoud afspraak"}]},{"@type":"WebSite","@id":"https:\/\/miers.be\/nl\/#website","url":"https:\/\/miers.be\/nl\/","name":"Miers Group","description":"","publisher":{"@id":"https:\/\/miers.be\/nl\/#organization"},"alternateName":"Miers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/miers.be\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-BE"},{"@type":["Organization","AutoDealer"],"@id":"https:\/\/miers.be\/nl\/#organization","name":"Miers","alternateName":"Miers group","url":"https:\/\/miers.be\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-BE","@id":"https:\/\/miers.be\/nl\/#\/schema\/logo\/image\/","url":"\/wp-content\/assets\/images\/2025\/03\/Logo-miers-transparant-dark.png","contentUrl":"\/wp-content\/assets\/images\/2025\/03\/Logo-miers-transparant-dark.png","width":181,"height":57,"caption":"Miers"},"image":{"@id":"https:\/\/miers.be\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/garagemiers","https:\/\/www.linkedin.com\/in\/miers-group-66493b2a0\/"],"address":{"@type":"PostalAddress","streetAddress":"Brusselsesteenweg 333","postalCode":"1730","addressLocality":"Kobbegem","addressRegion":"Vlaams-Brabant","addressCountry":"BE"},"email":"info@miers.be","telephone":"+32 2 452 72 82","areaServed":["Belgi\u00eb"],"geo":{"@type":"GeoCoordinates","latitude":50.8954,"longitude":4.2405},"openingHoursSpecification":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday"],"opens":"08:00","closes":"18:30"},{"@type":"OpeningHoursSpecification","dayOfWeek":["Saturday"],"opens":"08:00","closes":"12:00"}]}]}},"_links":{"self":[{"href":"https:\/\/miers.be\/nl\/wp-json\/wp\/v2\/pages\/145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miers.be\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/miers.be\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/miers.be\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miers.be\/nl\/wp-json\/wp\/v2\/comments?post=145"}],"version-history":[{"count":31,"href":"https:\/\/miers.be\/nl\/wp-json\/wp\/v2\/pages\/145\/revisions"}],"predecessor-version":[{"id":3469,"href":"https:\/\/miers.be\/nl\/wp-json\/wp\/v2\/pages\/145\/revisions\/3469"}],"up":[{"embeddable":true,"href":"https:\/\/miers.be\/nl\/wp-json\/wp\/v2\/pages\/100"}],"wp:attachment":[{"href":"https:\/\/miers.be\/nl\/wp-json\/wp\/v2\/media?parent=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}