npm - @mj-biz-apps/orders-ng - Versions diffs - 5.34.0 → 5.35.0 - Mend

@mj-biz-apps/orders-ng 5.34.0 → 5.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/checkout-element/main.js CHANGED Viewed

@@ -31706,17 +31706,30 @@ function ReadCheckoutAccount(raw) {
     Outcome: a["Outcome"],
     Message: typeof a["Message"] === "string" && a["Message"] ? a["Message"] : void 0,
     CanSetPassword: a["CanSetPassword"] === true,
-    VerificationRequired: a["Outcome"] === "Created"
+    VerificationRequired: a["Outcome"] === "Created",
+    ...a["Outcome"] === "Created" ? readHostWording(a) : {}
   };
 }
+function readHostWording(a) {
+  const wording = {};
+  const note = a["VerificationNote"];
+  if (note === null || typeof note === "string")
+    wording.VerificationNote = note?.trim() ? note : null;
+  const passwordSet = a["PasswordSetMessage"];
+  if (typeof passwordSet === "string" && passwordSet.trim())
+    wording.PasswordSetMessage = passwordSet;
+  return wording;
+}
 var VERIFY_NOTE = "We are sending a link to your e-mail. Use it to verify your account before you sign in.";
+var PASSWORD_SET_MESSAGE = "Your password is set. Check your e-mail for the link to verify your account, then sign in with the e-mail you used here.";
 function VerificationNote(account) {
-  return account?.VerificationRequired ? VERIFY_NOTE : null;
+  if (!account?.VerificationRequired)
+    return null;
+  return account.VerificationNote === void 0 ? VERIFY_NOTE : account.VerificationNote;
 }
 function AccountMessage(account, passwordSet) {
-  if (passwordSet) {
-    return "Your password is set. Check your e-mail for the link to verify your account, then sign in with the e-mail you used here.";
-  }
+  if (passwordSet)
+    return account.PasswordSetMessage ?? PASSWORD_SET_MESSAGE;
   if (account.Message)
     return account.Message;
   if (account.Outcome === "Exists")
@@ -38674,7 +38687,7 @@ var MJCheckoutWidgetComponent = class _MJCheckoutWidgetComponent {
       \u0275\u0275advance(3);
       \u0275\u0275property("disabled", ctx.isProcessing);
     }
-  }, dependencies: [CommonModule, FormsModule, NgSelectOption, \u0275NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, NgControlStatus, RequiredValidator, MaxLengthValidator, MinValidator, MaxValidator, NgModel], styles: ['[_nghost-%COMP%] {\n    display: block;\n    font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);\n    color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container[_ngcontent-%COMP%] {\n    max-width: 560px;\n    margin: 0 auto;\n    background: var(--mj-bg-color, #ffffff);\n    border: 1px solid #e2e8f0;\n    border-radius: var(--mj-border-radius, 8px);\n    padding: 24px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.mj-widget-title[_ngcontent-%COMP%] {\n    margin: 0 0 6px 0;\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.9rem;\n    color: #64748b;\n    line-height: 1.4;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    margin-bottom: 18px;\n    font-size: 0.875rem;\n}\n\n.mj-error-icon[_ngcontent-%COMP%] {\n    font-size: 1rem;\n}\n\n.mj-widget-summary-card[_ngcontent-%COMP%] {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px 16px;\n    margin-bottom: 20px;\n}\n\n.mj-summary-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.mj-summary-price[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.mj-widget-form-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.mj-summary-item-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mj-product-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 1rem;\n    color: #1e293b;\n}\n\n.mj-badge-free[_ngcontent-%COMP%] {\n    background: #dcfce7;\n    color: #166534;\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.mj-price-free[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #166534;\n    font-size: 1.1rem;\n}\n\n.mj-price-amount[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    background: #ffffff;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    cursor: pointer;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.mj-qty-input[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 28px;\n    text-align: center;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.mj-section-title[_ngcontent-%COMP%] {\n    font-size: 1rem;\n    font-weight: 600;\n    margin: 0 0 12px 0;\n    color: #334155;\n}\n\n.mj-form-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    margin-bottom: 18px;\n}\n\n.mj-form-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.mj-form-group.full-width[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.mj-label[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #475569;\n}\n\n.mj-required[_ngcontent-%COMP%] {\n    color: #ef4444;\n}\n\n.mj-input[_ngcontent-%COMP%], .mj-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    font-size: 0.9rem;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    background: #ffffff;\n    color: #1e293b;\n    outline: none;\n    transition: border-color 0.15s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-textarea[_ngcontent-%COMP%] {\n    min-height: 70px;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.mj-select[_ngcontent-%COMP%] {\n    min-height: 38px;\n}\n\n.mj-checkbox-label[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    color: #334155;\n    margin-top: 4px;\n}\n\n\n\n.mj-question-other[_ngcontent-%COMP%] {\n    margin-top: 8px;\n}\n\n\n\n.mj-choice-group[_ngcontent-%COMP%] {\n    border: 0;\n    margin: 0;\n    padding: 0;\n}\n\n.mj-choice-count[_ngcontent-%COMP%] {\n    font-weight: normal;\n    color: #64748b;\n}\n\n.mj-choice-options[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled[_ngcontent-%COMP%] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.mj-input[_ngcontent-%COMP%]:focus, .mj-select[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.mj-btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-primary-color, #2563eb);\n    font-size: 0.8rem;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.mj-attendee-matrix[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    margin-bottom: 20px;\n}\n\n.mj-attendee-card[_ngcontent-%COMP%] {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 12px 14px;\n}\n\n.mj-attendee-card-title[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #475569;\n    margin-bottom: 10px;\n}\n\n\n\n.mj-widget-payment-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container[_ngcontent-%COMP%] {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px;\n    margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point[_ngcontent-%COMP%] {\n    min-height: 40px;\n}\n\n.mj-stripe-badge[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 10px;\n    font-size: 0.75rem;\n    color: #64748b;\n}\n\n.mj-stripe-lock-icon[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n}\n\n.mj-checkout-total-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-top: 1px solid #e2e8f0;\n    margin-top: 10px;\n    margin-bottom: 18px;\n}\n\n.mj-total-label[_ngcontent-%COMP%] {\n    font-weight: 700;\n    font-size: 1.05rem;\n    color: #0f172a;\n}\n\n.mj-total-amount[_ngcontent-%COMP%] {\n    font-weight: 800;\n    font-size: 1.25rem;\n    color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 12px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-size: 1rem;\n    font-weight: 600;\n    border: none;\n    border-radius: var(--mj-border-radius, 8px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:hover:not(:disabled) {\n    opacity: 0.92;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    background: transparent;\n    color: #64748b;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    text-align: center;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%]:hover:not(:disabled) {\n    color: #334155;\n    text-decoration: underline;\n}\n\n.mj-spinner[_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n    border: 2px solid #ffffff;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_mj-spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_mj-spin {\n    to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    margin: 0.75rem 0;\n    font-size: 0.875rem;\n    line-height: 1.4;\n}\n.mj-checkout-consent[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 0.2rem;\n    flex: 0 0 auto;\n}\n\n.mj-checkout-promo[_ngcontent-%COMP%] {\n    margin: 0.75rem 0;\n}\n.mj-checkout-promo__label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 0.875rem;\n    margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n}\n.mj-checkout-promo__input[_ngcontent-%COMP%] {\n    flex: 1 1 auto;\n}\n.mj-checkout-promo__error[_ngcontent-%COMP%] {\n    color: var(--mj-error-color, #b91c1c);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied[_ngcontent-%COMP%] {\n    color: var(--mj-success-color, #15803d);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n    padding: 8px 14px;\n    background: transparent;\n    color: var(--mj-primary-color, #2563eb);\n    border: 1px solid var(--mj-border-color, #cbd5e1);\n    border-radius: var(--mj-border-radius, 8px);\n    font-size: 0.875rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}'], changeDetection: 0 });
+  }, dependencies: [CommonModule, FormsModule, NgSelectOption, \u0275NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, NgControlStatus, RequiredValidator, MaxLengthValidator, MinValidator, MaxValidator, NgModel], styles: ['[_nghost-%COMP%] {\n    display: block;\n    font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);\n    color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container[_ngcontent-%COMP%] {\n    max-width: 560px;\n    margin: 0 auto;\n    background: var(--mj-bg-color, #ffffff);\n    border: 1px solid #e2e8f0;\n    border-radius: var(--mj-border-radius, 8px);\n    padding: 24px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.mj-widget-title[_ngcontent-%COMP%] {\n    margin: 0 0 6px 0;\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.9rem;\n    color: #64748b;\n    line-height: 1.4;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    margin-bottom: 18px;\n    font-size: 0.875rem;\n}\n\n.mj-error-icon[_ngcontent-%COMP%] {\n    font-size: 1rem;\n}\n\n.mj-widget-summary-card[_ngcontent-%COMP%] {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px 16px;\n    margin-bottom: 20px;\n}\n\n.mj-summary-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.mj-summary-price[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.mj-widget-form-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.mj-summary-item-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mj-product-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 1rem;\n    color: #1e293b;\n}\n\n.mj-badge-free[_ngcontent-%COMP%] {\n    background: #dcfce7;\n    color: #166534;\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.mj-price-free[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #166534;\n    font-size: 1.1rem;\n}\n\n.mj-price-amount[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    background: #ffffff;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    cursor: pointer;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.mj-qty-input[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 28px;\n    text-align: center;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.mj-section-title[_ngcontent-%COMP%] {\n    font-size: 1rem;\n    font-weight: 600;\n    margin: 0 0 12px 0;\n    color: #334155;\n}\n\n.mj-form-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    margin-bottom: 18px;\n}\n\n.mj-form-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.mj-form-group.full-width[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.mj-label[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #475569;\n}\n\n.mj-required[_ngcontent-%COMP%] {\n    color: #ef4444;\n}\n\n.mj-input[_ngcontent-%COMP%], .mj-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    font-size: 0.9rem;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    background: #ffffff;\n    color: #1e293b;\n    outline: none;\n    transition: border-color 0.15s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-textarea[_ngcontent-%COMP%] {\n    min-height: 70px;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.mj-select[_ngcontent-%COMP%] {\n    min-height: 38px;\n}\n\n.mj-checkbox-label[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 400;\n    color: #334155;\n    margin-top: 4px;\n}\n\n\n\n.mj-question-other[_ngcontent-%COMP%] {\n    margin-top: 8px;\n}\n\n\n\n.mj-choice-group[_ngcontent-%COMP%] {\n    border: 0;\n    margin: 0;\n    padding: 0;\n}\n\n.mj-choice-count[_ngcontent-%COMP%] {\n    font-weight: normal;\n    color: #64748b;\n}\n\n.mj-choice-options[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled[_ngcontent-%COMP%] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.mj-input[_ngcontent-%COMP%]:focus, .mj-select[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.mj-btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-primary-color, #2563eb);\n    font-size: 0.8rem;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.mj-attendee-matrix[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    margin-bottom: 20px;\n}\n\n.mj-attendee-card[_ngcontent-%COMP%] {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 12px 14px;\n}\n\n.mj-attendee-card-title[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #475569;\n    margin-bottom: 10px;\n}\n\n\n\n.mj-widget-payment-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container[_ngcontent-%COMP%] {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px;\n    margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point[_ngcontent-%COMP%] {\n    min-height: 40px;\n}\n\n.mj-stripe-badge[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 10px;\n    font-size: 0.75rem;\n    color: #64748b;\n}\n\n.mj-stripe-lock-icon[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n}\n\n.mj-checkout-total-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-top: 1px solid #e2e8f0;\n    margin-top: 10px;\n    margin-bottom: 18px;\n}\n\n.mj-total-label[_ngcontent-%COMP%] {\n    font-weight: 700;\n    font-size: 1.05rem;\n    color: #0f172a;\n}\n\n.mj-total-amount[_ngcontent-%COMP%] {\n    font-weight: 800;\n    font-size: 1.25rem;\n    color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 12px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-size: 1rem;\n    font-weight: 600;\n    border: none;\n    border-radius: var(--mj-border-radius, 8px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:hover:not(:disabled) {\n    opacity: 0.92;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    background: transparent;\n    color: #64748b;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    text-align: center;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%]:hover:not(:disabled) {\n    color: #334155;\n    text-decoration: underline;\n}\n\n.mj-spinner[_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n    border: 2px solid #ffffff;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_mj-spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_mj-spin {\n    to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    margin: 0.75rem 0;\n    font-size: 0.875rem;\n    font-weight: 400;\n    line-height: 1.4;\n}\n.mj-checkout-consent[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 0.2rem;\n}\n\n\n\n\n\n.mj-checkbox-label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%], \n.mj-checkout-consent[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%] {\n    width: auto;\n    height: auto;\n    padding: 0;\n    border: 0;\n    flex: 0 0 auto;\n}\n\n.mj-checkout-promo[_ngcontent-%COMP%] {\n    margin: 0.75rem 0;\n}\n.mj-checkout-promo__label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 0.875rem;\n    margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n}\n.mj-checkout-promo__input[_ngcontent-%COMP%] {\n    flex: 1 1 auto;\n}\n.mj-checkout-promo__error[_ngcontent-%COMP%] {\n    color: var(--mj-error-color, #b91c1c);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied[_ngcontent-%COMP%] {\n    color: var(--mj-success-color, #15803d);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n    padding: 8px 14px;\n    background: transparent;\n    color: var(--mj-primary-color, #2563eb);\n    border: 1px solid var(--mj-border-color, #cbd5e1);\n    border-radius: var(--mj-border-radius, 8px);\n    font-size: 0.875rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}'], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MJCheckoutWidgetComponent, [{
@@ -39116,464 +39129,7 @@ var MJCheckoutWidgetComponent = class _MJCheckoutWidgetComponent {
         </button>
     </div>
 </div>
-`, styles: [`:host {
-    display: block;
-    font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
-    color: var(--mj-text-color, #1e293b);
-}
-.mj-checkout-widget-container {
-    max-width: 560px;
-    margin: 0 auto;
-    background: var(--mj-bg-color, #ffffff);
-    border: 1px solid #e2e8f0;
-    border-radius: var(--mj-border-radius, 8px);
-    padding: 24px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
-}
-.mj-widget-header {
-    margin-bottom: 20px;
-}
-.mj-widget-title {
-    margin: 0 0 6px 0;
-    font-size: 1.35rem;
-    font-weight: 700;
-    color: var(--mj-text-color, #0f172a);
-}
-.mj-widget-description {
-    margin: 0;
-    font-size: 0.9rem;
-    color: #64748b;
-    line-height: 1.4;
-}
-.mj-widget-error-banner {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background: #fef2f2;
-    border: 1px solid #f87171;
-    color: #991b1b;
-    padding: 10px 14px;
-    border-radius: 6px;
-    margin-bottom: 18px;
-    font-size: 0.875rem;
-}
-.mj-error-icon {
-    font-size: 1rem;
-}
-.mj-widget-summary-card {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 6px;
-    padding: 14px 16px;
-    margin-bottom: 20px;
-}
-.mj-summary-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.mj-summary-price {
-    display: flex;
-    align-items: center;
-}
-.mj-widget-form-section {
-    margin-bottom: 20px;
-}
-.mj-summary-item-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.mj-product-name {
-    font-weight: 600;
-    font-size: 1rem;
-    color: #1e293b;
-}
-.mj-badge-free {
-    background: #dcfce7;
-    color: #166534;
-    font-size: 0.75rem;
-    font-weight: 700;
-    padding: 2px 6px;
-    border-radius: 4px;
-}
-.mj-price-free {
-    font-weight: 700;
-    color: #166534;
-    font-size: 1.1rem;
-}
-.mj-price-amount {
-    font-weight: 700;
-    color: #0f172a;
-    font-size: 1.1rem;
-}
-.mj-quantity-selector-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px dashed #cbd5e1;
-}
-.mj-qty-controls {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-.mj-qty-btn {
-    width: 28px;
-    height: 28px;
-    background: #ffffff;
-    border: 1px solid #cbd5e1;
-    border-radius: 4px;
-    cursor: pointer;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.mj-qty-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-}
-.mj-qty-input {
-    width: 44px;
-    height: 28px;
-    text-align: center;
-    border: 1px solid #cbd5e1;
-    border-radius: 4px;
-    font-weight: 600;
-}
-.mj-section-title {
-    font-size: 1rem;
-    font-weight: 600;
-    margin: 0 0 12px 0;
-    color: #334155;
-}
-.mj-form-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
-    margin-bottom: 18px;
-}
-.mj-form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-.mj-form-group.full-width {
-    grid-column: 1 / -1;
-}
-.mj-label {
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: #475569;
-}
-.mj-required {
-    color: #ef4444;
-}
-.mj-input, .mj-select {
-    padding: 8px 12px;
-    font-size: 0.9rem;
-    border: 1px solid #cbd5e1;
-    border-radius: 4px;
-    background: #ffffff;
-    color: #1e293b;
-    outline: none;
-    transition: border-color 0.15s ease;
-    width: 100%;
-    box-sizing: border-box;
-}
-.mj-textarea {
-    min-height: 70px;
-    resize: vertical;
-    font-family: inherit;
-}
-.mj-select {
-    min-height: 38px;
-}
-.mj-checkbox-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    color: #334155;
-    margin-top: 4px;
-}
-/* The free-text answer that appears under a question's "Other" choice. */
-.mj-question-other {
-    margin-top: 8px;
-}
-/* A choice group: its options stacked, with how many to pick beside the heading. */
-.mj-choice-group {
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-.mj-choice-count {
-    font-weight: normal;
-    color: #64748b;
-}
-.mj-choice-options {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-.mj-checkbox-label.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-}
-.mj-input:focus, .mj-select:focus {
-    border-color: var(--mj-primary-color, #2563eb);
-    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
-}
-.mj-multi-attendee-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-}
-.mj-btn-link {
-    background: none;
-    border: none;
-    color: var(--mj-primary-color, #2563eb);
-    font-size: 0.8rem;
-    cursor: pointer;
-    text-decoration: underline;
-    padding: 0;
-}
-.mj-attendee-matrix {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    margin-bottom: 20px;
-}
-.mj-attendee-card {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 6px;
-    padding: 12px 14px;
-}
-.mj-attendee-card-title {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #475569;
-    margin-bottom: 10px;
-}
-/* Stripe Payment Container */
-.mj-widget-payment-section {
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid #e2e8f0;
-}
-.mj-stripe-container {
-    background: #ffffff;
-    border: 1px solid #e2e8f0;
-    border-radius: 6px;
-    padding: 14px;
-    margin-bottom: 16px;
-}
-.mj-stripe-mount-point {
-    min-height: 40px;
-}
-.mj-stripe-badge {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-top: 10px;
-    font-size: 0.75rem;
-    color: #64748b;
-}
-.mj-stripe-lock-icon {
-    font-size: 0.85rem;
-}
-.mj-checkout-total-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 0;
-    border-top: 1px solid #e2e8f0;
-    margin-top: 10px;
-    margin-bottom: 18px;
-}
-.mj-total-label {
-    font-weight: 700;
-    font-size: 1.05rem;
-    color: #0f172a;
-}
-.mj-total-amount {
-    font-weight: 800;
-    font-size: 1.25rem;
-    color: var(--mj-primary-color, #2563eb);
-}
-.mj-widget-actions {
-    margin-top: 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-.mj-btn-submit {
-    width: 100%;
-    padding: 12px;
-    background: var(--mj-primary-color, #2563eb);
-    color: #ffffff;
-    font-size: 1rem;
-    font-weight: 600;
-    border: none;
-    border-radius: var(--mj-border-radius, 8px);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    transition: opacity 0.15s ease;
-}
-.mj-btn-submit:hover:not(:disabled) {
-    opacity: 0.92;
-}
-.mj-btn-submit:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.mj-btn-cancel {
-    width: 100%;
-    padding: 8px 12px;
-    background: transparent;
-    color: #64748b;
-    font-size: 0.875rem;
-    font-weight: 500;
-    border: none;
-    cursor: pointer;
-    text-align: center;
-}
-.mj-btn-cancel:hover:not(:disabled) {
-    color: #334155;
-    text-decoration: underline;
-}
-.mj-spinner {
-    width: 16px;
-    height: 16px;
-    border: 2px solid #ffffff;
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: mj-spin 0.8s linear infinite;
-}
-@keyframes mj-spin {
-    to { transform: rotate(360deg); }
-}
-.mj-checkout-consent {
-    display: flex;
-    gap: 0.5rem;
-    align-items: flex-start;
-    margin: 0.75rem 0;
-    font-size: 0.875rem;
-    line-height: 1.4;
-}
-.mj-checkout-consent input {
-    margin-top: 0.2rem;
-    flex: 0 0 auto;
-}
-.mj-checkout-promo {
-    margin: 0.75rem 0;
-}
-.mj-checkout-promo__label {
-    display: block;
-    font-size: 0.875rem;
-    margin-bottom: 0.25rem;
-}
-.mj-checkout-promo__row {
-    display: flex;
-    gap: 0.5rem;
-}
-.mj-checkout-promo__input {
-    flex: 1 1 auto;
-}
-.mj-checkout-promo__error {
-    color: var(--mj-error-color, #b91c1c);
-    font-size: 0.875rem;
-    margin: 0.35rem 0 0;
-}
-.mj-checkout-promo__applied {
-    color: var(--mj-success-color, #15803d);
-    font-size: 0.875rem;
-    margin: 0.35rem 0 0;
-}
-.mj-checkout-promo__apply {
-    flex: 0 0 auto;
-    padding: 8px 14px;
-    background: transparent;
-    color: var(--mj-primary-color, #2563eb);
-    border: 1px solid var(--mj-border-color, #cbd5e1);
-    border-radius: var(--mj-border-radius, 8px);
-    font-size: 0.875rem;
-    font-weight: 600;
-    cursor: pointer;
-}
-.mj-checkout-promo__apply:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-`] }]
+`, styles: [':host {\n    display: block;\n    font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);\n    color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container {\n    max-width: 560px;\n    margin: 0 auto;\n    background: var(--mj-bg-color, #ffffff);\n    border: 1px solid #e2e8f0;\n    border-radius: var(--mj-border-radius, 8px);\n    padding: 24px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header {\n    margin-bottom: 20px;\n}\n\n.mj-widget-title {\n    margin: 0 0 6px 0;\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description {\n    margin: 0;\n    font-size: 0.9rem;\n    color: #64748b;\n    line-height: 1.4;\n}\n\n.mj-widget-error-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    margin-bottom: 18px;\n    font-size: 0.875rem;\n}\n\n.mj-error-icon {\n    font-size: 1rem;\n}\n\n.mj-widget-summary-card {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px 16px;\n    margin-bottom: 20px;\n}\n\n.mj-summary-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.mj-summary-price {\n    display: flex;\n    align-items: center;\n}\n\n.mj-widget-form-section {\n    margin-bottom: 20px;\n}\n\n.mj-summary-item-info {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mj-product-name {\n    font-weight: 600;\n    font-size: 1rem;\n    color: #1e293b;\n}\n\n.mj-badge-free {\n    background: #dcfce7;\n    color: #166534;\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.mj-price-free {\n    font-weight: 700;\n    color: #166534;\n    font-size: 1.1rem;\n}\n\n.mj-price-amount {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.mj-qty-btn {\n    width: 28px;\n    height: 28px;\n    background: #ffffff;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    cursor: pointer;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-qty-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.mj-qty-input {\n    width: 44px;\n    height: 28px;\n    text-align: center;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.mj-section-title {\n    font-size: 1rem;\n    font-weight: 600;\n    margin: 0 0 12px 0;\n    color: #334155;\n}\n\n.mj-form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    margin-bottom: 18px;\n}\n\n.mj-form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.mj-form-group.full-width {\n    grid-column: 1 / -1;\n}\n\n.mj-label {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #475569;\n}\n\n.mj-required {\n    color: #ef4444;\n}\n\n.mj-input, .mj-select {\n    padding: 8px 12px;\n    font-size: 0.9rem;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    background: #ffffff;\n    color: #1e293b;\n    outline: none;\n    transition: border-color 0.15s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-textarea {\n    min-height: 70px;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.mj-select {\n    min-height: 38px;\n}\n\n.mj-checkbox-label {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 400;\n    color: #334155;\n    margin-top: 4px;\n}\n\n/* The free-text answer that appears under a question\'s "Other" choice. */\n.mj-question-other {\n    margin-top: 8px;\n}\n\n/* A choice group: its options stacked, with how many to pick beside the heading. */\n.mj-choice-group {\n    border: 0;\n    margin: 0;\n    padding: 0;\n}\n\n.mj-choice-count {\n    font-weight: normal;\n    color: #64748b;\n}\n\n.mj-choice-options {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.mj-input:focus, .mj-select:focus {\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.mj-btn-link {\n    background: none;\n    border: none;\n    color: var(--mj-primary-color, #2563eb);\n    font-size: 0.8rem;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.mj-attendee-matrix {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    margin-bottom: 20px;\n}\n\n.mj-attendee-card {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 12px 14px;\n}\n\n.mj-attendee-card-title {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #475569;\n    margin-bottom: 10px;\n}\n\n/* Stripe Payment Container */\n.mj-widget-payment-section {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px;\n    margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point {\n    min-height: 40px;\n}\n\n.mj-stripe-badge {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 10px;\n    font-size: 0.75rem;\n    color: #64748b;\n}\n\n.mj-stripe-lock-icon {\n    font-size: 0.85rem;\n}\n\n.mj-checkout-total-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-top: 1px solid #e2e8f0;\n    margin-top: 10px;\n    margin-bottom: 18px;\n}\n\n.mj-total-label {\n    font-weight: 700;\n    font-size: 1.05rem;\n    color: #0f172a;\n}\n\n.mj-total-amount {\n    font-weight: 800;\n    font-size: 1.25rem;\n    color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions {\n    margin-top: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-btn-submit {\n    width: 100%;\n    padding: 12px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-size: 1rem;\n    font-weight: 600;\n    border: none;\n    border-radius: var(--mj-border-radius, 8px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit:hover:not(:disabled) {\n    opacity: 0.92;\n}\n\n.mj-btn-submit:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.mj-btn-cancel {\n    width: 100%;\n    padding: 8px 12px;\n    background: transparent;\n    color: #64748b;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    text-align: center;\n}\n\n.mj-btn-cancel:hover:not(:disabled) {\n    color: #334155;\n    text-decoration: underline;\n}\n\n.mj-spinner {\n    width: 16px;\n    height: 16px;\n    border: 2px solid #ffffff;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: mj-spin 0.8s linear infinite;\n}\n\n@keyframes mj-spin {\n    to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent {\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    margin: 0.75rem 0;\n    font-size: 0.875rem;\n    font-weight: 400;\n    line-height: 1.4;\n}\n.mj-checkout-consent input {\n    margin-top: 0.2rem;\n}\n\n/* Checkboxes keep their native size even when the host page styles every input\n   (e.g. `input { width: 100% }`): this rule is scoped to the widget, so it outranks\n   a plain element or class selector on the host page. */\n.mj-checkbox-label input[type=checkbox],\n.mj-checkout-consent input[type=checkbox] {\n    width: auto;\n    height: auto;\n    padding: 0;\n    border: 0;\n    flex: 0 0 auto;\n}\n\n.mj-checkout-promo {\n    margin: 0.75rem 0;\n}\n.mj-checkout-promo__label {\n    display: block;\n    font-size: 0.875rem;\n    margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row {\n    display: flex;\n    gap: 0.5rem;\n}\n.mj-checkout-promo__input {\n    flex: 1 1 auto;\n}\n.mj-checkout-promo__error {\n    color: var(--mj-error-color, #b91c1c);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied {\n    color: var(--mj-success-color, #15803d);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply {\n    flex: 0 0 auto;\n    padding: 8px 14px;\n    background: transparent;\n    color: var(--mj-primary-color, #2563eb);\n    border: 1px solid var(--mj-border-color, #cbd5e1);\n    border-radius: var(--mj-border-radius, 8px);\n    font-size: 0.875rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n.mj-checkout-promo__apply:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n'] }]
   }], () => [{ type: ElementRef }, { type: Renderer2 }], { config: [{
     type: Input
   }], distributionSlug: [{

package/dist/lib/checkout-widget/checkout-account.d.ts CHANGED Viewed

@@ -12,18 +12,18 @@ export interface CheckoutAccountView {
     Outcome: CheckoutAccountOutcome;
     Message?: string;
     CanSetPassword: boolean;
-    /**
-     * The buyer must verify the e-mail before the account signs in. True for every `Created`
-     * account: the `CheckoutAccountStep` contract keeps a created account unable to sign in until
-     * the host has verified the e-mail (#395).
-     */
+    /** True for every `Created` account, which gets the verification note. */
     VerificationRequired?: boolean;
+    /** The host's verification note: absent for the default, `null` for none. */
+    VerificationNote?: string | null;
+    /** The host's wording once the password is set; absent for the default. */
+    PasswordSetMessage?: string;
 }
 /** Shown when the account step could not be reached or did not answer. */
 export declare const ACCOUNT_STEP_FAILED: CheckoutAccountView;
 /** The account the server reported, or null when the response carries none (no step registered). */
 export declare function ReadCheckoutAccount(raw: unknown): CheckoutAccountView | null;
-/** The note shown with the password form of a created account. */
+/** The note shown with the password form of a created account: the host's, or the default. */
 export declare function VerificationNote(account: CheckoutAccountView | null): string | null;
 /** The line shown under the confirmation when no password form is showing. */
 export declare function AccountMessage(account: CheckoutAccountView, passwordSet: boolean): string | null;

package/dist/lib/checkout-widget/checkout-account.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkout-account.d.ts","sourceRoot":"","sources":["../../../src/lib/checkout-widget/checkout-account.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,mBAAmB;IAChC,OAAO,EAAE,sBAAsB,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB~~;;;;OAIG~~;~~IACH~~,oBAAoB,CAAC,EAAE,OAAO,CAAC;~~CAClC~~;AAED,0EAA0E;AAC1E,eAAO,MAAM,mBAAmB,EAAE,mBAAkE,CAAC;AAErG,oGAAoG;AACpG,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,OAAO,GAAG,mBAAmB,GAAG,IAAI,~~CAU5E~~;~~AAID~~,~~kEAAkE~~;~~AAClE~~,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,~~CAEnF~~;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,~~CAQhG~~;AAED,iHAAiH;AACjH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAIxF;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,EAAE,SAAS,UAAQ,GAAG,OAAO,CAG3F;AAED,oGAAoG;AACpG,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,GAAG,OAAO,CAE7E"}
1	+ {"version":3,"file":"checkout-account.d.ts","sourceRoot":"","sources":["../../../src/lib/checkout-widget/checkout-account.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,mBAAmB;IAChC,OAAO,EAAE,sBAAsB,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,0EAA0E;AAC1E,eAAO,MAAM,mBAAmB,EAAE,mBAAkE,CAAC;AAErG,oGAAoG;AACpG,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,OAAO,GAAG,mBAAmB,GAAG,IAAI,CAW5E;AAeD,8FAA8F;AAC9F,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAGnF;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAMhG;AAED,iHAAiH;AACjH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAIxF;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,EAAE,SAAS,UAAQ,GAAG,OAAO,CAG3F;AAED,oGAAoG;AACpG,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,GAAG,OAAO,CAE7E"}

package/dist/lib/checkout-widget/checkout-account.js CHANGED Viewed

@@ -21,18 +21,31 @@ export function ReadCheckoutAccount(raw) {
         Message: typeof a['Message'] === 'string' && a['Message'] ? a['Message'] : undefined,
         CanSetPassword: a['CanSetPassword'] === true,
         VerificationRequired: a['Outcome'] === 'Created',
+        ...(a['Outcome'] === 'Created' ? readHostWording(a) : {}),
     };
 }
+function readHostWording(a) {
+    const wording = {};
+    const note = a['VerificationNote'];
+    if (note === null || typeof note === 'string')
+        wording.VerificationNote = note?.trim() ? note : null;
+    const passwordSet = a['PasswordSetMessage'];
+    if (typeof passwordSet === 'string' && passwordSet.trim())
+        wording.PasswordSetMessage = passwordSet;
+    return wording;
+}
 const VERIFY_NOTE = 'We are sending a link to your e-mail. Use it to verify your account before you sign in.';
-/** The note shown with the password form of a created account. */
+const PASSWORD_SET_MESSAGE = 'Your password is set. Check your e-mail for the link to verify your account, then sign in with the e-mail you used here.';
+/** The note shown with the password form of a created account: the host's, or the default. */
 export function VerificationNote(account) {
-    return account?.VerificationRequired ? VERIFY_NOTE : null;
+    if (!account?.VerificationRequired)
+        return null;
+    return account.VerificationNote === undefined ? VERIFY_NOTE : account.VerificationNote;
 }
 /** The line shown under the confirmation when no password form is showing. */
 export function AccountMessage(account, passwordSet) {
-    if (passwordSet) {
-        return 'Your password is set. Check your e-mail for the link to verify your account, then sign in with the e-mail you used here.';
-    }
+    if (passwordSet)
+        return account.PasswordSetMessage ?? PASSWORD_SET_MESSAGE;
     if (account.Message)
         return account.Message;
     if (account.Outcome === 'Exists')

package/dist/lib/checkout-widget/checkout-account.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkout-account.js","sourceRoot":"","sources":["../../../src/lib/checkout-widget/checkout-account.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAgBH,0EAA0E;AAC1E,MAAM,CAAC,MAAM,mBAAmB,GAAwB,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC;AAErG,oGAAoG;AACpG,MAAM,UAAU,mBAAmB,CAAC,GAAY;IAC5C,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IACjD,MAAM,CAAC,GAAG,GAA8B,CAAC;IACzC,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,SAAS,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IACtG,OAAO;QACH,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;QACpF,cAAc,EAAE,CAAC,CAAC,gBAAgB,CAAC,KAAK,IAAI;QAC5C,oBAAoB,EAAE,CAAC,CAAC,SAAS,CAAC,KAAK,SAAS;~~KACnD~~,CAAC;AACN,CAAC;AAED,MAAM,WAAW,GAAG,yFAAyF,CAAC;~~AAE9G~~,~~kEAAkE~~;~~AAClE~~,MAAM,UAAU,gBAAgB,CAAC,OAAmC;IAChE,~~OAAO~~,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,~~IAAI~~,CAAC;~~AAC9D~~,CAAC;AAED,8EAA8E;AAC9E,MAAM,UAAU,cAAc,CAAC,OAA4B,EAAE,WAAoB;IAC7E,IAAI,WAAW~~,EAAE,CAAC~~;~~QACd~~,OAAO,~~0HAA0H~~,CAAC~~;IACtI~~,CAAC;~~IACD~~,IAAI,OAAO,CAAC,OAAO;QAAE,OAAO,OAAO,CAAC,OAAO,CAAC;IAC5C,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,yGAAyG,CAAC;IACnJ,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,mGAAmG,CAAC;IAC7I,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,iHAAiH;AACjH,MAAM,UAAU,kBAAkB,CAAC,QAAgB,EAAE,YAAoB;IACrE,IAAI,CAAC,QAAQ;QAAE,OAAO,0BAA0B,CAAC;IACjD,IAAI,QAAQ,KAAK,YAAY;QAAE,OAAO,iCAAiC,CAAC;IACxE,OAAO,IAAI,CAAC;AAChB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,OAAmC,EAAE,SAAS,GAAG,KAAK;IAC9E,IAAI,SAAS,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IACvC,OAAO,CAAC,OAAO,CAAC,cAAc,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ,CAAC;AACnE,CAAC;AAED,oGAAoG;AACpG,MAAM,UAAU,gBAAgB,CAAC,OAAmC;IAChE,OAAO,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AACjF,CAAC"}
1	+ {"version":3,"file":"checkout-account.js","sourceRoot":"","sources":["../../../src/lib/checkout-widget/checkout-account.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAgBH,0EAA0E;AAC1E,MAAM,CAAC,MAAM,mBAAmB,GAAwB,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC;AAErG,oGAAoG;AACpG,MAAM,UAAU,mBAAmB,CAAC,GAAY;IAC5C,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IACjD,MAAM,CAAC,GAAG,GAA8B,CAAC;IACzC,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,SAAS,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IACtG,OAAO;QACH,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC;QACrB,OAAO,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;QACpF,cAAc,EAAE,CAAC,CAAC,gBAAgB,CAAC,KAAK,IAAI;QAC5C,oBAAoB,EAAE,CAAC,CAAC,SAAS,CAAC,KAAK,SAAS;QAChD,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;KAC5D,CAAC;AACN,CAAC;AAED,SAAS,eAAe,CAAC,CAA0B;IAC/C,MAAM,OAAO,GAAyE,EAAE,CAAC;IACzF,MAAM,IAAI,GAAG,CAAC,CAAC,kBAAkB,CAAC,CAAC;IACnC,IAAI,IAAI,KAAK,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ;QAAE,OAAO,CAAC,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACrG,MAAM,WAAW,GAAG,CAAC,CAAC,oBAAoB,CAAC,CAAC;IAC5C,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,WAAW,CAAC,IAAI,EAAE;QAAE,OAAO,CAAC,kBAAkB,GAAG,WAAW,CAAC;IACpG,OAAO,OAAO,CAAC;AACnB,CAAC;AAED,MAAM,WAAW,GAAG,yFAAyF,CAAC;AAC9G,MAAM,oBAAoB,GACtB,0HAA0H,CAAC;AAE/H,8FAA8F;AAC9F,MAAM,UAAU,gBAAgB,CAAC,OAAmC;IAChE,IAAI,CAAC,OAAO,EAAE,oBAAoB;QAAE,OAAO,IAAI,CAAC;IAChD,OAAO,OAAO,CAAC,gBAAgB,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC;AAC3F,CAAC;AAED,8EAA8E;AAC9E,MAAM,UAAU,cAAc,CAAC,OAA4B,EAAE,WAAoB;IAC7E,IAAI,WAAW;QAAE,OAAO,OAAO,CAAC,kBAAkB,IAAI,oBAAoB,CAAC;IAC3E,IAAI,OAAO,CAAC,OAAO;QAAE,OAAO,OAAO,CAAC,OAAO,CAAC;IAC5C,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,yGAAyG,CAAC;IACnJ,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,mGAAmG,CAAC;IAC7I,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,iHAAiH;AACjH,MAAM,UAAU,kBAAkB,CAAC,QAAgB,EAAE,YAAoB;IACrE,IAAI,CAAC,QAAQ;QAAE,OAAO,0BAA0B,CAAC;IACjD,IAAI,QAAQ,KAAK,YAAY;QAAE,OAAO,iCAAiC,CAAC;IACxE,OAAO,IAAI,CAAC;AAChB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,OAAmC,EAAE,SAAS,GAAG,KAAK;IAC9E,IAAI,SAAS,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IACvC,OAAO,CAAC,OAAO,CAAC,cAAc,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ,CAAC;AACnE,CAAC;AAED,oGAAoG;AACpG,MAAM,UAAU,gBAAgB,CAAC,OAAmC;IAChE,OAAO,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AACjF,CAAC"}

package/dist/lib/checkout-widget/checkout-widget.component.js CHANGED Viewed

@@ -1353,11 +1353,11 @@ export class MJCheckoutWidgetComponent {
             i0.ɵɵconditional(ctx.isProcessing ? 45 : ctx.isFree() ? 46 : 47);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("disabled", ctx.isProcessing);
-        } }, dependencies: [CommonModule, FormsModule, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.RequiredValidator, i1.MaxLengthValidator, i1.MinValidator, i1.MaxValidator, i1.NgModel], styles: ["[_nghost-%COMP%] {\n    display: block;\n    font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n    color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container[_ngcontent-%COMP%] {\n    max-width: 560px;\n    margin: 0 auto;\n    background: var(--mj-bg-color, #ffffff);\n    border: 1px solid #e2e8f0;\n    border-radius: var(--mj-border-radius, 8px);\n    padding: 24px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.mj-widget-title[_ngcontent-%COMP%] {\n    margin: 0 0 6px 0;\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.9rem;\n    color: #64748b;\n    line-height: 1.4;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    margin-bottom: 18px;\n    font-size: 0.875rem;\n}\n\n.mj-error-icon[_ngcontent-%COMP%] {\n    font-size: 1rem;\n}\n\n.mj-widget-summary-card[_ngcontent-%COMP%] {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px 16px;\n    margin-bottom: 20px;\n}\n\n.mj-summary-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.mj-summary-price[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.mj-widget-form-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.mj-summary-item-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mj-product-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 1rem;\n    color: #1e293b;\n}\n\n.mj-badge-free[_ngcontent-%COMP%] {\n    background: #dcfce7;\n    color: #166534;\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.mj-price-free[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #166534;\n    font-size: 1.1rem;\n}\n\n.mj-price-amount[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    background: #ffffff;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    cursor: pointer;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.mj-qty-input[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 28px;\n    text-align: center;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.mj-section-title[_ngcontent-%COMP%] {\n    font-size: 1rem;\n    font-weight: 600;\n    margin: 0 0 12px 0;\n    color: #334155;\n}\n\n.mj-form-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    margin-bottom: 18px;\n}\n\n.mj-form-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.mj-form-group.full-width[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.mj-label[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #475569;\n}\n\n.mj-required[_ngcontent-%COMP%] {\n    color: #ef4444;\n}\n\n.mj-input[_ngcontent-%COMP%], .mj-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    font-size: 0.9rem;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    background: #ffffff;\n    color: #1e293b;\n    outline: none;\n    transition: border-color 0.15s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-textarea[_ngcontent-%COMP%] {\n    min-height: 70px;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.mj-select[_ngcontent-%COMP%] {\n    min-height: 38px;\n}\n\n.mj-checkbox-label[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    color: #334155;\n    margin-top: 4px;\n}\n\n\n\n.mj-question-other[_ngcontent-%COMP%] {\n    margin-top: 8px;\n}\n\n\n\n.mj-choice-group[_ngcontent-%COMP%] {\n    border: 0;\n    margin: 0;\n    padding: 0;\n}\n\n.mj-choice-count[_ngcontent-%COMP%] {\n    font-weight: normal;\n    color: #64748b;\n}\n\n.mj-choice-options[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled[_ngcontent-%COMP%] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.mj-input[_ngcontent-%COMP%]:focus, .mj-select[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.mj-btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-primary-color, #2563eb);\n    font-size: 0.8rem;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.mj-attendee-matrix[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    margin-bottom: 20px;\n}\n\n.mj-attendee-card[_ngcontent-%COMP%] {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 12px 14px;\n}\n\n.mj-attendee-card-title[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #475569;\n    margin-bottom: 10px;\n}\n\n\n\n.mj-widget-payment-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container[_ngcontent-%COMP%] {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px;\n    margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point[_ngcontent-%COMP%] {\n    min-height: 40px;\n}\n\n.mj-stripe-badge[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 10px;\n    font-size: 0.75rem;\n    color: #64748b;\n}\n\n.mj-stripe-lock-icon[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n}\n\n.mj-checkout-total-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-top: 1px solid #e2e8f0;\n    margin-top: 10px;\n    margin-bottom: 18px;\n}\n\n.mj-total-label[_ngcontent-%COMP%] {\n    font-weight: 700;\n    font-size: 1.05rem;\n    color: #0f172a;\n}\n\n.mj-total-amount[_ngcontent-%COMP%] {\n    font-weight: 800;\n    font-size: 1.25rem;\n    color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 12px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-size: 1rem;\n    font-weight: 600;\n    border: none;\n    border-radius: var(--mj-border-radius, 8px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:hover:not(:disabled) {\n    opacity: 0.92;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    background: transparent;\n    color: #64748b;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    text-align: center;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%]:hover:not(:disabled) {\n    color: #334155;\n    text-decoration: underline;\n}\n\n.mj-spinner[_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n    border: 2px solid #ffffff;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_mj-spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_mj-spin {\n    to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    margin: 0.75rem 0;\n    font-size: 0.875rem;\n    line-height: 1.4;\n}\n.mj-checkout-consent[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 0.2rem;\n    flex: 0 0 auto;\n}\n\n.mj-checkout-promo[_ngcontent-%COMP%] {\n    margin: 0.75rem 0;\n}\n.mj-checkout-promo__label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 0.875rem;\n    margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n}\n.mj-checkout-promo__input[_ngcontent-%COMP%] {\n    flex: 1 1 auto;\n}\n.mj-checkout-promo__error[_ngcontent-%COMP%] {\n    color: var(--mj-error-color, #b91c1c);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied[_ngcontent-%COMP%] {\n    color: var(--mj-success-color, #15803d);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n    padding: 8px 14px;\n    background: transparent;\n    color: var(--mj-primary-color, #2563eb);\n    border: 1px solid var(--mj-border-color, #cbd5e1);\n    border-radius: var(--mj-border-radius, 8px);\n    font-size: 0.875rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}"], changeDetection: 0 });
+        } }, dependencies: [CommonModule, FormsModule, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.RequiredValidator, i1.MaxLengthValidator, i1.MinValidator, i1.MaxValidator, i1.NgModel], styles: ["[_nghost-%COMP%] {\n    display: block;\n    font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n    color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container[_ngcontent-%COMP%] {\n    max-width: 560px;\n    margin: 0 auto;\n    background: var(--mj-bg-color, #ffffff);\n    border: 1px solid #e2e8f0;\n    border-radius: var(--mj-border-radius, 8px);\n    padding: 24px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.mj-widget-title[_ngcontent-%COMP%] {\n    margin: 0 0 6px 0;\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.9rem;\n    color: #64748b;\n    line-height: 1.4;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    margin-bottom: 18px;\n    font-size: 0.875rem;\n}\n\n.mj-error-icon[_ngcontent-%COMP%] {\n    font-size: 1rem;\n}\n\n.mj-widget-summary-card[_ngcontent-%COMP%] {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px 16px;\n    margin-bottom: 20px;\n}\n\n.mj-summary-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.mj-summary-price[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.mj-widget-form-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.mj-summary-item-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mj-product-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 1rem;\n    color: #1e293b;\n}\n\n.mj-badge-free[_ngcontent-%COMP%] {\n    background: #dcfce7;\n    color: #166534;\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.mj-price-free[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #166534;\n    font-size: 1.1rem;\n}\n\n.mj-price-amount[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    background: #ffffff;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    cursor: pointer;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-qty-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.mj-qty-input[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 28px;\n    text-align: center;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.mj-section-title[_ngcontent-%COMP%] {\n    font-size: 1rem;\n    font-weight: 600;\n    margin: 0 0 12px 0;\n    color: #334155;\n}\n\n.mj-form-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    margin-bottom: 18px;\n}\n\n.mj-form-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.mj-form-group.full-width[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.mj-label[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #475569;\n}\n\n.mj-required[_ngcontent-%COMP%] {\n    color: #ef4444;\n}\n\n.mj-input[_ngcontent-%COMP%], .mj-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    font-size: 0.9rem;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    background: #ffffff;\n    color: #1e293b;\n    outline: none;\n    transition: border-color 0.15s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-textarea[_ngcontent-%COMP%] {\n    min-height: 70px;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.mj-select[_ngcontent-%COMP%] {\n    min-height: 38px;\n}\n\n.mj-checkbox-label[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 400;\n    color: #334155;\n    margin-top: 4px;\n}\n\n\n\n.mj-question-other[_ngcontent-%COMP%] {\n    margin-top: 8px;\n}\n\n\n\n.mj-choice-group[_ngcontent-%COMP%] {\n    border: 0;\n    margin: 0;\n    padding: 0;\n}\n\n.mj-choice-count[_ngcontent-%COMP%] {\n    font-weight: normal;\n    color: #64748b;\n}\n\n.mj-choice-options[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled[_ngcontent-%COMP%] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.mj-input[_ngcontent-%COMP%]:focus, .mj-select[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.mj-btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-primary-color, #2563eb);\n    font-size: 0.8rem;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.mj-attendee-matrix[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    margin-bottom: 20px;\n}\n\n.mj-attendee-card[_ngcontent-%COMP%] {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 12px 14px;\n}\n\n.mj-attendee-card-title[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #475569;\n    margin-bottom: 10px;\n}\n\n\n\n.mj-widget-payment-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container[_ngcontent-%COMP%] {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px;\n    margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point[_ngcontent-%COMP%] {\n    min-height: 40px;\n}\n\n.mj-stripe-badge[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 10px;\n    font-size: 0.75rem;\n    color: #64748b;\n}\n\n.mj-stripe-lock-icon[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n}\n\n.mj-checkout-total-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-top: 1px solid #e2e8f0;\n    margin-top: 10px;\n    margin-bottom: 18px;\n}\n\n.mj-total-label[_ngcontent-%COMP%] {\n    font-weight: 700;\n    font-size: 1.05rem;\n    color: #0f172a;\n}\n\n.mj-total-amount[_ngcontent-%COMP%] {\n    font-weight: 800;\n    font-size: 1.25rem;\n    color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 12px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-size: 1rem;\n    font-weight: 600;\n    border: none;\n    border-radius: var(--mj-border-radius, 8px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:hover:not(:disabled) {\n    opacity: 0.92;\n}\n\n.mj-btn-submit[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px;\n    background: transparent;\n    color: #64748b;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    text-align: center;\n}\n\n.mj-btn-cancel[_ngcontent-%COMP%]:hover:not(:disabled) {\n    color: #334155;\n    text-decoration: underline;\n}\n\n.mj-spinner[_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n    border: 2px solid #ffffff;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_mj-spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_mj-spin {\n    to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    margin: 0.75rem 0;\n    font-size: 0.875rem;\n    font-weight: 400;\n    line-height: 1.4;\n}\n.mj-checkout-consent[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 0.2rem;\n}\n\n\n\n\n\n.mj-checkbox-label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%], \n.mj-checkout-consent[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%] {\n    width: auto;\n    height: auto;\n    padding: 0;\n    border: 0;\n    flex: 0 0 auto;\n}\n\n.mj-checkout-promo[_ngcontent-%COMP%] {\n    margin: 0.75rem 0;\n}\n.mj-checkout-promo__label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 0.875rem;\n    margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.5rem;\n}\n.mj-checkout-promo__input[_ngcontent-%COMP%] {\n    flex: 1 1 auto;\n}\n.mj-checkout-promo__error[_ngcontent-%COMP%] {\n    color: var(--mj-error-color, #b91c1c);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied[_ngcontent-%COMP%] {\n    color: var(--mj-success-color, #15803d);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n    padding: 8px 14px;\n    background: transparent;\n    color: var(--mj-primary-color, #2563eb);\n    border: 1px solid var(--mj-border-color, #cbd5e1);\n    border-radius: var(--mj-border-radius, 8px);\n    font-size: 0.875rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n.mj-checkout-promo__apply[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCheckoutWidgetComponent, [{
         type: Component,
-        args: [{ selector: 'mj-checkout-widget', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mj-checkout-widget-container\"\n    [style.--mj-primary-color]=\"activeTheme()?.primaryColor || '#2563eb'\"\n    [style.--mj-accent-color]=\"activeTheme()?.accentColor || '#3b82f6'\"\n    [style.--mj-border-radius]=\"activeTheme()?.borderRadius || '8px'\"\n    [style.--mj-bg-color]=\"activeTheme()?.backgroundColor || '#ffffff'\"\n    [style.--mj-text-color]=\"activeTheme()?.textColor || '#0f172a'\"\n    [style.--mj-font-family]=\"activeTheme()?.fontFamily || 'inherit'\">\n\n    <!-- Widget Header -->\n    <header class=\"mj-widget-header\">\n        <h2 class=\"mj-widget-title\">{{ config?.title || 'Checkout' }}</h2>\n        @if (config?.description) {\n            <p class=\"mj-widget-description\">{{ config?.description }}</p>\n        }\n    </header>\n\n    <!-- Error Banner -->\n    @if (displayErrorMessage()) {\n        <div class=\"mj-widget-error-banner\" role=\"alert\">\n            <span class=\"mj-error-icon\">\u26A0\uFE0F</span>\n            <span>{{ displayErrorMessage() }}</span>\n        </div>\n    }\n\n    <!-- Order Item & Pricing Summary -->\n    <div class=\"mj-widget-summary-card\">\n        <div class=\"mj-summary-row\">\n            <div class=\"mj-summary-item-info\">\n                <span class=\"mj-product-name\">{{ config?.productName || 'Order Item' }}</span>\n                @if (isFree()) {\n                    <span class=\"mj-badge-free\">FREE</span>\n                }\n            </div>\n            <div class=\"mj-summary-price\">\n                @if (isFree()) {\n                    <span class=\"mj-price-free\">$0.00</span>\n                } @else {\n                    <span class=\"mj-price-amount\">{{ currencySymbol() }}{{ (config?.unitPrice || 0).toFixed(2) }}</span>\n                }\n            </div>\n        </div>\n\n        @if (config?.allowQuantity) {\n            <div class=\"mj-quantity-selector-row\">\n                <label for=\"quantityInput\" class=\"mj-label\">Quantity</label>\n                <div class=\"mj-qty-controls\">\n                    <button type=\"button\" class=\"mj-qty-btn\" (click)=\"onQuantityChange(quantity() - 1)\" [disabled]=\"quantity() <= 1\">-</button>\n                    <input id=\"quantityInput\" type=\"number\" class=\"mj-qty-input\" [ngModel]=\"quantity()\" (ngModelChange)=\"onQuantityChange($event)\" min=\"1\" [max]=\"config?.maxQuantity || 50\" />\n                    <button type=\"button\" class=\"mj-qty-btn\" (click)=\"onQuantityChange(quantity() + 1)\" [disabled]=\"quantity() >= (config?.maxQuantity || 50)\">+</button>\n                </div>\n            </div>\n        }\n    </div>\n\n    <!-- Registration / Contact / Product Extension Form Section -->\n    <section class=\"mj-widget-form-section\">\n        @if (isSingleUnit()) {\n            <!-- Single Unit / Primary Form -->\n            <h3 class=\"mj-section-title\">Details</h3>\n            <div class=\"mj-form-grid\">\n                @for (field of activeFieldDefs(); track field.name) {\n                    <div class=\"mj-form-group\" [class.full-width]=\"field.type === 'textarea' || field.name === 'email' || field.name === 'Email'\">\n                        <label class=\"mj-label\">\n                            {{ field.label }}\n                            @if (field.required) {\n                                <span class=\"mj-required\">*</span>\n                            }\n                        </label>\n\n                        @switch (field.type) {\n                            @case ('textarea') {\n                                <textarea\n                                    class=\"mj-input mj-textarea\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [placeholder]=\"field.placeholder || ''\"\n                                    [required]=\"field.required || false\">\n                                </textarea>\n                            }\n                            @case ('select') {\n                                <select\n                                    class=\"mj-select\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [required]=\"field.required || false\">\n                                    <option [ngValue]=\"''\">Select {{ field.label }}</option>\n                                    @for (opt of field.options; track opt.value) {\n                                        <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                                    }\n                                </select>\n                            }\n                            @case ('boolean') {\n                                <label class=\"mj-checkbox-label\">\n                                    <input\n                                        type=\"checkbox\"\n                                        [ngModel]=\"units()[0]?.[field.name]\"\n                                        (ngModelChange)=\"updateUnitField(0, field.name, $event)\" />\n                                    <span>{{ field.label }}</span>\n                                </label>\n                            }\n                            @case ('number') {\n                                <input\n                                    type=\"number\"\n                                    class=\"mj-input\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [placeholder]=\"field.placeholder || ''\"\n                                    [required]=\"field.required || false\" />\n                            }\n                            @case ('date') {\n                                <input\n                                    type=\"date\"\n                                    class=\"mj-input\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [required]=\"field.required || false\" />\n                            }\n                            @default {\n                                <input\n                                    [type]=\"field.name.toLowerCase().includes('email') ? 'email' : 'text'\"\n                                    class=\"mj-input\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [placeholder]=\"field.placeholder || ''\"\n                                    [required]=\"field.required || false\" />\n                            }\n                        }\n                    </div>\n                }\n            </div>\n        } @else {\n            <!-- Multi-Unit Matrix (Repeating Fieldsets for Quantity > 1) -->\n            <div class=\"mj-multi-attendee-header\">\n                <h3 class=\"mj-section-title\">Item Details ({{ quantity() }})</h3>\n                <button type=\"button\" class=\"mj-btn-link\" (click)=\"copyPrimaryToAll()\">Copy Primary Info to All</button>\n            </div>\n\n            <div class=\"mj-attendee-matrix\">\n                @for (unit of units(); track $index) {\n                    <div class=\"mj-attendee-card\">\n                        <div class=\"mj-attendee-card-title\">Item {{ $index + 1 }}</div>\n                        <div class=\"mj-form-grid\">\n                            @for (field of activeFieldDefs(); track field.name) {\n                                <div class=\"mj-form-group\" [class.full-width]=\"field.type === 'textarea' || field.name === 'email' || field.name === 'Email'\">\n                                    <label class=\"mj-label\">\n                                        {{ field.label }}\n                                        @if (field.required) {\n                                            <span class=\"mj-required\">*</span>\n                                        }\n                                    </label>\n\n                                    @switch (field.type) {\n                                        @case ('textarea') {\n                                            <textarea\n                                                class=\"mj-input mj-textarea\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [placeholder]=\"field.placeholder || ''\"\n                                                [required]=\"field.required || false\">\n                                            </textarea>\n                                        }\n                                        @case ('select') {\n                                            <select\n                                                class=\"mj-select\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [required]=\"field.required || false\">\n                                                <option [ngValue]=\"''\">Select {{ field.label }}</option>\n                                                @for (opt of field.options; track opt.value) {\n                                                    <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                                                }\n                                            </select>\n                                        }\n                                        @case ('boolean') {\n                                            <label class=\"mj-checkbox-label\">\n                                                <input\n                                                    type=\"checkbox\"\n                                                    [ngModel]=\"unit[field.name]\"\n                                                    (ngModelChange)=\"updateUnitField($index, field.name, $event)\" />\n                                                <span>{{ field.label }}</span>\n                                            </label>\n                                        }\n                                        @case ('number') {\n                                            <input\n                                                type=\"number\"\n                                                class=\"mj-input\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [placeholder]=\"field.placeholder || ''\"\n                                                [required]=\"field.required || false\" />\n                                        }\n                                        @case ('date') {\n                                            <input\n                                                type=\"date\"\n                                                class=\"mj-input\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [required]=\"field.required || false\" />\n                                        }\n                                        @default {\n                                            <input\n                                                [type]=\"field.name.toLowerCase().includes('email') ? 'email' : 'text'\"\n                                                class=\"mj-input\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [placeholder]=\"field.placeholder || ''\"\n                                                [required]=\"field.required || false\" />\n                                        }\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n            </div>\n        }\n    </section>\n\n    <!-- Billing Location \u2014 required so the sale can be placed in a tax jurisdiction -->\n    <section class=\"mj-widget-form-section\">\n        <h3 class=\"mj-section-title\">Billing Location</h3>\n        <div class=\"mj-form-grid\">\n            <div class=\"mj-form-group\">\n                <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-country'\">\n                    Country <span class=\"mj-required\">*</span>\n                </label>\n                <select\n                    class=\"mj-select\"\n                    [id]=\"widgetInstanceId + '-billing-country'\"\n                    autocomplete=\"country\"\n                    [ngModel]=\"billingCountry()\"\n                    (ngModelChange)=\"onBillingCountryChange($event)\"\n                    required>\n                    <option [ngValue]=\"''\">Select country</option>\n                    @for (c of billingCountries; track c.Code) {\n                        <option [ngValue]=\"c.Code\">{{ c.Name }}</option>\n                    }\n                </select>\n            </div>\n            @if (billingRegions().length > 0) {\n                <div class=\"mj-form-group\">\n                    <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-region'\">\n                        State / Province <span class=\"mj-required\">*</span>\n                    </label>\n                    <select\n                        class=\"mj-select\"\n                        [id]=\"widgetInstanceId + '-billing-region'\"\n                        autocomplete=\"address-level1\"\n                        [ngModel]=\"billingRegion()\"\n                        (ngModelChange)=\"onBillingRegionChange($event)\"\n                        required>\n                        <option [ngValue]=\"''\">Select state or province</option>\n                        @for (r of billingRegions(); track r.Code) {\n                            <option [ngValue]=\"r.Code\">{{ r.Name }}</option>\n                        }\n                    </select>\n                </div>\n            }\n            <div class=\"mj-form-group\">\n                <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-postal'\">\n                    Postal Code\n                    @if (billingPostalRequired()) {\n                        <span class=\"mj-required\">*</span>\n                    }\n                </label>\n                <input\n                    type=\"text\"\n                    class=\"mj-input\"\n                    [id]=\"widgetInstanceId + '-billing-postal'\"\n                    autocomplete=\"postal-code\"\n                    maxlength=\"20\"\n                    [ngModel]=\"billingPostalCode()\"\n                    (ngModelChange)=\"onBillingPostalCodeChange($event)\"\n                    [required]=\"billingPostalRequired()\" />\n            </div>\n        </div>\n    </section>\n    <!-- Questions from the widget's Configuration; answers are recorded on the order -->\n    @if (questions().length > 0) {\n        <section class=\"mj-widget-form-section\">\n            <h3 class=\"mj-section-title\">A few questions</h3>\n            <div class=\"mj-form-grid\">\n                @for (question of questions(); track question.key) {\n                    <div class=\"mj-form-group full-width\">\n                        <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-q-' + question.key\">\n                            {{ question.label }}\n                            @if (question.required) {\n                                <span class=\"mj-required\">*</span>\n                            }\n                        </label>\n                        @if (question.type === 'select') {\n                            <select\n                                class=\"mj-select\"\n                                [id]=\"widgetInstanceId + '-q-' + question.key\"\n                                [ngModel]=\"answerFor(question.key).Value ?? ''\"\n                                (ngModelChange)=\"updateAnswer(question.key, { Value: $event })\"\n                                [required]=\"question.required || false\">\n                                <option [ngValue]=\"''\">Select an answer</option>\n                                @for (opt of question.options; track optionValue(opt)) {\n                                    <option [ngValue]=\"optionValue(opt)\">{{ optionLabel(opt) }}</option>\n                                }\n                            </select>\n                            @if (isOtherChosen(question)) {\n                                <input\n                                    type=\"text\"\n                                    class=\"mj-input mj-question-other\"\n                                    [attr.aria-label]=\"question.label + ' (please specify)'\"\n                                    placeholder=\"Please specify\"\n                                    [attr.maxlength]=\"answerMaxLength(question)\"\n                                    [ngModel]=\"answerFor(question.key).OtherText ?? ''\"\n                                    (ngModelChange)=\"updateAnswer(question.key, { OtherText: $event })\"\n                                    required />\n                            }\n                        } @else {\n                            <input\n                                type=\"text\"\n                                class=\"mj-input\"\n                                [id]=\"widgetInstanceId + '-q-' + question.key\"\n                                [attr.maxlength]=\"answerMaxLength(question)\"\n                                [ngModel]=\"answerFor(question.key).Value ?? ''\"\n                                (ngModelChange)=\"updateAnswer(question.key, { Value: $event })\"\n                                [required]=\"question.required || false\" />\n                        }\n                    </div>\n                }\n            </div>\n        </section>\n    }\n\n    <!-- Choice groups from the widget's Configuration; the picks are recorded on the order line -->\n    @for (group of choiceGroups(); track group.key) {\n        <section class=\"mj-widget-form-section\">\n            <fieldset class=\"mj-choice-group\">\n                <legend class=\"mj-section-title\">\n                    {{ group.label }}\n                    <span class=\"mj-choice-count\">(choose {{ choiceCount(group) }})</span>\n                    @if (group.min > 0) {\n                        <span class=\"mj-required\">*</span>\n                    }\n                </legend>\n                <div class=\"mj-choice-options\">\n                    @for (opt of group.options; track choiceValue(opt)) {\n                        <label\n                            class=\"mj-checkbox-label\"\n                            [class.is-disabled]=\"isGroupFull(group) && !isChosen(group.key, choiceValue(opt))\">\n                            <input\n                                type=\"checkbox\"\n                                [checked]=\"isChosen(group.key, choiceValue(opt))\"\n                                [disabled]=\"isGroupFull(group) && !isChosen(group.key, choiceValue(opt))\"\n                                (change)=\"toggleChoice(group, choiceValue(opt))\" />\n                            <span>{{ choiceLabel(opt) }}</span>\n                        </label>\n                    }\n                </div>\n            </fieldset>\n        </section>\n    }\n\n    <!-- Stripe Embedded Payment Section -->\n    @if (!isFree()) {\n        <section class=\"mj-widget-payment-section\">\n            <h3 class=\"mj-section-title\">Payment</h3>\n            <div class=\"mj-stripe-container\">\n                <div id=\"stripe-card-element\" class=\"mj-stripe-mount-point\">\n                    <!-- Stripe.js mounts secure hosted Elements iframe here -->\n                </div>\n                <div class=\"mj-stripe-badge\">\n                    <span class=\"mj-stripe-lock-icon\">\uD83D\uDD12</span>\n                    <span>Secured by Stripe \u2022 PCI-DSS Level 1 Certified \u2022 End-to-end Encrypted</span>\n                </div>\n            </div>\n        </section>\n\n        @if (allowsPromotionCodes()) {\n            <div class=\"mj-checkout-promo\">\n                <label class=\"mj-checkout-promo__label\" for=\"{{ widgetInstanceId }}-promo\">Promo code</label>\n                <div class=\"mj-checkout-promo__row\">\n                    <input id=\"{{ widgetInstanceId }}-promo\" type=\"text\" class=\"mj-input mj-checkout-promo__input\" autocomplete=\"off\" maxlength=\"60\"\n                        [value]=\"promotionCodeInput()\"\n                        (input)=\"promotionCodeInput.set($any($event.target).value)\"\n                        (keydown.enter)=\"applyPromotionCode()\"\n                        [disabled]=\"isProcessing\" />\n                    <button type=\"button\" class=\"mj-checkout-promo__apply\"\n                        [disabled]=\"isProcessing || !promotionCodeInput().trim()\"\n                        (click)=\"applyPromotionCode()\">Apply</button>\n                </div>\n                @if (promotionError) {\n                    <p class=\"mj-checkout-promo__error\" role=\"alert\">{{ promotionError }}</p>\n                } @else if (activePromotion(); as promo) {\n                    <p class=\"mj-checkout-promo__applied\" role=\"status\">\n                        {{ promo.code }} applied: \u2212{{ currencySymbol() }}{{ promo.discount.toFixed(2) }}\n                    </p>\n                }\n            </div>\n        }\n\n        @if (autoRenewConsentText(); as consentText) {\n            <label class=\"mj-checkout-consent\">\n                <input type=\"checkbox\"\n                    [checked]=\"autoRenewConsent()\"\n                    (change)=\"autoRenewConsent.set($any($event.target).checked)\"\n                    [disabled]=\"isProcessing\" />\n                <span>{{ consentText }}</span>\n            </label>\n        }\n\n        <!-- Final Total Line -->\n        @if (quotedTax !== null) {\n            <div class=\"mj-checkout-total-row\">\n                <span class=\"mj-total-label\">Sales Tax</span>\n                <span class=\"mj-total-amount\">{{ currencySymbol() }}{{ (quotedTax ?? 0).toFixed(2) }}</span>\n            </div>\n        }\n        <div class=\"mj-checkout-total-row\">\n            <span class=\"mj-total-label\">Total Due</span>\n            <span class=\"mj-total-amount\">{{ currencySymbol() }}{{ totalGross().toFixed(2) }}</span>\n        </div>\n    }\n\n    <!-- Actions -->\n    <div class=\"mj-widget-actions\">\n        <button type=\"button\" class=\"mj-btn-submit\" [disabled]=\"!isFormValid() || isProcessing\" (click)=\"handleSubmit()\">\n            @if (isProcessing) {\n                <span class=\"mj-spinner\"></span>\n                <span>Processing...</span>\n            } @else if (isFree()) {\n                <span>Complete Free Registration</span>\n            } @else {\n                <span>Pay {{ currencySymbol() }}{{ totalGross().toFixed(2) }}</span>\n            }\n        </button>\n\n        <button type=\"button\" class=\"mj-btn-cancel\" [disabled]=\"isProcessing\" (click)=\"cancelled.emit()\">\n            Cancel\n        </button>\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n    color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container {\n    max-width: 560px;\n    margin: 0 auto;\n    background: var(--mj-bg-color, #ffffff);\n    border: 1px solid #e2e8f0;\n    border-radius: var(--mj-border-radius, 8px);\n    padding: 24px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header {\n    margin-bottom: 20px;\n}\n\n.mj-widget-title {\n    margin: 0 0 6px 0;\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description {\n    margin: 0;\n    font-size: 0.9rem;\n    color: #64748b;\n    line-height: 1.4;\n}\n\n.mj-widget-error-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    margin-bottom: 18px;\n    font-size: 0.875rem;\n}\n\n.mj-error-icon {\n    font-size: 1rem;\n}\n\n.mj-widget-summary-card {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px 16px;\n    margin-bottom: 20px;\n}\n\n.mj-summary-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.mj-summary-price {\n    display: flex;\n    align-items: center;\n}\n\n.mj-widget-form-section {\n    margin-bottom: 20px;\n}\n\n.mj-summary-item-info {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mj-product-name {\n    font-weight: 600;\n    font-size: 1rem;\n    color: #1e293b;\n}\n\n.mj-badge-free {\n    background: #dcfce7;\n    color: #166534;\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.mj-price-free {\n    font-weight: 700;\n    color: #166534;\n    font-size: 1.1rem;\n}\n\n.mj-price-amount {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.mj-qty-btn {\n    width: 28px;\n    height: 28px;\n    background: #ffffff;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    cursor: pointer;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-qty-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.mj-qty-input {\n    width: 44px;\n    height: 28px;\n    text-align: center;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.mj-section-title {\n    font-size: 1rem;\n    font-weight: 600;\n    margin: 0 0 12px 0;\n    color: #334155;\n}\n\n.mj-form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    margin-bottom: 18px;\n}\n\n.mj-form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.mj-form-group.full-width {\n    grid-column: 1 / -1;\n}\n\n.mj-label {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #475569;\n}\n\n.mj-required {\n    color: #ef4444;\n}\n\n.mj-input, .mj-select {\n    padding: 8px 12px;\n    font-size: 0.9rem;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    background: #ffffff;\n    color: #1e293b;\n    outline: none;\n    transition: border-color 0.15s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-textarea {\n    min-height: 70px;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.mj-select {\n    min-height: 38px;\n}\n\n.mj-checkbox-label {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    color: #334155;\n    margin-top: 4px;\n}\n\n/* The free-text answer that appears under a question's \"Other\" choice. */\n.mj-question-other {\n    margin-top: 8px;\n}\n\n/* A choice group: its options stacked, with how many to pick beside the heading. */\n.mj-choice-group {\n    border: 0;\n    margin: 0;\n    padding: 0;\n}\n\n.mj-choice-count {\n    font-weight: normal;\n    color: #64748b;\n}\n\n.mj-choice-options {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.mj-input:focus, .mj-select:focus {\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.mj-btn-link {\n    background: none;\n    border: none;\n    color: var(--mj-primary-color, #2563eb);\n    font-size: 0.8rem;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.mj-attendee-matrix {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    margin-bottom: 20px;\n}\n\n.mj-attendee-card {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 12px 14px;\n}\n\n.mj-attendee-card-title {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #475569;\n    margin-bottom: 10px;\n}\n\n/* Stripe Payment Container */\n.mj-widget-payment-section {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px;\n    margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point {\n    min-height: 40px;\n}\n\n.mj-stripe-badge {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 10px;\n    font-size: 0.75rem;\n    color: #64748b;\n}\n\n.mj-stripe-lock-icon {\n    font-size: 0.85rem;\n}\n\n.mj-checkout-total-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-top: 1px solid #e2e8f0;\n    margin-top: 10px;\n    margin-bottom: 18px;\n}\n\n.mj-total-label {\n    font-weight: 700;\n    font-size: 1.05rem;\n    color: #0f172a;\n}\n\n.mj-total-amount {\n    font-weight: 800;\n    font-size: 1.25rem;\n    color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions {\n    margin-top: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-btn-submit {\n    width: 100%;\n    padding: 12px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-size: 1rem;\n    font-weight: 600;\n    border: none;\n    border-radius: var(--mj-border-radius, 8px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit:hover:not(:disabled) {\n    opacity: 0.92;\n}\n\n.mj-btn-submit:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.mj-btn-cancel {\n    width: 100%;\n    padding: 8px 12px;\n    background: transparent;\n    color: #64748b;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    text-align: center;\n}\n\n.mj-btn-cancel:hover:not(:disabled) {\n    color: #334155;\n    text-decoration: underline;\n}\n\n.mj-spinner {\n    width: 16px;\n    height: 16px;\n    border: 2px solid #ffffff;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: mj-spin 0.8s linear infinite;\n}\n\n@keyframes mj-spin {\n    to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent {\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    margin: 0.75rem 0;\n    font-size: 0.875rem;\n    line-height: 1.4;\n}\n.mj-checkout-consent input {\n    margin-top: 0.2rem;\n    flex: 0 0 auto;\n}\n\n.mj-checkout-promo {\n    margin: 0.75rem 0;\n}\n.mj-checkout-promo__label {\n    display: block;\n    font-size: 0.875rem;\n    margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row {\n    display: flex;\n    gap: 0.5rem;\n}\n.mj-checkout-promo__input {\n    flex: 1 1 auto;\n}\n.mj-checkout-promo__error {\n    color: var(--mj-error-color, #b91c1c);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied {\n    color: var(--mj-success-color, #15803d);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply {\n    flex: 0 0 auto;\n    padding: 8px 14px;\n    background: transparent;\n    color: var(--mj-primary-color, #2563eb);\n    border: 1px solid var(--mj-border-color, #cbd5e1);\n    border-radius: var(--mj-border-radius, 8px);\n    font-size: 0.875rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n.mj-checkout-promo__apply:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n"] }]
+        args: [{ selector: 'mj-checkout-widget', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mj-checkout-widget-container\"\n    [style.--mj-primary-color]=\"activeTheme()?.primaryColor || '#2563eb'\"\n    [style.--mj-accent-color]=\"activeTheme()?.accentColor || '#3b82f6'\"\n    [style.--mj-border-radius]=\"activeTheme()?.borderRadius || '8px'\"\n    [style.--mj-bg-color]=\"activeTheme()?.backgroundColor || '#ffffff'\"\n    [style.--mj-text-color]=\"activeTheme()?.textColor || '#0f172a'\"\n    [style.--mj-font-family]=\"activeTheme()?.fontFamily || 'inherit'\">\n\n    <!-- Widget Header -->\n    <header class=\"mj-widget-header\">\n        <h2 class=\"mj-widget-title\">{{ config?.title || 'Checkout' }}</h2>\n        @if (config?.description) {\n            <p class=\"mj-widget-description\">{{ config?.description }}</p>\n        }\n    </header>\n\n    <!-- Error Banner -->\n    @if (displayErrorMessage()) {\n        <div class=\"mj-widget-error-banner\" role=\"alert\">\n            <span class=\"mj-error-icon\">\u26A0\uFE0F</span>\n            <span>{{ displayErrorMessage() }}</span>\n        </div>\n    }\n\n    <!-- Order Item & Pricing Summary -->\n    <div class=\"mj-widget-summary-card\">\n        <div class=\"mj-summary-row\">\n            <div class=\"mj-summary-item-info\">\n                <span class=\"mj-product-name\">{{ config?.productName || 'Order Item' }}</span>\n                @if (isFree()) {\n                    <span class=\"mj-badge-free\">FREE</span>\n                }\n            </div>\n            <div class=\"mj-summary-price\">\n                @if (isFree()) {\n                    <span class=\"mj-price-free\">$0.00</span>\n                } @else {\n                    <span class=\"mj-price-amount\">{{ currencySymbol() }}{{ (config?.unitPrice || 0).toFixed(2) }}</span>\n                }\n            </div>\n        </div>\n\n        @if (config?.allowQuantity) {\n            <div class=\"mj-quantity-selector-row\">\n                <label for=\"quantityInput\" class=\"mj-label\">Quantity</label>\n                <div class=\"mj-qty-controls\">\n                    <button type=\"button\" class=\"mj-qty-btn\" (click)=\"onQuantityChange(quantity() - 1)\" [disabled]=\"quantity() <= 1\">-</button>\n                    <input id=\"quantityInput\" type=\"number\" class=\"mj-qty-input\" [ngModel]=\"quantity()\" (ngModelChange)=\"onQuantityChange($event)\" min=\"1\" [max]=\"config?.maxQuantity || 50\" />\n                    <button type=\"button\" class=\"mj-qty-btn\" (click)=\"onQuantityChange(quantity() + 1)\" [disabled]=\"quantity() >= (config?.maxQuantity || 50)\">+</button>\n                </div>\n            </div>\n        }\n    </div>\n\n    <!-- Registration / Contact / Product Extension Form Section -->\n    <section class=\"mj-widget-form-section\">\n        @if (isSingleUnit()) {\n            <!-- Single Unit / Primary Form -->\n            <h3 class=\"mj-section-title\">Details</h3>\n            <div class=\"mj-form-grid\">\n                @for (field of activeFieldDefs(); track field.name) {\n                    <div class=\"mj-form-group\" [class.full-width]=\"field.type === 'textarea' || field.name === 'email' || field.name === 'Email'\">\n                        <label class=\"mj-label\">\n                            {{ field.label }}\n                            @if (field.required) {\n                                <span class=\"mj-required\">*</span>\n                            }\n                        </label>\n\n                        @switch (field.type) {\n                            @case ('textarea') {\n                                <textarea\n                                    class=\"mj-input mj-textarea\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [placeholder]=\"field.placeholder || ''\"\n                                    [required]=\"field.required || false\">\n                                </textarea>\n                            }\n                            @case ('select') {\n                                <select\n                                    class=\"mj-select\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [required]=\"field.required || false\">\n                                    <option [ngValue]=\"''\">Select {{ field.label }}</option>\n                                    @for (opt of field.options; track opt.value) {\n                                        <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                                    }\n                                </select>\n                            }\n                            @case ('boolean') {\n                                <label class=\"mj-checkbox-label\">\n                                    <input\n                                        type=\"checkbox\"\n                                        [ngModel]=\"units()[0]?.[field.name]\"\n                                        (ngModelChange)=\"updateUnitField(0, field.name, $event)\" />\n                                    <span>{{ field.label }}</span>\n                                </label>\n                            }\n                            @case ('number') {\n                                <input\n                                    type=\"number\"\n                                    class=\"mj-input\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [placeholder]=\"field.placeholder || ''\"\n                                    [required]=\"field.required || false\" />\n                            }\n                            @case ('date') {\n                                <input\n                                    type=\"date\"\n                                    class=\"mj-input\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [required]=\"field.required || false\" />\n                            }\n                            @default {\n                                <input\n                                    [type]=\"field.name.toLowerCase().includes('email') ? 'email' : 'text'\"\n                                    class=\"mj-input\"\n                                    [ngModel]=\"units()[0]?.[field.name]\"\n                                    (ngModelChange)=\"updateUnitField(0, field.name, $event)\"\n                                    [placeholder]=\"field.placeholder || ''\"\n                                    [required]=\"field.required || false\" />\n                            }\n                        }\n                    </div>\n                }\n            </div>\n        } @else {\n            <!-- Multi-Unit Matrix (Repeating Fieldsets for Quantity > 1) -->\n            <div class=\"mj-multi-attendee-header\">\n                <h3 class=\"mj-section-title\">Item Details ({{ quantity() }})</h3>\n                <button type=\"button\" class=\"mj-btn-link\" (click)=\"copyPrimaryToAll()\">Copy Primary Info to All</button>\n            </div>\n\n            <div class=\"mj-attendee-matrix\">\n                @for (unit of units(); track $index) {\n                    <div class=\"mj-attendee-card\">\n                        <div class=\"mj-attendee-card-title\">Item {{ $index + 1 }}</div>\n                        <div class=\"mj-form-grid\">\n                            @for (field of activeFieldDefs(); track field.name) {\n                                <div class=\"mj-form-group\" [class.full-width]=\"field.type === 'textarea' || field.name === 'email' || field.name === 'Email'\">\n                                    <label class=\"mj-label\">\n                                        {{ field.label }}\n                                        @if (field.required) {\n                                            <span class=\"mj-required\">*</span>\n                                        }\n                                    </label>\n\n                                    @switch (field.type) {\n                                        @case ('textarea') {\n                                            <textarea\n                                                class=\"mj-input mj-textarea\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [placeholder]=\"field.placeholder || ''\"\n                                                [required]=\"field.required || false\">\n                                            </textarea>\n                                        }\n                                        @case ('select') {\n                                            <select\n                                                class=\"mj-select\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [required]=\"field.required || false\">\n                                                <option [ngValue]=\"''\">Select {{ field.label }}</option>\n                                                @for (opt of field.options; track opt.value) {\n                                                    <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                                                }\n                                            </select>\n                                        }\n                                        @case ('boolean') {\n                                            <label class=\"mj-checkbox-label\">\n                                                <input\n                                                    type=\"checkbox\"\n                                                    [ngModel]=\"unit[field.name]\"\n                                                    (ngModelChange)=\"updateUnitField($index, field.name, $event)\" />\n                                                <span>{{ field.label }}</span>\n                                            </label>\n                                        }\n                                        @case ('number') {\n                                            <input\n                                                type=\"number\"\n                                                class=\"mj-input\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [placeholder]=\"field.placeholder || ''\"\n                                                [required]=\"field.required || false\" />\n                                        }\n                                        @case ('date') {\n                                            <input\n                                                type=\"date\"\n                                                class=\"mj-input\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [required]=\"field.required || false\" />\n                                        }\n                                        @default {\n                                            <input\n                                                [type]=\"field.name.toLowerCase().includes('email') ? 'email' : 'text'\"\n                                                class=\"mj-input\"\n                                                [ngModel]=\"unit[field.name]\"\n                                                (ngModelChange)=\"updateUnitField($index, field.name, $event)\"\n                                                [placeholder]=\"field.placeholder || ''\"\n                                                [required]=\"field.required || false\" />\n                                        }\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n            </div>\n        }\n    </section>\n\n    <!-- Billing Location \u2014 required so the sale can be placed in a tax jurisdiction -->\n    <section class=\"mj-widget-form-section\">\n        <h3 class=\"mj-section-title\">Billing Location</h3>\n        <div class=\"mj-form-grid\">\n            <div class=\"mj-form-group\">\n                <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-country'\">\n                    Country <span class=\"mj-required\">*</span>\n                </label>\n                <select\n                    class=\"mj-select\"\n                    [id]=\"widgetInstanceId + '-billing-country'\"\n                    autocomplete=\"country\"\n                    [ngModel]=\"billingCountry()\"\n                    (ngModelChange)=\"onBillingCountryChange($event)\"\n                    required>\n                    <option [ngValue]=\"''\">Select country</option>\n                    @for (c of billingCountries; track c.Code) {\n                        <option [ngValue]=\"c.Code\">{{ c.Name }}</option>\n                    }\n                </select>\n            </div>\n            @if (billingRegions().length > 0) {\n                <div class=\"mj-form-group\">\n                    <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-region'\">\n                        State / Province <span class=\"mj-required\">*</span>\n                    </label>\n                    <select\n                        class=\"mj-select\"\n                        [id]=\"widgetInstanceId + '-billing-region'\"\n                        autocomplete=\"address-level1\"\n                        [ngModel]=\"billingRegion()\"\n                        (ngModelChange)=\"onBillingRegionChange($event)\"\n                        required>\n                        <option [ngValue]=\"''\">Select state or province</option>\n                        @for (r of billingRegions(); track r.Code) {\n                            <option [ngValue]=\"r.Code\">{{ r.Name }}</option>\n                        }\n                    </select>\n                </div>\n            }\n            <div class=\"mj-form-group\">\n                <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-billing-postal'\">\n                    Postal Code\n                    @if (billingPostalRequired()) {\n                        <span class=\"mj-required\">*</span>\n                    }\n                </label>\n                <input\n                    type=\"text\"\n                    class=\"mj-input\"\n                    [id]=\"widgetInstanceId + '-billing-postal'\"\n                    autocomplete=\"postal-code\"\n                    maxlength=\"20\"\n                    [ngModel]=\"billingPostalCode()\"\n                    (ngModelChange)=\"onBillingPostalCodeChange($event)\"\n                    [required]=\"billingPostalRequired()\" />\n            </div>\n        </div>\n    </section>\n    <!-- Questions from the widget's Configuration; answers are recorded on the order -->\n    @if (questions().length > 0) {\n        <section class=\"mj-widget-form-section\">\n            <h3 class=\"mj-section-title\">A few questions</h3>\n            <div class=\"mj-form-grid\">\n                @for (question of questions(); track question.key) {\n                    <div class=\"mj-form-group full-width\">\n                        <label class=\"mj-label\" [attr.for]=\"widgetInstanceId + '-q-' + question.key\">\n                            {{ question.label }}\n                            @if (question.required) {\n                                <span class=\"mj-required\">*</span>\n                            }\n                        </label>\n                        @if (question.type === 'select') {\n                            <select\n                                class=\"mj-select\"\n                                [id]=\"widgetInstanceId + '-q-' + question.key\"\n                                [ngModel]=\"answerFor(question.key).Value ?? ''\"\n                                (ngModelChange)=\"updateAnswer(question.key, { Value: $event })\"\n                                [required]=\"question.required || false\">\n                                <option [ngValue]=\"''\">Select an answer</option>\n                                @for (opt of question.options; track optionValue(opt)) {\n                                    <option [ngValue]=\"optionValue(opt)\">{{ optionLabel(opt) }}</option>\n                                }\n                            </select>\n                            @if (isOtherChosen(question)) {\n                                <input\n                                    type=\"text\"\n                                    class=\"mj-input mj-question-other\"\n                                    [attr.aria-label]=\"question.label + ' (please specify)'\"\n                                    placeholder=\"Please specify\"\n                                    [attr.maxlength]=\"answerMaxLength(question)\"\n                                    [ngModel]=\"answerFor(question.key).OtherText ?? ''\"\n                                    (ngModelChange)=\"updateAnswer(question.key, { OtherText: $event })\"\n                                    required />\n                            }\n                        } @else {\n                            <input\n                                type=\"text\"\n                                class=\"mj-input\"\n                                [id]=\"widgetInstanceId + '-q-' + question.key\"\n                                [attr.maxlength]=\"answerMaxLength(question)\"\n                                [ngModel]=\"answerFor(question.key).Value ?? ''\"\n                                (ngModelChange)=\"updateAnswer(question.key, { Value: $event })\"\n                                [required]=\"question.required || false\" />\n                        }\n                    </div>\n                }\n            </div>\n        </section>\n    }\n\n    <!-- Choice groups from the widget's Configuration; the picks are recorded on the order line -->\n    @for (group of choiceGroups(); track group.key) {\n        <section class=\"mj-widget-form-section\">\n            <fieldset class=\"mj-choice-group\">\n                <legend class=\"mj-section-title\">\n                    {{ group.label }}\n                    <span class=\"mj-choice-count\">(choose {{ choiceCount(group) }})</span>\n                    @if (group.min > 0) {\n                        <span class=\"mj-required\">*</span>\n                    }\n                </legend>\n                <div class=\"mj-choice-options\">\n                    @for (opt of group.options; track choiceValue(opt)) {\n                        <label\n                            class=\"mj-checkbox-label\"\n                            [class.is-disabled]=\"isGroupFull(group) && !isChosen(group.key, choiceValue(opt))\">\n                            <input\n                                type=\"checkbox\"\n                                [checked]=\"isChosen(group.key, choiceValue(opt))\"\n                                [disabled]=\"isGroupFull(group) && !isChosen(group.key, choiceValue(opt))\"\n                                (change)=\"toggleChoice(group, choiceValue(opt))\" />\n                            <span>{{ choiceLabel(opt) }}</span>\n                        </label>\n                    }\n                </div>\n            </fieldset>\n        </section>\n    }\n\n    <!-- Stripe Embedded Payment Section -->\n    @if (!isFree()) {\n        <section class=\"mj-widget-payment-section\">\n            <h3 class=\"mj-section-title\">Payment</h3>\n            <div class=\"mj-stripe-container\">\n                <div id=\"stripe-card-element\" class=\"mj-stripe-mount-point\">\n                    <!-- Stripe.js mounts secure hosted Elements iframe here -->\n                </div>\n                <div class=\"mj-stripe-badge\">\n                    <span class=\"mj-stripe-lock-icon\">\uD83D\uDD12</span>\n                    <span>Secured by Stripe \u2022 PCI-DSS Level 1 Certified \u2022 End-to-end Encrypted</span>\n                </div>\n            </div>\n        </section>\n\n        @if (allowsPromotionCodes()) {\n            <div class=\"mj-checkout-promo\">\n                <label class=\"mj-checkout-promo__label\" for=\"{{ widgetInstanceId }}-promo\">Promo code</label>\n                <div class=\"mj-checkout-promo__row\">\n                    <input id=\"{{ widgetInstanceId }}-promo\" type=\"text\" class=\"mj-input mj-checkout-promo__input\" autocomplete=\"off\" maxlength=\"60\"\n                        [value]=\"promotionCodeInput()\"\n                        (input)=\"promotionCodeInput.set($any($event.target).value)\"\n                        (keydown.enter)=\"applyPromotionCode()\"\n                        [disabled]=\"isProcessing\" />\n                    <button type=\"button\" class=\"mj-checkout-promo__apply\"\n                        [disabled]=\"isProcessing || !promotionCodeInput().trim()\"\n                        (click)=\"applyPromotionCode()\">Apply</button>\n                </div>\n                @if (promotionError) {\n                    <p class=\"mj-checkout-promo__error\" role=\"alert\">{{ promotionError }}</p>\n                } @else if (activePromotion(); as promo) {\n                    <p class=\"mj-checkout-promo__applied\" role=\"status\">\n                        {{ promo.code }} applied: \u2212{{ currencySymbol() }}{{ promo.discount.toFixed(2) }}\n                    </p>\n                }\n            </div>\n        }\n\n        @if (autoRenewConsentText(); as consentText) {\n            <label class=\"mj-checkout-consent\">\n                <input type=\"checkbox\"\n                    [checked]=\"autoRenewConsent()\"\n                    (change)=\"autoRenewConsent.set($any($event.target).checked)\"\n                    [disabled]=\"isProcessing\" />\n                <span>{{ consentText }}</span>\n            </label>\n        }\n\n        <!-- Final Total Line -->\n        @if (quotedTax !== null) {\n            <div class=\"mj-checkout-total-row\">\n                <span class=\"mj-total-label\">Sales Tax</span>\n                <span class=\"mj-total-amount\">{{ currencySymbol() }}{{ (quotedTax ?? 0).toFixed(2) }}</span>\n            </div>\n        }\n        <div class=\"mj-checkout-total-row\">\n            <span class=\"mj-total-label\">Total Due</span>\n            <span class=\"mj-total-amount\">{{ currencySymbol() }}{{ totalGross().toFixed(2) }}</span>\n        </div>\n    }\n\n    <!-- Actions -->\n    <div class=\"mj-widget-actions\">\n        <button type=\"button\" class=\"mj-btn-submit\" [disabled]=\"!isFormValid() || isProcessing\" (click)=\"handleSubmit()\">\n            @if (isProcessing) {\n                <span class=\"mj-spinner\"></span>\n                <span>Processing...</span>\n            } @else if (isFree()) {\n                <span>Complete Free Registration</span>\n            } @else {\n                <span>Pay {{ currencySymbol() }}{{ totalGross().toFixed(2) }}</span>\n            }\n        </button>\n\n        <button type=\"button\" class=\"mj-btn-cancel\" [disabled]=\"isProcessing\" (click)=\"cancelled.emit()\">\n            Cancel\n        </button>\n    </div>\n</div>\n", styles: [":host {\n    display: block;\n    font-family: var(--mj-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n    color: var(--mj-text-color, #1e293b);\n}\n\n.mj-checkout-widget-container {\n    max-width: 560px;\n    margin: 0 auto;\n    background: var(--mj-bg-color, #ffffff);\n    border: 1px solid #e2e8f0;\n    border-radius: var(--mj-border-radius, 8px);\n    padding: 24px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\n}\n\n.mj-widget-header {\n    margin-bottom: 20px;\n}\n\n.mj-widget-title {\n    margin: 0 0 6px 0;\n    font-size: 1.35rem;\n    font-weight: 700;\n    color: var(--mj-text-color, #0f172a);\n}\n\n.mj-widget-description {\n    margin: 0;\n    font-size: 0.9rem;\n    color: #64748b;\n    line-height: 1.4;\n}\n\n.mj-widget-error-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    margin-bottom: 18px;\n    font-size: 0.875rem;\n}\n\n.mj-error-icon {\n    font-size: 1rem;\n}\n\n.mj-widget-summary-card {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px 16px;\n    margin-bottom: 20px;\n}\n\n.mj-summary-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.mj-summary-price {\n    display: flex;\n    align-items: center;\n}\n\n.mj-widget-form-section {\n    margin-bottom: 20px;\n}\n\n.mj-summary-item-info {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mj-product-name {\n    font-weight: 600;\n    font-size: 1rem;\n    color: #1e293b;\n}\n\n.mj-badge-free {\n    background: #dcfce7;\n    color: #166534;\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.mj-price-free {\n    font-weight: 700;\n    color: #166534;\n    font-size: 1.1rem;\n}\n\n.mj-price-amount {\n    font-weight: 700;\n    color: #0f172a;\n    font-size: 1.1rem;\n}\n\n.mj-quantity-selector-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px dashed #cbd5e1;\n}\n\n.mj-qty-controls {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.mj-qty-btn {\n    width: 28px;\n    height: 28px;\n    background: #ffffff;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    cursor: pointer;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-qty-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.mj-qty-input {\n    width: 44px;\n    height: 28px;\n    text-align: center;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.mj-section-title {\n    font-size: 1rem;\n    font-weight: 600;\n    margin: 0 0 12px 0;\n    color: #334155;\n}\n\n.mj-form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    margin-bottom: 18px;\n}\n\n.mj-form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.mj-form-group.full-width {\n    grid-column: 1 / -1;\n}\n\n.mj-label {\n    font-size: 0.8rem;\n    font-weight: 500;\n    color: #475569;\n}\n\n.mj-required {\n    color: #ef4444;\n}\n\n.mj-input, .mj-select {\n    padding: 8px 12px;\n    font-size: 0.9rem;\n    border: 1px solid #cbd5e1;\n    border-radius: 4px;\n    background: #ffffff;\n    color: #1e293b;\n    outline: none;\n    transition: border-color 0.15s ease;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-textarea {\n    min-height: 70px;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.mj-select {\n    min-height: 38px;\n}\n\n.mj-checkbox-label {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 400;\n    color: #334155;\n    margin-top: 4px;\n}\n\n/* The free-text answer that appears under a question's \"Other\" choice. */\n.mj-question-other {\n    margin-top: 8px;\n}\n\n/* A choice group: its options stacked, with how many to pick beside the heading. */\n.mj-choice-group {\n    border: 0;\n    margin: 0;\n    padding: 0;\n}\n\n.mj-choice-count {\n    font-weight: normal;\n    color: #64748b;\n}\n\n.mj-choice-options {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mj-checkbox-label.is-disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.mj-input:focus, .mj-select:focus {\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-multi-attendee-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.mj-btn-link {\n    background: none;\n    border: none;\n    color: var(--mj-primary-color, #2563eb);\n    font-size: 0.8rem;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.mj-attendee-matrix {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n    margin-bottom: 20px;\n}\n\n.mj-attendee-card {\n    background: #f8fafc;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 12px 14px;\n}\n\n.mj-attendee-card-title {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #475569;\n    margin-bottom: 10px;\n}\n\n/* Stripe Payment Container */\n.mj-widget-payment-section {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid #e2e8f0;\n}\n\n.mj-stripe-container {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    padding: 14px;\n    margin-bottom: 16px;\n}\n\n.mj-stripe-mount-point {\n    min-height: 40px;\n}\n\n.mj-stripe-badge {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 10px;\n    font-size: 0.75rem;\n    color: #64748b;\n}\n\n.mj-stripe-lock-icon {\n    font-size: 0.85rem;\n}\n\n.mj-checkout-total-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-top: 1px solid #e2e8f0;\n    margin-top: 10px;\n    margin-bottom: 18px;\n}\n\n.mj-total-label {\n    font-weight: 700;\n    font-size: 1.05rem;\n    color: #0f172a;\n}\n\n.mj-total-amount {\n    font-weight: 800;\n    font-size: 1.25rem;\n    color: var(--mj-primary-color, #2563eb);\n}\n\n.mj-widget-actions {\n    margin-top: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-btn-submit {\n    width: 100%;\n    padding: 12px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-size: 1rem;\n    font-weight: 600;\n    border: none;\n    border-radius: var(--mj-border-radius, 8px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    transition: opacity 0.15s ease;\n}\n\n.mj-btn-submit:hover:not(:disabled) {\n    opacity: 0.92;\n}\n\n.mj-btn-submit:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.mj-btn-cancel {\n    width: 100%;\n    padding: 8px 12px;\n    background: transparent;\n    color: #64748b;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border: none;\n    cursor: pointer;\n    text-align: center;\n}\n\n.mj-btn-cancel:hover:not(:disabled) {\n    color: #334155;\n    text-decoration: underline;\n}\n\n.mj-spinner {\n    width: 16px;\n    height: 16px;\n    border: 2px solid #ffffff;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: mj-spin 0.8s linear infinite;\n}\n\n@keyframes mj-spin {\n    to { transform: rotate(360deg); }\n}\n\n.mj-checkout-consent {\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    margin: 0.75rem 0;\n    font-size: 0.875rem;\n    font-weight: 400;\n    line-height: 1.4;\n}\n.mj-checkout-consent input {\n    margin-top: 0.2rem;\n}\n\n/* Checkboxes keep their native size even when the host page styles every input\n   (e.g. `input { width: 100% }`): this rule is scoped to the widget, so it outranks\n   a plain element or class selector on the host page. */\n.mj-checkbox-label input[type=checkbox],\n.mj-checkout-consent input[type=checkbox] {\n    width: auto;\n    height: auto;\n    padding: 0;\n    border: 0;\n    flex: 0 0 auto;\n}\n\n.mj-checkout-promo {\n    margin: 0.75rem 0;\n}\n.mj-checkout-promo__label {\n    display: block;\n    font-size: 0.875rem;\n    margin-bottom: 0.25rem;\n}\n.mj-checkout-promo__row {\n    display: flex;\n    gap: 0.5rem;\n}\n.mj-checkout-promo__input {\n    flex: 1 1 auto;\n}\n.mj-checkout-promo__error {\n    color: var(--mj-error-color, #b91c1c);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__applied {\n    color: var(--mj-success-color, #15803d);\n    font-size: 0.875rem;\n    margin: 0.35rem 0 0;\n}\n.mj-checkout-promo__apply {\n    flex: 0 0 auto;\n    padding: 8px 14px;\n    background: transparent;\n    color: var(--mj-primary-color, #2563eb);\n    border: 1px solid var(--mj-border-color, #cbd5e1);\n    border-radius: var(--mj-border-radius, 8px);\n    font-size: 0.875rem;\n    font-weight: 600;\n    cursor: pointer;\n}\n.mj-checkout-promo__apply:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n"] }]
     }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], { config: [{
             type: Input
         }], distributionSlug: [{

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@mj-biz-apps/orders-ng",
   "type": "module",
-  "version": "5.34.0",
+  "version": "5.35.0",
   "description": "BizApps Orders Angular bootstrap - generated form components and module for the unified order-management Open App",
   "main": "dist/public-api.js",
   "types": "dist/public-api.d.ts",
@@ -15,7 +15,7 @@
   "author": "MemberJunction.com",
   "license": "BUSL-1.1",
   "dependencies": {
-    "@mj-biz-apps/orders-entities": "^5.34.0",
+    "@mj-biz-apps/orders-entities": "^5.35.0",
     "ag-grid-angular": "^35.0.1",
     "ag-grid-community": "^35.0.1"
   },