@bigz-app/booking-widget 1.3.4 → 1.4.0

package/dist/booking-widget.js

@@ -283,6 +283,8 @@
       "button.depositAndBook": "Anzahlen & buchen",
       "button.continueWithout": "Weiter ohne Extras",
       "button.continue": "Weiter",
+      "button.continueToPayment": "Weiter zur Zahlung",
+      "button.backToDetails": "Zurück zu den Angaben",
       "button.addExtras": "Extras hinzufügen",
       // Event types
       "events.noEventsAvailable": "Keine Veranstaltungen verfügbar",
@@ -475,6 +477,8 @@
       "upsells.noExtras": "Keine Extras für diese Buchung verfügbar.",
       "upsells.selected": "{{count}} Extra ausgewählt",
       "upsells.selectedPlural": "{{count}} Extras ausgewählt",
+      "upsells.savePercent": "{{percent}}% sparen",
+      "booking.paymentUnavailable": "Online-Zahlung ist für diese Buchung nicht verfügbar. Bitte kontaktiere uns, um die Reservierung abzuschließen.",
       "upsells.spotsFree": "{{count}} Plätze frei",
       "upsells.notAvailable": "Nicht verfügbar",
       "upsells.reason.outOfStock": "{{productName}} ist nicht auf Lager",
@@ -559,6 +563,8 @@
       "button.depositAndBook": "Pay deposit & book",
       "button.continueWithout": "Continue without extras",
       "button.continue": "Continue",
+      "button.continueToPayment": "Continue to payment",
+      "button.backToDetails": "Back to details",
       "button.addExtras": "Add extras",
       // Event types
       "events.noEventsAvailable": "No events available",
@@ -751,6 +757,8 @@
       "upsells.noExtras": "No extras available for this booking.",
       "upsells.selected": "{{count}} extra selected",
       "upsells.selectedPlural": "{{count}} extras selected",
+      "upsells.savePercent": "Save {{percent}}%",
+      "booking.paymentUnavailable": "Online payment is not available for this booking. Please contact us to complete your reservation.",
       "upsells.spotsFree": "{{count}} spots available",
       "upsells.notAvailable": "Not available",
       "upsells.reason.outOfStock": "{{productName}} is out of stock",
@@ -835,6 +843,8 @@
       "button.depositAndBook": "Pagar depósito y reservar",
       "button.continueWithout": "Continuar sin extras",
       "button.continue": "Continuar",
+      "button.continueToPayment": "Continuar al pago",
+      "button.backToDetails": "Volver a los datos",
       "button.addExtras": "Añadir extras",
       // Event types
       "events.noEventsAvailable": "No hay eventos disponibles",
@@ -1027,6 +1037,8 @@
       "upsells.noExtras": "No hay extras disponibles para esta reserva.",
       "upsells.selected": "{{count}} extra seleccionado",
       "upsells.selectedPlural": "{{count}} extras seleccionados",
+      "upsells.savePercent": "Ahorra {{percent}}%",
+      "booking.paymentUnavailable": "El pago en línea no está disponible para esta reserva. Contáctanos para completarla.",
       "upsells.spotsFree": "{{count}} plazas disponibles",
       "upsells.notAvailable": "No disponible",
       "upsells.reason.outOfStock": "{{productName}} está agotado",
@@ -1111,6 +1123,8 @@
       "button.depositAndBook": "Pagar sinal e reservar",
       "button.continueWithout": "Continuar sem extras",
       "button.continue": "Continuar",
+      "button.continueToPayment": "Continuar para pagamento",
+      "button.backToDetails": "Voltar aos dados",
       "button.addExtras": "Adicionar extras",
       // Event types
       "events.noEventsAvailable": "Sem eventos disponíveis",
@@ -1303,6 +1317,8 @@
       "upsells.noExtras": "Sem extras disponíveis para esta reserva.",
       "upsells.selected": "{{count}} extra selecionado",
       "upsells.selectedPlural": "{{count}} extras selecionados",
+      "upsells.savePercent": "Poupa {{percent}}%",
+      "booking.paymentUnavailable": "O pagamento online não está disponível para esta reserva. Contacta-nos para concluir a reserva.",
       "upsells.spotsFree": "{{count}} lugares disponíveis",
       "upsells.notAvailable": "Não disponível",
       "upsells.reason.outOfStock": "{{productName}} está esgotado",
@@ -1387,6 +1403,8 @@
       "button.depositAndBook": "Betala handpenning & boka",
       "button.continueWithout": "Fortsätt utan tillägg",
       "button.continue": "Fortsätt",
+      "button.continueToPayment": "Fortsätt till betalning",
+      "button.backToDetails": "Tillbaka till uppgifter",
       "button.addExtras": "Lägg till tillägg",
       // Event types
       "events.noEventsAvailable": "Inga evenemang tillgängliga",
@@ -1579,6 +1597,8 @@
       "upsells.noExtras": "Inga tillägg tillgängliga för denna bokning.",
       "upsells.selected": "{{count}} tillägg valt",
       "upsells.selectedPlural": "{{count}} tillägg valda",
+      "upsells.savePercent": "Spara {{percent}}%",
+      "booking.paymentUnavailable": "Onlinebetalning är inte tillgänglig för denna bokning. Kontakta oss för att slutföra bokningen.",
       "upsells.spotsFree": "{{count}} platser lediga",
       "upsells.notAvailable": "Inte tillgängligt",
       "upsells.reason.outOfStock": "{{productName}} är slut i lager",
@@ -11579,7 +11599,7 @@
   const labelStyles$1 = formStyles.label;
   const inputStyles$1 = formStyles.input;
   const errorTextStyles$1 = formStyles.error;
-  function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, onBackToEventInstances, onBackToEventTypes, selectedEventType, selectedEventInstance, isOpen, onClose, systemConfig, selectedUpsells = [], upsells = [], }) {
+  function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, isOpen, onClose, systemConfig, selectedUpsells = [], upsells = [], persistedState = null, onPersistedStateChange, }) {
       const t$1 = useTranslations();
       const { locale } = useLocale();
       const timezone = useTimezone();
@@ -11591,15 +11611,16 @@
           const raw = Math.round((baseAmount * basisPoints) / 10000);
           return round ? roundDiscountUp(raw) : raw;
       };
-      const [appliedVouchers, setAppliedVouchers] = d$1([]);
-      const paymentSectionRef = A$2(null);
+      const [appliedVouchers, setAppliedVouchers] = d$1(() => persistedState?.appliedVouchers ?? []);
+      const [checkoutStep, setCheckoutStep] = d$1(() => persistedState?.checkoutStep ?? "details");
       // Payment option: "deposit" or "full" - only relevant when deposit is available
-      const [paymentOption, setPaymentOption] = d$1("deposit");
+      const [paymentOption, setPaymentOption] = d$1(() => persistedState?.paymentOption ?? "deposit");
       // Per-participant upsell selections: participantIndex -> array of upsell package IDs
-      const [participantUpsells, setParticipantUpsells] = d$1({});
+      const [participantUpsells, setParticipantUpsells] = d$1(() => persistedState?.participantUpsells ?? {});
+      const wasOpenRef = A$2(false);
       const form = useForm({
           resolver: t(createBookingFormSchema(t$1, participantFieldsConfig)),
-          defaultValues: {
+          defaultValues: persistedState?.formData ?? {
               customerName: "",
               customerEmail: "",
               customerPhone: "",
@@ -11609,6 +11630,28 @@
               acceptTerms: false,
           },
       });
+      const persistState = q$2(() => {
+          onPersistedStateChange?.({
+              formData: form.getValues(),
+              checkoutStep,
+              paymentOption,
+              appliedVouchers,
+              participantUpsells,
+          });
+      }, [onPersistedStateChange, form, checkoutStep, paymentOption, appliedVouchers, participantUpsells]);
+      y$1(() => {
+          if (isOpen && !wasOpenRef.current && persistedState) {
+              form.reset(persistedState.formData);
+              setCheckoutStep(persistedState.checkoutStep);
+              setPaymentOption(persistedState.paymentOption);
+              setAppliedVouchers(persistedState.appliedVouchers);
+              setParticipantUpsells(persistedState.participantUpsells);
+          }
+          if (!isOpen && wasOpenRef.current) {
+              persistState();
+          }
+          wasOpenRef.current = isOpen;
+      }, [isOpen, persistedState, form, persistState]);
       const watchedParticipants = form.watch("participants");
       const participantCount = watchedParticipants.length;
       const watchedCustomerName = form.watch("customerName");
@@ -11733,6 +11776,18 @@
       }), [watchedCustomerName, watchedCustomerEmail, watchedCustomerPhone, watchedParticipants, watchedComment]);
       const appliedDiscountCode = appliedVouchers.find((v) => v.type === "discount");
       const appliedGiftCards = appliedVouchers.filter((v) => v.type === "giftCard");
+      const discountCodeProp = appliedDiscountCode
+          ? {
+              id: appliedDiscountCode.id,
+              code: appliedDiscountCode.code,
+              description: appliedDiscountCode.description || undefined,
+              type: appliedDiscountCode.discountType || "percentage",
+              value: appliedDiscountCode.discountValue || 0,
+              discountAmount: appliedDiscountCode.discountAmount,
+              newTotal: appliedDiscountCode.newTotal,
+          }
+          : null;
+      const hasPaymentProvider = Boolean(stripePromise || systemConfig?.paymentProvider === "mollie");
       const handleVoucherValidated = q$2((voucher, _error) => {
           if (voucher) {
               setAppliedVouchers((prev) => [...prev, voucher]);
@@ -11844,19 +11899,12 @@
           });
       }, [config]);
       const handleClose = () => {
+          persistState();
+          setCheckoutStep("details");
           onClose();
-          if (selectedEventInstance && selectedEventType) {
-              onBackToEventInstances?.();
-          }
-          else if (selectedEventType) {
-              onBackToEventTypes?.();
-          }
-      };
-      const scrollToPayment = () => {
-          paymentSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
       };
       // Footer navigation
-      const footerContent = (u$2(k$3, { children: [u$2("button", { type: "button", onClick: handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: t$1("common.back") }), u$2("button", { type: "button", onClick: scrollToPayment, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: t$1("button.toPayment") })] }));
+      const footerContent = (u$2(k$3, { children: [u$2("button", { type: "button", onClick: checkoutStep === "payment" ? () => setCheckoutStep("details") : handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: checkoutStep === "payment" ? t$1("button.backToDetails") : t$1("common.back") }), checkoutStep === "details" && (u$2("button", { type: "button", onClick: () => setCheckoutStep("payment"), disabled: !isReadyForPayment() || !hasPaymentProvider, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: t$1("button.continueToPayment") }))] }));
       if (!eventDetails.bookingOpen) {
           return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.notPossible"), children: u$2("div", { style: {
                       display: "flex",
@@ -11873,264 +11921,211 @@
                                   fontFamily: "var(--bw-font-family)",
                               }, children: t$1("booking.notPossible") }), u$2("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.notPossibleMessage") })] }) }) }));
       }
-      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: u$2("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), u$2("div", { style: {
-                                  display: "grid",
-                                  gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-                                  gap: "12px",
-                                  fontSize: "14px",
-                              }, children: [u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
-                                                  color: "var(--bw-text-muted)",
-                                                  fontFamily: "var(--bw-font-family)",
-                                                  display: "flex",
-                                                  alignItems: "center",
-                                                  gap: "4px",
-                                              }, children: [u$2(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.date")] }), u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: 500,
-                                                  fontFamily: "var(--bw-font-family)",
-                                              }, children: [formatEventDate(eventDetails.startTime, timezone, locale), " \u2022 ", formatTime(eventDetails.startTime, timezone, locale)] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
-                                                  color: "var(--bw-text-muted)",
-                                                  fontFamily: "var(--bw-font-family)",
-                                                  display: "flex",
-                                                  alignItems: "center",
-                                                  gap: "4px",
-                                              }, children: [u$2(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.duration")] }), u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: 500,
-                                                  fontFamily: "var(--bw-font-family)",
-                                              }, children: [eventDetails.durationDays, " ", eventDetails.durationDays > 1 ? t$1("common.days") : t$1("common.day")] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
-                                                  color: "var(--bw-text-muted)",
-                                                  fontFamily: "var(--bw-font-family)",
+      return (u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: u$2("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [checkoutStep === "details" && (u$2(k$3, { children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), u$2("div", { style: {
+                                          display: "grid",
+                                          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                                          gap: "12px",
+                                          fontSize: "14px",
+                                      }, children: [u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
+                                                          color: "var(--bw-text-muted)",
+                                                          fontFamily: "var(--bw-font-family)",
+                                                          display: "flex",
+                                                          alignItems: "center",
+                                                          gap: "4px",
+                                                      }, children: [u$2(IconCalendar, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.date")] }), u$2("span", { style: {
+                                                          color: "var(--bw-text-color)",
+                                                          fontWeight: 500,
+                                                          fontFamily: "var(--bw-font-family)",
+                                                      }, children: [formatEventDate(eventDetails.startTime, timezone, locale), " \u2022 ", formatTime(eventDetails.startTime, timezone, locale)] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
+                                                          color: "var(--bw-text-muted)",
+                                                          fontFamily: "var(--bw-font-family)",
+                                                          display: "flex",
+                                                          alignItems: "center",
+                                                          gap: "4px",
+                                                      }, children: [u$2(IconClock, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.duration")] }), u$2("span", { style: {
+                                                          color: "var(--bw-text-color)",
+                                                          fontWeight: 500,
+                                                          fontFamily: "var(--bw-font-family)",
+                                                      }, children: [eventDetails.durationDays, " ", eventDetails.durationDays > 1 ? t$1("common.days") : t$1("common.day")] })] }), u$2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [u$2("span", { style: {
+                                                          color: "var(--bw-text-muted)",
+                                                          fontFamily: "var(--bw-font-family)",
+                                                          display: "flex",
+                                                          alignItems: "center",
+                                                          gap: "4px",
+                                                      }, children: [u$2(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.price")] }), u$2("span", { style: {
+                                                          color: "var(--bw-text-color)",
+                                                          fontWeight: 500,
+                                                          fontFamily: "var(--bw-font-family)",
+                                                      }, children: [formatCurrency(eventDetails.price), " ", t$1("common.perPerson")] })] })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.contactInfo") }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { style: {
+                                                          display: "grid",
+                                                          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                                                          gap: "16px",
+                                                      }, children: [u$2("div", { children: [u$2("label", { htmlFor: "customerName", style: labelStyles$1, children: t$1("booking.name") }), u$2("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyles$1, placeholder: t$1("booking.namePlaceholder") }), customerNameError && (u$2("p", { style: errorTextStyles$1, children: customerNameError.message }))] }), u$2("div", { children: [u$2("label", { htmlFor: "customerEmail", style: labelStyles$1, children: t$1("booking.email") }), u$2("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyles$1, placeholder: t$1("booking.emailPlaceholder") }), customerEmailError && (u$2("p", { style: errorTextStyles$1, children: customerEmailError.message }))] })] }), u$2("div", { children: [u$2("label", { htmlFor: "customerPhone", style: labelStyles$1, children: t$1("booking.phone") }), u$2("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyles$1, placeholder: t$1("booking.phonePlaceholder") })] }), u$2("div", { style: { marginTop: "10px", border: "1px solid var(--bw-border-color)", padding: "16px", borderRadius: "var(--bw-border-radius)" }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: formStyles.checkbox }), u$2("label", { htmlFor: "acceptTerms", style: {
+                                                                          fontSize: "14px",
+                                                                          color: "var(--bw-text-muted)",
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          maxWidth: "calc(100% - 32px)",
+                                                                          overflowWrap: "break-word",
+                                                                          cursor: "pointer",
+                                                                      }, children: [t$1("booking.acceptTerms"), " ", u$2("a", { href: eventDetails.agbUrl || "/terms", style: { color: "var(--bw-highlight-color)", textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: t$1("booking.terms") }), "*"] })] }), form.formState.errors.acceptTerms && (u$2("p", { style: { ...errorTextStyles$1, marginTop: "8px" }, children: form.formState.errors.acceptTerms.message }))] })] })] }), u$2("div", { style: cardStyles$1, children: [u$2("div", { style: {
                                                   display: "flex",
+                                                  justifyContent: "space-between",
                                                   alignItems: "center",
-                                                  gap: "4px",
-                                              }, children: [u$2(IconMoney, { size: 20, color: "var(--bw-highlight-color)" }), " ", t$1("booking.price")] }), u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: 500,
-                                                  fontFamily: "var(--bw-font-family)",
-                                              }, children: [formatCurrency(eventDetails.price), " ", t$1("common.perPerson")] })] })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: sectionHeaderStyles$1, children: t$1("booking.contactInfo") }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "16px" }, children: [u$2("div", { style: {
-                                                  display: "grid",
-                                                  gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-                                                  gap: "16px",
-                                              }, children: [u$2("div", { children: [u$2("label", { htmlFor: "customerName", style: labelStyles$1, children: t$1("booking.name") }), u$2("input", { id: "customerName", ...form.register("customerName"), type: "text", style: inputStyles$1, placeholder: t$1("booking.namePlaceholder") }), customerNameError && (u$2("p", { style: errorTextStyles$1, children: customerNameError.message }))] }), u$2("div", { children: [u$2("label", { htmlFor: "customerEmail", style: labelStyles$1, children: t$1("booking.email") }), u$2("input", { id: "customerEmail", ...form.register("customerEmail"), type: "email", style: inputStyles$1, placeholder: t$1("booking.emailPlaceholder") }), customerEmailError && (u$2("p", { style: errorTextStyles$1, children: customerEmailError.message }))] })] }), u$2("div", { children: [u$2("label", { htmlFor: "customerPhone", style: labelStyles$1, children: t$1("booking.phone") }), u$2("input", { id: "customerPhone", ...form.register("customerPhone"), type: "tel", style: inputStyles$1, placeholder: t$1("booking.phonePlaceholder") })] }), u$2("div", { style: { marginTop: "10px", border: "1px solid var(--bw-border-color)", padding: "16px", borderRadius: "var(--bw-border-radius)" }, children: [u$2("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [u$2("input", { id: "acceptTerms", ...form.register("acceptTerms"), type: "checkbox", style: formStyles.checkbox }), u$2("label", { htmlFor: "acceptTerms", style: {
+                                                  marginBottom: "16px",
+                                              }, children: u$2("h2", { style: { ...sectionHeaderStyles$1, marginBottom: 0 }, children: t$1("booking.participants") }) }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [u$2("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [participantFieldsConfig.name.enabled && (u$2("div", { style: { flex: 1 }, children: [u$2("label", { htmlFor: `participant-name-${index}`, style: labelStyles$1, children: t$1("booking.participantName") }), u$2("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyles$1, placeholder: t$1("booking.participantNamePlaceholder") }), form.formState.errors.participants?.[index]?.name && (u$2("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.name?.message }))] })), participantFieldsConfig.age.enabled && (u$2("div", { style: { width: "80px" }, children: [u$2("label", { htmlFor: `participant-age-${index}`, style: labelStyles$1, children: t$1("booking.participantAge") }), u$2("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
+                                                                                  setValueAs: (value) => {
+                                                                                      if (value === "" || value === null || value === undefined) {
+                                                                                          return undefined;
+                                                                                      }
+                                                                                      const num = Number(value);
+                                                                                      return Number.isNaN(num) ? undefined : num;
+                                                                                  },
+                                                                              }), type: "number", min: "0", max: "120", style: inputStyles$1, placeholder: "25" })] })), watchedParticipants.length > 1 && (u$2("div", { children: [u$2("label", { style: { ...labelStyles$1, visibility: "hidden" }, children: "\u00A0" }), u$2("button", { type: "button", onClick: () => removeParticipant(index), style: {
+                                                                                  color: "var(--bw-error-color)",
+                                                                                  backgroundColor: "var(--bw-surface-color)",
+                                                                                  border: "1px solid var(--bw-border-color)",
+                                                                                  borderRadius: "50%",
+                                                                                  width: "36px",
+                                                                                  height: "36px",
+                                                                                  display: "flex",
+                                                                                  alignItems: "center",
+                                                                                  justifyContent: "center",
+                                                                                  cursor: "pointer",
+                                                                                  transition: "all 0.2s ease",
+                                                                                  fontSize: "24px",
+                                                                                  fontWeight: 700,
+                                                                                  fontFamily: "var(--bw-font-family)",
+                                                                                  padding: 0,
+                                                                              }, children: "\u00D7" })] }))] }), participantFieldsConfig.level.enabled && (u$2("div", { style: { minWidth: "140px" }, children: [u$2("label", { htmlFor: `participant-level-${index}`, style: labelStyles$1, children: t$1("booking.participantLevel") }), u$2("select", { id: `participant-level-${index}`, ...form.register(`participants.${index}.level`), style: inputStyles$1, children: [u$2("option", { value: "", children: t$1("booking.participantLevelPlaceholder") }), participantLevelOptions.map((level) => (u$2("option", { value: level, children: t$1(`level.${level}`) }, level)))] }), form.formState.errors.participants?.[index]?.level && (u$2("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.level?.message }))] })), upsells.length > 0 && (u$2("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
+                                                                  const isSelected = (participantUpsells[index] || []).includes(upsell.id);
+                                                                  return (u$2("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [u$2("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), u$2("span", { style: { fontWeight: 500 }, children: upsell.name }), u$2("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
+                                                              }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (u$2("div", { style: {
+                                                          display: "flex",
+                                                          flexDirection: "column",
+                                                          alignItems: "center",
+                                                          marginTop: "12px",
+                                                      }, children: u$2("button", { type: "button", onClick: addParticipant, style: {
+                                                              color: "#ffffff",
+                                                              fontSize: "14px",
+                                                              fontWeight: 600,
+                                                              padding: "8px 16px",
+                                                              borderRadius: "var(--bw-border-radius)",
+                                                              backgroundColor: "var(--bw-highlight-color)",
+                                                              border: "1px solid var(--bw-highlight-color)",
+                                                              cursor: "pointer",
+                                                              transition: "all 0.2s ease",
+                                                              marginBottom: "4px",
+                                                              fontFamily: "var(--bw-font-family)",
+                                                              boxShadow: "0 2px 8px 0 var(--bw-highlight-color)",
+                                                          }, children: t$1("booking.addParticipant", { number: watchedParticipants.length + 1 }) }) })) : (u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.maxSpotsReached", { count: eventDetails.availableSpots }) }))] })] }), u$2(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), u$2("div", { style: cardStyles$1, children: [u$2("label", { htmlFor: "booking-comment", style: labelStyles$1, children: t$1("booking.comment") }), u$2("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: t$1("booking.commentPlaceholder"), rows: 3, style: {
+                                                  ...inputStyles$1,
+                                                  resize: "vertical",
+                                                  minHeight: "80px",
+                                              } })] })] })] })), checkoutStep === "payment" && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1, marginBottom: "16px" }, children: t$1("summary.title") }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "12px" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.price") }), u$2("div", { style: {
+                                                          color: "var(--bw-text-color)",
+                                                          fontWeight: 500,
+                                                          fontFamily: "var(--bw-font-family)",
+                                                      }, children: [u$2("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), upsellsTotal > 0 && (u$2("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)", fontSize: "13px", display: "block", marginBottom: "4px" }, children: [t$1("common.extras"), ":"] }), upsells.map((upsell) => {
+                                                      // Count how many participants have this upsell selected
+                                                      const countWithUpsell = watchedParticipants.filter((_, idx) => (participantUpsells[idx] || []).includes(upsell.id)).length;
+                                                      if (countWithUpsell === 0)
+                                                          return null;
+                                                      const upsellLineTotal = upsell.price * countWithUpsell;
+                                                      return (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "2px", fontSize: "13px" }, children: u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+ ", upsell.name, " (", countWithUpsell, "\u00D7)"] }), u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(upsellLineTotal) })] }) }, upsell.id));
+                                                  })] })), appliedVouchers.length > 0 && (u$2(k$3, { children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.subtotal") }), u$2("span", { style: {
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  color: totalDiscount > 0 ? "var(--bw-text-muted)" : "var(--bw-text-muted)",
+                                                                  textDecoration: totalDiscount > 0 ? "line-through" : "none",
+                                                              }, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: {
+                                                                  color: "var(--bw-success-color)",
+                                                                  fontFamily: "var(--bw-font-family)",
                                                                   fontSize: "14px",
+                                                              }, children: t$1("summary.discount", { code: appliedDiscountCode.code }) }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: {
+                                                                  color: "var(--bw-success-color)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  fontSize: "14px",
+                                                              }, children: t$1("summary.giftCard", { code: giftCard.code }) }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), u$2("div", { style: {
+                                                  borderTop: "1px solid var(--bw-border-color)",
+                                                  paddingTop: "12px",
+                                              }, children: [hasDepositOption && (u$2("div", { style: {
+                                                          display: "flex",
+                                                          justifyContent: "space-between",
+                                                          alignItems: "center",
+                                                          fontSize: "14px",
+                                                          marginBottom: "12px",
+                                                      }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.totalAmount") }), u$2("span", { style: {
                                                                   color: "var(--bw-text-muted)",
                                                                   fontFamily: "var(--bw-font-family)",
-                                                                  maxWidth: "calc(100% - 32px)",
-                                                                  overflowWrap: "break-word",
+                                                                  fontWeight: 500,
+                                                              }, children: formatCurrency(totalAmount) })] })), hasDepositOption && (u$2("div", { style: {
+                                                          display: "flex",
+                                                          gap: "8px",
+                                                          marginBottom: "16px",
+                                                      }, children: [u$2("button", { type: "button", onClick: () => setPaymentOption("deposit"), style: {
+                                                                  flex: 1,
+                                                                  padding: "12px",
+                                                                  borderRadius: "var(--bw-border-radius)",
+                                                                  border: paymentOption === "deposit"
+                                                                      ? "2px solid var(--bw-highlight-color)"
+                                                                      : "1px solid var(--bw-border-color)",
+                                                                  backgroundColor: paymentOption === "deposit"
+                                                                      ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
+                                                                      : "var(--bw-surface-color)",
                                                                   cursor: "pointer",
-                                                              }, children: [t$1("booking.acceptTerms"), " ", u$2("a", { href: eventDetails.agbUrl || "/terms", style: { color: "var(--bw-highlight-color)", textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: t$1("booking.terms") }), "*"] })] }), form.formState.errors.acceptTerms && (u$2("p", { style: { ...errorTextStyles$1, marginTop: "8px" }, children: form.formState.errors.acceptTerms.message }))] })] })] }), u$2("div", { style: cardStyles$1, children: [u$2("div", { style: {
-                                          display: "flex",
-                                          justifyContent: "space-between",
-                                          alignItems: "center",
-                                          marginBottom: "16px",
-                                      }, children: u$2("h2", { style: { ...sectionHeaderStyles$1, marginBottom: 0 }, children: t$1("booking.participants") }) }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [watchedParticipants.map((_, index) => (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [u$2("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [participantFieldsConfig.name.enabled && (u$2("div", { style: { flex: 1 }, children: [u$2("label", { htmlFor: `participant-name-${index}`, style: labelStyles$1, children: t$1("booking.participantName") }), u$2("input", { id: `participant-name-${index}`, ...form.register(`participants.${index}.name`), type: "text", style: inputStyles$1, placeholder: t$1("booking.participantNamePlaceholder") }), form.formState.errors.participants?.[index]?.name && (u$2("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.name?.message }))] })), participantFieldsConfig.age.enabled && (u$2("div", { style: { width: "80px" }, children: [u$2("label", { htmlFor: `participant-age-${index}`, style: labelStyles$1, children: t$1("booking.participantAge") }), u$2("input", { id: `participant-age-${index}`, ...form.register(`participants.${index}.age`, {
-                                                                          setValueAs: (value) => {
-                                                                              if (value === "" || value === null || value === undefined) {
-                                                                                  return undefined;
-                                                                              }
-                                                                              const num = Number(value);
-                                                                              return Number.isNaN(num) ? undefined : num;
-                                                                          },
-                                                                      }), type: "number", min: "0", max: "120", style: inputStyles$1, placeholder: "25" })] })), watchedParticipants.length > 1 && (u$2("div", { children: [u$2("label", { style: { ...labelStyles$1, visibility: "hidden" }, children: "\u00A0" }), u$2("button", { type: "button", onClick: () => removeParticipant(index), style: {
-                                                                          color: "var(--bw-error-color)",
-                                                                          backgroundColor: "var(--bw-surface-color)",
-                                                                          border: "1px solid var(--bw-border-color)",
-                                                                          borderRadius: "50%",
-                                                                          width: "36px",
-                                                                          height: "36px",
-                                                                          display: "flex",
-                                                                          alignItems: "center",
-                                                                          justifyContent: "center",
-                                                                          cursor: "pointer",
-                                                                          transition: "all 0.2s ease",
-                                                                          fontSize: "24px",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  transition: "all 0.2s ease",
+                                                              }, children: [u$2("div", { style: {
+                                                                          fontSize: "13px",
+                                                                          color: "var(--bw-text-muted)",
+                                                                          marginBottom: "4px",
+                                                                      }, children: t$1("summary.deposit") }), u$2("div", { style: {
+                                                                          fontSize: "18px",
                                                                           fontWeight: 700,
-                                                                          fontFamily: "var(--bw-font-family)",
-                                                                          padding: 0,
-                                                                      }, children: "\u00D7" })] }))] }), participantFieldsConfig.level.enabled && (u$2("div", { style: { minWidth: "140px" }, children: [u$2("label", { htmlFor: `participant-level-${index}`, style: labelStyles$1, children: t$1("booking.participantLevel") }), u$2("select", { id: `participant-level-${index}`, ...form.register(`participants.${index}.level`), style: inputStyles$1, children: [u$2("option", { value: "", children: t$1("booking.participantLevelPlaceholder") }), participantLevelOptions.map((level) => (u$2("option", { value: level, children: t$1(`level.${level}`) }, level)))] }), form.formState.errors.participants?.[index]?.level && (u$2("p", { style: errorTextStyles$1, children: form.formState.errors.participants[index]?.level?.message }))] })), upsells.length > 0 && (u$2("div", { style: participantUpsellStyles.container, children: upsells.map((upsell) => {
-                                                          const isSelected = (participantUpsells[index] || []).includes(upsell.id);
-                                                          return (u$2("label", { htmlFor: `upsell-${index}-${upsell.id}`, style: isSelected ? participantUpsellStyles.labelSelected : participantUpsellStyles.label, children: [u$2("input", { id: `upsell-${index}-${upsell.id}`, type: "checkbox", style: participantUpsellStyles.checkbox, checked: isSelected, onChange: () => toggleParticipantUpsell(index, upsell.id) }), u$2("span", { style: { fontWeight: 500 }, children: upsell.name }), u$2("span", { style: { fontSize: "12px", opacity: 0.8 }, children: ["(+", formatCurrency(upsell.price), ")"] })] }, upsell.id));
-                                                      }) }))] }, index))), watchedParticipants.length < eventDetails.availableSpots ? (u$2("div", { style: {
-                                                  display: "flex",
-                                                  flexDirection: "column",
-                                                  alignItems: "center",
-                                                  marginTop: "12px",
-                                              }, children: u$2("button", { type: "button", onClick: addParticipant, style: {
-                                                      color: "#ffffff",
-                                                      fontSize: "14px",
-                                                      fontWeight: 600,
-                                                      padding: "8px 16px",
-                                                      borderRadius: "var(--bw-border-radius)",
-                                                      backgroundColor: "var(--bw-highlight-color)",
-                                                      border: "1px solid var(--bw-highlight-color)",
-                                                      cursor: "pointer",
-                                                      transition: "all 0.2s ease",
-                                                      marginBottom: "4px",
-                                                      fontFamily: "var(--bw-font-family)",
-                                                      boxShadow: "0 2px 8px 0 var(--bw-highlight-color)",
-                                                  }, children: t$1("booking.addParticipant", { number: watchedParticipants.length + 1 }) }) })) : (u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.maxSpotsReached", { count: eventDetails.availableSpots }) }))] })] }), u$2(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), u$2("div", { style: cardStyles$1, children: [u$2("label", { htmlFor: "booking-comment", style: labelStyles$1, children: t$1("booking.comment") }), u$2("textarea", { id: "booking-comment", ...form.register("comment"), placeholder: t$1("booking.commentPlaceholder"), rows: 3, style: {
-                                          ...inputStyles$1,
-                                          resize: "vertical",
-                                          minHeight: "80px",
-                                      } })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1, marginBottom: "16px" }, children: t$1("summary.title") }), u$2("div", { style: { marginTop: "10px", display: "flex", flexDirection: "column", gap: "12px" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.price") }), u$2("div", { style: {
-                                                                  color: "var(--bw-text-color)",
-                                                                  fontWeight: 500,
+                                                                          color: paymentOption === "deposit"
+                                                                              ? "var(--bw-highlight-color)"
+                                                                              : "var(--bw-text-color)",
+                                                                      }, children: formatCurrency(depositAmount) })] }), u$2("button", { type: "button", onClick: () => setPaymentOption("full"), style: {
+                                                                  flex: 1,
+                                                                  padding: "12px",
+                                                                  borderRadius: "var(--bw-border-radius)",
+                                                                  border: paymentOption === "full"
+                                                                      ? "2px solid var(--bw-highlight-color)"
+                                                                      : "1px solid var(--bw-border-color)",
+                                                                  backgroundColor: paymentOption === "full"
+                                                                      ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
+                                                                      : "var(--bw-surface-color)",
+                                                                  cursor: "pointer",
                                                                   fontFamily: "var(--bw-font-family)",
-                                                              }, children: [u$2("span", { style: { fontWeight: 200 }, children: [watchedParticipants.length > 1 ? watchedParticipants.length : 1, " x "] }), " ", formatCurrency(eventDetails.price)] })] }), upsellsTotal > 0 && (u$2("div", { style: { marginTop: "8px", paddingTop: "8px", borderTop: "1px dashed var(--bw-border-color)" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)", fontSize: "13px", display: "block", marginBottom: "4px" }, children: [t$1("common.extras"), ":"] }), upsells.map((upsell) => {
-                                                              // Count how many participants have this upsell selected
-                                                              const countWithUpsell = watchedParticipants.filter((_, idx) => (participantUpsells[idx] || []).includes(upsell.id)).length;
-                                                              if (countWithUpsell === 0)
-                                                                  return null;
-                                                              const upsellLineTotal = upsell.price * countWithUpsell;
-                                                              return (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px" }, children: [u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+ ", upsell.name, " (", countWithUpsell, "\u00D7)"] }), u$2("span", { style: { color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(upsellLineTotal) })] }, upsell.id));
-                                                          })] })), appliedVouchers.length > 0 && (u$2(k$3, { children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.subtotal") }), u$2("span", { style: {
-                                                                          fontFamily: "var(--bw-font-family)",
-                                                                          color: totalDiscount > 0 ? "var(--bw-text-muted)" : "var(--bw-text-muted)",
-                                                                          textDecoration: totalDiscount > 0 ? "line-through" : "none",
-                                                                      }, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: {
-                                                                          color: "var(--bw-success-color)",
-                                                                          fontFamily: "var(--bw-font-family)",
-                                                                          fontSize: "14px",
-                                                                      }, children: t$1("summary.discount", { code: appliedDiscountCode.code }) }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: {
-                                                                          color: "var(--bw-success-color)",
-                                                                          fontFamily: "var(--bw-font-family)",
-                                                                          fontSize: "14px",
-                                                                      }, children: t$1("summary.giftCard", { code: giftCard.code }) }), u$2("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), u$2("div", { style: {
-                                                          borderTop: "1px solid var(--bw-border-color)",
-                                                          paddingTop: "12px",
-                                                      }, children: [hasDepositOption && (u$2("div", { style: {
-                                                                  display: "flex",
-                                                                  gap: "8px",
-                                                                  marginBottom: "16px",
-                                                              }, children: [u$2("button", { type: "button", onClick: () => setPaymentOption("deposit"), style: {
-                                                                          flex: 1,
-                                                                          padding: "12px",
-                                                                          borderRadius: "var(--bw-border-radius)",
-                                                                          border: paymentOption === "deposit"
-                                                                              ? "2px solid var(--bw-highlight-color)"
-                                                                              : "1px solid var(--bw-border-color)",
-                                                                          backgroundColor: paymentOption === "deposit"
-                                                                              ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
-                                                                              : "var(--bw-surface-color)",
-                                                                          cursor: "pointer",
-                                                                          fontFamily: "var(--bw-font-family)",
-                                                                          transition: "all 0.2s ease",
-                                                                      }, children: [u$2("div", { style: {
-                                                                                  fontSize: "13px",
-                                                                                  color: "var(--bw-text-muted)",
-                                                                                  marginBottom: "4px",
-                                                                              }, children: t$1("summary.deposit") }), u$2("div", { style: {
-                                                                                  fontSize: "18px",
-                                                                                  fontWeight: 700,
-                                                                                  color: paymentOption === "deposit"
-                                                                                      ? "var(--bw-highlight-color)"
-                                                                                      : "var(--bw-text-color)",
-                                                                              }, children: formatCurrency(depositAmount) })] }), u$2("button", { type: "button", onClick: () => setPaymentOption("full"), style: {
-                                                                          flex: 1,
-                                                                          padding: "12px",
-                                                                          borderRadius: "var(--bw-border-radius)",
-                                                                          border: paymentOption === "full"
-                                                                              ? "2px solid var(--bw-highlight-color)"
-                                                                              : "1px solid var(--bw-border-color)",
-                                                                          backgroundColor: paymentOption === "full"
-                                                                              ? "rgba(var(--bw-highlight-color-rgb, 0, 177, 170), 0.1)"
-                                                                              : "var(--bw-surface-color)",
-                                                                          cursor: "pointer",
-                                                                          fontFamily: "var(--bw-font-family)",
-                                                                          transition: "all 0.2s ease",
-                                                                      }, children: [u$2("div", { style: {
-                                                                                  fontSize: "13px",
-                                                                                  color: "var(--bw-text-muted)",
-                                                                                  marginBottom: "4px",
-                                                                              }, children: t$1("summary.payFull") }), u$2("div", { style: {
-                                                                                  fontSize: "18px",
-                                                                                  fontWeight: 700,
-                                                                                  color: paymentOption === "full"
-                                                                                      ? "var(--bw-highlight-color)"
-                                                                                      : "var(--bw-text-color)",
-                                                                              }, children: formatCurrency(totalAmount) })] })] })), hasDepositOption && paymentOption === "deposit" && (u$2("div", { style: {
-                                                                  display: "flex",
-                                                                  justifyContent: "space-between",
-                                                                  alignItems: "center",
-                                                                  fontSize: "14px",
-                                                                  marginBottom: "8px",
-                                                              }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("summary.totalAmount") }), u$2("span", { style: {
+                                                                  transition: "all 0.2s ease",
+                                                              }, children: [u$2("div", { style: {
+                                                                          fontSize: "13px",
                                                                           color: "var(--bw-text-muted)",
-                                                                          fontFamily: "var(--bw-font-family)",
-                                                                          fontWeight: 500,
-                                                                      }, children: formatCurrency(totalAmount) })] })), u$2("div", { style: {
-                                                                  display: "flex",
-                                                                  justifyContent: "space-between",
-                                                                  alignItems: "center",
-                                                                  fontSize: "18px",
-                                                                  fontWeight: 600,
-                                                              }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
-                                                                          ? t$1("summary.payToday")
-                                                                          : t$1("summary.totalAmount") }), u$2("span", { style: {
-                                                                          color: "var(--bw-highlight-color)",
-                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          marginBottom: "4px",
+                                                                      }, children: t$1("summary.payFull") }), u$2("div", { style: {
+                                                                          fontSize: "18px",
                                                                           fontWeight: 700,
-                                                                      }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (u$2("div", { style: {
-                                                                  fontSize: "12px",
-                                                                  color: "var(--bw-text-muted)",
+                                                                          color: paymentOption === "full"
+                                                                              ? "var(--bw-highlight-color)"
+                                                                              : "var(--bw-text-color)",
+                                                                      }, children: formatCurrency(totalAmount) })] })] })), u$2("div", { style: {
+                                                          display: "flex",
+                                                          justifyContent: "space-between",
+                                                          alignItems: "center",
+                                                          fontSize: "18px",
+                                                          fontWeight: 600,
+                                                      }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
+                                                                  ? t$1("summary.payToday")
+                                                                  : t$1("summary.totalAmount") }), u$2("span", { style: {
+                                                                  color: "var(--bw-highlight-color)",
                                                                   fontFamily: "var(--bw-font-family)",
-                                                                  marginTop: "8px",
-                                                                  textAlign: "right",
-                                                              }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), u$2("div", { ref: paymentSectionRef, children: (stripePromise || systemConfig?.paymentProvider === "mollie") &&
-                                          (() => {
-                                              if (!isReadyForPayment()) {
-                                                  const participantsWithNames = watchedParticipants.filter((p) => p.name?.trim()).length;
-                                                  const totalParticipantRows = watchedParticipants.length;
-                                                  const participantsWithoutNames = totalParticipantRows - participantsWithNames;
-                                                  const missing = [];
-                                                  if (participantFieldsConfig.name.required) {
-                                                      if (participantsWithNames === 0) {
-                                                          missing.push(t$1("payment.needParticipant"));
-                                                      }
-                                                      else if (participantsWithoutNames > 0) {
-                                                          missing.push(t$1("payment.needAllNames", { count: totalParticipantRows }));
-                                                      }
-                                                  }
-                                                  if (participantsWithNames > (eventDetails?.availableSpots || 0)) {
-                                                      missing.push(t$1("payment.reduceParticipants", { count: eventDetails?.availableSpots || 0 }));
-                                                  }
-                                                  if (!watchedCustomerName || watchedCustomerName.trim().length < 2 || customerNameError) {
-                                                      missing.push(t$1("payment.needValidName"));
-                                                  }
-                                                  if (!watchedCustomerEmail || watchedCustomerEmail.trim().length === 0 || customerEmailError) {
-                                                      missing.push(t$1("payment.needValidEmail"));
-                                                  }
-                                                  if (!watchedAcceptTerms) {
-                                                      missing.push(t$1("payment.needAcceptTerms"));
-                                                  }
-                                                  const message = missing.length > 0
-                                                      ? t$1("payment.missingFields", { fields: missing.join(", ") })
-                                                      : t$1("payment.fillRequired");
-                                                  return (u$2("div", { style: {
-                                                          ...cardStyles$1,
-                                                          border: "1px solid var(--bw-warning-color)",
-                                                          color: "var(--bw-warning-color)",
+                                                                  fontWeight: 700,
+                                                              }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (u$2("div", { style: {
+                                                          fontSize: "12px",
+                                                          color: "var(--bw-text-muted)",
                                                           fontFamily: "var(--bw-font-family)",
-                                                          textAlign: "center",
-                                                      }, children: message }));
-                                              }
-                                              const discountCodeProp = appliedDiscountCode
-                                                  ? {
-                                                      id: appliedDiscountCode.id,
-                                                      code: appliedDiscountCode.code,
-                                                      description: appliedDiscountCode.description || undefined,
-                                                      type: appliedDiscountCode.discountType || "percentage",
-                                                      value: appliedDiscountCode.discountValue || 0,
-                                                      discountAmount: appliedDiscountCode.discountAmount,
-                                                      newTotal: appliedDiscountCode.newTotal,
-                                                  }
-                                                  : null;
-                                              if (systemConfig?.paymentProvider === "mollie") {
-                                                  return (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(MolliePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, upsellSelections: aggregatedUpsellSelections(), mollieProfileId: systemConfig?.mollieProfileId, mollieTestmode: systemConfig?.mollieTestmode })] }));
-                                              }
-                                              return (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(StripePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig ?? null, stripePromise: stripePromise, stripeAppearance: stripeAppearance, upsellSelections: aggregatedUpsellSelections() })] }));
-                                          })() })] })] })] }) }));
+                                                          marginTop: "8px",
+                                                          textAlign: "right",
+                                                      }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), !hasPaymentProvider && (u$2("div", { style: cardStyles$1, children: u$2("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.paymentUnavailable") }) })), hasPaymentProvider && (systemConfig?.paymentProvider === "mollie" ? (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(MolliePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, upsellSelections: aggregatedUpsellSelections(), mollieProfileId: systemConfig?.mollieProfileId, mollieTestmode: systemConfig?.mollieTestmode })] })) : (u$2("div", { style: cardStyles$1, children: [u$2("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), u$2(StripePaymentForm, { config: config, eventDetails: eventDetails, formData: paymentFormData, totalAmount: paymentAmount, discountCode: discountCodeProp, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig ?? null, stripePromise: stripePromise, stripeAppearance: stripeAppearance, upsellSelections: aggregatedUpsellSelections() })] })))] }))] }) }));
   }
 
   /**
@@ -15297,12 +15292,11 @@
       return $$1(dialogContent, portalContainer);
   }
 
-  // Upsell card styles
   const cardBaseStyles = {
       position: "relative",
       display: "flex",
       flexDirection: "column",
-      padding: "16px",
+      padding: "12px",
       backgroundColor: "var(--bw-surface-color)",
       borderWidth: "2px",
       borderStyle: "solid",
@@ -15322,19 +15316,13 @@
       opacity: 0.6,
       cursor: "not-allowed",
   };
-  const checkboxContainerStyles = {
-      position: "absolute",
-      bottom: "12px",
-      left: "12px",
-      zIndex: 1,
-  };
   const checkboxInnerStyles = {
-      width: "24px",
-      height: "24px",
+      width: "48px",
+      height: "48px",
       borderWidth: "2px",
       borderStyle: "solid",
       borderColor: "var(--bw-border-color)",
-      borderRadius: "6px",
+      borderRadius: "12px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -15346,13 +15334,13 @@
       borderColor: "var(--bw-highlight-color)",
       backgroundColor: "var(--bw-highlight-color)",
   };
-  const imageContainerStyles = {
-      width: "100%",
-      height: "120px",
-      marginBottom: "12px",
+  const previewImageContainerStyles = {
+      width: "56px",
+      height: "56px",
       borderRadius: "calc(var(--bw-border-radius) - 4px)",
       overflow: "hidden",
       backgroundColor: "var(--bw-background-color)",
+      flexShrink: 0,
   };
   const imageStyles = {
       width: "100%",
@@ -15367,23 +15355,53 @@
       justifyContent: "center",
       color: "var(--bw-text-muted)",
   };
-  const nameStyles = {
+  const previewNameStyles = {
       fontSize: "16px",
       fontWeight: 600,
       color: "var(--bw-text-color)",
-      margin: "0 0 6px 0",
-      paddingRight: "36px",
+      margin: 0,
+      fontFamily: "var(--bw-font-family)",
+  };
+  const previewHeaderStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+  };
+  const previewPriceStyles = {
+      fontSize: "13px",
+      color: "var(--bw-text-muted)",
+      marginTop: "2px",
       fontFamily: "var(--bw-font-family)",
   };
+  const headerRightStyles = {
+      marginLeft: "auto",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+  };
+  const chevronStyles = {
+      fontSize: "12px",
+      color: "var(--bw-text-muted)",
+      transition: "transform 0.2s ease",
+  };
+  const expandedContentStyles = {
+      marginTop: "12px",
+      paddingTop: "12px",
+      borderTop: "1px solid var(--bw-border-color)",
+  };
+  const expandedImageContainerStyles = {
+      width: "100%",
+      height: "180px",
+      marginBottom: "12px",
+      borderRadius: "calc(var(--bw-border-radius) - 4px)",
+      overflow: "hidden",
+      backgroundColor: "var(--bw-background-color)",
+  };
   const descriptionStyles = {
       fontSize: "13px",
       color: "var(--bw-text-muted)",
       margin: "0 0 10px 0",
       lineHeight: 1.4,
-      display: "-webkit-box",
-      WebkitLineClamp: 5,
-      WebkitBoxOrient: "vertical",
-      overflow: "hidden",
       fontFamily: "var(--bw-font-family)",
   };
   const itemsContainerStyles = {
@@ -15465,6 +15483,8 @@
       const { locale } = useLocale();
       const totalPrice = upsell.price * participantCount;
       const isDisabled = !upsell.available;
+      const [isExpanded, setIsExpanded] = d$1(false);
+      const hasSavings = (upsell.savingsPercent ?? 0) > 0;
       const getCardStyles = () => {
           if (isDisabled)
               return cardDisabledStyles;
@@ -15472,16 +15492,22 @@
               return cardSelectedStyles;
           return cardBaseStyles;
       };
-      return (u$2("div", { style: getCardStyles(), onClick: !isDisabled ? onSelect : undefined, role: "checkbox", "aria-checked": isSelected, tabIndex: isDisabled ? -1 : 0, onKeyDown: (e) => {
+      const toggleExpanded = () => {
+          setIsExpanded((current) => !current);
+      };
+      return (u$2("div", { style: getCardStyles(), onClick: !isDisabled ? toggleExpanded : undefined, role: "button", "aria-expanded": isExpanded, tabIndex: isDisabled ? -1 : 0, onKeyDown: (e) => {
               if (!isDisabled && (e.key === "Enter" || e.key === " ")) {
                   e.preventDefault();
-                  onSelect();
+                  toggleExpanded();
               }
-          }, children: [u$2("div", { style: checkboxContainerStyles, children: u$2("div", { style: isSelected ? checkboxSelectedStyles : checkboxInnerStyles, children: isSelected && (u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", style: { width: "16px", height: "16px" }, children: u$2("polyline", { points: "20 6 9 17 4 12" }) })) }) }), u$2("div", { style: imageContainerStyles, children: upsell.image ? (u$2("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (u$2("div", { style: imagePlaceholderStyles, children: u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "40px", height: "40px", opacity: 0.4 }, children: u$2("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), u$2("div", { style: { flex: 1 }, children: [u$2("h4", { style: nameStyles, children: upsell.name }), upsell.description && (u$2("p", { style: descriptionStyles, children: upsell.description })), upsell.items.length > 0 && (u$2("div", { style: itemsContainerStyles, children: upsell.items.map((item, index) => (u$2("span", { style: itemStyles, children: [item.type === "product" ? "📦" : "🎫", " ", item.name, item.quantity > 1 && ` (${item.quantity}x)`] }, index))) })), upsell.suggestedEventInstance && (u$2("div", { style: eventInfoStyles, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontWeight: 500 }, children: ["\uD83D\uDCC5 ", new Date(upsell.suggestedEventInstance.date).toLocaleDateString(locale === "de" ? "de-DE" : locale === "en" ? "en-US" : locale === "es" ? "es-ES" : locale === "sv" ? "sv-SE" : "pt-PT", {
+          }, children: [u$2("div", { style: previewHeaderStyles, children: [u$2("div", { style: previewImageContainerStyles, children: upsell.image ? (u$2("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (u$2("div", { style: imagePlaceholderStyles, children: u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "32px", height: "32px", opacity: 0.4 }, children: u$2("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), u$2("div", { style: { minWidth: 0 }, children: [u$2("h4", { style: previewNameStyles, children: upsell.name }), u$2("div", { style: previewPriceStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), hasSavings && (u$2("div", { style: { ...previewPriceStyles, color: "var(--bw-highlight-color)" }, children: t("upsells.savePercent", { percent: upsell.savingsPercent ?? 0 }) }))] }), u$2("div", { style: headerRightStyles, children: [u$2("button", { type: "button", onClick: (event) => {
+                                      event.stopPropagation();
+                                      onSelect();
+                                  }, "aria-label": t("common.extras"), style: { background: "transparent", border: "none", cursor: "pointer", padding: 0 }, disabled: isDisabled, children: u$2("div", { style: isSelected ? checkboxSelectedStyles : checkboxInnerStyles, children: isSelected && (u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", style: { width: "32px", height: "32px" }, children: u$2("polyline", { points: "20 6 9 17 4 12" }) })) }) }), u$2("span", { style: { ...chevronStyles, transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)" }, children: "\u25BC" })] })] }), isExpanded && (u$2("div", { style: expandedContentStyles, children: [u$2("div", { style: expandedImageContainerStyles, children: upsell.image ? (u$2("img", { src: upsell.image, alt: upsell.name, style: imageStyles })) : (u$2("div", { style: imagePlaceholderStyles, children: u$2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { width: "40px", height: "40px", opacity: 0.4 }, children: u$2("path", { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" }) }) })) }), upsell.description && (u$2("p", { style: descriptionStyles, children: upsell.description })), upsell.items.length > 0 && (u$2("div", { style: itemsContainerStyles, children: upsell.items.map((item, index) => (u$2("span", { style: itemStyles, children: [item.type === "product" ? "📦" : "🎫", " ", item.name, item.quantity > 1 && ` (${item.quantity}x)`] }, index))) })), upsell.suggestedEventInstance && (u$2("div", { style: eventInfoStyles, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontWeight: 500 }, children: ["\uD83D\uDCC5 ", new Date(upsell.suggestedEventInstance.date).toLocaleDateString(locale === "de" ? "de-DE" : locale === "en" ? "en-US" : locale === "es" ? "es-ES" : locale === "sv" ? "sv-SE" : "pt-PT", {
                                           weekday: "short",
                                           day: "numeric",
                                           month: "short",
-                                      })] }), u$2("span", { style: { color: "var(--bw-text-muted)" }, children: t("upsells.spotsFree", { count: upsell.suggestedEventInstance.availableSpots }) })] }))] }), u$2("div", { style: priceContainerStyles, children: [u$2("span", { style: pricePerPersonStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), participantCount > 1 && (u$2("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] }))] }), isDisabled && (u$2("div", { style: unavailableOverlayStyles, children: u$2("span", { children: upsell.unavailableReason
+                                      })] }), u$2("span", { style: { color: "var(--bw-text-muted)" }, children: t("upsells.spotsFree", { count: upsell.suggestedEventInstance.availableSpots }) })] })), u$2("div", { style: priceContainerStyles, children: [u$2("span", { style: pricePerPersonStyles, children: [formatCurrency(upsell.price), "/", t("common.perPerson")] }), participantCount > 1 && (u$2("span", { style: priceTotalStyles, children: ["= ", formatCurrency(totalPrice)] })), hasSavings && (u$2("span", { style: priceTotalStyles, children: t("upsells.savePercent", { percent: upsell.savingsPercent ?? 0 }) }))] })] })), isDisabled && (u$2("div", { style: unavailableOverlayStyles, children: u$2("span", { children: upsell.unavailableReason
                           ? formatUnavailableReason(upsell.unavailableReason, t)
                           : t("upsells.notAvailable") }) }))] }));
   }
@@ -15500,20 +15526,9 @@
           }
       };
       const isSelected = (upsellId) => selectedUpsells.some((s) => s.upsellPackageId === upsellId);
-      // Calculate total for selected upsells
-      const calculateTotal = () => {
-          return selectedUpsells.reduce((total, selection) => {
-              const upsell = upsells.find((u) => u.id === selection.upsellPackageId);
-              if (upsell) {
-                  return total + upsell.price * selection.quantity;
-              }
-              return total;
-          }, 0);
-      };
-      const selectedTotal = calculateTotal();
       const selectedCount = selectedUpsells.length;
       const footerContent = (u$2(k$3, { children: [u$2("button", { type: "button", onClick: onBack, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), className: buttonClassName, children: t("common.back") }), u$2("button", { type: "button", onClick: onContinue, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), className: buttonClassName, children: selectedCount === 0 ? t("button.continueWithout") : t("button.continue") })] }));
-      return (u$2(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: u$2("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), u$2("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (u$2("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: u$2("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (u$2(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: [u$2("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }), u$2("span", { style: { fontWeight: 600, color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+", formatCurrency(selectedTotal)] })] }))] }) }));
+      return (u$2(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: u$2("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (u$2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), u$2("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (u$2("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: u$2("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (u$2(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (u$2("div", { style: { display: "flex", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: u$2("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }) }))] }) }));
   }
 
   /**
@@ -15651,6 +15666,7 @@
       // Upsells state
       const [upsells, setUpsells] = d$1([]);
       const [selectedUpsells, setSelectedUpsells] = d$1([]);
+      const [bookingPersistedState, setBookingPersistedState] = d$1(null);
       const [isLoadingUpsells, setIsLoadingUpsells] = d$1(false);
       const [tempParticipantCount, setTempParticipantCount] = d$1(1); // Used during upsell step
       // State for upcoming events (next-events view mode)
@@ -16305,6 +16321,7 @@
       const handleEventInstanceSelect = async (eventInstance) => {
           trackEvent("event_instance_selected", { eventInstanceId: eventInstance.id, eventInstanceName: eventInstance.name });
           setSelectedEventInstance(eventInstance);
+          setBookingPersistedState(null);
           bookingReturnStep.current = "eventInstances";
           // Set default participant count for upsell calculations
           const defaultParticipantCount = 1;
@@ -16358,6 +16375,21 @@
           setCurrentStep(bookingReturnStep.current);
           setSelectedEventInstance(null);
           setEventDetails(null);
+          setBookingPersistedState(null);
+      };
+      const handleBackFromBooking = () => {
+          if (upsells.length > 0) {
+              setCurrentStep("upsells");
+              return;
+          }
+          if (isDirectInstanceMode) {
+              setCurrentStep("eventTypes");
+              setSidebarOpen(false);
+              setEventDetails(null);
+              setBookingPersistedState(null);
+              return;
+          }
+          handleBackToEventInstances();
       };
       const handleBookingSuccess = (result) => {
           trackEvent("booking_completed", { paymentIntentId: result.paymentIntent?.id });
@@ -16365,6 +16397,7 @@
           setSuccessPaymentId(result.paymentIntent.id);
           setSidebarOpen(false);
           setShouldRenderBookingForm(false);
+          setBookingPersistedState(null);
           config.onSuccess?.(result);
       };
       const handleBookingError = (errorMessage) => {
@@ -16433,6 +16466,7 @@
               ? (eventTypes.find((et) => et.id === eventTypeId) ?? selectedEventType)
               : selectedEventType;
           if (resolvedEventType && resolvedEventType !== selectedEventType) {
+              trackEvent("event_type_selected", { eventTypeId: resolvedEventType.id, eventTypeName: resolvedEventType.name });
               setSelectedEventType(resolvedEventType);
           }
           // Check if this is coming from a card preview (eventTypeId was provided)
@@ -16486,7 +16520,9 @@
                   }
                   : null;
           if (eventInstance) {
+              trackEvent("event_instance_selected", { eventInstanceId: eventInstance.id, eventInstanceName: eventInstance.name });
               setSelectedEventInstance(eventInstance);
+              setBookingPersistedState(null);
           }
           setError(null);
           // Check for upsells before going to booking (same as handleEventInstanceSelect)
@@ -16650,19 +16686,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, onBackToEventInstances: () => {
-                                  setCurrentStep("eventTypes");
-                                  setShowingPreview(true);
-                                  setEventDetails(null);
-                              }, onBackToEventTypes: () => {
-                                  setCurrentStep("eventTypes");
-                                  setShowingPreview(true);
-                                  setEventDetails(null);
-                              }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
-                                  setCurrentStep("eventTypes");
-                                  setShowingPreview(true);
-                                  setEventDetails(null);
-                              }, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), 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 }), 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);
@@ -16672,6 +16696,7 @@
                                   setShouldRenderBookingForm(false);
                                   setSelectedUpsells([]);
                                   setUpsells([]);
+                                  setBookingPersistedState(null);
                                   const url = new URL(window.location.href);
                                   url.searchParams.delete("payment_intent");
                                   url.searchParams.delete("payment_intent_client_secret");
@@ -16682,19 +16707,7 @@
                               }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "specials" && showingPreview) {
-          return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(SpecialsView, { specials: specials, onEventSelect: handleUpcomingEventSelect, isLoading: isLoadingSpecials, showSavingsAmount: config.specialsSettings?.showSavingsAmount ?? true, showSavingsPercent: config.specialsSettings?.showSavingsPercent ?? false, emptyStateText: config.specialsSettings?.emptyStateText }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
-                                  setCurrentStep("eventTypes");
-                                  setShowingPreview(true);
-                                  setEventDetails(null);
-                              }, onBackToEventTypes: () => {
-                                  setCurrentStep("eventTypes");
-                                  setShowingPreview(true);
-                                  setEventDetails(null);
-                              }, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => {
-                                  setCurrentStep("eventTypes");
-                                  setShowingPreview(true);
-                                  setEventDetails(null);
-                              }, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+          return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(SpecialsView, { specials: specials, onEventSelect: handleUpcomingEventSelect, isLoading: isLoadingSpecials, showSavingsAmount: config.specialsSettings?.showSavingsAmount ?? true, showSavingsPercent: config.specialsSettings?.showSavingsPercent ?? false, emptyStateText: config.specialsSettings?.emptyStateText }), 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);
@@ -16704,6 +16717,7 @@
                                   setShouldRenderBookingForm(false);
                                   setSelectedUpsells([]);
                                   setUpsells([]);
+                                  setBookingPersistedState(null);
                               }, 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") {
@@ -16756,7 +16770,7 @@
                                       setShouldRenderInstanceSelection(true);
                                   }
                               }, children: config.buttonText ||
-                                  (isDirectInstanceMode ? t("button.bookNow") : t("button.selectDate")) }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), 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, onBackToEventInstances: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), onBackToEventTypes: () => setSidebarOpen(false), selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: () => setCurrentStep(isDirectInstanceMode ? "eventTypes" : "eventInstances"), systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                  (isDirectInstanceMode ? t("button.bookNow") : t("button.selectDate")) }), shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), 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);
@@ -16788,32 +16802,36 @@
       // Determine the correct back handlers based on view mode
       const getBackHandlers = () => {
           if (viewMode === "next-events") {
-              return {
-                  onBackToEventInstances: () => {
-                      setCurrentStep("eventInstances");
+              const backFromBooking = () => {
+                  if (upsells.length > 0) {
+                      setCurrentStep("upsells");
                       setShowingPreview(false);
-                      setEventDetails(null);
-                  },
+                      return;
+                  }
+                  setCurrentStep("eventInstances");
+                  setShowingPreview(false);
+                  setEventDetails(null);
+                  setBookingPersistedState(null);
+              };
+              return {
+                  onBackToEventInstances: backFromBooking,
                   onBackToEventTypes: () => {
                       setShowingPreview(true);
                       setCurrentStep("eventTypes");
                       setEventDetails(null);
+                      setBookingPersistedState(null);
                   },
-                  onClose: () => {
-                      setCurrentStep("eventInstances");
-                      setShowingPreview(false);
-                      setEventDetails(null);
-                  },
+                  onClose: backFromBooking,
               };
           }
           return {
-              onBackToEventInstances: handleBackToEventInstances,
+              onBackToEventInstances: handleBackFromBooking,
               onBackToEventTypes: handleBackToEventTypes,
-              onClose: handleBackToEventInstances,
+              onClose: handleBackFromBooking,
           };
       };
       const backHandlers = getBackHandlers();
-      return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), 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, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells })), u$2(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
+      return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), 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: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), u$2(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
                               setIsSuccess(false);
                               setCurrentStep("eventTypes");
                               setSuccessPaymentId(null);