@funnelsgrove/payments 0.11.24 → 0.12.0

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { publicAnalyticsSdk } from '@funnelsgrove/analytics';
-import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { pollSolidgateCheckoutStatus, prepareSolidgateCheckout, } from '../services/solidgate.service.js';
 import { trackCheckoutCanceled, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
-const SolidgatePayment = lazy(async () => ({
-    default: (await import('@solidgate/react-sdk')).default,
-}));
+import { SolidgateCheckoutSummary } from './SolidgateCheckoutSummary.js';
+import { SolidgatePaymentForm } from './SolidgatePaymentForm.js';
+import { solidgateCheckoutDialogStyles } from './SolidgateCheckoutDialog.styles.js';
 const defaultContent = {
     title: 'Secure checkout',
     closeAriaLabel: 'Close checkout',
@@ -35,14 +35,6 @@ const initialView = {
     checkout: null,
     canResumeVerification: false,
 };
-const formatCountdown = (remainingSeconds) => {
-    const normalizedSeconds = Number.isFinite(remainingSeconds)
-        ? Math.max(0, Math.floor(remainingSeconds))
-        : 0;
-    const minutes = Math.floor(normalizedSeconds / 60);
-    const seconds = normalizedSeconds % 60;
-    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-};
 const trackSolidgateCheckoutEvent = async (eventName, attemptId, context) => {
     var _a;
     if (!context) {
@@ -70,114 +62,6 @@ const trackSolidgateCheckoutEvent = async (eventName, attemptId, context) => {
     }
 };
 const isAbortError = (error) => (error instanceof DOMException && error.name === 'AbortError');
-const safeDestroyPaymentForm = (instance) => {
-    var _a;
-    try {
-        instance === null || instance === void 0 ? void 0 : instance.unsubscribeAll();
-    }
-    catch (_b) {
-        // The global destroy below is the final cleanup boundary.
-    }
-    try {
-        (_a = window.PaymentFormSdk) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
-    catch (_c) {
-        // Cleanup must stay safe when the remote SDK is partially initialized.
-    }
-};
-function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, hidden, loadingLabel, onError, onMounted, onSubmit, onVerify, }) {
-    const instanceRef = useRef(null);
-    const submittedRef = useRef(false);
-    const paymentBoundaryRef = useRef(null);
-    const mountedReportedRef = useRef(false);
-    const onMountedRef = useRef(onMounted);
-    const applePayContainerRef = useRef(null);
-    const googlePayContainerRef = useRef(null);
-    useEffect(() => {
-        onMountedRef.current = onMounted;
-    }, [onMounted]);
-    useEffect(() => {
-        mountedReportedRef.current = false;
-        const boundary = paymentBoundaryRef.current;
-        if (!boundary) {
-            return;
-        }
-        const reportIframeMounted = () => {
-            if (!mountedReportedRef.current
-                && boundary.querySelector('iframe#solid-payment-form-iframe, iframe[name="solid-payment-form-iframe"]')) {
-                mountedReportedRef.current = true;
-                onMountedRef.current();
-            }
-        };
-        reportIframeMounted();
-        const observer = new MutationObserver(reportIframeMounted);
-        observer.observe(boundary, { childList: true, subtree: true });
-        return () => observer.disconnect();
-    }, [checkout.attemptId]);
-    useEffect(() => {
-        submittedRef.current = false;
-        return () => {
-            safeDestroyPaymentForm(instanceRef.current);
-            instanceRef.current = null;
-        };
-    }, [checkout.attemptId]);
-    const walletButtonType = checkout.display.billingInterval ? 'subscribe' : 'buy';
-    return (_jsxs("div", { ref: paymentBoundaryRef, className: 'solidgate-checkout-payment', "data-solidgate-attempt-id": checkout.attemptId, hidden: hidden, "aria-hidden": hidden || undefined, children: [_jsxs("div", { className: 'solidgate-checkout-wallets', children: [_jsx("div", { ref: applePayContainerRef, "data-solidgate-wallet": 'apple-pay' }), _jsx("div", { ref: googlePayContainerRef, "data-solidgate-wallet": 'google-pay' })] }), _jsx(Suspense, { fallback: (_jsx("p", { role: 'status', className: 'solidgate-checkout-status-text', children: loadingLabel })), children: _jsx(SolidgatePayment, { merchantData: checkout.initialization.merchantData, width: '100%', formParams: {
-                        autoFocus: false,
-                        isSolidLogoVisible: true,
-                        submitButtonText: cardSubmitLabel,
-                    }, styles: {
-                        form_body: {
-                            'font-family': 'Inter, Arial, sans-serif',
-                        },
-                        input_group: {
-                            input: {
-                                'border-color': '#d8d9dd',
-                                'border-radius': '10px',
-                            },
-                        },
-                        submit_button: {
-                            'background-color': buttonColor,
-                            'border-radius': '10px',
-                            'font-size': '16px',
-                            'font-weight': '800',
-                            height: '52px',
-                        },
-                    }, applePayButtonParams: {
-                        color: 'black',
-                        enabled: true,
-                        integrationType: 'js',
-                        type: walletButtonType,
-                    }, googlePayButtonParams: {
-                        color: 'black',
-                        enabled: true,
-                        type: walletButtonType,
-                    }, applePayContainerRef: applePayContainerRef, googlePayContainerRef: googlePayContainerRef, onReadyPaymentInstance: (instance) => {
-                        if (instanceRef.current && instanceRef.current !== instance) {
-                            try {
-                                instanceRef.current.unsubscribeAll();
-                            }
-                            catch (_a) {
-                                // The active instance remains usable even if stale-listener cleanup fails.
-                            }
-                        }
-                        instanceRef.current = instance;
-                    }, onMounted: () => {
-                        if (!mountedReportedRef.current) {
-                            mountedReportedRef.current = true;
-                            onMountedRef.current();
-                        }
-                    }, onSubmit: () => {
-                        submittedRef.current = true;
-                        onSubmit();
-                    }, onVerify: onVerify, onSuccess: onVerify, onFail: onVerify, onError: () => {
-                        if (submittedRef.current) {
-                            onVerify();
-                            return;
-                        }
-                        onError();
-                    } }, checkout.attemptId) })] }));
-}
 export function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }) {
     const copy = useMemo(() => (Object.assign(Object.assign({}, defaultContent), content)), [content]);
     const [view, setView] = useState(initialView);
@@ -474,9 +358,6 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
                         : view.state === 'recoverable_error'
                             ? copy.error
                             : null;
-    const showPromo = Boolean((presentation === null || presentation === void 0 ? void 0 : presentation.promoActive) &&
-        presentation.discountPercent > 0 &&
-        presentation.promoCode.trim());
     const presentationStyle = presentation
         ? {
             '--solidgate-checkout-theme-color': presentation.themeColor,
@@ -486,7 +367,7 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
                             'solidgate-checkout-dialog',
                             showPreparingLoader ? 'is-preparing' : '',
                             presentation ? 'is-branded' : '',
-                        ].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'solidgate-checkout-header', children: [_jsx("button", { ref: closeButtonRef, type: 'button', onClick: handleClose, "aria-label": copy.closeAriaLabel, className: 'solidgate-checkout-close', children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'solidgate-checkout-title', className: 'solidgate-checkout-title', children: (presentation === null || presentation === void 0 ? void 0 : presentation.title) || copy.title })] }), presentation ? (_jsxs("section", { className: 'solidgate-checkout-summary', children: [showPromo ? (_jsxs("p", { className: 'solidgate-checkout-countdown', children: [presentation.discountPercent, "% ", presentation.countdownLabel, ' ', formatCountdown(presentation.remainingSeconds), " min"] })) : null, _jsxs("p", { className: 'solidgate-checkout-satisfaction', children: [_jsx("strong", { children: presentation.satisfactionPercent }), ' ', presentation.satisfactionLabel] }), showPromo ? (_jsxs("div", { className: 'solidgate-checkout-price-stack', children: [_jsxs("div", { className: 'solidgate-checkout-price-row is-muted', children: [_jsx("span", { children: presentation.originalPriceLabel }), _jsx("span", { className: 'solidgate-checkout-strike', children: presentation.originalPriceValue })] }), _jsxs("div", { className: 'solidgate-checkout-price-row is-discount', children: [_jsx("strong", { children: presentation.discountLabel }), _jsx("strong", { children: presentation.discountAmountLabel })] }), _jsxs("div", { className: 'solidgate-checkout-promo', children: [_jsx("span", { children: presentation.promoCodeLabel }), _jsx("strong", { children: presentation.promoCode.trim() })] })] })) : null, _jsxs("div", { className: `solidgate-checkout-total${showPromo ? '' : ' is-plain'}`, children: [_jsx("span", { children: presentation.totalLabel }), _jsx("strong", { children: presentation.totalValue })] }), showPromo ? (_jsxs("p", { className: 'solidgate-checkout-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), presentation.savedLabel] })) : null] })) : null, view.state === 'collecting_email' ? (_jsxs("form", { className: 'solidgate-checkout-email-form', onSubmit: (event) => void commitCustomerEmail(event), children: [_jsxs("label", { className: 'solidgate-checkout-email-label', children: [copy.customerEmailLabel, _jsx("input", { type: 'email', autoComplete: 'email', inputMode: 'email', maxLength: 320, required: true, value: emailInput, onChange: (event) => {
+                        ].filter(Boolean).join(' '), children: [_jsxs("div", { className: 'solidgate-checkout-header', children: [_jsx("button", { ref: closeButtonRef, type: 'button', onClick: handleClose, "aria-label": copy.closeAriaLabel, className: 'solidgate-checkout-close', children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'solidgate-checkout-title', className: 'solidgate-checkout-title', children: (presentation === null || presentation === void 0 ? void 0 : presentation.title) || copy.title })] }), presentation ? _jsx(SolidgateCheckoutSummary, { presentation: presentation }) : null, view.state === 'collecting_email' ? (_jsxs("form", { className: 'solidgate-checkout-email-form', onSubmit: (event) => void commitCustomerEmail(event), children: [_jsxs("label", { className: 'solidgate-checkout-email-label', children: [copy.customerEmailLabel, _jsx("input", { type: 'email', autoComplete: 'email', inputMode: 'email', maxLength: 320, required: true, value: emailInput, onChange: (event) => {
                                                     setEmailInput(event.target.value);
                                                     setEmailError(null);
                                                 }, placeholder: copy.customerEmailPlaceholder, "aria-invalid": Boolean(emailError), className: 'solidgate-checkout-email-input' })] }), emailError ? (_jsx("p", { role: 'alert', className: 'solidgate-checkout-alert', children: emailError })) : null, _jsx("button", { type: 'submit', disabled: emailSubmitting, className: 'solidgate-checkout-action', children: copy.customerEmailContinue })] })) : null, view.checkout ? (_jsx(SolidgatePaymentForm, { buttonColor: (presentation === null || presentation === void 0 ? void 0 : presentation.buttonColor) || '#3f51b5', cardSubmitLabel: (presentation === null || presentation === void 0 ? void 0 : presentation.cardSubmitLabel) || 'Pay securely', checkout: view.checkout, hidden: !showForm, loadingLabel: copy.loading, onMounted: () => {
@@ -506,403 +387,3 @@ export function SolidgateCheckoutDialog({ open, request, customerEmail, checkout
                                     (_b = onErrorRef.current) === null || _b === void 0 ? void 0 : _b.call(onErrorRef, copyRef.current.error);
                                 } }, view.checkout.attemptId)) : null, presentation && view.checkout && showForm ? (_jsx("p", { className: 'solidgate-checkout-secure', children: presentation.secureLabel })) : null, statusMessage && view.state !== 'ready' ? (_jsx("div", { className: 'solidgate-checkout-status', children: _jsx("p", { role: 'status', "aria-live": 'polite', children: statusMessage }) })) : null, view.state === 'verifying' && view.canResumeVerification ? (_jsx("button", { type: 'button', onClick: () => void verifyCanonicalStatus(), className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.resumeVerification })) : null, (view.state === 'recoverable_error' || view.state === 'expired') && onRetry ? (_jsx("button", { type: 'button', onClick: onRetry, className: 'solidgate-checkout-action solidgate-checkout-action--spaced', children: copy.retry })) : null] })) : null] }), _jsx("style", { children: solidgateCheckoutDialogStyles })] }));
 }
-const solidgateCheckoutDialogStyles = `
-.solidgate-checkout-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  padding: 16px;
-  background: rgb(17 24 39 / 60%);
-  backdrop-filter: blur(4px);
-}
-
-.solidgate-checkout-overlay.is-branded {
-  z-index: 110;
-  align-items: stretch;
-  padding: 0;
-  background: #fff;
-  backdrop-filter: none;
-}
-
-.solidgate-checkout-dialog {
-  box-sizing: border-box;
-  width: min(100%, 512px);
-  max-height: calc(100svh - 32px);
-  overflow-y: auto;
-  border: 1px solid var(--color-border, #d1d5db);
-  border-radius: 16px;
-  background: var(--color-surface, #fff);
-  padding: 20px;
-  color: var(--color-text, #111827);
-  box-shadow: 0 24px 80px rgb(17 24 39 / 22%);
-}
-
-.solidgate-checkout-dialog.is-branded {
-  width: min(100%, 430px);
-  height: 100svh;
-  max-height: 100svh;
-  border: 0;
-  border-radius: 0;
-  background: #fff;
-  padding: 0 17px 28px;
-  color: #303136;
-  box-shadow: none;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-}
-
-.solidgate-checkout-dialog.is-preparing {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.solidgate-checkout-loader {
-  display: grid;
-  place-items: center;
-}
-
-.solidgate-checkout-spinner {
-  box-sizing: border-box;
-  width: 44px;
-  height: 44px;
-  border: 4px solid var(--color-border, #d1d5db);
-  border-top-color: var(--color-primary, #22c55e);
-  border-radius: 50%;
-  animation: solidgate-checkout-spin 720ms linear infinite;
-}
-
-.solidgate-checkout-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-@keyframes solidgate-checkout-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .solidgate-checkout-spinner {
-    animation-duration: 1.6s;
-  }
-}
-
-.solidgate-checkout-header {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.solidgate-checkout-dialog.is-branded .solidgate-checkout-header {
-  min-height: 70px;
-  margin: 0 -17px;
-  padding: 0 56px;
-}
-
-.solidgate-checkout-title {
-  margin: 0;
-  color: var(--color-text, #111827);
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-.solidgate-checkout-dialog.is-branded .solidgate-checkout-title {
-  color: #020203;
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1.15;
-  text-align: center;
-}
-
-.solidgate-checkout-close {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 36px;
-  height: 36px;
-  flex: none;
-  border: 1px solid var(--color-border, #d1d5db);
-  border-radius: 8px;
-  background: var(--color-bg, #f9fafb);
-  color: var(--color-text, #111827);
-  font-size: 22px;
-  transform: translateY(-50%);
-  cursor: pointer;
-}
-
-.solidgate-checkout-dialog.is-branded .solidgate-checkout-close {
-  left: 16px;
-  width: 40px;
-  height: 40px;
-  border: 0;
-  border-radius: 999px;
-  background: #f2f2f3;
-  color: #aaa;
-}
-
-.solidgate-checkout-close span,
-.solidgate-checkout-close span::after {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 22px;
-  height: 3px;
-  border-radius: 999px;
-  background: currentColor;
-  content: '';
-}
-
-.solidgate-checkout-close span {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.solidgate-checkout-close span::after {
-  transform: translate(-50%, -50%) rotate(90deg);
-}
-
-.solidgate-checkout-close:hover {
-  background: var(--color-accent-soft, #eef2ff);
-}
-
-.solidgate-checkout-summary {
-  color: #303136;
-}
-
-.solidgate-checkout-countdown {
-  min-height: 37px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--solidgate-checkout-theme-color) 10%, #fff);
-  color: var(--solidgate-checkout-theme-color);
-  font-size: 16px;
-  font-weight: 900;
-  text-align: center;
-}
-
-.solidgate-checkout-satisfaction {
-  margin: 17px 0 21px;
-  color: #2f3034;
-  font-size: 19px;
-  font-weight: 800;
-  line-height: 1.15;
-  text-align: center;
-}
-
-.solidgate-checkout-satisfaction strong {
-  color: var(--solidgate-checkout-theme-color);
-}
-
-.solidgate-checkout-price-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.solidgate-checkout-price-row,
-.solidgate-checkout-promo,
-.solidgate-checkout-total {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.solidgate-checkout-price-row {
-  font-size: 17px;
-}
-
-.solidgate-checkout-price-row.is-muted {
-  color: #9d9d9f;
-  font-weight: 500;
-}
-
-.solidgate-checkout-strike {
-  text-decoration: line-through 2px;
-}
-
-.solidgate-checkout-price-row.is-discount {
-  color: #040508;
-  font-weight: 900;
-}
-
-.solidgate-checkout-price-row.is-discount strong:last-child {
-  color: #ff2544;
-}
-
-.solidgate-checkout-promo {
-  min-height: 42px;
-  border-radius: 13px;
-  background: #f0f0f0;
-  padding: 0 14px;
-  color: #8d8d90;
-  font-size: 16px;
-}
-
-.solidgate-checkout-promo strong {
-  color: #050609;
-  font-weight: 900;
-}
-
-.solidgate-checkout-total {
-  min-height: 76px;
-  margin-top: 20px;
-  border-top: 1px solid #dedede;
-  font-size: 23px;
-  font-weight: 800;
-}
-
-.solidgate-checkout-total.is-plain {
-  margin-top: 0;
-}
-
-.solidgate-checkout-total strong {
-  font-size: 25px;
-  font-weight: 900;
-}
-
-.solidgate-checkout-saved {
-  width: fit-content;
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  margin: 0 auto 12px;
-  border-radius: 999px;
-  background: #fff3cf;
-  padding: 0 13px;
-  color: #2e3034;
-  font-size: 14px;
-  font-weight: 800;
-}
-
-.solidgate-checkout-email-form,
-.solidgate-checkout-email-label,
-.solidgate-checkout-wallets {
-  display: grid;
-}
-
-.solidgate-checkout-email-form {
-  gap: 16px;
-}
-
-.solidgate-checkout-email-label {
-  gap: 8px;
-  color: var(--color-text, #111827);
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.solidgate-checkout-email-input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 44px;
-  border: 1px solid var(--color-border, #d1d5db);
-  border-radius: 8px;
-  background: var(--color-bg, #fff);
-  padding: 8px 12px;
-  color: var(--color-text, #111827);
-  font: inherit;
-}
-
-.solidgate-checkout-email-input::placeholder,
-.solidgate-checkout-status,
-.solidgate-checkout-status-text {
-  color: var(--color-text-muted, #6b7280);
-}
-
-.solidgate-checkout-email-input:focus-visible,
-.solidgate-checkout-close:focus-visible,
-.solidgate-checkout-action:focus-visible {
-  outline: 2px solid var(--color-accent, #3f51b5);
-  outline-offset: 2px;
-}
-
-.solidgate-checkout-alert {
-  margin: 0;
-  color: var(--color-danger, #b91c1c);
-  font-size: 14px;
-}
-
-.solidgate-checkout-action {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 44px;
-  border: 1px solid var(--color-accent, #3f51b5);
-  border-radius: 8px;
-  background: var(--color-accent, #3f51b5);
-  padding: 8px 16px;
-  color: var(--color-primary-text, #fff);
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.solidgate-checkout-action:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.solidgate-checkout-action--spaced {
-  margin-top: 16px;
-}
-
-.solidgate-checkout-wallets {
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets {
-  margin-top: 4px;
-}
-
-.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets > div:not(:empty) {
-  min-height: 48px;
-}
-
-.solidgate-checkout-secure {
-  width: fit-content;
-  margin: 14px auto 0;
-  border-radius: 999px;
-  background: #edfff4;
-  padding: 8px 14px;
-  color: #2b2d31;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.solidgate-checkout-payment[hidden] {
-  display: none;
-}
-
-.solidgate-checkout-status {
-  margin-top: 12px;
-  border: 1px solid var(--color-border, #d1d5db);
-  border-radius: 12px;
-  background: var(--color-bg, #f9fafb);
-  padding: 16px;
-  font-size: 14px;
-}
-
-.solidgate-checkout-status p,
-.solidgate-checkout-status-text {
-  margin: 0;
-}
-`;

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.styles.d.ts

@@ -0,0 +1 @@
+export declare const solidgateCheckoutDialogStyles = "\n.solidgate-checkout-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 16px;\n  background: rgb(17 24 39 / 60%);\n  backdrop-filter: blur(4px);\n}\n\n.solidgate-checkout-overlay.is-branded {\n  z-index: 110;\n  align-items: stretch;\n  padding: 0;\n  background: #fff;\n  backdrop-filter: none;\n}\n\n.solidgate-checkout-dialog {\n  box-sizing: border-box;\n  width: min(100%, 512px);\n  max-height: calc(100svh - 32px);\n  overflow-y: auto;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 16px;\n  background: var(--color-surface, #fff);\n  padding: 20px;\n  color: var(--color-text, #111827);\n  box-shadow: 0 24px 80px rgb(17 24 39 / 22%);\n}\n\n.solidgate-checkout-dialog.is-branded {\n  width: min(100%, 430px);\n  height: 100svh;\n  max-height: 100svh;\n  border: 0;\n  border-radius: 0;\n  background: #fff;\n  padding: 0 17px 28px;\n  color: #303136;\n  box-shadow: none;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.solidgate-checkout-dialog.is-preparing {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.solidgate-checkout-loader {\n  display: grid;\n  place-items: center;\n}\n\n.solidgate-checkout-spinner {\n  box-sizing: border-box;\n  width: 44px;\n  height: 44px;\n  border: 4px solid var(--color-border, #d1d5db);\n  border-top-color: var(--color-primary, #22c55e);\n  border-radius: 50%;\n  animation: solidgate-checkout-spin 720ms linear infinite;\n}\n\n.solidgate-checkout-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n@keyframes solidgate-checkout-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .solidgate-checkout-spinner {\n    animation-duration: 1.6s;\n  }\n}\n\n.solidgate-checkout-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-header {\n  min-height: 70px;\n  margin: 0 -17px;\n  padding: 0 56px;\n}\n\n.solidgate-checkout-title {\n  margin: 0;\n  color: var(--color-text, #111827);\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-title {\n  color: #020203;\n  font-size: 24px;\n  font-weight: 900;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-close {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 36px;\n  height: 36px;\n  flex: none;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #f9fafb);\n  color: var(--color-text, #111827);\n  font-size: 22px;\n  transform: translateY(-50%);\n  cursor: pointer;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-close {\n  left: 16px;\n  width: 40px;\n  height: 40px;\n  border: 0;\n  border-radius: 999px;\n  background: #f2f2f3;\n  color: #aaa;\n}\n\n.solidgate-checkout-close span,\n.solidgate-checkout-close span::after {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 22px;\n  height: 3px;\n  border-radius: 999px;\n  background: currentColor;\n  content: '';\n}\n\n.solidgate-checkout-close span {\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.solidgate-checkout-close span::after {\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n\n.solidgate-checkout-close:hover {\n  background: var(--color-accent-soft, #eef2ff);\n}\n\n.solidgate-checkout-summary {\n  color: #303136;\n}\n\n.solidgate-checkout-countdown {\n  min-height: 37px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--solidgate-checkout-theme-color) 10%, #fff);\n  color: var(--solidgate-checkout-theme-color);\n  font-size: 16px;\n  font-weight: 900;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction {\n  margin: 17px 0 21px;\n  color: #2f3034;\n  font-size: 19px;\n  font-weight: 800;\n  line-height: 1.15;\n  text-align: center;\n}\n\n.solidgate-checkout-satisfaction strong {\n  color: var(--solidgate-checkout-theme-color);\n}\n\n.solidgate-checkout-price-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.solidgate-checkout-price-row,\n.solidgate-checkout-promo,\n.solidgate-checkout-total {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.solidgate-checkout-price-row {\n  font-size: 17px;\n}\n\n.solidgate-checkout-price-row.is-muted {\n  color: #9d9d9f;\n  font-weight: 500;\n}\n\n.solidgate-checkout-strike {\n  text-decoration: line-through 2px;\n}\n\n.solidgate-checkout-price-row.is-discount {\n  color: #040508;\n  font-weight: 900;\n}\n\n.solidgate-checkout-price-row.is-discount strong:last-child {\n  color: #ff2544;\n}\n\n.solidgate-checkout-promo {\n  min-height: 42px;\n  border-radius: 13px;\n  background: #f0f0f0;\n  padding: 0 14px;\n  color: #8d8d90;\n  font-size: 16px;\n}\n\n.solidgate-checkout-promo strong {\n  color: #050609;\n  font-weight: 900;\n}\n\n.solidgate-checkout-total {\n  min-height: 76px;\n  margin-top: 20px;\n  border-top: 1px solid #dedede;\n  font-size: 23px;\n  font-weight: 800;\n}\n\n.solidgate-checkout-total.is-plain {\n  margin-top: 0;\n}\n\n.solidgate-checkout-total strong {\n  font-size: 25px;\n  font-weight: 900;\n}\n\n.solidgate-checkout-saved {\n  width: fit-content;\n  min-height: 36px;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  margin: 0 auto 12px;\n  border-radius: 999px;\n  background: #fff3cf;\n  padding: 0 13px;\n  color: #2e3034;\n  font-size: 14px;\n  font-weight: 800;\n}\n\n.solidgate-checkout-email-form,\n.solidgate-checkout-email-label,\n.solidgate-checkout-wallets {\n  display: grid;\n}\n\n.solidgate-checkout-email-form {\n  gap: 16px;\n}\n\n.solidgate-checkout-email-label {\n  gap: 8px;\n  color: var(--color-text, #111827);\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.solidgate-checkout-email-input {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 8px;\n  background: var(--color-bg, #fff);\n  padding: 8px 12px;\n  color: var(--color-text, #111827);\n  font: inherit;\n}\n\n.solidgate-checkout-email-input::placeholder,\n.solidgate-checkout-status,\n.solidgate-checkout-status-text {\n  color: var(--color-text-muted, #6b7280);\n}\n\n.solidgate-checkout-email-input:focus-visible,\n.solidgate-checkout-close:focus-visible,\n.solidgate-checkout-action:focus-visible {\n  outline: 2px solid var(--color-accent, #3f51b5);\n  outline-offset: 2px;\n}\n\n.solidgate-checkout-alert {\n  margin: 0;\n  color: var(--color-danger, #b91c1c);\n  font-size: 14px;\n}\n\n.solidgate-checkout-action {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--color-accent, #3f51b5);\n  border-radius: 8px;\n  background: var(--color-accent, #3f51b5);\n  padding: 8px 16px;\n  color: var(--color-primary-text, #fff);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.solidgate-checkout-action:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.solidgate-checkout-action--spaced {\n  margin-top: 16px;\n}\n\n.solidgate-checkout-wallets {\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets {\n  margin-top: 4px;\n}\n\n.solidgate-checkout-dialog.is-branded .solidgate-checkout-wallets > div:not(:empty) {\n  min-height: 48px;\n}\n\n.solidgate-checkout-secure {\n  width: fit-content;\n  margin: 14px auto 0;\n  border-radius: 999px;\n  background: #edfff4;\n  padding: 8px 14px;\n  color: #2b2d31;\n  font-size: 13px;\n  font-weight: 700;\n}\n\n.solidgate-checkout-payment[hidden] {\n  display: none;\n}\n\n.solidgate-checkout-status {\n  margin-top: 12px;\n  border: 1px solid var(--color-border, #d1d5db);\n  border-radius: 12px;\n  background: var(--color-bg, #f9fafb);\n  padding: 16px;\n  font-size: 14px;\n}\n\n.solidgate-checkout-status p,\n.solidgate-checkout-status-text {\n  margin: 0;\n}\n";