@bigz-app/booking-widget 1.4.2 → 1.4.4

package/dist/booking-widget.js

@@ -2103,6 +2103,28 @@
               c = `0x${c.join("")}`;
               return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",");
           };
+          // Pick a readable text color (dark or light) for content sitting on top of
+          // the given background color. Bright/neon highlights (teal, matrix green,
+          // gold, etc.) need dark text — white text on them is unreadable.
+          const getContrastingTextColor = (color, lightColor = "#ffffff", darkColor = "#0e1420") => {
+              let rgb;
+              if (color.startsWith("#")) {
+                  rgb = hexToRgb(color);
+              }
+              else if (color.startsWith("rgb")) {
+                  rgb = color.replace(/rgba?\(|\)/g, "").split(",").slice(0, 3).join(",");
+              }
+              else {
+                  return lightColor; // Can't parse (e.g. hsl/oklch/semantic) — keep existing default
+              }
+              const [r, g, b] = rgb.split(",").map((n) => parseInt(n, 10) / 255);
+              if ([r, g, b].some((n) => Number.isNaN(n)))
+                  return lightColor;
+              // Relative luminance (sRGB, WCAG)
+              const toLinear = (n) => (n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4));
+              const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+              return luminance > 0.45 ? darkColor : lightColor;
+          };
           const colors = config.colors || {};
           const finalColors = {
               highlight: getCSSValue(colors.highlight, themeDefaults.highlight),
@@ -2122,7 +2144,7 @@
               "--bw-surface-color": finalColors.surface,
               "--bw-text-color": finalColors.text,
               "--bw-text-muted": addOpacity(finalColors.text, 0.7),
-              "--bw-button-text-color": themeDefaults.buttonTextColor || "#ffffff",
+              "--bw-button-text-color": themeDefaults.buttonTextColor || getContrastingTextColor(finalColors.highlight),
               "--bw-border-color": finalColors.border,
               "--bw-success-color": finalColors.success,
               "--bw-warning-color": finalColors.warning,
@@ -2140,6 +2162,9 @@
               "--bw-highlight-muted": addOpacity(finalColors.highlight, 0.1),
               "--bw-highlight-subtle": addOpacity(finalColors.highlight, 0.05),
               "--bw-text-subtle": addOpacity(finalColors.text, 0.4),
+              // Some themes (neon-brutalism) call for uppercased titles & buttons
+              "--bw-text-transform": themeName === "dark-neon-brutalism" ? "uppercase" : "none",
+              "--bw-letter-spacing": themeName === "dark-neon-brutalism" ? "0.04em" : "normal",
               colorScheme: (["navy-night", "green-deep", "green-matrix", "gold-luxury", "purple-electric", "dark-neon-brutalism", "amber-retro", "orange-raw"].includes(themeName) || themeName.startsWith("dark-")) ? "dark" : "light",
           };
       }, [
@@ -7367,6 +7392,8 @@
                                       fontSize: "16px",
                                       color: "var(--bw-text-color)",
                                       fontFamily: "var(--bw-font-family)",
+                                      textTransform: "var(--bw-text-transform, none)",
+                                      letterSpacing: "var(--bw-letter-spacing, normal)",
                                       flex: 1,
                                       paddingRight: "12px",
                                       minWidth: 0,
@@ -11544,6 +11571,8 @@
       transition: "all 0.2s ease",
       whiteSpace: "nowrap",
       border: "none",
+      textTransform: "var(--bw-text-transform, none)",
+      letterSpacing: "var(--bw-letter-spacing, normal)",
   };
   // CSS class name for button hover effects
   const buttonClassName = "bw-button-hover";
@@ -12952,19 +12981,21 @@
                                           textAlign: "right",
                                       }, children: u$2("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), isAvailable && (u$2("button", { onClick: handleBookingClick, style: {
                                   backgroundColor: "var(--bw-highlight-color)",
-                                  color: "#ffffff",
+                                  color: "var(--bw-button-text-color, #ffffff)",
                                   padding: "14px 28px",
                                   border: "none",
                                   borderRadius: "var(--bw-border-radius)",
                                   fontSize: "16px",
                                   fontWeight: 600,
                                   fontFamily: "var(--bw-font-family)",
+                                  textTransform: "var(--bw-text-transform, none)",
+                                  letterSpacing: "var(--bw-letter-spacing, normal)",
                                   display: "flex",
                                   alignItems: "center",
                                   gap: "8px",
                                   cursor: "pointer",
                                   transition: "all 0.2s ease",
-                              }, children: [u$2(IconWave, { size: 20, color: "white" }), t("button.bookNow")] }))] }), !isAvailable && (u$2("div", { style: {
+                              }, children: [u$2(IconWave, { size: 20, color: "var(--bw-button-text-color, #ffffff)" }), t("button.bookNow")] }))] }), !isAvailable && (u$2("div", { style: {
                           position: "absolute",
                           inset: 0,
                           backgroundColor: "rgba(0, 0, 0, 0.3)",
@@ -14250,15 +14281,15 @@
                                               backgroundColor: isAvailable
                                                   ? "var(--bw-success-color)"
                                                   : "var(--bw-error-color)",
-                                          }, children: isAvailable ? t("events.spotsAvailable") : t("events.soldOut") }) }), u$2("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$2("div", { style: {
-                                              fontSize: "13px",
-                                              color: "var(--bw-surface-color)",
-                                              fontWeight: 600,
-                                              backgroundColor: "var(--bw-highlight-color)",
-                                              padding: "2px 8px",
-                                              borderRadius: "var(--bw-border-radius)",
-                                              fontFamily: "var(--bw-font-family)",
-                                          }, children: eventType.category.name }) }), u$2("div", { className: "event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: u$2(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), u$2("div", { className: "event-type-content", style: {
+                                          }, children: isAvailable ? t("events.spotsAvailable") : t("events.soldOut") }) }), eventType.images && eventType.images.length > 0 && (u$2(k$3, { children: [u$2("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: u$2("div", { style: {
+                                                      fontSize: "13px",
+                                                      color: "var(--bw-surface-color)",
+                                                      fontWeight: 600,
+                                                      backgroundColor: "var(--bw-highlight-color)",
+                                                      padding: "2px 8px",
+                                                      borderRadius: "var(--bw-border-radius)",
+                                                      fontFamily: "var(--bw-font-family)",
+                                                  }, children: eventType.category.name }) }), u$2("div", { className: "event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: u$2(ImageCarousel, { images: eventType.images, eventName: eventType.name }) })] })), u$2("div", { className: "event-type-content", style: {
                                           padding: "12px 18px",
                                           display: "flex",
                                           flexDirection: "column",
@@ -14401,8 +14432,7 @@
                                                           alignItems: "center",
                                                           marginTop: "10px",
                                                           gap: "12px",
-                                                      }, children: [(eventType.description ||
-                                                              (eventType.highlights && eventType.highlights.length > 0)) && (u$2("button", { onClick: (e) => {
+                                                      }, children: [eventType.description && (u$2("button", { onClick: (e) => {
                                                                   e.stopPropagation();
                                                                   handleShowDetails(eventType);
                                                               }, style: {
@@ -14421,12 +14451,14 @@
                                                                   transition: "all 0.2s ease",
                                                               }, children: t("button.moreDetails") })), isAvailable && (u$2("div", { style: {
                                                                   backgroundColor: "var(--bw-highlight-color)",
-                                                                  color: "var(--bw-surface-color)",
+                                                                  color: "var(--bw-button-text-color, #ffffff)",
                                                                   padding: "12px 14px",
                                                                   borderRadius: "var(--bw-border-radius)",
                                                                   fontSize: "clamp(1rem, 2vw, 16px)",
                                                                   fontWeight: 600,
                                                                   fontFamily: "var(--bw-font-family)",
+                                                                  textTransform: "var(--bw-text-transform, none)",
+                                                                  letterSpacing: "var(--bw-letter-spacing, normal)",
                                                                   display: "flex",
                                                                   alignItems: "center",
                                                                   justifyContent: "center",
@@ -14435,7 +14467,7 @@
                                                                   border: "none",
                                                                   cursor: "pointer",
                                                                   transition: "all 0.2s ease",
-                                                              }, children: [u$2(IconWave, { size: 15, color: "var(--bw-surface-color)" }), " ", t("button.bookNow")] }))] })] })] }), showVoucherAttachment && onVoucherClick && (u$2(VoucherAttachment, { onClick: () => onVoucherClick(eventType.id) })), !isAvailable && (u$2("div", { style: {
+                                                              }, children: [u$2(IconWave, { size: 15, color: "var(--bw-button-text-color, #ffffff)" }), " ", t("button.bookNow")] }))] })] })] }), showVoucherAttachment && onVoucherClick && (u$2(VoucherAttachment, { onClick: () => onVoucherClick(eventType.id) })), !isAvailable && (u$2("div", { style: {
                                           position: "absolute",
                                           inset: 0,
                                           backgroundColor: "rgba(0, 0, 0, 0.3)",
@@ -14858,7 +14890,7 @@
                       }) })] }) }));
   }
 
-  function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText, showAllButton, isLoadingEventDetails = false, isLoadingShowAll = false, isLoading = false, }) {
+  function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText, showAllButton, isLoadingEventDetails = false, isLoadingShowAll = false, isLoading = false, count = 3, }) {
       const t = useTranslations();
       const { locale } = useLocale();
       const timezone = useTimezone();
@@ -14910,7 +14942,7 @@
       };
       // Show loading skeleton
       if (isLoading) {
-          return u$2(NextEventsSkeleton, { count: 3 });
+          return u$2(NextEventsSkeleton, { count: count });
       }
       if (events.length === 0) {
           return (u$2("div", { style: { maxWidth: "500px", margin: "0 auto", padding: "16px" }, children: u$2("div", { style: {
@@ -14966,55 +14998,44 @@
                               gap: "8px",
                           }, children: [u$2("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), t("common.reload")] })] }) }));
       }
+      const today = new Date();
       return (u$2("div", { style: {
               maxWidth: "500px",
               margin: "0 auto",
               padding: "12px 16px",
               fontFamily: "var(--bw-font-family)",
-          }, children: [u$2("div", { style: { display: "flex", flexDirection: "column", gap: "4px", marginBottom: "10px" }, children: events.map((event) => {
+          }, children: [u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", marginBottom: "10px" }, children: events.map((event) => {
                       const availableSpots = event.maxParticipants - event.participantCount;
                       const isFullyBooked = availableSpots === 0;
                       const startDate = new Date(event.startTime);
-                      const today = new Date();
                       const isPastEvent = today.toISOString() >= startDate.toISOString();
-                      const isFullAvailability = availableSpots / event.maxParticipants >= 0.8;
-                      const isHighAvailability = availableSpots / event.maxParticipants >= 0.5;
-                      const isMediumAvailability = availableSpots / event.maxParticipants >= 0.3;
-                      const isLowAvailability = availableSpots / event.maxParticipants >= 0.15;
-                      const getAvailabilityColor = () => {
-                          if (isFullAvailability)
-                              return "var(--bw-success-color)";
-                          if (isHighAvailability)
-                              return "var(--bw-warning-color)";
-                          if (isMediumAvailability)
-                              return "var(--bw-availability-medium-color, #f97316)";
-                          if (isLowAvailability)
-                              return "var(--bw-availability-low-color, #8b5cf6)";
-                          return "var(--bw-highlight-color)";
-                      };
                       const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
+                      const availabilityRatio = availableSpots / event.maxParticipants;
+                      const allocationBadge = (() => {
+                          if (availabilityRatio >= 0.6)
+                              return null;
+                          if (availabilityRatio === 0)
+                              return { text: t("events.soldOut"), backgroundColor: "#7f1d1d", textColor: "#fca5a5" };
+                          if (availabilityRatio <= 0.3)
+                              return { text: t("instances.almostSoldOut"), backgroundColor: "#7f1d1d", textColor: "#fca5a5" };
+                          return { text: t("instances.popularDate"), backgroundColor: "#b45309", textColor: "#fbbf24" };
+                      })();
+                      const sameDay = formatWeekday(event.startTime, timezone, locale) === formatWeekday(event.endTime, timezone, locale);
                       return (u$2("div", { style: {
                               position: "relative",
-                              borderRadius: "var(--bw-border-radius-small)",
-                              padding: "0 4px",
+                              border: "1px solid var(--bw-border-color)",
+                              backgroundColor: "var(--bw-surface-color)",
+                              borderRadius: "var(--bw-border-radius)",
+                              padding: "16px 10px",
                               transition: "all 0.2s ease",
-                              border: "1px solid transparent",
                               fontFamily: "var(--bw-font-family)",
                               opacity: isDisabled ? 0.3 : 1,
-                              filter: isDisabled ? "grayscale(100%)" : "none",
+                              filter: isDisabled ? "grayscale(40%)" : "none",
                               cursor: isDisabled ? "not-allowed" : "pointer",
                           }, onClick: () => {
                               if (!isDisabled) {
                                   handleEventSelect(event.id);
                               }
-                          }, onMouseEnter: (hoverEvent) => {
-                              if (!isDisabled) {
-                                  hoverEvent.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
-                                  hoverEvent.currentTarget.style.borderColor = getAvailabilityColor();
-                              }
-                          }, onMouseLeave: (hoverEvent) => {
-                              hoverEvent.currentTarget.style.backgroundColor = "transparent";
-                              hoverEvent.currentTarget.style.borderColor = "transparent";
                           }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { style: {
                                       position: "absolute",
                                       inset: 0,
@@ -15023,37 +15044,71 @@
                                       justifyContent: "center",
                                       backgroundColor: "rgba(15, 23, 42, 0.8)",
                                       borderRadius: "var(--bw-border-radius)",
-                                  }, children: u$2("div", { style: {
-                                          width: "32px",
-                                          height: "32px",
-                                          color: "var(--bw-highlight-color)",
-                                          fontSize: "32px",
-                                          animation: "spin 1s linear infinite",
-                                      }, children: "\u27F3" }) })), u$2("div", { style: {
-                                      minHeight: "32px",
-                                      display: "grid",
-                                      gridTemplateColumns: "1fr auto 20px",
-                                      alignItems: "center",
-                                      gap: "8px",
+                                  }, children: u$2("div", { style: { width: "32px", height: "32px", color: "var(--bw-highlight-color)", opacity: 0.8, fontSize: "32px" }, children: "\u27F3" }) })), u$2("div", { style: {
+                                      display: "flex",
+                                      marginLeft: "auto",
+                                      marginTop: "-20px",
+                                      marginBottom: "4px",
+                                      borderRadius: "var(--bw-border-radius-small)",
+                                      fontFamily: "var(--bw-font-family)",
+                                      zIndex: 50,
+                                      whiteSpace: "nowrap",
+                                      width: "fit-content",
+                                      fontSize: "11px",
+                                      fontWeight: 700,
+                                      padding: "2px 8px",
+                                      backgroundColor: allocationBadge?.backgroundColor || "transparent",
+                                      color: allocationBadge?.textColor || "transparent",
+                                  }, children: allocationBadge?.text || " - " }), u$2("div", { style: {
+                                      display: "flex",
+                                      justifyContent: "space-between",
                                       width: "100%",
-                                      fontSize: "13px",
-                                      color: "var(--bw-text-muted)",
-                                  }, children: [u$2("span", { style: {
-                                              whiteSpace: "nowrap",
-                                              display: "flex",
-                                              alignItems: "center",
-                                              gap: "3px",
-                                              overflow: "hidden",
-                                              textOverflow: "ellipsis",
-                                              textTransform: "capitalize",
-                                          }, children: [formatWeekday(event.startTime, timezone, locale), " ", formatDate(event.startTime, timezone, locale)] }), u$2("span", { style: {
-                                              display: "flex",
-                                              alignItems: "center",
-                                              gap: "4px",
-                                              whiteSpace: "nowrap",
-                                              fontWeight: 700,
-                                              color: "var(--bw-text-color)",
-                                          }, children: event.price !== null ? formatCurrency(event.price) : t("nextEvents.priceOnRequest") }), event.notes ? u$2(InfoBadge, { text: event.notes }) : u$2("span", {})] })] }, event.id));
+                                      alignItems: "flex-start",
+                                      gap: "12px",
+                                      marginBottom: "4px",
+                                  }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("div", { style: {
+                                                      fontSize: "16px",
+                                                      transition: "all 0.2s ease",
+                                                      borderRadius: "var(--bw-border-radius-small)",
+                                                      borderTop: "4px solid var(--bw-border-color)",
+                                                      border: "1px solid var(--bw-border-color)",
+                                                      width: "40px",
+                                                      height: "40px",
+                                                      display: "flex",
+                                                      alignItems: "center",
+                                                      justifyContent: "center",
+                                                      fontWeight: 700,
+                                                      color: "var(--bw-text-color)",
+                                                      backgroundColor: "var(--bw-background-color)",
+                                                  }, children: startDate.getDate() }), u$2("div", { style: {
+                                                      fontSize: "16px",
+                                                      color: "var(--bw-text-color)",
+                                                      display: "flex",
+                                                      flexDirection: "column",
+                                                      alignItems: "flex-start",
+                                                      justifyContent: "flex-start",
+                                                      lineHeight: 1.25,
+                                                  }, children: [u$2("div", { children: [u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), !sameDay && (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), u$2("div", { children: sameDay ? (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime, timezone, locale) })] })) : (u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), u$2("span", { style: {
+                                                      fontSize: "12px",
+                                                      fontWeight: 400,
+                                                      color: "var(--bw-text-muted)",
+                                                      marginLeft: "6px",
+                                                      backgroundColor: "rgba(0, 0, 0, 0.05)",
+                                                      whiteSpace: "nowrap",
+                                                      padding: "2px 6px",
+                                                      borderRadius: "var(--bw-border-radius-small)",
+                                                  }, children: [event.durationDays, " ", event.durationDays > 1 ? t("common.days") : t("common.day")] })] }), u$2("div", { style: { textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [u$2("span", { style: {
+                                                      display: "inline-flex",
+                                                      alignItems: "center",
+                                                      fontSize: "16px",
+                                                      fontWeight: 600,
+                                                      padding: "2px 8px",
+                                                      borderRadius: "var(--bw-border-radius-small)",
+                                                      fontFamily: "var(--bw-font-family)",
+                                                      backgroundColor: "var(--bw-background-color)",
+                                                      color: "var(--bw-text-color)",
+                                                      border: "1px solid var(--bw-border-color)",
+                                                  }, children: event.price !== null ? formatCurrency(event.price) : t("nextEvents.priceOnRequest") }), event.notes && u$2(InfoBadge, { text: event.notes })] })] })] }, event.id));
                   }) }), showAllButton && (u$2("div", { style: { textAlign: "center" }, children: u$2("button", { type: "button", disabled: isLoadingShowAll, style: {
                           display: "inline-flex",
                           alignItems: "center",
@@ -15874,6 +15929,8 @@
       const [isSuccess, setIsSuccess] = d$1(false);
       const [successPaymentId, setSuccessPaymentId] = d$1(null);
       const [systemConfig, setSystemConfig] = d$1(null);
+      // When true, loadEventInstances skips the single-instance auto-select (used by handleShowAllEvents)
+      const skipInstanceAutoSelectRef = A$2(false);
       // PERFORMANCE OPTIMIZATION: Lazy component loading
       const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = d$1(false);
       const [shouldRenderUpsells, setShouldRenderUpsells] = d$1(false);
@@ -16369,7 +16426,7 @@
                   }
                   setStripePromise(loadStripe(data.stripePublishableKey, stripeOptions));
               }
-              if (data.eventInstances.length === 1) {
+              if (!skipInstanceAutoSelectRef.current && data.eventInstances.length === 1) {
                   setSelectedEventInstance(data.eventInstances[0]);
                   setCurrentStep("booking");
                   await loadEventDetails(data.eventInstances[0].id);
@@ -16764,12 +16821,30 @@
       const handleShowAllEvents = async () => {
           setIsLoadingShowAll(true);
           try {
-              if (isSingleEventTypeMode && selectedEventType) {
+              if (isSingleEventTypeMode) {
+                  // Lock in the correct render branch before any async work so no
+                  // intermediate state can accidentally show the cards view.
                   setShouldRenderInstanceSelection(true);
-                  setIsLoadingEventInstances(true);
-                  await loadEventInstances(selectedEventType.id);
                   setCurrentStep("eventInstances");
                   setShowingPreview(false);
+                  setIsLoadingEventInstances(true);
+                  // Suppress the single-instance auto-select inside loadEventInstances
+                  // so it doesn't override currentStep to "booking" mid-flight.
+                  skipInstanceAutoSelectRef.current = true;
+                  try {
+                      if (selectedEventType) {
+                          await loadEventInstances(selectedEventType.id);
+                      }
+                      else {
+                          // next-events mode skips event type loading on init.
+                          // loadEventTypes sets selectedEventType (for the sidebar title)
+                          // and internally calls loadEventInstances (auto-select suppressed).
+                          await loadEventTypes();
+                      }
+                  }
+                  finally {
+                      skipInstanceAutoSelectRef.current = false;
+                  }
                   setIsLoadingEventInstances(false);
               }
               else {
@@ -16874,7 +16949,7 @@
       }
       // Main view based on view mode
       if (viewMode === "next-events" && showingPreview) {
-          return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+          return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading, count: nextEventsSettings.count }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                   setIsSuccess(false);
                                   setCurrentStep("eventTypes");
                                   setShowingPreview(true);
@@ -16909,7 +16984,7 @@
                               }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
-          return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
+          return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading, count: nextEventsSettings.count }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
                                   setShowingPreview(true);
                                   setCurrentStep("eventTypes");
                               }, isOpen: currentStep === "eventInstances", onClose: () => {
@@ -16932,22 +17007,34 @@
                               }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
+          // Busy only while genuinely loading. Note: we intentionally do NOT key off
+          // `shouldRenderInstanceSelection && !sidebarOpen` — that flag stays true after the
+          // sidebar is closed (only `sidebarOpen` resets), which left the spinner stuck on.
+          const isButtonBusy = (isDirectInstanceMode && isLoadingEventDetails) ||
+              (!isDirectInstanceMode && isLoadingEventInstances);
           return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, style: {
                           display: "flex",
                           justifyContent: "center",
                           alignItems: "center",
                           minHeight: "120px",
-                      }, children: [u$2("button", { type: "button", style: {
+                      }, children: [u$2("button", { type: "button", disabled: isButtonBusy, style: {
+                                  display: "inline-flex",
+                                  alignItems: "center",
+                                  gap: "10px",
                                   backgroundColor: "var(--bw-highlight-color)",
-                                  color: "white",
+                                  color: "var(--bw-button-text-color, #ffffff)",
                                   padding: "16px 32px",
                                   border: "none",
                                   borderRadius: "var(--bw-border-radius)",
                                   fontSize: "18px",
                                   fontWeight: 600,
                                   fontFamily: "var(--bw-font-family)",
+                                  textTransform: "var(--bw-text-transform, none)",
+                                  letterSpacing: "var(--bw-letter-spacing, normal)",
                                   boxShadow: "var(--bw-shadow-md)",
-                                  cursor: "pointer",
+                                  cursor: isButtonBusy ? "default" : "pointer",
+                                  opacity: isButtonBusy ? 0.85 : 1,
+                                  transition: "opacity 0.2s ease",
                               }, onClick: () => {
                                   if (isDirectInstanceMode) {
                                       setCurrentStep("booking");
@@ -16958,8 +17045,8 @@
                                       setSidebarOpen(true);
                                       setShouldRenderInstanceSelection(true);
                                   }
-                              }, children: config.buttonText ||
-                                  (isDirectInstanceMode ? t("button.bookNow") : t("button.viewDates")) }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                              }, children: [isButtonBusy && u$2(Spinner, { size: 20, borderColor: "var(--bw-button-text-color, #ffffff)" }), config.buttonText ||
+                                      (isDirectInstanceMode ? t("button.bookNow") : t("button.viewDates"))] }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (u$2(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                   setIsSuccess(false);
                                   setCurrentStep("eventTypes");
                                   setSidebarOpen(false);
@@ -17089,7 +17176,7 @@
     }
   }
 
-  var css_248z = ".booking-widget-container{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;color:var(--bw-text-color,#1e293b);direction:ltr;display:block;font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);isolation:isolate;line-height:1.5;position:relative;text-align:left}.booking-widget-container *,.booking-widget-container :after,.booking-widget-container :before{box-sizing:border-box;margin:0;padding:0}.booking-widget-container input,.booking-widget-container select,.booking-widget-container textarea{font-family:inherit;font-size:inherit;line-height:inherit}.booking-widget-container button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit}.booking-widget-container a{color:inherit;text-decoration:none}.booking-widget-container img{display:block;height:auto;max-width:100%;vertical-align:middle}.booking-widget-container ol,.booking-widget-container ul{list-style:none}.booking-widget-container h1,.booking-widget-container h2,.booking-widget-container h3,.booking-widget-container h4,.booking-widget-container h5,.booking-widget-container h6{font-size:inherit;font-weight:inherit}#booking-widget-portal{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--bw-text-color,#1e293b);direction:ltr;font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);isolation:isolate;line-height:1.5;text-align:left}#booking-widget-portal *,#booking-widget-portal :after,#booking-widget-portal :before{box-sizing:border-box}#booking-widget-portal-root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--bw-text-color,#1e293b);font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);line-height:1.5}:root{--bw-highlight-color:#00b1aa;--bw-highlight-color-rgb:0,177,170;--bw-background-color:#f8fdfe;--bw-surface-color:#fff;--bw-text-color:#0e7490;--bw-text-muted:rgba(14,116,144,.7);--bw-border-color:#bae6fd;--bw-success-color:#38bdf8;--bw-warning-color:#fbbf24;--bw-error-color:#f43f5e;--bw-border-radius:18px;--bw-border-radius-small:calc(var(--bw-border-radius)*0.8);--bw-spacing:16px;--bw-spacing-large:24px;--bw-font-family:\"Inter\",system-ui,sans-serif;--bw-font-size:14px;--bw-font-size-large:18px;--bw-font-size-small:12px;--bw-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--bw-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--bw-highlight-muted:rgba(0,177,170,.1);--bw-highlight-subtle:rgba(0,177,170,.05);--bw-text-subtle:rgba(14,116,144,.4)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-in-right{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes slide-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-spin{animation:spin 1s linear infinite}.animate-shimmer{animation:shimmer 2s infinite}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-in-up{animation:slide-in-up .3s ease-out}.animate-scale-in{animation:scale-in .2s ease-out}.skeleton-shimmer{overflow:hidden;position:relative}.skeleton-shimmer:after{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.bw-btn{transition:all .2s ease!important}.bw-btn:hover:not(:disabled):not([disabled]){box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-1px)}.bw-btn:active:not(:disabled):not([disabled]){box-shadow:0 2px 4px rgba(0,0,0,.1)}.bw-btn-primary:hover:not(:disabled):not([disabled]){background-color:var(--bw-highlight-color);filter:brightness(1.1)}.bw-btn-secondary:hover:not(:disabled):not([disabled]){background-color:var(--bw-surface-color);border-color:var(--bw-highlight-color);color:var(--bw-highlight-color)}.bw-btn-ghost:hover:not(:disabled):not([disabled]){background-color:var(--bw-highlight-muted)}.bw-btn-outline:hover:not(:disabled):not([disabled]){background-color:var(--bw-highlight-color);color:var(--bw-button-text-color,#fff)}.bw-btn:disabled,.bw-btn[disabled]{cursor:not-allowed!important;opacity:.5!important}button[class*=bw-btn],button[style*=transition]{transition:all .2s ease!important}button[data-variant=primary]:hover:not(:disabled),button[style*=\"--bw-highlight-color\"]:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,0,0,.15);filter:brightness(1.1);transform:translateY(-1px)}button[data-variant=secondary]:hover:not(:disabled){border-color:var(--bw-highlight-color)!important;color:var(--bw-highlight-color)!important}button[data-variant=ghost]:hover:not(:disabled){background-color:var(--bw-highlight-muted)!important}button[data-variant=outline]:hover:not(:disabled){background-color:var(--bw-highlight-color)!important;color:var(--bw-button-text-color,#fff)!important}.bw-button-hover:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-1px)}.bw-button-hover:active:not(:disabled){box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(0)}@media (max-width:768px){.sidebar-mobile{border-radius:0!important;max-width:100%!important;width:100%!important}}@media (max-width:600px){.event-type-list{gap:12px!important;padding:8px!important}.event-type-card{flex:1 1 100%!important;max-width:100%!important;padding:0!important}.event-type-img{height:160px!important}.event-type-title{font-size:1.1rem!important}.event-type-desc{font-size:.8rem!important;max-height:100px!important;min-height:100px!important}.event-type-content{padding:16px 24px!important}}.event-type-markdown{overflow:visible!important}.event-type-markdown p{color:var(--bw-text-muted);font-family:var(--bw-font-family);line-height:1.6;margin:0 0 8px}.event-type-markdown p:last-child{margin-bottom:0}.event-type-markdown h2{font-size:18px!important;font-weight:700!important;margin:12px 0 6px!important}.event-type-markdown h2,.event-type-markdown h3{color:var(--bw-text-color)!important;line-height:1.3!important}.event-type-markdown h3{font-size:16px!important;font-weight:600!important;margin:10px 0 4px!important}.event-type-markdown strong{color:var(--bw-text-color);font-weight:600}.event-type-markdown em{font-style:italic}.event-type-markdown u{text-decoration:underline}.event-type-markdown ul{list-style:none!important;margin:6px 0!important;padding:0 0 0 24px!important;position:relative!important}.event-type-markdown ul li{color:var(--bw-text-muted)!important;font-family:var(--bw-font-family)!important;margin-bottom:2px!important;padding-left:0!important;position:relative!important}.event-type-markdown ul li:before{color:var(--bw-text-color)!important;content:\"•\"!important;font-weight:700!important;left:-16px!important;position:absolute!important;top:0!important}.event-type-markdown ol{counter-reset:list-counter!important;list-style:none!important;margin:6px 0!important;padding:0 0 0 24px!important;position:relative!important}.event-type-markdown ol li{color:var(--bw-text-muted)!important;counter-increment:list-counter!important;font-family:var(--bw-font-family)!important;margin-bottom:2px!important;padding-left:0!important;position:relative!important}.event-type-markdown ol li:before{color:var(--bw-text-color)!important;content:counter(list-counter) \".\"!important;font-weight:700!important;left:-20px!important;position:absolute!important;top:0!important}.event-type-markdown blockquote{border-left:2px solid var(--bw-border-color);color:var(--bw-text-muted);font-style:italic;margin:4px 0;padding-left:12px}.event-type-markdown a{color:var(--bw-highlight-color);text-decoration:underline}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{color:var(--bw-text-color);font-weight:600;margin-bottom:.5em}.markdown-content h1{font-size:1.5em}.markdown-content h2{font-size:1.25em}.markdown-content h3{font-size:1.1em}.markdown-content p{line-height:1.6;margin-bottom:1em}.markdown-content ol,.markdown-content ul{margin-bottom:1em;padding-left:1.5em}.markdown-content ul{list-style-type:disc}.markdown-content ol{list-style-type:decimal}.markdown-content li{margin-bottom:.25em}.markdown-content a{color:var(--bw-highlight-color);text-decoration:underline}.markdown-content a:hover{opacity:.8}.markdown-content strong{font-weight:600}.markdown-content em{font-style:italic}.markdown-content code{background:var(--bw-highlight-subtle);border-radius:4px;font-family:monospace;font-size:.9em;padding:.125em .25em}.markdown-content blockquote{border-left:3px solid var(--bw-highlight-color);color:var(--bw-text-muted);margin:1em 0;padding-left:1em}.print-only{display:none}.print-hidden{display:block}@media print{.print-only{display:block}.print-hidden{display:none!important}.print-booking-header{border-bottom:2px solid #000;display:block;margin-bottom:24px;padding-bottom:16px;text-align:center}.print-booking-header h1{font-size:24px;margin:0 0 8px}.print-booking-header .subtitle{color:#666;font-size:14px}.print-booking-card{border:1px solid #ccc;border-radius:8px;margin-bottom:16px;padding:16px;page-break-inside:avoid}.print-section-title{border-bottom:1px solid #ddd;display:block;font-size:16px;font-weight:600;margin-bottom:12px;padding-bottom:8px}.print-detail-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.print-detail-item{margin-bottom:8px}.print-detail-label{color:#666;font-size:12px;margin-bottom:4px}.print-detail-value{font-size:14px;font-weight:600}.print-status-badge{border-radius:9999px;display:inline-block;font-size:12px;font-weight:600;padding:4px 12px}.print-status-paid{background-color:#dcfce7;color:#166534;display:inline-block}.print-participant{align-items:center;background-color:#f9fafb;border-radius:4px;display:flex;justify-content:space-between;margin-bottom:8px;padding:8px}.print-participant-name{font-weight:600}.print-participant-age{color:#666;font-size:12px}.print-payment-summary{display:block}.print-payment-row{border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:4px 0}.print-payment-row:last-child{border-bottom:none;font-weight:600}.print-footer{border-top:1px solid #ddd;color:#666;display:block;font-size:12px;margin-top:24px;padding-top:16px;text-align:center}.print-footer p{margin:4px 0}}";
+  var css_248z = ".booking-widget-container{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;color:var(--bw-text-color,#1e293b);direction:ltr;display:block;font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);isolation:isolate;line-height:1.5;position:relative;text-align:left}.booking-widget-container *,.booking-widget-container :after,.booking-widget-container :before{box-sizing:border-box;margin:0;padding:0}.booking-widget-container input,.booking-widget-container select,.booking-widget-container textarea{font-family:inherit;font-size:inherit;line-height:inherit}.booking-widget-container button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit}.booking-widget-container a{color:inherit;text-decoration:none}.booking-widget-container img{display:block;height:auto;max-width:100%;vertical-align:middle}.booking-widget-container ol,.booking-widget-container ul{list-style:none}.booking-widget-container h1,.booking-widget-container h2,.booking-widget-container h3,.booking-widget-container h4,.booking-widget-container h5,.booking-widget-container h6{font-size:inherit;font-weight:inherit}#booking-widget-portal{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--bw-text-color,#1e293b);direction:ltr;font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);isolation:isolate;line-height:1.5;text-align:left}#booking-widget-portal *,#booking-widget-portal :after,#booking-widget-portal :before{box-sizing:border-box}#booking-widget-portal-root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--bw-text-color,#1e293b);font-family:var(--bw-font-family,system-ui,-apple-system,sans-serif);font-size:var(--bw-font-size,14px);line-height:1.5}:root{--bw-highlight-color:#00b1aa;--bw-highlight-color-rgb:0,177,170;--bw-background-color:#f8fdfe;--bw-surface-color:#fff;--bw-text-color:#0e7490;--bw-text-muted:rgba(14,116,144,.7);--bw-border-color:#bae6fd;--bw-success-color:#38bdf8;--bw-warning-color:#fbbf24;--bw-error-color:#f43f5e;--bw-border-radius:18px;--bw-border-radius-small:calc(var(--bw-border-radius)*0.8);--bw-spacing:16px;--bw-spacing-large:24px;--bw-font-family:\"Inter\",system-ui,sans-serif;--bw-font-size:14px;--bw-font-size-large:18px;--bw-font-size-small:12px;--bw-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--bw-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--bw-highlight-muted:rgba(0,177,170,.1);--bw-highlight-subtle:rgba(0,177,170,.05);--bw-text-subtle:rgba(14,116,144,.4)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-in-right{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@keyframes slide-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-spin{animation:spin 1s linear infinite}.animate-shimmer{animation:shimmer 2s infinite}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-in-up{animation:slide-in-up .3s ease-out}.animate-scale-in{animation:scale-in .2s ease-out}.skeleton-shimmer{overflow:hidden;position:relative}.skeleton-shimmer:after{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.bw-btn{letter-spacing:var(--bw-letter-spacing,normal);text-transform:var(--bw-text-transform,none);transition:all .2s ease!important}.bw-btn:hover:not(:disabled):not([disabled]){box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-1px)}.bw-btn:active:not(:disabled):not([disabled]){box-shadow:0 2px 4px rgba(0,0,0,.1)}.bw-btn-primary:hover:not(:disabled):not([disabled]){background-color:var(--bw-highlight-color);filter:brightness(1.1)}.bw-btn-secondary:hover:not(:disabled):not([disabled]){background-color:var(--bw-surface-color);border-color:var(--bw-highlight-color);color:var(--bw-highlight-color)}.bw-btn-ghost:hover:not(:disabled):not([disabled]){background-color:var(--bw-highlight-muted)}.bw-btn-outline:hover:not(:disabled):not([disabled]){background-color:var(--bw-highlight-color);color:var(--bw-button-text-color,#fff)}.bw-btn:disabled,.bw-btn[disabled]{cursor:not-allowed!important;opacity:.5!important}button[class*=bw-btn],button[style*=transition]{transition:all .2s ease!important}button[data-variant=primary]:hover:not(:disabled),button[style*=\"--bw-highlight-color\"]:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,0,0,.15);filter:brightness(1.1);transform:translateY(-1px)}button[data-variant=secondary]:hover:not(:disabled){border-color:var(--bw-highlight-color)!important;color:var(--bw-highlight-color)!important}button[data-variant=ghost]:hover:not(:disabled){background-color:var(--bw-highlight-muted)!important}button[data-variant=outline]:hover:not(:disabled){background-color:var(--bw-highlight-color)!important;color:var(--bw-button-text-color,#fff)!important}.bw-button-hover:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-1px)}.bw-button-hover:active:not(:disabled){box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(0)}@media (max-width:768px){.sidebar-mobile{border-radius:0!important;max-width:100%!important;width:100%!important}}@media (max-width:600px){.event-type-list{gap:12px!important;padding:8px!important}.event-type-card{flex:1 1 100%!important;max-width:100%!important;padding:0!important}.event-type-img{height:160px!important}.event-type-title{font-size:1.1rem!important}.event-type-desc{font-size:.8rem!important;max-height:100px!important;min-height:100px!important}.event-type-content{padding:16px 24px!important}}.event-type-markdown{overflow:visible!important}.event-type-markdown p{color:var(--bw-text-muted);font-family:var(--bw-font-family);line-height:1.6;margin:0 0 8px}.event-type-markdown p:last-child{margin-bottom:0}.event-type-markdown h2{font-size:18px!important;font-weight:700!important;margin:12px 0 6px!important}.event-type-markdown h2,.event-type-markdown h3{color:var(--bw-text-color)!important;line-height:1.3!important}.event-type-markdown h3{font-size:16px!important;font-weight:600!important;margin:10px 0 4px!important}.event-type-markdown strong{color:var(--bw-text-color);font-weight:600}.event-type-markdown em{font-style:italic}.event-type-markdown u{text-decoration:underline}.event-type-markdown ul{list-style:none!important;margin:6px 0!important;padding:0 0 0 24px!important;position:relative!important}.event-type-markdown ul li{color:var(--bw-text-muted)!important;font-family:var(--bw-font-family)!important;margin-bottom:2px!important;padding-left:0!important;position:relative!important}.event-type-markdown ul li:before{color:var(--bw-text-color)!important;content:\"•\"!important;font-weight:700!important;left:-16px!important;position:absolute!important;top:0!important}.event-type-markdown ol{counter-reset:list-counter!important;list-style:none!important;margin:6px 0!important;padding:0 0 0 24px!important;position:relative!important}.event-type-markdown ol li{color:var(--bw-text-muted)!important;counter-increment:list-counter!important;font-family:var(--bw-font-family)!important;margin-bottom:2px!important;padding-left:0!important;position:relative!important}.event-type-markdown ol li:before{color:var(--bw-text-color)!important;content:counter(list-counter) \".\"!important;font-weight:700!important;left:-20px!important;position:absolute!important;top:0!important}.event-type-markdown blockquote{border-left:2px solid var(--bw-border-color);color:var(--bw-text-muted);font-style:italic;margin:4px 0;padding-left:12px}.event-type-markdown a{color:var(--bw-highlight-color);text-decoration:underline}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{color:var(--bw-text-color);font-weight:600;margin-bottom:.5em}.markdown-content h1{font-size:1.5em}.markdown-content h2{font-size:1.25em}.markdown-content h3{font-size:1.1em}.markdown-content p{line-height:1.6;margin-bottom:1em}.markdown-content ol,.markdown-content ul{margin-bottom:1em;padding-left:1.5em}.markdown-content ul{list-style-type:disc}.markdown-content ol{list-style-type:decimal}.markdown-content li{margin-bottom:.25em}.markdown-content a{color:var(--bw-highlight-color);text-decoration:underline}.markdown-content a:hover{opacity:.8}.markdown-content strong{font-weight:600}.markdown-content em{font-style:italic}.markdown-content code{background:var(--bw-highlight-subtle);border-radius:4px;font-family:monospace;font-size:.9em;padding:.125em .25em}.markdown-content blockquote{border-left:3px solid var(--bw-highlight-color);color:var(--bw-text-muted);margin:1em 0;padding-left:1em}.print-only{display:none}.print-hidden{display:block}@media print{.print-only{display:block}.print-hidden{display:none!important}.print-booking-header{border-bottom:2px solid #000;display:block;margin-bottom:24px;padding-bottom:16px;text-align:center}.print-booking-header h1{font-size:24px;margin:0 0 8px}.print-booking-header .subtitle{color:#666;font-size:14px}.print-booking-card{border:1px solid #ccc;border-radius:8px;margin-bottom:16px;padding:16px;page-break-inside:avoid}.print-section-title{border-bottom:1px solid #ddd;display:block;font-size:16px;font-weight:600;margin-bottom:12px;padding-bottom:8px}.print-detail-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.print-detail-item{margin-bottom:8px}.print-detail-label{color:#666;font-size:12px;margin-bottom:4px}.print-detail-value{font-size:14px;font-weight:600}.print-status-badge{border-radius:9999px;display:inline-block;font-size:12px;font-weight:600;padding:4px 12px}.print-status-paid{background-color:#dcfce7;color:#166534;display:inline-block}.print-participant{align-items:center;background-color:#f9fafb;border-radius:4px;display:flex;justify-content:space-between;margin-bottom:8px;padding:8px}.print-participant-name{font-weight:600}.print-participant-age{color:#666;font-size:12px}.print-payment-summary{display:block}.print-payment-row{border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:4px 0}.print-payment-row:last-child{border-bottom:none;font-weight:600}.print-footer{border-top:1px solid #ddd;color:#666;display:block;font-size:12px;margin-top:24px;padding-top:16px;text-align:center}.print-footer p{margin:4px 0}}";
   styleInject(css_248z);
 
   // Export init function for vanilla JS usage with Preact