@bigz-app/booking-widget 1.4.2 → 1.4.4

package/dist/index.cjs

@@ -2065,6 +2065,28 @@ const StyleProvider = ({ config, children, }) => {
             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),
@@ -2084,7 +2106,7 @@ const StyleProvider = ({ config, children, }) => {
             "--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,
@@ -2102,6 +2124,9 @@ const StyleProvider = ({ config, children, }) => {
             "--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",
         };
     }, [
@@ -7261,6 +7286,8 @@ function Sidebar({ isOpen, onClose, title, children, width = "450px", footer, })
                                     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,
@@ -11438,6 +11465,8 @@ const buttonBase = {
     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";
@@ -12846,19 +12875,21 @@ function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect,
                                         textAlign: "right",
                                     }, children: jsxRuntime.jsxs("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), isAvailable && (jsxRuntime.jsxs("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: [jsxRuntime.jsx(IconWave, { size: 20, color: "white" }), t("button.bookNow")] }))] }), !isAvailable && (jsxRuntime.jsx("div", { style: {
+                            }, children: [jsxRuntime.jsx(IconWave, { size: 20, color: "var(--bw-button-text-color, #ffffff)" }), t("button.bookNow")] }))] }), !isAvailable && (jsxRuntime.jsx("div", { style: {
                         position: "absolute",
                         inset: 0,
                         backgroundColor: "rgba(0, 0, 0, 0.3)",
@@ -14144,15 +14175,15 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                             backgroundColor: isAvailable
                                                 ? "var(--bw-success-color)"
                                                 : "var(--bw-error-color)",
-                                        }, children: isAvailable ? t("events.spotsAvailable") : t("events.soldOut") }) }), jsxRuntime.jsx("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: jsxRuntime.jsx("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 }) }), jsxRuntime.jsx("div", { className: "event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: jsxRuntime.jsx(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), jsxRuntime.jsxs("div", { className: "event-type-content", style: {
+                                        }, children: isAvailable ? t("events.spotsAvailable") : t("events.soldOut") }) }), eventType.images && eventType.images.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: { position: "absolute", top: "16px", left: "16px", zIndex: 10 }, children: jsxRuntime.jsx("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 }) }), jsxRuntime.jsx("div", { className: "event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: jsxRuntime.jsx(ImageCarousel, { images: eventType.images, eventName: eventType.name }) })] })), jsxRuntime.jsxs("div", { className: "event-type-content", style: {
                                         padding: "12px 18px",
                                         display: "flex",
                                         flexDirection: "column",
@@ -14295,8 +14326,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                                         alignItems: "center",
                                                         marginTop: "10px",
                                                         gap: "12px",
-                                                    }, children: [(eventType.description ||
-                                                            (eventType.highlights && eventType.highlights.length > 0)) && (jsxRuntime.jsx("button", { onClick: (e) => {
+                                                    }, children: [eventType.description && (jsxRuntime.jsx("button", { onClick: (e) => {
                                                                 e.stopPropagation();
                                                                 handleShowDetails(eventType);
                                                             }, style: {
@@ -14315,12 +14345,14 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                                                 transition: "all 0.2s ease",
                                                             }, children: t("button.moreDetails") })), isAvailable && (jsxRuntime.jsxs("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",
@@ -14329,7 +14361,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                                                 border: "none",
                                                                 cursor: "pointer",
                                                                 transition: "all 0.2s ease",
-                                                            }, children: [jsxRuntime.jsx(IconWave, { size: 15, color: "var(--bw-surface-color)" }), " ", t("button.bookNow")] }))] })] })] }), showVoucherAttachment && onVoucherClick && (jsxRuntime.jsx(VoucherAttachment, { onClick: () => onVoucherClick(eventType.id) })), !isAvailable && (jsxRuntime.jsx("div", { style: {
+                                                            }, children: [jsxRuntime.jsx(IconWave, { size: 15, color: "var(--bw-button-text-color, #ffffff)" }), " ", t("button.bookNow")] }))] })] })] }), showVoucherAttachment && onVoucherClick && (jsxRuntime.jsx(VoucherAttachment, { onClick: () => onVoucherClick(eventType.id) })), !isAvailable && (jsxRuntime.jsx("div", { style: {
                                         position: "absolute",
                                         inset: 0,
                                         backgroundColor: "rgba(0, 0, 0, 0.3)",
@@ -14752,7 +14784,7 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                     }) })] }) }));
 }
 
-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();
@@ -14804,7 +14836,7 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
     };
     // Show loading skeleton
     if (isLoading) {
-        return jsxRuntime.jsx(NextEventsSkeleton, { count: 3 });
+        return jsxRuntime.jsx(NextEventsSkeleton, { count: count });
     }
     if (events.length === 0) {
         return (jsxRuntime.jsx("div", { style: { maxWidth: "500px", margin: "0 auto", padding: "16px" }, children: jsxRuntime.jsxs("div", { style: {
@@ -14860,55 +14892,44 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                             gap: "8px",
                         }, children: [jsxRuntime.jsx("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), t("common.reload")] })] }) }));
     }
+    const today = new Date();
     return (jsxRuntime.jsxs("div", { style: {
             maxWidth: "500px",
             margin: "0 auto",
             padding: "12px 16px",
             fontFamily: "var(--bw-font-family)",
-        }, children: [jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px", marginBottom: "10px" }, children: events.map((event) => {
+        }, children: [jsxRuntime.jsx("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 (jsxRuntime.jsxs("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 && (jsxRuntime.jsx("div", { style: {
                                     position: "absolute",
                                     inset: 0,
@@ -14917,37 +14938,71 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                                     justifyContent: "center",
                                     backgroundColor: "rgba(15, 23, 42, 0.8)",
                                     borderRadius: "var(--bw-border-radius)",
-                                }, children: jsxRuntime.jsx("div", { style: {
-                                        width: "32px",
-                                        height: "32px",
-                                        color: "var(--bw-highlight-color)",
-                                        fontSize: "32px",
-                                        animation: "spin 1s linear infinite",
-                                    }, children: "\u27F3" }) })), jsxRuntime.jsxs("div", { style: {
-                                    minHeight: "32px",
-                                    display: "grid",
-                                    gridTemplateColumns: "1fr auto 20px",
-                                    alignItems: "center",
-                                    gap: "8px",
+                                }, children: jsxRuntime.jsx("div", { style: { width: "32px", height: "32px", color: "var(--bw-highlight-color)", opacity: 0.8, fontSize: "32px" }, children: "\u27F3" }) })), jsxRuntime.jsx("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 || " - " }), jsxRuntime.jsxs("div", { style: {
+                                    display: "flex",
+                                    justifyContent: "space-between",
                                     width: "100%",
-                                    fontSize: "13px",
-                                    color: "var(--bw-text-muted)",
-                                }, children: [jsxRuntime.jsxs("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)] }), jsxRuntime.jsx("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 ? jsxRuntime.jsx(InfoBadge, { text: event.notes }) : jsxRuntime.jsx("span", {})] })] }, event.id));
+                                    alignItems: "flex-start",
+                                    gap: "12px",
+                                    marginBottom: "4px",
+                                }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("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() }), jsxRuntime.jsxs("div", { style: {
+                                                    fontSize: "16px",
+                                                    color: "var(--bw-text-color)",
+                                                    display: "flex",
+                                                    flexDirection: "column",
+                                                    alignItems: "flex-start",
+                                                    justifyContent: "flex-start",
+                                                    lineHeight: 1.25,
+                                                }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), !sameDay && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), jsxRuntime.jsx("div", { children: sameDay ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime, timezone, locale) })] })) : (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), jsxRuntime.jsxs("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")] })] }), jsxRuntime.jsxs("div", { style: { textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "4px" }, children: [jsxRuntime.jsx("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 && jsxRuntime.jsx(InfoBadge, { text: event.notes })] })] })] }, event.id));
                 }) }), showAllButton && (jsxRuntime.jsx("div", { style: { textAlign: "center" }, children: jsxRuntime.jsx("button", { type: "button", disabled: isLoadingShowAll, style: {
                         display: "inline-flex",
                         alignItems: "center",
@@ -15768,6 +15823,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [successPaymentId, setSuccessPaymentId] = React.useState(null);
     const [systemConfig, setSystemConfig] = React.useState(null);
+    // When true, loadEventInstances skips the single-instance auto-select (used by handleShowAllEvents)
+    const skipInstanceAutoSelectRef = React.useRef(false);
     // PERFORMANCE OPTIMIZATION: Lazy component loading
     const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = React.useState(false);
     const [shouldRenderUpsells, setShouldRenderUpsells] = React.useState(false);
@@ -16263,7 +16320,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 }
                 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);
@@ -16658,12 +16715,30 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     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 {
@@ -16768,7 +16843,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     }
     // Main view based on view mode
     if (viewMode === "next-events" && showingPreview) {
-        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [jsxRuntime.jsx(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading }), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(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 })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [jsxRuntime.jsx(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading, count: nextEventsSettings.count }), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(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 })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setShowingPreview(true);
@@ -16803,7 +16878,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                             }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsxRuntime.jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
-        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
+        return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [jsxRuntime.jsx(NextEventsPreview, { events: upcomingEvents, onEventSelect: handleUpcomingEventSelect, onShowAll: handleShowAllEvents, showAllButtonText: nextEventsSettings.showAllButtonText, showAllButton: nextEventsSettings.showAllButton, isLoadingEventDetails: isLoadingEventDetails, isLoadingShowAll: isLoadingShowAll, isLoading: isLoading, count: nextEventsSettings.count }), shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
                                 setShowingPreview(true);
                                 setCurrentStep("eventTypes");
                             }, isOpen: currentStep === "eventInstances", onClose: () => {
@@ -16826,22 +16901,34 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                             }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsxRuntime.jsx(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 (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, style: {
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center",
                         minHeight: "120px",
-                    }, children: [jsxRuntime.jsx("button", { type: "button", style: {
+                    }, children: [jsxRuntime.jsxs("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");
@@ -16852,8 +16939,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                     setSidebarOpen(true);
                                     setShouldRenderInstanceSelection(true);
                                 }
-                            }, children: config.buttonText ||
-                                (isDirectInstanceMode ? t("button.bookNow") : t("button.viewDates")) }), shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (jsxRuntime.jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(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 })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                            }, children: [isButtonBusy && jsxRuntime.jsx(Spinner, { size: 20, borderColor: "var(--bw-button-text-color, #ffffff)" }), config.buttonText ||
+                                    (isDirectInstanceMode ? t("button.bookNow") : t("button.viewDates"))] }), shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (jsxRuntime.jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(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 })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setSidebarOpen(false);
@@ -16978,7 +17065,7 @@ function styleInject(css, ref) {
   }
 }
 
-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