{"id":137,"date":"2026-03-09T18:40:07","date_gmt":"2026-03-09T18:40:07","guid":{"rendered":"https:\/\/crazycafe.net\/demo\/?page_id=137"},"modified":"2026-04-03T18:02:17","modified_gmt":"2026-04-03T18:02:17","slug":"booking","status":"publish","type":"page","link":"https:\/\/crazycafe.net\/demo\/booking\/","title":{"rendered":"Booking"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"137\" class=\"elementor elementor-137\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38797551 e-flex e-con-boxed e-con e-parent\" data-id=\"38797551\" 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-9da359a elementor-widget elementor-widget-spacer\" data-id=\"9da359a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e37288 elementor-widget elementor-widget-spacer\" data-id=\"1e37288\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/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<div class=\"elementor-element elementor-element-3992caa e-flex e-con-boxed e-con e-parent\" data-id=\"3992caa\" 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-4d685c6 elementor-widget elementor-widget-shortcode\" data-id=\"4d685c6\" 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\"><!-- VibeReserve Booking Form -->\n<div class=\"vr-font-sans vr-antialiased vr-w-full\" id=\"vr-booking-root\" data-multi-loc=\"1\" data-loc-id=\"1\">\n  <input type=\"hidden\" id=\"vr-location-id\" value=\"1\">\n  <div class=\"vr-max-w-3xl vr-mx-auto\">\n\n    <!-- Card wrapper -->\n    <div class=\"vr-booking-card\" style=\"background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(226,232,240,.6);box-shadow:0 20px 60px rgba(15,23,42,.12);\">\n\n      <!-- \u2500\u2500 Header \u2500\u2500 -->\n      <div class=\"vr-relative\" style=\"background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 50%,#2563eb 100%);\">\n        <!-- Decorative circles -->\n        <div class=\"vr-absolute vr--right-8 vr--top-8 vr-w-48 vr-h-48 vr-rounded-full\" style=\"background:rgba(255,255,255,.06)\"><\/div>\n        <div class=\"vr-absolute vr--right-4 vr-bottom-0 vr-w-32 vr-h-32 vr-rounded-full\" style=\"background:rgba(255,255,255,.04)\"><\/div>\n        <div class=\"vr-relative vr-text-center\" style=\"padding:24px 20px 22px;\">\n          <h2 class=\"vr-text-2xl vr-font-black vr-text-white vr-tracking-tight vr-mb-1\">Book Your Appointment<\/h2>\n          <p class=\"vr-text-blue-200 vr-text-sm\">Complete the steps below to schedule your visit<\/p>\n\n          <!-- Progress steps -->\n                    <div style=\"margin-top:22px;padding:0 4px 6px;\">\n            <div style=\"display:flex;align-items:flex-start;justify-content:center;width:100%;max-width:460px;margin:0 auto;\">\n                            <div style=\"display:flex;flex-direction:column;align-items:center;flex-shrink:0;\" id=\"vr-ps-1\">\n                <div class=\"vr-step-dot\"\n                     style=\"width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:rgba(255,255,255,.6);transition:all .3s;flex-shrink:0;box-sizing:border-box;\">\n                  1                <\/div>\n                <div class=\"vr-step-lbl\"\n                     style=\"color:rgba(255,255,255,.5);font-size:9px;font-weight:700;margin-top:4px;text-align:center;max-width:52px;line-height:1.2;word-break:break-word;white-space:normal;\">\n                  Location                <\/div>\n              <\/div>\n                            <div class=\"vr-step-line\" id=\"vr-pl-1\"\n                   style=\"flex:1;height:1.5px;margin:0 3px;margin-top:13px;background:rgba(255,255,255,.2);min-width:4px;max-width:44px;transition:background .3s;flex-shrink:1;\"><\/div>\n                                          <div style=\"display:flex;flex-direction:column;align-items:center;flex-shrink:0;\" id=\"vr-ps-2\">\n                <div class=\"vr-step-dot\"\n                     style=\"width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:rgba(255,255,255,.6);transition:all .3s;flex-shrink:0;box-sizing:border-box;\">\n                  2                <\/div>\n                <div class=\"vr-step-lbl\"\n                     style=\"color:rgba(255,255,255,.5);font-size:9px;font-weight:700;margin-top:4px;text-align:center;max-width:52px;line-height:1.2;word-break:break-word;white-space:normal;\">\n                  Service                <\/div>\n              <\/div>\n                            <div class=\"vr-step-line\" id=\"vr-pl-2\"\n                   style=\"flex:1;height:1.5px;margin:0 3px;margin-top:13px;background:rgba(255,255,255,.2);min-width:4px;max-width:44px;transition:background .3s;flex-shrink:1;\"><\/div>\n                                          <div style=\"display:flex;flex-direction:column;align-items:center;flex-shrink:0;\" id=\"vr-ps-3\">\n                <div class=\"vr-step-dot\"\n                     style=\"width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:rgba(255,255,255,.6);transition:all .3s;flex-shrink:0;box-sizing:border-box;\">\n                  3                <\/div>\n                <div class=\"vr-step-lbl\"\n                     style=\"color:rgba(255,255,255,.5);font-size:9px;font-weight:700;margin-top:4px;text-align:center;max-width:52px;line-height:1.2;word-break:break-word;white-space:normal;\">\n                  Date &amp; Time                <\/div>\n              <\/div>\n                            <div class=\"vr-step-line\" id=\"vr-pl-3\"\n                   style=\"flex:1;height:1.5px;margin:0 3px;margin-top:13px;background:rgba(255,255,255,.2);min-width:4px;max-width:44px;transition:background .3s;flex-shrink:1;\"><\/div>\n                                          <div style=\"display:flex;flex-direction:column;align-items:center;flex-shrink:0;\" id=\"vr-ps-4\">\n                <div class=\"vr-step-dot\"\n                     style=\"width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:rgba(255,255,255,.6);transition:all .3s;flex-shrink:0;box-sizing:border-box;\">\n                  4                <\/div>\n                <div class=\"vr-step-lbl\"\n                     style=\"color:rgba(255,255,255,.5);font-size:9px;font-weight:700;margin-top:4px;text-align:center;max-width:52px;line-height:1.2;word-break:break-word;white-space:normal;\">\n                  Details                <\/div>\n              <\/div>\n                            <div class=\"vr-step-line\" id=\"vr-pl-4\"\n                   style=\"flex:1;height:1.5px;margin:0 3px;margin-top:13px;background:rgba(255,255,255,.2);min-width:4px;max-width:44px;transition:background .3s;flex-shrink:1;\"><\/div>\n                                          <div style=\"display:flex;flex-direction:column;align-items:center;flex-shrink:0;\" id=\"vr-ps-5\">\n                <div class=\"vr-step-dot\"\n                     style=\"width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:rgba(255,255,255,.6);transition:all .3s;flex-shrink:0;box-sizing:border-box;\">\n                  5                <\/div>\n                <div class=\"vr-step-lbl\"\n                     style=\"color:rgba(255,255,255,.5);font-size:9px;font-weight:700;margin-top:4px;text-align:center;max-width:52px;line-height:1.2;word-break:break-word;white-space:normal;\">\n                  Confirm                <\/div>\n              <\/div>\n                                        <\/div>\n          <\/div>\n        <\/div>\n      <\/div><!-- \/header -->\n\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n           STEP 0 \u2014 LOCATION (only when multi-location)\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n            <div id=\"vr-step-1\" class=\"vr-step-panel\">\n        <div class=\"vr-step-inner\" style=\"padding-bottom:28px;\">\n          <h3 class=\"vr-text-lg vr-font-black vr-text-slate-900 vr-tracking-tight vr-mb-1\">Choose a Location<\/h3>\n          <p class=\"vr-text-sm vr-text-slate-400 vr-mb-6\">Select the branch you'd like to visit<\/p>\n          <div style=\"display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;\" id=\"vr-loc-grid\">\n                        <div class=\"vr-loc-card\"\n                 data-loc-id=\"1\"\n                 data-loc-name=\"Dhanmondi Branch\"\n                 data-currency-code=\"\"\n                 data-currency-symbol=\"\"\n                 onclick=\"vrSelectLocation(1,'Dhanmondi Branch')\"\n                 style=\"border:2px solid #e2e8f0;border-radius:16px;padding:18px 18px 14px;cursor:pointer;transition:all .2s;background:#fff;position:relative;box-shadow:0 2px 8px rgba(15,23,42,.05);\">\n              <div style=\"display:flex;align-items:flex-start;gap:12px;\">\n                <div style=\"width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#1e3a8a,#1d4ed8);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(29,78,216,.25);\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" style=\"width:17px;height:17px;\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n                <\/div>\n                <div style=\"min-width:0;flex:1;\">\n                  <div style=\"font-size:15px;font-weight:800;color:#0f172a;line-height:1.2;margin-bottom:5px;\">Dhanmondi Branch<\/div>\n                                    <div style=\"font-size:12px;color:#64748b;line-height:1.5;margin-bottom:3px;\">\ud83d\udccd CHA-62, 3RD FLOOR, Dhaka<\/div>\n                                                      <div style=\"font-size:11px;color:#94a3b8;margin-bottom:2px;\">\ud83d\udd50 9:00 AM \u2013 8:00 PM<\/div>\n                                                      <div style=\"font-size:11px;color:#94a3b8;\">\ud83d\udcde +8801912578522<\/div>\n                                  <\/div>\n              <\/div>\n                            <a href=\"https:\/\/maps.app.goo.gl\/yzQB3qcvoWtvaSxR9\" target=\"_blank\" onclick=\"event.stopPropagation()\"\n                 style=\"display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:10px;font-weight:700;color:#1d4ed8;text-decoration:none;background:#eff6ff;padding:3px 9px;border-radius:20px;\">\ud83d\uddfa View Map<\/a>\n                          <\/div>\n                        <div class=\"vr-loc-card\"\n                 data-loc-id=\"3\"\n                 data-loc-name=\"Gabtoli\"\n                 data-currency-code=\"\"\n                 data-currency-symbol=\"\"\n                 onclick=\"vrSelectLocation(3,'Gabtoli')\"\n                 style=\"border:2px solid #e2e8f0;border-radius:16px;padding:18px 18px 14px;cursor:pointer;transition:all .2s;background:#fff;position:relative;box-shadow:0 2px 8px rgba(15,23,42,.05);\">\n              <div style=\"display:flex;align-items:flex-start;gap:12px;\">\n                <div style=\"width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#1e3a8a,#1d4ed8);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(29,78,216,.25);\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" style=\"width:17px;height:17px;\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n                <\/div>\n                <div style=\"min-width:0;flex:1;\">\n                  <div style=\"font-size:15px;font-weight:800;color:#0f172a;line-height:1.2;margin-bottom:5px;\">Gabtoli<\/div>\n                                                      <div style=\"font-size:11px;color:#94a3b8;margin-bottom:2px;\">\ud83d\udd50 9:00 AM \u2013 8:00 PM<\/div>\n                                                    <\/div>\n              <\/div>\n                          <\/div>\n                        <div class=\"vr-loc-card\"\n                 data-loc-id=\"2\"\n                 data-loc-name=\"Gulshan Branch\"\n                 data-currency-code=\"\"\n                 data-currency-symbol=\"\"\n                 onclick=\"vrSelectLocation(2,'Gulshan Branch')\"\n                 style=\"border:2px solid #e2e8f0;border-radius:16px;padding:18px 18px 14px;cursor:pointer;transition:all .2s;background:#fff;position:relative;box-shadow:0 2px 8px rgba(15,23,42,.05);\">\n              <div style=\"display:flex;align-items:flex-start;gap:12px;\">\n                <div style=\"width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#1e3a8a,#1d4ed8);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(29,78,216,.25);\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" style=\"width:17px;height:17px;\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n                <\/div>\n                <div style=\"min-width:0;flex:1;\">\n                  <div style=\"font-size:15px;font-weight:800;color:#0f172a;line-height:1.2;margin-bottom:5px;\">Gulshan Branch<\/div>\n                                    <div style=\"font-size:12px;color:#64748b;line-height:1.5;margin-bottom:3px;\">\ud83d\udccd Ja 122\/A, Comilla Para, Badda, Dhaka, Dhaka<\/div>\n                                                      <div style=\"font-size:11px;color:#94a3b8;margin-bottom:2px;\">\ud83d\udd50 9:00 AM \u2013 8:00 PM<\/div>\n                                                      <div style=\"font-size:11px;color:#94a3b8;\">\ud83d\udcde +8801770001090<\/div>\n                                  <\/div>\n              <\/div>\n                          <\/div>\n                      <\/div>\n        <\/div>\n      <\/div>\n      \n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n           STEP \u2014 SERVICE (static for single-loc, AJAX container for multi-loc)\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <div id=\"vr-step-2\" class=\"vr-step-panel\" style=\"display:none;\">\n        <div class=\"vr-step-inner\">\n\n          <!-- Currency selector banner -->\n                    <div id=\"vr-currency-banner\" style=\"display:none;align-items:center;gap:10px;background:#f0fdf4;border:1.5px solid #86efac;border-radius:10px;padding:9px 14px;margin-bottom:14px;flex-wrap:wrap;\">\n            <span style=\"font-size:12px;color:#166534;font-weight:600;\">\ud83d\udcb1 Currency:<\/span>\n            <select id=\"vr-cur-select\"\n                    onchange=\"vrChangeCurrency(this.value)\"\n                    style=\"padding:4px 10px;border-radius:7px;border:1.5px solid #86efac;background:#fff;font-size:12px;font-weight:700;color:#166534;cursor:pointer;outline:none;\">\n                            <option value=\"USD\" data-symbol=\"$\">\n                USD ($)              <\/option>\n                          <\/select>\n                      <\/div>\n\n          <h3 class=\"vr-text-lg vr-font-black vr-text-slate-900 vr-tracking-tight vr-mb-2\">Choose a Service<\/h3>\n                    <p class=\"vr-text-sm vr-text-slate-400 vr-mb-4\" id=\"vr-svc-loc-label\"><\/p>\n          \n          <!-- Services container: PHP-rendered for single-loc, AJAX for multi-loc -->\n          <div id=\"vr-svc-container\">\n                                    <!-- Placeholder shown until location is selected -->\n            <div id=\"vr-svc-loading\" style=\"padding:40px 0;text-align:center;color:#94a3b8;\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"1.5\" style=\"width:36px;height:36px;margin:0 auto 10px;display:block;\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\n              <div style=\"font-size:13px;font-weight:600;\">Select a branch first<\/div>\n            <\/div>\n                      <\/div>\n\n          <!-- Staff picker (AJAX-reloaded for multi-loc) -->\n          <div id=\"vr-staff-section\" class=\"vr-mt-6\" >\n            <div class=\"vr-text-xs vr-font-bold vr-text-slate-500 vr-uppercase vr-tracking-widest vr-mb-3\">Preferred Staff (optional)<\/div>\n            <div class=\"vr-flex vr-flex-wrap vr-gap-2\" id=\"vr-staff-chips\">\n              <button type=\"button\" class=\"vr-staff-chip vr-selected vr-flex vr-items-center vr-gap-2 vr-px-4 vr-py-2 vr-rounded-full vr-border-2 vr-text-sm vr-font-semibold vr-cursor-pointer vr-transition-all\"\n                      style=\"background:#1d4ed8;color:#fff;border-color:#1d4ed8;\" data-id=\"0\" data-name=\"Any Available\">\n                <span class=\"vr-w-6 vr-h-6 vr-rounded-full vr-flex vr-items-center vr-justify-center vr-text-xs vr-font-black\" style=\"background:rgba(255,255,255,.25);\">&#9733;<\/span>\n                Any Available\n              <\/button>\n                            <button type=\"button\" class=\"vr-staff-chip vr-flex vr-items-center vr-gap-2 vr-px-4 vr-py-2 vr-rounded-full vr-border-2 vr-text-sm vr-font-semibold vr-cursor-pointer vr-transition-all\"\n                      style=\"background:#fff;color:#1e293b;border-color:#e2e8f0;\"\n                      data-id=\"1\" data-name=\"Gazi Yeasin\">\n                <span class=\"vr-w-6 vr-h-6 vr-rounded-full vr-overflow-hidden vr-shrink-0 vr-flex vr-items-center vr-justify-center vr-text-xs vr-font-black\"\n                      style=\"background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;\">\n                  G                <\/span>\n                Gazi Yeasin              <\/button>\n                          <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Action bar -->\n        <div class=\"vr-action-bar\">\n                    <button class=\"vr-btn-back\" style=\"padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;border:2px solid #e2e8f0;background:#fff;color:#475569;cursor:pointer;font-family:'Inter',sans-serif;\">&larr; Back<\/button>\n                    <button class=\"vr-btn-next\" style=\"padding:10px 22px;border-radius:10px;font-size:13px;font-weight:800;border:0;background:#1d4ed8;color:#fff;cursor:pointer;font-family:'Inter',sans-serif;box-shadow:0 4px 14px rgba(29,78,216,.35);\" disabled>\n            Next: Date &amp; Time &rarr;\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n           STEP 2 \u2014 DATE & TIME\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <div id=\"vr-step-3\" class=\"vr-step-panel\" style=\"display:none;\">\n        <div class=\"vr-step-inner\">\n          <h3 class=\"vr-text-lg vr-font-black vr-text-slate-900 vr-tracking-tight vr-mb-5\">Select Date &amp; Time<\/h3>\n          <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;\" class=\"vr-step2-grid\">\n\n            <!-- \u2500\u2500 Custom Calendar \u2500\u2500 -->\n            <div>\n              <div style=\"font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#64748b;margin-bottom:10px;display:flex;align-items:center;gap:6px;\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"width:13px;height:13px;\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\n                Pick a Date\n              <\/div>\n\n              <!-- hidden real input for form submit -->\n              <input type=\"hidden\" id=\"vr-datepick\"\n                     data-min=\"2026-04-09\"\n                     data-max=\"2026-05-09\">\n\n              <!-- Calendar widget -->\n              <div id=\"vr-cal-widget\" style=\"background:#fff;border:2px solid #e2e8f0;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(15,23,42,.08);user-select:none;\">\n\n                <!-- Month nav -->\n                <div style=\"background:linear-gradient(135deg,#1e3a8a,#1d4ed8);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;\">\n                  <button id=\"vr-cal-prev\" type=\"button\"\n                          style=\"width:32px;height:32px;border-radius:8px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;font-size:16px;line-height:1;flex-shrink:0;\"\n                          onmouseover=\"this.style.background='rgba(255,255,255,.28)'\" onmouseout=\"this.style.background='rgba(255,255,255,.15)'\">\n                    \u2039\n                  <\/button>\n                  <div id=\"vr-cal-month-label\" style=\"font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px;\"><\/div>\n                  <button id=\"vr-cal-next\" type=\"button\"\n                          style=\"width:32px;height:32px;border-radius:8px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;font-size:16px;line-height:1;flex-shrink:0;\"\n                          onmouseover=\"this.style.background='rgba(255,255,255,.28)'\" onmouseout=\"this.style.background='rgba(255,255,255,.15)'\">\n                    \u203a\n                  <\/button>\n                <\/div>\n\n                <!-- Day of week headers -->\n                <div style=\"display:grid;grid-template-columns:repeat(7,1fr);background:#f8fafc;border-bottom:1px solid #f1f5f9;\">\n                                    <div style=\"text-align:center;padding:8px 0;font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;\">Su<\/div>\n                                    <div style=\"text-align:center;padding:8px 0;font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;\">Mo<\/div>\n                                    <div style=\"text-align:center;padding:8px 0;font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;\">Tu<\/div>\n                                    <div style=\"text-align:center;padding:8px 0;font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;\">We<\/div>\n                                    <div style=\"text-align:center;padding:8px 0;font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;\">Th<\/div>\n                                    <div style=\"text-align:center;padding:8px 0;font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;\">Fr<\/div>\n                                    <div style=\"text-align:center;padding:8px 0;font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;\">Sa<\/div>\n                                  <\/div>\n\n                <!-- Days grid -->\n                <div id=\"vr-cal-days\" style=\"display:grid;grid-template-columns:repeat(7,1fr);padding:8px;gap:2px;\"><\/div>\n\n                <!-- Today shortcut -->\n                <div style=\"padding:8px 12px 10px;border-top:1px solid #f1f5f9;display:flex;justify-content:center;\">\n                  <button id=\"vr-cal-today\" type=\"button\"\n                          style=\"font-size:11px;font-weight:700;color:#1d4ed8;background:none;border:none;cursor:pointer;padding:4px 12px;border-radius:6px;transition:background .15s;\"\n                          onmouseover=\"this.style.background='#eff6ff'\" onmouseout=\"this.style.background='none'\">\n                    Today\n                  <\/button>\n                <\/div>\n              <\/div>\n\n              <!-- Selected date display -->\n              <div id=\"vr-selected-date-badge\" style=\"display:none;margin-top:10px;padding:10px 14px;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border:1.5px solid #bfdbfe;border-radius:12px;display:none;\">\n                <div style=\"font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#3b82f6;margin-bottom:2px;\">Selected Date<\/div>\n                <div id=\"vr-selected-date-text\" style=\"font-size:14px;font-weight:900;color:#1d4ed8;\"><\/div>\n              <\/div>\n\n              <!-- Selected time badge -->\n              <div id=\"vr-selected-time-badge\" style=\"display:none;margin-top:8px;padding:10px 14px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:12px;\">\n                <div style=\"font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#3b82f6;margin-bottom:2px;\">Selected Time<\/div>\n                <div id=\"vr-selected-time-text\" style=\"font-size:14px;font-weight:900;color:#1d4ed8;\"><\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Slots column -->\n            <div>\n              <div style=\"font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#64748b;margin-bottom:10px;display:flex;align-items:center;gap:6px;\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"width:13px;height:13px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n                Available Times\n              <\/div>\n              <div id=\"vr-slots\" class=\"vr-slots-area\" style=\"font-family:'Inter',system-ui,sans-serif;\">\n                <div class=\"vr-slots-empty\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" style=\"width:28px;height:28px;color:#cbd5e1;margin:0 auto 6px;display:block;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg>\n                  <div style=\"font-size:13px;color:#94a3b8;font-weight:600;\">Select a date first<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n        <div class=\"vr-action-bar\">\n          <button class=\"vr-btn-back\" style=\"padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;border:2px solid #e2e8f0;background:#fff;color:#475569;cursor:pointer;font-family:'Inter',sans-serif;\">&larr; Back<\/button>\n          <button class=\"vr-btn-next\" style=\"padding:10px 22px;border-radius:10px;font-size:13px;font-weight:800;border:0;background:#1d4ed8;color:#fff;cursor:pointer;font-family:'Inter',sans-serif;box-shadow:0 4px 14px rgba(29,78,216,.35);\" disabled>Next: Details &rarr;<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n           STEP 3 \u2014 CUSTOMER DETAILS\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <div id=\"vr-step-4\" class=\"vr-step-panel\" style=\"display:none;\">\n        <div class=\"vr-step-inner\">\n          <h3 class=\"vr-text-lg vr-font-black vr-text-slate-900 vr-tracking-tight vr-mb-1\">Your Details<\/h3>\n          <p style=\"font-size:13px;color:#94a3b8;margin:0 0 24px;\">Fill in your contact information to complete the booking.<\/p>\n\n          \n          <div style=\"display:flex;flex-direction:column;gap:16px;\">\n\n            <!-- Name + Phone row -->\n            <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px;\">\n              <div>\n                <label style=\"display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#64748b;margin-bottom:7px;\" for=\"vr-fn\">\n                  Full Name <span style=\"color:#ef4444;\">*<\/span>\n                <\/label>\n                <div style=\"position:relative;\">\n                  <input type=\"text\" id=\"vr-fn\"\n                         style=\"width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid #e2e8f0;background:#fff;font-size:14px;color:#1e293b;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;padding-left:38px;\"\n                         onfocus=\"this.style.borderColor='#1d4ed8';this.style.boxShadow='0 0 0 3px rgba(29,78,216,.1)'\" onblur=\"this.style.borderColor='#e2e8f0';this.style.boxShadow='none'\"                         placeholder=\"Your full name\"\n                         autocomplete=\"name\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"1.8\"\n                       style=\"width:16px;height:16px;position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;\">\n                    <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/>\n                  <\/svg>\n                <\/div>\n              <\/div>\n              <div>\n                <label style=\"display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#64748b;margin-bottom:7px;\" for=\"vr-fp\">\n                  Phone Number <span style=\"color:#ef4444;\">*<\/span>\n                <\/label>\n                <div style=\"position:relative;\">\n                  <input type=\"tel\" id=\"vr-fp\"\n                         style=\"width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid #e2e8f0;background:#fff;font-size:14px;color:#1e293b;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;padding-left:38px;\"\n                         onfocus=\"this.style.borderColor='#1d4ed8';this.style.boxShadow='0 0 0 3px rgba(29,78,216,.1)'\" onblur=\"this.style.borderColor='#e2e8f0';this.style.boxShadow='none'\"                         placeholder=\"+1 555 000 0000\"\n                         autocomplete=\"tel\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"1.8\"\n                       style=\"width:16px;height:16px;position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;\">\n                    <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.1a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.56a16 16 0 0 0 6.29 6.29l1.62-1.62a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/>\n                  <\/svg>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Email -->\n            <div>\n              <label style=\"display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#64748b;margin-bottom:7px;\" for=\"vr-fe\">\n                Email Address <span style=\"color:#ef4444;\">*<\/span>\n              <\/label>\n              <div style=\"position:relative;\">\n                <input type=\"email\" id=\"vr-fe\"\n                       style=\"width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid #e2e8f0;background:#fff;font-size:14px;color:#1e293b;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;padding-left:38px;\"\n                       onfocus=\"this.style.borderColor='#1d4ed8';this.style.boxShadow='0 0 0 3px rgba(29,78,216,.1)'\" onblur=\"this.style.borderColor='#e2e8f0';this.style.boxShadow='none'\"                       placeholder=\"you@example.com\"\n                       autocomplete=\"email\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"1.8\"\n                     style=\"width:16px;height:16px;position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;\">\n                  <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/>\n                <\/svg>\n              <\/div>\n            <\/div>\n\n            <!-- Special Requests -->\n            <div>\n              <label style=\"display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#64748b;margin-bottom:7px;\" for=\"vr-fn2\">\n                Special Requests\n                <span style=\"text-transform:none;font-weight:600;color:#94a3b8;letter-spacing:0;margin-left:4px;\">(optional)<\/span>\n              <\/label>\n              <textarea id=\"vr-fn2\"\n                        style=\"width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid #e2e8f0;background:#fff;font-size:14px;color:#1e293b;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;resize:vertical;min-height:90px;\"\n                        onfocus=\"this.style.borderColor='#1d4ed8';this.style.boxShadow='0 0 0 3px rgba(29,78,216,.1)'\" onblur=\"this.style.borderColor='#e2e8f0';this.style.boxShadow='none'\"                        rows=\"3\"\n                        placeholder=\"Any allergies, special needs, preferred staff notes...\"><\/textarea>\n            <\/div>\n\n            \n          <\/div>\n        <\/div>\n\n        <div class=\"vr-action-bar\">\n          <button class=\"vr-btn-back\" style=\"padding:11px 20px;border-radius:10px;font-size:13px;font-weight:700;border:1.5px solid #e2e8f0;background:#fff;color:#475569;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" style=\"width:14px;height:14px;\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\n            Back\n          <\/button>\n          <button class=\"vr-btn-next\" style=\"padding:11px 24px;border-radius:10px;font-size:13px;font-weight:800;border:0;background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(29,78,216,.35);display:inline-flex;align-items:center;gap:6px;\">\n            Review Booking\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" style=\"width:14px;height:14px;\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n           STEP 4 \u2014 CONFIRM + SUCCESS\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n            <div id=\"vr-step-5\" class=\"vr-step-panel\" style=\"display:none;\">\n\n        <!-- Review form -->\n        <div id=\"vr-step-5-form\">\n          <div class=\"vr-step-inner\">\n            <h3 class=\"vr-text-lg vr-font-black vr-text-slate-900 vr-tracking-tight vr-mb-5\">Review &amp; Confirm<\/h3>\n            <!-- Summary card -->\n            <div class=\"vr-rounded-2xl vr-overflow-hidden vr-border vr-border-slate-200\" style=\"box-shadow:0 2px 16px rgba(15,23,42,.07);\">\n              <div class=\"vr-px-5 vr-py-3.5\" style=\"background:linear-gradient(135deg,#1e3a8a,#1d4ed8);\">\n                <div class=\"vr-text-sm vr-font-bold vr-text-white\">Booking Summary<\/div>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-3 vr-border-b vr-border-slate-100\">\n                <span class=\"vr-text-sm vr-text-slate-500\">Location<\/span>\n                <span class=\"vr-text-sm vr-font-semibold vr-text-slate-900 vr-text-right vr-max-w-52 vr-truncate\" id=\"vr-s-loc\">\u2014<\/span>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-3 vr-border-b vr-border-slate-100\">\n                <span class=\"vr-text-sm vr-text-slate-500\">Service<\/span>\n                <span class=\"vr-text-sm vr-font-semibold vr-text-slate-900 vr-text-right vr-max-w-52 vr-truncate\" id=\"vr-s-svc\">\u2014<\/span>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-3 vr-border-b vr-border-slate-100\">\n                <span class=\"vr-text-sm vr-text-slate-500\">Date<\/span>\n                <span class=\"vr-text-sm vr-font-semibold vr-text-slate-900 vr-text-right vr-max-w-52 vr-truncate\" id=\"vr-s-date\">\u2014<\/span>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-3 vr-border-b vr-border-slate-100\">\n                <span class=\"vr-text-sm vr-text-slate-500\">Time<\/span>\n                <span class=\"vr-text-sm vr-font-semibold vr-text-slate-900 vr-text-right vr-max-w-52 vr-truncate\" id=\"vr-s-time\">\u2014<\/span>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-3 vr-border-b vr-border-slate-100\">\n                <span class=\"vr-text-sm vr-text-slate-500\">Duration<\/span>\n                <span class=\"vr-text-sm vr-font-semibold vr-text-slate-900 vr-text-right vr-max-w-52 vr-truncate\" id=\"vr-s-dur\">\u2014<\/span>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-3 vr-border-b vr-border-slate-100\">\n                <span class=\"vr-text-sm vr-text-slate-500\">Staff<\/span>\n                <span class=\"vr-text-sm vr-font-semibold vr-text-slate-900 vr-text-right vr-max-w-52 vr-truncate\" id=\"vr-s-staff\">\u2014<\/span>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-3 vr-border-b vr-border-slate-100\">\n                <span class=\"vr-text-sm vr-text-slate-500\">Name<\/span>\n                <span class=\"vr-text-sm vr-font-semibold vr-text-slate-900 vr-text-right vr-max-w-52 vr-truncate\" id=\"vr-s-name\">\u2014<\/span>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-3 vr-border-b vr-border-slate-100\">\n                <span class=\"vr-text-sm vr-text-slate-500\">Email<\/span>\n                <span class=\"vr-text-sm vr-font-semibold vr-text-slate-900 vr-text-right vr-max-w-52 vr-truncate\" id=\"vr-s-email\">\u2014<\/span>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-3 vr-border-b vr-border-slate-100\">\n                <span class=\"vr-text-sm vr-text-slate-500\">Phone<\/span>\n                <span class=\"vr-text-sm vr-font-semibold vr-text-slate-900 vr-text-right vr-max-w-52 vr-truncate\" id=\"vr-s-phone\">\u2014<\/span>\n              <\/div>\n                            <div class=\"vr-flex vr-justify-between vr-items-center vr-px-5 vr-py-4\" style=\"background:linear-gradient(135deg,#eff6ff,#dbeafe);\">\n                <span class=\"vr-text-sm vr-font-black vr-text-blue-800\">Total Amount<\/span>\n                <span class=\"vr-text-xl vr-font-black vr-text-blue-700\" id=\"vr-s-price\">\u2014<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"vr-action-bar\">\n            <button class=\"vr-btn-back\" style=\"padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;border:2px solid #e2e8f0;background:#fff;color:#475569;cursor:pointer;font-family:'Inter',sans-serif;\">&larr; Back<\/button>\n            <button id=\"vr-confirm-btn\" class=\"vr-btn-confirm\"\n                    style=\"padding:10px 28px;border-radius:10px;font-size:13px;font-weight:800;border:0;background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;cursor:pointer;font-family:'Inter',sans-serif;box-shadow:0 4px 14px rgba(29,78,216,.4);display:inline-flex;align-items:center;gap:8px;\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" style=\"width:15px;height:15px;\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n              Confirm Booking\n            <\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Success screen -->\n        <div id=\"vr-step-5-ok\" style=\"display:none;\">\n          <div class=\"vr-text-center vr-px-8 vr-py-16\">\n            <div class=\"vr-w-20 vr-h-20 vr-rounded-full vr-flex vr-items-center vr-justify-center vr-mx-auto vr-mb-6\"\n                 style=\"background:linear-gradient(135deg,#1d4ed8,#2563eb);box-shadow:0 8px 32px rgba(29,78,216,.4);\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\" style=\"width:36px;height:36px;\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n            <\/div>\n            <h3 class=\"vr-text-2xl vr-font-black vr-text-slate-900 vr-mb-3\" id=\"vr-success-heading\">Booking Submitted!<\/h3>\n            <p class=\"vr-text-slate-500 vr-text-sm vr-max-w-sm vr-mx-auto vr-mb-7 vr-leading-relaxed\">Your booking is confirmed! We look forward to seeing you.<\/p>\n            <div class=\"vr-inline-block vr-px-8 vr-py-3 vr-rounded-2xl vr-mb-3 vr-font-mono vr-font-black vr-text-lg vr-tracking-widest\" style=\"background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1d4ed8;border:2px solid #bfdbfe;\" id=\"vr-booking-ref\">\u2014<\/div>\n            <p class=\"vr-text-xs vr-text-slate-400 vr-mb-5\">A confirmation email has been sent. Save your reference number.<\/p>\n            <div id=\"vr-success-actions\" style=\"display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px;\"><\/div>\n          <\/div>\n        <\/div>\n\n      <\/div><!-- \/step-4 -->\n\n\n    <\/div><!-- \/card -->\n  <\/div><!-- \/max-w -->\n<\/div><!-- \/root -->\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":"","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-137","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crazycafe.net\/demo\/wp-json\/wp\/v2\/pages\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crazycafe.net\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crazycafe.net\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crazycafe.net\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crazycafe.net\/demo\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":24,"href":"https:\/\/crazycafe.net\/demo\/wp-json\/wp\/v2\/pages\/137\/revisions"}],"predecessor-version":[{"id":466,"href":"https:\/\/crazycafe.net\/demo\/wp-json\/wp\/v2\/pages\/137\/revisions\/466"}],"wp:attachment":[{"href":"https:\/\/crazycafe.net\/demo\/wp-json\/wp\/v2\/media?parent=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}