@idkwebsites/components 0.1.23 → 0.1.24

package/dist/index.js

@@ -67,7 +67,9 @@ function normalizeBaseUrl(apiUrl) {
 async function apiRequest(config, path, options = {}) {
   const url = `${normalizeBaseUrl(config.apiUrl)}${path.startsWith("/") ? path : `/${path}`}`;
   const headers = new Headers(options.headers);
-  headers.set("X-API-Key", config.apiKey);
+  if (config.apiKey) {
+    headers.set("X-API-Key", config.apiKey);
+  }
   if (!headers.has("Content-Type") && options.body) {
     headers.set("Content-Type", "application/json");
   }
@@ -234,6 +236,24 @@ function useCancelBooking() {
     })
   });
 }
+function usePrepareBookingPayment() {
+  const config = usePlatformConfig();
+  return useMutation({
+    mutationFn: (input) => apiRequest(config, "/bookings/payment/prepare", {
+      method: "POST",
+      body: JSON.stringify(input)
+    })
+  });
+}
+function useFinalizeBookingPayment() {
+  const config = usePlatformConfig();
+  return useMutation({
+    mutationFn: (input) => apiRequest(config, "/bookings/payment/finalize", {
+      method: "POST",
+      body: JSON.stringify(input)
+    })
+  });
+}
 function useBookingLookup(uid, enabled = true) {
   const config = usePlatformConfig();
   return useQuery5({
@@ -257,6 +277,7 @@ var addDays = (dateStr, days) => {
   parsed.setDate(parsed.getDate() + days);
   return parsed.toISOString().slice(0, 10);
 };
+var getDefaultLocationType = (service) => service?.locationOptions?.find((option) => option.isDefault)?.type || service?.locationOptions?.[0]?.type || "";
 function useBookingWidget(options = {}) {
   const {
     services: servicesProp,
@@ -290,6 +311,8 @@ function useBookingWidget(options = {}) {
   const { data: servicesData, isLoading: servicesLoading } = useServices(resolvedServicesQuery);
   const { data: teamData } = useTeam(teamQuery);
   const createBooking = useCreateBooking();
+  const prepareBookingPayment = usePrepareBookingPayment();
+  const finalizeBookingPayment = useFinalizeBookingPayment();
   const [step, setStep] = useState2("service");
   const [selectedService, setSelectedService] = useState2(null);
   const [selectedStaff, setSelectedStaff] = useState2(null);
@@ -309,7 +332,14 @@ function useBookingWidget(options = {}) {
     return new Date(now.getFullYear(), now.getMonth(), 1);
   });
   const [bookingError, setBookingError] = useState2(null);
-  const [details, setDetails] = useState2({ name: "", email: "", phone: "", notes: "" });
+  const [paymentSession, setPaymentSession] = useState2(null);
+  const [details, setDetails] = useState2({
+    name: "",
+    email: "",
+    phone: "",
+    notes: "",
+    locationType: ""
+  });
   const servicesList = useMemo4(() => {
     const list = servicesProp ? [...servicesProp] : servicesData?.services ? [...servicesData.services] : [];
     return serviceFilter ? list.filter(serviceFilter) : list;
@@ -317,15 +347,24 @@ function useBookingWidget(options = {}) {
   const categories = useMemo4(() => {
     const set = /* @__PURE__ */ new Set();
     servicesList.forEach((s) => {
-      if (s.category) set.add(s.category);
+      const cat = s.category;
+      if (!cat) return;
+      const label = typeof cat === "string" ? cat : typeof cat === "object" && cat !== null && "name" in cat ? String(cat.name) : "";
+      if (label) set.add(label);
     });
     return Array.from(set).sort();
   }, [servicesList]);
   const filteredServices = useMemo4(() => {
     const search = serviceSearch.trim().toLowerCase();
+    const resolveCategoryLabel2 = (cat) => {
+      if (typeof cat === "string") return cat;
+      if (cat && typeof cat === "object" && "name" in cat) return String(cat.name);
+      return "";
+    };
     return servicesList.filter((service) => {
-      const matchesSearch = !search || service.name.toLowerCase().includes(search) || (service.description || "").toLowerCase().includes(search) || (service.category || "").toLowerCase().includes(search);
-      const matchesCategory = categoryFilter === "all" ? true : service.category === categoryFilter;
+      const catLabel = resolveCategoryLabel2(service.category);
+      const matchesSearch = !search || service.name.toLowerCase().includes(search) || (service.description || "").toLowerCase().includes(search) || catLabel.toLowerCase().includes(search);
+      const matchesCategory = categoryFilter === "all" ? true : catLabel === categoryFilter;
       return matchesSearch && matchesCategory;
     });
   }, [servicesList, serviceSearch, categoryFilter]);
@@ -356,6 +395,9 @@ function useBookingWidget(options = {}) {
   const hasMoreStaff = staffOptions.length > pagedStaff.length;
   const requiresStaff = showStaffSelection || Boolean(selectedService?.requiresStaffSelection) || selectedService?.schedulingType === "customer-choice";
   const canSkipStaff = !selectedService?.requiresStaffSelection;
+  const paymentRequired = Boolean(
+    selectedService?.effectivePaymentSettings && selectedService.effectivePaymentSettings.mode !== "none" && selectedService.effectivePaymentSettings.amountDueNow > 0
+  );
   const totalSteps = requiresStaff ? 4 : 3;
   const stepNumber = (() => {
     if (step === "service") return 1;
@@ -544,6 +586,7 @@ function useBookingWidget(options = {}) {
     setSelectedDate(null);
     setSelectedTime(null);
     setSelectedEndTime(null);
+    setPaymentSession(null);
     setBookingError(null);
   }, []);
   useEffect(() => {
@@ -553,6 +596,22 @@ function useBookingWidget(options = {}) {
     if (matches) return;
     setSelectedDate(availability.data.dates[0].date);
   }, [step, availability.data, selectedDate]);
+  useEffect(() => {
+    const defaultLocationType = getDefaultLocationType(selectedService);
+    setDetails((prev) => {
+      const stillValid = selectedService?.locationOptions?.some(
+        (option) => option.type === prev.locationType
+      );
+      if (!selectedService) {
+        return prev.locationType ? { ...prev, locationType: "" } : prev;
+      }
+      if (stillValid) return prev;
+      return {
+        ...prev,
+        locationType: defaultLocationType
+      };
+    });
+  }, [selectedService]);
   useEffect(() => {
     if (!selectedService) return;
     if (datePickerMode === "calendar") {
@@ -588,6 +647,7 @@ function useBookingWidget(options = {}) {
       setSelectedDate(null);
       setSelectedTime(null);
       setSelectedEndTime(null);
+      setPaymentSession(null);
       setBookingError(null);
       if (autoAdvanceOnSelect) {
         setStep("time");
@@ -600,12 +660,14 @@ function useBookingWidget(options = {}) {
     setSelectedDate(date);
     setSelectedTime(null);
     setSelectedEndTime(null);
+    setPaymentSession(null);
     setBookingError(null);
   }, []);
   const selectTime = useCallback(
     (time, endTime) => {
       setSelectedTime(time);
       setSelectedEndTime(endTime);
+      setPaymentSession(null);
       setBookingError(null);
       if (autoAdvanceOnSelect) {
         setStep("details");
@@ -636,6 +698,9 @@ function useBookingWidget(options = {}) {
     else if (step === "time") setStep(requiresStaff ? "staff" : "service");
     else if (step === "details") setStep("time");
     else if (step === "done") setStep("details");
+    if (step === "details") {
+      setPaymentSession(null);
+    }
     setBookingError(null);
     scrollToTop();
   }, [step, requiresStaff, scrollToTop]);
@@ -647,9 +712,34 @@ function useBookingWidget(options = {}) {
     setStep("service");
     setSelectedService(null);
     resetSelections();
-    setDetails({ name: "", email: "", phone: "", notes: "" });
+    setPaymentSession(null);
+    setDetails({ name: "", email: "", phone: "", notes: "", locationType: "" });
     scrollToTop();
   }, [resetSelections, scrollToTop]);
+  const finalizePayment = useCallback(
+    async (paymentIntentId, bookingId) => {
+      if (!paymentSession?.bookingId || !paymentSession.paymentIntentId) {
+        setBookingError("Your payment session expired. Please start checkout again.");
+        return;
+      }
+      try {
+        setBookingError(null);
+        const result = await finalizeBookingPayment.mutateAsync({
+          bookingId: bookingId || paymentSession.bookingId,
+          paymentIntentId: paymentIntentId || paymentSession.paymentIntentId
+        });
+        setPaymentSession(null);
+        setStep("done");
+        onSuccess?.(result?.booking);
+        scrollToTop();
+      } catch (error) {
+        setBookingError(
+          error instanceof Error ? error.message : "Payment completed, but we could not confirm the booking yet."
+        );
+      }
+    },
+    [finalizeBookingPayment, onSuccess, paymentSession, scrollToTop]
+  );
   const submitBooking = useCallback(
     async (event) => {
       event?.preventDefault();
@@ -660,8 +750,27 @@ function useBookingWidget(options = {}) {
         setBookingError("Please select a valid time slot.");
         return;
       }
+      if (selectedService.locationOptions?.length && !details.locationType) {
+        setBookingError("Please choose a booking location.");
+        return;
+      }
       try {
         setBookingError(null);
+        if (paymentRequired) {
+          const session = await prepareBookingPayment.mutateAsync({
+            serviceId: selectedService.id,
+            staffId: selectedStaff?.id,
+            startTime: start.toISOString(),
+            endTime: end.toISOString(),
+            customerName: details.name,
+            customerEmail: details.email,
+            customerPhone: details.phone || void 0,
+            customerNotes: details.notes || void 0,
+            locationType: details.locationType || void 0
+          });
+          setPaymentSession(session);
+          return;
+        }
         const result = await createBooking.mutateAsync({
           serviceId: selectedService.id,
           staffId: selectedStaff?.id,
@@ -670,7 +779,8 @@ function useBookingWidget(options = {}) {
           customerName: details.name,
           customerEmail: details.email,
           customerPhone: details.phone || void 0,
-          customerNotes: details.notes || void 0
+          customerNotes: details.notes || void 0,
+          locationType: details.locationType || void 0
         });
         setStep("done");
         onSuccess?.(result?.booking);
@@ -681,7 +791,20 @@ function useBookingWidget(options = {}) {
         );
       }
     },
-    [selectedService, selectedDate, selectedTime, selectedEndTime, selectedStaff, details, createBooking, onSuccess, scrollToTop, parseDateTime]
+    [
+      selectedService,
+      selectedDate,
+      selectedTime,
+      selectedEndTime,
+      selectedStaff,
+      details,
+      createBooking,
+      onSuccess,
+      parseDateTime,
+      paymentRequired,
+      prepareBookingPayment,
+      scrollToTop
+    ]
   );
   const handlePrevDates = useCallback(() => {
     if (availabilityStartDate <= todayString) return;
@@ -761,8 +884,10 @@ function useBookingWidget(options = {}) {
     monthOptions,
     isServicesLoading: servicesProp ? false : servicesLoading,
     isAvailabilityLoading: availability.isLoading,
-    isSubmitting: createBooking.isPending,
+    isSubmitting: createBooking.isPending || prepareBookingPayment.isPending || finalizeBookingPayment.isPending,
     bookingError,
+    paymentSession,
+    paymentRequired,
     requiresStaff,
     canSkipStaff,
     serviceSearch,
@@ -788,6 +913,7 @@ function useBookingWidget(options = {}) {
     continueFromStaff,
     continueFromTime,
     submitBooking,
+    finalizePayment,
     goBack,
     reset,
     scrollToTop,
@@ -834,7 +960,7 @@ function ServiceCard({
             service.duration,
             " min"
           ] }),
-          service.category ? /* @__PURE__ */ jsx2("span", { children: service.category }) : null
+          service.category ? /* @__PURE__ */ jsx2("span", { children: typeof service.category === "string" ? service.category : service.category.name }) : null
         ] })
       ]
     }
@@ -1158,8 +1284,250 @@ function ContactForm({
 }
 
 // src/components/BookingWidget.tsx
-import { useRef as useRef2 } from "react";
-import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useRef as useRef3 } from "react";
+
+// src/components/StripePaymentSection.tsx
+import { useEffect as useEffect2, useMemo as useMemo5, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var STRIPE_JS_SRC = "https://js.stripe.com/v3/";
+var stripeScriptPromise = null;
+var stripeInstances = /* @__PURE__ */ new Map();
+async function loadStripeClient(publishableKey) {
+  if (typeof window === "undefined") {
+    throw new Error("Stripe.js can only load in the browser.");
+  }
+  if (!stripeScriptPromise) {
+    stripeScriptPromise = new Promise((resolve, reject) => {
+      const existing = document.querySelector(`script[src="${STRIPE_JS_SRC}"]`);
+      if (existing) {
+        existing.addEventListener("load", () => resolve(), { once: true });
+        existing.addEventListener("error", () => reject(new Error("Failed to load Stripe.js.")), {
+          once: true
+        });
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = STRIPE_JS_SRC;
+      script.async = true;
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error("Failed to load Stripe.js."));
+      document.head.appendChild(script);
+    });
+  }
+  if (!stripeInstances.has(publishableKey)) {
+    stripeInstances.set(
+      publishableKey,
+      (async () => {
+        await stripeScriptPromise;
+        const stripe = window.Stripe?.(publishableKey);
+        if (!stripe) {
+          throw new Error("Unable to initialize Stripe.");
+        }
+        return stripe;
+      })()
+    );
+  }
+  return stripeInstances.get(publishableKey);
+}
+function formatCurrency(amount, currency) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: currency.toUpperCase()
+  }).format(amount / 100);
+}
+function StripePaymentSection({
+  bookingId,
+  clientSecret,
+  publishableKey,
+  paymentIntentId,
+  customerName,
+  customerEmail,
+  customerPhone,
+  amountDueNow,
+  fullAmount,
+  currency,
+  paymentTerms,
+  isSubmitting = false,
+  onPaymentAuthorized
+}) {
+  const mountRef = useRef2(null);
+  const stripeRef = useRef2(null);
+  const elementsRef = useRef2(null);
+  const paymentElementRef = useRef2(null);
+  const [isReady, setIsReady] = useState4(false);
+  const [isConfirming, setIsConfirming] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [statusMessage, setStatusMessage] = useState4(null);
+  const dueNowLabel = useMemo5(
+    () => formatCurrency(amountDueNow, currency),
+    [amountDueNow, currency]
+  );
+  const fullAmountLabel = useMemo5(
+    () => formatCurrency(fullAmount, currency),
+    [currency, fullAmount]
+  );
+  useEffect2(() => {
+    let cancelled = false;
+    const mountElement = async () => {
+      if (!mountRef.current) return;
+      setIsReady(false);
+      setError(null);
+      setStatusMessage(null);
+      try {
+        const stripe = await loadStripeClient(publishableKey);
+        if (cancelled || !mountRef.current) return;
+        stripeRef.current = stripe;
+        const elements = stripe.elements({
+          clientSecret,
+          appearance: {
+            theme: "stripe",
+            labels: "above",
+            variables: {
+              colorPrimary: "#111827",
+              colorText: "#111827",
+              borderRadius: "12px"
+            }
+          }
+        });
+        elementsRef.current = elements;
+        const paymentElement = elements.create("payment", {
+          layout: "tabs",
+          wallets: {
+            applePay: "auto",
+            googlePay: "auto"
+          }
+        });
+        paymentElementRef.current = paymentElement;
+        paymentElement.mount(mountRef.current);
+        setIsReady(true);
+      } catch (mountError) {
+        setError(
+          mountError instanceof Error ? mountError.message : "Unable to load secure payment fields."
+        );
+      }
+    };
+    void mountElement();
+    return () => {
+      cancelled = true;
+      try {
+        paymentElementRef.current?.destroy?.();
+        paymentElementRef.current?.unmount();
+      } catch {
+      }
+    };
+  }, [clientSecret, publishableKey]);
+  const handleConfirm = async () => {
+    if (!stripeRef.current || !elementsRef.current) {
+      setError("Secure payment fields are still loading. Please try again.");
+      return;
+    }
+    setIsConfirming(true);
+    setError(null);
+    setStatusMessage(null);
+    try {
+      const result = await stripeRef.current.confirmPayment({
+        elements: elementsRef.current,
+        redirect: "if_required",
+        confirmParams: {
+          return_url: window.location.href,
+          payment_method_data: {
+            billing_details: {
+              name: customerName,
+              email: customerEmail,
+              phone: customerPhone || void 0
+            }
+          }
+        }
+      });
+      if (result.error?.message) {
+        setError(result.error.message);
+        return;
+      }
+      if (result.paymentIntent?.status === "succeeded") {
+        await onPaymentAuthorized(result.paymentIntent.id, bookingId);
+        return;
+      }
+      setStatusMessage("Your payment is processing. We will finalize the booking as soon as Stripe confirms it.");
+    } catch (confirmError) {
+      setError(
+        confirmError instanceof Error ? confirmError.message : "Unable to confirm payment. Please try again."
+      );
+    } finally {
+      setIsConfirming(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        marginTop: 16,
+        padding: 16,
+        borderRadius: 16,
+        border: "1px solid rgba(15, 23, 42, 0.12)",
+        background: "#fff"
+      },
+      children: [
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx8("div", { className: "idk-booking__summary-label", children: "Payment due now" }),
+            /* @__PURE__ */ jsx8("p", { style: { margin: "4px 0 0", fontWeight: 700 }, children: dueNowLabel })
+          ] }),
+          fullAmount > amountDueNow ? /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx8("div", { className: "idk-booking__summary-label", children: "Full service price" }),
+            /* @__PURE__ */ jsx8("p", { style: { margin: "4px 0 0", fontWeight: 600 }, children: fullAmountLabel })
+          ] }) : null
+        ] }),
+        paymentTerms ? /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              marginTop: 12,
+              padding: 12,
+              borderRadius: 12,
+              background: "rgba(15, 23, 42, 0.04)",
+              whiteSpace: "pre-line",
+              fontSize: 14,
+              lineHeight: 1.5
+            },
+            children: paymentTerms
+          }
+        ) : null,
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              marginTop: 12,
+              padding: 12,
+              borderRadius: 12,
+              border: "1px solid rgba(15, 23, 42, 0.12)",
+              background: "#fff"
+            },
+            children: /* @__PURE__ */ jsx8("div", { ref: mountRef })
+          }
+        ),
+        error ? /* @__PURE__ */ jsx8("div", { className: "idk-booking__error", style: { marginTop: 12 }, children: error }) : null,
+        statusMessage ? /* @__PURE__ */ jsx8("div", { className: "idk-state", style: { marginTop: 12 }, children: statusMessage }) : null,
+        /* @__PURE__ */ jsxs4("div", { style: { marginTop: 16, display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx8("div", { className: "idk-booking__summary-label", children: "Powered by Stripe. Wallets and local payment methods appear automatically when available." }),
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              className: "idk-button",
+              disabled: !isReady || isSubmitting || isConfirming,
+              onClick: handleConfirm,
+              children: isSubmitting || isConfirming ? "Processing..." : `Pay ${dueNowLabel} and confirm`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx8("input", { type: "hidden", value: paymentIntentId, readOnly: true })
+      ]
+    }
+  );
+}
+
+// src/components/BookingWidget.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var parseDateOnly2 = (value) => {
   if (!value) return null;
   const normalized = value.includes("T") ? value.split("T")[0] : value;
@@ -1188,7 +1556,7 @@ function BookingWidget({
   disabledWeekdays = [],
   ...hookProps
 }) {
-  const widgetRef = useRef2(null);
+  const widgetRef = useRef3(null);
   const bw = useBookingWidget({
     ...hookProps,
     enableServiceSearch,
@@ -1207,28 +1575,31 @@ function BookingWidget({
   const disabledWeekdaysSet = new Set(disabledWeekdays);
   const shouldPaginate = showServicePagination ?? bw.hasMoreServices;
   const shouldPaginateStaff = showStaffPagination ?? bw.hasMoreStaff;
+  const selectedLocationOption = bw.selectedService?.locationOptions?.find(
+    (option) => option.type === bw.details.locationType
+  );
   if (bw.isServicesLoading) {
-    return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "Loading booking options..." });
+    return /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "Loading booking options..." });
   }
   if (!bw.servicesList.length) {
-    return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No services available." });
+    return /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "No services available." });
   }
-  return /* @__PURE__ */ jsxs4("div", { ref: widgetRef, className: ["idk-booking", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs4("div", { className: "idk-booking__header", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "idk-booking__title-wrap", children: [
-        /* @__PURE__ */ jsx8("h3", { className: "idk-booking__title", children: title }),
-        subtitle ? /* @__PURE__ */ jsx8("p", { className: "idk-booking__subtitle", children: subtitle }) : null
+  return /* @__PURE__ */ jsxs5("div", { ref: widgetRef, className: ["idk-booking", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "idk-booking__header", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "idk-booking__title-wrap", children: [
+        /* @__PURE__ */ jsx9("h3", { className: "idk-booking__title", children: title }),
+        subtitle ? /* @__PURE__ */ jsx9("p", { className: "idk-booking__subtitle", children: subtitle }) : null
       ] }),
-      bw.step !== "service" && bw.step !== "done" ? /* @__PURE__ */ jsx8("button", { type: "button", className: "idk-link", onClick: bw.goBack, children: "Back" }) : null
+      bw.step !== "service" && bw.step !== "done" ? /* @__PURE__ */ jsx9("button", { type: "button", className: "idk-link", onClick: bw.goBack, children: "Back" }) : null
     ] }),
-    bw.step !== "done" ? /* @__PURE__ */ jsxs4("div", { className: "idk-booking__progress", children: [
-      /* @__PURE__ */ jsxs4("span", { children: [
+    bw.step !== "done" ? /* @__PURE__ */ jsxs5("div", { className: "idk-booking__progress", children: [
+      /* @__PURE__ */ jsxs5("span", { children: [
         "Step ",
         bw.stepNumber,
         " of ",
         bw.totalSteps
       ] }),
-      /* @__PURE__ */ jsx8("div", { className: "idk-booking__bar", children: /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9("div", { className: "idk-booking__bar", children: /* @__PURE__ */ jsx9(
         "div",
         {
           className: "idk-booking__bar-fill",
@@ -1236,10 +1607,10 @@ function BookingWidget({
         }
       ) })
     ] }) : null,
-    bw.step === "service" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
-      /* @__PURE__ */ jsx8("h4", { children: "Select a service" }),
-      enableServiceSearch || enableCategoryFilter ? /* @__PURE__ */ jsxs4("div", { className: "idk-booking__filters", children: [
-        enableServiceSearch ? /* @__PURE__ */ jsx8(
+    bw.step === "service" && /* @__PURE__ */ jsxs5("div", { className: "idk-booking__step", children: [
+      /* @__PURE__ */ jsx9("h4", { children: "Select a service" }),
+      enableServiceSearch || enableCategoryFilter ? /* @__PURE__ */ jsxs5("div", { className: "idk-booking__filters", children: [
+        enableServiceSearch ? /* @__PURE__ */ jsx9(
           "input",
           {
             type: "search",
@@ -1248,19 +1619,19 @@ function BookingWidget({
             placeholder: serviceSearchPlaceholder
           }
         ) : null,
-        enableCategoryFilter && bw.categories.length > 0 ? /* @__PURE__ */ jsxs4(
+        enableCategoryFilter && bw.categories.length > 0 ? /* @__PURE__ */ jsxs5(
           "select",
           {
             value: bw.categoryFilter,
             onChange: (event) => bw.setCategoryFilter(event.target.value),
             children: [
-              /* @__PURE__ */ jsx8("option", { value: "all", children: categoryLabel }),
-              bw.categories.map((category) => /* @__PURE__ */ jsx8("option", { value: category, children: category }, category))
+              /* @__PURE__ */ jsx9("option", { value: "all", children: categoryLabel }),
+              bw.categories.map((category) => /* @__PURE__ */ jsx9("option", { value: category, children: category }, category))
             ]
           }
         ) : null
       ] }) : null,
-      bw.filteredServices.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No services match your filters." }) : /* @__PURE__ */ jsx8(
+      bw.filteredServices.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "No services match your filters." }) : /* @__PURE__ */ jsx9(
         "div",
         {
           className: [
@@ -1273,27 +1644,27 @@ function BookingWidget({
           },
           children: bw.pagedServices.map((service) => {
             const isSelected = bw.selectedService?.id === service.id;
-            return /* @__PURE__ */ jsxs4(
+            return /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
                 className: ["idk-card", "idk-card--clickable", isSelected ? "is-active" : ""].join(" "),
                 onClick: () => bw.selectService(service),
                 children: [
-                  /* @__PURE__ */ jsxs4("div", { className: "idk-card__header", children: [
-                    /* @__PURE__ */ jsx8("span", { className: "idk-card__title", children: service.name }),
-                    /* @__PURE__ */ jsxs4("span", { className: "idk-card__aside", children: [
-                      isSelected ? /* @__PURE__ */ jsx8("span", { className: "idk-card__check", children: "\u2713" }) : null,
-                      typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ jsxs4("span", { className: "idk-card__price", children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "idk-card__header", children: [
+                    /* @__PURE__ */ jsx9("span", { className: "idk-card__title", children: service.name }),
+                    /* @__PURE__ */ jsxs5("span", { className: "idk-card__aside", children: [
+                      isSelected ? /* @__PURE__ */ jsx9("span", { className: "idk-card__check", children: "\u2713" }) : null,
+                      typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ jsxs5("span", { className: "idk-card__price", children: [
                         "$",
                         (service.price / 100).toFixed(2)
                       ] }) : null
                     ] })
                   ] }),
-                  service.description ? /* @__PURE__ */ jsx8("div", { className: "idk-card__description", children: service.description }) : null,
-                  /* @__PURE__ */ jsxs4("div", { className: "idk-card__meta", children: [
-                    /* @__PURE__ */ jsx8("span", { children: bw.formatDuration(service.duration) }),
-                    service.category ? /* @__PURE__ */ jsx8("span", { className: "idk-pill", children: service.category }) : null
+                  service.description ? /* @__PURE__ */ jsx9("div", { className: "idk-card__description", children: service.description }) : null,
+                  /* @__PURE__ */ jsxs5("div", { className: "idk-card__meta", children: [
+                    /* @__PURE__ */ jsx9("span", { children: bw.formatDuration(service.duration) }),
+                    service.category ? /* @__PURE__ */ jsx9("span", { className: "idk-pill", children: typeof service.category === "string" ? service.category : service.category.name }) : null
                   ] })
                 ]
               },
@@ -1302,8 +1673,8 @@ function BookingWidget({
           })
         }
       ),
-      /* @__PURE__ */ jsxs4("div", { className: "idk-booking__actions", children: [
-        shouldPaginate ? /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsxs5("div", { className: "idk-booking__actions", children: [
+        shouldPaginate ? /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -1313,12 +1684,12 @@ function BookingWidget({
             children: bw.hasMoreServices ? "Show more services" : "All services shown"
           }
         ) : null,
-        bw.selectedService && !hookProps.autoAdvanceOnSelect ? /* @__PURE__ */ jsx8("button", { type: "button", className: "idk-button", onClick: bw.continueFromService, children: "Continue" }) : null
+        bw.selectedService && !hookProps.autoAdvanceOnSelect ? /* @__PURE__ */ jsx9("button", { type: "button", className: "idk-button", onClick: bw.continueFromService, children: "Continue" }) : null
       ] })
     ] }),
-    bw.step === "staff" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
-      /* @__PURE__ */ jsx8("h4", { children: "Select a team member" }),
-      bw.staffOptions.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No team members available." }) : /* @__PURE__ */ jsxs4(
+    bw.step === "staff" && /* @__PURE__ */ jsxs5("div", { className: "idk-booking__step", children: [
+      /* @__PURE__ */ jsx9("h4", { children: "Select a team member" }),
+      bw.staffOptions.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "No team members available." }) : /* @__PURE__ */ jsxs5(
         "div",
         {
           className: [
@@ -1327,34 +1698,34 @@ function BookingWidget({
           ].join(" "),
           style: staffLayout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, staffColumns)}, minmax(0, 1fr))` } : void 0,
           children: [
-            (hookProps.showAnyStaffOption ?? true) && bw.canSkipStaff ? /* @__PURE__ */ jsxs4(
+            (hookProps.showAnyStaffOption ?? true) && bw.canSkipStaff ? /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
                 className: ["idk-card", "idk-card--clickable", !bw.selectedStaff ? "is-active" : ""].join(" "),
                 onClick: () => bw.selectStaff(null),
                 children: [
-                  /* @__PURE__ */ jsxs4("div", { className: "idk-card__header", children: [
-                    /* @__PURE__ */ jsx8("span", { className: "idk-card__title", children: "Any Available" }),
-                    /* @__PURE__ */ jsx8("span", { className: "idk-card__badge", children: "Recommended" })
+                  /* @__PURE__ */ jsxs5("div", { className: "idk-card__header", children: [
+                    /* @__PURE__ */ jsx9("span", { className: "idk-card__title", children: "Any Available" }),
+                    /* @__PURE__ */ jsx9("span", { className: "idk-card__badge", children: "Recommended" })
                   ] }),
-                  /* @__PURE__ */ jsx8("p", { className: "idk-card__description", children: "We'll match you with the first available stylist." })
+                  /* @__PURE__ */ jsx9("p", { className: "idk-card__description", children: "We'll match you with the first available stylist." })
                 ]
               },
               "any-staff"
             ) : null,
-            bw.pagedStaff.map((staff) => /* @__PURE__ */ jsx8(
+            bw.pagedStaff.map((staff) => /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
                 className: ["idk-card", "idk-card--clickable", bw.selectedStaff?.id === staff.id ? "is-active" : ""].join(" "),
                 onClick: () => bw.selectStaff(staff),
-                children: /* @__PURE__ */ jsxs4("div", { className: "idk-team__card", children: [
-                  /* @__PURE__ */ jsx8("div", { className: "idk-team__avatar", children: staff.photo?.url ? /* @__PURE__ */ jsx8("img", { src: staff.photo.url, alt: staff.name }) : /* @__PURE__ */ jsx8("span", { children: staff.name.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase() }) }),
-                  /* @__PURE__ */ jsxs4("div", { children: [
-                    /* @__PURE__ */ jsx8("span", { className: "idk-card__title", children: staff.name }),
-                    /* @__PURE__ */ jsx8("span", { className: "idk-card__meta", children: staff.role || "Staff" }),
-                    staff.bio ? /* @__PURE__ */ jsx8("p", { className: "idk-card__description", children: renderLinkedText(staff.bio) }) : null
+                children: /* @__PURE__ */ jsxs5("div", { className: "idk-team__card", children: [
+                  /* @__PURE__ */ jsx9("div", { className: "idk-team__avatar", children: staff.photo?.url ? /* @__PURE__ */ jsx9("img", { src: staff.photo.url, alt: staff.name }) : /* @__PURE__ */ jsx9("span", { children: staff.name.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase() }) }),
+                  /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsx9("span", { className: "idk-card__title", children: staff.name }),
+                    /* @__PURE__ */ jsx9("span", { className: "idk-card__meta", children: staff.role || "Staff" }),
+                    staff.bio ? /* @__PURE__ */ jsx9("p", { className: "idk-card__description", children: renderLinkedText(staff.bio) }) : null
                   ] })
                 ] })
               },
@@ -1363,8 +1734,8 @@ function BookingWidget({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs4("div", { className: "idk-booking__actions", children: [
-        shouldPaginateStaff ? /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsxs5("div", { className: "idk-booking__actions", children: [
+        shouldPaginateStaff ? /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -1374,7 +1745,7 @@ function BookingWidget({
             children: bw.hasMoreStaff ? "Show more staff" : bw.staffPage > 1 ? "Show fewer staff" : "All staff shown"
           }
         ) : null,
-        bw.canSkipStaff ? /* @__PURE__ */ jsx8(
+        bw.canSkipStaff ? /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -1386,7 +1757,7 @@ function BookingWidget({
             children: "Continue without selecting"
           }
         ) : null,
-        !hookProps.autoAdvanceOnSelect ? /* @__PURE__ */ jsx8(
+        !hookProps.autoAdvanceOnSelect ? /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -1398,10 +1769,10 @@ function BookingWidget({
         ) : null
       ] })
     ] }),
-    bw.step === "time" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
-      /* @__PURE__ */ jsx8("h4", { children: "Select a time" }),
-      bw.isAvailabilityLoading ? /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "Loading availability..." }) : bw.availabilityDates.length > 0 ? /* @__PURE__ */ jsxs4("div", { className: ["idk-availability", timeLayout === "split" ? "idk-availability--split" : ""].join(" "), children: [
-        /* @__PURE__ */ jsx8("div", { className: "idk-availability__dates", children: (hookProps.datePickerMode ?? "list") === "calendar" ? /* @__PURE__ */ jsxs4(
+    bw.step === "time" && /* @__PURE__ */ jsxs5("div", { className: "idk-booking__step", children: [
+      /* @__PURE__ */ jsx9("h4", { children: "Select a time" }),
+      bw.isAvailabilityLoading ? /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "Loading availability..." }) : bw.availabilityDates.length > 0 ? /* @__PURE__ */ jsxs5("div", { className: ["idk-availability", timeLayout === "split" ? "idk-availability--split" : ""].join(" "), children: [
+        /* @__PURE__ */ jsx9("div", { className: "idk-availability__dates", children: (hookProps.datePickerMode ?? "list") === "calendar" ? /* @__PURE__ */ jsxs5(
           "div",
           {
             className: [
@@ -1409,8 +1780,8 @@ function BookingWidget({
               calendarVariant === "compact" ? "idk-calendar--compact" : ""
             ].filter(Boolean).join(" "),
             children: [
-              /* @__PURE__ */ jsx8("div", { className: "idk-calendar__header", children: calendarVariant === "compact" ? /* @__PURE__ */ jsxs4("div", { className: "idk-calendar__header idk-calendar__header--compact", children: [
-                /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9("div", { className: "idk-calendar__header", children: calendarVariant === "compact" ? /* @__PURE__ */ jsxs5("div", { className: "idk-calendar__header idk-calendar__header--compact", children: [
+                /* @__PURE__ */ jsx9(
                   "button",
                   {
                     type: "button",
@@ -1421,16 +1792,16 @@ function BookingWidget({
                     children: "<"
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   "select",
                   {
                     className: "idk-calendar__month-select",
                     value: `${bw.calendarMonth.getFullYear()}-${String(bw.calendarMonth.getMonth() + 1).padStart(2, "0")}`,
                     onChange: (event) => bw.handleMonthSelect(event.target.value),
-                    children: bw.monthOptions.map((option) => /* @__PURE__ */ jsx8("option", { value: option.value, children: option.label }, option.value))
+                    children: bw.monthOptions.map((option) => /* @__PURE__ */ jsx9("option", { value: option.value, children: option.label }, option.value))
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   "button",
                   {
                     type: "button",
@@ -1441,8 +1812,8 @@ function BookingWidget({
                     children: ">"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
-                /* @__PURE__ */ jsx8(
+              ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+                /* @__PURE__ */ jsx9(
                   "button",
                   {
                     type: "button",
@@ -1452,8 +1823,8 @@ function BookingWidget({
                     children: "Prev"
                   }
                 ),
-                /* @__PURE__ */ jsx8("div", { className: "idk-calendar__title", children: new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(bw.calendarMonth) }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9("div", { className: "idk-calendar__title", children: new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(bw.calendarMonth) }),
+                /* @__PURE__ */ jsx9(
                   "button",
                   {
                     type: "button",
@@ -1464,8 +1835,8 @@ function BookingWidget({
                   }
                 )
               ] }) }),
-              /* @__PURE__ */ jsx8("div", { className: "idk-calendar__weekdays", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((label) => /* @__PURE__ */ jsx8("span", { children: label }, label)) }),
-              /* @__PURE__ */ jsx8("div", { className: "idk-calendar__grid", children: bw.calendarDays.map((day) => {
+              /* @__PURE__ */ jsx9("div", { className: "idk-calendar__weekdays", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((label) => /* @__PURE__ */ jsx9("span", { children: label }, label)) }),
+              /* @__PURE__ */ jsx9("div", { className: "idk-calendar__grid", children: bw.calendarDays.map((day) => {
                 const entry = bw.availabilityByDate.get(day.date);
                 const hasAvailable = entry?.slots?.some((slot) => slot.available) ?? false;
                 const dateValue = parseDateOnly2(day.date);
@@ -1476,7 +1847,7 @@ function BookingWidget({
                 const isBlocked = Boolean(entry) && !hasAvailable;
                 const isDisabled = !entry || isPast || isBeyondMax || isBlocked || isDisabledWeekday;
                 const isActive = bw.selectedDate === day.date;
-                return /* @__PURE__ */ jsxs4(
+                return /* @__PURE__ */ jsxs5(
                   "button",
                   {
                     type: "button",
@@ -1491,22 +1862,22 @@ function BookingWidget({
                     disabled: isDisabled,
                     onClick: () => bw.selectDate(day.date),
                     children: [
-                      /* @__PURE__ */ jsx8("span", { children: day.date.split("-")[2] }),
-                      showFullyBookedLabel && isBlocked && day.isCurrentMonth ? /* @__PURE__ */ jsx8("span", { className: "idk-calendar__label", children: calendarVariant === "compact" ? "\u2022" : "Fully booked" }) : null
+                      /* @__PURE__ */ jsx9("span", { children: day.date.split("-")[2] }),
+                      showFullyBookedLabel && isBlocked && day.isCurrentMonth ? /* @__PURE__ */ jsx9("span", { className: "idk-calendar__label", children: calendarVariant === "compact" ? "\u2022" : "Fully booked" }) : null
                     ]
                   },
                   day.date
                 );
               }) }),
-              showFullyBookedLabel && calendarVariant === "compact" && bw.hasBlockedInCalendarView ? /* @__PURE__ */ jsxs4("div", { className: "idk-calendar__legend", children: [
-                /* @__PURE__ */ jsx8("span", { className: "idk-calendar__legend-dot", children: "\u2022" }),
+              showFullyBookedLabel && calendarVariant === "compact" && bw.hasBlockedInCalendarView ? /* @__PURE__ */ jsxs5("div", { className: "idk-calendar__legend", children: [
+                /* @__PURE__ */ jsx9("span", { className: "idk-calendar__legend-dot", children: "\u2022" }),
                 " Fully booked"
               ] }) : null
             ]
           }
-        ) : /* @__PURE__ */ jsxs4(Fragment, { children: [
-          enableDatePaging ? /* @__PURE__ */ jsxs4("div", { className: "idk-availability__nav", children: [
-            /* @__PURE__ */ jsx8(
+        ) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+          enableDatePaging ? /* @__PURE__ */ jsxs5("div", { className: "idk-availability__nav", children: [
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1516,7 +1887,7 @@ function BookingWidget({
                 children: "Previous"
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1526,25 +1897,25 @@ function BookingWidget({
               }
             )
           ] }) : null,
-          bw.availabilityDates.map((entry) => /* @__PURE__ */ jsx8(
+          bw.availabilityDates.map((entry) => /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
               className: entry.date === bw.selectedDate ? "is-active" : void 0,
               onClick: () => bw.selectDate(entry.date),
-              children: /* @__PURE__ */ jsx8("span", { className: "idk-date-chip__day", children: bw.formatDateLabel(entry.date) })
+              children: /* @__PURE__ */ jsx9("span", { className: "idk-date-chip__day", children: bw.formatDateLabel(entry.date) })
             },
             entry.date
           ))
         ] }) }),
-        /* @__PURE__ */ jsxs4("div", { className: "idk-availability__panel", children: [
-          /* @__PURE__ */ jsx8("div", { className: "idk-availability__panel-header", children: /* @__PURE__ */ jsxs4("div", { children: [
-            /* @__PURE__ */ jsx8("div", { className: "idk-availability__panel-title", children: bw.selectedDate ? bw.formatDateHeading(bw.selectedDate) : bw.availabilityDates[0]?.date ? bw.formatDateHeading(bw.availabilityDates[0].date) : "Select a date" }),
-            /* @__PURE__ */ jsx8("div", { className: "idk-availability__panel-subtitle", children: bw.timeZoneLabel })
+        /* @__PURE__ */ jsxs5("div", { className: "idk-availability__panel", children: [
+          /* @__PURE__ */ jsx9("div", { className: "idk-availability__panel-header", children: /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx9("div", { className: "idk-availability__panel-title", children: bw.selectedDate ? bw.formatDateHeading(bw.selectedDate) : bw.availabilityDates[0]?.date ? bw.formatDateHeading(bw.availabilityDates[0].date) : "Select a date" }),
+            /* @__PURE__ */ jsx9("div", { className: "idk-availability__panel-subtitle", children: bw.timeZoneLabel })
           ] }) }),
-          /* @__PURE__ */ jsx8("div", { className: "idk-availability__slots", children: (() => {
+          /* @__PURE__ */ jsx9("div", { className: "idk-availability__slots", children: (() => {
             const activeEntry = bw.selectedDate ? bw.availabilityDates.find((entry) => entry.date === bw.selectedDate) : bw.availabilityDates[0];
-            if (!activeEntry) return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "Select a date to see times." });
+            if (!activeEntry) return /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "Select a date to see times." });
             const availableSlots = (activeEntry.slots || []).filter((slot) => slot.available).sort((a, b) => {
               const aTime = new Date(a.time).getTime() || Number.POSITIVE_INFINITY;
               const bTime = new Date(b.time).getTime() || Number.POSITIVE_INFINITY;
@@ -1559,9 +1930,9 @@ function BookingWidget({
               (slot, index) => index === 0 || slot.time !== availableSlots[index - 1].time || slot.endTime !== availableSlots[index - 1].endTime
             );
             if (slots.length === 0) {
-              return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No available times for this date." });
+              return /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "No available times for this date." });
             }
-            return slots.map((slot, index) => /* @__PURE__ */ jsx8(
+            return slots.map((slot, index) => /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1577,8 +1948,8 @@ function BookingWidget({
             ));
           })() })
         ] })
-      ] }) : /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No availability found." }),
-      !hookProps.autoAdvanceOnSelect ? /* @__PURE__ */ jsx8("div", { className: "idk-booking__actions", children: /* @__PURE__ */ jsx8(
+      ] }) : /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "No availability found." }),
+      !hookProps.autoAdvanceOnSelect ? /* @__PURE__ */ jsx9("div", { className: "idk-booking__actions", children: /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
@@ -1589,90 +1960,126 @@ function BookingWidget({
         }
       ) }) : null
     ] }),
-    bw.step === "details" && /* @__PURE__ */ jsxs4("form", { className: "idk-form", onSubmit: bw.submitBooking, children: [
-      /* @__PURE__ */ jsx8("h4", { children: "Your details" }),
-      bw.bookingError ? /* @__PURE__ */ jsx8("div", { className: "idk-booking__error", children: bw.bookingError }) : null,
-      bw.selectedService && bw.selectedTime ? /* @__PURE__ */ jsxs4("div", { className: "idk-booking__summary", children: [
-        /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx8("span", { className: "idk-booking__summary-label", children: "Service" }),
-          /* @__PURE__ */ jsx8("p", { children: bw.selectedService.name })
+    bw.step === "details" && /* @__PURE__ */ jsxs5("form", { className: "idk-form", onSubmit: bw.submitBooking, children: [
+      /* @__PURE__ */ jsx9("h4", { children: "Your details" }),
+      bw.bookingError ? /* @__PURE__ */ jsx9("div", { className: "idk-booking__error", children: bw.bookingError }) : null,
+      bw.selectedService && bw.selectedTime ? /* @__PURE__ */ jsxs5("div", { className: "idk-booking__summary", children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx9("span", { className: "idk-booking__summary-label", children: "Service" }),
+          /* @__PURE__ */ jsx9("p", { children: bw.selectedService.name })
         ] }),
-        bw.selectedStaff ? /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx8("span", { className: "idk-booking__summary-label", children: "Staff" }),
-          /* @__PURE__ */ jsx8("p", { children: bw.selectedStaff.name })
+        bw.selectedStaff ? /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx9("span", { className: "idk-booking__summary-label", children: "Staff" }),
+          /* @__PURE__ */ jsx9("p", { children: bw.selectedStaff.name })
         ] }) : null,
-        /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx8("span", { className: "idk-booking__summary-label", children: "When" }),
-          /* @__PURE__ */ jsxs4("p", { children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx9("span", { className: "idk-booking__summary-label", children: "When" }),
+          /* @__PURE__ */ jsxs5("p", { children: [
             bw.formatDateHeading(bw.selectedDate || ""),
             " \xB7 ",
             bw.formatTimeLabel(bw.selectedTime)
           ] })
         ] }),
-        bw.selectedService.price ? /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx8("span", { className: "idk-booking__summary-label", children: "Price" }),
-          /* @__PURE__ */ jsxs4("p", { children: [
+        bw.selectedService.price ? /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx9("span", { className: "idk-booking__summary-label", children: "Price" }),
+          /* @__PURE__ */ jsxs5("p", { children: [
             "$",
             (bw.selectedService.price / 100).toFixed(2)
           ] })
         ] }) : null
       ] }) : null,
-      /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ jsx8("span", { children: "Name" }),
-        /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsxs5("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ jsx9("span", { children: "Name" }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             value: bw.details.name,
             onChange: (event) => bw.setDetails((prev) => ({ ...prev, name: event.target.value })),
+            disabled: Boolean(bw.paymentSession),
             required: true
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ jsx8("span", { children: "Email" }),
-        /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsxs5("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ jsx9("span", { children: "Email" }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             type: "email",
             value: bw.details.email,
             onChange: (event) => bw.setDetails((prev) => ({ ...prev, email: event.target.value })),
+            disabled: Boolean(bw.paymentSession),
             required: true
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ jsx8("span", { children: "Phone" }),
-        /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsxs5("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ jsx9("span", { children: "Phone" }),
+        /* @__PURE__ */ jsx9(
           "input",
           {
             value: bw.details.phone,
-            onChange: (event) => bw.setDetails((prev) => ({ ...prev, phone: event.target.value }))
+            onChange: (event) => bw.setDetails((prev) => ({ ...prev, phone: event.target.value })),
+            disabled: Boolean(bw.paymentSession)
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ jsx8("span", { children: "Notes" }),
-        /* @__PURE__ */ jsx8(
+      bw.selectedService?.locationOptions?.length ? /* @__PURE__ */ jsxs5("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ jsx9("span", { children: "Location" }),
+        /* @__PURE__ */ jsx9(
+          "select",
+          {
+            value: bw.details.locationType,
+            onChange: (event) => bw.setDetails((prev) => ({ ...prev, locationType: event.target.value })),
+            disabled: Boolean(bw.paymentSession),
+            required: true,
+            children: bw.selectedService.locationOptions.map((option) => /* @__PURE__ */ jsx9("option", { value: option.type, children: option.label }, option.type))
+          }
+        ),
+        selectedLocationOption?.details ? /* @__PURE__ */ jsx9("small", { className: "idk-form__hint", children: selectedLocationOption.details }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsxs5("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ jsx9("span", { children: "Notes" }),
+        /* @__PURE__ */ jsx9(
           "textarea",
           {
             rows: 4,
             value: bw.details.notes,
-            onChange: (event) => bw.setDetails((prev) => ({ ...prev, notes: event.target.value }))
+            onChange: (event) => bw.setDetails((prev) => ({ ...prev, notes: event.target.value })),
+            disabled: Boolean(bw.paymentSession)
           }
         )
       ] }),
-      /* @__PURE__ */ jsx8("button", { type: "submit", className: "idk-button", disabled: bw.isSubmitting, children: bw.isSubmitting ? "Booking..." : "Confirm booking" })
+      bw.paymentSession && bw.selectedService?.effectivePaymentSettings ? /* @__PURE__ */ jsx9(
+        StripePaymentSection,
+        {
+          bookingId: bw.paymentSession.bookingId,
+          clientSecret: bw.paymentSession.clientSecret,
+          publishableKey: bw.paymentSession.publishableKey,
+          paymentIntentId: bw.paymentSession.paymentIntentId,
+          customerName: bw.details.name,
+          customerEmail: bw.details.email,
+          customerPhone: bw.details.phone || void 0,
+          amountDueNow: bw.selectedService.effectivePaymentSettings.amountDueNow,
+          fullAmount: bw.selectedService.effectivePaymentSettings.fullAmount,
+          currency: bw.selectedService.effectivePaymentSettings.currency,
+          paymentTerms: bw.selectedService.effectivePaymentSettings.paymentTerms,
+          isSubmitting: bw.isSubmitting,
+          onPaymentAuthorized: bw.finalizePayment
+        }
+      ) : null,
+      !bw.paymentSession ? /* @__PURE__ */ jsx9("button", { type: "submit", className: "idk-button", disabled: bw.isSubmitting, children: bw.isSubmitting ? bw.paymentRequired ? "Preparing payment..." : "Booking..." : bw.paymentRequired ? "Continue to payment" : "Confirm booking" }) : /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "Your details are locked while payment is in progress." })
     ] }),
-    bw.step === "done" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__done", children: [
-      /* @__PURE__ */ jsx8("div", { className: "idk-booking__done-title", children: "Booking confirmed!" }),
-      /* @__PURE__ */ jsx8("p", { className: "idk-booking__done-text", children: "We'll send a confirmation email shortly with your appointment details." }),
-      /* @__PURE__ */ jsx8("button", { type: "button", className: "idk-link", onClick: bw.reset, children: "Book another appointment" })
+    bw.step === "done" && /* @__PURE__ */ jsxs5("div", { className: "idk-booking__done", children: [
+      /* @__PURE__ */ jsx9("div", { className: "idk-booking__done-title", children: "Booking confirmed!" }),
+      /* @__PURE__ */ jsx9("p", { className: "idk-booking__done-text", children: "We'll send a confirmation email shortly with your appointment details." }),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: "idk-link", onClick: bw.reset, children: "Book another appointment" })
     ] })
   ] });
 }
 
 // src/components/BookingWidgetPanel.tsx
-import { useRef as useRef3, useEffect as useEffect2, useState as useState4 } from "react";
+import { useRef as useRef4, useEffect as useEffect3, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 import {
   Scissors,
@@ -1689,12 +2096,54 @@ import {
   ArrowLeft,
   Globe,
   Menu,
-  X
+  X,
+  Dumbbell,
+  Bike,
+  Flame,
+  Footprints,
+  Brain,
+  BookOpen,
+  GraduationCap,
+  Music,
+  Dog,
+  Cat,
+  PawPrint,
+  SprayCan,
+  Home,
+  Shirt,
+  Wind,
+  Stethoscope,
+  Pill,
+  Syringe,
+  Activity,
+  Camera,
+  Video,
+  Paintbrush,
+  Pen,
+  Car,
+  Wrench,
+  Hammer,
+  Leaf,
+  Sun,
+  Flower2,
+  TreePine,
+  Coffee,
+  UtensilsCrossed,
+  Wine,
+  ChefHat,
+  Baby,
+  HandHeart,
+  Users,
+  MessageCircle,
+  Zap,
+  Eye,
+  Droplets,
+  Shield
 } from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
 import Scrollbar from "smooth-scrollbar";
 import OverscrollPlugin from "smooth-scrollbar/plugins/overscroll";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 Scrollbar.use(OverscrollPlugin);
 var DEFAULT_STEP_TITLES = [
   "Schedule your visit",
@@ -1703,29 +2152,211 @@ var DEFAULT_STEP_TITLES = [
   "Your details"
 ];
 var DEFAULT_CATEGORY_ICONS = {
+  // Hair & barber
   hair: Scissors,
   cut: Scissors,
   barber: Scissors,
   styling: Scissors,
-  skin: Sparkles,
-  facial: Sparkles,
+  trim: Scissors,
+  shave: Scissors,
+  beard: Scissors,
+  // Beauty & aesthetics
   beauty: Sparkles,
+  lash: Sparkles,
+  brow: Sparkles,
+  makeup: Sparkles,
+  aestheti: Sparkles,
+  glow: Sparkles,
+  // Skin & facials
+  skin: Droplets,
+  facial: Droplets,
+  complexion: Droplets,
+  peel: Droplets,
+  acne: Droplets,
+  // Massage & spa
   massage: Heart,
   wellness: Heart,
   spa: Heart,
+  relax: Heart,
+  swedish: Heart,
+  deep: Heart,
+  stone: Heart,
+  // Nails
   nail: Palette,
-  color: Palette,
   manicure: Palette,
-  pedicure: Palette
+  pedicure: Palette,
+  gel: Palette,
+  acrylic: Palette,
+  // Fitness & training
+  fitness: Dumbbell,
+  training: Dumbbell,
+  strength: Dumbbell,
+  bootcamp: Dumbbell,
+  gym: Dumbbell,
+  weight: Dumbbell,
+  yoga: Leaf,
+  pilates: Leaf,
+  stretch: Leaf,
+  meditation: Leaf,
+  mindful: Leaf,
+  cardio: Bike,
+  cycling: Bike,
+  spin: Bike,
+  dance: Footprints,
+  ballet: Footprints,
+  jazz: Footprints,
+  hiit: Flame,
+  crossfit: Flame,
+  circuit: Flame,
+  // Medical & therapy
+  consult: Stethoscope,
+  doctor: Stethoscope,
+  exam: Stethoscope,
+  checkup: Stethoscope,
+  assessment: Stethoscope,
+  inject: Syringe,
+  botox: Syringe,
+  filler: Syringe,
+  iv: Syringe,
+  therapy: Brain,
+  counseling: Brain,
+  coaching: Brain,
+  mental: Brain,
+  psycho: Brain,
+  rehab: Activity,
+  chiro: Activity,
+  adjust: Activity,
+  physio: Activity,
+  recovery: Activity,
+  sport: Activity,
+  acupuncture: Zap,
+  cupping: Zap,
+  herbal: Pill,
+  // Education & tutoring
+  tutor: GraduationCap,
+  lesson: GraduationCap,
+  class: GraduationCap,
+  course: GraduationCap,
+  academic: GraduationCap,
+  music: Music,
+  guitar: Music,
+  piano: Music,
+  vocal: Music,
+  drum: Music,
+  singing: Music,
+  prep: BookOpen,
+  study: BookOpen,
+  reading: BookOpen,
+  // Pets
+  dog: Dog,
+  puppy: Dog,
+  cat: Cat,
+  kitten: Cat,
+  pet: PawPrint,
+  groom: PawPrint,
+  brush: PawPrint,
+  // Cleaning
+  clean: SprayCan,
+  saniti: SprayCan,
+  disinfect: SprayCan,
+  residential: Home,
+  house: Home,
+  apartment: Home,
+  move: Home,
+  laundry: Shirt,
+  press: Shirt,
+  // Auto & repair
+  auto: Car,
+  vehicle: Car,
+  car: Car,
+  detailing: Car,
+  repair: Wrench,
+  mechanic: Wrench,
+  maintenance: Wrench,
+  plumb: Wrench,
+  electric: Wrench,
+  handyman: Hammer,
+  install: Hammer,
+  assembl: Hammer,
+  // Creative & photo
+  photo: Camera,
+  portrait: Camera,
+  headshot: Camera,
+  video: Video,
+  film: Video,
+  paint: Paintbrush,
+  art: Paintbrush,
+  drawing: Paintbrush,
+  design: Paintbrush,
+  tattoo: Pen,
+  piercing: Pen,
+  // Food & hospitality
+  cook: ChefHat,
+  chef: ChefHat,
+  culinary: ChefHat,
+  baking: ChefHat,
+  coffee: Coffee,
+  barista: Coffee,
+  tea: Coffee,
+  wine: Wine,
+  tasting: Wine,
+  sommelier: Wine,
+  catering: UtensilsCrossed,
+  meal: UtensilsCrossed,
+  nutrition: UtensilsCrossed,
+  diet: UtensilsCrossed,
+  // Kids & family
+  baby: Baby,
+  infant: Baby,
+  newborn: Baby,
+  prenatal: Baby,
+  postnatal: Baby,
+  kids: Users,
+  children: Users,
+  family: Users,
+  group: Users,
+  // Wellness misc
+  laser: Eye,
+  contour: Sun,
+  tan: Sun,
+  wax: Wind,
+  thread: Wind,
+  sugaring: Wind,
+  remov: Wind,
+  aroma: Flower2,
+  holistic: Flower2,
+  essential: Flower2,
+  outdoor: TreePine,
+  hike: TreePine,
+  adventure: TreePine,
+  // General
+  session: MessageCircle,
+  workshop: MessageCircle,
+  seminar: MessageCircle,
+  package: Shield,
+  membership: Shield,
+  subscription: Shield,
+  plan: Shield,
+  care: HandHeart,
+  support: HandHeart,
+  assist: HandHeart,
+  service: HandHeart
 };
 function getCategoryIcon(name, overrides) {
+  const str = typeof name === "string" ? name : name && typeof name === "object" && "name" in name ? String(name.name) : "";
+  if (!str) return CircleDot;
   const map = { ...DEFAULT_CATEGORY_ICONS, ...overrides };
-  const lower = name.toLowerCase();
+  const lower = str.toLowerCase();
   for (const [kw, Icon] of Object.entries(map)) {
     if (lower.includes(kw)) return Icon;
   }
   return CircleDot;
 }
+function resolveCategoryLabel(cat) {
+  if (typeof cat === "string") return cat;
+  if (cat && typeof cat === "object" && "name" in cat) return String(cat.name);
+  return "";
+}
 function getInitials(name) {
   return name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
 }
@@ -1733,13 +2364,13 @@ function truncate(str, max) {
   return str.length > max ? str.slice(0, max) + "\u2026" : str;
 }
 function DefaultMenuIcon() {
-  return /* @__PURE__ */ jsx9(Menu, { size: 20 });
+  return /* @__PURE__ */ jsx10(Menu, { size: 20 });
 }
 function DefaultCloseIcon() {
-  return /* @__PURE__ */ jsx9(X, { size: 20 });
+  return /* @__PURE__ */ jsx10(X, { size: 20 });
 }
 function DefaultLink({ href, className, onClick, children }) {
-  return /* @__PURE__ */ jsx9("a", { href, className, onClick, children });
+  return /* @__PURE__ */ jsx10("a", { href, className, onClick, children });
 }
 function BookingWidgetPanel({
   mobileHeader,
@@ -1750,20 +2381,18 @@ function BookingWidgetPanel({
   stepTitles,
   linkComponent: LinkComp = DefaultLink
 } = {}) {
-  const widgetRef = useRef3(null);
-  const formRef = useRef3(null);
-  const catScrollRef = useRef3(null);
-  const svcScrollbarRef = useRef3(null);
-  const rightScrollRef = useRef3(null);
-  const staffTriggerRef = useRef3(null);
-  const mobileBodyRef = useRef3(null);
-  const mobileScrollbarRef = useRef3(null);
-  const portalRef = useRef3(null);
-  const [mobileStep, setMobileStep] = useState4(1);
-  const [monthOpen, setMonthOpen] = useState4(false);
-  const [staffOpen, setStaffOpen] = useState4(false);
-  const [navOpen, setNavOpen] = useState4(false);
-  const [localStaff, setLocalStaff] = useState4(null);
+  const widgetRef = useRef4(null);
+  const formRef = useRef4(null);
+  const rightScrollRef = useRef4(null);
+  const staffTriggerRef = useRef4(null);
+  const mobileBodyRef = useRef4(null);
+  const mobileScrollbarRef = useRef4(null);
+  const portalRef = useRef4(null);
+  const [mobileStep, setMobileStep] = useState5(1);
+  const [monthOpen, setMonthOpen] = useState5(false);
+  const [staffOpen, setStaffOpen] = useState5(false);
+  const [navOpen, setNavOpen] = useState5(false);
+  const [localStaff, setLocalStaff] = useState5(null);
   const { data, isLoading: servicesLoading, error: servicesError } = useServices();
   const { data: teamData } = useTeam();
   const allStaff = teamData?.team || [];
@@ -1782,7 +2411,7 @@ function BookingWidgetPanel({
     servicePageSize: 50
   });
   const todayStr = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-  useEffect2(() => {
+  useEffect3(() => {
     if (bw.isAvailabilityLoading || !bw.selectedService || !bw.availabilityByDate) return;
     if (bw.selectedDate) return;
     for (const day of bw.calendarDays) {
@@ -1794,19 +2423,19 @@ function BookingWidgetPanel({
       }
     }
   }, [bw.isAvailabilityLoading, bw.selectedService?.id, bw.availabilityByDate, bw.selectedDate]);
-  const hasMultipleCategories = bw.categories.length > 1;
-  useEffect2(() => {
+  const hasCategories = bw.categories.length >= 1;
+  useEffect3(() => {
     if (bw.categories.length >= 1 && bw.categoryFilter === "all") {
       bw.setCategoryFilter(bw.categories[0]);
     }
   }, [bw.categories.length]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (localStaff && !bw.selectedStaff) {
       bw.selectStaff(localStaff);
     }
   }, [bw.selectedStaff, localStaff]);
   const isReady = !servicesLoading && !bw.isServicesLoading && !!data?.services?.length && bw.step !== "done";
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isReady) return;
     const mq = window.matchMedia("(min-width: 1025px)");
     const scrollbars = [];
@@ -1821,9 +2450,6 @@ function BookingWidgetPanel({
     const init = () => {
       scrollbars.forEach((sb) => sb.destroy());
       scrollbars.length = 0;
-      if (mq.matches && catScrollRef.current) {
-        scrollbars.push(Scrollbar.init(catScrollRef.current, opts));
-      }
       if (mq.matches && rightScrollRef.current) {
         scrollbars.push(Scrollbar.init(rightScrollRef.current, opts));
       }
@@ -1835,25 +2461,7 @@ function BookingWidgetPanel({
       scrollbars.forEach((sb) => sb.destroy());
     };
   }, [isReady, mobileStep]);
-  const initSvcScrollbar = (el) => {
-    if (svcScrollbarRef.current) {
-      try {
-        svcScrollbarRef.current.destroy();
-      } catch {
-      }
-      svcScrollbarRef.current = null;
-    }
-    if (!el || typeof window !== "undefined" && window.matchMedia("(max-width: 1024px)").matches) return;
-    svcScrollbarRef.current = Scrollbar.init(el, {
-      damping: 0.08,
-      continuousScrolling: false,
-      alwaysShowTracks: false,
-      plugins: {
-        overscroll: { effect: "bounce", damping: 0.15, maxOverscroll: 80 }
-      }
-    });
-  };
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isReady) return;
     const mq = window.matchMedia("(max-width: 1024px)");
     const init = () => {
@@ -1888,7 +2496,7 @@ function BookingWidgetPanel({
       }
     };
   }, [isReady]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (mobileScrollbarRef.current) {
       mobileScrollbarRef.current.scrollTo(0, 0, 0);
       mobileScrollbarRef.current.update();
@@ -1906,6 +2514,9 @@ function BookingWidgetPanel({
   const canAdvanceStep2 = !!bw.selectedService;
   const canAdvanceStep3 = !!bw.selectedTime;
   const canSubmit = !!bw.selectedService && !!bw.selectedTime && !bw.isSubmitting;
+  const selectedLocationOption = bw.selectedService?.locationOptions?.find(
+    (option) => option.type === bw.details.locationType
+  );
   const selectedStaff = localStaff;
   const isServiceForStaff = (svc) => {
     if (!selectedStaff) return true;
@@ -1914,47 +2525,47 @@ function BookingWidgetPanel({
   };
   const staffFilteredServices = bw.pagedServices.filter(isServiceForStaff);
   if (servicesLoading || bw.isServicesLoading) {
-    return /* @__PURE__ */ jsxs5("div", { className: "bw", ref: widgetRef, children: [
-      /* @__PURE__ */ jsx9("div", { className: "bw-header", children: /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--text", style: { width: 220, height: 28 } }) }),
-      /* @__PURE__ */ jsxs5("div", { className: "bw-body bw-skel-desktop", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "bw-col bw-col--left", children: [
-          /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginBottom: 10 } }),
-          /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--card", style: { height: 52 } }),
-          /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginTop: 20, marginBottom: 10 } }),
-          /* @__PURE__ */ jsx9("div", { className: "bw-skel-list", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--card", style: { height: 56 } }, i)) })
+    return /* @__PURE__ */ jsxs6("div", { className: "bw", ref: widgetRef, children: [
+      /* @__PURE__ */ jsx10("div", { className: "bw-header", children: /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--text", style: { width: 220, height: 28 } }) }),
+      /* @__PURE__ */ jsxs6("div", { className: "bw-body bw-skel-desktop", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "bw-col bw-col--left", children: [
+          /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginBottom: 10 } }),
+          /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--card", style: { height: 52 } }),
+          /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginTop: 20, marginBottom: 10 } }),
+          /* @__PURE__ */ jsx10("div", { className: "bw-skel-list", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--card", style: { height: 56 } }, i)) })
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "bw-col bw-col--center", children: /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--calendar", style: { height: "100%" } }) }),
-        /* @__PURE__ */ jsx9("div", { className: "bw-col bw-col--right", children: /* @__PURE__ */ jsxs5("div", { className: "bw-skel-list", children: [
-          [...Array(3)].map((_, i) => /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--input" }, i)),
-          /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--input", style: { height: 80 } }),
-          /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--card", style: { height: 48, marginTop: 16 } })
+        /* @__PURE__ */ jsx10("div", { className: "bw-col bw-col--center", children: /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--calendar", style: { height: "100%" } }) }),
+        /* @__PURE__ */ jsx10("div", { className: "bw-col bw-col--right", children: /* @__PURE__ */ jsxs6("div", { className: "bw-skel-list", children: [
+          [...Array(3)].map((_, i) => /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--input" }, i)),
+          /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--input", style: { height: 80 } }),
+          /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--card", style: { height: 48, marginTop: 16 } })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "bw-skel-mobile", children: [
-        /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginBottom: 10 } }),
-        /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--card", style: { height: 52 } }),
-        /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginTop: 24, marginBottom: 10 } }),
-        [...Array(4)].map((_, i) => /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--card", style: { height: 52 } }, i)),
-        /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--card", style: { height: 48, marginTop: "auto" } })
+      /* @__PURE__ */ jsxs6("div", { className: "bw-skel-mobile", children: [
+        /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginBottom: 10 } }),
+        /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--card", style: { height: 52 } }),
+        /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginTop: 24, marginBottom: 10 } }),
+        [...Array(4)].map((_, i) => /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--card", style: { height: 52 } }, i)),
+        /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--card", style: { height: 48, marginTop: "auto" } })
       ] })
     ] });
   }
   if (servicesError) {
     const message = servicesError instanceof Error ? servicesError.message : "Unable to load services.";
-    return /* @__PURE__ */ jsx9("div", { className: "bw", ref: widgetRef, children: /* @__PURE__ */ jsxs5("div", { className: "bw-empty", children: [
+    return /* @__PURE__ */ jsx10("div", { className: "bw", ref: widgetRef, children: /* @__PURE__ */ jsxs6("div", { className: "bw-empty", children: [
       "Booking is unavailable right now. ",
       message
     ] }) });
   }
   if (!data?.services?.length) {
-    return /* @__PURE__ */ jsx9("div", { className: "bw", ref: widgetRef, children: /* @__PURE__ */ jsx9("div", { className: "bw-empty", children: "No services are configured yet." }) });
+    return /* @__PURE__ */ jsx10("div", { className: "bw", ref: widgetRef, children: /* @__PURE__ */ jsx10("div", { className: "bw-empty", children: "No services are configured yet." }) });
   }
   if (bw.step === "done") {
-    return /* @__PURE__ */ jsx9("div", { className: "bw", ref: widgetRef, children: /* @__PURE__ */ jsxs5("div", { className: "bw-done", children: [
-      /* @__PURE__ */ jsx9("div", { className: "bw-done-icon", children: /* @__PURE__ */ jsx9(Check, { size: 28, strokeWidth: 2.5 }) }),
-      /* @__PURE__ */ jsx9("h3", { className: "bw-done-title", children: "You're All Set!" }),
-      /* @__PURE__ */ jsx9("p", { className: "bw-done-text", children: "We've received your booking request. You'll get a confirmation email shortly with all the details." }),
-      /* @__PURE__ */ jsx9("button", { className: "bw-btn-primary", onClick: bw.reset, children: "Book Another Visit" })
+    return /* @__PURE__ */ jsx10("div", { className: "bw", ref: widgetRef, children: /* @__PURE__ */ jsxs6("div", { className: "bw-done", children: [
+      /* @__PURE__ */ jsx10("div", { className: "bw-done-icon", children: /* @__PURE__ */ jsx10(Check, { size: 28, strokeWidth: 2.5 }) }),
+      /* @__PURE__ */ jsx10("h3", { className: "bw-done-title", children: "You're All Set!" }),
+      /* @__PURE__ */ jsx10("p", { className: "bw-done-text", children: "We've received your booking request. You'll get a confirmation email shortly with all the details." }),
+      /* @__PURE__ */ jsx10("button", { className: "bw-btn-primary", onClick: bw.reset, children: "Book Another Visit" })
     ] }) });
   }
   const renderServiceRow = (svc, variant = "inline") => {
@@ -1964,22 +2575,22 @@ function BookingWidgetPanel({
     if (variant === "full") {
       const duration = svc.duration != null ? bw.formatDuration(svc.duration) : null;
       const hasImg = !!imgUrl;
-      return /* @__PURE__ */ jsxs5(
+      return /* @__PURE__ */ jsxs6(
         "button",
         {
           className: `bw-svc-row bw-svc-row--full ${hasImg ? "bw-svc-row--has-img" : ""} ${sel ? "is-active" : ""}`,
           onClick: () => bw.selectService(svc),
           children: [
-            /* @__PURE__ */ jsx9("span", { className: `bw-check bw-check--lg ${sel ? "is-checked" : ""}`, children: sel && /* @__PURE__ */ jsx9(Check, { size: 12 }) }),
-            /* @__PURE__ */ jsxs5("span", { className: "bw-svc-info", children: [
-              /* @__PURE__ */ jsx9("span", { className: "bw-svc-name", children: svc.name }),
-              duration && /* @__PURE__ */ jsx9("span", { className: "bw-svc-meta", children: duration }),
-              desc && /* @__PURE__ */ jsx9("span", { className: "bw-svc-desc", children: desc })
+            /* @__PURE__ */ jsx10("span", { className: `bw-check bw-check--lg ${sel ? "is-checked" : ""}`, children: sel && /* @__PURE__ */ jsx10(Check, { size: 12 }) }),
+            /* @__PURE__ */ jsxs6("span", { className: "bw-svc-info", children: [
+              /* @__PURE__ */ jsx10("span", { className: "bw-svc-name", children: svc.name }),
+              duration && /* @__PURE__ */ jsx10("span", { className: "bw-svc-meta", children: duration }),
+              desc && /* @__PURE__ */ jsx10("span", { className: "bw-svc-desc", children: desc })
             ] }),
-            hasImg ? /* @__PURE__ */ jsxs5("span", { className: "bw-svc-img", children: [
-              /* @__PURE__ */ jsx9("img", { src: imgUrl, alt: svc.name }),
-              svc.price != null && /* @__PURE__ */ jsx9("span", { className: "bw-svc-badge", children: formatPrice(Number(svc.price)) })
-            ] }) : svc.price != null && /* @__PURE__ */ jsx9("span", { className: "bw-svc-price", children: formatPrice(Number(svc.price)) })
+            hasImg ? /* @__PURE__ */ jsxs6("span", { className: "bw-svc-img", children: [
+              /* @__PURE__ */ jsx10("img", { src: imgUrl, alt: svc.name }),
+              svc.price != null && /* @__PURE__ */ jsx10("span", { className: "bw-svc-badge", children: formatPrice(Number(svc.price)) })
+            ] }) : svc.price != null && /* @__PURE__ */ jsx10("span", { className: "bw-svc-price", children: formatPrice(Number(svc.price)) })
           ]
         },
         svc.id
@@ -1989,39 +2600,39 @@ function BookingWidgetPanel({
       svc.duration != null ? bw.formatDuration(svc.duration) : null,
       svc.price != null ? formatPrice(Number(svc.price)) : null
     ].filter(Boolean).join(" \xB7 ");
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "button",
       {
         className: `bw-svc-row ${sel ? "is-active" : ""}`,
         onClick: () => bw.selectService(svc),
         children: [
-          /* @__PURE__ */ jsx9("span", { className: `bw-check ${sel ? "is-checked" : ""}`, children: sel && /* @__PURE__ */ jsx9(Check, { size: 11 }) }),
-          /* @__PURE__ */ jsxs5("span", { className: "bw-svc-info", children: [
-            /* @__PURE__ */ jsx9("span", { className: "bw-svc-name", children: svc.name }),
-            meta && /* @__PURE__ */ jsx9("span", { className: "bw-svc-meta", children: meta }),
-            desc && /* @__PURE__ */ jsx9("span", { className: "bw-svc-desc", children: desc })
+          /* @__PURE__ */ jsx10("span", { className: `bw-check ${sel ? "is-checked" : ""}`, children: sel && /* @__PURE__ */ jsx10(Check, { size: 11 }) }),
+          /* @__PURE__ */ jsxs6("span", { className: "bw-svc-info", children: [
+            /* @__PURE__ */ jsx10("span", { className: "bw-svc-name", children: svc.name }),
+            meta && /* @__PURE__ */ jsx10("span", { className: "bw-svc-meta", children: meta }),
+            desc && /* @__PURE__ */ jsx10("span", { className: "bw-svc-desc", children: desc })
           ] }),
-          imgUrl && /* @__PURE__ */ jsx9("span", { className: "bw-svc-thumb", children: /* @__PURE__ */ jsx9("img", { src: imgUrl, alt: svc.name }) })
+          imgUrl && /* @__PURE__ */ jsx10("span", { className: "bw-svc-thumb", children: /* @__PURE__ */ jsx10("img", { src: imgUrl, alt: svc.name }) })
         ]
       },
       svc.id
     );
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "bw", ref: widgetRef, children: [
-    mobileHeader ? /* @__PURE__ */ jsx9("div", { className: "bw-mobile-header", children: mobileHeader }) : null,
-    /* @__PURE__ */ jsxs5("div", { className: "bw-topbar", children: [
-      /* @__PURE__ */ jsx9("div", { className: "bw-dots", children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx9("div", { className: `bw-dot ${mobileStep > i ? "is-filled" : ""}` }, i)) }),
-      navLinks.length > 0 && /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs6("div", { className: "bw", ref: widgetRef, children: [
+    mobileHeader ? /* @__PURE__ */ jsx10("div", { className: "bw-mobile-header", children: mobileHeader }) : null,
+    /* @__PURE__ */ jsxs6("div", { className: "bw-topbar", children: [
+      /* @__PURE__ */ jsx10("div", { className: "bw-dots", children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx10("div", { className: `bw-dot ${mobileStep > i ? "is-filled" : ""}` }, i)) }),
+      navLinks.length > 0 && /* @__PURE__ */ jsx10(
         "button",
         {
           className: "bw-topbar-menu",
           onClick: () => setNavOpen((o) => !o),
           "aria-label": navOpen ? "Close menu" : "Open menu",
-          children: navOpen ? closeIcon || /* @__PURE__ */ jsx9(DefaultCloseIcon, {}) : menuIcon || /* @__PURE__ */ jsx9(DefaultMenuIcon, {})
+          children: navOpen ? closeIcon || /* @__PURE__ */ jsx10(DefaultCloseIcon, {}) : menuIcon || /* @__PURE__ */ jsx10(DefaultMenuIcon, {})
         }
       )
     ] }),
-    navLinks.length > 0 && /* @__PURE__ */ jsx9(AnimatePresence, { children: navOpen && /* @__PURE__ */ jsx9(
+    navLinks.length > 0 && /* @__PURE__ */ jsx10(AnimatePresence, { children: navOpen && /* @__PURE__ */ jsx10(
       motion.div,
       {
         className: "bw-nav-overlay",
@@ -2029,7 +2640,7 @@ function BookingWidgetPanel({
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         transition: { duration: 0.2 },
-        children: /* @__PURE__ */ jsx9("nav", { className: "bw-nav", children: navLinks.map((link) => /* @__PURE__ */ jsx9(
+        children: /* @__PURE__ */ jsx10("nav", { className: "bw-nav", children: navLinks.map((link) => /* @__PURE__ */ jsx10(
           LinkComp,
           {
             href: link.href,
@@ -2041,23 +2652,23 @@ function BookingWidgetPanel({
         )) })
       }
     ) }),
-    /* @__PURE__ */ jsxs5("div", { className: "bw-header", children: [
-      /* @__PURE__ */ jsx9("h2", { className: "bw-title bw-title--desktop", children: "Schedule your visit" }),
-      /* @__PURE__ */ jsx9("h2", { className: "bw-title bw-title--mobile", children: (stepTitles || DEFAULT_STEP_TITLES)[mobileStep - 1] })
+    /* @__PURE__ */ jsxs6("div", { className: "bw-header", children: [
+      /* @__PURE__ */ jsx10("h2", { className: "bw-title bw-title--desktop", children: "Schedule your visit" }),
+      /* @__PURE__ */ jsx10("h2", { className: "bw-title bw-title--mobile", children: (stepTitles || DEFAULT_STEP_TITLES)[mobileStep - 1] })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "bw-body", "data-mobile-step": mobileStep, ref: mobileBodyRef, children: /* @__PURE__ */ jsxs5("div", { className: "bw-body-inner", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "bw-col bw-col--left", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "bw-step-1", children: [
-          /* @__PURE__ */ jsx9("label", { className: "bw-label", children: "Select Specialist" }),
-          /* @__PURE__ */ jsxs5("div", { className: "bw-staff-dropdown", children: [
-            /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx10("div", { className: "bw-body", "data-mobile-step": mobileStep, ref: mobileBodyRef, children: /* @__PURE__ */ jsxs6("div", { className: "bw-body-inner", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "bw-col bw-col--left", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "bw-step-1", children: [
+          /* @__PURE__ */ jsx10("label", { className: "bw-label", children: "Select Specialist" }),
+          /* @__PURE__ */ jsxs6("div", { className: "bw-staff-dropdown", children: [
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 ref: staffTriggerRef,
                 className: `bw-staff-trigger${selectedStaff ? " has-value" : ""}`,
                 onClick: () => setStaffOpen((o) => !o),
                 children: [
-                  /* @__PURE__ */ jsx9(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx10(
                     motion.span,
                     {
                       className: "bw-staff-trigger-content",
@@ -2065,28 +2676,28 @@ function BookingWidgetPanel({
                       animate: { opacity: 1 },
                       exit: { opacity: 0 },
                       transition: { duration: 0.15 },
-                      children: selectedStaff ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                        /* @__PURE__ */ jsx9("span", { className: "bw-staff-avatar", children: selectedStaff.photo?.url ? /* @__PURE__ */ jsx9("img", { src: selectedStaff.photo.url, alt: selectedStaff.name }) : /* @__PURE__ */ jsx9("span", { className: "bw-staff-initials", children: getInitials(selectedStaff.name) }) }),
-                        /* @__PURE__ */ jsxs5("span", { className: "bw-staff-trigger-info", children: [
-                          /* @__PURE__ */ jsx9("span", { className: "bw-staff-trigger-name", children: selectedStaff.name }),
-                          selectedStaff.bio && /* @__PURE__ */ jsx9("span", { className: "bw-staff-trigger-desc", children: truncate(selectedStaff.bio, 40) })
+                      children: selectedStaff ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                        /* @__PURE__ */ jsx10("span", { className: "bw-staff-avatar", children: selectedStaff.photo?.url ? /* @__PURE__ */ jsx10("img", { src: selectedStaff.photo.url, alt: selectedStaff.name }) : /* @__PURE__ */ jsx10("span", { className: "bw-staff-initials", children: getInitials(selectedStaff.name) }) }),
+                        /* @__PURE__ */ jsxs6("span", { className: "bw-staff-trigger-info", children: [
+                          /* @__PURE__ */ jsx10("span", { className: "bw-staff-trigger-name", children: selectedStaff.name }),
+                          selectedStaff.bio && /* @__PURE__ */ jsx10("span", { className: "bw-staff-trigger-desc", children: truncate(selectedStaff.bio, 40) })
                         ] })
-                      ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                        /* @__PURE__ */ jsx9("span", { className: "bw-staff-avatar bw-staff-avatar--placeholder", children: /* @__PURE__ */ jsx9(User, { size: 14 }) }),
-                        /* @__PURE__ */ jsx9("span", { className: "bw-staff-trigger-info", children: /* @__PURE__ */ jsx9("span", { className: "bw-staff-trigger-name", children: "Any available specialist" }) })
+                      ] }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                        /* @__PURE__ */ jsx10("span", { className: "bw-staff-avatar bw-staff-avatar--placeholder", children: /* @__PURE__ */ jsx10(User, { size: 14 }) }),
+                        /* @__PURE__ */ jsx10("span", { className: "bw-staff-trigger-info", children: /* @__PURE__ */ jsx10("span", { className: "bw-staff-trigger-name", children: "Any available specialist" }) })
                       ] })
                     },
                     selectedStaff?.id ?? "any"
                   ) }),
-                  /* @__PURE__ */ jsx9(ChevronDown, { size: 16, className: "bw-staff-trigger-chevron" })
+                  /* @__PURE__ */ jsx10(ChevronDown, { size: 16, className: "bw-staff-trigger-chevron" })
                 ]
               }
             ),
             portalRef.current && createPortal(
-              /* @__PURE__ */ jsx9(AnimatePresence, { children: staffOpen && (() => {
+              /* @__PURE__ */ jsx10(AnimatePresence, { children: staffOpen && (() => {
                 const rect = staffTriggerRef.current?.getBoundingClientRect();
-                return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                  /* @__PURE__ */ jsx9(
+                return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                  /* @__PURE__ */ jsx10(
                     motion.div,
                     {
                       className: "bw-staff-overlay",
@@ -2097,7 +2708,7 @@ function BookingWidgetPanel({
                       transition: { duration: 0.15 }
                     }
                   ),
-                  /* @__PURE__ */ jsxs5(
+                  /* @__PURE__ */ jsxs6(
                     motion.div,
                     {
                       className: "bw-staff-list",
@@ -2111,7 +2722,7 @@ function BookingWidgetPanel({
                         width: rect.width
                       } : void 0,
                       children: [
-                        /* @__PURE__ */ jsxs5(
+                        /* @__PURE__ */ jsxs6(
                           "button",
                           {
                             className: `bw-staff-option${!selectedStaff ? " is-active" : ""}`,
@@ -2122,10 +2733,10 @@ function BookingWidgetPanel({
                               setStaffOpen(false);
                             },
                             children: [
-                              /* @__PURE__ */ jsx9("span", { className: "bw-staff-avatar bw-staff-avatar--placeholder", children: /* @__PURE__ */ jsx9(User, { size: 14 }) }),
-                              /* @__PURE__ */ jsxs5("span", { className: "bw-staff-option-info", children: [
-                                /* @__PURE__ */ jsx9("span", { className: "bw-staff-option-name", children: "Any Available" }),
-                                /* @__PURE__ */ jsx9("span", { className: "bw-staff-option-desc", children: "First available specialist" })
+                              /* @__PURE__ */ jsx10("span", { className: "bw-staff-avatar bw-staff-avatar--placeholder", children: /* @__PURE__ */ jsx10(User, { size: 14 }) }),
+                              /* @__PURE__ */ jsxs6("span", { className: "bw-staff-option-info", children: [
+                                /* @__PURE__ */ jsx10("span", { className: "bw-staff-option-name", children: "Any Available" }),
+                                /* @__PURE__ */ jsx10("span", { className: "bw-staff-option-desc", children: "First available specialist" })
                               ] })
                             ]
                           }
@@ -2133,7 +2744,7 @@ function BookingWidgetPanel({
                         allStaff.map((member) => {
                           const active = selectedStaff?.id === member.id;
                           const photoUrl = member.photo?.url;
-                          return /* @__PURE__ */ jsxs5(
+                          return /* @__PURE__ */ jsxs6(
                             "button",
                             {
                               className: `bw-staff-option${active ? " is-active" : ""}`,
@@ -2144,10 +2755,10 @@ function BookingWidgetPanel({
                                 setStaffOpen(false);
                               },
                               children: [
-                                /* @__PURE__ */ jsx9("span", { className: "bw-staff-avatar", children: photoUrl ? /* @__PURE__ */ jsx9("img", { src: photoUrl, alt: member.name }) : /* @__PURE__ */ jsx9("span", { className: "bw-staff-initials", children: getInitials(member.name) }) }),
-                                /* @__PURE__ */ jsxs5("span", { className: "bw-staff-option-info", children: [
-                                  /* @__PURE__ */ jsx9("span", { className: "bw-staff-option-name", children: member.name }),
-                                  member.bio && /* @__PURE__ */ jsx9("span", { className: "bw-staff-option-desc", children: truncate(member.bio, 60) })
+                                /* @__PURE__ */ jsx10("span", { className: "bw-staff-avatar", children: photoUrl ? /* @__PURE__ */ jsx10("img", { src: photoUrl, alt: member.name }) : /* @__PURE__ */ jsx10("span", { className: "bw-staff-initials", children: getInitials(member.name) }) }),
+                                /* @__PURE__ */ jsxs6("span", { className: "bw-staff-option-info", children: [
+                                  /* @__PURE__ */ jsx10("span", { className: "bw-staff-option-name", children: member.name }),
+                                  member.bio && /* @__PURE__ */ jsx10("span", { className: "bw-staff-option-desc", children: truncate(member.bio, 60) })
                                 ] })
                               ]
                             },
@@ -2162,93 +2773,75 @@ function BookingWidgetPanel({
               portalRef.current
             )
           ] }),
-          hasMultipleCategories && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-            /* @__PURE__ */ jsx9("label", { className: "bw-label", children: "Select Category" }),
-            /* @__PURE__ */ jsx9("div", { className: "bw-cat-scroll", ref: catScrollRef, children: bw.categories.map((cat, catIdx) => {
+          hasCategories && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+            /* @__PURE__ */ jsx10("label", { className: "bw-label", children: "Select Category" }),
+            /* @__PURE__ */ jsx10("div", { className: "bw-cat-scroll", children: bw.categories.map((cat, catIdx) => {
               const active = bw.categoryFilter === cat;
               const Icon = getCategoryIcon(cat, categoryIcons);
-              const catServices = (data?.services || []).filter((s) => s.category === cat).filter(isServiceForStaff);
-              return /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsxs5(
+              const catServices = (data?.services || []).filter((s) => resolveCategoryLabel(s.category) === cat).filter(isServiceForStaff);
+              return /* @__PURE__ */ jsxs6("div", { children: [
+                /* @__PURE__ */ jsxs6(
                   "button",
                   {
                     className: `bw-cat-card${active ? " is-active" : ""}`,
                     onClick: () => bw.setCategoryFilter(active ? "all" : cat),
                     children: [
-                      /* @__PURE__ */ jsx9(Icon, { size: 20, className: "bw-cat-icon" }),
-                      /* @__PURE__ */ jsx9("span", { className: "bw-cat-name", children: cat }),
-                      /* @__PURE__ */ jsx9(
+                      /* @__PURE__ */ jsx10(Icon, { size: 20, className: "bw-cat-icon" }),
+                      /* @__PURE__ */ jsx10("span", { className: "bw-cat-name", children: cat }),
+                      /* @__PURE__ */ jsx10(
                         motion.span,
                         {
                           className: "bw-cat-chevron",
                           animate: { rotate: active ? 90 : 0 },
                           transition: { duration: 0.2, ease: "easeOut" },
-                          children: /* @__PURE__ */ jsx9(ChevronRight, { size: 16 })
+                          children: /* @__PURE__ */ jsx10(ChevronRight, { size: 16 })
                         }
                       ),
-                      active && /* @__PURE__ */ jsx9("span", { className: "bw-cat-check", children: /* @__PURE__ */ jsx9(Check, { size: 12 }) })
+                      active && /* @__PURE__ */ jsx10("span", { className: "bw-cat-check", children: /* @__PURE__ */ jsx10(Check, { size: 12 }) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "div",
                   {
                     className: `bw-svc-scroll ${active ? "is-open" : ""}`,
-                    ref: (el) => {
-                      if (!el) return;
-                      if (active) {
-                        const wrap = el.querySelector(".bw-svc-scroll-wrap");
-                        if (wrap) requestAnimationFrame(() => initSvcScrollbar(wrap));
-                      } else {
-                        if (svcScrollbarRef.current) {
-                          svcScrollbarRef.current.scrollTo(0, 0, 0);
-                          try {
-                            svcScrollbarRef.current.destroy();
-                          } catch {
-                          }
-                          svcScrollbarRef.current = null;
-                        }
-                      }
-                    },
-                    children: /* @__PURE__ */ jsx9("div", { className: "bw-svc-scroll-wrap", children: /* @__PURE__ */ jsx9("div", { className: "bw-svc-scroll-inner", children: catServices.length ? catServices.map((svc) => renderServiceRow(svc)) : /* @__PURE__ */ jsx9("p", { className: "bw-no-services", children: "No services available" }) }) })
+                    children: /* @__PURE__ */ jsx10("div", { className: "bw-svc-scroll-wrap", children: /* @__PURE__ */ jsx10("div", { className: "bw-svc-scroll-inner", children: catServices.length ? catServices.map((svc) => renderServiceRow(svc)) : /* @__PURE__ */ jsx10("p", { className: "bw-no-services", children: "No services available" }) }) })
                   }
                 )
               ] }, cat);
             }) })
           ] }),
-          !hasMultipleCategories && /* @__PURE__ */ jsx9("div", { className: "bw-svc-scroll is-open", children: /* @__PURE__ */ jsx9("div", { className: "bw-svc-scroll-wrap", ref: (el) => {
-            if (el) requestAnimationFrame(() => initSvcScrollbar(el));
-          }, children: /* @__PURE__ */ jsx9("div", { className: "bw-svc-scroll-inner", children: staffFilteredServices.length ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          !hasCategories && /* @__PURE__ */ jsx10("div", { className: "bw-svc-scroll is-open", children: /* @__PURE__ */ jsx10("div", { className: "bw-svc-scroll-wrap", children: /* @__PURE__ */ jsx10("div", { className: "bw-svc-scroll-inner", children: staffFilteredServices.length ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
             staffFilteredServices.map((svc) => renderServiceRow(svc)),
-            bw.hasMoreServices && /* @__PURE__ */ jsx9("button", { className: "bw-load-more", onClick: bw.loadMoreServices, children: "Show more services" })
-          ] }) : /* @__PURE__ */ jsx9("p", { className: "bw-no-services", children: "No services available" }) }) }) })
+            bw.hasMoreServices && /* @__PURE__ */ jsx10("button", { className: "bw-load-more", onClick: bw.loadMoreServices, children: "Show more services" })
+          ] }) : /* @__PURE__ */ jsx10("p", { className: "bw-no-services", children: "No services available" }) }) }) })
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "bw-step-2", children: [
-          bw.categoryFilter !== "all" && /* @__PURE__ */ jsx9("p", { className: "bw-step-2-heading", children: bw.categoryFilter }),
-          staffFilteredServices.length ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsxs6("div", { className: "bw-step-2", children: [
+          bw.categoryFilter !== "all" && /* @__PURE__ */ jsx10("p", { className: "bw-step-2-heading", children: bw.categoryFilter }),
+          staffFilteredServices.length ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
             staffFilteredServices.map((svc) => renderServiceRow(svc, "full")),
-            bw.hasMoreServices && /* @__PURE__ */ jsx9("button", { className: "bw-load-more", onClick: bw.loadMoreServices, children: "Show more services" })
-          ] }) : /* @__PURE__ */ jsx9("p", { className: "bw-no-services", children: "No services available" })
+            bw.hasMoreServices && /* @__PURE__ */ jsx10("button", { className: "bw-load-more", onClick: bw.loadMoreServices, children: "Show more services" })
+          ] }) : /* @__PURE__ */ jsx10("p", { className: "bw-no-services", children: "No services available" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx9("div", { className: "bw-col bw-col--center", children: /* @__PURE__ */ jsxs5("div", { className: "bw-cal-card", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "bw-cal-header", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "bw-month-dropdown", children: [
-            /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsx10("div", { className: "bw-col bw-col--center", children: /* @__PURE__ */ jsxs6("div", { className: "bw-cal-card", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "bw-cal-header", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "bw-month-dropdown", children: [
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 className: "bw-month-btn",
                 onClick: () => setMonthOpen((o) => !o),
                 children: [
-                  /* @__PURE__ */ jsx9("span", { children: bw.monthOptions.find(
+                  /* @__PURE__ */ jsx10("span", { children: bw.monthOptions.find(
                     (o) => o.value === `${bw.calendarMonth.getFullYear()}-${String(bw.calendarMonth.getMonth() + 1).padStart(2, "0")}`
                   )?.label ?? "Select month" }),
-                  /* @__PURE__ */ jsx9(ChevronDown, { size: 14 })
+                  /* @__PURE__ */ jsx10(ChevronDown, { size: 14 })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx9(AnimatePresence, { children: monthOpen && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-              /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(AnimatePresence, { children: monthOpen && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+              /* @__PURE__ */ jsx10(
                 motion.div,
                 {
                   className: "bw-month-overlay",
@@ -2259,7 +2852,7 @@ function BookingWidgetPanel({
                   transition: { duration: 0.15 }
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 motion.div,
                 {
                   className: "bw-month-list",
@@ -2269,7 +2862,7 @@ function BookingWidgetPanel({
                   transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
                   children: bw.monthOptions.map((opt) => {
                     const cur = `${bw.calendarMonth.getFullYear()}-${String(bw.calendarMonth.getMonth() + 1).padStart(2, "0")}`;
-                    return /* @__PURE__ */ jsx9(
+                    return /* @__PURE__ */ jsx10(
                       "button",
                       {
                         className: `bw-month-option${opt.value === cur ? " is-active" : ""}`,
@@ -2286,21 +2879,21 @@ function BookingWidgetPanel({
               )
             ] }) })
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "bw-cal-navs", children: [
-            /* @__PURE__ */ jsx9("button", { className: "bw-cal-nav", onClick: bw.handlePrevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsx9(ChevronLeft, { size: 18 }) }),
-            /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs6("div", { className: "bw-cal-navs", children: [
+            /* @__PURE__ */ jsx10("button", { className: "bw-cal-nav", onClick: bw.handlePrevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsx10(ChevronLeft, { size: 18 }) }),
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 className: "bw-cal-nav",
                 onClick: bw.handleNextMonth,
                 disabled: bw.maxAdvanceMonthStart ? bw.calendarMonth >= bw.maxAdvanceMonthStart : false,
                 "aria-label": "Next month",
-                children: /* @__PURE__ */ jsx9(ChevronRight, { size: 18 })
+                children: /* @__PURE__ */ jsx10(ChevronRight, { size: 18 })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx9(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsx10(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsxs6(
           motion.div,
           {
             initial: { opacity: 0 },
@@ -2308,8 +2901,8 @@ function BookingWidgetPanel({
             exit: { opacity: 0 },
             transition: { duration: 0.15 },
             children: [
-              /* @__PURE__ */ jsx9("div", { className: "bw-cal-weekdays", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx9("span", { children: d }, d)) }),
-              /* @__PURE__ */ jsx9("div", { className: "bw-cal-grid", children: bw.calendarDays.map((day, i) => {
+              /* @__PURE__ */ jsx10("div", { className: "bw-cal-weekdays", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx10("span", { children: d }, d)) }),
+              /* @__PURE__ */ jsx10("div", { className: "bw-cal-grid", children: bw.calendarDays.map((day, i) => {
                 const dateStr = day.date;
                 const dateObj = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
                 const avail = bw.availabilityByDate?.get(dateStr);
@@ -2319,7 +2912,7 @@ function BookingWidgetPanel({
                 const isPast = dateStr < todayStr;
                 const isBeyondMax = bw.maxAdvanceDate ? dateStr > bw.maxAdvanceDate.toISOString().split("T")[0] : false;
                 const isDisabled = !day.isCurrentMonth || isPast || isBeyondMax;
-                return /* @__PURE__ */ jsx9(
+                return /* @__PURE__ */ jsx10(
                   "button",
                   {
                     className: [
@@ -2345,17 +2938,17 @@ function BookingWidgetPanel({
           },
           `${bw.calendarMonth.getFullYear()}-${bw.calendarMonth.getMonth()}`
         ) }),
-        !bw.selectedService && /* @__PURE__ */ jsx9("p", { className: "bw-cal-prompt", children: "Please select a service to see availability." }),
-        bw.selectedService && bw.isAvailabilityLoading && /* @__PURE__ */ jsx9("div", { className: "bw-skel-slots", children: /* @__PURE__ */ jsx9("div", { className: "bw-skel-slots-grid", children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx9("div", { className: "bw-skel bw-skel--slot" }, i)) }) }),
+        !bw.selectedService && /* @__PURE__ */ jsx10("p", { className: "bw-cal-prompt", children: "Please select a service to see availability." }),
+        bw.selectedService && bw.isAvailabilityLoading && /* @__PURE__ */ jsx10("div", { className: "bw-skel-slots", children: /* @__PURE__ */ jsx10("div", { className: "bw-skel-slots-grid", children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx10("div", { className: "bw-skel bw-skel--slot" }, i)) }) }),
         bw.selectedService && bw.selectedDate && !bw.isAvailabilityLoading && (() => {
           const dateAvail = bw.availabilityByDate?.get(bw.selectedDate);
           const slots = dateAvail?.slots?.filter((s) => s.available) || [];
           if (!slots.length) {
-            return /* @__PURE__ */ jsx9("p", { className: "bw-no-slots", children: "No available times for this date." });
+            return /* @__PURE__ */ jsx10("p", { className: "bw-no-slots", children: "No available times for this date." });
           }
-          return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-            /* @__PURE__ */ jsx9("div", { className: "bw-time-divider" }),
-            /* @__PURE__ */ jsx9("div", { className: "bw-time-slots", children: slots.map((slot, idx) => /* @__PURE__ */ jsx9(
+          return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+            /* @__PURE__ */ jsx10("div", { className: "bw-time-divider" }),
+            /* @__PURE__ */ jsx10("div", { className: "bw-time-slots", children: slots.map((slot, idx) => /* @__PURE__ */ jsx10(
               "button",
               {
                 className: `bw-slot ${bw.selectedTime === slot.time ? "is-active" : ""}`,
@@ -2366,19 +2959,19 @@ function BookingWidgetPanel({
             )) })
           ] });
         })(),
-        bw.timeZoneLabel && /* @__PURE__ */ jsxs5("div", { className: "bw-timezone", children: [
-          /* @__PURE__ */ jsx9(Globe, { size: 14 }),
-          /* @__PURE__ */ jsx9("span", { children: bw.timeZoneLabel })
+        bw.timeZoneLabel && /* @__PURE__ */ jsxs6("div", { className: "bw-timezone", children: [
+          /* @__PURE__ */ jsx10(Globe, { size: 14 }),
+          /* @__PURE__ */ jsx10("span", { children: bw.timeZoneLabel })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx9("div", { className: "bw-col bw-col--right", children: /* @__PURE__ */ jsx9("div", { className: "bw-right-scroll", ref: rightScrollRef, children: /* @__PURE__ */ jsx9("div", { className: "bw-right-inner", children: /* @__PURE__ */ jsxs5("form", { className: "bw-form", ref: formRef, onSubmit: handleFormSubmit, children: [
-        /* @__PURE__ */ jsxs5("div", { className: "bw-form-fields", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "bw-field", children: [
-            /* @__PURE__ */ jsxs5("label", { htmlFor: "bw-name", children: [
+      /* @__PURE__ */ jsx10("div", { className: "bw-col bw-col--right", children: /* @__PURE__ */ jsx10("div", { className: "bw-right-scroll", ref: rightScrollRef, children: /* @__PURE__ */ jsx10("div", { className: "bw-right-inner", children: /* @__PURE__ */ jsxs6("form", { className: "bw-form", ref: formRef, onSubmit: handleFormSubmit, children: [
+        /* @__PURE__ */ jsxs6("div", { className: "bw-form-fields", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "bw-field", children: [
+            /* @__PURE__ */ jsxs6("label", { htmlFor: "bw-name", children: [
               "Full name ",
-              /* @__PURE__ */ jsx9("span", { className: "bw-required", children: "*" })
+              /* @__PURE__ */ jsx10("span", { className: "bw-required", children: "*" })
             ] }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 id: "bw-name",
@@ -2386,16 +2979,17 @@ function BookingWidgetPanel({
                 required: true,
                 placeholder: "John",
                 value: bw.details.name,
-                onChange: (e) => bw.setDetails((p) => ({ ...p, name: e.target.value }))
+                onChange: (e) => bw.setDetails((p) => ({ ...p, name: e.target.value })),
+                disabled: Boolean(bw.paymentSession)
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "bw-field", children: [
-            /* @__PURE__ */ jsxs5("label", { htmlFor: "bw-email", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "bw-field", children: [
+            /* @__PURE__ */ jsxs6("label", { htmlFor: "bw-email", children: [
               "Email ",
-              /* @__PURE__ */ jsx9("span", { className: "bw-required", children: "*" })
+              /* @__PURE__ */ jsx10("span", { className: "bw-required", children: "*" })
             ] }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 id: "bw-email",
@@ -2403,27 +2997,50 @@ function BookingWidgetPanel({
                 required: true,
                 placeholder: "jane@example.com",
                 value: bw.details.email,
-                onChange: (e) => bw.setDetails((p) => ({ ...p, email: e.target.value }))
+                onChange: (e) => bw.setDetails((p) => ({ ...p, email: e.target.value })),
+                disabled: Boolean(bw.paymentSession)
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "bw-field", children: [
-            /* @__PURE__ */ jsx9("label", { htmlFor: "bw-phone", children: "Phone" }),
-            /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs6("div", { className: "bw-field", children: [
+            /* @__PURE__ */ jsx10("label", { htmlFor: "bw-phone", children: "Phone" }),
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 id: "bw-phone",
                 type: "tel",
                 placeholder: "+1 (555) 000-0000",
                 value: bw.details.phone,
-                onChange: (e) => bw.setDetails((p) => ({ ...p, phone: e.target.value }))
+                onChange: (e) => bw.setDetails((p) => ({ ...p, phone: e.target.value })),
+                disabled: Boolean(bw.paymentSession)
               }
             )
-          ] })
+          ] }),
+          bw.selectedService?.locationOptions?.length ? /* @__PURE__ */ jsxs6("div", { className: "bw-field", children: [
+            /* @__PURE__ */ jsxs6("label", { htmlFor: "bw-location", children: [
+              "Location ",
+              /* @__PURE__ */ jsx10("span", { className: "bw-required", children: "*" })
+            ] }),
+            /* @__PURE__ */ jsx10(
+              "select",
+              {
+                id: "bw-location",
+                value: bw.details.locationType,
+                onChange: (e) => bw.setDetails((p) => ({
+                  ...p,
+                  locationType: e.target.value
+                })),
+                disabled: Boolean(bw.paymentSession),
+                required: true,
+                children: bw.selectedService.locationOptions.map((option) => /* @__PURE__ */ jsx10("option", { value: option.type, children: option.label }, option.type))
+              }
+            ),
+            selectedLocationOption?.details ? /* @__PURE__ */ jsx10("span", { className: "bw-char-count", style: { justifyContent: "flex-start" }, children: selectedLocationOption.details }) : null
+          ] }) : null
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "bw-field bw-field--notes", children: [
-          /* @__PURE__ */ jsx9("label", { htmlFor: "bw-notes", children: "Additional notes" }),
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs6("div", { className: "bw-field bw-field--notes", children: [
+          /* @__PURE__ */ jsx10("label", { htmlFor: "bw-notes", children: "Additional notes" }),
+          /* @__PURE__ */ jsx10(
             "textarea",
             {
               id: "bw-notes",
@@ -2432,119 +3049,142 @@ function BookingWidgetPanel({
               maxLength: 500,
               style: { resize: "none" },
               value: bw.details.notes,
-              onChange: (e) => bw.setDetails((p) => ({ ...p, notes: e.target.value }))
+              onChange: (e) => bw.setDetails((p) => ({ ...p, notes: e.target.value })),
+              disabled: Boolean(bw.paymentSession)
             }
           ),
-          /* @__PURE__ */ jsxs5("span", { className: "bw-char-count", children: [
+          /* @__PURE__ */ jsxs6("span", { className: "bw-char-count", children: [
             bw.details.notes?.length || 0,
             "/500"
           ] })
         ] }),
-        bw.selectedService && /* @__PURE__ */ jsxs5("div", { className: "bw-summary", children: [
-          /* @__PURE__ */ jsx9("span", { className: "bw-summary-title", children: "Booking Summary" }),
-          /* @__PURE__ */ jsxs5("div", { className: "bw-summary-rows", children: [
-            /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row", children: [
-              /* @__PURE__ */ jsx9("span", { children: "Service" }),
-              /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: bw.selectedService.name })
+        bw.selectedService && /* @__PURE__ */ jsxs6("div", { className: "bw-summary", children: [
+          /* @__PURE__ */ jsx10("span", { className: "bw-summary-title", children: "Booking Summary" }),
+          /* @__PURE__ */ jsxs6("div", { className: "bw-summary-rows", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ jsx10("span", { children: "Service" }),
+              /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: bw.selectedService.name })
             ] }),
-            /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row", children: [
-              /* @__PURE__ */ jsx9("span", { children: "Specialist" }),
-              /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: selectedStaff?.name || "Any Available" })
+            /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ jsx10("span", { children: "Specialist" }),
+              /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: selectedStaff?.name || "Any Available" })
             ] }),
-            bw.selectedDate && /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row", children: [
-              /* @__PURE__ */ jsx9("span", { children: "Date" }),
-              /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: bw.formatDateLabel(bw.selectedDate) })
+            bw.selectedDate && /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ jsx10("span", { children: "Date" }),
+              /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: bw.formatDateLabel(bw.selectedDate) })
             ] }),
-            bw.selectedTime && /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row", children: [
-              /* @__PURE__ */ jsx9("span", { children: "Time" }),
-              /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: bw.formatTimeLabel(bw.selectedTime) })
+            bw.selectedTime && /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ jsx10("span", { children: "Time" }),
+              /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: bw.formatTimeLabel(bw.selectedTime) })
             ] }),
-            bw.selectedService.duration != null && /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row", children: [
-              /* @__PURE__ */ jsx9("span", { children: "Duration" }),
-              /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: bw.formatDuration(bw.selectedService.duration) })
+            bw.selectedService.duration != null && /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ jsx10("span", { children: "Duration" }),
+              /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: bw.formatDuration(bw.selectedService.duration) })
             ] }),
-            bw.selectedService.price != null && /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row bw-summary-total", children: [
-              /* @__PURE__ */ jsx9("span", { children: "Estimated total" }),
-              /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: formatPrice(Number(bw.selectedService.price)) })
+            bw.details.locationType && bw.selectedService.locationOptions?.length ? /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ jsx10("span", { children: "Location" }),
+              /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: selectedLocationOption?.label || bw.details.locationType })
+            ] }) : null,
+            bw.selectedService.price != null && /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row bw-summary-total", children: [
+              /* @__PURE__ */ jsx10("span", { children: "Estimated total" }),
+              /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: formatPrice(Number(bw.selectedService.price)) })
             ] })
           ] })
         ] }),
-        bw.bookingError && /* @__PURE__ */ jsx9("div", { className: "bw-error", children: bw.bookingError }),
-        !canSubmit && !bw.isSubmitting && /* @__PURE__ */ jsx9("p", { className: "bw-confirm-hint", children: !bw.selectedService ? "Please select a service to confirm booking." : !bw.selectedTime ? "Please select a time to confirm booking." : "" }),
-        /* @__PURE__ */ jsxs5("button", { type: "submit", className: "bw-confirm-btn", disabled: !canSubmit, children: [
-          /* @__PURE__ */ jsx9("span", { children: bw.isSubmitting ? "Booking..." : "Confirm Booking" }),
-          !bw.isSubmitting && /* @__PURE__ */ jsx9(ArrowRight, { size: 16 })
-        ] })
+        bw.bookingError && /* @__PURE__ */ jsx10("div", { className: "bw-error", children: bw.bookingError }),
+        bw.paymentSession && bw.selectedService?.effectivePaymentSettings ? /* @__PURE__ */ jsx10(
+          StripePaymentSection,
+          {
+            bookingId: bw.paymentSession.bookingId,
+            clientSecret: bw.paymentSession.clientSecret,
+            publishableKey: bw.paymentSession.publishableKey,
+            paymentIntentId: bw.paymentSession.paymentIntentId,
+            customerName: bw.details.name,
+            customerEmail: bw.details.email,
+            customerPhone: bw.details.phone || void 0,
+            amountDueNow: bw.selectedService.effectivePaymentSettings.amountDueNow,
+            fullAmount: bw.selectedService.effectivePaymentSettings.fullAmount,
+            currency: bw.selectedService.effectivePaymentSettings.currency,
+            paymentTerms: bw.selectedService.effectivePaymentSettings.paymentTerms,
+            isSubmitting: bw.isSubmitting,
+            onPaymentAuthorized: bw.finalizePayment
+          }
+        ) : null,
+        !canSubmit && !bw.isSubmitting && /* @__PURE__ */ jsx10("p", { className: "bw-confirm-hint", children: !bw.selectedService ? "Please select a service to confirm booking." : !bw.selectedTime ? "Please select a time to confirm booking." : "" }),
+        !bw.paymentSession ? /* @__PURE__ */ jsxs6("button", { type: "submit", className: "bw-confirm-btn", disabled: !canSubmit, children: [
+          /* @__PURE__ */ jsx10("span", { children: bw.isSubmitting ? bw.paymentRequired ? "Preparing payment..." : "Booking..." : bw.paymentRequired ? "Continue to payment" : "Confirm Booking" }),
+          !bw.isSubmitting && /* @__PURE__ */ jsx10(ArrowRight, { size: 16 })
+        ] }) : /* @__PURE__ */ jsx10("p", { className: "bw-confirm-hint", children: "Your details are locked while payment is in progress." })
       ] }) }) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs5("div", { className: "bw-footer", children: [
-      mobileStep === 4 && bw.selectedService && /* @__PURE__ */ jsxs5("div", { className: "bw-footer-summary", children: [
-        /* @__PURE__ */ jsx9("span", { className: "bw-summary-title", children: "Booking Summary" }),
-        /* @__PURE__ */ jsxs5("div", { className: "bw-summary-rows", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row", children: [
-            /* @__PURE__ */ jsx9("span", { children: "Service" }),
-            /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: bw.selectedService.name })
+    /* @__PURE__ */ jsxs6("div", { className: "bw-footer", children: [
+      mobileStep === 4 && bw.selectedService && /* @__PURE__ */ jsxs6("div", { className: "bw-footer-summary", children: [
+        /* @__PURE__ */ jsx10("span", { className: "bw-summary-title", children: "Booking Summary" }),
+        /* @__PURE__ */ jsxs6("div", { className: "bw-summary-rows", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+            /* @__PURE__ */ jsx10("span", { children: "Service" }),
+            /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: bw.selectedService.name })
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row", children: [
-            /* @__PURE__ */ jsx9("span", { children: "Specialist" }),
-            /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: selectedStaff?.name || "Any Available" })
+          /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+            /* @__PURE__ */ jsx10("span", { children: "Specialist" }),
+            /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: selectedStaff?.name || "Any Available" })
           ] }),
-          bw.selectedDate && /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row", children: [
-            /* @__PURE__ */ jsx9("span", { children: "Date" }),
-            /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: bw.formatDateLabel(bw.selectedDate) })
+          bw.selectedDate && /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+            /* @__PURE__ */ jsx10("span", { children: "Date" }),
+            /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: bw.formatDateLabel(bw.selectedDate) })
           ] }),
-          bw.selectedTime && /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row", children: [
-            /* @__PURE__ */ jsx9("span", { children: "Time" }),
-            /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: bw.formatTimeLabel(bw.selectedTime) })
+          bw.selectedTime && /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row", children: [
+            /* @__PURE__ */ jsx10("span", { children: "Time" }),
+            /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: bw.formatTimeLabel(bw.selectedTime) })
           ] }),
-          bw.selectedService.price != null && /* @__PURE__ */ jsxs5("div", { className: "bw-summary-row bw-summary-total", children: [
-            /* @__PURE__ */ jsx9("span", { children: "Estimated total" }),
-            /* @__PURE__ */ jsx9("span", { className: "bw-summary-val", children: formatPrice(Number(bw.selectedService.price)) })
+          bw.selectedService.price != null && /* @__PURE__ */ jsxs6("div", { className: "bw-summary-row bw-summary-total", children: [
+            /* @__PURE__ */ jsx10("span", { children: "Estimated total" }),
+            /* @__PURE__ */ jsx10("span", { className: "bw-summary-val", children: formatPrice(Number(bw.selectedService.price)) })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "bw-footer-btns", children: [
-        mobileStep > 1 && /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsxs6("div", { className: "bw-footer-btns", children: [
+        mobileStep > 1 && /* @__PURE__ */ jsx10(
           "button",
           {
             className: "bw-footer-back",
             onClick: () => setMobileStep((s) => s - 1),
             "aria-label": "Go back",
-            children: /* @__PURE__ */ jsx9(ArrowLeft, { size: 20 })
+            children: /* @__PURE__ */ jsx10(ArrowLeft, { size: 20 })
           }
         ),
-        mobileStep < 4 ? /* @__PURE__ */ jsxs5(
+        mobileStep < 4 ? /* @__PURE__ */ jsxs6(
           "button",
           {
             className: "bw-footer-next",
             disabled: mobileStep === 1 && !canAdvanceStep1 || mobileStep === 2 && !canAdvanceStep2 || mobileStep === 3 && !canAdvanceStep3,
             onClick: () => setMobileStep((s) => s + 1),
             children: [
-              /* @__PURE__ */ jsx9("span", { children: "Next" }),
-              /* @__PURE__ */ jsx9(ArrowRight, { size: 16 })
+              /* @__PURE__ */ jsx10("span", { children: "Next" }),
+              /* @__PURE__ */ jsx10(ArrowRight, { size: 16 })
             ]
           }
-        ) : /* @__PURE__ */ jsxs5(
+        ) : /* @__PURE__ */ jsx10(Fragment2, { children: !bw.paymentSession ? /* @__PURE__ */ jsxs6(
           "button",
           {
             className: "bw-footer-next",
             disabled: !canSubmit,
             onClick: () => formRef.current?.requestSubmit(),
             children: [
-              /* @__PURE__ */ jsx9("span", { children: bw.isSubmitting ? "Booking..." : "Confirm Booking" }),
-              !bw.isSubmitting && /* @__PURE__ */ jsx9(ArrowRight, { size: 16 })
+              /* @__PURE__ */ jsx10("span", { children: bw.isSubmitting ? bw.paymentRequired ? "Preparing payment..." : "Booking..." : bw.paymentRequired ? "Continue to payment" : "Confirm Booking" }),
+              !bw.isSubmitting && /* @__PURE__ */ jsx10(ArrowRight, { size: 16 })
             ]
           }
-        )
+        ) : /* @__PURE__ */ jsx10("div", { className: "bw-confirm-hint", children: "Use the secure payment form above to finish booking." }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx9("div", { ref: portalRef, className: "bw-portal" })
+    /* @__PURE__ */ jsx10("div", { ref: portalRef, className: "bw-portal" })
   ] });
 }
 
 // src/components/AvailabilityPicker.tsx
-import { useState as useState5 } from "react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function AvailabilityPicker({
   serviceId,
   staffId,
@@ -2553,8 +3193,8 @@ function AvailabilityPicker({
   className,
   onSelect
 }) {
-  const [selectedDate, setSelectedDate] = useState5(date || null);
-  const [selectedTime, setSelectedTime] = useState5(null);
+  const [selectedDate, setSelectedDate] = useState6(date || null);
+  const [selectedTime, setSelectedTime] = useState6(null);
   const { data, isLoading } = useAvailability({
     serviceId,
     staffId,
@@ -2562,15 +3202,15 @@ function AvailabilityPicker({
     days
   });
   if (isLoading) {
-    return /* @__PURE__ */ jsx10("div", { className: "idk-state", children: "Loading availability..." });
+    return /* @__PURE__ */ jsx11("div", { className: "idk-state", children: "Loading availability..." });
   }
   if (!data?.dates?.length) {
-    return /* @__PURE__ */ jsx10("div", { className: "idk-state", children: "No availability found." });
+    return /* @__PURE__ */ jsx11("div", { className: "idk-state", children: "No availability found." });
   }
   const activeDate = selectedDate || data.dates[0]?.date;
   const activeSlots = data.dates.find((entry) => entry.date === activeDate)?.slots || [];
-  return /* @__PURE__ */ jsxs6("div", { className: ["idk-availability", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx10("div", { className: "idk-availability__dates", children: data.dates.map((entry) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs7("div", { className: ["idk-availability", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx11("div", { className: "idk-availability__dates", children: data.dates.map((entry) => /* @__PURE__ */ jsx11(
       "button",
       {
         type: "button",
@@ -2583,7 +3223,7 @@ function AvailabilityPicker({
       },
       entry.date
     )) }),
-    /* @__PURE__ */ jsx10("div", { className: "idk-availability__slots", children: activeSlots.filter((slot) => slot.available).length === 0 ? /* @__PURE__ */ jsx10("div", { className: "idk-state", children: "No slots available." }) : activeSlots.filter((slot) => slot.available).map((slot) => /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11("div", { className: "idk-availability__slots", children: activeSlots.filter((slot) => slot.available).length === 0 ? /* @__PURE__ */ jsx11("div", { className: "idk-state", children: "No slots available." }) : activeSlots.filter((slot) => slot.available).map((slot) => /* @__PURE__ */ jsx11(
       "button",
       {
         type: "button",
@@ -2606,22 +3246,22 @@ function AvailabilityPicker({
 }
 
 // src/components/ServicePicker.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function ServicePicker({
   services,
   selectedId,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ jsx11("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: services.map((service) => /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx12("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: services.map((service) => /* @__PURE__ */ jsxs8(
     "button",
     {
       type: "button",
       className: selectedId === service.id ? "is-active" : void 0,
       onClick: () => onSelect?.(service),
       children: [
-        /* @__PURE__ */ jsx11("span", { children: service.name }),
-        /* @__PURE__ */ jsxs7("small", { children: [
+        /* @__PURE__ */ jsx12("span", { children: service.name }),
+        /* @__PURE__ */ jsxs8("small", { children: [
           service.duration,
           " min"
         ] })
@@ -2632,22 +3272,22 @@ function ServicePicker({
 }
 
 // src/components/StaffPicker.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function StaffPicker({
   staff,
   selectedId,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ jsx12("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: staff.map((member) => /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx13("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: staff.map((member) => /* @__PURE__ */ jsxs9(
     "button",
     {
       type: "button",
       className: selectedId === member.id ? "is-active" : void 0,
       onClick: () => onSelect?.(member),
       children: [
-        /* @__PURE__ */ jsx12("span", { children: member.name }),
-        /* @__PURE__ */ jsx12("small", { children: member.role || "Staff" })
+        /* @__PURE__ */ jsx13("span", { children: member.name }),
+        /* @__PURE__ */ jsx13("small", { children: member.role || "Staff" })
       ]
     },
     member.id
@@ -2655,14 +3295,14 @@ function StaffPicker({
 }
 
 // src/components/DatePicker.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function DatePicker({
   dates,
   selectedDate,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ jsx13("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: dates.map((date) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: dates.map((date) => /* @__PURE__ */ jsx14(
     "button",
     {
       type: "button",
@@ -2675,14 +3315,14 @@ function DatePicker({
 }
 
 // src/components/TimePicker.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function TimePicker({
   slots,
   selectedTime,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ jsx14("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: slots.map((slot) => /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: slots.map((slot) => /* @__PURE__ */ jsx15(
     "button",
     {
       type: "button",