{"id":2769,"date":"2026-07-21T22:12:50","date_gmt":"2026-07-21T20:12:50","guid":{"rendered":"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/"},"modified":"2026-07-21T22:12:50","modified_gmt":"2026-07-21T20:12:50","slug":"book-an-appointment","status":"publish","type":"page","link":"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/","title":{"rendered":"R\u00e9servez un rendez-vous"},"content":{"rendered":"<div id=\"bookwellab_frontend_app\" v-cloak\n    class=\"bw-app-wrapper alignwide alignfull bw-ltr\"\n    dir=\"ltr\"\n    lang=\"fr-FR\"\n    data-staff-id=\"\"\n    data-service-id=\"\"\n    >\n\n    <!-- Vue App Mount Point -->\n    <div class=\"bw-frontend-wrapper bw-force-fullwidth alignwide alignfull\">\n        <!-- Steps Component will be rendered here -->\n        <booking-wizard><\/booking-wizard>\n    <\/div>\n<\/div>\n\n<script type=\"text\/x-template\" id=\"booking-wizard-template\">\n    <div class=\"bw-booking-root\" :class=\"{ 'bw-booking-root--catalog': isCatalogMode }\">\n\n        <!-- Full Page Service List -->\n        <div v-if=\"isCatalogMode\" class=\"bw-fp-catalog\" v-show=\"!catalogDialogVisible && !isPopupHost\">\n            <div v-if=\"!hideCategories\" class=\"bw-category-filter bw-bp-category-filter bw-fp-catalog-filters\">\n                <button type=\"button\" :class=\"{ active: activeCategory === 'all' }\" @click=\"setCatalogCategory('all')\">\n                    {{ labels.all_categories }}\n                <\/button>\n                <button\n                    type=\"button\"\n                    v-for=\"cat in categories\"\n                    :key=\"cat.bw_category_id\"\n                    :class=\"{ active: activeCategory === cat.bw_category_id }\"\n                    @click=\"setCatalogCategory(cat.bw_category_id)\">\n                    {{ cat.bw_category_name }}\n                <\/button>\n            <\/div>\n\n            <div class=\"bw-fp-catalog-grid\" v-if=\"!loadingServices && paginatedCatalogServices.length\">\n                <article\n                    v-for=\"service in paginatedCatalogServices\"\n                    :key=\"service.bw_service_id\"\n                    class=\"bw-fp-service-card\"\n                    @click=\"openCatalogBooking(service)\">\n                    <div class=\"bw-fp-service-media\">\n                        <img\n                            :src=\"getServiceImageSrc(service)\"\n                            :alt=\"service.bw_service_name\"\n                            class=\"bw-fp-service-img\"\n                            :class=\"{ 'bw-fp-service-img--placeholder': isServicePlaceholderImage(service) }\">\n                    <\/div>\n                    <div class=\"bw-fp-service-body\">\n                        <h3 class=\"bw-fp-service-title\">{{ service.bw_service_name }}<\/h3>\n                        <div\n                            class=\"bw-fp-service-meta\"\n                            :class=\"{ 'bw-fp-service-meta--bordered': !hideDescription && !!service.bw_service_description }\">\n                            <span class=\"bw-fp-service-duration\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" fill=\"currentColor\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                                    <path d=\"M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z\"\/>\n                                    <path d=\"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0\"\/>\n                                <\/svg>\n                                {{ formatDuration(service.bw_service_duration_val, service.bw_service_duration_unit) }}\n                            <\/span>\n                            <span class=\"bw-fp-service-price\">{{ displayPrice(service.bw_service_price) }}<\/span>\n                        <\/div>\n                        <p\n                            class=\"bw-fp-service-description\"\n                            v-if=\"!hideDescription && service.bw_service_description\">{{ truncateCatalogDescription(service.bw_service_description) }}<\/p>\n                    <\/div>\n                    <button\n                        type=\"button\"\n                        class=\"bw-fp-service-book-btn\"\n                        @click.stop=\"openCatalogBooking(service)\">\n                        {{ labels.book_appointment || 'Book Appointment' }}\n                    <\/button>\n                <\/article>\n            <\/div>\n\n            <div v-if=\"loadingServices\" class=\"bw-loading-slots-container\">\n                <div class=\"bw-3dot-loader\">\n                    <div><\/div><div><\/div><div><\/div>\n                <\/div>\n            <\/div>\n\n            <div v-else-if=\"!paginatedCatalogServices.length\" class=\"bw-fp-catalog-empty\">\n                {{ labels.no_services }}\n            <\/div>\n\n            <div class=\"bw-fp-catalog-pagination\" v-if=\"catalogTotalPages > 1\">\n                <el-pagination\n                    background\n                    layout=\"prev, pager, next\"\n                    :total=\"catalogTotalItems\"\n                    :page-size=\"catalogPageSize\"\n                    :current-page=\"catalogPage\"\n                    @current-change=\"onCatalogPageChange\"\n                ><\/el-pagination>\n            <\/div>\n        <\/div>\n\n        <!-- Booking wizard (inline or popup) -->\n        <div\n            v-show=\"!isCatalogMode || catalogDialogVisible || forceButtonPopup\"\n            :class=\"{ 'bw-fp-booking-modal': showBookingPopup }\">\n            <div\n                v-if=\"showBookingPopup\"\n                class=\"bw-fp-booking-modal__backdrop\"><\/div>\n            <div :class=\"{ 'bw-fp-booking-modal__panel': showBookingPopup }\">\n                <button\n                    v-if=\"showBookingPopup\"\n                    type=\"button\"\n                    class=\"bw-fp-booking-modal__close\"\n                    @click=\"closeCatalogBooking\"\n                    :aria-label=\"labels.back || 'Close'\">\u00d7<\/button>\n                <div class=\"bw-wizard-container\" :class=\"{ 'bw-sidebar-collapsed': isSidebarCollapsed }\">\n        <!-- Sidebar Progress -->\n        <div class=\"bw-wizard-sidebar\" :class=\"{ 'bw-sidebar-locked': isBookingConfirmed }\">\n    <div class=\"bw-sidebar-steps\">\n        <div class=\"bw-sidebar-step\" :class=\"{ active: isStep('service'), completed: isStepCompleted('service'), locked: isBookingConfirmed }\"\n            v-if=\"showServiceStep\" @click=\"!isBookingConfirmed && goToStep('service')\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                    <path d=\"M4 4.75A1.75 1.75 0 0 1 5.75 3h12.5A1.75 1.75 0 0 1 20 4.75v3.5A1.75 1.75 0 0 1 18.25 10H5.75A1.75 1.75 0 0 1 4 8.25v-3.5Z\" stroke=\"currentColor\" stroke-width=\"1.7\"\/>\n                    <path d=\"M4 14.75A1.75 1.75 0 0 1 5.75 13h12.5A1.75 1.75 0 0 1 20 14.75v3.5A1.75 1.75 0 0 1 18.25 20H5.75A1.75 1.75 0 0 1 4 18.25v-3.5Z\" stroke=\"currentColor\" stroke-width=\"1.7\"\/>\n                    <circle cx=\"8\" cy=\"6.5\" r=\"1\" fill=\"currentColor\"\/>\n                    <circle cx=\"8\" cy=\"16.5\" r=\"1\" fill=\"currentColor\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_service }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ bookingData.service_id ? getServiceName(bookingData.service_id) :\n                    labels.select_service }}<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bw-sidebar-step\" :class=\"{ active: isStep('extras'), completed: isStepCompleted('extras'), locked: isBookingConfirmed }\"\n            v-if=\"hasExtrasForService(bookingData.service_id)\" @click=\"!isBookingConfirmed && bookingData.service_id ? goToStep('extras') : null\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                    <path d=\"M3.5 5.5h2.2l1.1 9.2a1.6 1.6 0 0 0 1.6 1.4h8.4a1.6 1.6 0 0 0 1.6-1.3l1.1-6.3H7\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <circle cx=\"9.5\" cy=\"19\" r=\"1.35\" fill=\"currentColor\"\/>\n                    <circle cx=\"16.5\" cy=\"19\" r=\"1.35\" fill=\"currentColor\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_extras || labels.extras_label }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ bookingData.extras && bookingData.extras.length ? (labels.extras_selected || labels.extras_available) : labels.extras_none_selected }}<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bw-sidebar-step\" :class=\"{ active: isStep('staff'), completed: isStepCompleted('staff'), locked: isBookingConfirmed }\"\n            v-if=\"!hasPresetStaff && !hideStaffStep\" @click=\"!isBookingConfirmed && bookingData.service_id ? goToStep('staff') : null\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                    <circle cx=\"9\" cy=\"8\" r=\"2.6\" stroke=\"currentColor\" stroke-width=\"1.7\"\/>\n                    <circle cx=\"16.2\" cy=\"8.8\" r=\"2.2\" stroke=\"currentColor\" stroke-width=\"1.7\"\/>\n                    <path d=\"M3.8 18.5c.6-2.6 2.7-4.1 5.2-4.1s4.6 1.5 5.2 4.1\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/>\n                    <path d=\"M13.8 14.7c.7-.4 1.6-.6 2.5-.6 2.1 0 3.8 1.2 4.3 3.2\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_staff }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ bookingData.staff_id ? getStaffName(bookingData.staff_id) :\n                    labels.any_staff }}<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bw-sidebar-step\" :class=\"{ active: isStep('datetime'), completed: isStepCompleted('datetime'), locked: isBookingConfirmed }\"\n            @click=\"!isBookingConfirmed && bookingData.staff_id ? goToStep('datetime') : null\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                    <rect x=\"3.5\" y=\"5\" width=\"17\" height=\"15\" rx=\"2.2\" stroke=\"currentColor\" stroke-width=\"1.7\"\/>\n                    <path d=\"M8 3.5v3M16 3.5v3M3.5 10h17\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/>\n                    <circle cx=\"8.5\" cy=\"14\" r=\"1\" fill=\"currentColor\"\/>\n                    <circle cx=\"12\" cy=\"14\" r=\"1\" fill=\"currentColor\"\/>\n                    <circle cx=\"15.5\" cy=\"14\" r=\"1\" fill=\"currentColor\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_date_time }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ bookingData.date ? formatDate(bookingData.date) + ' ' +\n                    (bookingData.time ? formatTime(bookingData.time) : '') : labels.select_date }}<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bw-sidebar-step\" :class=\"{ active: isStep('details'), completed: isStepCompleted('details'), locked: isBookingConfirmed }\"\n            @click=\"!isBookingConfirmed && bookingData.time ? goToStep('details') : null\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                    <path d=\"M7 3.5h7.2L19 8.3V19.2A1.8 1.8 0 0 1 17.2 21H7A1.8 1.8 0 0 1 5.2 19.2V5.3A1.8 1.8 0 0 1 7 3.5Z\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"\/>\n                    <path d=\"M14 3.7V8.2h4.6\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"\/>\n                    <path d=\"M9 12h6M9 15.5h6\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_details }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ bookingData.customer.first_name ? bookingData.customer.first_name + ' '\n                    + bookingData.customer.last_name : labels.your_info }}<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bw-sidebar-step\" :class=\"{ active: isStep('summary') || isBookingConfirmed, completed: isStepCompleted('summary'), locked: isBookingConfirmed }\"\n            @click=\"!isBookingConfirmed && isStep('summary') ? goToStep('summary') : null\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                    <path d=\"M8.2 4.2h7.6A1.8 1.8 0 0 1 17.6 6v1.4H6.4V6a1.8 1.8 0 0 1 1.8-1.8Z\" stroke=\"currentColor\" stroke-width=\"1.7\"\/>\n                    <path d=\"M6.4 7.4h11.2v11.4A1.8 1.8 0 0 1 15.8 20.6H8.2A1.8 1.8 0 0 1 6.4 18.8V7.4Z\" stroke=\"currentColor\" stroke-width=\"1.7\"\/>\n                    <path d=\"M9.4 13.2l1.8 1.8 3.6-3.8\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_summary }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ labels.checkout }}<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n    <\/div>\n\n\n<div class=\"bw-wizard-content\">\n    <!-- Content Header -->\n    <div class=\"bw-wizard-content-header\" v-if=\"isContentStep\">\n        <div class=\"bw-content-back-spacer\"><\/div>\n        <h2 class=\"bw-content-title\">\n            <span>{{ currentStepTitle }}<\/span>\n        <\/h2>\n    <\/div>\n\n    <div class=\"bw-wizard-content-body\">\n        <div v-if=\"globalError\" class=\"bw-error-msg bw-error-msg--inline\" role=\"alert\" aria-live=\"assertive\">\n            <span class=\"bw-error-msg-icon\">!<\/span>\n            <span class=\"bw-error-msg-text\">{{ globalError }}<\/span>\n            <button type=\"button\" class=\"bw-error-msg-close\" @click=\"dismissGlobalError\"\n                aria-label=\"Fermer le message d&#039;erreur\">\u00d7<\/button>\n        <\/div>\n\n    <!-- Step 1: Services -->\n    <div v-if=\"isStep('service')\" class=\"bw-step-wrapper bw-step-services bw-bp-design\">\n        <div v-if=\"!hideCategories\" class=\"bw-category-filter bw-bp-category-filter\">\n            <button :class=\"{ active: activeCategory === 'all' }\" @click=\"activeCategory = 'all'\">\n                {{ labels.all_categories }}\n                <svg v-if=\"activeCategory === 'all'\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\"\n                    fill=\"currentColor\" class=\"bi bi-check-circle-fill\" viewBox=\"0 0 16 16\"\n                    style=\"margin-left: 4px; vertical-align: text-bottom;\">\n                    <path\n                        d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\" \/>\n                <\/svg>\n            <\/button>\n            <button v-for=\"cat in categories\" :key=\"cat.bw_category_id\"\n                :class=\"{ active: activeCategory === cat.bw_category_id }\" @click=\"activeCategory = cat.bw_category_id\">\n                {{ cat.bw_category_name }}\n                <svg v-if=\"activeCategory === cat.bw_category_id\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\"\n                    height=\"16\" fill=\"currentColor\" class=\"bi bi-check-circle-fill\" viewBox=\"0 0 16 16\"\n                    style=\"margin-left: 4px; vertical-align: text-bottom;\">\n                    <path\n                        d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\" \/>\n                <\/svg>\n            <\/button>\n        <\/div>\n\n        <h3 class=\"bw-bp-section-title\" style=\"margin-top: 30px;\">{{ labels.select_service }}<\/h3>\n        <div class=\"bw-bp-service-list\">\n            <div v-for=\"service in computedServices\" :key=\"service.bw_service_id\" class=\"bw-bp-service-card\"\n                :class=\"{ 'selected': bookingData.service_id === service.bw_service_id }\"\n                @click=\"selectService(service)\">\n                <div class=\"bw-bp-service-main\">\n                    <div class=\"bw-bp-service-icon\">\n                        <img\n                            :src=\"getServiceImageSrc(service)\"\n                            :alt=\"service.bw_service_name\"\n                            class=\"bw-bp-service-icon-img\"\n                            :class=\"{ 'bw-bp-service-icon-img--placeholder': isServicePlaceholderImage(service) }\">\n                    <\/div>\n                    <div class=\"bw-bp-service-info\">\n                        <h4 class=\"bw-bp-service-name\">{{ service.bw_service_name }}<\/h4>\n                        <div class=\"bw-bp-service-meta\">\n                            <span class=\"bw-bp-meta-duration\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" fill=\"currentColor\"\n                                    class=\"bi bi-clock bw-bp-meta-duration-icon\" viewBox=\"0 0 16 16\">\n                                    <path\n                                        d=\"M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z\" \/>\n                                    <path d=\"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0\" \/>\n                                <\/svg>\n                                {{ formatDuration(service.bw_service_duration_val, service.bw_service_duration_unit) }}\n                            <\/span>\n                            <span class=\"bw-bp-price-badge\">{{ displayPrice(service.bw_service_price) }}<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <p class=\"bw-bp-service-description\" v-if=\"!hideDescription && service.bw_service_description\">{{ service.bw_service_description }}<\/p>\n            <\/div>\n            <div v-if=\"loadingServices\" class=\"bw-loading-slots-container\">\n                <div class=\"bw-3dot-loader\">\n                    <div><\/div><div><\/div><div><\/div>\n                <\/div>\n            <\/div>\n            <div v-else-if=\"computedServices.length === 0\" style=\"text-align:center; width:100%; padding: 20px; color: var(--bw-subtitle-color); font-size: var(--bw-subtitle-size);\">\n                {{ labels.no_services }}\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <div v-if=\"isStep('service')\" class=\"bw-bp-nav-footer right-only\">\n        <button class=\"bw-btn-continue\" @click=\"nextStep\">{{ labels.next }}<\/button>\n    <\/div>\n\n    <div v-if=\"isStep('extras')\" class=\"bw-step-wrapper bw-step-extras bw-bp-design\">\n            <\/div>\n\n    <div v-if=\"isStep('extras')\" class=\"bw-nav-buttons bw-bp-nav-footer\">\n        <div class=\"bw-nav-footer-actions\">\n            <button class=\"bw-btn-back\" @click=\"prevStep\">{{ labels.back }}<\/button>\n            <button class=\"bw-btn-continue\" @click=\"nextStep\">{{ labels.next }}<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Step 2: Staff -->\n    <div v-if=\"isStep('staff') && !hideStaffStep\" class=\"bw-step-wrapper bw-step-staff bw-bp-design\">\n        <div v-if=\"loadingStaff\" class=\"bw-loading-slots-container\">\n            <div class=\"bw-3dot-loader\">\n                <div><\/div><div><\/div><div><\/div>\n            <\/div>\n        <\/div>\n        <div v-else class=\"bw-bp-staff-grid\">\n            <div v-for=\"s in staff\" :key=\"s.bw_staff_id\" class=\"bw-bp-staff-card\"\n                :class=\"{\n                    'selected': bookingData.staff_id === s.bw_staff_id,\n                    'has-designation': showStaffDesignation && !!s.bw_staff_position\n                }\"\n                @click=\"selectStaff(s)\">\n                <div class=\"bw-bp-staff-media\">\n                    <img\n                        v-if=\"!isStaffPlaceholderImage(s)\"\n                        :src=\"getStaffImageSrc(s)\"\n                        :alt=\"s.bw_staff_name\"\n                        class=\"bw-bp-staff-img\">\n                    <div v-else class=\"bw-bp-staff-media-placeholder\" aria-hidden=\"true\">\n                        <svg class=\"bw-bp-staff-media-placeholder__avatar\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 200 200\" role=\"img\">\n                            <rect width=\"200\" height=\"200\" fill=\"#E8EAED\"\/>\n                            <circle cx=\"100\" cy=\"76\" r=\"36\" fill=\"#8E99A8\"\/>\n                            <ellipse cx=\"100\" cy=\"188\" rx=\"72\" ry=\"58\" fill=\"#8E99A8\"\/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                <h4 class=\"bw-bp-staff-name\">{{ s.bw_staff_name }}<\/h4>\n                <p\n                    class=\"bw-bp-staff-designation\"\n                    v-if=\"showStaffDesignation && s.bw_staff_position\">{{ s.bw_staff_position }}<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div v-if=\"isStep('staff') && !hideStaffStep\" class=\"bw-nav-buttons bw-bp-nav-footer\">\n        <div class=\"bw-nav-footer-actions\">\n        <button class=\"bw-btn-back\" @click=\"prevStep\">{{ labels.back }}<\/button>\n        <button class=\"bw-btn-continue\" @click=\"nextStep\">{{ labels.next }}<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Step 3: Date & Time -->\n    <div v-if=\"isStep('datetime')\" class=\"bw-step-wrapper bw-step-datetime\">\n        <div class=\"bw-datetime-container\">\n            <div class=\"bw-calendar-wrapper\">\n                <div class=\"bw-custom-calendar\">\n                    <div class=\"bw-calendar-header\">\n                        <span class=\"bw-cal-nav\" :class=\"{ 'bw-cal-nav-disabled': !canGoToPreviousMonth || loadingMonthAvailability }\" @click=\"prevMonth\">&lt;<\/span>\n                        <span class=\"bw-cal-title\">{{ formatMonthYear }}<\/span>\n                        <span class=\"bw-cal-nav\" :class=\"{ 'bw-cal-nav-disabled': loadingMonthAvailability }\" @click=\"nextMonth\">&gt;<\/span>\n                    <\/div>\n                    <div class=\"bw-calendar-body\">\n                        <div v-if=\"loadingMonthAvailability\" class=\"bw-loading-calendar-container\">\n                            <div class=\"bw-3dot-loader\">\n                                <div><\/div><div><\/div><div><\/div>\n                            <\/div>\n                        <\/div>\n                        <template v-else>\n                            <div class=\"bw-cal-weekdays\">\n                                <span v-for=\"(label, idx) in calendarWeekdayLabels\" :key=\"'wd-' + idx\">{{ label }}<\/span>\n                            <\/div>\n                            <div class=\"bw-cal-days\">\n                                <div v-for=\"(dayObj, index) in calendarDays\" :key=\"index\" class=\"bw-cal-day\" :class=\"{\n                                            'bw-cal-disabled': dayObj.disabled || isDateDisabled(dayObj),\n                                            'bw-cal-outside': !dayObj.isCurrentMonth,\n                                            'bw-cal-selected': (bookingData.date === `${dayObj.date.getFullYear()}-${String(dayObj.date.getMonth() + 1).padStart(2,'0')}-${String(dayObj.date.getDate()).padStart(2,'0')}`)\n                                        }\" @click=\"selectCustomDate(dayObj)\">\n                                    {{ dayObj.dayNo }}\n                                <\/div>\n                            <\/div>\n                        <\/template>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"bw-slots-wrapper\">\n                <h3 class=\"bw-slots-title\">{{ labels.time_slot }}<\/h3>\n                <div class=\"bw-slots-inner\">\n                    <div v-if=\"loadingSlots\" class=\"bw-loading-slots-container\">\n                        <div class=\"bw-3dot-loader\">\n                            <div><\/div><div><\/div><div><\/div>\n                        <\/div>\n                    <\/div>\n                    <div v-else-if=\"slots.length === 0 && selectedDate\" style=\"padding: 10px;\">{{ labels.no_slots }}\n                    <\/div>\n                    <div v-else-if=\"!selectedDate\" class=\"bw-date-select-first\">{{ labels.please_select_date_first }}\n                    <\/div>\n                    <div v-else>\n                        <div v-if=\"morningSlots.length > 0\" class=\"bw-slot-group\">\n                            <h4>{{ labels.morning }}<\/h4>\n                            <div class=\"bw-slot-list\">\n                                <button v-for=\"slot in morningSlots\" :key=\"slot\" class=\"bw-slot-btn\"\n                                    :class=\"{ 'selected': bookingData.time === slot }\" @click=\"selectSlot(slot)\">\n                                    {{ formatSlotRange(slot) }}\n                                <\/button>\n                            <\/div>\n                        <\/div>\n\n                        <div v-if=\"afternoonSlots.length > 0\" class=\"bw-slot-group mt-15\">\n                            <h4>{{ labels.afternoon }}<\/h4>\n                            <div class=\"bw-slot-list\">\n                                <button v-for=\"slot in afternoonSlots\" :key=\"slot\" class=\"bw-slot-btn\"\n                                    :class=\"{ 'selected': bookingData.time === slot }\" @click=\"selectSlot(slot)\">\n                                    {{ formatSlotRange(slot) }}\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div v-if=\"isStep('datetime')\" class=\"bw-nav-buttons bw-bp-nav-footer\">\n        <div class=\"bw-nav-footer-actions\">\n        <button class=\"bw-btn-back\" @click=\"prevStep\">{{ labels.back }}<\/button>\n        <button class=\"bw-btn-continue\" @click=\"nextStep\">{{ labels.next }}<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Step 4: Customer Details -->\n    <div v-show=\"isStep('details')\" class=\"bw-step-wrapper bw-step-details\">\n        <el-form label-position=\"top\">\n            <template v-for=\"field in visibleDetailFields\" :key=\"field.field_name\">\n                <el-form-item\n                    v-if=\"field.field_name === 'phone'\"\n                    :label=\"field.label\"\n                    :required=\"field.is_required\"\n                    :class=\"[\n                        { 'bw-input-error': errors.phone },\n                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'\n                    ]\"\n                >\n                <div class=\"bw-phone-container\">\n                    <input type=\"tel\" id=\"bw-phone-input\" :value=\"bookingData.customer.phone\"\n                        inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"tel-national\">\n                <\/div>\n            <\/el-form-item>\n\n                <el-form-item\n                    v-else-if=\"field.field_name === 'first_name'\"\n                    :label=\"field.label\"\n                    :required=\"field.is_required\"\n                    :class=\"[\n                        { 'bw-input-error': errors.first_name },\n                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'\n                    ]\"\n                >\n                    <el-input\n                        v-model=\"bookingData.customer.first_name\"\n                        :placeholder=\"field.placeholder\"\n                        @input=\"errors.first_name = false\"\n                    ><\/el-input>\n                <\/el-form-item>\n\n                <el-form-item\n                    v-else-if=\"field.field_name === 'last_name'\"\n                    :label=\"field.label\"\n                    :required=\"field.is_required\"\n                    :class=\"[\n                        { 'bw-input-error': errors.last_name },\n                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'\n                    ]\"\n                >\n                    <el-input\n                        v-model=\"bookingData.customer.last_name\"\n                        :placeholder=\"field.placeholder\"\n                        @input=\"errors.last_name = false\"\n                    ><\/el-input>\n            <\/el-form-item>\n\n                <el-form-item\n                    v-else-if=\"field.field_name === 'email'\"\n                    :label=\"field.label\"\n                    :required=\"field.is_required\"\n                    :class=\"[\n                        { 'bw-input-error': errors.email },\n                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'\n                    ]\"\n                >\n                    <el-input\n                        v-model=\"bookingData.customer.email\"\n                        :placeholder=\"field.placeholder\"\n                        @input=\"errors.email = false\"\n                    ><\/el-input>\n            <\/el-form-item>\n\n                <el-form-item\n                    v-else-if=\"field.field_name === 'note'\"\n                    :label=\"field.label\"\n                    :required=\"field.is_required\"\n                    :class=\"[\n                        { 'bw-input-error': errors.note },\n                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'\n                    ]\"\n                >\n                    <el-input\n                        type=\"textarea\"\n                        v-model=\"bookingData.customer.note\"\n                        :placeholder=\"field.placeholder\"\n                        @input=\"errors.note = false\"\n                    ><\/el-input>\n            <\/el-form-item>\n\n                <el-form-item\n                    v-else-if=\"field.field_name === 'terms_and_conditions'\"\n                    class=\"bw-terms-agree-item\"\n                    :class=\"[\n                        { 'bw-input-error': errors.terms_accepted },\n                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'\n                    ]\"\n                >\n                    <el-checkbox v-model=\"bookingData.terms_accepted\" @change=\"errors.terms_accepted = false\">\n                        <span v-html=\"field.label\"><\/span>\n                    <\/el-checkbox>\n            <\/el-form-item>\n\n                <template v-else>\n                                    <\/template>\n            <\/template>\n        <\/el-form>\n    <\/div>\n\n    <div v-show=\"isStep('details')\" class=\"bw-nav-buttons bw-bp-nav-footer\">\n        <div class=\"bw-nav-footer-actions\">\n        <button class=\"bw-btn-back\" @click=\"prevStep\"> {{ labels.back }}<\/button>\n        <button class=\"bw-btn-continue\" @click=\"nextStep\">{{ labels.next }}<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Step 5: Summary -->\n    <div v-show=\"isStep('summary')\" class=\"bw-step-wrapper bw-step-summary-redesign\">\n        <div class=\"bw-summary-split\">\n            <!-- Left: Details Card -->\n            <div class=\"bw-summary-details-column\">\n                <div class=\"bw-summary-card-v2\">\n                    <div class=\"bw-summary-item-v2\" v-if=\"!sc_service_id\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"25\" viewBox=\"0 0 20 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16.8817 4.79915H14.4539C14.4539 2.1455 12.3084 0 9.65476 0C7.00112 0 4.85561 2.1455 4.85561 4.79915H2.42781C1.12921 4.79915 0 5.8719 0 7.22696V21.6809C0 22.9795 1.12921 24.0522 2.42781 24.0522H16.8817C18.1803 24.0522 19.3095 22.9795 19.3095 21.6809V7.22696C19.3095 5.8719 18.1803 4.79915 16.8817 4.79915ZM9.65476 2.37135C10.9534 2.37135 12.0826 3.50056 12.0826 4.79915H7.22696C7.22696 3.50056 8.35617 2.37135 9.65476 2.37135ZM16.8817 21.6809H2.42781V7.22696H4.85561V9.5983C4.85561 10.2758 5.36376 10.8404 6.04129 10.8404C6.71881 10.8404 7.22696 10.2758 7.22696 9.5983V7.22696H12.0826V9.5983C12.0826 10.2758 12.5907 10.8404 13.2682 10.8404C13.9458 10.8404 14.4539 10.2758 14.4539 9.5983V7.22696H16.8817V21.6809Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.service_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ getServiceName(bookingData.service_id) }}<\/div>\n                            <div class=\"bw-summary-item-subtext\" v-if=\"bookingData.service_id\">{{ getServiceDuration(bookingData.service_id) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\" v-if=\"!hideStaffStep\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M9.6378 2.42354C10.9341 2.42354 12.0613 3.49441 12.0613 4.84708C12.0613 6.14339 10.9341 7.21426 9.6378 7.21426C8.34148 7.21426 7.21426 6.14339 7.21426 4.84708C7.21426 3.49441 8.34148 2.42354 9.6378 2.42354ZM9.6378 14.4285C12.9068 14.4285 16.6266 16.0066 16.8521 16.8521H2.42354C2.70535 16.0066 6.4252 14.4285 9.6378 14.4285ZM9.6378 0C6.98881 0 4.84708 2.19809 4.84708 4.84708C4.84708 7.49606 6.98881 9.6378 9.6378 9.6378C12.2868 9.6378 14.4285 7.49606 14.4285 4.84708C14.4285 2.19809 12.2868 0 9.6378 0ZM9.6378 12.0613C6.4252 12.0613 0 13.6395 0 16.8521V19.2756H19.2756V16.8521C19.2756 13.6395 12.8504 12.0613 9.6378 12.0613Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.staff_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ getStaffName(bookingData.staff_id) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\" v-if=\"selectedExtrasSummary.length\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M10 0L12.2451 7.75486H20L13.8775 12.5403L16.1225 20.2951L10 15.5097L3.87745 20.2951L6.12245 12.5403L0 7.75486H7.7549L10 0Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.extras_label }}<\/div>\n                            <div v-for=\"extra in selectedExtrasSummary\" :key=\"extra.extra_id\" class=\"bw-summary-extra-line\">\n                                <span class=\"bw-summary-extra-name\">{{ extra.name }} &times; {{ extra.quantity }}<\/span>\n                                <span class=\"bw-summary-extra-price\">{{ displayPrice(extra.line_total) }}<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"22\" viewBox=\"0 0 20 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M17.2181 1.92806H16.2316V0H14.3484V1.92806H4.7529V0H2.86968V1.92806H1.88323C0.851935 1.92806 0 2.78 0 3.85613V19.1461C0 20.1774 0.851935 21.0742 1.88323 21.0742H17.2181C18.2494 21.0742 19.1013 20.1774 19.1013 19.1461V3.85613C19.1013 2.78 18.2494 1.92806 17.2181 1.92806ZM17.2181 19.1461H1.88323V8.60903H17.2181V19.1461ZM17.2181 6.72581H1.88323V3.85613H17.2181V6.72581Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.sidebar_date_time || 'Schedule' }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ formatDate(bookingData.date) }}<\/div>\n                            <div class=\"bw-summary-item-subtext\">{{ formatTime(bookingData.time) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\" v-if=\"hasCustomerDisplayName\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M9.6378 0C4.29855 0 0 4.29855 0 9.6378C0 14.977 4.29855 19.2756 9.6378 19.2756C14.977 19.2756 19.2756 14.977 19.2756 9.6378C19.2756 4.29855 14.977 0 9.6378 0ZM5.15826 15.9272C6.4252 15.0223 7.96362 14.4793 9.6378 14.4793C11.312 14.4793 12.8504 15.0223 14.1173 15.9272C12.8504 16.8322 11.312 17.3752 9.6378 17.3752C7.96362 17.3752 6.4252 16.8322 5.15826 15.9272ZM15.5653 14.5698C13.9363 13.3029 11.8549 12.5337 9.6378 12.5337C7.42065 12.5337 5.33925 13.3029 3.71033 14.5698C2.57913 13.2576 1.90041 11.5382 1.90041 9.6378C1.90041 5.3845 5.3845 1.90041 9.6378 1.90041C13.8911 1.90041 17.3752 5.3845 17.3752 9.6378C17.3752 11.5382 16.6965 13.2576 15.5653 14.5698ZM9.6378 3.84607C7.78263 3.84607 6.24421 5.33925 6.24421 7.23966C6.24421 9.09482 7.78263 10.588 9.6378 10.588C11.493 10.588 13.0314 9.09482 13.0314 7.23966C13.0314 5.33925 11.493 3.84607 9.6378 3.84607ZM9.6378 8.68759C8.82333 8.68759 8.18986 8.00887 8.18986 7.23966C8.18986 6.4252 8.82333 5.79173 9.6378 5.79173C10.4523 5.79173 11.0857 6.4252 11.0857 7.23966C11.0857 8.00887 10.4523 8.68759 9.6378 8.68759Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.customer_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ bookingData.customer.first_name }} {{ bookingData.customer.last_name }}<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Right: Payment & Total -->\n            <div class=\"bw-summary-payment-column\">\n                <div class=\"bw-payment-gateways-v2\" v-if=\"showPaymentOptions\">\n                    <h4 class=\"bw-payment-title-v2\">{{ labels.payment_method }}<\/h4>\n                    <div class=\"bw-payment-methods-grid\">\n                        <div v-for=\"option in paymentOptions\" :key=\"option.value\" \n                            class=\"bw-payment-method-card\"\n                            :class=\"{ 'selected': bookingData.payment_gateway === option.value }\"\n                            @click=\"bookingData.payment_gateway = option.value\">\n                            <div class=\"bw-payment-method-label\">{{ option.label }}<\/div>\n                            <div class=\"bw-payment-method-radio\">\n                                <div class=\"bw-radio-outer\">\n                                    <div class=\"bw-radio-inner\" v-if=\"bookingData.payment_gateway === option.value\"><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"bw-summary-total-section\">\n                    <div class=\"bw-total-label-row\">\n                        <span class=\"bw-total-text\">{{ labels.total_label }}<\/span>\n                        <span class=\"bw-total-amount\">{{ displayPrice(bookingTotalPrice) }}<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div v-if=\"isStep('summary')\" class=\"bw-nav-buttons bw-bp-nav-footer\">\n        <div class=\"bw-nav-footer-actions\">\n        <button class=\"bw-btn-back\" @click=\"prevStep\"> {{ labels.back }}<\/button>\n            <button v-if=\"!isPayPalSelected\" class=\"bw-btn-continue bw-footer-primary-action\" :class=\"{'is-loading': submitting}\" :disabled=\"submitting\" @click=\"submitBooking\">\n            <span v-if=\"!submitting\">{{ labels.confirm_booking }}<\/span>\n            <span v-else class=\"bw-dots-loader\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n            <\/span>\n        <\/button>\n            <div v-else class=\"bw-paypal-button-wrap bw-footer-primary-action\">\n                <div v-if=\"paypalButtonLoading\" class=\"bw-paypal-loading\">\n                    <span class=\"bw-dots-loader\"><span><\/span><span><\/span><span><\/span><\/span>\n                <\/div>\n                <div id=\"bw-paypal-button-container\" class=\"bw-paypal-button-container\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Step 6: Booking confirmed (same split layout as summary) -->\n    <div v-if=\"isStep('confirmed')\" class=\"bw-step-wrapper bw-step-success bw-step-summary-redesign\">\n        <div class=\"bw-summary-split\">\n            <div class=\"bw-summary-details-column\">\n                <div class=\"bw-summary-card-v2\">\n                    <div class=\"bw-summary-item-v2\" v-if=\"!sc_service_id\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"25\" viewBox=\"0 0 20 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M16.8817 4.79915H14.4539C14.4539 2.1455 12.3084 0 9.65476 0C7.00112 0 4.85561 2.1455 4.85561 4.79915H2.42781C1.12921 4.79915 0 5.8719 0 7.22696V21.6809C0 22.9795 1.12921 24.0522 2.42781 24.0522H16.8817C18.1803 24.0522 19.3095 22.9795 19.3095 21.6809V7.22696C19.3095 5.8719 18.1803 4.79915 16.8817 4.79915ZM9.65476 2.37135C10.9534 2.37135 12.0826 3.50056 12.0826 4.79915H7.22696C7.22696 3.50056 8.35617 2.37135 9.65476 2.37135ZM16.8817 21.6809H2.42781V7.22696H4.85561V9.5983C4.85561 10.2758 5.36376 10.8404 6.04129 10.8404C6.71881 10.8404 7.22696 10.2758 7.22696 9.5983V7.22696H12.0826V9.5983C12.0826 10.2758 12.5907 10.8404 13.2682 10.8404C13.9458 10.8404 14.4539 10.2758 14.4539 9.5983V7.22696H16.8817V21.6809Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.service_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ getServiceName(bookingData.service_id) }}<\/div>\n                            <div class=\"bw-summary-item-subtext\" v-if=\"bookingData.service_id\">{{ getServiceDuration(bookingData.service_id) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\" v-if=\"!hideStaffStep\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M9.6378 2.42354C10.9341 2.42354 12.0613 3.49441 12.0613 4.84708C12.0613 6.14339 10.9341 7.21426 9.6378 7.21426C8.34148 7.21426 7.21426 6.14339 7.21426 4.84708C7.21426 3.49441 8.34148 2.42354 9.6378 2.42354ZM9.6378 14.4285C12.9068 14.4285 16.6266 16.0066 16.8521 16.8521H2.42354C2.70535 16.0066 6.4252 14.4285 9.6378 14.4285ZM9.6378 0C6.98881 0 4.84708 2.19809 4.84708 4.84708C4.84708 7.49606 6.98881 9.6378 9.6378 9.6378C12.2868 9.6378 14.4285 7.49606 14.4285 4.84708C14.4285 2.19809 12.2868 0 9.6378 0ZM9.6378 12.0613C6.4252 12.0613 0 13.6395 0 16.8521V19.2756H19.2756V16.8521C19.2756 13.6395 12.8504 12.0613 9.6378 12.0613Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.staff_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ getStaffName(bookingData.staff_id) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\" v-if=\"selectedExtrasSummary.length\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M10 0L12.2451 7.75486H20L13.8775 12.5403L16.1225 20.2951L10 15.5097L3.87745 20.2951L6.12245 12.5403L0 7.75486H7.7549L10 0Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.extras_label }}<\/div>\n                            <div v-for=\"extra in selectedExtrasSummary\" :key=\"extra.extra_id\" class=\"bw-summary-extra-line\">\n                                <span class=\"bw-summary-extra-name\">{{ extra.name }} &times; {{ extra.quantity }}<\/span>\n                                <span class=\"bw-summary-extra-price\">{{ displayPrice(extra.line_total) }}<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"22\" viewBox=\"0 0 20 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M17.2181 1.92806H16.2316V0H14.3484V1.92806H4.7529V0H2.86968V1.92806H1.88323C0.851935 1.92806 0 2.78 0 3.85613V19.1461C0 20.1774 0.851935 21.0742 1.88323 21.0742H17.2181C18.2494 21.0742 19.1013 20.1774 19.1013 19.1461V3.85613C19.1013 2.78 18.2494 1.92806 17.2181 1.92806ZM17.2181 19.1461H1.88323V8.60903H17.2181V19.1461ZM17.2181 6.72581H1.88323V3.85613H17.2181V6.72581Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.sidebar_date_time || 'Schedule' }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ formatDate(bookingData.date) }}<\/div>\n                            <div class=\"bw-summary-item-subtext\">{{ formatTime(bookingData.time) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\" v-if=\"hasCustomerDisplayName\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M9.6378 0C4.29855 0 0 4.29855 0 9.6378C0 14.977 4.29855 19.2756 9.6378 19.2756C14.977 19.2756 19.2756 14.977 19.2756 9.6378C19.2756 4.29855 14.977 0 9.6378 0ZM5.15826 15.9272C6.4252 15.0223 7.96362 14.4793 9.6378 14.4793C11.312 14.4793 12.8504 15.0223 14.1173 15.9272C12.8504 16.8322 11.312 17.3752 9.6378 17.3752C7.96362 17.3752 6.4252 16.8322 5.15826 15.9272ZM15.5653 14.5698C13.9363 13.3029 11.8549 12.5337 9.6378 12.5337C7.42065 12.5337 5.33925 13.3029 3.71033 14.5698C2.57913 13.2576 1.90041 11.5382 1.90041 9.6378C1.90041 5.3845 5.3845 1.90041 9.6378 1.90041C13.8911 1.90041 17.3752 5.3845 17.3752 9.6378C17.3752 11.5382 16.6965 13.2576 15.5653 14.5698ZM9.6378 3.84607C7.78263 3.84607 6.24421 5.33925 6.24421 7.23966C6.24421 9.09482 7.78263 10.588 9.6378 10.588C11.493 10.588 13.0314 9.09482 13.0314 7.23966C13.0314 5.33925 11.493 3.84607 9.6378 3.84607ZM9.6378 8.68759C8.82333 8.68759 8.18986 8.00887 8.18986 7.23966C8.18986 6.4252 8.82333 5.79173 9.6378 5.79173C10.4523 5.79173 11.0857 6.4252 11.0857 7.23966C11.0857 8.00887 10.4523 8.68759 9.6378 8.68759Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.customer_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ bookingData.customer.first_name }} {{ bookingData.customer.last_name }}<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"bw-summary-payment-column bw-success-confirm-column\">\n                <div class=\"bw-success-confirm-panel\">\n                    <div class=\"bw-success-check\" aria-hidden=\"true\">\n                        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <circle cx=\"24\" cy=\"24\" r=\"24\" fill=\"currentColor\" opacity=\"0.12\"\/>\n                            <path d=\"M14 24.5L21 31.5L34 18.5\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"bw-success-confirm-title\">{{ labels.booking_confirmed_title }}<\/h3>\n                    <p class=\"bw-success-confirm-message\">{{ labels.booking_confirmed_msg }}<\/p>\n                    <!--\n                    <div class=\"bw-summary-total-section bw-success-total\">\n                        <div class=\"bw-total-label-row\">\n                            <span class=\"bw-total-text\">{{ labels.total_label }}<\/span>\n                            <span class=\"bw-total-amount\">{{ displayPrice(bookingTotalPrice) }}<\/span>\n                        <\/div>\n                    <\/div>\n                    --> \n                    <div class=\"bw-success-actions\">\n                        <button type=\"button\" class=\"bw-btn-continue\" @click=\"reset\">{{ labels.book_another }}<\/button>\n                    <\/div>\n                    <div class=\"bw-add-to-calendar\" v-if=\"canAddToCalendar\">\n                        <div class=\"bw-add-to-calendar__heading\">{{ labels.add_to_calendar }}<\/div>\n                        <div class=\"bw-add-to-calendar__buttons\">\n                            <a\n                                class=\"bw-add-to-calendar__btn\"\n                                :href=\"googleCalendarUrl\"\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                            >\n                                <span class=\"bw-add-to-calendar__icon\" aria-hidden=\"true\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.6444 8.17812C15.6444 7.64479 15.5556 7.02257 15.4667 6.57812H8V9.68924H12.2667C12.0889 10.667 11.5556 11.467 10.6667 12.0892V14.1337H13.3333C14.8444 12.7115 15.6444 10.5781 15.6444 8.17812Z\" fill=\"#4285F4\"\/>\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.99978 15.9996C10.1331 15.9996 11.9998 15.2885 13.3331 14.0441L10.6664 12.0885C9.95534 12.5329 9.06645 12.8885 7.99978 12.8885C5.95534 12.8885 4.17756 11.4663 3.55534 9.59961H0.888672V11.5552C2.13312 14.2218 4.88867 15.9996 7.99978 15.9996Z\" fill=\"#34A853\"\/>\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.55556 9.511C3.37778 9.06656 3.28889 8.53322 3.28889 7.99989C3.28889 7.46656 3.37778 6.93322 3.55556 6.48878V4.44434H0.888889C0.355556 5.511 0 6.75545 0 7.99989C0 9.24434 0.266667 10.4888 0.888889 11.5554L3.55556 9.511Z\" fill=\"#FBBC05\"\/>\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.99978 3.2C9.15534 3.2 10.222 3.64444 11.022 4.35556L13.3331 2.04444C11.9998 0.8 10.1331 0 7.99978 0C4.88867 0 2.13312 1.77778 0.888672 4.44444L3.55534 6.48889C4.17756 4.62222 5.95534 3.2 7.99978 3.2Z\" fill=\"#EA4335\"\/>\n                                    <\/svg>\n                                <\/span>\n                                {{ labels.google_calendar }}\n                            <\/a>\n                            <a\n                                class=\"bw-add-to-calendar__btn\"\n                                :href=\"outlookCalendarUrl\"\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                            >\n                                <span class=\"bw-add-to-calendar__icon\" aria-hidden=\"true\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path d=\"M7.57897 0H0V7.57897H7.57897V0Z\" fill=\"#F25022\"\/>\n                                        <path d=\"M7.57897 8.4209H0V15.9999H7.57897V8.4209Z\" fill=\"#00A4EF\"\/>\n                                        <path d=\"M16.0008 0H8.42188V7.57897H16.0008V0Z\" fill=\"#7FBA00\"\/>\n                                        <path d=\"M16.0008 8.4209H8.42188V15.9999H16.0008V8.4209Z\" fill=\"#FFB900\"\/>\n                                    <\/svg>\n                                <\/span>\n                                {{ labels.outlook_calendar }}\n                            <\/a>\n                            <button\n                                type=\"button\"\n                                class=\"bw-add-to-calendar__btn\"\n                                @click=\"downloadIcalCalendar\"\n                            >\n                                <span class=\"bw-add-to-calendar__icon\" aria-hidden=\"true\">\n                                    <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.21165 1.39313C8.26508 0.00788564 9.72934 0 9.72934 0C9.72934 0 9.94793 1.30376 8.89977 2.55758C7.78313 3.89814 6.51375 3.67734 6.51375 3.67734C6.51375 3.67734 6.2741 2.6233 7.21165 1.39313Z\" fill=\"currentColor\"\/>\n                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.64714 4.59251C7.18965 4.59251 8.19568 3.84863 9.50456 3.84863C11.7589 3.84863 12.6438 5.44942 12.6438 5.44942C12.6438 5.44942 10.9109 6.33524 10.9109 8.48014C10.9109 10.901 13.0704 11.7369 13.0704 11.7369C13.0704 11.7369 11.5614 15.9794 9.52037 15.9794C8.58281 15.9794 7.85595 15.3486 6.86836 15.3486C5.86233 15.3486 4.86421 16.0031 4.21372 16.0031C2.35178 16.0004 0 11.9787 0 8.743C0 5.55982 1.99098 3.89069 3.85818 3.89069C5.07226 3.89332 6.01508 4.59251 6.64714 4.59251Z\" fill=\"currentColor\"\/>\n                                    <\/svg>\n                                <\/span>\n                                {{ labels.ical_calendar }}\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <\/div><!-- \/.bw-wizard-content-body -->\n\n<\/div> <!-- \/.bw-wizard-content -->\n<\/div><!-- \/.bw-wizard-container -->\n            <\/div><!-- \/.bw-fp-booking-modal__panel or plain -->\n        <\/div><!-- \/.bw-fp-booking-modal or wizard shell -->\n    <\/div><!-- \/.bw-booking-root -->\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2769","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>R\u00e9servez un rendez-vous - Arts-Yoga<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"R\u00e9servez un rendez-vous - Arts-Yoga\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/\" \/>\n<meta property=\"og:site_name\" content=\"Arts-Yoga\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/stageartsyoga\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.arts-yoga.com\\\/index.php\\\/book-an-appointment\\\/\",\"url\":\"https:\\\/\\\/www.arts-yoga.com\\\/index.php\\\/book-an-appointment\\\/\",\"name\":\"R\u00e9servez un rendez-vous - Arts-Yoga\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.arts-yoga.com\\\/#website\"},\"datePublished\":\"2026-07-21T20:12:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.arts-yoga.com\\\/index.php\\\/book-an-appointment\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.arts-yoga.com\\\/index.php\\\/book-an-appointment\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.arts-yoga.com\\\/index.php\\\/book-an-appointment\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.arts-yoga.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"R\u00e9servez un rendez-vous\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.arts-yoga.com\\\/#website\",\"url\":\"https:\\\/\\\/www.arts-yoga.com\\\/\",\"name\":\"ARTS-YOGA\",\"description\":\"Stages et retraites Art &amp; Yoga\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.arts-yoga.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.arts-yoga.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.arts-yoga.com\\\/#organization\",\"name\":\"arts yoga\",\"url\":\"https:\\\/\\\/www.arts-yoga.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.arts-yoga.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.arts-yoga.com\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/cropped-cropped-om-41993_1280-2.png\",\"contentUrl\":\"https:\\\/\\\/www.arts-yoga.com\\\/wp-content\\\/uploads\\\/2017\\\/10\\\/cropped-cropped-om-41993_1280-2.png\",\"width\":249,\"height\":250,\"caption\":\"arts yoga\"},\"image\":{\"@id\":\"https:\\\/\\\/www.arts-yoga.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/stageartsyoga\\\/\",\"https:\\\/\\\/instagram.com\\\/arts.yoga\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"R\u00e9servez un rendez-vous - Arts-Yoga","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/","og_locale":"fr_FR","og_type":"article","og_title":"R\u00e9servez un rendez-vous - Arts-Yoga","og_url":"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/","og_site_name":"Arts-Yoga","article_publisher":"https:\/\/www.facebook.com\/stageartsyoga\/","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/","url":"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/","name":"R\u00e9servez un rendez-vous - Arts-Yoga","isPartOf":{"@id":"https:\/\/www.arts-yoga.com\/#website"},"datePublished":"2026-07-21T20:12:50+00:00","breadcrumb":{"@id":"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.arts-yoga.com\/index.php\/book-an-appointment\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.arts-yoga.com\/"},{"@type":"ListItem","position":2,"name":"R\u00e9servez un rendez-vous"}]},{"@type":"WebSite","@id":"https:\/\/www.arts-yoga.com\/#website","url":"https:\/\/www.arts-yoga.com\/","name":"ARTS-YOGA","description":"Stages et retraites Art &amp; Yoga","publisher":{"@id":"https:\/\/www.arts-yoga.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.arts-yoga.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.arts-yoga.com\/#organization","name":"arts yoga","url":"https:\/\/www.arts-yoga.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.arts-yoga.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.arts-yoga.com\/wp-content\/uploads\/2017\/10\/cropped-cropped-om-41993_1280-2.png","contentUrl":"https:\/\/www.arts-yoga.com\/wp-content\/uploads\/2017\/10\/cropped-cropped-om-41993_1280-2.png","width":249,"height":250,"caption":"arts yoga"},"image":{"@id":"https:\/\/www.arts-yoga.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/stageartsyoga\/","https:\/\/instagram.com\/arts.yoga"]}]}},"_links":{"self":[{"href":"https:\/\/www.arts-yoga.com\/index.php\/wp-json\/wp\/v2\/pages\/2769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arts-yoga.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.arts-yoga.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.arts-yoga.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.arts-yoga.com\/index.php\/wp-json\/wp\/v2\/comments?post=2769"}],"version-history":[{"count":0,"href":"https:\/\/www.arts-yoga.com\/index.php\/wp-json\/wp\/v2\/pages\/2769\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.arts-yoga.com\/index.php\/wp-json\/wp\/v2\/media?parent=2769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}