@bigz-app/booking-widget 1.4.0 → 1.4.2

package/dist/index.cjs

@@ -233,6 +233,7 @@ const de$1 = {
     // Buttons
     "button.bookNow": "Jetzt buchen",
     "button.selectDate": "Jetzt Termin auswählen",
+    "button.viewDates": "Termine ansehen",
     "button.moreDetails": "Mehr Details",
     "button.toPayment": "Zur Zahlung ↓",
     "button.redeem": "Einlösen",
@@ -256,6 +257,7 @@ const de$1 = {
     "events.availableFrom": "Freie Plätze ab {{date}}",
     "events.noAvailableDates": "Keine Termine frei",
     "events.previewSectionTitle": "Specials & nächste Termine",
+    "events.seeMoreDates": "Weitere Termine ansehen...",
     // Event instances
     "instances.title": "Terminauswahl",
     "instances.noAvailable": "Keine verfügbaren Termine",
@@ -270,7 +272,7 @@ const de$1 = {
     "nextEvents.subtitle": "Wähle einen Termin aus oder zeige alle verfügbaren Termine an",
     "nextEvents.noUpcoming": "Keine bevorstehenden Termine",
     "nextEvents.noUpcomingMessage": "Aktuell sind keine Termine verfügbar. Bitte schaue später noch einmal vorbei oder kontaktiere uns direkt.",
-    "nextEvents.showAll": "Alle Events anzeigen",
+    "nextEvents.showAll": "Weitere Termine ansehen...",
     "nextEvents.priceOnRequest": "Preis auf Anfrage",
     // Specials view
     "specials.title": "Sonderangebote",
@@ -309,6 +311,10 @@ const de$1 = {
     "booking.maxSpotsReached": "Maximal {{count}} Plätze verfügbar.",
     "booking.comment": "Kommentar (optional)",
     "booking.commentPlaceholder": "Zusätzliche Anmerkungen zur Buchung...",
+    "booking.stepDate": "Termin",
+    "booking.stepUpsells": "Extras",
+    "booking.stepDetails": "Angaben",
+    "booking.stepPayment": "Zahlung",
     // Booking summary
     "summary.title": "Buchungszusammenfassung",
     "summary.subtotal": "Zwischensumme:",
@@ -441,6 +447,7 @@ const de$1 = {
     "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.",
+    "booking.depositNotConfigured": "Online-Anzahlung ist für dieses Event 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",
@@ -466,6 +473,9 @@ const de$1 = {
     "promo.giftCode": "Dein Geschenk-Code",
     "promo.copied": "Kopiert!",
     "promo.copy": "Kopieren",
+    "trust.securePayment": "Sichere Zahlung",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const en = {
@@ -513,6 +523,7 @@ const en = {
     // Buttons
     "button.bookNow": "Book now",
     "button.selectDate": "Select a date",
+    "button.viewDates": "View dates",
     "button.moreDetails": "More details",
     "button.toPayment": "To payment ↓",
     "button.redeem": "Redeem",
@@ -536,6 +547,7 @@ const en = {
     "events.availableFrom": "Available from {{date}}",
     "events.noAvailableDates": "No dates available",
     "events.previewSectionTitle": "Specials & upcoming dates",
+    "events.seeMoreDates": "See more dates...",
     // Event instances
     "instances.title": "Select a date",
     "instances.noAvailable": "No available dates",
@@ -550,7 +562,7 @@ const en = {
     "nextEvents.subtitle": "Select a date or view all available dates",
     "nextEvents.noUpcoming": "No upcoming dates",
     "nextEvents.noUpcomingMessage": "There are currently no dates available. Please check back later or contact us directly.",
-    "nextEvents.showAll": "Show all events",
+    "nextEvents.showAll": "See more dates...",
     "nextEvents.priceOnRequest": "Price on request",
     // Specials view
     "specials.title": "Special Offers",
@@ -589,6 +601,10 @@ const en = {
     "booking.maxSpotsReached": "Maximum {{count}} spots available.",
     "booking.comment": "Comment (optional)",
     "booking.commentPlaceholder": "Additional notes for the booking...",
+    "booking.stepDate": "Date",
+    "booking.stepUpsells": "Extras",
+    "booking.stepDetails": "Details",
+    "booking.stepPayment": "Payment",
     // Booking summary
     "summary.title": "Booking Summary",
     "summary.subtotal": "Subtotal:",
@@ -721,6 +737,7 @@ const en = {
     "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.",
+    "booking.depositNotConfigured": "Online deposit payment is not available for this event. Please contact us to complete your reservation.",
     "upsells.spotsFree": "{{count}} spots available",
     "upsells.notAvailable": "Not available",
     "upsells.reason.outOfStock": "{{productName}} is out of stock",
@@ -746,6 +763,9 @@ const en = {
     "promo.giftCode": "Your gift code",
     "promo.copied": "Copied!",
     "promo.copy": "Copy",
+    "trust.securePayment": "Secure payment",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const es = {
@@ -793,6 +813,7 @@ const es = {
     // Buttons
     "button.bookNow": "Reservar ahora",
     "button.selectDate": "Seleccionar fecha",
+    "button.viewDates": "Ver fechas",
     "button.moreDetails": "Más detalles",
     "button.toPayment": "Al pago ↓",
     "button.redeem": "Canjear",
@@ -816,6 +837,7 @@ const es = {
     "events.availableFrom": "Disponible desde {{date}}",
     "events.noAvailableDates": "Sin fechas disponibles",
     "events.previewSectionTitle": "Especiales & próximas fechas",
+    "events.seeMoreDates": "Ver más fechas...",
     // Event instances
     "instances.title": "Seleccionar fecha",
     "instances.noAvailable": "Sin fechas disponibles",
@@ -830,7 +852,7 @@ const es = {
     "nextEvents.subtitle": "Selecciona una fecha o consulta todas las fechas disponibles",
     "nextEvents.noUpcoming": "Sin próximas fechas",
     "nextEvents.noUpcomingMessage": "Actualmente no hay fechas disponibles. Por favor, vuelve más tarde o contáctanos directamente.",
-    "nextEvents.showAll": "Mostrar todos los eventos",
+    "nextEvents.showAll": "Ver más fechas...",
     "nextEvents.priceOnRequest": "Precio bajo consulta",
     // Specials view
     "specials.title": "Ofertas especiales",
@@ -869,6 +891,10 @@ const es = {
     "booking.maxSpotsReached": "Máximo {{count}} plazas disponibles.",
     "booking.comment": "Comentario (opcional)",
     "booking.commentPlaceholder": "Notas adicionales para la reserva...",
+    "booking.stepDate": "Fecha",
+    "booking.stepUpsells": "Extras",
+    "booking.stepDetails": "Datos",
+    "booking.stepPayment": "Pago",
     // Booking summary
     "summary.title": "Resumen de la reserva",
     "summary.subtotal": "Subtotal:",
@@ -1001,6 +1027,7 @@ const es = {
     "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.",
+    "booking.depositNotConfigured": "El pago de depósito en línea no está disponible para este evento. Contáctanos para completar la reserva.",
     "upsells.spotsFree": "{{count}} plazas disponibles",
     "upsells.notAvailable": "No disponible",
     "upsells.reason.outOfStock": "{{productName}} está agotado",
@@ -1026,6 +1053,9 @@ const es = {
     "promo.giftCode": "Tu codigo de regalo",
     "promo.copied": "Copiado!",
     "promo.copy": "Copiar",
+    "trust.securePayment": "Pago seguro",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const pt = {
@@ -1073,6 +1103,7 @@ const pt = {
     // Buttons
     "button.bookNow": "Reservar agora",
     "button.selectDate": "Selecionar data",
+    "button.viewDates": "Ver datas",
     "button.moreDetails": "Mais detalhes",
     "button.toPayment": "Para pagamento ↓",
     "button.redeem": "Resgatar",
@@ -1096,6 +1127,7 @@ const pt = {
     "events.availableFrom": "Disponível a partir de {{date}}",
     "events.noAvailableDates": "Sem datas disponíveis",
     "events.previewSectionTitle": "Especiais & próximas datas",
+    "events.seeMoreDates": "Ver mais datas...",
     // Event instances
     "instances.title": "Selecionar data",
     "instances.noAvailable": "Sem datas disponíveis",
@@ -1110,7 +1142,7 @@ const pt = {
     "nextEvents.subtitle": "Selecione uma data ou veja todas as datas disponíveis",
     "nextEvents.noUpcoming": "Sem próximas datas",
     "nextEvents.noUpcomingMessage": "Atualmente não há datas disponíveis. Por favor, volte mais tarde ou contacte-nos diretamente.",
-    "nextEvents.showAll": "Mostrar todos os eventos",
+    "nextEvents.showAll": "Ver mais datas...",
     "nextEvents.priceOnRequest": "Preço sob consulta",
     // Specials view
     "specials.title": "Ofertas especiais",
@@ -1149,6 +1181,10 @@ const pt = {
     "booking.maxSpotsReached": "Máximo {{count}} lugares disponíveis.",
     "booking.comment": "Comentário (opcional)",
     "booking.commentPlaceholder": "Notas adicionais para a reserva...",
+    "booking.stepDate": "Data",
+    "booking.stepUpsells": "Extras",
+    "booking.stepDetails": "Dados",
+    "booking.stepPayment": "Pagamento",
     // Booking summary
     "summary.title": "Resumo da reserva",
     "summary.subtotal": "Subtotal:",
@@ -1281,6 +1317,7 @@ const pt = {
     "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.",
+    "booking.depositNotConfigured": "O pagamento de depósito online não está disponível para este evento. Contacta-nos para concluir a reserva.",
     "upsells.spotsFree": "{{count}} lugares disponíveis",
     "upsells.notAvailable": "Não disponível",
     "upsells.reason.outOfStock": "{{productName}} está esgotado",
@@ -1306,6 +1343,9 @@ const pt = {
     "promo.giftCode": "O teu codigo de oferta",
     "promo.copied": "Copiado!",
     "promo.copy": "Copiar",
+    "trust.securePayment": "Pagamento seguro",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const sv = {
@@ -1353,6 +1393,7 @@ const sv = {
     // Buttons
     "button.bookNow": "Boka nu",
     "button.selectDate": "Välj datum",
+    "button.viewDates": "Visa datum",
     "button.moreDetails": "Mer information",
     "button.toPayment": "Till betalning ↓",
     "button.redeem": "Lös in",
@@ -1376,6 +1417,7 @@ const sv = {
     "events.availableFrom": "Lediga platser från {{date}}",
     "events.noAvailableDates": "Inga datum lediga",
     "events.previewSectionTitle": "Specials & kommande datum",
+    "events.seeMoreDates": "Se fler datum...",
     // Event instances
     "instances.title": "Välj datum",
     "instances.noAvailable": "Inga tillgängliga datum",
@@ -1390,7 +1432,7 @@ const sv = {
     "nextEvents.subtitle": "Välj ett datum eller visa alla tillgängliga datum",
     "nextEvents.noUpcoming": "Inga kommande datum",
     "nextEvents.noUpcomingMessage": "Det finns för närvarande inga datum tillgängliga. Kom tillbaka senare eller kontakta oss direkt.",
-    "nextEvents.showAll": "Visa alla evenemang",
+    "nextEvents.showAll": "Se fler datum...",
     "nextEvents.priceOnRequest": "Pris på förfrågan",
     // Specials view
     "specials.title": "Specialerbjudanden",
@@ -1429,6 +1471,10 @@ const sv = {
     "booking.maxSpotsReached": "Maximalt {{count}} platser tillgängliga.",
     "booking.comment": "Kommentar (valfritt)",
     "booking.commentPlaceholder": "Ytterligare anteckningar för bokningen...",
+    "booking.stepDate": "Datum",
+    "booking.stepUpsells": "Tillägg",
+    "booking.stepDetails": "Uppgifter",
+    "booking.stepPayment": "Betalning",
     // Booking summary
     "summary.title": "Bokningssammanfattning",
     "summary.subtotal": "Delsumma:",
@@ -1561,6 +1607,7 @@ const sv = {
     "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.",
+    "booking.depositNotConfigured": "Online deposition är inte tillgänglig för detta evenemang. 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",
@@ -1586,6 +1633,9 @@ const sv = {
     "promo.giftCode": "Din presentkod",
     "promo.copied": "Kopierad!",
     "promo.copy": "Kopiera",
+    "trust.securePayment": "Säker betalning",
+    "trust.paypal": "PayPal",
+    "trust.stripe": "Stripe",
 };
 
 const SUPPORTED_LOCALES = ["de", "en", "es", "sv", "pt"];
@@ -2270,7 +2320,7 @@ const createApiHeaders = (_config, locale) => {
     return {
         "Content-Type": "application/json",
         "X-Origin-Url": window.location.href,
-        "X-Language": locale ?? navigator.language,
+        "X-Language": locale,
         "X-User-Agent": navigator.userAgent,
     };
 };
@@ -6257,6 +6307,7 @@ const IconChevronRight = ({ size = 20, color = "white", className, }) => (jsxRun
 
 function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, giftCards, onSuccess, onError, upsellSelections = [], }) {
     const t = useTranslations();
+    const { locale } = useLocale();
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState(null);
     const handleBooking = async () => {
@@ -6278,7 +6329,7 @@ function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, gif
             };
             const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-gift-card-booking"), {
                 method: "POST",
-                headers: createApiHeaders(config),
+                headers: createApiHeaders(config, locale),
                 body: JSON.stringify(createRequestBody(config, requestData)),
             });
             const data = await response.json();
@@ -6429,7 +6480,7 @@ function MolliePaymentForm({ config, eventDetails, formData, totalAmount, discou
             try {
                 const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/mollie-methods"), {
                     method: "POST",
-                    headers: createApiHeaders(config),
+                    headers: createApiHeaders(config, locale),
                     body: JSON.stringify(createRequestBody(config, {
                         organizationId: config.organizationId,
                         amount: Math.round(totalAmount),
@@ -6572,7 +6623,7 @@ function MolliePaymentForm({ config, eventDetails, formData, totalAmount, discou
             }
             const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-mollie-payment"), {
                 method: "POST",
-                headers: createApiHeaders(config),
+                headers: createApiHeaders(config, locale),
                 body: JSON.stringify(createRequestBody(config, buildRequestData(token))),
             });
             const data = await response.json();
@@ -6608,7 +6659,7 @@ function MolliePaymentForm({ config, eventDetails, formData, totalAmount, discou
             }
             const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-mollie-payment"), {
                 method: "POST",
-                headers: createApiHeaders(config),
+                headers: createApiHeaders(config, locale),
                 body: JSON.stringify(createRequestBody(config, buildRequestData())),
             });
             const data = await response.json();
@@ -6806,6 +6857,7 @@ function PaymentFormInner({ eventDetails, formData, totalAmount, onSuccess, onEr
 }
 function StripePaymentForm({ config, eventDetails, formData, totalAmount, discountCode, giftCards, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, upsellSelections = [], }) {
     const t = useTranslations();
+    const { locale } = useLocale();
     const [clientSecret, setClientSecret] = React.useState(null);
     const [paymentIntentId, setPaymentIntentId] = React.useState(null);
     const [isCreatingPaymentIntent, setIsCreatingPaymentIntent] = React.useState(false);
@@ -6908,7 +6960,7 @@ function StripePaymentForm({ config, eventDetails, formData, totalAmount, discou
                 }
                 const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-stripe-payment"), {
                     method: "POST",
-                    headers: createApiHeaders(config),
+                    headers: createApiHeaders(config, locale),
                     body: JSON.stringify(createRequestBody(config, requestData)),
                 });
                 const data = await response.json();
@@ -7284,10 +7336,60 @@ function Accordion({ title, priceInfo, children, isOpen, onToggle, }) {
                 }, children: children }))] }));
 }
 
+function FlowProgress({ currentStep, hasUpsellsStep }) {
+    const t = useTranslations();
+    const steps = hasUpsellsStep
+        ? [
+            { key: "date", label: t("booking.stepDate") },
+            { key: "upsells", label: t("booking.stepUpsells") },
+            { key: "details", label: t("booking.stepDetails") },
+            { key: "payment", label: t("booking.stepPayment") },
+        ]
+        : [
+            { key: "date", label: t("booking.stepDate") },
+            { key: "details", label: t("booking.stepDetails") },
+            { key: "payment", label: t("booking.stepPayment") },
+        ];
+    const activeIndex = Math.max(steps.findIndex((step) => step.key === currentStep), 0);
+    const progressPercent = steps.length > 1 ? (activeIndex / (steps.length - 1)) * 100 : 100;
+    return (jsxRuntime.jsxs("div", { style: {
+            backgroundColor: "var(--bw-surface-color)",
+            border: "1px solid var(--bw-border-color)",
+            borderRadius: "var(--bw-border-radius)",
+            padding: "12px 14px",
+            marginBottom: "16px",
+        }, children: [jsxRuntime.jsx("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: "10px",
+                    fontFamily: "var(--bw-font-family)",
+                    gap: "8px",
+                }, children: steps.map((step, index) => (jsxRuntime.jsxs("span", { style: {
+                        fontSize: "12px",
+                        fontWeight: 700,
+                        color: index <= activeIndex ? "var(--bw-highlight-color)" : "var(--bw-text-muted)",
+                        whiteSpace: "nowrap",
+                    }, children: [index + 1, ". ", step.label] }, step.key))) }), jsxRuntime.jsx("div", { style: {
+                    width: "100%",
+                    height: "8px",
+                    borderRadius: "999px",
+                    backgroundColor: "var(--bw-background-color)",
+                    border: "1px solid var(--bw-border-color)",
+                    overflow: "hidden",
+                }, children: jsxRuntime.jsx("div", { style: {
+                        width: `${progressPercent}%`,
+                        height: "100%",
+                        backgroundColor: "var(--bw-highlight-color)",
+                        transition: "width 0.25s ease",
+                    } }) })] }));
+}
+
 // Spinner icon (kept local as it has animation style)
 const IconSpinner = ({ size = 16, color = "currentColor" }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "spin 1s linear infinite" }, children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
 function VoucherInput({ config, orderValue, eventInstanceId, customerEmail, onVoucherValidated, appliedVouchers, onRemoveVoucher, disabled = false, }) {
     const t = useTranslations();
+    const { locale } = useLocale();
     const [inputValue, setInputValue] = React.useState("");
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState(null);
@@ -7307,7 +7409,7 @@ function VoucherInput({ config, orderValue, eventInstanceId, customerEmail, onVo
         try {
             const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/validate-voucher"), {
                 method: "POST",
-                headers: createApiHeaders(config),
+                headers: createApiHeaders(config, locale),
                 body: JSON.stringify(createRequestBody(config, {
                     code: code.trim(),
                     orderValue: orderValue,
@@ -11498,6 +11600,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const { locale } = useLocale();
     const timezone = useTimezone();
     const roundEnabled = systemConfig?.roundPricesEnabled !== false;
+    const widgetPaymentMode = systemConfig?.widgetPaymentMode ?? "all";
     const participantFieldsConfig = eventDetails.participantFieldsConfig ?? DEFAULT_PARTICIPANT_FIELDS_CONFIG;
     const participantLevelOptions = eventDetails.participantLevelOptions ?? ["beginner", "advanced"];
     const roundDiscountUp = (minorUnits) => Math.ceil(minorUnits / 100) * 100;
@@ -11511,6 +11614,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const [paymentOption, setPaymentOption] = React.useState(() => persistedState?.paymentOption ?? "deposit");
     // Per-participant upsell selections: participantIndex -> array of upsell package IDs
     const [participantUpsells, setParticipantUpsells] = React.useState(() => persistedState?.participantUpsells ?? {});
+    const [showPaymentValidationHint, setShowPaymentValidationHint] = React.useState(false);
     const wasOpenRef = React.useRef(false);
     const form = useForm({
         resolver: t(createBookingFormSchema(t$1, participantFieldsConfig)),
@@ -11634,12 +11738,22 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
     const totalDiscount = calculateTotalDiscount();
     const totalAmount = calculateTotal();
     const depositAmount = calculateDeposit();
-    // Deposit stays fixed unless the discounted total is lower than the deposit
-    // (discount applies to total price, not to the deposit itself)
-    const hasDepositOption = depositAmount > 0 && depositAmount < totalAmount;
-    const paymentAmount = hasDepositOption && paymentOption === "deposit"
-        ? Math.min(depositAmount, totalAmount)
-        : totalAmount;
+    const allowsDepositInWidget = widgetPaymentMode === "all" || widgetPaymentMode === "deposits_only";
+    const allowsFullInWidget = widgetPaymentMode === "all" || widgetPaymentMode === "full_only";
+    const hasConfiguredDeposit = depositAmount > 0;
+    const hasDepositChoice = allowsDepositInWidget && hasConfiguredDeposit && depositAmount < totalAmount;
+    const depositsOnlyBlocked = widgetPaymentMode === "deposits_only" && !hasConfiguredDeposit;
+    React.useEffect(() => {
+        if (widgetPaymentMode === "deposits_only") {
+            setPaymentOption("deposit");
+        }
+        else if (widgetPaymentMode === "full_only") {
+            setPaymentOption("full");
+        }
+    }, [widgetPaymentMode]);
+    const paymentAmount = allowsFullInWidget && (!hasDepositChoice || paymentOption === "full" || !allowsDepositInWidget)
+        ? totalAmount
+        : Math.min(depositAmount, totalAmount);
     // Convert per-participant upsells to UpsellSelection[] format for API
     // Includes participantIndices to track which participants selected each upsell
     const aggregatedUpsellSelections = React.useCallback(() => {
@@ -11798,7 +11912,39 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
         onClose();
     };
     // Footer navigation
-    const footerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("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" && (jsxRuntime.jsx("button", { type: "button", onClick: () => setCheckoutStep("payment"), disabled: !isReadyForPayment() || !hasPaymentProvider, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), children: t$1("button.continueToPayment") }))] }));
+    const canContinueToPayment = isReadyForPayment();
+    const handleContinueToPayment = async () => {
+        if (canContinueToPayment && hasPaymentProvider) {
+            setShowPaymentValidationHint(false);
+            setCheckoutStep("payment");
+            return;
+        }
+        const participantErrors = await form.trigger("participants");
+        const customerErrors = await form.trigger(["customerName", "customerEmail", "acceptTerms"]);
+        if (!participantErrors || !customerErrors) {
+            setShowPaymentValidationHint(true);
+        }
+    };
+    React.useEffect(() => {
+        if (showPaymentValidationHint && canContinueToPayment) {
+            setShowPaymentValidationHint(false);
+        }
+    }, [showPaymentValidationHint, canContinueToPayment]);
+    const footerContent = (jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "6px" }, children: [checkoutStep === "details" && (jsxRuntime.jsx("div", { style: {
+                    minHeight: "14px",
+                    fontSize: "11px",
+                    color: "var(--bw-error-color)",
+                    textAlign: "center",
+                    fontFamily: "var(--bw-font-family)",
+                    opacity: showPaymentValidationHint ? 1 : 0,
+                    transition: "opacity 0.15s ease",
+                    pointerEvents: "none",
+                }, children: t$1("payment.fillRequired") })), jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px", width: "100%" }, children: [jsxRuntime.jsx("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" && (jsxRuntime.jsx("button", { type: "button", onClick: handleContinueToPayment, disabled: !hasPaymentProvider, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth, !canContinueToPayment
+                            ? {
+                                opacity: 0.55,
+                                cursor: "pointer",
+                            }
+                            : undefined), children: t$1("button.continueToPayment") }))] })] }));
     if (!eventDetails.bookingOpen) {
         return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.notPossible"), children: jsxRuntime.jsx("div", { style: {
                     display: "flex",
@@ -11815,7 +11961,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                 fontFamily: "var(--bw-font-family)",
                             }, children: t$1("booking.notPossible") }), jsxRuntime.jsx("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t$1("booking.notPossibleMessage") })] }) }) }));
     }
-    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: jsxRuntime.jsxs("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [checkoutStep === "details" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: cardStyles$1, children: [jsxRuntime.jsx("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), jsxRuntime.jsxs("div", { style: {
+    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: t$1("booking.title", { name: eventDetails.name }), footer: footerContent, children: jsxRuntime.jsxs("div", { className: "booking-widget-container", style: { padding: "16px" }, children: [jsxRuntime.jsx(FlowProgress, { currentStep: checkoutStep === "details" ? "details" : "payment", hasUpsellsStep: upsells.length > 0 }), checkoutStep === "details" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: cardStyles$1, children: [jsxRuntime.jsx("h2", { style: sectionHeaderStyles$1, children: t$1("booking.eventDetails") }), jsxRuntime.jsxs("div", { style: {
                                         display: "grid",
                                         gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
                                         gap: "12px",
@@ -11941,7 +12087,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                             }, children: t$1("summary.giftCard", { code: giftCard.code }) }), jsxRuntime.jsxs("span", { style: { color: "var(--bw-success-color)", fontFamily: "var(--bw-font-family)" }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), jsxRuntime.jsxs("div", { style: {
                                                 borderTop: "1px solid var(--bw-border-color)",
                                                 paddingTop: "12px",
-                                            }, children: [hasDepositOption && (jsxRuntime.jsxs("div", { style: {
+                                            }, children: [hasDepositChoice && (jsxRuntime.jsxs("div", { style: {
                                                         display: "flex",
                                                         justifyContent: "space-between",
                                                         alignItems: "center",
@@ -11951,7 +12097,7 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                                 color: "var(--bw-text-muted)",
                                                                 fontFamily: "var(--bw-font-family)",
                                                                 fontWeight: 500,
-                                                            }, children: formatCurrency(totalAmount) })] })), hasDepositOption && (jsxRuntime.jsxs("div", { style: {
+                                                            }, children: formatCurrency(totalAmount) })] })), hasDepositChoice && widgetPaymentMode === "all" && (jsxRuntime.jsxs("div", { style: {
                                                         display: "flex",
                                                         gap: "8px",
                                                         marginBottom: "16px",
@@ -12007,19 +12153,19 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
                                                         alignItems: "center",
                                                         fontSize: "18px",
                                                         fontWeight: 600,
-                                                    }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositOption && paymentOption === "deposit"
+                                                    }, children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: hasDepositChoice && paymentOption === "deposit"
                                                                 ? t$1("summary.payToday")
                                                                 : t$1("summary.totalAmount") }), jsxRuntime.jsx("span", { style: {
                                                                 color: "var(--bw-highlight-color)",
                                                                 fontFamily: "var(--bw-font-family)",
                                                                 fontWeight: 700,
-                                                            }, children: formatCurrency(paymentAmount) })] }), hasDepositOption && paymentOption === "deposit" && (jsxRuntime.jsx("div", { style: {
+                                                            }, children: formatCurrency(paymentAmount) })] }), hasDepositChoice && paymentOption === "deposit" && (jsxRuntime.jsx("div", { style: {
                                                         fontSize: "12px",
                                                         color: "var(--bw-text-muted)",
                                                         fontFamily: "var(--bw-font-family)",
                                                         marginTop: "8px",
                                                         textAlign: "right",
-                                                    }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), !hasPaymentProvider && (jsxRuntime.jsx("div", { style: cardStyles$1, children: jsxRuntime.jsx("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.paymentUnavailable") }) })), hasPaymentProvider && (systemConfig?.paymentProvider === "mollie" ? (jsxRuntime.jsxs("div", { style: cardStyles$1, children: [jsxRuntime.jsx("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), jsxRuntime.jsx(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 })] })) : (jsxRuntime.jsxs("div", { style: cardStyles$1, children: [jsxRuntime.jsx("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), jsxRuntime.jsx(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() })] })))] }))] }) }));
+                                                    }, children: t$1("summary.remainingOnSite", { amount: formatCurrency(totalAmount - depositAmount) }) }))] })] })] }), depositsOnlyBlocked && (jsxRuntime.jsx("div", { style: cardStyles$1, children: jsxRuntime.jsx("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.depositNotConfigured") }) })), !hasPaymentProvider && !depositsOnlyBlocked && (jsxRuntime.jsx("div", { style: cardStyles$1, children: jsxRuntime.jsx("p", { style: { ...errorTextStyles$1, margin: 0 }, children: t$1("booking.paymentUnavailable") }) })), hasPaymentProvider && !depositsOnlyBlocked && (systemConfig?.paymentProvider === "mollie" ? (jsxRuntime.jsxs("div", { style: cardStyles$1, children: [jsxRuntime.jsx("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), jsxRuntime.jsx(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 })] })) : (jsxRuntime.jsxs("div", { style: cardStyles$1, children: [jsxRuntime.jsx("h2", { style: { ...sectionHeaderStyles$1 }, children: t$1("summary.payment") }), jsxRuntime.jsx(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() })] })))] }))] }) }));
 }
 
 /**
@@ -12867,6 +13013,31 @@ const ImageCarousel = ({ images, eventName }) => {
                 } }))] }));
 };
 
+function PaymentLogosStrip() {
+    const logoHeight = 34;
+    const logoCellStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0px 1px",
+        minHeight: "36px",
+        borderRadius: "6px",
+    };
+    return (jsxRuntime.jsxs("div", { style: {
+            padding: "8px 5px",
+            backgroundColor: "var(--bw-background-color)",
+            border: "1px solid var(--bw-border-color)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "var(--bw-border-radius)",
+            gap: "0px",
+            flexWrap: "wrap",
+            width: "fit-content",
+            margin: "20px auto",
+        }, children: [jsxRuntime.jsx("span", { style: logoCellStyle, children: jsxRuntime.jsxs("svg", { width: logoHeight, height: logoHeight, viewBox: "0 0 48 48", fill: "none", "aria-label": "PayPal", children: [jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "20", fill: "#0070BA" }), jsxRuntime.jsx("path", { d: "M32.3305 18.0977C32.3082 18.24 32.2828 18.3856 32.2542 18.5351C31.2704 23.5861 27.9046 25.331 23.606 25.331H21.4173C20.8916 25.331 20.4486 25.7127 20.3667 26.2313L19.2461 33.3381L18.9288 35.3527C18.8755 35.693 19.1379 36 19.4815 36H23.3634C23.8231 36 24.2136 35.666 24.286 35.2127L24.3241 35.0154L25.055 30.3772L25.1019 30.1227C25.1735 29.6678 25.5648 29.3338 26.0245 29.3338H26.6051C30.3661 29.3338 33.3103 27.8068 34.1708 23.388C34.5303 21.5421 34.3442 20.0008 33.393 18.9168C33.1051 18.59 32.748 18.3188 32.3305 18.0977Z", fill: "white", fillOpacity: "0.6" }), jsxRuntime.jsx("path", { d: "M31.3009 17.6871C31.1506 17.6434 30.9955 17.6036 30.8364 17.5678C30.6766 17.5328 30.5127 17.5018 30.3441 17.4748C29.754 17.3793 29.1074 17.334 28.4147 17.334H22.5676C22.4237 17.334 22.2869 17.3666 22.1644 17.4254C21.8948 17.5551 21.6944 17.8104 21.6459 18.1229L20.402 26.0013L20.3662 26.2311C20.4481 25.7126 20.8911 25.3308 21.4168 25.3308H23.6055C27.9041 25.3308 31.2699 23.5851 32.2537 18.5349C32.2831 18.3854 32.3078 18.2398 32.33 18.0975C32.0811 17.9655 31.8115 17.8525 31.5212 17.7563C31.4496 17.7324 31.3757 17.7094 31.3009 17.6871Z", fill: "white", fillOpacity: "0.8" }), jsxRuntime.jsx("path", { d: "M21.6461 18.1231C21.6946 17.8105 21.895 17.5552 22.1646 17.4264C22.2879 17.3675 22.4239 17.3349 22.5678 17.3349H28.4149C29.1077 17.3349 29.7542 17.3803 30.3444 17.4757C30.513 17.5027 30.6768 17.5338 30.8367 17.5687C30.9957 17.6045 31.1508 17.6443 31.3011 17.688C31.3759 17.7103 31.4498 17.7334 31.5222 17.7564C31.8125 17.8527 32.0821 17.9664 32.331 18.0976C32.6237 16.231 32.3287 14.9601 31.3194 13.8093C30.2068 12.5424 28.1986 12 25.629 12H18.169C17.6441 12 17.1963 12.3817 17.1152 12.9011L14.0079 32.5969C13.9467 32.9866 14.2473 33.3381 14.6402 33.3381H19.2458L20.4022 26.0014L21.6461 18.1231Z", fill: "white" })] }) }), jsxRuntime.jsx("span", { style: logoCellStyle, children: jsxRuntime.jsxs("svg", { width: logoHeight * 2.2, height: logoHeight, viewBox: "0 -139.5 750 750", fill: "none", "aria-label": "Mastercard", children: [jsxRuntime.jsx("rect", { fill: "#000000", x: "0", y: "0", width: "750", height: "471", rx: "40" }), jsxRuntime.jsx("path", { d: "M434.008334,235.5 C434.008334,334.641668 353.6375,415.004169 254.499999,415.004169 C155.362498,415.004169 74.9999973,334.641668 74.9999973,235.5 C74.9999973,136.366666 155.362498,55.9958324 254.499999,55.9958324 C353.6375,55.9958324 434.008334,136.366666 434.008334,235.5", fill: "#D9222A" }), jsxRuntime.jsx("path", { d: "M495.491667,55.9958324 C449.1125,55.9958324 406.85,73.5916658 374.991666,102.462499 C368.504166,108.345833 362.445833,114.7 356.866666,121.458333 L393.133333,121.458333 C398.091667,127.4875 402.658333,133.829166 406.816667,140.470833 L343.183333,140.470833 C339.370833,146.575 335.908333,152.916666 332.841666,159.479167 L417.154167,159.479167 C420.033333,165.6375 422.575,171.975 424.754167,178.483333 L325.241666,178.483333 C323.166666,184.675 321.420833,191.0125 320.024999,197.491667 L429.966667,197.491667 C432.604167,209.741667 434.008334,222.458334 434.008334,235.5 C434.008334,255.433334 430.754167,274.612501 424.754167,292.520834 L325.241666,292.520834 C327.416666,299.033334 329.958333,305.375001 332.837499,311.529168 L417.154167,311.529168 C414.079167,318.091668 410.625,324.433335 406.808333,330.541668 L343.183333,330.541668 C347.3375,337.170835 351.9125,343.520835 356.866666,349.537501 L393.125,349.537501 C387.554167,356.308335 381.491666,362.670835 374.995833,368.550002 C406.854167,397.416668 449.1125,415.004169 495.491667,415.004169 C594.629168,415.004169 675.000002,334.641668 675.000002,235.5 C675.000002,136.370833 594.629168,55.9958324 495.491667,55.9958324", fill: "#EE9F2D" })] }) }), jsxRuntime.jsx("span", { style: logoCellStyle, children: jsxRuntime.jsxs("svg", { width: logoHeight * 1.1, height: logoHeight, viewBox: "0 0 750 471", fill: "none", "aria-label": "Visa", children: [jsxRuntime.jsx("rect", { fill: "#0E4595", x: "0", y: "0", width: "750", height: "471", rx: "40" }), jsxRuntime.jsx("polygon", { fill: "#FFFFFF", points: "278.1975 334.2275 311.5585 138.4655 364.9175 138.4655 331.5335 334.2275" }), jsxRuntime.jsx("path", { d: "M524.3075,142.6875 C513.7355,138.7215 497.1715,134.4655 476.4845,134.4655 C423.7605,134.4655 386.6205,161.0165 386.3045,199.0695 C386.0075,227.1985 412.8185,242.8905 433.0585,252.2545 C453.8275,261.8495 460.8105,267.9695 460.7115,276.5375 C460.5795,289.6595 444.1255,295.6545 428.7885,295.6545 C407.4315,295.6545 396.0855,292.6875 378.5625,285.3785 L371.6865,282.2665 L364.1975,326.0905 C376.6605,331.5545 399.7065,336.2895 423.6355,336.5345 C479.7245,336.5345 516.1365,310.2875 516.5505,269.6525 C516.7515,247.3835 502.5355,230.4355 471.7515,216.4645 C453.1005,207.4085 441.6785,201.3655 441.7995,192.1955 C441.7995,184.0585 451.4675,175.3575 472.3565,175.3575 C489.8055,175.0865 502.4445,178.8915 512.2925,182.8575 L517.0745,185.1165 L524.3075,142.6875", fill: "#FFFFFF" }), jsxRuntime.jsx("path", { d: "M661.6145,138.4655 L620.3835,138.4655 C607.6105,138.4655 598.0525,141.9515 592.4425,154.6995 L513.1975,334.1025 L569.2285,334.1025 C569.2285,334.1025 578.3905,309.9805 580.4625,304.6845 C586.5855,304.6845 641.0165,304.7685 648.7985,304.7685 C650.3945,311.6215 655.2905,334.1025 655.2905,334.1025 L704.8025,334.1025 L661.6145,138.4655 Z M596.1975,264.8725 C600.6105,253.5935 617.4565,210.1495 617.4565,210.1495 C617.1415,210.6705 621.8365,198.8155 624.5315,191.4655 L628.1385,208.3435 C628.1385,208.3435 638.3555,255.0725 640.4905,264.8715 L596.1975,264.8715 L596.1975,264.8725 Z", fill: "#FFFFFF" }), jsxRuntime.jsx("path", { d: "M45.878906 138.46484L45.197266 142.53906C66.288263 147.64458 85.126465 155.03257 101.61914 164.22461L148.96484 333.91602L205.41992 333.84961L289.42383 138.46484L232.90234 138.46484L180.66211 271.96094L175.0957 244.83203C174.83824 244.00408 174.55942 243.17304 174.27344 242.3418L156.10742 154.99219C152.87742 142.59619 143.50892 138.89684 131.91992 138.46484L45.878906 138.46484Z", fill: "#FFFFFF" })] }) }), jsxRuntime.jsx("span", { style: logoCellStyle, children: jsxRuntime.jsxs("svg", { width: logoHeight * 2, height: logoHeight, viewBox: "0 -9 58 58", fill: "none", "aria-label": "Klarna", children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "57", height: "39", rx: "3.5", fill: "#F4B6C7", stroke: "#F3F3F3" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.41299 25.7963H5V15H7.41299V25.7963ZM13.4398 15H11.0784C11.0784 16.9868 10.1885 18.8104 8.63709 20.0034L7.70155 20.7226L11.3264 25.7967H14.3068L10.9714 21.1277C12.5525 19.5116 13.4398 17.3373 13.4398 15ZM17.289 25.7933H15.0102V15.0021H17.289V25.7933ZM24.1766 18.3286V18.8061C23.5616 18.3754 22.8192 18.1223 22.0185 18.1223C19.8993 18.1223 18.1815 19.8857 18.1815 22.0611C18.1815 24.2365 19.8993 26 22.0185 26C22.8192 26 23.5616 25.7469 24.1766 25.3163V25.7933H26.3539V18.3286H24.1766ZM24.1694 22.0611C24.1694 23.1218 23.2861 23.9818 22.1966 23.9818C21.1071 23.9818 20.2238 23.1218 20.2238 22.0611C20.2238 21.0004 21.1071 20.1407 22.1966 20.1407C23.2861 20.1407 24.1694 21.0004 24.1694 22.0611ZM47.1454 18.8061V18.3286H49.3226V25.7933H47.1454V25.3163C46.5304 25.7469 45.788 26 44.9872 26C42.868 26 41.1502 24.2365 41.1502 22.0611C41.1502 19.8857 42.868 18.1223 44.9872 18.1223C45.788 18.1223 46.5304 18.3754 47.1454 18.8061ZM45.1654 23.9818C46.255 23.9818 47.1381 23.1218 47.1381 22.0611C47.1381 21.0004 46.255 20.1407 45.1654 20.1407C44.0758 20.1407 43.1926 21.0004 43.1926 22.0611C43.1926 23.1218 44.0758 23.9818 45.1654 23.9818ZM50.2675 24.5482C50.2675 23.7736 50.8792 23.1457 51.6337 23.1457C52.3882 23.1457 53 23.7736 53 24.5482C53 25.3227 52.3882 25.9507 51.6337 25.9507C50.8792 25.9507 50.2675 25.3227 50.2675 24.5482ZM37.2814 18.1278C36.4117 18.1278 35.5887 18.405 35.0384 19.1697V18.329H32.8706V25.7933H35.065V21.8706C35.065 20.7354 35.8065 20.1796 36.6993 20.1796C37.6562 20.1796 38.2063 20.7663 38.2063 21.8551V25.7933H40.3809V21.0463C40.3809 19.3092 39.0354 18.1278 37.2814 18.1278ZM29.7219 18.3287V19.3009C30.1583 18.7177 30.9715 18.3291 31.8557 18.3291V20.5013L31.8298 20.5003C30.9684 20.5003 29.7269 21.1323 29.7269 22.3082V25.7933H27.4928V18.3287H29.7219Z", fill: "#17120F" })] }) }), jsxRuntime.jsx("span", { style: { ...logoCellStyle, marginLeft: "-10px" }, children: jsxRuntime.jsxs("svg", { width: logoHeight * 1.9, height: logoHeight, viewBox: "0 -11 70 70", fill: "none", "aria-label": "Google Pay", children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M33.0603 31.5161V25.4741H36.1786C37.4564 25.4741 38.535 25.046 39.4142 24.2015L39.6252 23.9875C41.2313 22.2391 41.1258 19.5155 39.4142 17.898C38.5584 17.0416 37.3861 16.5778 36.1786 16.6016H31.1729V31.5161H33.0603ZM33.0605 23.6425V18.4332H36.2262C36.9063 18.4332 37.5512 18.6948 38.0319 19.1706C39.052 20.1696 39.0754 21.8347 38.0905 22.8694C37.6098 23.3809 36.9297 23.6663 36.2262 23.6425H33.0605ZM48.4293 22.1083C47.6204 21.359 46.5185 20.9784 45.1234 20.9784C43.3298 20.9784 41.9816 21.6444 41.0906 22.9646L42.7553 24.0231C43.3649 23.1192 44.1973 22.6673 45.2524 22.6673C45.9206 22.6673 46.5653 22.9171 47.0694 23.369C47.5618 23.7972 47.8432 24.4156 47.8432 25.0698V25.5098C47.1163 25.1055 46.2019 24.8914 45.0765 24.8914C43.7635 24.8914 42.7084 25.2006 41.923 25.831C41.1375 26.4613 40.739 27.2939 40.739 28.3524C40.7155 29.3158 41.1258 30.2316 41.8527 30.85C42.5912 31.5161 43.5291 31.8491 44.631 31.8491C45.9323 31.8491 46.9639 31.2663 47.7494 30.1007H47.8314V31.5161H49.6368V25.2244C49.6368 23.9042 49.2382 22.8576 48.4293 22.1083ZM43.3066 29.6369C42.9197 29.3514 42.6852 28.8876 42.6852 28.3881C42.6852 27.8291 42.9432 27.3652 43.4473 26.9965C43.9632 26.6278 44.6081 26.4375 45.3702 26.4375C46.4255 26.4256 47.2462 26.6635 47.8325 27.1392C47.8325 27.948 47.5159 28.6497 46.8945 29.2444C46.3317 29.8153 45.5696 30.1364 44.7723 30.1364C44.2446 30.1483 43.7287 29.9699 43.3066 29.6369ZM53.693 35.9999L60.0001 21.3114H57.9485L55.0295 28.6378H54.9943L52.0049 21.3114H49.9534L54.0916 30.8619L51.747 35.9999H53.693Z", fill: "#3C4043" }), jsxRuntime.jsx("path", { d: "M26.544 24.1659C26.544 23.5831 26.4971 23.0003 26.4034 22.4294H18.4434V25.7239H23.0037C22.8161 26.7825 22.2065 27.734 21.3155 28.3286V30.4695H24.0353C25.6296 28.9828 26.544 26.7825 26.544 24.1659Z", fill: "#4285F4" }), jsxRuntime.jsx("path", { d: "M18.4442 32.539C20.7185 32.539 22.6411 31.7778 24.0361 30.4695L21.3164 28.3287C20.5544 28.852 19.5814 29.1493 18.4442 29.1493C16.2403 29.1493 14.3763 27.6388 13.7081 25.6169H10.9062V27.8291C12.3365 30.7193 15.2555 32.539 18.4442 32.539Z", fill: "#34A853" }), jsxRuntime.jsx("path", { d: "M13.708 25.6169C13.3563 24.5584 13.3563 23.4048 13.708 22.3343V20.134H10.9058C9.69808 22.5484 9.69808 25.4029 10.9058 27.8172L13.708 25.6169Z", fill: "#FBBC04" }), jsxRuntime.jsx("path", { d: "M18.4442 18.8019C19.6517 18.7781 20.8123 19.242 21.6798 20.0864L24.0948 17.6363C22.559 16.1853 20.5427 15.3885 18.4442 15.4123C15.2555 15.4123 12.3365 17.2439 10.9062 20.134L13.7081 22.3462C14.3763 20.3124 16.2403 18.8019 18.4442 18.8019Z", fill: "#EA4335" })] }) }), jsxRuntime.jsx("span", { style: { ...logoCellStyle, marginLeft: "10px" }, children: jsxRuntime.jsxs("svg", { width: logoHeight * 1, height: logoHeight, viewBox: "0 0 70 48", fill: "none", "aria-label": "Apple Pay", children: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "69", height: "47", rx: "5.5", fill: "white", stroke: "#D9D9D9" }), jsxRuntime.jsx("g", { transform: "translate(12,8)", children: jsxRuntime.jsx("path", { d: "M31.099 17.255a4.646 4.646 0 0 1 1.421-3.315c.437-.43.95-.764 1.51-.983-.27-.715-.669-1.375-1.177-1.946a5.4 5.4 0 0 0-1.773-1.3 4.975 4.975 0 0 0-2.119-.464c-.786.011-1.562.185-2.276.512-.598.286-1.25.453-1.91.488a4.495 4.495 0 0 1-1.75-.488 5.5 5.5 0 0 0-2.346-.536 5.66 5.66 0 0 0-3.047.887 6.168 6.168 0 0 0-2.229 2.412 7.501 7.501 0 0 0-.839 3.498c.024 1.224.289 2.434.78 3.556a20.964 20.964 0 0 0 2.019 3.854c.444.664.95 1.284 1.515 1.853a3.045 3.045 0 0 0 2.041.948c.579-.006 1.149-.147 1.665-.41a4.928 4.928 0 0 1 2.217-.538c.795 0 1.58.184 2.292.538.53.261 1.11.402 1.7.41.696-.013 1.365-.265 1.9-.715.67-.545 1.252-1.192 1.724-1.92a12.29 12.29 0 0 0 1.197-2.246 4.95 4.95 0 0 1-2.113-1.852 4.573 4.573 0 0 1-.76-2.668M29.42 5.207a4.252 4.252 0 0 0 .98-2.697 3.76 3.76 0 0 0-.026-.51 4.359 4.359 0 0 0-2.79 1.424 4.124 4.124 0 0 0-1.05 2.63c-.005.171.005.343.032.513.157.021.315.03.474.024a3.67 3.67 0 0 0 2.38-1.384", fill: "#000000" }) })] }) })] }));
+}
+
 function VoucherPurchaseCard({ config, minEventPrice, fallbackImages = [], onClick, standalone = false, }) {
     const t = useTranslations();
     const [activeSlideIndex, setActiveSlideIndex] = React.useState(0);
@@ -13986,7 +14157,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                         display: "flex",
                                         flexDirection: "column",
                                         justifyContent: "space-between",
-                                        height: "490px",
+                                        height: "540px",
                                     }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h2", { className: "event-type-title", style: {
                                                         fontSize: "clamp(1.1rem, 2.5vw, 24px)",
                                                         fontWeight: 700,
@@ -14056,19 +14227,9 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                                             }) }) })) : (jsxRuntime.jsx("div", { className: "event-type-desc", style: {
                                                             margin: "10px 0",
                                                             height: "7.5em", // Same height as highlights
-                                                        }, children: "\u00A0" })) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "event-type-price", style: {
-                                                                fontWeight: 700,
-                                                                color: "var(--bw-text-color)",
-                                                                fontFamily: "var(--bw-font-family)",
-                                                                textAlign: "right",
-                                                            }, children: jsxRuntime.jsx("span", { children: formatDurationInfo(eventType.durationInfo, t) }) }), jsxRuntime.jsx("div", { className: "event-type-price", style: {
-                                                                fontSize: "clamp(1.72rem, 4vw, 32px)",
-                                                                fontWeight: 700,
-                                                                color: "var(--bw-text-color)",
-                                                                fontFamily: "var(--bw-font-family)",
-                                                                textAlign: "right",
-                                                            }, children: jsxRuntime.jsxs("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), (() => {
+                                                        }, children: "\u00A0" })) })] }), jsxRuntime.jsxs("div", { children: [(() => {
                                                     const preview = eventType.cardPreview ?? [];
+                                                    const hasMoreDates = eventType.availableInstancesCount > preview.length;
                                                     return (jsxRuntime.jsxs("div", { style: {
                                                             marginTop: "12px",
                                                             borderTop: "1px solid var(--bw-border-color)",
@@ -14102,8 +14263,33 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                                                             transition: "background 0.15s",
                                                                             boxSizing: "border-box",
                                                                         }, children: [jsxRuntime.jsxs("span", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: "3px" }, children: [item.isSpecial && (jsxRuntime.jsx("span", { style: { color: "var(--bw-highlight-color)", fontSize: "11px", lineHeight: 1 }, children: "\u2605" })), formatWeekday(item.startTime, timezone, locale), " ", formatDate(item.startTime, timezone, locale)] }), jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }, children: item.name }), jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [hasDiscount && (jsxRuntime.jsx("span", { style: { textDecoration: "line-through", opacity: 0.55, fontSize: "11px" }, children: formatCurrency(item.basePrice) })), jsxRuntime.jsx("span", { style: { fontWeight: 700, color: item.isSpecial ? "var(--bw-highlight-color)" : "var(--bw-text-color)" }, children: formatCurrency(item.price) })] }), item.specialDescription ? (jsxRuntime.jsx(InfoBadge, { text: item.specialDescription })) : (jsxRuntime.jsx("span", {}))] }, item.id));
-                                                                }) })] }));
-                                                })(), jsxRuntime.jsxs("div", { style: {
+                                                                }) }), hasMoreDates && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+                                                                    e.stopPropagation();
+                                                                    onEventTypeSelect(eventType);
+                                                                }, style: {
+                                                                    marginTop: "6px",
+                                                                    padding: 0,
+                                                                    border: "none",
+                                                                    background: "none",
+                                                                    color: "var(--bw-highlight-color)",
+                                                                    fontFamily: "var(--bw-font-family)",
+                                                                    fontSize: "13px",
+                                                                    fontWeight: 600,
+                                                                    cursor: "pointer",
+                                                                    textDecoration: "underline",
+                                                                }, children: t("events.seeMoreDates") }))] }));
+                                                })(), jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [jsxRuntime.jsx("div", { className: "event-type-price", style: {
+                                                                fontWeight: 700,
+                                                                color: "var(--bw-text-color)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                textAlign: "right",
+                                                            }, children: jsxRuntime.jsx("span", { children: formatDurationInfo(eventType.durationInfo, t) }) }), jsxRuntime.jsx("div", { className: "event-type-price", style: {
+                                                                fontSize: "clamp(1.72rem, 4vw, 32px)",
+                                                                fontWeight: 700,
+                                                                color: "var(--bw-text-color)",
+                                                                fontFamily: "var(--bw-font-family)",
+                                                                textAlign: "right",
+                                                            }, children: jsxRuntime.jsxs("span", { children: [t("common.from"), " ", formatCurrency(eventType.minPrice)] }) })] }), jsxRuntime.jsxs("div", { style: {
                                                         display: "flex",
                                                         justifyContent: "flex-end",
                                                         alignItems: "center",
@@ -14161,7 +14347,7 @@ function EventTypeSelection({ eventTypes, onEventTypeSelect, onInstancePreview,
                                             fontFamily: "var(--bw-font-family)",
                                             boxShadow: "var(--bw-shadow-md)",
                                         }, children: t("events.soldOut") }) }))] }, eventType.id));
-                    }) }) })), jsxRuntime.jsx(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
+                    }) }) })), jsxRuntime.jsx(PaymentLogosStrip, {}), jsxRuntime.jsx(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
 }
 
 const getAllocationBadgeInfo = (availableSpots, maxParticipants, t) => {
@@ -14288,7 +14474,7 @@ const PriceDisplay = ({ price, yearPrices, t }) => {
             boxShadow: displayInfo ? "0 2px 4px rgba(0, 0, 0, 0.2)" : "none",
         }, children: formatCurrency(price) }));
 };
-function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, }) {
+function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, hasUpsellsStep = false, }) {
     const t = useTranslations();
     const { locale } = useLocale();
     const timezone = useTimezone();
@@ -14354,88 +14540,88 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
     const footerNav = (jsxRuntime.jsx("button", { type: "button", onClick: handleClose, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), children: t("common.back") }));
     // Show loading state first if we're loading event instances
     if (isLoadingEventInstances) {
-        return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: jsxRuntime.jsx("div", { style: { padding: "24px" }, children: jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (jsxRuntime.jsxs("div", { className: "skeleton-shimmer", style: {
-                            backgroundColor: "var(--bw-surface-color)",
-                            border: "1px solid var(--bw-border-color)",
-                            borderRadius: "var(--bw-border-radius)",
-                            overflow: "hidden",
-                        }, children: [jsxRuntime.jsxs("div", { style: {
-                                    display: "flex",
-                                    justifyContent: "space-between",
-                                    alignItems: "center",
-                                    padding: "16px 20px",
-                                    cursor: "pointer",
-                                    borderBottom: "1px solid var(--bw-border-color)",
-                                }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [jsxRuntime.jsx("div", { style: {
-                                                    width: "80px",
-                                                    height: "20px",
-                                                    backgroundColor: "var(--bw-border-color)",
-                                                    borderRadius: "var(--bw-border-radius-small)",
-                                                } }), jsxRuntime.jsx("div", { style: {
-                                                    width: "16px",
-                                                    height: "16px",
-                                                    backgroundColor: "var(--bw-border-color)",
-                                                    borderRadius: "var(--bw-border-radius-small)",
-                                                } })] }), jsxRuntime.jsx("div", { style: {
-                                            width: "70px",
-                                            height: "16px",
-                                            backgroundColor: "var(--bw-highlight-color)",
-                                            opacity: 0.3,
-                                            borderRadius: "var(--bw-border-radius-small)",
-                                        } })] }), jsxRuntime.jsx("div", { style: {
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    gap: "12px",
-                                    paddingTop: "12px",
-                                    padding: "12px 20px 20px 20px",
-                                }, children: Array.from({ length: 2 }).map((_, eventIdx) => (jsxRuntime.jsxs("div", { style: {
-                                        position: "relative",
-                                        border: "1px solid var(--bw-border-color)",
-                                        backgroundColor: "var(--bw-surface-color)",
-                                        borderRadius: "var(--bw-border-radius)",
+        return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: jsxRuntime.jsxs("div", { style: { padding: "24px" }, children: [jsxRuntime.jsx(FlowProgress, { currentStep: "date", hasUpsellsStep: hasUpsellsStep }), jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: Array.from({ length: 3 }).map((_, idx) => (jsxRuntime.jsxs("div", { className: "skeleton-shimmer", style: {
+                                backgroundColor: "var(--bw-surface-color)",
+                                border: "1px solid var(--bw-border-color)",
+                                borderRadius: "var(--bw-border-radius)",
+                                overflow: "hidden",
+                            }, children: [jsxRuntime.jsxs("div", { style: {
+                                        display: "flex",
+                                        justifyContent: "space-between",
+                                        alignItems: "center",
                                         padding: "16px 20px",
-                                        fontFamily: "var(--bw-font-family)",
-                                    }, children: [jsxRuntime.jsxs("div", { style: {
-                                                display: "flex",
-                                                justifyContent: "space-between",
-                                                width: "100%",
-                                                alignItems: "flex-start",
-                                                gap: "12px",
-                                                marginBottom: "4px",
-                                            }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("div", { style: {
-                                                                width: "40px",
-                                                                height: "40px",
-                                                                backgroundColor: "var(--bw-background-color)",
-                                                                border: "1px solid var(--bw-border-color)",
-                                                                borderTopWidth: "4px",
-                                                                borderRadius: "var(--bw-border-radius-small)",
-                                                            } }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [jsxRuntime.jsx("div", { style: {
-                                                                        width: "80px",
-                                                                        height: "16px",
-                                                                        backgroundColor: "var(--bw-border-color)",
-                                                                        borderRadius: "var(--bw-border-radius)",
-                                                                    } }), jsxRuntime.jsx("div", { style: {
-                                                                        width: "60px",
-                                                                        height: "14px",
-                                                                        backgroundColor: "var(--bw-border-color)",
-                                                                        borderRadius: "var(--bw-border-radius)",
-                                                                    } })] })] }), jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: jsxRuntime.jsx("div", { style: {
-                                                            width: "70px",
-                                                            height: "20px",
-                                                            backgroundColor: "var(--bw-highlight-color)",
-                                                            opacity: 0.3,
-                                                            borderRadius: "var(--bw-border-radius)",
-                                                        } }) })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [jsxRuntime.jsx("div", { style: {
-                                                        width: "120px",
-                                                        height: "16px",
+                                        cursor: "pointer",
+                                        borderBottom: "1px solid var(--bw-border-color)",
+                                    }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [jsxRuntime.jsx("div", { style: {
+                                                        width: "80px",
+                                                        height: "20px",
                                                         backgroundColor: "var(--bw-border-color)",
-                                                        borderRadius: "var(--bw-border-radius)",
+                                                        borderRadius: "var(--bw-border-radius-small)",
                                                     } }), jsxRuntime.jsx("div", { style: {
-                                                        width: "50px",
-                                                        height: "20px",
+                                                        width: "16px",
+                                                        height: "16px",
                                                         backgroundColor: "var(--bw-border-color)",
-                                                        borderRadius: "16px",
-                                                    } })] })] }, eventIdx))) })] }, idx))) }) }) }));
+                                                        borderRadius: "var(--bw-border-radius-small)",
+                                                    } })] }), jsxRuntime.jsx("div", { style: {
+                                                width: "70px",
+                                                height: "16px",
+                                                backgroundColor: "var(--bw-highlight-color)",
+                                                opacity: 0.3,
+                                                borderRadius: "var(--bw-border-radius-small)",
+                                            } })] }), jsxRuntime.jsx("div", { style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "12px",
+                                        paddingTop: "12px",
+                                        padding: "12px 20px 20px 20px",
+                                    }, children: Array.from({ length: 2 }).map((_, eventIdx) => (jsxRuntime.jsxs("div", { style: {
+                                            position: "relative",
+                                            border: "1px solid var(--bw-border-color)",
+                                            backgroundColor: "var(--bw-surface-color)",
+                                            borderRadius: "var(--bw-border-radius)",
+                                            padding: "16px 20px",
+                                            fontFamily: "var(--bw-font-family)",
+                                        }, children: [jsxRuntime.jsxs("div", { style: {
+                                                    display: "flex",
+                                                    justifyContent: "space-between",
+                                                    width: "100%",
+                                                    alignItems: "flex-start",
+                                                    gap: "12px",
+                                                    marginBottom: "4px",
+                                                }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("div", { style: {
+                                                                    width: "40px",
+                                                                    height: "40px",
+                                                                    backgroundColor: "var(--bw-background-color)",
+                                                                    border: "1px solid var(--bw-border-color)",
+                                                                    borderTopWidth: "4px",
+                                                                    borderRadius: "var(--bw-border-radius-small)",
+                                                                } }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [jsxRuntime.jsx("div", { style: {
+                                                                            width: "80px",
+                                                                            height: "16px",
+                                                                            backgroundColor: "var(--bw-border-color)",
+                                                                            borderRadius: "var(--bw-border-radius)",
+                                                                        } }), jsxRuntime.jsx("div", { style: {
+                                                                            width: "60px",
+                                                                            height: "14px",
+                                                                            backgroundColor: "var(--bw-border-color)",
+                                                                            borderRadius: "var(--bw-border-radius)",
+                                                                        } })] })] }), jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: jsxRuntime.jsx("div", { style: {
+                                                                width: "70px",
+                                                                height: "20px",
+                                                                backgroundColor: "var(--bw-highlight-color)",
+                                                                opacity: 0.3,
+                                                                borderRadius: "var(--bw-border-radius)",
+                                                            } }) })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [jsxRuntime.jsx("div", { style: {
+                                                            width: "120px",
+                                                            height: "16px",
+                                                            backgroundColor: "var(--bw-border-color)",
+                                                            borderRadius: "var(--bw-border-radius)",
+                                                        } }), jsxRuntime.jsx("div", { style: {
+                                                            width: "50px",
+                                                            height: "20px",
+                                                            backgroundColor: "var(--bw-border-color)",
+                                                            borderRadius: "16px",
+                                                        } })] })] }, eventIdx))) })] }, idx))) })] }) }));
     }
     // Show empty state only if not loading and no event instances
     if (eventInstances.length === 0) {
@@ -14454,116 +14640,116 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
                                 fontFamily: "var(--bw-font-family)",
                             }, children: t("instances.noAvailable") }), jsxRuntime.jsx("p", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: t("instances.noAvailableMessage") })] }) }) }));
     }
-    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: jsxRuntime.jsx("div", { style: { padding: "20px 10px" }, children: jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
-                    const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
-                    return (jsxRuntime.jsxs(React.Fragment, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (jsxRuntime.jsx("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), jsxRuntime.jsx(Accordion, { title: label, priceInfo: jsxRuntime.jsx("div", { style: {
-                                        fontSize: "16px",
-                                        fontWeight: 500,
-                                        marginLeft: "auto",
-                                        padding: "4px 8px",
-                                        borderRadius: "var(--bw-border-radius-small)",
-                                        backgroundColor: monthPriceDisplayInfo
-                                            ? monthPriceDisplayInfo.backgroundColor
-                                            : "#14532d",
-                                        color: monthPriceDisplayInfo
-                                            ? monthPriceDisplayInfo.textColor
-                                            : "#4ade80",
-                                        boxShadow: monthPriceDisplayInfo
-                                            ? "0 2px 4px rgba(0, 0, 0, 0.2)"
-                                            : undefined,
-                                    }, children: `${t("common.from")} ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", paddingTop: "12px" }, children: events.map((event) => {
-                                        const availableSpots = event.maxParticipants - event.participantCount;
-                                        const isFullyBooked = availableSpots === 0;
-                                        const startDate = new Date(event.startTime);
-                                        const isPastEvent = today.toISOString() >= startDate.toISOString();
-                                        const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
-                                        return (jsxRuntime.jsxs("div", { style: {
-                                                position: "relative",
-                                                border: "1px solid var(--bw-border-color)",
-                                                backgroundColor: "var(--bw-surface-color)",
-                                                borderRadius: "var(--bw-border-radius)",
-                                                padding: "16px 10px",
-                                                transition: "all 0.2s ease",
-                                                fontFamily: "var(--bw-font-family)",
-                                                opacity: isDisabled ? 0.3 : 1,
-                                                filter: isDisabled ? "grayscale(40%)" : "none",
-                                                cursor: isDisabled ? "not-allowed" : "pointer",
-                                            }, onClick: () => {
-                                                if (!isDisabled) {
-                                                    handleEventInstanceSelect(event);
-                                                }
-                                            }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsxRuntime.jsx("div", { style: {
-                                                        position: "absolute",
-                                                        inset: 0,
-                                                        backgroundColor: "rgba(15, 23, 42, 0.8)",
-                                                        borderRadius: "var(--bw-border-radius)",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                    }, children: jsxRuntime.jsx("div", { style: {
-                                                            width: "32px",
-                                                            height: "32px",
-                                                            color: "var(--bw-highlight-color)",
-                                                            opacity: 0.8,
-                                                            fontSize: "32px",
-                                                        }, children: spinner() }) })), jsxRuntime.jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), jsxRuntime.jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants, t: t }), jsxRuntime.jsxs("div", { style: {
-                                                        display: "flex",
-                                                        justifyContent: "space-between",
-                                                        width: "100%",
-                                                        alignItems: "flex-start",
-                                                        gap: "12px",
-                                                        marginBottom: "4px",
-                                                    }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("div", { style: {
-                                                                        fontSize: "16px",
-                                                                        transition: "all 0.2s ease",
-                                                                        borderRadius: "var(--bw-border-radius-small)",
-                                                                        borderTop: "4px solid var(--bw-border-color)",
-                                                                        border: "1px solid var(--bw-border-color)",
-                                                                        width: "40px",
-                                                                        height: "40px",
-                                                                        display: "flex",
-                                                                        alignItems: "center",
-                                                                        justifyContent: "center",
-                                                                        fontWeight: 700,
-                                                                        color: "var(--bw-text-color)",
-                                                                        backgroundColor: "var(--bw-background-color)",
-                                                                    }, children: startDate.getDate() }), jsxRuntime.jsxs("div", { style: {
-                                                                        fontSize: "16px",
-                                                                        color: "var(--bw-text-color)",
-                                                                        display: "flex",
-                                                                        flexDirection: "column",
-                                                                        alignItems: "flex-start",
-                                                                        justifyContent: "flex-start",
-                                                                        lineHeight: 1.25,
-                                                                    }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), formatWeekday(event.startTime, timezone, locale) !==
-                                                                                    formatWeekday(event.endTime, timezone, locale) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), jsxRuntime.jsx("div", { children: formatWeekday(event.startTime, timezone, locale) ===
-                                                                                formatWeekday(event.endTime, timezone, locale) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime, timezone, locale) })] })) : (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), jsxRuntime.jsxs("span", { style: {
-                                                                        fontSize: "12px",
-                                                                        fontWeight: 400,
-                                                                        color: "var(--bw-text-muted)",
-                                                                        marginLeft: "6px",
-                                                                        backgroundColor: "rgba(0, 0, 0, 0.05)",
-                                                                        whiteSpace: "nowrap",
-                                                                        padding: "2px 6px",
-                                                                        borderRadius: "var(--bw-border-radius-small)",
-                                                                    }, children: [event.durationDays, " ", event.durationDays > 1 ? t("common.days") : t("common.day")] })] }), jsxRuntime.jsx("div", { style: {
-                                                                textAlign: "right",
-                                                                display: "flex",
-                                                                flexDirection: "column",
-                                                                alignItems: "flex-end",
-                                                            }, children: jsxRuntime.jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices, t: t }) })] }), event.name !== selectedEventType?.name && (jsxRuntime.jsx("h4", { style: {
-                                                        fontSize: "16px",
-                                                        fontWeight: 600,
-                                                        color: "var(--bw-text-color)",
-                                                        lineHeight: 1.25,
-                                                        margin: "0 0 2px 0",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        gap: "8px",
-                                                        maxWidth: "230px",
-                                                    }, children: event.name }))] }, event.id));
-                                    }) }) })] }, key));
-                }) }) }) }));
+    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, footer: footerNav, children: jsxRuntime.jsxs("div", { style: { padding: "20px 10px" }, children: [jsxRuntime.jsx(FlowProgress, { currentStep: "date", hasUpsellsStep: hasUpsellsStep }), jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
+                        const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
+                        return (jsxRuntime.jsxs(React.Fragment, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (jsxRuntime.jsx("div", { style: { height: "1px", backgroundColor: "var(--bw-border-color)", margin: "4px 0" } })), jsxRuntime.jsx(Accordion, { title: label, priceInfo: jsxRuntime.jsx("div", { style: {
+                                            fontSize: "16px",
+                                            fontWeight: 500,
+                                            marginLeft: "auto",
+                                            padding: "4px 8px",
+                                            borderRadius: "var(--bw-border-radius-small)",
+                                            backgroundColor: monthPriceDisplayInfo
+                                                ? monthPriceDisplayInfo.backgroundColor
+                                                : "#14532d",
+                                            color: monthPriceDisplayInfo
+                                                ? monthPriceDisplayInfo.textColor
+                                                : "#4ade80",
+                                            boxShadow: monthPriceDisplayInfo
+                                                ? "0 2px 4px rgba(0, 0, 0, 0.2)"
+                                                : undefined,
+                                        }, children: `${t("common.from")} ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", paddingTop: "12px" }, children: events.map((event) => {
+                                            const availableSpots = event.maxParticipants - event.participantCount;
+                                            const isFullyBooked = availableSpots === 0;
+                                            const startDate = new Date(event.startTime);
+                                            const isPastEvent = today.toISOString() >= startDate.toISOString();
+                                            const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
+                                            return (jsxRuntime.jsxs("div", { style: {
+                                                    position: "relative",
+                                                    border: "1px solid var(--bw-border-color)",
+                                                    backgroundColor: "var(--bw-surface-color)",
+                                                    borderRadius: "var(--bw-border-radius)",
+                                                    padding: "16px 10px",
+                                                    transition: "all 0.2s ease",
+                                                    fontFamily: "var(--bw-font-family)",
+                                                    opacity: isDisabled ? 0.3 : 1,
+                                                    filter: isDisabled ? "grayscale(40%)" : "none",
+                                                    cursor: isDisabled ? "not-allowed" : "pointer",
+                                                }, onClick: () => {
+                                                    if (!isDisabled) {
+                                                        handleEventInstanceSelect(event);
+                                                    }
+                                                }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsxRuntime.jsx("div", { style: {
+                                                            position: "absolute",
+                                                            inset: 0,
+                                                            backgroundColor: "rgba(15, 23, 42, 0.8)",
+                                                            borderRadius: "var(--bw-border-radius)",
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            justifyContent: "center",
+                                                        }, children: jsxRuntime.jsx("div", { style: {
+                                                                width: "32px",
+                                                                height: "32px",
+                                                                color: "var(--bw-highlight-color)",
+                                                                opacity: 0.8,
+                                                                fontSize: "32px",
+                                                            }, children: spinner() }) })), jsxRuntime.jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices, t: t }), jsxRuntime.jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants, t: t }), jsxRuntime.jsxs("div", { style: {
+                                                            display: "flex",
+                                                            justifyContent: "space-between",
+                                                            width: "100%",
+                                                            alignItems: "flex-start",
+                                                            gap: "12px",
+                                                            marginBottom: "4px",
+                                                        }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("div", { style: {
+                                                                            fontSize: "16px",
+                                                                            transition: "all 0.2s ease",
+                                                                            borderRadius: "var(--bw-border-radius-small)",
+                                                                            borderTop: "4px solid var(--bw-border-color)",
+                                                                            border: "1px solid var(--bw-border-color)",
+                                                                            width: "40px",
+                                                                            height: "40px",
+                                                                            display: "flex",
+                                                                            alignItems: "center",
+                                                                            justifyContent: "center",
+                                                                            fontWeight: 700,
+                                                                            color: "var(--bw-text-color)",
+                                                                            backgroundColor: "var(--bw-background-color)",
+                                                                        }, children: startDate.getDate() }), jsxRuntime.jsxs("div", { style: {
+                                                                            fontSize: "16px",
+                                                                            color: "var(--bw-text-color)",
+                                                                            display: "flex",
+                                                                            flexDirection: "column",
+                                                                            alignItems: "flex-start",
+                                                                            justifyContent: "flex-start",
+                                                                            lineHeight: 1.25,
+                                                                        }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), formatWeekday(event.startTime, timezone, locale) !==
+                                                                                        formatWeekday(event.endTime, timezone, locale) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.endTime, timezone, locale) })] }))] }), jsxRuntime.jsx("div", { children: formatWeekday(event.startTime, timezone, locale) ===
+                                                                                    formatWeekday(event.endTime, timezone, locale) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime, timezone, locale) })] })) : (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime, timezone, locale), " ", t("instances.oclock")] })) })] }), jsxRuntime.jsxs("span", { style: {
+                                                                            fontSize: "12px",
+                                                                            fontWeight: 400,
+                                                                            color: "var(--bw-text-muted)",
+                                                                            marginLeft: "6px",
+                                                                            backgroundColor: "rgba(0, 0, 0, 0.05)",
+                                                                            whiteSpace: "nowrap",
+                                                                            padding: "2px 6px",
+                                                                            borderRadius: "var(--bw-border-radius-small)",
+                                                                        }, children: [event.durationDays, " ", event.durationDays > 1 ? t("common.days") : t("common.day")] })] }), jsxRuntime.jsx("div", { style: {
+                                                                    textAlign: "right",
+                                                                    display: "flex",
+                                                                    flexDirection: "column",
+                                                                    alignItems: "flex-end",
+                                                                }, children: jsxRuntime.jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices, t: t }) })] }), event.name !== selectedEventType?.name && (jsxRuntime.jsx("h4", { style: {
+                                                            fontSize: "16px",
+                                                            fontWeight: 600,
+                                                            color: "var(--bw-text-color)",
+                                                            lineHeight: 1.25,
+                                                            margin: "0 0 2px 0",
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: "8px",
+                                                            maxWidth: "230px",
+                                                        }, children: event.name }))] }, event.id));
+                                        }) }) })] }, key));
+                    }) })] }) }));
 }
 
 function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText, showAllButton, isLoadingEventDetails = false, isLoadingShowAll = false, isLoading = false, }) {
@@ -14571,6 +14757,47 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
     const { locale } = useLocale();
     const timezone = useTimezone();
     const [selectedEventInstanceId, setSelectedEventInstanceId] = React.useState(null);
+    const normalizedShowAllButtonText = showAllButtonText.trim() || t("nextEvents.showAll");
+    function InfoBadge({ text }) {
+        const [open, setOpen] = React.useState(false);
+        return (jsxRuntime.jsxs("span", { onClick: (event) => {
+                event.stopPropagation();
+                setOpen((current) => !current);
+            }, style: {
+                position: "relative",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "16px",
+                height: "16px",
+                borderRadius: "50%",
+                border: "1px solid var(--bw-highlight-color)",
+                color: "var(--bw-highlight-color)",
+                fontSize: "9px",
+                fontWeight: 700,
+                cursor: "pointer",
+                flexShrink: 0,
+                userSelect: "none",
+            }, children: ["i", open && (jsxRuntime.jsx("span", { style: {
+                        position: "absolute",
+                        bottom: "calc(100% + 6px)",
+                        right: 0,
+                        backgroundColor: "var(--bw-surface-color)",
+                        border: "1px solid var(--bw-border-color)",
+                        borderRadius: "var(--bw-border-radius-small)",
+                        boxShadow: "var(--bw-shadow-md)",
+                        padding: "6px 10px",
+                        fontSize: "13px",
+                        color: "var(--bw-text-color)",
+                        fontWeight: 400,
+                        whiteSpace: "normal",
+                        width: "180px",
+                        lineHeight: 1.4,
+                        zIndex: 100,
+                        textAlign: "left",
+                        pointerEvents: "none",
+                    }, children: text }))] }));
+    }
     const handleEventSelect = (eventInstanceId) => {
         setSelectedEventInstanceId(eventInstanceId);
         onEventSelect(eventInstanceId);
@@ -14636,20 +14863,9 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
     return (jsxRuntime.jsxs("div", { style: {
             maxWidth: "500px",
             margin: "0 auto",
-            padding: "16px",
+            padding: "12px 16px",
             fontFamily: "var(--bw-font-family)",
-        }, children: [jsxRuntime.jsxs("div", { style: { textAlign: "center", marginBottom: "24px" }, children: [jsxRuntime.jsx("h2", { style: {
-                            fontWeight: 600,
-                            margin: "0 0 8px 0",
-                            fontSize: "18px",
-                            color: "var(--bw-text-color)",
-                            fontFamily: "var(--bw-font-family)",
-                        }, children: t("nextEvents.title") }), jsxRuntime.jsx("p", { style: {
-                            margin: 0,
-                            fontSize: "16px",
-                            color: "var(--bw-text-muted)",
-                            fontFamily: "var(--bw-font-family)",
-                        }, children: t("nextEvents.subtitle") })] }), jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", marginBottom: "24px" }, children: events.map((event) => {
+        }, children: [jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px", marginBottom: "10px" }, children: events.map((event) => {
                     const availableSpots = event.maxParticipants - event.participantCount;
                     const isFullyBooked = availableSpots === 0;
                     const startDate = new Date(event.startTime);
@@ -14673,11 +14889,10 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                     const isDisabled = isFullyBooked || isPastEvent || !event.bookingOpen;
                     return (jsxRuntime.jsxs("div", { style: {
                             position: "relative",
-                            backgroundColor: "var(--bw-surface-color)",
-                            borderRadius: "var(--bw-border-radius)",
-                            padding: "8px 10px",
+                            borderRadius: "var(--bw-border-radius-small)",
+                            padding: "0 4px",
                             transition: "all 0.2s ease",
-                            border: `1px solid ${getAvailabilityColor()}`,
+                            border: "1px solid transparent",
                             fontFamily: "var(--bw-font-family)",
                             opacity: isDisabled ? 0.3 : 1,
                             filter: isDisabled ? "grayscale(100%)" : "none",
@@ -14686,6 +14901,14 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                             if (!isDisabled) {
                                 handleEventSelect(event.id);
                             }
+                        }, onMouseEnter: (hoverEvent) => {
+                            if (!isDisabled) {
+                                hoverEvent.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
+                                hoverEvent.currentTarget.style.borderColor = getAvailabilityColor();
+                            }
+                        }, onMouseLeave: (hoverEvent) => {
+                            hoverEvent.currentTarget.style.backgroundColor = "transparent";
+                            hoverEvent.currentTarget.style.borderColor = "transparent";
                         }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsxRuntime.jsx("div", { style: {
                                     position: "absolute",
                                     inset: 0,
@@ -14701,80 +14924,41 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                                         fontSize: "32px",
                                         animation: "spin 1s linear infinite",
                                     }, children: "\u27F3" }) })), jsxRuntime.jsxs("div", { style: {
-                                    display: "flex",
-                                    justifyContent: "space-between",
-                                    width: "100%",
-                                    alignItems: "flex-start",
-                                    gap: "12px",
-                                    marginBottom: "4px",
-                                }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsxRuntime.jsx("div", { style: {
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    justifyContent: "center",
-                                                    fontWeight: 700,
-                                                    fontSize: "16px",
-                                                    borderRadius: "var(--bw-border-radius-small)",
-                                                    width: "40px",
-                                                    height: "40px",
-                                                    color: "var(--bw-text-color)",
-                                                    backgroundColor: "var(--bw-background-color)",
-                                                    border: "1px solid var(--bw-border-color)",
-                                                    borderTopWidth: "4px",
-                                                    borderTopColor: getAvailabilityColor(),
-                                                    transition: "all 0.2s ease",
-                                                }, children: startDate.getDate() }), jsxRuntime.jsxs("div", { style: {
-                                                    display: "flex",
-                                                    flexDirection: "column",
-                                                    alignItems: "flex-start",
-                                                    justifyContent: "flex-start",
-                                                    fontSize: "16px",
-                                                    color: "var(--bw-text-color)",
-                                                    lineHeight: 1.25,
-                                                }, children: [jsxRuntime.jsx("span", { style: { fontWeight: 600, marginBottom: "2px", textTransform: "capitalize" }, children: formatWeekday(event.startTime, timezone, locale) }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime, timezone, locale) })] })] }), jsxRuntime.jsxs("div", { style: {
-                                            display: "flex",
-                                            flexDirection: "column",
-                                            alignItems: "flex-end",
-                                            textAlign: "right",
-                                        }, children: [jsxRuntime.jsx("div", { style: {
-                                                    fontWeight: 700,
-                                                    color: "var(--bw-highlight-color)",
-                                                    fontSize: "18px",
-                                                }, children: event.price !== null ? formatCurrency(event.price) : t("nextEvents.priceOnRequest") }), event.deposit && event.deposit > 0 && (jsxRuntime.jsxs("div", { style: { fontSize: "12px", color: "var(--bw-text-muted)" }, children: [t("common.from"), " ", formatCurrency(event.deposit)] }))] })] }), jsxRuntime.jsxs("h4", { style: {
-                                    display: "flex",
+                                    minHeight: "32px",
+                                    display: "grid",
+                                    gridTemplateColumns: "1fr auto 20px",
                                     alignItems: "center",
-                                    fontWeight: 600,
-                                    margin: "0 0 2px 0",
-                                    fontSize: "16px",
-                                    color: "var(--bw-text-color)",
-                                    lineHeight: 1.25,
                                     gap: "8px",
-                                }, children: [event.name, jsxRuntime.jsxs("span", { style: {
-                                            fontSize: "12px",
-                                            fontWeight: 400,
-                                            color: "var(--bw-text-muted)",
-                                            marginLeft: "6px",
-                                            backgroundColor: "rgba(0, 0, 0, 0.05)",
-                                            borderRadius: "16px",
-                                            padding: "2px 8px",
-                                        }, children: [event.durationDays, " ", event.durationDays > 1 ? t("common.days") : t("common.day")] })] }), event.notes && (jsxRuntime.jsx("p", { style: {
-                                    margin: "8px 0 0 0",
-                                    fontSize: "12px",
+                                    width: "100%",
+                                    fontSize: "13px",
                                     color: "var(--bw-text-muted)",
-                                    overflow: "hidden",
-                                    lineHeight: 1.375,
-                                    display: "-webkit-box",
-                                    WebkitBoxOrient: "vertical",
-                                    WebkitLineClamp: 2,
-                                }, children: event.notes }))] }, event.id));
+                                }, children: [jsxRuntime.jsxs("span", { style: {
+                                            whiteSpace: "nowrap",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "3px",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            textTransform: "capitalize",
+                                        }, children: [formatWeekday(event.startTime, timezone, locale), " ", formatDate(event.startTime, timezone, locale)] }), jsxRuntime.jsx("span", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "4px",
+                                            whiteSpace: "nowrap",
+                                            fontWeight: 700,
+                                            color: "var(--bw-text-color)",
+                                        }, children: event.price !== null ? formatCurrency(event.price) : t("nextEvents.priceOnRequest") }), event.notes ? jsxRuntime.jsx(InfoBadge, { text: event.notes }) : jsxRuntime.jsx("span", {})] })] }, event.id));
                 }) }), showAllButton && (jsxRuntime.jsx("div", { style: { textAlign: "center" }, children: jsxRuntime.jsx("button", { type: "button", disabled: isLoadingShowAll, style: {
-                        position: "relative",
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
                         backgroundColor: "var(--bw-surface-color)",
                         color: "var(--bw-highlight-color)",
                         border: "1px solid var(--bw-highlight-color)",
-                        padding: "12px 24px",
-                        borderRadius: "var(--bw-border-radius)",
-                        fontSize: "16px",
-                        fontWeight: 500,
+                        padding: "6px 10px",
+                        borderRadius: "var(--bw-border-radius-small)",
+                        fontSize: "13px",
+                        fontWeight: 600,
                         fontFamily: "var(--bw-font-family)",
                         transition: "all 0.2s ease",
                         cursor: isLoadingShowAll ? "not-allowed" : "pointer",
@@ -14785,7 +14969,7 @@ function NextEventsPreview({ events, onEventSelect, onShowAll, showAllButtonText
                                     color: "var(--bw-highlight-color)",
                                     fontSize: "16px",
                                     animation: "spin 1s linear infinite",
-                                }, children: "\u27F3" }), t("common.loading")] })) : (showAllButtonText) }) }))] }));
+                                }, children: "\u27F3" }), t("common.loading")] })) : (normalizedShowAllButtonText) }) }))] }));
 }
 
 function SpecialsView({ specials, onEventSelect, isLoading = false, showSavingsAmount = true, showSavingsPercent = false, emptyStateText, isLoadingEventDetails = false, }) {
@@ -15422,7 +15606,7 @@ function UpsellsStep({ upsells, selectedUpsells, participantCount, isLoading, is
     const isSelected = (upsellId) => selectedUpsells.some((s) => s.upsellPackageId === upsellId);
     const selectedCount = selectedUpsells.length;
     const footerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: onBack, style: mergeStyles(buttonStyles.secondary, buttonStyles.fullWidth), className: buttonClassName, children: t("common.back") }), jsxRuntime.jsx("button", { type: "button", onClick: onContinue, style: mergeStyles(buttonStyles.primary, buttonStyles.fullWidth), className: buttonClassName, children: selectedCount === 0 ? t("button.continueWithout") : t("button.continue") })] }));
-    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), jsxRuntime.jsx("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: jsxRuntime.jsx("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (jsxRuntime.jsx(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: jsxRuntime.jsx("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }) }))] }) }));
+    return (jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [jsxRuntime.jsx(FlowProgress, { currentStep: "upsells", hasUpsellsStep: true }), isLoading && (jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), jsxRuntime.jsx("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: jsxRuntime.jsx("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (jsxRuntime.jsx(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: jsxRuntime.jsx("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }) }))] }) }));
 }
 
 /**
@@ -15563,6 +15747,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     const [bookingPersistedState, setBookingPersistedState] = React.useState(null);
     const [isLoadingUpsells, setIsLoadingUpsells] = React.useState(false);
     const [tempParticipantCount, setTempParticipantCount] = React.useState(1); // Used during upsell step
+    const hasUpsellsFlowStep = upsells.length > 0 || currentStep === "upsells";
     // State for upcoming events (next-events view mode)
     const [upcomingEvents, setUpcomingEvents] = React.useState([]);
     const [showingPreview, setShowingPreview] = React.useState(true);
@@ -15689,6 +15874,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                         ...(data.mollieProfileId ? { mollieProfileId: data.mollieProfileId } : {}),
                         ...(data.mollieTestmode !== undefined ? { mollieTestmode: data.mollieTestmode } : {}),
                         roundPricesEnabled: data.roundPricesEnabled ?? true,
+                        widgetPaymentMode: data.widgetPaymentMode ?? "all",
                     });
                 }
             }
@@ -16053,6 +16239,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     mollieProfileId: data.mollieProfileId,
                     mollieTestmode: data.mollieTestmode,
                     roundPricesEnabled: data.roundPricesEnabled ?? true,
+                    widgetPaymentMode: data.widgetPaymentMode ?? "all",
                 });
             }
             if (data.stripePublishableKey) {
@@ -16113,6 +16300,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     mollieProfileId: data.mollieProfileId,
                     mollieTestmode: data.mollieTestmode,
                     roundPricesEnabled: data.roundPricesEnabled ?? true,
+                    widgetPaymentMode: data.widgetPaymentMode ?? "all",
                 });
                 if (!stripePromise && data.stripePublishableKey) {
                     const stripeOptions = {
@@ -16621,7 +16809,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                             }, isOpen: currentStep === "eventInstances", onClose: () => {
                                 setShowingPreview(true);
                                 setCurrentStep("eventTypes");
-                            }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                            }, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setShowingPreview(true);
@@ -16660,11 +16848,12 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                     setShouldRenderBookingForm(true);
                                 }
                                 else {
+                                    setCurrentStep("eventInstances");
                                     setSidebarOpen(true);
                                     setShouldRenderInstanceSelection(true);
                                 }
                             }, children: config.buttonText ||
-                                (isDirectInstanceMode ? t("button.bookNow") : t("button.selectDate")) }), shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (jsxRuntime.jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
+                                (isDirectInstanceMode ? t("button.bookNow") : t("button.viewDates")) }), shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => setSidebarOpen(false), isOpen: sidebarOpen && currentStep === "eventInstances", onClose: () => setSidebarOpen(false), isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (jsxRuntime.jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: handleBackFromBooking, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                                 setIsSuccess(false);
                                 setCurrentStep("eventTypes");
                                 setSidebarOpen(false);
@@ -16725,7 +16914,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         };
     };
     const backHandlers = getBackHandlers();
-    return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderUpsells && (jsxRuntime.jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
+    return (jsxRuntime.jsxs(StyleProvider, { config: config, children: [jsxRuntime.jsxs("div", { ref: setWidgetContainerRef, children: [cardsView, shouldRenderInstanceSelection && (jsxRuntime.jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails, hasUpsellsStep: hasUpsellsFlowStep })), shouldRenderUpsells && (jsxRuntime.jsx(UpsellsStep, { upsells: upsells, selectedUpsells: selectedUpsells, participantCount: tempParticipantCount, isLoading: isLoadingUpsells, isOpen: currentStep === "upsells", onClose: () => setCurrentStep("eventInstances"), onSelect: handleUpsellsSelect, onContinue: handleUpsellsContinue, onBack: handleUpsellsBack })), shouldRenderBookingForm && eventDetails && (jsxRuntime.jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig, selectedUpsells: selectedUpsells, upsells: upsells, persistedState: bookingPersistedState, onPersistedStateChange: setBookingPersistedState })), jsxRuntime.jsx(BookingSuccessModal, { isOpen: isSuccess && !voucherPurchaseResult, onClose: () => {
                             setIsSuccess(false);
                             setCurrentStep("eventTypes");
                             setSuccessPaymentId(null);