{"id":1335,"date":"2026-04-20T06:19:34","date_gmt":"2026-04-20T06:19:34","guid":{"rendered":"https:\/\/ahautocare.com.au\/?page_id=1335"},"modified":"2026-05-19T11:08:48","modified_gmt":"2026-05-19T11:08:48","slug":"booking","status":"publish","type":"page","link":"https:\/\/ahautocare.com.au\/?page_id=1335","title":{"rendered":"Booking"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1335\" class=\"elementor elementor-1335\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b0419f e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"9b0419f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d461d4 elementor-widget elementor-widget-heading\" data-id=\"4d461d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">USE CODE WINTER100 TO GET $100 OFF LOGBOOK SERVICING<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cabbef0 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"cabbef0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c87ec8a elementor-widget elementor-widget-shortcode\" data-id=\"c87ec8a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div id=\"mcsb-wizard\" class=\"container mt-4\" style=\"max-width:1200px;\">\r\n\r\n            <!-- Progress Bar -->\r\n            <div id=\"progress-bar\" style=\"display:flex;justify-content:space-between;margin-bottom:30px;font-size:14px;color:#666;cursor:pointer;\">\r\n                <div class=\"step\" data-step=\"1\"><i class=\"fas fa-map-marker-alt\"><\/i> Location<\/div>\r\n                <div class=\"step\" data-step=\"2\"><i class=\"fas fa-car-alt\"><\/i> Vehicle<\/div>\r\n                <div class=\"step\" data-step=\"3\"><i class=\"fas fa-wrench\"><\/i> Services<\/div>\r\n                <div class=\"step\" data-step=\"4\"><i class=\"fas fa-file\"><\/i> Estimate<\/div>\r\n                <div class=\"step\" data-step=\"5\"><i class=\"fas fa-calendar-alt\"><\/i> Date & Time<\/div>\r\n                <div class=\"step\" data-step=\"6\"><i class=\"fas fa-clipboard\"><\/i> Details<\/div>\r\n            <\/div>\r\n\r\n            <!-- STEP 1 -->\r\n            <div id=\"step-1\" class=\"wizard-step active\">\r\n                <h1 style=\"font-size:35px;font-weight:800;margin-bottom:8px;\">Look up location<\/h1>\r\n                \r\n                <p style=\"font-size:16px;color:#555;\">Find a friendly mechanic in your area.<\/p>\r\n                \r\n                <div class=\"row\" style=\"font-size:14px;background:#386EF5;color:white;padding:18px 25px;border-radius:8px 8px 0 0;font-weight:600;\">YOUR LOCATION<\/div>\r\n                \r\n                <div class=\"row\"  style=\"background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;padding:30px;\">\r\n                    <h4 style=\"font-size:16px;font-weight:500;\">Enter suburb or postcode<\/h4>\r\n                    <div style=\"position:relative;\">\r\n                        <input type=\"text\" id=\"postcode-input\" placeholder=\"Enter a suburb or postcode\" style=\"width:100%;padding:18px 20px 18px 55px;font-size:18px;border:2px solid #ddd;border-radius:8px;\">\r\n                        <span style=\"position:absolute;left:22px;top:50%;transform:translateY(-50%);font-size:28px;\"><i class=\"fas fa-map-marker-alt\"><\/i><\/span>\r\n                    <\/div>\r\n                    <div id=\"postcode-suggestions\" style=\"margin-top:8px;max-height:220px;overflow:auto;border:0px solid #ddd;border-radius:8px;display:none;\"><\/div>\r\n                    <button id=\"btn-next-location\" class=\"btn btn-danger btn-lg w-100 mt-4\" style=\"background:#386EF5;border:none;height:55px;font-size:18px;\">Next  \u2192<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- STEP 2 -->\r\n            <div id=\"step-2\" class=\"wizard-step\">\r\n                <h1 style=\"font-size:35px;font-weight:800;margin-bottom:8px;\">Add your vehicle<\/h1>\r\n                \r\n                <p style=\"font-size:16px;color:#555;\">Enter your vehicle's information so we can find the right service for you.<\/p>\r\n                \r\n                <div style=\"font-size:14px;background:#386EF5;color:white;padding:18px 25px;border-radius:8px 8px 0 0;font-weight:600;\">Vehicle Look-up<\/div>\r\n                \r\n                <div style=\"background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;padding:30px;\">\r\n                   <div class=\"row g-4\">\r\n                        <div class=\"col-12\">\r\n                            <label><span style=\"font-weight:500\">Registration Number <span style=\"color:red;\">*<\/span><\/span><\/label>\r\n                            <input type=\"text\" id=\"reg-number\" class=\"form-control form-control-lg mt-2\" placeholder=\"e.g. ABC-1234\" style=\"text-transform: uppercase;\" required>\r\n                        <\/div>\r\n                    \r\n                        <div class=\"col-md-6\">\r\n                            <label><span style=\"font-weight:500\">Make <span style=\"color:red;\">*<\/span><\/span><\/label>\r\n                            <select id=\"make-select\" class=\"form-select form-select-lg mt-2\" required>\r\n                                <option value=\"\">Select Make<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    \r\n                        <div class=\"col-md-6\">\r\n                            <label><span style=\"font-weight:500\">Model <span style=\"color:red;\">*<\/span><\/span><\/label>\r\n                            <select id=\"model-select\" class=\"form-select form-select-lg mt-2\" required disabled>\r\n                                <option value=\"\">Select Make first<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    \r\n                        <div class=\"col-md-6\">\r\n                            <label><span style=\"font-weight:500\">Engine Type<\/span><\/label>\r\n                            <select id=\"engine-select\" class=\"form-select form-select-lg mt-2\">\r\n                                <option value=\"Petrol\">Petrol<\/option>\r\n                                <option value=\"Diesel\">Diesel<\/option>\r\n                                <option value=\"Hybrid\">Hybrid<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    \r\n                        <div class=\"col-md-6\">\r\n                            <label><span style=\"font-weight:500\">Year <span style=\"color:red;\">*<\/span><\/span><\/label>\r\n                            <input type=\"number\" id=\"year-input\" class=\"form-control form-control-lg mt-2\" placeholder=\"e.g. 2022\" min=\"1990\" max=\"2026\" required>\r\n                        <\/div>\r\n                    <\/div>\r\n            \r\n                    <button id=\"btn-next-vehicle\" class=\"btn btn-danger btn-lg w-100 mt-4\" style=\"background:#386EF5;border:none;height:55px;font-size:18px;\">Next \u2192 Select Services<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- STEP 3 -->\r\n            <div id=\"step-3\" class=\"wizard-step\">\r\n                <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                    <div>\r\n                        <h1 style=\"font-size:35px;font-weight:800;margin-bottom:8px;\">Select services<\/h1>\r\n                        <p style=\"font-size:16px;color:#555;\">We offer a range of expert fixed price services and repairs.<\/p>\r\n                    <\/div>\r\n                    <div id=\"total-selected-count\" class=\"badge bg-primary px-3 py-2 fs-6\">0 services selected<\/div>\r\n                <\/div>\r\n                <div  style=\"font-size:14px;background:#386EF5;color:white;padding:18px 25px;border-radius:8px 8px 0 0;font-weight:600;\">Select services for your vehicles<\/div>\r\n                <div  id=\"category-list\" style=\"background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;padding:20px;\"><\/div>\r\n            \r\n                <button id=\"btn-next-services\" class=\"btn btn-lg w-100 mt-4\" style=\"background:#386EF5;border:none;height:55px;font-size:18px;color:#fff\" disabled>Review your quote \u2192<\/button>\r\n            <\/div>\r\n            \r\n            <!-- STEP 4 -->\r\n            <div id=\"step-4\" class=\"wizard-step\">\r\n                <h1 style=\"font-size:35px;font-weight:800;margin-bottom:8px;\">Here's your quote<\/h1>\r\n                \r\n                <p style=\"font-size:16px;color:#555;\">Based on the location, vehicle and service information you've provided to us.<\/p>\r\n            \r\n                <div class=\"row\" style=\"font-size:14px;background:#386EF5;color:white;padding:18px 25px;border-radius:8px 8px 0 0;font-weight:600;\">Review your estimate below and book<\/div>\r\n                <div class=\"row\" style=\"background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;padding:20px;\">\r\n                    <div class=\"col-lg-8\">\r\n                        <div id=\"services-list\"><\/div>\r\n                    <\/div>\r\n            \r\n                    <div class=\"col-lg-4\">\r\n                        <div class=\"sticky-top\" style=\"top:20px;\">\r\n                            <div class=\"border rounded p-4 bg-white shadow-sm mb-4\">\r\n                                <h5>Price Confirmed After Inspection<\/h5>\r\n                                <p class=\"small text-muted\">Book Now to schedule a mechanic to inspect your vehicle and provide accurate quotes.<\/p>\r\n                            <\/div>\r\n            \r\n                            <div class=\"border rounded p-4 bg-white shadow-sm\">\r\n                                <h5>Booking Summary<\/h5>\r\n                                <div id=\"sidebar-summary\"><\/div>\r\n                                <hr>\r\n                                <div class=\"d-flex justify-content-between fs-5 fw-bold\">\r\n                                    <span>Total<\/span>\r\n                                    <span id=\"grand-total\">$0.00<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            \r\n                <button id=\"btn-proceed-step4\" class=\"btn btn-danger btn-lg w-100 mt-5 py-3\" style=\"background:#386EF5;border:none;height:55px;font-size:18px;color:#fff\">Proceed to Book Now \u2192 <\/button>\r\n            <\/div>\r\n\r\n            <!-- STEP 5 -->\r\n           <div id=\"step-5\" class=\"wizard-step\">\r\n                <h1 style=\"font-size:35px;font-weight:800;margin-bottom:8px;\">Date & Time<\/h1>\r\n                \r\n                <p style=\"font-size:16px;color:#555;\">Select a time and day for a friendly Lube Mobile mechanic to service your vehicle at your location.<\/p>\r\n            \r\n                <div class=\"row\" style=\"font-size:14px;background:#386EF5;color:white;padding:18px 25px;border-radius:8px 8px 0 0;font-weight:600;\">Select your preferred date & arrival time<\/div>\r\n                <div class=\"row\" style=\"background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;padding:20px;\">\r\n                    \r\n                    <div class=\"col-lg-12\">\r\n                        <span style=\"font-weight:500\">Select Mechanic<\/span>\r\n                        <select id=\"preferred-mechanic\" class=\"form-select form-select-lg mt-4 mb-4\">\r\n                            <option value=\"\">Any Mechanic<\/option>\r\n                        <\/select>\r\n            \r\n                        <span style=\"font-weight:500\">Pick an available date<\/span>\r\n                        \r\n                        <div id=\"available-dates-old\" class=\"mb-4\"><\/div>\r\n            \r\n                        <div class=\"input-group mb-3\">\r\n                            <input type=\"text\" id=\"selected-date-box\" class=\"form-control form-control-lg\" placeholder=\"Choose Date & Time\" readonly style=\"cursor:pointer;\">\r\n                            <button class=\"btn btn-outline-secondary\" id=\"show-calendar-btn\" style=\"font-size:20px;\"><i class=\"fas fa-calendar-alt\"><\/i><\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n   \r\n                <\/div>\r\n                \r\n                <button id=\"btn-next-datetime\" class=\"btn btn-danger btn-lg w-100 mt-4\" style=\"background:#386EF5;border:none;height:55px;font-size:18px;color:#fff\">Enter your Details \u2192<\/button>\r\n                \r\n            <\/div>\r\n\r\n            <!-- STEP 6 -->\r\n            <div id=\"step-6\" class=\"wizard-step\">\r\n                <h1 style=\"font-size:35px;font-weight:800;margin-bottom:8px;\">Your Details<\/h1>\r\n                \r\n                <div class=\"row\" style=\"background:#386EF5;color:white;padding:18px 25px;border-radius:8px 8px 0 0;font-weight:600;\">\r\n                    Let us know who and where\r\n                <\/div>\r\n            \r\n                <div class=\"row\" style=\"background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;padding:20px;\">\r\n                    <div class=\"col-lg-8\">\r\n                        <div style=\"border-radius:0 0 8px 8px;\">\r\n                            <div class=\"row g-3\">\r\n                                <div class=\"col-md-6\">\r\n                                    <input type=\"text\" id=\"first-name\" class=\"form-control\" placeholder=\"First Name *\" required>\r\n                                <\/div>\r\n                                <div class=\"col-md-6\">\r\n                                    <input type=\"text\" id=\"last-name\" class=\"form-control\" placeholder=\"Last Name *\">\r\n                                <\/div>\r\n                                <div class=\"col-md-6\">\r\n                                    <input type=\"tel\" id=\"phone\" class=\"form-control\" placeholder=\"Phone *\" required>\r\n                                <\/div>\r\n                                <div class=\"col-md-6\">\r\n                                    <input type=\"email\" id=\"email\" class=\"form-control\" placeholder=\"Email *\" required>\r\n                                <\/div>\r\n                            <\/div>\r\n            \r\n                            <h5 class=\"mt-4 mb-3\">Job Location<\/h5>\r\n                            <input type=\"text\" id=\"street-address\" class=\"form-control mb-3\" placeholder=\"Street Address\" required>\r\n                            <div class=\"row g-3\">\r\n                                <div class=\"col-md-4\">\r\n                                    <input type=\"text\" id=\"suburb\" class=\"form-control\" placeholder=\"Suburb\" disabled>\r\n                                <\/div>\r\n                                <div class=\"col-md-4\">\r\n                                    <input type=\"text\" id=\"postcode\" class=\"form-control\" placeholder=\"Postcode\" disabled>\r\n                                <\/div>\r\n                                <div class=\"col-md-4\">\r\n                                    <input type=\"text\" id=\"state\" class=\"form-control\" placeholder=\"State\" disabled>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <textarea id=\"notes\" class=\"form-control mt-3\" rows=\"3\" placeholder=\"Additional Notes (Optional)\"><\/textarea>\r\n                        <\/div>\r\n                        <button id=\"btn-confirm-final\" class=\"btn btn-danger btn-lg w-100 mt-4\" style=\"background:#386EF5;border:none;height:55px;font-size:18px;color:#fff\">\r\n                            <span class=\"btn-text\">Confirm Booking <\/span>\r\n                            <span class=\"loader\" style=\"display:none;\">\u23f3 Processing... Please wait<\/span>\r\n                        <\/button>\r\n                    <\/div>\r\n            \r\n                    <!-- RIGHT SIDEBAR -->\r\n                    <div class=\"col-lg-4\">\r\n                        <div>\r\n                            <div class=\"border rounded p-4 bg-white shadow-sm mb-4\">\r\n                                <h5>Location<\/h5>\r\n                                <div class=\"card-body\" id=\"step6-location\">Melbourne 3000<\/div>\r\n                            <\/div>\r\n            \r\n                            <div class=\"border rounded p-4 bg-white shadow-sm mb-4\">\r\n                                <h5>Date & Time<\/h5>\r\n                                <div class=\"card-body\" id=\"step6-datetime\">Not selected<\/div>\r\n                            <\/div>\r\n            \r\n                            <div class=\"border rounded p-4 bg-white shadow-sm mb-4\">\r\n                                <h5>Vehicles & Services<\/h5>\r\n                                <div class=\"card-body\" id=\"step6-services\">Loading services...<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            \r\n                \r\n            <\/div>\r\n            <!-- Thank You Page -->\r\n            <div id=\"thank-you-page\" class=\"wizard-step text-center\" style=\"display:none;padding:50px 20px;\">\r\n                <h1 style=\"color:#28a745;font-size:52px;margin-bottom:20px;\">\ud83c\udf89 Booking Confirmed!<\/h1>\r\n                <p class=\"lead\" style=\"font-size:1.3rem;\">Thank you! We have sent a confirmation email to you.<\/p>\r\n                <p style=\"margin:30px 0;\">Our mechanic will contact you shortly.<\/p>\r\n                <button onclick=\"location.reload()\" class=\"btn btn-primary btn-lg\">Book Another Service<\/button>\r\n            <\/div>\r\n            \r\n            <!-- Dynamic Tyre Popup -->\r\n            <div id=\"tyre-popup\" style=\"display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.3); z-index:99999; width:90%; max-width:656px; overflow:hidden;\">\r\n                <div style=\"padding:20px 25px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center;\">\r\n                    <div>\r\n                        <h4 style=\"margin:0; font-weight:700;\">Tyres<\/h4>\r\n                        <p style=\"margin:2px 0 0; color:#666; font-size:15px;\">Replace your tyres<\/p>\r\n                    <\/div>\r\n                    <button id=\"tyre-popup-close\" style=\"background:none; border:none; font-size:28px; color:#e74c3c; cursor:pointer; line-height:1;\">\u00d7<\/button>\r\n                <\/div>\r\n            \r\n                <!-- Error message -->\r\n                <div id=\"tyre-error\" class=\"d-none alert alert-danger mx-4 mt-3 mb-0\" style=\"display:none;\">\r\n                    <i class=\"fas fa-times-circle\"><\/i> No tyres found with that size\r\n                <\/div>\r\n            \r\n                <!-- Width \/ Profile \/ Rim -->\r\n                <div style=\"background:#f8f9fa; padding:20px 25px; display:flex; gap:12px;\">\r\n                    <div style=\"flex:1;\">\r\n                        <label style=\"font-size:13px; font-weight:600; display:block; margin-bottom:4px;\">Width<\/label>\r\n                        <input type=\"text\" id=\"tyre-width\" class=\"form-control text-center\" placeholder=\"215\" value=\"\">\r\n                    <\/div>\r\n                    <div style=\"flex:1;\">\r\n                        <label style=\"font-size:13px; font-weight:600; display:block; margin-bottom:4px;\">Profile<\/label>\r\n                        <input type=\"text\" id=\"tyre-profile\" class=\"form-control text-center\" placeholder=\"65\" value=\"\">\r\n                    <\/div>\r\n                    <div style=\"flex:1;\">\r\n                        <label style=\"font-size:13px; font-weight:600; display:block; margin-bottom:4px;\">Rim<\/label>\r\n                        <input type=\"text\" id=\"tyre-rim\" class=\"form-control text-center\" placeholder=\"16\" value=\"\">\r\n                    <\/div>\r\n                <\/div>\r\n            \r\n                <!-- Find your tyre size -->\r\n                <div style=\"background:#e8f5f0; padding:20px 25px; display:flex; gap:20px;\">\r\n                    <div style=\"flex:1;\">\r\n                        <h5 style=\"margin:0 0 8px 0; font-weight:600;\">Find your tyre size<\/h5>\r\n                        <p style=\"font-size:14px; line-height:1.4; margin:0;\">\r\n                            Look on your tyres for three large numbers as seen to the right.<br>\r\n                            Don\u2019t know the size details of your tyres?<br>\r\n                            Simply call us on <strong>0479 139 705<\/strong>\r\n                        <\/p>\r\n                    <\/div>\r\n                   \r\n                <\/div>\r\n            \r\n                <!-- Bottom bar -->\r\n                <div style=\"padding:20px 25px; background:#f8f9fa; display:flex; align-items:center; gap:15px;\">\r\n                   <div id=\"tyre-checkbox-area\" style=\"margin:10px 25px 0;\">\r\n                        <label style=\"display:flex;align-items:center;gap:8px;cursor:pointer;\">\r\n                            <input type=\"checkbox\" id=\"dont-know-size\"> \r\n                            <span>I don\u2019t know my tyre size<\/span>\r\n                        <\/label>\r\n                    <\/div>\r\n            \r\n                    <div style=\"flex:1;\"><\/div>\r\n            \r\n                    <!-- Quantity -->\r\n                    <div id=\"tyre-qty-area\" style=\"padding:0 0px 0px;display:flex;align-items:center;gap:15px;\">\r\n                        <div style=\"display:flex; align-items:center; gap:8px;\">\r\n                            <button id=\"tyre-qty-minus\" class=\"btn btn-outline-secondary btn-sm\">-<\/button>\r\n                            <span id=\"tyre-qty-display\" style=\"font-weight:600; min-width:30px; text-align:center;\">4<\/span>\r\n                            <button id=\"tyre-qty-plus\" class=\"btn btn-outline-secondary btn-sm\">+<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n            \r\n                    <button id=\"tyre-add-btn\" class=\"btn btn-danger\" style=\"padding:12px 28px; border-radius:8px; font-weight:600;border-color: #376df2;background-color: #386ef5;\">\r\n                        Add Tyres\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Calendar Popup -->\r\n        <div id=\"calendar-popup\" style=\"position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;border:1px solid #ddd;padding:20px;z-index:9999;box-shadow:0 0 20px rgba(0,0,0,0.3);display:none;width:90%;max-width:1132px;border-radius: 10px;\">\r\n            <h4>Select another date<\/h4>\r\n            <p>Choose a date and arrival time for your booking arrival<\/p>\r\n            <div id=\"calendar-week\" style=\"display:grid;grid-template-columns:repeat(7,1fr);gap:5px;\"><\/div>\r\n            <div class=\"mt-3\">\r\n                <button class=\"btn btn-outline-secondary\" id=\"prev-week\">\u2190 Previous Week<\/button>\r\n                <button class=\"btn btn-outline-secondary\" id=\"next-week\">Next Week \u2192<\/button>\r\n                <button class=\"btn btn-danger float-end\" id=\"close-calendar\">Close<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <style>\r\n        .wizard-step { display:none; }\r\n        .wizard-step.active { display:block; }\r\n        #step-2 .form-select-lg {font-size: 1rem;}\r\n        #step-2 .form-control-lg {font-size: 1rem;}\r\n        #step-5 .form-select-lg {font-size: 1rem;}\r\n        #step-5 .form-control-lg {font-size: 1rem;}\r\n        #mcsb-wizard{ font-family: 'Poppins';}\r\n       \r\n        .service-item{ display: flex; flex-direction: row;}\r\n        .form-check .form-check-input {margin-left: 0em;}\r\n        .error-msg {display: block;margin-top: 4px;font-size: 13px;}\r\n        .step { padding: 10px 44px;border-radius: 5px; background: #f1f1f1;}\r\n        .step.active { background: #386EF5;color: white;font-weight: 500; }\r\n        .category-box { border:2px solid #ddd; border-radius:8px; margin-bottom:15px; cursor:pointer; }\r\n        .category-header { padding:18px 20px; background:#f8f9fa; font-weight:600; border-radius:8px 8px 0 0; }\r\n        .category-body { padding:15px 20px; display:none; border-top:1px solid #ddd; border-radius:0 0 8px 8px; }\r\n        .category-box.active .category-body { display:block; }\r\n        .date-card { border:2px solid #ddd; border-radius:8px; padding:15px; margin-bottom:10px; cursor:pointer; }\r\n        .date-card.active { border-color:#386EF5; background:#f0f8ff; }\r\n        .switch { position: relative; display: inline-block; width: 50px; height: 26px;}\r\n        .switch input { opacity: 0; width: 0; height: 0; }\r\n        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px;}\r\n        .slider:before {position: absolute; content: \"\"; height: 20px; width: 20px; left: 3px; bottom: 3px;background-color: white; transition: .4s; border-radius: 50%;}\r\n        input:checked + .slider { background-color: #00c853; }\r\n        input:checked + .slider:before { transform: translateX(24px); }\r\n        #tyre-popup { backdrop-filter: blur(8px); }\r\n        body.popup-open { filter: blur(5px); }\r\n        <\/style>\r\n\r\n        <script>\r\n        jQuery(document).ready(function($) {\r\n            let bookingData = { \r\n                location: '', make_id:'', model_id:'', make_name:'', model_name:'', engine:'', year:'', reg:'', \r\n                selectedServices:[], selectedDate: '' \r\n            };\r\n\r\n            const auPostcodes = {\"3000\":{city:\"Melbourne\",state:\"VIC\"},\"2000\":{city:\"Sydney\",state:\"NSW\"},\"4000\":{city:\"Brisbane\",state:\"QLD\"},\"5000\":{city:\"Adelaide\",state:\"SA\"},\"6000\":{city:\"Perth\",state:\"WA\"}};\r\n            \/\/ Back Button Functionality\r\n            $('.step').on('click', function() {\r\n                const targetStep = parseInt($(this).data('step'));\r\n                const currentStep = parseInt($('.step.active').data('step'));\r\n            \r\n                if (targetStep < currentStep) {\r\n                    showStep(targetStep);\r\n                }\r\n            });\r\n            \r\n            \/\/ Add Back Button in each step (except Step 1)\r\n            function addBackButtons() {\r\n                \/\/ Step 2\r\n                if (!$('#step-2 .back-btn').length) {\r\n                    $('#step-2').prepend('<button class=\"back-btn btn btn-outline-secondary mb-3\">\u2190 Back<\/button>');\r\n                }\r\n                \/\/ Step 3\r\n                if (!$('#step-3 .back-btn').length) {\r\n                    $('#step-3').prepend('<button class=\"back-btn btn btn-outline-secondary mb-3\">\u2190 Back<\/button>');\r\n                }\r\n                \/\/ Step 4\r\n                if (!$('#step-4 .back-btn').length) {\r\n                    $('#step-4').prepend('<button class=\"back-btn btn btn-outline-secondary mb-3\">\u2190 Back<\/button>');\r\n                }\r\n                \/\/ Step 5\r\n                if (!$('#step-5 .back-btn').length) {\r\n                    $('#step-5').prepend('<button class=\"back-btn btn btn-outline-secondary mb-3\">\u2190 Back<\/button>');\r\n                }\r\n                \/\/ Step 6\r\n                if (!$('#step-6 .back-btn').length) {\r\n                    $('#step-6').prepend('<button class=\"back-btn btn btn-outline-secondary mb-3\">\u2190 Back<\/button>');\r\n                }\r\n            }\r\n            \r\n            \/\/ Call this after showStep\r\n            $('.back-btn').off('click').on('click', function() {\r\n                const current = parseInt($('.wizard-step.active').attr('id').split('-')[1]);\r\n                showStep(current - 1);\r\n            });\r\n            \/\/ Step 1 - Red border on blur\r\n            $('#postcode-input').on('blur', function() {\r\n                if (!$(this).val().trim()) {\r\n                    $(this).css('border', '2px solid #e74c3c');\r\n                } else {\r\n                    $(this).css('border', '2px solid #28a745');\r\n                }\r\n            });\r\n            \/\/ Step 2 - Red border on blur (automatic)\r\n            $('#step-2 input[required], #step-2 select[required]').on('blur', function() {\r\n                if (!$(this).val().trim()) {\r\n                    $(this).css('border', '2px solid #e74c3c');\r\n                } else {\r\n                    $(this).css('border', '2px solid #28a745');\r\n                }\r\n            });\r\n            \/\/ Step 5 - Date Box Validation (Red Border)\r\n            $('#selected-date-box').on('blur', function() {\r\n                if (!$(this).val().trim()) {\r\n                    $(this).css('border', '2px solid #e74c3c');\r\n                } else {\r\n                    $(this).css('border', '2px solid #28a745');\r\n                }\r\n            });\r\n            \/\/ Live Validation - Remove red border when user corrects the field\r\n            $('#first-name, #phone, #email, #street-address').on('input', function() {\r\n                if ($(this).val().trim() !== '') {\r\n                    $(this).css('border', '2px solid #28a745');\r\n                    $(this).next('.error-msg').remove();\r\n                }\r\n            });\r\n            \/\/ --- Step 1 ----\/\/\r\n            $('#postcode-input').on('input', function() {\r\n                const val = $(this).val().trim();\r\n                const box = $('#postcode-suggestions');\r\n                box.html('').hide();\r\n                if (val.length < 2) return;\r\n                let html = '';\r\n                Object.keys(auPostcodes).forEach(code => {\r\n                    const data = auPostcodes[code];\r\n                    if (code.includes(val) || data.city.toLowerCase().includes(val.toLowerCase())) {\r\n                        html += `<div class=\"suggestion-item p-3 border-bottom\" style=\"cursor:pointer;\" data-code=\"${code}\"><span>${data.city}, ${code}, ${data.state}<\/span><\/div>`;\r\n                    }\r\n                });\r\n                if (html) box.html(html).show();\r\n            });\r\n\r\n            $(document).on('click', '.suggestion-item', function() {\r\n                const code = $(this).data('code');\r\n                const data = auPostcodes[code];\r\n                $('#postcode-input').val(`${data.city}, ${code}, ${data.state}`);\r\n                bookingData.location = `${data.city}, ${code}, ${data.state}`;\r\n                $('#suburb').val(data.city);\r\n                $('#postcode').val(code);\r\n                $('#state').val(data.state);\r\n                $('#postcode-suggestions').hide();\r\n                $('#btn-next-location').trigger('click');\r\n            });\r\n\r\n            $('#btn-next-location').on('click', function() {\r\n                const locationVal = $('#postcode-input').val().trim();\r\n            \r\n                if (!locationVal) {\r\n                    $('#postcode-input').css('border', '2px solid #e74c3c').focus();\r\n                    return;   \/\/ Stop here - No alert\r\n                }\r\n            \r\n                \/\/ Save data\r\n                bookingData.location = locationVal;\r\n            \r\n                showStep(2);\r\n            });\r\n\r\n            function showStep(n) {\r\n                $('.wizard-step').removeClass('active').hide();\r\n                $('#step-' + n).addClass('active').show();\r\n            \r\n                $('.step').removeClass('active');\r\n                $('.step[data-step=\"' + n + '\"]').addClass('active');\r\n            \r\n                if (n === 3) {\r\n                    loadStep3();\r\n                    \/\/ Restore Help state when coming back\r\n                    setTimeout(() => {\r\n                        if (bookingData.help_selected) {\r\n                            $('.help-toggle').prop('checked', true);\r\n                            $('#help-details').show();\r\n                            $('.category-box:not(.help-card)').addClass('disabled opacity-50');\r\n                            $('.category-body').slideUp();\r\n                        }\r\n                    }, 400);\r\n                }\r\n                if (n === 4) loadStep4();\r\n                if (n === 5) loadStep5();\r\n                if (n === 6) updateSidebarFinal();\r\n            }\r\n\r\n            \/\/ --- Step 2 ---\/\/\r\n            console.log(\"Step 2 JS Loaded\");\r\n            \r\n            let makesLoaded = false;\r\n            \r\n            function loadMakes() {\r\n                if (makesLoaded) return;\r\n                makesLoaded = true;\r\n            \r\n                $('#make-select').html('<option value=\"\">Loading Makes...<\/option>');\r\n            \r\n                $.post(mcsb_data.ajaxurl, {\r\n                    action: 'mcsb_get_makes',\r\n                    nonce: mcsb_data.nonce\r\n                }, function(res) {\r\n                    if (res.success && res.data) {\r\n                        let html = '<option value=\"\">Select Make<\/option>';\r\n                        res.data.forEach(m => html += `<option value=\"${m.id}\">${m.title}<\/option>`);\r\n                        $('#make-select').html(html);\r\n                    }\r\n                });\r\n            }\r\n            \r\n            \/\/ Auto load\r\n            setTimeout(loadMakes, 800);\r\n            \r\n            \/\/ Auto convert Registration Number to UPPERCASE\r\n            $('#reg-number').on('input', function() {\r\n                this.value = this.value.toUpperCase().trim();\r\n            });\r\n            \r\n            \/\/ Make \u2192 Model\r\n            $('#make-select').on('change', function() {\r\n                const makeId = $(this).val();\r\n                const modelSelect = $('#model-select');\r\n                modelSelect.html('<option value=\"\">Loading models...<\/option>').prop('disabled', true);\r\n            \r\n                if (!makeId) return;\r\n            \r\n                $.post(mcsb_data.ajaxurl, {\r\n                    action: 'mcsb_get_models_by_make',\r\n                    make_id: makeId,\r\n                    nonce: mcsb_data.nonce\r\n                }, function(res) {\r\n                    let html = '<option value=\"\">Select Model<\/option>';\r\n                    if (res.success && res.data && res.data.length > 0) {\r\n                        res.data.forEach(m => html += `<option value=\"${m.id}\">${m.title}<\/option>`);\r\n                        modelSelect.prop('disabled', false);\r\n                    }\r\n                    modelSelect.html(html);\r\n                });\r\n            });\r\n            \r\n              \/\/ Next Button\r\n              $('#btn-next-vehicle').on('click', function() {\r\n                \/\/ Check all required fields\r\n                let isValid = true;\r\n                let firstEmptyField = null;\r\n            \r\n                \/\/ Registration Number\r\n                if (!$('#reg-number').val().trim()) {\r\n                    $('#reg-number').css('border', '2px solid #e74c3c');\r\n                    if (!firstEmptyField) firstEmptyField = $('#reg-number');\r\n                    isValid = false;\r\n                }\r\n            \r\n                \/\/ Make\r\n                if (!$('#make-select').val()) {\r\n                    $('#make-select').css('border', '2px solid #e74c3c');\r\n                    if (!firstEmptyField) firstEmptyField = $('#make-select');\r\n                    isValid = false;\r\n                }\r\n            \r\n                \/\/ Model\r\n                if (!$('#model-select').val()) {\r\n                    $('#model-select').css('border', '2px solid #e74c3c');\r\n                    if (!firstEmptyField) firstEmptyField = $('#model-select');\r\n                    isValid = false;\r\n                }\r\n            \r\n                \/\/ Year\r\n                if (!$('#year-input').val()) {\r\n                    $('#year-input').css('border', '2px solid #e74c3c');\r\n                    if (!firstEmptyField) firstEmptyField = $('#year-input');\r\n                    isValid = false;\r\n                }\r\n            \r\n                if (!isValid) {\r\n                    if (firstEmptyField) firstEmptyField.focus();\r\n                    return;   \/\/ Stop here - No alert\r\n                }\r\n            \r\n                \/\/ All fields are filled - Proceed\r\n                bookingData.make_id    = $('#make-select').val();\r\n                bookingData.make_name  = $('#make-select option:selected').text();\r\n                bookingData.model_id   = $('#model-select').val();\r\n                bookingData.model_name = $('#model-select option:selected').text();\r\n                bookingData.engine     = $('#engine-select').val();\r\n                bookingData.year       = $('#year-input').val();\r\n                bookingData.reg        = $('#reg-number').val() || '';\r\n            \r\n                showStep(3);\r\n            });\r\n            \r\n            \/\/ --- Step 3 ---\/\/\r\n            function loadStep3() {\r\n                $('#category-list').html('<p class=\"text-center py-5\">Loading services...<\/p>');\r\n\r\n                $.post(mcsb_data.ajaxurl, {\r\n                    action: 'mcsb_get_categories_with_services',\r\n                    make_id: bookingData.make_id || 0,\r\n                    model_id: bookingData.model_id || 0,\r\n                    nonce: mcsb_data.nonce\r\n                }, function(res) {\r\n                    if (!res.success || !res.data) return;\r\n                    \/\/ Sort categories by Short Order (1, 2, 3...)\r\n                    res.data.sort(function(a, b) {\r\n                        const orderA = parseInt(a._sort_order) || 9999;\r\n                        const orderB = parseInt(b._sort_order) || 9999;\r\n                        return orderA - orderB;\r\n                    });\r\n                    let html = '';\r\n\r\n                    res.data.forEach(function(cat) {\r\n                        let isHelp = (cat.is_diagnostic == '1' || cat.is_diagnostic == 1);\r\n                        let isSingle = (cat.is_single_select == '1' || cat.is_single_select == 1);\r\n\r\n                        if (!isHelp && (!cat.services || cat.services.length === 0)) return;\r\n\r\n                        let serviceHtml = '';\r\n\r\n                        if (isHelp) {\r\n                            \/\/ Help me decide - special toggle switch (kept as you want)\r\n                            const savedNotes = bookingData.help_notes || '';\r\n                            bookingData.help_price = parseFloat(cat.help_price || 97.35);\r\n                            html += `\r\n                            <div class=\"help-card border rounded mb-4 p-4\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <label class=\"switch me-3 mt-1\">\r\n                                        <input type=\"checkbox\" class=\"help-toggle\" ${bookingData.help_selected ? 'checked' : ''}>\r\n                                        <span class=\"slider round\"><\/span>\r\n                                    <\/label>\r\n                                    <div class=\"flex-grow-1\">\r\n                                        <h5 class=\"mb-1\"><strong>Help me decide<\/strong><\/h5>\r\n                                        <p class=\"mb-2 text-muted\">We'll come to you, diagnose the issue, and provide a quote.<\/p>\r\n                                        <div id=\"help-details\" class=\"help-details mt-3\" style=\"display:${bookingData.help_selected ? 'block' : 'none'};\">\r\n                                            <div class=\"border p-3 bg-light rounded\">\r\n                                                <strong>$${parseFloat(cat.help_price || 97.35).toFixed(2)} call-out fee<\/strong>\r\n                                            <\/div>\r\n                                            <div class=\"mt-3\">\r\n                                                <label><strong>Describe the issue or symptoms you are experiencing<\/strong><\/label>\r\n                                                <textarea class=\"form-control help-notes\" rows=\"3\" placeholder=\"Enter your notes here...\">${savedNotes}<\/textarea>\r\n                                            <\/div>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>`;\r\n                        } else {\r\n                            serviceHtml = cat.services.map(s => {\r\n                                const type = s.service_type || 'simple';\r\n                                const isChecked = bookingData.selectedServices && bookingData.selectedServices.includes(String(s.id)) ? 'checked' : '';\r\n\r\n                                if (type === 'simple') {\r\n                                    const inputType = isSingle ? 'radio' : 'checkbox';\r\n                                    const inputClass = isSingle ? 'service-radio' : 'service-checkbox';\r\n                                    const nameAttr = isSingle ? `name=\"category_${cat.id}\"` : '';\r\n                                    return `\r\n                                    <div class=\"service-item form-check mb-3 p-3 border rounded clickable-main\">\r\n                                        <input class=\"form-check-input ${inputClass} me-2\" type=\"${inputType}\" \r\n                                               value=\"${s.id}\" ${nameAttr}\r\n                                               data-title=\"${s.title}\" \r\n                                               data-price-type=\"${s.price_type}\" \r\n                                               data-fixed-price=\"${s.fixed_price || 0}\" ${isChecked}>\r\n                                        <label class=\"form-check-label w-100\" style=\"cursor:pointer;\">\r\n                                            <strong>${s.title}<\/strong><br>\r\n                                            <small>${s.description || ''}<\/small>\r\n                                        <\/label>\r\n                                    <\/div>`;\r\n                                } \r\n                                else {\r\n                                    let innerOptions = '';\r\n\r\n                                    if (type === 'select') {\r\n                                        let options = '';\r\n                                        if (s.service_options && s.service_options.length) {\r\n                                            s.service_options.forEach(opt => {\r\n                                                options += `<option value=\"${opt.price || 0}\" data-label=\"${opt.label}\">${opt.label}<\/option>`;\r\n                                            });\r\n                                        }\r\n                                        innerOptions = `\r\n                                        <div class=\"inner-options mt-3\" style=\"display:none;\">\r\n                                            <select class=\"form-select service-select-option\" data-service-id=\"${s.id}\" data-title=\"${s.title}\">\r\n                                                ${options}\r\n                                            <\/select>\r\n                                        <\/div>`;\r\n                                    } \r\n                                    else if (type === 'radio') {\r\n                                        if (s.service_options && s.service_options.length) {\r\n                                            innerOptions = `<div class=\"inner-options mt-3\" style=\"display:none;\">`;\r\n                                            s.service_options.forEach(opt => {\r\n                                                innerOptions += `\r\n                                                <div class=\"form-check mb-2\">\r\n                                                    <input class=\"form-check-input service-radio-option\" type=\"radio\" \r\n                                                           name=\"option_${s.id}\" value=\"${opt.price || 0}\" \r\n                                                           data-title=\"${s.title} - ${opt.label}\" data-label=\"${opt.label}\">\r\n                                                    <label class=\"form-check-label\"><strong>${opt.label}<\/strong><\/label>\r\n                                                <\/div>`;\r\n                                            });\r\n                                            innerOptions += `<\/div>`;\r\n                                        }\r\n                                    } \r\n                                    else if (type === 'tyre') {\r\n                                        return `\r\n                                        <div class=\"multiple-service-item mb-3 p-3 border rounded tyre-special-card\" style=\"cursor:pointer;\" data-service-type=\"tyre\">\r\n                                            <div class=\"d-flex align-items-start\">\r\n                                                <div class=\"w-100\">\r\n                                                    <strong>${s.title}<\/strong><br>\r\n                                                    <small>${s.description || ''}<\/small>\r\n                                                <\/div>\r\n                                            <\/div>\r\n                                        <\/div>`;\r\n                                    }\r\n                                \r\n                                    const mainInputType = isSingle ? 'radio' : 'checkbox';\r\n                                    const mainInputClass = isSingle ? 'service-radio' : 'main-service-check';\r\n                                    const nameAttr = isSingle ? `name=\"category_${cat.id}\"` : '';\r\n\r\n                                    return `\r\n                                    <div class=\"multiple-service-item mb-3 p-3 border rounded\">\r\n                                        <div class=\"main-service-area d-flex align-items-start clickable-main\" style=\"cursor:pointer;\" data-service-type=\"${type}\">\r\n                                            <input class=\"form-check-input ${mainInputClass} me-2 mt-1\" type=\"${mainInputType}\" \r\n                                                   value=\"${s.id}\" ${nameAttr}\r\n                                                   data-title=\"${s.title}\" \r\n                                                   data-service-type=\"${type}\" ${isChecked}>\r\n                                            <label class=\"form-check-label w-100\">\r\n                                                <strong>${s.title}<\/strong><br>\r\n                                                <small>${s.description || ''}<\/small>\r\n                                            <\/label>\r\n                                        <\/div>\r\n                                        ${innerOptions}\r\n                                    <\/div>`;\r\n                                }\r\n                            }).join('');\r\n\r\n                            html += `\r\n                            <div class=\"category-box border rounded mb-4\" data-service-type=\"${cat.title}\">\r\n                                <div class=\"category-header p-4 bg-light\" style=\"cursor:pointer;\">\r\n                                    <span style=\"font-weight: 700;\">${cat.title}<\/span>\r\n                                <\/div>\r\n                                <div class=\"category-body p-4\" style=\"display:none;\">\r\n                                    ${serviceHtml}\r\n                                <\/div>\r\n                            <\/div>`;\r\n                        }\r\n                    });\r\n\r\n                    $('#category-list').html(html);\r\n\r\n                    \/\/ Category accordion\r\n                    $('.category-header').off('click').on('click', function() {\r\n                        if ($(this).closest('.help-card').length) return;\r\n                        const $body = $(this).closest('.category-box').find('.category-body');\r\n                        $('.category-body').not($body).slideUp();\r\n                        $body.slideToggle();\r\n                    });\r\n                    \r\n                    \/\/ === TYRE POPUP ON CATEGORY-BOX CLICK ===\r\n                    $(document).off('click', '.category-box').on('click', '.category-box', function(e) {\r\n                        const serviceType = $(this).data('service-type') || '';\r\n                        if (serviceType.toLowerCase().includes('tyre')) {\r\n                            $('#tyre-popup').fadeIn(200);\r\n                        }\r\n                    });\r\n\r\n                    \/\/ Click anywhere on main card\r\n                   $(document).off('click', '.clickable-main').on('click', '.clickable-main', function(e) {\r\n                        if ($(e.target).is('input, select, label')) return;\r\n                        const $input = $(this).find('input[type=\"checkbox\"], input[type=\"radio\"]').first();\r\n                        if ($input.length) {\r\n                            $input.prop('checked', !$input.prop('checked')).trigger('change');\r\n                        }\r\n\r\n                        \/\/ === FIXED: Check for \"Tyre\" (capital T) ===\r\n                        const serviceType = $(this).data('service-type') || $(this).closest('.multiple-service-item').data('service-type') || '';\r\n                        if (serviceType.toLowerCase() === 'tyre' || serviceType === 'Tyre') {\r\n                            $('#tyre-popup').fadeIn(200);\r\n                        }\r\n                    });\r\n\r\n                    \/\/ Main input change\r\n                    $(document).off('change', '.main-service-check, .service-radio').on('change', '.main-service-check, .service-radio', function() {\r\n                        const $item = $(this).closest('.multiple-service-item');\r\n                        \r\n                        \/\/ Skip inner box for Tyre (capital T)\r\n                        const serviceType = $item.data('service-type') || $item.find('input').data('service-type') || '';\r\n                        if (serviceType.toLowerCase() === 'tyre' || serviceType === 'Tyre') {\r\n                            return;   \/\/ \u2190 No inner box opens\r\n                        }\r\n\r\n                        const $inner = $item.find('.inner-options');\r\n                        if ($(this).is(':checked')) {\r\n                            $inner.slideDown(300);\r\n                            $inner.find('input[type=\"radio\"]').prop('checked', false);\r\n                        } else {\r\n                            $inner.slideUp(300);\r\n                        }\r\n                        saveSelectedServices();\r\n                        updateSelectedCount();\r\n                    });\r\n\r\n                    \/\/ Inner option selected \u2192 auto check main\r\n                    $(document).off('change', '.service-select-option, .service-radio-option, input[name^=\"tyre_\"]').on('change', '.service-select-option, .service-radio-option, input[name^=\"tyre_\"]', function() {\r\n                        const $item = $(this).closest('.multiple-service-item');\r\n                        const $main = $item.find('.main-service-check, .service-radio').first();\r\n                        $main.prop('checked', true);\r\n                        saveSelectedServices();\r\n                        updateSelectedCount();\r\n                    });\r\n\r\n                    \/\/ Prevent inner clicks from closing main card\r\n                    $(document).off('click', '.inner-options').on('click', '.inner-options', function(e) {\r\n                        e.stopImmediatePropagation();\r\n                    });\r\n\r\n                    \/\/ === FIX: RESTORE INNER OPTIONS OF MULTIPLE SERVICES ON BACK ===\r\n                    setTimeout(() => {\r\n                        if (bookingData.selectedOptions) {\r\n                            Object.keys(bookingData.selectedOptions).forEach(function(serviceId) {\r\n                                const selectedValue = bookingData.selectedOptions[serviceId];\r\n                                const $select = $(`.service-select-option[data-service-id=\"${serviceId}\"]`);\r\n                                const $radio = $(`.service-radio-option[value=\"${selectedValue}\"]`);\r\n                                const $tyre = $(`.multiple-service-item input[name^=\"tyre_\"][value=\"${selectedValue}\"]`);\r\n\r\n                                if ($select.length) $select.val(selectedValue);\r\n                                if ($radio.length) $radio.prop('checked', true);\r\n                                if ($tyre.length) $tyre.prop('checked', true);\r\n                            });\r\n                        }\r\n                        updateSelectedCount();\r\n                    }, 800);\r\n\r\n                    saveSelectedServices();\r\n                    updateSelectedCount();\r\n\r\n                    \/\/ Help toggle\r\n                    $('.help-toggle').off('change').on('change', function() {\r\n                        const isOn = $(this).is(':checked');\r\n                        bookingData.help_selected = isOn;\r\n\r\n                        if (isOn) {\r\n                            \/\/ Clear all normal services\r\n                            $('.main-service-check, .service-radio, .service-checkbox').prop('checked', false);\r\n                            $('.inner-options').slideUp();\r\n\r\n                            \/\/ Forcefully clear Tyre service\r\n                            bookingData.tyreItems = [];\r\n\r\n                            $('#help-details').slideDown();\r\n                            $('.category-box:not(.help-card)').addClass('disabled opacity-50');\r\n                        } else {\r\n                            $('#help-details').slideUp();\r\n                            $('.category-box').removeClass('disabled opacity-50');\r\n                        }\r\n\r\n                        saveSelectedServices();\r\n                        updateSelectedCount();\r\n                    });\r\n\r\n                    $(document).off('input', '.help-notes').on('input', '.help-notes', function() {\r\n                        bookingData.help_notes = $(this).val();\r\n                    });\r\n\r\n                    saveSelectedServices();\r\n                    updateSelectedCount();\r\n                                                            \r\n                    \/\/ === FINAL WORKING TYRE POPUP - Size check + Error message ===\r\n                    let tyreQty = 4;\r\n\r\n                    \/\/ Click on Tyre main card opens popup\r\n                    $(document).off('click', '.tyre-special-card').on('click', '.tyre-special-card', function() {\r\n                        \/\/ If Help me decide is ON, do not allow Tyre selection\r\n                        if (bookingData.help_selected) {\r\n                            return;   \/\/ Prevent adding Tyre\r\n                        }\r\n\r\n                        $('#tyre-error').hide().addClass('d-none');\r\n                        $('#tyre-popup').fadeIn(200);\r\n                    });\r\n                    \/\/ \"I don't know my tyre size\" checkbox\r\n                    $('#dont-know-size').off('change').on('change', function() {\r\n                        if ($(this).is(':checked')) {\r\n                            $('#tyre-width, #tyre-profile, #tyre-rim').prop('disabled', true).val('');\r\n                        } else {\r\n                            $('#tyre-width, #tyre-profile, #tyre-rim').prop('disabled', false);\r\n                        }\r\n                    });\r\n\r\n                    \/\/ Quantity buttons\r\n                    $('#tyre-qty-minus').off('click').on('click', function() { \r\n                        if (tyreQty > 1) tyreQty--; \r\n                        $('#tyre-qty-display').text(tyreQty); \r\n                    });\r\n                    $('#tyre-qty-plus').off('click').on('click', function() { \r\n                        tyreQty++; \r\n                        $('#tyre-qty-display').text(tyreQty); \r\n                    });\r\n\r\n                    \/\/ Add \/ Remove button - Strong size check\r\n                    $('#tyre-add-btn').off('click').on('click', function() {\r\n                        const dontKnow = $('#dont-know-size').is(':checked');\r\n\r\n                        if ($(this).text() === 'Remove Tyres') {\r\n                            if (bookingData.tyreItems && bookingData.tyreItems.length > 0) {\r\n                                bookingData.tyreItems.pop();\r\n                            }\r\n                            $('#dont-know-size').prop('checked', false);\r\n                            $('#tyre-width, #tyre-profile, #tyre-rim').prop('disabled', false).val('');\r\n                            $('#tyre-add-btn').html('Add Tyres').removeClass('btn-warning').addClass('btn-danger');\r\n                            $('#tyre-popup').fadeOut(300);\r\n                            saveSelectedServices();\r\n                            updateSelectedCount();\r\n                            if (typeof loadStep4 === 'function') loadStep4();\r\n                            return;\r\n                        }\r\n\r\n                        \/\/ ADD MODE\r\n                        let foundPrice = 0;\r\n                        let title = '';\r\n                        let isTBC = false;\r\n\r\n                        if (dontKnow) {\r\n                            title = `Tyres (I don't know size)`;\r\n                            isTBC = true;\r\n                        } else {\r\n                            const width   = $('#tyre-width').val().trim();\r\n                            const profile = $('#tyre-profile').val().trim();\r\n                            const rim     = $('#tyre-rim').val().trim();\r\n\r\n                            \/\/ Red border validation\r\n                            $('#tyre-width, #tyre-profile, #tyre-rim').css('border', '2px solid #ddd');\r\n                            if (!width) $('#tyre-width').css('border', '2px solid #e74c3c');\r\n                            if (!profile) $('#tyre-profile').css('border', '2px solid #e74c3c');\r\n                            if (!rim) $('#tyre-rim').css('border', '2px solid #e74c3c');\r\n\r\n                            if (!width || !profile || !rim) return;\r\n\r\n                            \/\/ Strong size check\r\n                            foundPrice = 0;\r\n                            res.data.forEach(cat => {\r\n                                if (cat.services) {\r\n                                    cat.services.forEach(s => {\r\n                                        if (s.service_type === 'tyre' && s.service_options) {\r\n                                            s.service_options.forEach(opt => {\r\n                                                if (String(opt.width) === width && \r\n                                                    String(opt.profile) === profile && \r\n                                                    String(opt.rim) === rim) {\r\n                                                    foundPrice = parseFloat(opt.price) || 0;\r\n                                                }\r\n                                            });\r\n                                        }\r\n                                    });\r\n                                }\r\n                            });\r\n\r\n                            title = `Tyres ${width}\/${profile}R${rim}`;\r\n                        }\r\n\r\n                        if (foundPrice > 0 || dontKnow) {\r\n                            const totalPrice = foundPrice * tyreQty;\r\n\r\n                            if (!bookingData.tyreItems) bookingData.tyreItems = [];\r\n                            bookingData.tyreItems.push({\r\n                                title: title,\r\n                                price: totalPrice,\r\n                                qty: tyreQty,\r\n                                isTBC: isTBC\r\n                            });\r\n\r\n                            $('#tyre-width, #tyre-profile, #tyre-rim').prop('disabled', true);\r\n                            $('#tyre-add-btn').html('Remove Tyres').removeClass('btn-danger').addClass('btn-warning');\r\n\r\n                            $('#tyre-popup').fadeOut(300);\r\n                            saveSelectedServices();\r\n                            updateSelectedCount();\r\n                            if (typeof loadStep4 === 'function') loadStep4();\r\n                        } else {\r\n                            \/\/ This is the important line for error\r\n                            $('#tyre-error').text('No tyres found with that size').show().removeClass('d-none');\r\n                        }\r\n                    });\r\n\r\n                    \/\/ Close popup\r\n                    $('#tyre-popup-close').off('click').on('click', function() {\r\n                        $('#tyre-popup').fadeOut(200);\r\n                    });\r\n                    \r\n                });\r\n                \r\n                \r\n            }\r\n\r\n            \/\/ ==================== IMPROVED updateSelectedCount() ====================\r\n            function updateSelectedCount() {\r\n                let total = 0;\r\n                total += $('.service-checkbox:checked').length;\r\n                total += $('.service-radio:checked').length;\r\n                total += $('.main-service-check:checked').length;\r\n\r\n                \/\/ Count added tyres\r\n                if (bookingData.tyreItems) total += bookingData.tyreItems.length;\r\n\r\n                const helpOn = bookingData.help_selected === true || $('.help-toggle').is(':checked');\r\n                if (helpOn) total += 1;\r\n\r\n                $('#total-selected-count').text(total + ' services selected');\r\n                $('#btn-next-services').prop('disabled', total === 0);\r\n            }\r\n                \r\n            function saveSelectedServices() {\r\n                bookingData.selectedServices = [];\r\n                bookingData.selectedOptions = bookingData.selectedOptions || {};\r\n\r\n                $('.service-checkbox:checked, .service-radio:checked, .main-service-check:checked').each(function() {\r\n                    bookingData.selectedServices.push($(this).val());\r\n                });\r\n\r\n                \/\/ Save selected inner option\r\n                $('.service-select-option').each(function() {\r\n                    if ($(this).val()) {\r\n                        const id = $(this).data('service-id');\r\n                        bookingData.selectedOptions[id] = $(this).val();\r\n                    }\r\n                });\r\n                $('.service-radio-option:checked, input[name^=\"tyre_\"]:checked').each(function() {\r\n                    const id = $(this).closest('.multiple-service-item').find('.main-service-check, .service-radio').val();\r\n                    bookingData.selectedOptions[id] = $(this).val();\r\n                });\r\n            }\r\n            \/\/ Next button\r\n            $('#btn-next-services').on('click', function() {\r\n                saveSelectedServices();   \/\/ Save before moving\r\n                showStep(4);\r\n                loadStep4();\r\n            });\r\n            \r\n            \/\/ --- Step 4 ---\/\/\r\n                        function loadStep4() {\r\n                let html = '';\r\n                let total = 0;\r\n                let hasTBC = false;\r\n\r\n                \/\/ 1. Simple services\r\n                $('.service-checkbox:checked, .service-radio:checked').each(function() {\r\n                    if ($(this).closest('.multiple-service-item').length > 0) return;\r\n\r\n                    const title = $(this).data('title') || 'Service';\r\n                    const price = parseFloat($(this).data('fixed-price') || 0);\r\n                    const priceType = $(this).data('price-type') || '';\r\n\r\n                    if (priceType === 'custom' || price <= 0) {\r\n                        hasTBC = true;\r\n                    } else {\r\n                        total += price;\r\n                    }\r\n\r\n                    html += `\r\n                    <div class=\"border rounded p-4 mb-4\">\r\n                        <div class=\"d-flex justify-content-between align-items-start\">\r\n                            <div><strong>${title}<\/strong><\/div>\r\n                            <div class=\"text-end\">\r\n                                ${price > 0 && priceType !== 'custom' ? '$' + price.toFixed(2) : '<span class=\"text-warning\">Price TBC<\/span>'}\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>`;\r\n                });\r\n\r\n                \/\/ 2. Multiple option services (Select \/ Radio)\r\n                $('.multiple-service-item').each(function() {\r\n                    const $main = $(this).find('.main-service-check, .service-radio');\r\n                    if (!$main.is(':checked')) return;\r\n\r\n                    const baseTitle = $main.data('title') || 'Service';\r\n                    let selectedPrice = 0;\r\n                    let optionLabel = '';\r\n\r\n                    const $select = $(this).find('.service-select-option');\r\n                    if ($select.length && $select.val()) {\r\n                        selectedPrice = parseFloat($select.val()) || 0;\r\n                        optionLabel = $select.find('option:selected').data('label') || '';\r\n                    }\r\n\r\n                    const $radio = $(this).find('.service-radio-option:checked');\r\n                    if ($radio.length) {\r\n                        selectedPrice = parseFloat($radio.val()) || 0;\r\n                        optionLabel = $radio.data('label') || '';\r\n                    }\r\n\r\n                    const displayTitle = optionLabel ? baseTitle + ' - ' + optionLabel : baseTitle;\r\n\r\n                    if (selectedPrice > 0) {\r\n                        total += selectedPrice;\r\n                    } else {\r\n                        hasTBC = true;\r\n                    }\r\n\r\n                    html += `\r\n                    <div class=\"border rounded p-4 mb-4\">\r\n                        <div class=\"d-flex justify-content-between align-items-start\">\r\n                            <div><strong>${displayTitle}<\/strong><\/div>\r\n                            <div class=\"text-end\">\r\n                                ${selectedPrice > 0 ? '$' + selectedPrice.toFixed(2) : '<span class=\"text-warning\">Price TBC<\/span>'}\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>`;\r\n                });\r\n\r\n                \/\/ 3. Added Tyres (from popup)\r\n                if (bookingData.tyreItems && bookingData.tyreItems.length > 0) {\r\n                    bookingData.tyreItems.forEach(item => {\r\n                        if (item.isTBC) {\r\n                            hasTBC = true;\r\n                        } else {\r\n                            total += item.price || 0;\r\n                        }\r\n\r\n                        const priceDisplay = item.isTBC ? '<span class=\"text-warning\">TBC<\/span>' : '$' + (item.price || 0).toFixed(2);\r\n\r\n                        html += `\r\n                        <div class=\"border rounded p-4 mb-4\">\r\n                            <div class=\"d-flex justify-content-between align-items-start\">\r\n                                <div><strong>${item.title} \u00d7 ${item.qty}<\/strong><\/div>\r\n                                <div class=\"text-end\">\r\n                                    ${priceDisplay}\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>`;\r\n                    });\r\n                }\r\n\r\n                \/\/ 4. Help me decide\r\n                if (bookingData.help_selected) {\r\n                    const hp = parseFloat(bookingData.help_price || 0);\r\n                    total += hp;\r\n                    html += `\r\n                    <div class=\"border rounded p-4 mb-4\">\r\n                        <div class=\"d-flex justify-content-between align-items-start\">\r\n                            <div><strong>Help me decide<\/strong><\/div>\r\n                            <div class=\"text-end fw-bold\">$${hp.toFixed(2)}<\/div>\r\n                        <\/div>\r\n                    <\/div>`;\r\n                }\r\n\r\n                $('#services-list').html(html || '<p class=\"text-center py-5 text-muted\">No services selected.<\/p>');\r\n\r\n                \/\/ Grand Total - Show TBC if any service is TBC\r\n                if (hasTBC) {\r\n                    $('#grand-total').html('<span class=\"text-warning fw-bold\">TBC<\/span>');\r\n                } else {\r\n                    $('#grand-total').text('$' + total.toFixed(2));\r\n                }\r\n            }\r\n            \r\n            \/\/ Step 4 \u2192 Step 5 Button\r\n            $('#btn-proceed-step4').off('click').on('click', function() {\r\n                bookingData.total_amount = parseFloat($('#grand-total').text().replace('\u20b9', '').replace('TBC', '0')) || 0;\r\n                showStep(5);\r\n            });\r\n            \r\n            \/\/ --- Step 5 ---\/\/\r\n            function loadStep5() {\r\n                const startTime = mcsb_data.business_start || '08:00';\r\n                const endTime   = mcsb_data.business_end || '17:00';\r\n                const slotMin   = parseInt(mcsb_data.slot_duration) || 120;\r\n                const holidays  = mcsb_data.holidays || [];\r\n            \r\n                \/\/ Sidebar Summary\r\n                $('#sidebar-summary-step5').html(`\r\n                    <strong>Vehicle:<\/strong> ${bookingData.make_name || ''} ${bookingData.model_name || ''}<br><br>\r\n                    <strong>Services:<\/strong> ${$('.service-checkbox:checked').length} selected<br><br>\r\n                    <strong>Total:<\/strong> ${$('#grand-total').text()}\r\n                `);\r\n            \r\n                \/\/ Populate Mechanics Dropdown\r\n                if (mcsb_data.mechanics && mcsb_data.mechanics.length > 0) {\r\n                    let opt = '<option value=\"\">Any Mechanic (Recommended)<\/option>';\r\n                    mcsb_data.mechanics.forEach(m => {\r\n                        opt += `<option value=\"${m.id}\">${m.name}${m.van}<\/option>`;\r\n                    });\r\n                    $('#preferred-mechanic').html(opt);\r\n                }\r\n            \r\n                \/\/ 3 Day Cards (Next 3 Days)\r\n                let datesHtml = '';\r\n                const today = new Date();\r\n                for (let i = 0; i < 3; i++) {\r\n                    let d = new Date(today);\r\n                    d.setDate(d.getDate() + i);\r\n                    let formatted = d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');\r\n                    let dayName = d.toLocaleString('default', { weekday: 'long' });\r\n                    let dateStr = d.getDate() + ' ' + d.toLocaleString('default', { month: 'long' });\r\n                    let isHoliday = holidays.includes(formatted);\r\n            \r\n                    datesHtml += `\r\n                        <div class=\"date-card border rounded p-3 mb-3 ${isHoliday ? 'disabled opacity-50' : ''}\" \r\n                             data-date=\"${formatted}\" ${isHoliday ? 'style=\"pointer-events:none;\"' : ''}>\r\n                            <strong>${dayName}<\/strong><br>\r\n                            ${dateStr}<br>\r\n                            <small>${startTime} - ${endTime}<\/small>\r\n                            ${isHoliday ? '<small class=\"text-danger\">Holiday - Closed<\/small>' : ''}\r\n                        <\/div>`;\r\n                }\r\n                $('#available-dates').html(datesHtml);\r\n            \r\n                $('.date-card:not(.disabled)').on('click', function() {\r\n                    $('.date-card').removeClass('active');\r\n                    $(this).addClass('active');\r\n                    $('#selected-date-box').val($(this).text().trim());\r\n                    bookingData.selectedDate = $(this).data('date');\r\n                });\r\n                \r\n                updateSidebarFinal();\r\n                    \/\/ Mechanic Selection - Save Properly\r\n                    $('#preferred-mechanic').off('change').on('change', function() {\r\n                        const selectedId = $(this).val();\r\n                        const selectedName = $(this).find('option:selected').text();\r\n                        \r\n                        bookingData.preferred_mechanic = selectedId;\r\n                        bookingData.preferred_mechanic_name = selectedName;\r\n                        \r\n                        console.log(\"Mechanic Selected:\", selectedId, selectedName);\r\n                    });\r\n            }\r\n            \r\n            \/\/ Calendar Popup (Improved + Close button fixed)\r\n            let currentStartDate = new Date();\r\n            currentStartDate.setHours(0,0,0,0);\r\n            \r\n            function renderCalendar() {\r\n                const holidays = mcsb_data.holidays || [];\r\n                const startTime = mcsb_data.business_start || '08:00';\r\n                const endTime = mcsb_data.business_end || '17:00';\r\n                const slotMin = parseInt(mcsb_data.slot_duration) || 120;\r\n            \r\n                let html = '';\r\n                const dayNames = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];\r\n            \r\n                \/\/ Helper function for clean time format\r\n                function formatTimeSlot(startDate) {\r\n                    let startStr = startDate.toLocaleTimeString('en-US', { \r\n                        hour: 'numeric', \r\n                        minute: 'numeric', \r\n                        hour12: true \r\n                    }).toLowerCase().replace(':00', '');\r\n            \r\n                    let endDate = new Date(startDate);\r\n                    endDate.setMinutes(endDate.getMinutes() + slotMin);\r\n            \r\n                    let endStr = endDate.toLocaleTimeString('en-US', { \r\n                        hour: 'numeric', \r\n                        minute: 'numeric', \r\n                        hour12: true \r\n                    }).toLowerCase().replace(':00', '');\r\n            \r\n                    return startStr + ' - ' + endStr;\r\n                }\r\n            \r\n                for (let i = 0; i < 7; i++) {\r\n                    let date = new Date(currentStartDate);\r\n                    date.setDate(date.getDate() + i);\r\n                    let dayName = dayNames[date.getDay()];\r\n                    let formatted = date.getFullYear() + '-' + String(date.getMonth()+1).padStart(2,'0') + '-' + String(date.getDate()).padStart(2,'0');\r\n                    let isDisabled = date < new Date() || holidays.includes(formatted);\r\n            \r\n                    html += `<div style=\"text-align:center;border:1px solid #ddd;padding:10px;${isDisabled ? 'opacity:0.4;' : ''}\">`;\r\n                    html += `<strong>${dayName}<\/strong><br>${date.getDate()} ${date.toLocaleString('default', { month: 'short' })}<br>`;\r\n            \r\n                    \/\/ Generate dynamic time slots with clean format\r\n                    let current = new Date(date);\r\n                    let [startHour, startMin] = startTime.split(':').map(Number);\r\n                    let [endHour, endMin] = endTime.split(':').map(Number);\r\n            \r\n                    current.setHours(startHour, startMin, 0, 0);\r\n            \r\n                    while (current.getHours() < endHour || (current.getHours() === endHour && current.getMinutes() < endMin)) {\r\n                        let slotText = formatTimeSlot(current);\r\n                        let cls = isDisabled ? 'disabled' : '';\r\n            \r\n                        html += `<div style=\"margin:4px 0;background:#f8f9fa;padding:8px;cursor:${isDisabled ? 'not-allowed' : 'pointer'};\" \r\n                                    class=\"time-slot ${cls}\" \r\n                                    data-date=\"${formatted} ${slotText}\">\r\n                                    ${slotText}\r\n                                 <\/div>`;\r\n            \r\n                        current.setMinutes(current.getMinutes() + slotMin);\r\n                    }\r\n            \r\n                    html += `<\/div>`;\r\n                }\r\n            \r\n                $('#calendar-week').html(html);\r\n            \r\n                $('.time-slot:not(.disabled)').off('click').on('click', function() {\r\n                        let fullDate = $(this).data('date');   \/\/ This contains the raw data\r\n                    \r\n                        \/\/ Convert to Nice Format\r\n                        let niceDate = formatNiceDate(fullDate);\r\n                    \r\n                        $('#selected-date-box').val(niceDate);\r\n                        bookingData.selectedDate = niceDate;\r\n                    \r\n                        $('#calendar-popup').fadeOut();\r\n                    });\r\n            }\r\n            \r\n            $('#selected-date-box, #show-calendar-btn').on('click', function() {\r\n                $('#calendar-popup').fadeIn();\r\n                renderCalendar();\r\n            });\r\n            \r\n            $('#close-calendar').on('click', function() {\r\n                $('#calendar-popup').fadeOut();\r\n            });\r\n            \r\n            $('#prev-week').on('click', function() {\r\n                currentStartDate.setDate(currentStartDate.getDate() - 7);\r\n                renderCalendar();\r\n            });\r\n            \r\n            $('#next-week').on('click', function() {\r\n                currentStartDate.setDate(currentStartDate.getDate() + 7);\r\n                renderCalendar();\r\n            });\r\n            \r\n           $('#btn-next-datetime').on('click', function() {\r\n                const dateVal = $('#selected-date-box').val().trim();\r\n            \r\n                if (!dateVal) {\r\n                    $('#selected-date-box').css('border', '2px solid #e74c3c').focus();\r\n                    return;   \/\/ Stop here - No alert\r\n                }\r\n            \r\n                updateSidebarFinal();\r\n                showStep(6);\r\n            });\r\n            \r\n            \/\/ --- Step 6 ---\/\/\r\n           function updateSidebarFinal() {\r\n                console.log(\"\u2705 Step 6 Sidebar Updated\");\r\n           \r\n                $('#step6-location').html(`<strong>${bookingData.location || 'Melbourne 3000'}<\/strong>`);\r\n           \r\n                let dateText = bookingData.selectedDate || 'Not selected';\r\n                $('#step6-datetime').html(`${dateText}`);\r\n           \r\n                let html = `<strong>${bookingData.make_name || ''} ${bookingData.model_name || ''}<\/strong><br>`;\r\n                html += `<small>${bookingData.reg || ''} ${bookingData.year || ''}<\/small><br><br>`;\r\n           \r\n                let serviceCount = 0;\r\n           \r\n                \/\/ Checkbox services\r\n                $('.service-checkbox:checked').each(function() {\r\n                    html += `\u2022 ${$(this).data('title')}<br>`;\r\n                    serviceCount++;\r\n                });\r\n           \r\n                \/\/ Radio button services\r\n                $('.service-radio:checked').each(function() {\r\n                    html += `\u2022 ${$(this).data('title')}<br>`;\r\n                    serviceCount++;\r\n                });\r\n           \r\n                \/\/ Help me decide\r\n                if (bookingData.help_selected) {\r\n                    html += `\u2022 Help me decide<br>`;\r\n                    serviceCount++;\r\n                }\r\n               \r\n                \/\/ Tyre services\r\n                if (bookingData.tyreItems && bookingData.tyreItems.length > 0) {\r\n                    bookingData.tyreItems.forEach(item => {\r\n                        html += `\u2022 ${item.title} \u00d7 ${item.qty}<br>`;\r\n                        serviceCount++;\r\n                    });\r\n                }\r\n           \r\n                if (serviceCount === 0) {\r\n                    html += `<small>No services selected<\/small>`;\r\n                }\r\n           \r\n                $('#step6-services').html(html);\r\n            }\r\n\r\n          $('#btn-confirm-final').on('click', function() {\r\n    const btn = $(this);\r\n    btn.prop('disabled', true).find('.btn-text').hide().end().find('.loader').show();\r\n\r\n    \/\/ Clear previous errors\r\n    $('.error-msg').remove();\r\n\r\n    let isValid = true;\r\n\r\n    \/\/ First Name\r\n    if (!$('#first-name').val().trim()) {\r\n        $('#first-name').css('border', '2px solid #e74c3c');\r\n        $('<small class=\"error-msg text-danger\">First name is required<\/small>').insertAfter('#first-name');\r\n        isValid = false;\r\n    } else {\r\n        $('#first-name').css('border', '2px solid #28a745');\r\n    }\r\n\r\n    \/\/ Phone (Only Digits, 8-15)\r\n    const phoneVal = $('#phone').val().trim();\r\n    if (!phoneVal || !\/^[0-9]{8,15}$\/.test(phoneVal)) {\r\n        $('#phone').css('border', '2px solid #e74c3c');\r\n        $('<small class=\"error-msg text-danger\">Phone number must contain only digits (8-15 numbers)<\/small>').insertAfter('#phone');\r\n        isValid = false;\r\n    } else {\r\n        $('#phone').css('border', '2px solid #28a745');\r\n    }\r\n\r\n    \/\/ Email\r\n    const emailVal = $('#email').val().trim();\r\n    if (!emailVal || !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(emailVal)) {\r\n        $('#email').css('border', '2px solid #e74c3c');\r\n        $('<small class=\"error-msg text-danger\">Valid email address is required<\/small>').insertAfter('#email');\r\n        isValid = false;\r\n    } else {\r\n        $('#email').css('border', '2px solid #28a745');\r\n    }\r\n\r\n    \/\/ Street Address\r\n    if (!$('#street-address').val().trim()) {\r\n        $('#street-address').css('border', '2px solid #e74c3c');\r\n        $('<small class=\"error-msg text-danger\">Street address is required<\/small>').insertAfter('#street-address');\r\n        isValid = false;\r\n    } else {\r\n        $('#street-address').css('border', '2px solid #28a745');\r\n    }\r\n\r\n    if (!isValid) {\r\n        btn.prop('disabled', false).find('.btn-text').show().end().find('.loader').hide();\r\n        return;\r\n    }\r\n\r\n    \/\/ ====================== PASS ALL DATA ======================\r\n    bookingData.customer_name   = ($('#first-name').val() || '').trim() + ' ' + ($('#last-name').val() || '').trim();\r\n    bookingData.customer_email  = $('#email').val().trim();\r\n    bookingData.customer_phone  = $('#phone').val().trim();\r\n    bookingData.address         = ($('#street-address').val() || '') + ', ' + \r\n                                  ($('#suburb').val() || '') + ' ' + \r\n                                  ($('#postcode').val() || '') + ' ' + \r\n                                  ($('#state').val() || '');\r\n    bookingData.notes           = $('#notes').val().trim();\r\n\r\n    \/\/ Mechanic\r\n    bookingData.preferred_mechanic = $('#preferred-mechanic').val() || 0;\r\n\r\n    \/\/ === TOTAL AMOUNT (Most Important Fix) ===\r\n    let totalAmount = 0;\r\n    \r\n    \/\/ Try to get from grand total in Step 4\r\n    const grandTotalText = $('#grand-total').text().replace(\/[^0-9.]\/g, '');\r\n    if (grandTotalText) {\r\n        totalAmount = parseFloat(grandTotalText) || 0;\r\n    }\r\n\r\n    \/\/ Fallback: Calculate from selected services\r\n    if (totalAmount === 0) {\r\n        $('.service-checkbox:checked').each(function() {\r\n            const price = parseFloat($(this).data('fixed-price')) || 0;\r\n            totalAmount += price;\r\n        });\r\n    }\r\n\r\n    bookingData.total_amount = totalAmount;\r\n\r\n    console.log(\"\u2705 Booking Data Sent - Total Amount:\", totalAmount);\r\n    \/\/ Save Selected Services\r\n    let selectedServices = [];\r\n    $('.service-checkbox:checked').each(function() {\r\n        selectedServices.push({\r\n            id: $(this).val(),\r\n            title: $(this).data('title') || $(this).closest('label').text().trim(),\r\n            price: parseFloat($(this).data('fixed-price')) || 0\r\n        });\r\n    });\r\n    \r\n                    \/\/ Add Tyre services to the booking data\r\n                if (bookingData.tyreItems && bookingData.tyreItems.length > 0) {\r\n                    bookingData.tyreItems.forEach(item => {\r\n                        selectedServices.push({\r\n                            id: 'tyre',\r\n                            title: item.title,\r\n                            price: item.price || 0\r\n                        });\r\n                    });\r\n                }\r\n\r\n    \/\/ If Help me decide was chosen\r\n    if (bookingData.help_selected) {\r\n        selectedServices.push({\r\n            id: 'help',\r\n            title: 'Help me decide \/ Diagnostic',\r\n            price: parseFloat(bookingData.help_price) || 0\r\n        });\r\n    }\r\n\r\n    bookingData.selected_services = selectedServices;\r\n    bookingData.total_amount = selectedServices.reduce((sum, s) => sum + s.price, 0);\r\n    \/\/ Send to server\r\n    $.ajax({\r\n        url: mcsb_data.ajaxurl,\r\n        type: 'POST',\r\n        data: {\r\n            action: 'mcsb_save_booking',\r\n            bookingData: bookingData,\r\n            nonce: mcsb_data.nonce\r\n        },\r\n        success: function(res) {\r\n            if (res.success) {\r\n                $('.wizard-step').hide();\r\n                $('#thank-you-page').show();\r\n            \r\n                \/\/ === DISABLE BACK NAVIGATION AFTER BOOKING ===\r\n                $('#progress-bar').hide();                    \/\/ Hide progress steps\r\n                $('.back-btn').hide();                        \/\/ Hide all back buttons\r\n                $('.step').off('click').css('pointer-events', 'none'); \/\/ Disable clicking steps\r\n            \r\n                \/\/ Optional: Disable browser back button (prevents going back in history)\r\n                window.history.pushState(null, null, window.location.href);\r\n                window.addEventListener('popstate', function() {\r\n                    window.history.pushState(null, null, window.location.href);\r\n                });\r\n            \r\n            } else {\r\n                alert(res.data?.message || 'Failed to save booking.');\r\n            }\r\n        },\r\n        error: function() {\r\n            alert('Connection error. Please try again.');\r\n        },\r\n        complete: function() {\r\n            btn.prop('disabled', false).find('.btn-text').show().end().find('.loader').hide();\r\n        }\r\n    });\r\n});\r\n            \r\n            \/\/ Helper function for email validation\r\n            function isValidEmail(email) {\r\n                return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\r\n            }\r\n\r\n\r\n\r\n        \/\/ === FORCE UPDATE SIDEBAR WHEN STEP 6 LOADS ====================\r\n        $('.wizard-step').on('shown', function() {\r\n            if ($(this).attr('id') === 'step-6') {\r\n                updateSidebarFinal();\r\n            }\r\n        });\r\n\r\n            $('#step-6').on('shown', function() {\r\n                setTimeout(updateSidebarFinal, 200);\r\n            });\r\n        });\r\n        \r\n            \r\n\r\n            function formatNiceDate(rawStr) {\r\n                if (!rawStr) return '';\r\n            \r\n                \/\/ Example input: \"2026-05-09 10am - 12pm\" or similar\r\n                let parts = rawStr.split(' ');\r\n                if (parts.length < 2) return rawStr;\r\n            \r\n                let datePart = parts[0]; \/\/ \"2026-05-09\"\r\n                let timePart = parts.slice(1).join(' ');\r\n            \r\n                let date = new Date(datePart);\r\n                let dayNum = date.getDate();\r\n                let monthNames = [\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"];\r\n                let month = monthNames[date.getMonth()];\r\n            \r\n                \/\/ Ordinal (1st, 2nd, 3rd, 4th...)\r\n                let suffix = 'th';\r\n                if (dayNum % 10 === 1 && dayNum % 100 !== 11) suffix = \"st\";\r\n                else if (dayNum % 10 === 2 && dayNum % 100 !== 12) suffix = \"nd\";\r\n                else if (dayNum % 10 === 3 && dayNum % 100 !== 13) suffix = \"rd\";\r\n            \r\n                return `${dayNum}${suffix} ${month} ${date.getFullYear()} ${timePart}`;\r\n            }\r\n        <\/script>\r\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>USE CODE WINTER100 TO GET $100 OFF LOGBOOK SERVICING<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1335","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ahautocare.com.au\/index.php?rest_route=\/wp\/v2\/pages\/1335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahautocare.com.au\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ahautocare.com.au\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ahautocare.com.au\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ahautocare.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1335"}],"version-history":[{"count":28,"href":"https:\/\/ahautocare.com.au\/index.php?rest_route=\/wp\/v2\/pages\/1335\/revisions"}],"predecessor-version":[{"id":1964,"href":"https:\/\/ahautocare.com.au\/index.php?rest_route=\/wp\/v2\/pages\/1335\/revisions\/1964"}],"wp:attachment":[{"href":"https:\/\/ahautocare.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}