@tickean/checkout-elements 0.2.0 → 0.2.22

package/dist/index.mjs

@@ -41,101 +41,1136 @@ function formatMoney(amount, currency = "ARS", locale = "es-AR") {
 // src/appearance.ts
 var themeVars = {
   default: {
-    "--tickean-font-family": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+    "--tickean-font-family": '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
     "--tickean-bg": "#ffffff",
-    "--tickean-fg": "#111827",
-    "--tickean-muted": "#6b7280",
-    "--tickean-border": "#e5e7eb",
-    "--tickean-primary": "#111827",
+    "--tickean-surface": "#f0fdf4",
+    "--tickean-fg": "#052e16",
+    "--tickean-muted": "#64748b",
+    "--tickean-border": "#dcfce7",
+    "--tickean-primary": "#16a34a",
+    "--tickean-primary-hover": "#15803d",
     "--tickean-primary-fg": "#ffffff",
-    "--tickean-danger": "#b91c1c",
+    "--tickean-danger": "#dc2626",
+    "--tickean-success": "#10b981",
+    "--tickean-pass": "#7c3aed",
+    "--tickean-pass-bg": "#f5f3ff",
+    "--tickean-pass-border": "#ddd6fe",
     "--tickean-radius": "10px",
-    "--tickean-space": "12px",
-    "--tickean-input-bg": "#ffffff"
+    "--tickean-space": "8px",
+    "--tickean-input-bg": "#ffffff",
+    "--tickean-shadow": "0 1px 2px rgba(15, 23, 42, 0.05)",
+    "--tickean-shadow-lg": "0 8px 20px rgba(15, 23, 42, 0.07)",
+    "--tickean-focus": "rgba(22, 163, 74, 0.22)"
   },
   flat: {
-    "--tickean-font-family": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
-    "--tickean-bg": "#f8fafc",
+    "--tickean-font-family": '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    "--tickean-bg": "#ffffff",
+    "--tickean-surface": "#f8fafc",
     "--tickean-fg": "#0f172a",
     "--tickean-muted": "#64748b",
-    "--tickean-border": "#cbd5e1",
+    "--tickean-border": "#e2e8f0",
     "--tickean-primary": "#0f172a",
+    "--tickean-primary-hover": "#1e293b",
     "--tickean-primary-fg": "#ffffff",
     "--tickean-danger": "#dc2626",
-    "--tickean-radius": "0px",
-    "--tickean-space": "12px",
-    "--tickean-input-bg": "#ffffff"
+    "--tickean-success": "#0f766e",
+    "--tickean-radius": "10px",
+    "--tickean-space": "14px",
+    "--tickean-input-bg": "#ffffff",
+    "--tickean-shadow": "0 1px 2px rgba(15, 23, 42, 0.06)",
+    "--tickean-shadow-lg": "0 12px 28px rgba(15, 23, 42, 0.08)",
+    "--tickean-focus": "rgba(15, 23, 42, 0.18)"
   },
   night: {
-    "--tickean-font-family": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+    "--tickean-font-family": '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
     "--tickean-bg": "#0b1220",
+    "--tickean-surface": "#111827",
     "--tickean-fg": "#e5e7eb",
     "--tickean-muted": "#9ca3af",
     "--tickean-border": "#1f2937",
-    "--tickean-primary": "#e5e7eb",
+    "--tickean-primary": "#818cf8",
+    "--tickean-primary-hover": "#a5b4fc",
     "--tickean-primary-fg": "#0b1220",
     "--tickean-danger": "#f87171",
-    "--tickean-radius": "10px",
-    "--tickean-space": "12px",
-    "--tickean-input-bg": "#111827"
+    "--tickean-success": "#2dd4bf",
+    "--tickean-radius": "12px",
+    "--tickean-space": "14px",
+    "--tickean-input-bg": "#0f172a",
+    "--tickean-shadow": "0 2px 8px rgba(0, 0, 0, 0.35)",
+    "--tickean-shadow-lg": "0 18px 40px rgba(0, 0, 0, 0.45)",
+    "--tickean-focus": "rgba(129, 140, 248, 0.35)"
   }
 };
 var baseStyles = `
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+
 :host {
   display: block;
-  color: var(--tickean-fg, #111827);
-  font-family: var(--tickean-font-family, ui-sans-serif, system-ui, sans-serif);
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  color: var(--tickean-fg, #052e16);
+  font-family: var(--tickean-font-family, Inter, ui-sans-serif, system-ui, sans-serif);
   box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-size: 15px;
+}
+/* Only the top-level shell caps width; nested elements fill the wizard. */
+:host(tickean-checkout) {
+  max-width: min(100%, 560px);
+  margin: 0 auto;
 }
 *, *::before, *::after { box-sizing: border-box; }
+
+@keyframes tickean-fade-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes tickean-shimmer {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+@keyframes tickean-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+.reveal {
+  animation: tickean-fade-up 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.reveal-1 { animation-delay: 30ms; }
+.reveal-2 { animation-delay: 70ms; }
+.reveal-3 { animation-delay: 110ms; }
+.reveal-4 { animation-delay: 150ms; }
+.reveal-5 { animation-delay: 190ms; }
+.reveal-6 { animation-delay: 230ms; }
+/* After first paint, hosts can set data-animated to avoid re-animating on cart updates */
+:host([data-animated]) .reveal {
+  animation: none !important;
+}
+
 .wrap {
   background: var(--tickean-bg, #fff);
-  border: 1px solid var(--tickean-border, #e5e7eb);
+  border: 1px solid var(--tickean-border, #e3e8ee);
   border-radius: var(--tickean-radius, 10px);
-  padding: calc(var(--tickean-space, 12px) * 1.25);
+  padding: 10px;
+  box-shadow: var(--tickean-shadow);
 }
-.muted { color: var(--tickean-muted, #6b7280); font-size: 0.9rem; }
-.danger { color: var(--tickean-danger, #b91c1c); }
+.card {
+  background: var(--tickean-bg, #fff);
+  border: 1px solid var(--tickean-border, #e3e8ee);
+  border-radius: calc(var(--tickean-radius, 10px) - 2px);
+  padding: var(--tickean-space, 8px);
+  box-shadow: var(--tickean-shadow);
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+.card:hover {
+  border-color: color-mix(in srgb, var(--tickean-primary, #635bff) 35%, var(--tickean-border, #e3e8ee));
+  box-shadow: var(--tickean-shadow-lg);
+}
+.muted { color: var(--tickean-muted, #697386); font-size: 0.82rem; line-height: 1.35; }
+.danger { color: var(--tickean-danger, #df1b41); font-size: 0.82rem; }
+.success { color: var(--tickean-success, #0d9488); font-size: 0.82rem; }
 .row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
-.stack { display: grid; gap: var(--tickean-space, 12px); }
+.stack { display: grid; gap: 8px; }
+
+.section-title {
+  margin: 0;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--tickean-muted, #697386);
+}
+
 .ticket {
-  border: 1px solid var(--tickean-border, #e5e7eb);
-  border-radius: var(--tickean-radius, 10px);
-  padding: var(--tickean-space, 12px);
+  border: 1px solid var(--tickean-border, #dcfce7);
+  border-radius: calc(var(--tickean-radius, 10px) - 2px);
+  padding: 8px 10px;
+  background: var(--tickean-bg, #fff);
+  box-shadow: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+.ticket[data-selected="true"] {
+  border-color: var(--tickean-primary, #16a34a);
+  box-shadow: 0 0 0 3px var(--tickean-focus);
+}
+.ticket.pass {
+  border-color: var(--tickean-pass-border, #ddd6fe);
+  background: var(--tickean-pass-bg, #f5f3ff);
+}
+.ticket.pass[data-selected="true"] {
+  border-color: var(--tickean-pass, #7c3aed);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
+}
+.pass-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--tickean-pass, #7c3aed) 14%, transparent);
+  color: var(--tickean-pass, #7c3aed);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.promo-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--tickean-primary, #16a34a) 14%, transparent);
+  color: var(--tickean-primary, #16a34a);
+  font-size: 0.68rem;
+  font-weight: 700;
+}
+.promo-legend {
+  margin-top: 3px;
+  font-size: 0.72rem;
+  color: var(--tickean-primary, #16a34a);
+  font-weight: 550;
+}
+.stock-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 7px;
+  border-radius: 999px;
+  font-size: 0.68rem;
+  font-weight: 700;
+}
+.stock-badge.low-stock {
+  background: #fffbeb;
+  color: #b45309;
+  border: 1px solid #fde68a;
+}
+.stock-badge.sold-out {
+  background: #fef2f2;
+  color: #b91c1c;
+  border: 1px solid #fecaca;
+}
+.stock-badge.coming-soon {
+  background: #f1f5f9;
+  color: #475569;
+  border: 1px solid #e2e8f0;
+}
+.ticket.sold-out,
+.ticket.coming-soon {
+  opacity: 0.72;
+  background: var(--tickean-surface, #f8fafc);
+}
+.pay-methods {
+  display: grid;
+  gap: 8px;
+}
+.pay-method {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1.5px solid var(--tickean-border, #dcfce7);
+  background: var(--tickean-bg, #fff);
+  color: inherit;
+  box-shadow: none;
+  font-weight: 500;
+}
+.pay-method:hover:not(:disabled) {
+  transform: none;
+  background: var(--tickean-surface, #f0fdf4);
+}
+.pay-method:disabled {
+  opacity: 0.72;
+  cursor: not-allowed;
+}
+.pay-methods[data-locked="true"] {
+  pointer-events: none;
+  opacity: 0.85;
+}
+.pay-method[data-selected="true"] {
+  border-color: var(--tickean-primary, #16a34a);
+  box-shadow: 0 0 0 1px var(--tickean-primary, #16a34a);
+}
+.pay-method-radio {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  border-radius: 999px;
+  border: 2px solid var(--tickean-border, #cbd5e1);
+  flex-shrink: 0;
+}
+.pay-method[data-selected="true"] .pay-method-radio {
+  border-color: var(--tickean-primary, #16a34a);
+  box-shadow: inset 0 0 0 3px var(--tickean-primary, #16a34a);
+}
+.pay-method-copy {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+.pay-method-copy strong {
+  font-size: 0.88rem;
+}
+.pay-method-copy .muted {
+  font-size: 0.72rem;
+  line-height: 1.3;
+}
+.transfer-box {
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--tickean-border, #dcfce7);
+  background: var(--tickean-surface, #f0fdf4);
+}
+.transfer-box code {
+  font-size: 0.9rem;
+  font-weight: 700;
+  word-break: break-all;
+  color: var(--tickean-fg);
+}
+.transfer-amount {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 12px 10px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--tickean-brand, #16a34a) 10%, #fff);
+  border: 1px solid color-mix(in srgb, var(--tickean-brand, #16a34a) 28%, transparent);
+  text-align: center;
+}
+.transfer-amount-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--tickean-muted);
+}
+.transfer-amount-value {
+  font-size: 1.7rem;
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--tickean-brand, #16a34a);
+}
+.transfer-waiting {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.84rem;
+  font-weight: 600;
+  color: var(--tickean-fg);
+}
+.transfer-waiting-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--tickean-brand, #16a34a);
+  animation: tickean-pulse 1.2s ease-in-out infinite;
+}
+.copy-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 0;
+  border-top: 1px solid color-mix(in srgb, var(--tickean-border) 80%, transparent);
+}
+.copy-row:first-of-type {
+  border-top: none;
+  padding-top: 0;
+}
+.copy-row-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.copy-row-text .muted {
+  font-size: 0.72rem;
+}
+.copy-btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  width: auto;
+  min-height: 34px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--tickean-border);
+  background: #fff;
+  color: var(--tickean-fg);
+  font-size: 0.75rem;
+  font-weight: 650;
+  cursor: pointer;
+}
+.copy-btn:hover {
+  border-color: color-mix(in srgb, var(--tickean-brand, #16a34a) 45%, var(--tickean-border));
+}
+.pay-breakdown {
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--tickean-border);
+  background: var(--tickean-bg, #fff);
+}
+.pay-breakdown-title {
+  font-size: 0.82rem;
+}
+.pay-breakdown-total {
+  margin-top: 2px;
+  padding-top: 8px;
+  border-top: 1px solid var(--tickean-border);
+  font-size: 0.92rem;
+}
+.pay-method-locked {
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.ghost-btn {
+  width: auto;
+  min-height: 34px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--tickean-border);
+  background: transparent;
+  color: var(--tickean-fg);
+  font-size: 0.78rem;
+  font-weight: 650;
+  cursor: pointer;
+}
+.ghost-btn:hover {
+  background: color-mix(in srgb, var(--tickean-brand, #16a34a) 8%, transparent);
+}
+.terms-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 0.8rem;
+  line-height: 1.35;
+}
+.terms-row input {
+  width: auto;
+  margin-top: 2px;
+}
+.group-title {
+  margin: 4px 0 0;
+  font-size: 0.8rem;
+  font-weight: 650;
+  color: var(--tickean-fg);
+}
+.discount-inline {
+  margin-top: 2px;
+  width: 100%;
+}
+.discount-inline details {
+  width: 100%;
+  border: 1px solid var(--tickean-border);
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: var(--tickean-bg);
+}
+.discount-inline summary {
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--tickean-muted);
+  list-style: none;
+}
+.discount-inline summary::-webkit-details-marker { display: none; }
+.promo-unlock {
+  width: 100%;
+  border: 1px solid var(--tickean-border);
+  border-radius: 12px;
+  padding: 12px;
+  background: color-mix(in srgb, var(--tickean-muted, #697386) 6%, var(--tickean-bg, #fff));
+  display: grid;
+  gap: 10px;
+}
+.promo-unlock-copy { display: grid; gap: 2px; }
+.promo-unlock-title {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 650;
+  color: var(--tickean-fg);
+}
+.promo-unlock-hint {
+  margin: 0;
+  font-size: 0.78rem;
+  line-height: 1.35;
+}
+.promo-unlock-row {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+}
+.promo-unlock-row input {
+  flex: 1;
+  min-width: 0;
+  text-transform: uppercase;
+}
+.promo-unlock-row button {
+  flex-shrink: 0;
+}
+.promo-unlock-msg {
+  margin: 0;
+  font-size: 0.78rem;
+  line-height: 1.35;
+}
+.promo-unlock-msg.success {
+  color: var(--tickean-success, #0d9488);
+}
+.promo-unlock-msg.danger {
+  color: var(--tickean-danger, #df1b41);
+}
+.sheet-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+  display: grid;
+  place-items: end center;
+  z-index: 40;
+  padding: 0;
+  animation: tickean-fade-up 180ms ease both;
+}
+.sheet {
+  width: min(100%, 420px);
+  background: var(--tickean-bg, #fff);
+  border-radius: 14px 14px 0 0;
+  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
+  box-shadow: var(--tickean-shadow-lg);
+  display: grid;
+  gap: 10px;
+  animation: tickean-fade-up 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.sheet h3 {
+  margin: 0;
+  font-size: 1rem;
+  letter-spacing: -0.02em;
 }
-button, input {
+.otp-digits {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 5px;
+}
+.otp-digits input {
+  text-align: center;
+  font-weight: 700;
+  padding: 10px 0;
+  font-size: 16px;
+}
+.compact-aside .wrap {
+  padding: 8px 10px;
+  box-shadow: none;
+}
+
+button, input, select {
   font: inherit;
 }
 button {
-  border: 1px solid var(--tickean-border, #e5e7eb);
-  background: var(--tickean-primary, #111827);
+  border: 1px solid transparent;
+  background: var(--tickean-primary, #635bff);
   color: var(--tickean-primary-fg, #fff);
-  border-radius: calc(var(--tickean-radius, 10px) * 0.7);
-  padding: 8px 12px;
+  border-radius: 999px;
+  padding: 10px 14px;
   cursor: pointer;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  font-size: 0.92rem;
+  transition: background 150ms ease, transform 120ms ease, box-shadow 150ms ease, opacity 150ms ease;
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--tickean-primary, #635bff) 22%, transparent);
+}
+button:hover:not(:disabled) {
+  background: var(--tickean-primary-hover, #5851ea);
+  transform: translateY(-1px);
 }
+button:active:not(:disabled) { transform: translateY(0); }
 button.secondary {
   background: transparent;
-  color: var(--tickean-fg, #111827);
+  color: var(--tickean-fg, #0a2540);
+  border-color: var(--tickean-border, #e3e8ee);
+  box-shadow: none;
+}
+button.secondary:hover:not(:disabled) {
+  background: var(--tickean-surface, #f6f9fc);
+  border-color: color-mix(in srgb, var(--tickean-fg, #0a2540) 18%, var(--tickean-border, #e3e8ee));
+}
+button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
+button.ghost {
+  background: transparent;
+  color: var(--tickean-muted, #697386);
+  border: none;
+  box-shadow: none;
+  padding: 8px 10px;
+}
+
+.field {
+  display: grid;
+  gap: 4px;
 }
-button:disabled { opacity: 0.55; cursor: not-allowed; }
-input {
+.field > span {
+  font-size: 0.76rem;
+  font-weight: 500;
+  color: var(--tickean-fg, #0a2540);
+}
+.field-hint {
+  font-size: 0.72rem;
+  color: var(--tickean-muted, #697386);
+}
+input, select {
   width: 100%;
-  border: 1px solid var(--tickean-border, #e5e7eb);
+  border: 1px solid var(--tickean-border, #e3e8ee);
   background: var(--tickean-input-bg, #fff);
-  color: var(--tickean-fg, #111827);
-  border-radius: calc(var(--tickean-radius, 10px) * 0.7);
-  padding: 8px 10px;
+  color: var(--tickean-fg, #0a2540);
+  border-radius: 8px;
+  padding: 9px 10px;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+  outline: none;
+  font-size: 16px; /* prevent iOS zoom */
+}
+input:focus, select:focus {
+  border-color: var(--tickean-primary, #635bff);
+  box-shadow: 0 0 0 3px var(--tickean-focus);
+}
+.phone-row {
+  display: grid;
+  grid-template-columns: minmax(118px, 38%) 1fr;
+  gap: 8px;
+}
+.phone-country {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--tickean-border, #e3e8ee);
+  border-radius: 10px;
+  background: var(--tickean-input-bg, #fff);
+  padding: 0 8px 0 10px;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+.phone-country:focus-within {
+  border-color: var(--tickean-primary, #635bff);
+  box-shadow: 0 0 0 3px var(--tickean-focus);
+}
+.phone-country select {
+  border: none;
+  box-shadow: none;
+  padding: 10px 0;
+  background: transparent;
+  min-width: 0;
+}
+.phone-country select:focus { box-shadow: none; }
+.qty {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--tickean-surface, #f6f9fc);
+  border-radius: 999px;
+  padding: 2px;
+  border: 1px solid var(--tickean-border, #e3e8ee);
+}
+.qty button {
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
+  padding: 0;
+  border-radius: 999px;
+  box-shadow: none;
+  background: var(--tickean-bg, #fff);
+  color: var(--tickean-fg, #0a2540);
+  border: 1px solid var(--tickean-border, #e3e8ee);
+}
+.qty button:hover:not(:disabled) {
+  background: var(--tickean-surface, #f6f9fc);
+  transform: none;
+}
+.qty span {
+  min-width: 28px;
+  text-align: center;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.total[aria-live] {
+  font-weight: 700;
+  font-size: 1.05rem;
+  letter-spacing: -0.02em;
 }
-label { display: grid; gap: 4px; font-size: 0.85rem; }
-.qty button { min-width: 36px; }
-.total[aria-live] { font-weight: 700; font-size: 1.1rem; }
 .provider-slot {
-  min-height: 48px;
-  border: 1px dashed var(--tickean-border, #e5e7eb);
+  min-height: 56px;
+  border: 1px dashed var(--tickean-border, #e3e8ee);
+  border-radius: var(--tickean-radius, 12px);
+  padding: var(--tickean-space, 14px);
+  color: var(--tickean-muted, #697386);
+  background: var(--tickean-surface, #f6f9fc);
+}
+
+/* Stepped checkout shell */
+.checkout-steps {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  background:
+    radial-gradient(700px 220px at 8% -20%, color-mix(in srgb, var(--tickean-primary, #16a34a) 10%, transparent), transparent 55%),
+    var(--tickean-bg, #fff);
+  border: 1px solid var(--tickean-border, #dcfce7);
+  border-radius: calc(var(--tickean-radius, 10px) + 2px);
+  box-shadow: var(--tickean-shadow);
+}
+.checkout-steps.compact {
+  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
+}
+.checkout-header h2 {
+  margin: 0;
+  font-size: 0.98rem;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+}
+.checkout-header p {
+  margin: 2px 0 0;
+}
+.event-hero {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+}
+.event-flyer {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  object-fit: cover;
+  border: 1px solid var(--tickean-border, #dcfce7);
+  background: var(--tickean-surface, #f0fdf4);
+}
+.event-flyer-fallback {
+  display: grid;
+  place-items: center;
+  color: var(--tickean-primary, #16a34a);
+  font-size: 1rem;
+}
+.event-hero-copy {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+.event-dates {
+  margin: 0;
+  font-size: 0.78rem;
+  font-weight: 650;
+  color: var(--tickean-fg, #052e16);
+  letter-spacing: -0.01em;
+}
+.event-schedule {
+  margin: 2px 0 0;
+}
+.event-schedule summary {
+  cursor: pointer;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--tickean-muted, #64748b);
+  list-style: none;
+}
+.event-schedule summary::-webkit-details-marker { display: none; }
+.event-show-times {
+  list-style: none;
+  margin: 4px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 1px;
+}
+.event-show-times li {
+  font-size: 0.72rem;
+  color: var(--tickean-muted, #64748b);
+  line-height: 1.3;
+}
+.event-place {
+  margin: 0;
+  font-size: 0.72rem;
+}
+.progress {
+  height: 3px;
+  border-radius: 999px;
+  background: var(--tickean-surface, #f6f9fc);
+  overflow: hidden;
+  border: none;
+}
+.progress > span {
+  display: block;
+  height: 100%;
+  width: var(--tickean-progress, 25%);
+  background: linear-gradient(90deg, var(--tickean-primary, #635bff), color-mix(in srgb, var(--tickean-primary, #635bff) 65%, #fff));
+  border-radius: inherit;
+  transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.stepper {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 4px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.stepper-item {
+  display: grid;
+  gap: 3px;
+  justify-items: center;
+  font-size: 0.65rem;
+  color: var(--tickean-muted, #697386);
+  font-weight: 500;
+  text-align: center;
+}
+.stepper-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.stepper-dot {
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--tickean-border, #e3e8ee);
+  background: var(--tickean-input-bg, #fff);
+  font-weight: 650;
+  font-size: 0.68rem;
+  color: var(--tickean-muted, #697386);
+  transition: all 200ms ease;
+}
+.stepper-item[data-active="true"] {
+  color: var(--tickean-fg, #0a2540);
+  font-weight: 650;
+}
+.stepper-item[data-active="true"] .stepper-dot,
+.stepper-item[data-done="true"] .stepper-dot {
+  background: var(--tickean-primary, #635bff);
+  border-color: var(--tickean-primary, #635bff);
+  color: var(--tickean-primary-fg, #fff);
+}
+.step-caption {
+  margin: 0;
+  font-size: 0.72rem;
+}
+.checkout-layout {
+  display: grid;
+  gap: 8px;
+}
+.summary-drawer {
+  border: 1px solid var(--tickean-border, #dcfce7);
+  border-radius: 10px;
+  background: var(--tickean-bg, #fff);
+  overflow: hidden;
+}
+.summary-drawer-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px;
+  cursor: pointer;
+  list-style: none;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+.summary-drawer-toggle::-webkit-details-marker { display: none; }
+.summary-drawer-toggle::after {
+  content: "";
+  width: 0.45em;
+  height: 0.45em;
+  border-right: 1.5px solid var(--tickean-muted);
+  border-bottom: 1.5px solid var(--tickean-muted);
+  transform: rotate(45deg);
+  transition: transform 0.15s ease;
+  margin-left: 4px;
+  flex: 0 0 auto;
+}
+.summary-drawer[open] .summary-drawer-toggle::after {
+  transform: rotate(225deg);
+  margin-top: 4px;
+}
+.summary-drawer-toggle strong {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  margin-left: auto;
+}
+.summary-drawer-body {
+  display: grid;
+  gap: 6px;
+  padding: 0 8px 8px;
+  border-top: 1px solid var(--tickean-border, #e3e8ee);
+  width: 100%;
+}
+.summary-drawer-body > * {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+.summary-drawer:not([open]) .summary-drawer-body { display: none; }
+.checkout-sticky {
+  display: grid;
+  gap: 0;
+  background: color-mix(in srgb, var(--tickean-bg, #fff) 92%, transparent);
+  backdrop-filter: blur(10px);
+  border-top: 1px solid var(--tickean-border, #dcfce7);
+  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+.checkout-sticky[hidden] { display: none !important; }
+.checkout-dock {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px 4px;
+}
+.checkout-dock[hidden] { display: none !important; }
+.checkout-sticky .powered {
+  width: 100%;
+  margin: 0;
+  padding: 2px 10px 8px;
+}
+.dock-side {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.dock-side-start { justify-content: flex-start; }
+.dock-side-end { justify-content: flex-end; }
+.dock-total {
+  display: grid;
+  gap: 0;
+  min-width: 0;
+  line-height: 1.15;
+  text-align: center;
+  justify-items: center;
+}
+.dock-total .muted { font-size: 0.68rem; }
+.dock-total strong {
+  font-size: 0.98rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+.dock-back {
+  padding: 9px 12px;
+  min-height: 40px;
+  flex-shrink: 0;
+}
+.dock-next {
+  padding: 9px 16px;
+  min-height: 40px;
+  min-width: 112px;
+}
+.step-panels { display: grid; gap: 8px; width: 100%; }
+.step-panel[hidden] { display: none !important; }
+.step-panel {
+  width: 100%;
+  animation: tickean-fade-up 280ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.step-panel > * {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+.checkout-aside,
+.checkout-layout {
+  width: 100%;
+}
+.step-nav {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 2px;
+}
+.step-nav .spacer { flex: 1; }
+.done-card {
+  text-align: center;
+  padding: 16px 12px;
+  background: var(--tickean-surface, #f6f9fc);
   border-radius: var(--tickean-radius, 10px);
-  padding: var(--tickean-space, 12px);
-  color: var(--tickean-muted, #6b7280);
+  border: 1px solid var(--tickean-border, #e3e8ee);
+}
+.done-card h3 {
+  margin: 0 0 6px;
+  font-size: 1.15rem;
+  letter-spacing: -0.03em;
+}
+.done-icon {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 10px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--tickean-success, #0d9488) 16%, transparent);
+  color: var(--tickean-success, #0d9488);
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+.done-actions {
+  display: grid;
+  gap: 8px;
+  margin-top: 14px;
+}
+.done-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: var(--tickean-primary, #16a34a);
+  color: var(--tickean-primary-fg, #fff);
+  text-decoration: none;
+  font-weight: 650;
+  font-size: 0.92rem;
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--tickean-primary, #16a34a) 22%, transparent);
+}
+.done-primary:hover {
+  background: var(--tickean-primary-hover, #15803d);
+}
+.done-actions .secondary {
+  width: 100%;
+}
+.powered {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  margin: 0 auto;
+  padding: 4px 8px;
+  color: var(--tickean-muted, #697386);
+  text-decoration: none;
+  font-size: 0.7rem;
+  font-weight: 500;
+  transition: color 140ms ease;
+}
+.powered:hover { color: var(--tickean-fg, #0a2540); }
+.powered strong {
+  color: inherit;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.powered-mark {
+  width: 16px;
+  height: 16px;
+  border-radius: 5px;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
+}
+.loading-shell {
+  padding: calc(var(--tickean-space, 14px) * 1.5);
+  border-radius: calc(var(--tickean-radius, 12px) + 4px);
+  border: 1px solid var(--tickean-border, #e3e8ee);
+  background: var(--tickean-bg, #fff);
+  box-shadow: var(--tickean-shadow-lg);
+  display: grid;
+  gap: 14px;
+}
+.skeleton {
+  height: 14px;
+  border-radius: 8px;
+  background: linear-gradient(
+    90deg,
+    var(--tickean-surface, #f6f9fc) 0%,
+    color-mix(in srgb, var(--tickean-surface, #f6f9fc) 40%, #fff) 50%,
+    var(--tickean-surface, #f6f9fc) 100%
+  );
+  background-size: 200% 100%;
+  animation: tickean-shimmer 1.2s ease-in-out infinite;
+}
+.skeleton.lg { height: 22px; width: 55%; }
+.skeleton.md { height: 44px; }
+.skeleton.sm { width: 35%; }
+.loading-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--tickean-muted, #697386);
+  font-size: 0.9rem;
+  animation: tickean-pulse 1.4s ease-in-out infinite;
+}
+.summary-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 0.82rem;
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--tickean-success, #0d9488) 14%, transparent);
+  color: var(--tickean-success, #0d9488);
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+/* Mobile-first dock + density */
+@media (max-width: 640px) {
+  :host {
+    max-width: 100%;
+    font-size: 14.5px;
+  }
+  .checkout-steps {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    box-shadow: none;
+    padding: 8px 10px;
+  }
+  .checkout-steps.compact {
+    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
+  }
+  .step-caption,
+  .stepper-label {
+    display: none;
+  }
+  .stepper-item {
+    justify-items: center;
+  }
+  .checkout-sticky {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 35;
+  }
+  .phone-row {
+    grid-template-columns: minmax(104px, 34%) 1fr;
+    gap: 6px;
+  }
+}
+
+@media (min-width: 641px) {
+  .checkout-steps.compact {
+    padding-bottom: 10px;
+  }
+  .checkout-sticky {
+    position: sticky;
+    bottom: 0;
+    border: 1px solid var(--tickean-border, #dcfce7);
+    border-radius: 10px;
+    margin-top: 2px;
+    border-top: none;
+  }
+  .summary-drawer {
+    border: 1px solid var(--tickean-border, #dcfce7);
+    background: var(--tickean-bg, #fff);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal, .step-panel, .skeleton, .loading-label, .ticket, button {
+    animation: none !important;
+    transition: none !important;
+  }
 }
 `;
 function applyAppearance(host, appearance) {
@@ -179,16 +1214,92 @@ var catalogs = {
     verifyOtp: "Verificar",
     total: "Total",
     pay: "Confirmar compra",
+    creatingPayment: "Creando pago\u2026",
     transferInstructions: "Datos para transferir",
     alias: "Alias",
     cvu: "CVU",
     amount: "Monto",
     redirectPay: "Continuar al pago",
+    redirectingPay: "Te estamos llevando a Mercado Pago\u2026",
     providerPlaceholder: "Complet\xE1 el pago con tu proveedor",
     completed: "\xA1Compra completada!",
     error: "Ocurri\xF3 un error",
     emptyCart: "Eleg\xED al menos una entrada",
-    quantity: "Cantidad"
+    quantity: "Cantidad",
+    stepTickets: "Entradas",
+    stepBuyer: "Tus datos",
+    stepPayment: "Pago",
+    stepTransfer: "Transferir",
+    stepDone: "Listo",
+    next: "Continuar",
+    back: "Volver",
+    stepOf: "Paso {current} de {total}",
+    doneSubtitle: "Te enviamos la confirmaci\xF3n por email y WhatsApp.",
+    viewTickets: "Ver mis entradas",
+    buyAgain: "Seguir comprando",
+    country: "Pa\xEDs",
+    verified: "Identidad verificada",
+    sending: "Enviando\u2026",
+    verifying: "Verificando\u2026",
+    namePlaceholder: "Nombre y apellido",
+    poweredBy: "Powered by",
+    orderSummary: "Resumen",
+    itemsCount: "{count} \xEDtem(s)",
+    passes: "Pases",
+    discountToggle: "\xBFTen\xE9s un c\xF3digo?",
+    otpTitle: "Verific\xE1 tu tel\xE9fono",
+    otpHint: "Te enviamos un c\xF3digo de 6 d\xEDgitos",
+    resendOtp: "Reenviar c\xF3digo",
+    close: "Cerrar",
+    attendees: "Asistentes",
+    attendeeN: "Asistente {n}",
+    firstName: "Nombre",
+    lastName: "Apellido",
+    continueToOtp: "Enviar c\xF3digo",
+    viewSummary: "Ver resumen",
+    showTimes: "Horarios",
+    soldOut: "Agotado",
+    comingSoon: "Pr\xF3ximamente",
+    lastTicket: "\xA1\xDAltima!",
+    lastTickets: "\xA1\xDAltimas {count}!",
+    unlocked: "Desbloqueada",
+    promoCodeHint: "\xBFTen\xE9s un c\xF3digo? Ingresalo arriba para desbloquear entradas ocultas.",
+    promoUnlockHint: "Ingresalo antes de elegir entradas para desbloquear opciones exclusivas.",
+    discountCodeHint: "Ingresalo ac\xE1 para aplicar el descuento a tu compra.",
+    promoUnlockPlaceholder: "Ej: ARTISTAS",
+    promoUnlockSuccess: "C\xF3digo v\xE1lido. Se revelaron entradas exclusivas.",
+    promoUnlockSuccessNamed: "C\xF3digo v\xE1lido. Desbloqueaste: {names}.",
+    promoUnlockApplied: "C\xF3digo v\xE1lido. Se aplicar\xE1 al pagar.",
+    promoNxM: "{label}: llev\xE1 {buy}, pag\xE1 {pay}",
+    promoNth: "{label}: {percent}% off en la unidad {unit}",
+    paymentMethods: "M\xE9todo de pago",
+    choosePayment: "Eleg\xED un m\xE9todo",
+    payTransfer: "Transferencia bancaria",
+    payTransferDesc: "Transfer\xEDs desde tu banco o billetera. Las entradas se env\xEDan al confirmar el pago.",
+    payTransferHint: "Al confirmar te mostramos alias/CVU para transferir el monto exacto.",
+    payMercadoPago: "Mercado Pago",
+    payMercadoPagoDesc: "Tarjeta, dinero en cuenta o saldo de Mercado Pago.",
+    payCard: "Tarjeta",
+    payCardDesc: "D\xE9bito o cr\xE9dito, inclusive internacionales.",
+    payFree: "Gratis",
+    payFreeDesc: "Sin cargo para este evento.",
+    transferPendingHint: "Cuando acreditemos la transferencia te enviamos las entradas por email/WhatsApp.",
+    transferExactAmount: "Monto exacto a transferir",
+    transferWaiting: "Esperando confirmaci\xF3n de tu transferencia\u2026",
+    copy: "Copiar",
+    copied: "Copiado",
+    changePaymentMethod: "Cambiar m\xE9todo",
+    subtotal: "Subtotal",
+    serviceCharge: "Cargo de servicio",
+    promoDiscount: "Promoci\xF3n",
+    accountHolder: "Titular",
+    bank: "Banco",
+    acceptTerms: "Acepto los t\xE9rminos",
+    onboardHint: "No encontramos una cuenta con ese tel\xE9fono. Complet\xE1 tus datos para continuar.",
+    onboardRequired: "Nombre y email son obligatorios",
+    emailInvalid: "Email inv\xE1lido",
+    changePhone: "Cambiar tel\xE9fono",
+    welcomeBack: "Hola {name}, te enviamos un c\xF3digo para verificar."
   },
   "es-CL": {
     loading: "Cargando checkout\u2026",
@@ -203,16 +1314,92 @@ var catalogs = {
     verifyOtp: "Verificar",
     total: "Total",
     pay: "Confirmar compra",
+    creatingPayment: "Creando pago\u2026",
     transferInstructions: "Datos para transferir",
     alias: "Alias",
     cvu: "CVU",
     amount: "Monto",
     redirectPay: "Continuar al pago",
+    redirectingPay: "Te estamos llevando a Mercado Pago\u2026",
     providerPlaceholder: "Completa el pago con tu proveedor",
     completed: "\xA1Compra completada!",
     error: "Ocurri\xF3 un error",
     emptyCart: "Elige al menos una entrada",
-    quantity: "Cantidad"
+    quantity: "Cantidad",
+    stepTickets: "Entradas",
+    stepBuyer: "Tus datos",
+    stepPayment: "Pago",
+    stepTransfer: "Transferir",
+    stepDone: "Listo",
+    next: "Continuar",
+    back: "Volver",
+    stepOf: "Paso {current} de {total}",
+    doneSubtitle: "Te enviamos la confirmaci\xF3n por email y WhatsApp.",
+    viewTickets: "Ver mis entradas",
+    buyAgain: "Seguir comprando",
+    country: "Pa\xEDs",
+    verified: "Identidad verificada",
+    sending: "Enviando\u2026",
+    verifying: "Verificando\u2026",
+    namePlaceholder: "Nombre y apellido",
+    poweredBy: "Powered by",
+    orderSummary: "Resumen",
+    itemsCount: "{count} \xEDtem(s)",
+    passes: "Pases",
+    discountToggle: "\xBFTienes un c\xF3digo?",
+    otpTitle: "Verifica tu tel\xE9fono",
+    otpHint: "Te enviamos un c\xF3digo de 6 d\xEDgitos",
+    resendOtp: "Reenviar c\xF3digo",
+    close: "Cerrar",
+    attendees: "Asistentes",
+    attendeeN: "Asistente {n}",
+    firstName: "Nombre",
+    lastName: "Apellido",
+    continueToOtp: "Enviar c\xF3digo",
+    viewSummary: "Ver resumen",
+    showTimes: "Horarios",
+    soldOut: "Agotado",
+    comingSoon: "Pr\xF3ximamente",
+    lastTicket: "\xA1\xDAltima!",
+    lastTickets: "\xA1\xDAltimas {count}!",
+    unlocked: "Desbloqueada",
+    promoCodeHint: "\xBFTienes un c\xF3digo? Ingr\xE9salo arriba para desbloquear entradas ocultas.",
+    promoUnlockHint: "Ingr\xE9salo antes de elegir entradas para desbloquear opciones exclusivas.",
+    discountCodeHint: "Ingr\xE9salo ac\xE1 para aplicar el descuento a tu compra.",
+    promoUnlockPlaceholder: "Ej: ARTISTAS",
+    promoUnlockSuccess: "C\xF3digo v\xE1lido. Se revelaron entradas exclusivas.",
+    promoUnlockSuccessNamed: "C\xF3digo v\xE1lido. Desbloqueaste: {names}.",
+    promoUnlockApplied: "C\xF3digo v\xE1lido. Se aplicar\xE1 al pagar.",
+    promoNxM: "{label}: lleva {buy}, paga {pay}",
+    promoNth: "{label}: {percent}% off en la unidad {unit}",
+    paymentMethods: "M\xE9todo de pago",
+    choosePayment: "Elige un m\xE9todo",
+    payTransfer: "Transferencia bancaria",
+    payTransferDesc: "Transfieres desde tu banco o billetera. Las entradas se env\xEDan al confirmar el pago.",
+    payTransferHint: "Al confirmar te mostramos alias/CVU para transferir el monto exacto.",
+    payMercadoPago: "Mercado Pago",
+    payMercadoPagoDesc: "Tarjeta, dinero en cuenta o saldo de Mercado Pago.",
+    payCard: "Tarjeta",
+    payCardDesc: "D\xE9bito o cr\xE9dito, inclusive internacionales.",
+    payFree: "Gratis",
+    payFreeDesc: "Sin cargo para este evento.",
+    transferPendingHint: "Cuando acreditemos la transferencia te enviamos las entradas por email/WhatsApp.",
+    transferExactAmount: "Monto exacto a transferir",
+    transferWaiting: "Esperando confirmaci\xF3n de tu transferencia\u2026",
+    copy: "Copiar",
+    copied: "Copiado",
+    changePaymentMethod: "Cambiar m\xE9todo",
+    subtotal: "Subtotal",
+    serviceCharge: "Cargo de servicio",
+    promoDiscount: "Promoci\xF3n",
+    accountHolder: "Titular",
+    bank: "Banco",
+    acceptTerms: "Acepto los t\xE9rminos",
+    onboardHint: "No encontramos una cuenta con ese tel\xE9fono. Completa tus datos para continuar.",
+    onboardRequired: "Nombre y email son obligatorios",
+    emailInvalid: "Email inv\xE1lido",
+    changePhone: "Cambiar tel\xE9fono",
+    welcomeBack: "Hola {name}, te enviamos un c\xF3digo para verificar."
   },
   en: {
     loading: "Loading checkout\u2026",
@@ -227,22 +1414,105 @@ var catalogs = {
     verifyOtp: "Verify",
     total: "Total",
     pay: "Confirm purchase",
+    creatingPayment: "Creating payment\u2026",
     transferInstructions: "Transfer details",
     alias: "Alias",
     cvu: "CVU",
     amount: "Amount",
     redirectPay: "Continue to payment",
+    redirectingPay: "Taking you to Mercado Pago\u2026",
     providerPlaceholder: "Complete payment with your provider",
     completed: "Purchase completed!",
     error: "Something went wrong",
     emptyCart: "Select at least one ticket",
-    quantity: "Quantity"
+    quantity: "Quantity",
+    stepTickets: "Tickets",
+    stepBuyer: "Your details",
+    stepPayment: "Payment",
+    stepTransfer: "Transfer",
+    stepDone: "Done",
+    next: "Continue",
+    back: "Back",
+    stepOf: "Step {current} of {total}",
+    doneSubtitle: "We sent your confirmation by email and WhatsApp.",
+    viewTickets: "View my tickets",
+    buyAgain: "Buy again",
+    country: "Country",
+    verified: "Identity verified",
+    sending: "Sending\u2026",
+    verifying: "Verifying\u2026",
+    namePlaceholder: "Full name",
+    poweredBy: "Powered by",
+    orderSummary: "Summary",
+    itemsCount: "{count} item(s)",
+    passes: "Passes",
+    discountToggle: "Have a code?",
+    otpTitle: "Verify your phone",
+    otpHint: "We sent a 6-digit code",
+    resendOtp: "Resend code",
+    close: "Close",
+    attendees: "Attendees",
+    attendeeN: "Attendee {n}",
+    firstName: "First name",
+    lastName: "Last name",
+    continueToOtp: "Send code",
+    viewSummary: "View summary",
+    showTimes: "Show times",
+    soldOut: "Sold out",
+    comingSoon: "Coming soon",
+    lastTicket: "Last one!",
+    lastTickets: "Only {count} left!",
+    unlocked: "Unlocked",
+    promoCodeHint: "Have a code? Enter it above to unlock hidden tickets.",
+    promoUnlockHint: "Enter it before choosing tickets to unlock exclusive options.",
+    discountCodeHint: "Enter it here to apply the discount to your purchase.",
+    promoUnlockPlaceholder: "E.g. ARTISTAS",
+    promoUnlockSuccess: "Valid code. Exclusive tickets were revealed.",
+    promoUnlockSuccessNamed: "Valid code. Unlocked: {names}.",
+    promoUnlockApplied: "Valid code. It will apply at payment.",
+    promoNxM: "{label}: buy {buy}, pay {pay}",
+    promoNth: "{label}: {percent}% off on unit {unit}",
+    paymentMethods: "Payment method",
+    choosePayment: "Choose a method",
+    payTransfer: "Bank transfer",
+    payTransferDesc: "Pay from your bank or wallet. Tickets are sent once payment is confirmed.",
+    payTransferHint: "After confirming we\u2019ll show alias/CVU for the exact amount.",
+    payMercadoPago: "Mercado Pago",
+    payMercadoPagoDesc: "Card, account money, or Mercado Pago balance.",
+    payCard: "Card",
+    payCardDesc: "Debit or credit, including international cards.",
+    payFree: "Free",
+    payFreeDesc: "No charge for this event.",
+    transferPendingHint: "Once we confirm the transfer we\u2019ll send your tickets by email/WhatsApp.",
+    transferExactAmount: "Exact amount to transfer",
+    transferWaiting: "Waiting for your transfer confirmation\u2026",
+    copy: "Copy",
+    copied: "Copied",
+    changePaymentMethod: "Change method",
+    subtotal: "Subtotal",
+    serviceCharge: "Service fee",
+    promoDiscount: "Promotion",
+    accountHolder: "Account holder",
+    bank: "Bank",
+    acceptTerms: "I accept the terms",
+    onboardHint: "We couldn't find an account with that phone. Add your details to continue.",
+    onboardRequired: "Name and email are required",
+    emailInvalid: "Invalid email",
+    changePhone: "Change phone",
+    welcomeBack: "Hi {name}, we sent you a verification code."
   }
 };
 function t(locale, key) {
   const resolved = locale && catalogs[locale] ? locale : "es-AR";
   return catalogs[resolved][key];
 }
+function tFormat(locale, key, vars) {
+  let out = t(locale, key);
+  for (const [k, v] of Object.entries(vars)) {
+    out = out.replace(new RegExp(`\\{${k}\\}`, "g"), String(v));
+  }
+  return out;
+}
 function resolveLocale(locale) {
   if (locale && catalogs[locale]) return locale;
   return "es-AR";
@@ -332,85 +1602,499 @@ var TickeanElementBase = class extends NativeHTMLElement {
   }
 };
 
-// src/elements/ticket-selector.ts
-var TickeanTicketSelector = class extends TickeanElementBase {
-  renderBody() {
-    const state = this.state;
-    if (!state || state.loading) {
-      return `<div class="wrap muted">${t(this.elementLocale, "loading")}</div>`;
-    }
-    const options = (state.event?.shows || []).flatMap(
-      (show) => (show.showOptions || []).map((opt) => ({ ...opt, showTitle: show.title }))
-    );
-    return `
-      <div class="wrap stack" part="ticket-selector">
-        <strong>${t(this.elementLocale, "tickets")}</strong>
-        ${options.map((opt) => {
-      const qty = state.cart.find((c) => c.showOptionId === opt.id)?.amount || 0;
-      return `
-              <div class="ticket" data-option-id="${opt.id}">
-                <div class="row">
-                  <div>
-                    <div><strong>${escapeHtml(opt.name || opt.id)}</strong></div>
-                    <div class="muted">${escapeHtml(opt.showTitle || "")}</div>
-                  </div>
-                  <div>${this.money(Number(opt.price || 0))}</div>
-                </div>
-                <div class="row qty" style="margin-top:10px" role="group" aria-label="${t(this.elementLocale, "quantity")} ${escapeHtml(opt.name || "")}">
-                  <button type="button" class="secondary" data-action="dec" aria-label="-">\u2212</button>
-                  <span aria-live="polite">${qty}</span>
-                  <button type="button" class="secondary" data-action="inc" aria-label="+">+</button>
-                </div>
-              </div>
-            `;
-    }).join("")}
-      </div>
-    `;
+// src/event-meta.ts
+function parseInstant(input) {
+  if (input instanceof Date) {
+    return Number.isNaN(input.getTime()) ? null : input;
   }
-  afterRender() {
-    this.root.querySelectorAll("[data-option-id]").forEach((el) => {
-      const optionId = el.getAttribute("data-option-id");
-      const qty = this.state?.cart.find((c) => c.showOptionId === optionId)?.amount || 0;
-      el.querySelector('[data-action="dec"]')?.addEventListener("click", () => {
-        this.controller?.setCartItem(optionId, Math.max(0, qty - 1));
-      });
-      el.querySelector('[data-action="inc"]')?.addEventListener("click", () => {
-        this.controller?.setCartItem(optionId, qty + 1);
-      });
-    });
+  const value = typeof input === "string" ? input.trim() : "";
+  if (!value) return null;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+function isValidTimeZone(tz) {
+  if (!tz?.trim()) return false;
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone: tz }).format();
+    return true;
+  } catch {
+    return false;
   }
-};
-function escapeHtml(value) {
-  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-if (typeof customElements !== "undefined" && !customElements.get("tickean-ticket-selector")) {
+function resolveEventTimeZone(location) {
+  if (isValidTimeZone(location?.timeZone)) return location.timeZone.trim();
+  const country = (location?.country || "").toLowerCase();
+  if (country.includes("chile") || country === "cl") return "America/Santiago";
+  if (country.includes("m\xE9xico") || country.includes("mexico") || country === "mx") {
+    return "America/Mexico_City";
+  }
+  if (country.includes("united states") || country === "us") return "America/New_York";
+  return "America/Argentina/Buenos_Aires";
+}
+function formatInZone(input, timeZone, locale, options) {
+  const instant = parseInstant(input);
+  if (!instant) return "";
+  const tz = isValidTimeZone(timeZone) ? timeZone : "America/Argentina/Buenos_Aires";
+  return new Intl.DateTimeFormat(locale, { ...options, timeZone: tz }).format(instant);
+}
+function formatEventDate(input, timeZone, locale = "es-AR", options = {
+  weekday: "long",
+  day: "numeric",
+  month: "long",
+  year: "numeric"
+}) {
+  return formatInZone(input, timeZone, locale, options);
+}
+function formatEventTime(input, timeZone, locale = "es-AR") {
+  return formatInZone(input, timeZone, locale, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  });
+}
+function getCalendarDateParts(input, timeZone) {
+  const instant = parseInstant(input);
+  if (!instant) return null;
+  const tz = isValidTimeZone(timeZone) ? timeZone : "America/Argentina/Buenos_Aires";
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    timeZone: tz,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).formatToParts(instant);
+  const values = Object.fromEntries(parts.map((p) => [p.type, p.value]));
+  const year = Number(values.year);
+  const month = Number(values.month);
+  const day = Number(values.day);
+  if (![year, month, day].every(Number.isInteger)) return null;
+  const key = `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+  return { key, year, month, day };
+}
+function capitalize(label) {
+  if (!label) return label;
+  return label.charAt(0).toUpperCase() + label.slice(1);
+}
+function andWord(locale) {
+  return locale.toLowerCase().startsWith("en") ? "and" : "y";
+}
+function joinWithAnd(items, word) {
+  if (items.length <= 1) return items[0] || "";
+  if (items.length === 2) return `${items[0]} ${word} ${items[1]}`;
+  return `${items.slice(0, -1).join(", ")} ${word} ${items[items.length - 1]}`;
+}
+function monthName(year, month, locale) {
+  const probe = new Date(Date.UTC(year, month - 1, 1, 12, 0, 0));
+  return capitalize(
+    new Intl.DateTimeFormat(locale, { month: "long", timeZone: "UTC" }).format(probe)
+  );
+}
+function formatMultiDayShowDates(shows, timeZone, locale = "es-AR") {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const show of shows ?? []) {
+    const parts = getCalendarDateParts(show.date, timeZone);
+    if (!parts || byKey.has(parts.key)) continue;
+    byKey.set(parts.key, parts);
+  }
+  const days = [...byKey.values()].sort((a, b) => a.key.localeCompare(b.key));
+  if (days.length <= 1) return null;
+  const word = andWord(locale);
+  const isEs = word === "y";
+  const sameMonthYear = days.every(
+    (d) => d.month === days[0].month && d.year === days[0].year
+  );
+  if (sameMonthYear) {
+    const dayList = joinWithAnd(
+      days.map((d) => String(d.day)),
+      word
+    );
+    const month = monthName(days[0].year, days[0].month, locale);
+    return isEs ? `${dayList} de ${month} ${days[0].year}` : `${dayList} ${month} ${days[0].year}`;
+  }
+  return joinWithAnd(
+    days.map(
+      (d) => formatEventDate(
+        `${d.key}T12:00:00Z`,
+        "UTC",
+        locale,
+        { day: "numeric", month: "short" }
+      )
+    ),
+    word
+  );
+}
+function formatShowTimeRange(show, timeZone, locale = "es-AR") {
+  const start = formatEventTime(show?.date, timeZone, locale);
+  if (!start) return "";
+  const end = formatEventTime(show?.endDate, timeZone, locale);
+  if (end && end !== start) return `${start}\u2013${end}`;
+  return start;
+}
+function formatShowDayScheduleLabel(show, timeZone, locale = "es-AR", options) {
+  const datePart = formatEventDate(show.date, timeZone, locale, {
+    weekday: "short",
+    day: "numeric",
+    month: "short"
+  });
+  const timePart = formatShowTimeRange(show, timeZone, locale);
+  const parts = [];
+  if (options?.includeTitle && show.title?.trim()) parts.push(show.title.trim());
+  if (datePart) parts.push(datePart);
+  if (timePart) parts.push(timePart);
+  return parts.join(" \xB7 ");
+}
+function getEventFlyerUrl(images) {
+  const list = images || [];
+  if (!list.length) return null;
+  const main = list.find((img) => img.kind === "main") || list[0];
+  return main?.mobileUrl || main?.desktopUrl || main?.url || null;
+}
+function buildEventScheduleSummary(shows, timeZone, locale = "es-AR") {
+  const list = [...shows || []].sort((a, b) => {
+    const da = parseInstant(a.date)?.getTime() ?? 0;
+    const db = parseInstant(b.date)?.getTime() ?? 0;
+    return da - db;
+  });
+  const multi = formatMultiDayShowDates(list, timeZone, locale);
+  const earliest = list[0];
+  const dateLabel = multi || formatEventDate(earliest?.date, timeZone, locale, {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  }) || "";
+  const showLines = list.map(
+    (show) => formatShowDayScheduleLabel(show, timeZone, locale, {
+      includeTitle: list.length > 1
+    })
+  );
+  if (!multi && list.length === 1) {
+    const time = formatShowTimeRange(list[0], timeZone, locale);
+    return {
+      dateLabel: time ? `${dateLabel} \xB7 ${time}` : dateLabel,
+      showLines: []
+    };
+  }
+  return { dateLabel, showLines };
+}
+
+// src/elements/ticket-selector.ts
+function isAbono(opt) {
+  return Boolean(opt.accessScope && opt.accessScope !== "SINGLE_SHOW");
+}
+function availableStock(opt) {
+  if (typeof opt.availableStock === "number") return Math.max(0, opt.availableStock);
+  const stock = Number(opt.stock ?? 0);
+  const sold = Number(opt.sold ?? 0);
+  const reserved = Number(opt.reserved ?? 0);
+  return Math.max(0, stock - sold - reserved);
+}
+function isSoldOut(opt) {
+  if (opt.status === "SOLD_OUT" || opt.status === "INACTIVE") return true;
+  return availableStock(opt) <= 0;
+}
+function isComingSoon(opt) {
+  return opt.status === "COMING_SOON";
+}
+function activePromotion(opt) {
+  const nxm = opt.promotionNxM;
+  if (nxm?.enabled && nxm.buyQty && nxm.payQty) {
+    return { kind: "nxm", data: nxm };
+  }
+  const qty = opt.quantityDiscount;
+  if (qty?.enabled && typeof qty.percentOff === "number") {
+    return { kind: "qty", data: qty };
+  }
+  return null;
+}
+function promoLegend(opt, locale) {
+  const promo = activePromotion(opt);
+  if (!promo) return null;
+  if (promo.kind === "nxm") {
+    const label2 = promo.data.label || "Promo";
+    return tFormat(locale, "promoNxM", {
+      label: label2,
+      buy: promo.data.buyQty || 0,
+      pay: promo.data.payQty || 0
+    });
+  }
+  const label = promo.data.label || "Promo";
+  const unit = typeof promo.data.targetUnit === "number" && promo.data.targetUnit >= 2 ? promo.data.targetUnit : 2;
+  return tFormat(locale, "promoNth", {
+    label,
+    unit,
+    percent: promo.data.percentOff || 0
+  });
+}
+function promoBadge(opt) {
+  const promo = activePromotion(opt);
+  if (!promo) return null;
+  if (promo.kind === "nxm") {
+    return promo.data.label || `${promo.data.buyQty}x${promo.data.payQty}`;
+  }
+  return promo.data.label || `-${promo.data.percentOff}%`;
+}
+function passSubtitle(opt, showCount, locale) {
+  if (!isAbono(opt)) return "";
+  const covered = opt.accessScope === "ALL_EVENT_SHOWS" ? showCount : opt.coveredShowIds?.length || showCount;
+  const coverage = covered <= 1 ? "1 d\xEDa" : locale.startsWith("en") ? `${covered} days` : `${covered} d\xEDas`;
+  const issuance = opt.passIssuanceMode === "SINGLE_PASS" ? locale.startsWith("en") ? "1 QR for all days" : "1 QR para todos los d\xEDas" : locale.startsWith("en") ? "1 ticket per day" : "1 entrada por d\xEDa";
+  return `${locale.startsWith("en") ? "Pass" : "Pase"} \xB7 ${coverage} \xB7 ${issuance}`;
+}
+function maxQty(opt) {
+  const stock = availableStock(opt);
+  const cap = opt.maxPerPurchase && opt.maxPerPurchase > 0 ? opt.maxPerPurchase : stock;
+  return Math.max(0, Math.min(stock, cap || stock));
+}
+var TickeanTicketSelector = class extends TickeanElementBase {
+  constructor() {
+    super(...arguments);
+    this.firstPaint = true;
+  }
+  renderBody() {
+    const state = this.state;
+    if (!state || state.loading) {
+      return `<div class="wrap muted">${t(this.elementLocale, "loading")}</div>`;
+    }
+    const shows = state.event?.shows || [];
+    const showCount = shows.length;
+    const locale = this.elementLocale;
+    const timeZone = resolveEventTimeZone(
+      state.event?.location || {}
+    );
+    const allOptions = shows.flatMap(
+      (show) => (show.showOptions || []).map((opt) => ({
+        ...opt,
+        showId: show.id,
+        showTitle: show.title,
+        showDate: show.date,
+        showEndDate: show.endDate
+      }))
+    );
+    const abonoMap = /* @__PURE__ */ new Map();
+    for (const opt of allOptions) {
+      if (isAbono(opt) && !abonoMap.has(opt.id)) abonoMap.set(opt.id, opt);
+    }
+    const abonos = [...abonoMap.values()];
+    const dayOptions = allOptions.filter((opt) => !isAbono(opt));
+    const days = /* @__PURE__ */ new Map();
+    for (const opt of dayOptions) {
+      const key = opt.showId;
+      if (!days.has(key)) days.set(key, []);
+      days.get(key).push(opt);
+    }
+    const renderOption = (opt, pass = false) => {
+      const qty = state.cart.find((c) => c.showOptionId === opt.id)?.amount || 0;
+      const soldOut = isSoldOut(opt);
+      const comingSoon = isComingSoon(opt);
+      const remaining = availableStock(opt);
+      const lowStock = !soldOut && !comingSoon && remaining > 0 && remaining <= 10;
+      const max = maxQty(opt);
+      const subtitle = pass ? passSubtitle(opt, showCount, locale) : formatShowTimeRange(
+        { date: opt.showDate, endDate: opt.showEndDate },
+        timeZone,
+        locale
+      ) || opt.showTitle || "";
+      const legend = promoLegend(opt, locale);
+      const badge = promoBadge(opt);
+      const gated = opt.catalogVisibility === "PROMO_GATED";
+      let stockBadge = "";
+      if (soldOut) {
+        stockBadge = `<span class="stock-badge sold-out">${escapeHtml(t(locale, "soldOut"))}</span>`;
+      } else if (comingSoon) {
+        stockBadge = `<span class="stock-badge coming-soon">${escapeHtml(t(locale, "comingSoon"))}</span>`;
+      } else if (lowStock) {
+        stockBadge = remaining === 1 ? `<span class="stock-badge low-stock">${escapeHtml(t(locale, "lastTicket"))}</span>` : `<span class="stock-badge low-stock">${escapeHtml(tFormat(locale, "lastTickets", { count: remaining }))}</span>`;
+      }
+      return `
+        <div class="ticket ${pass ? "pass" : ""} ${soldOut ? "sold-out" : ""} ${comingSoon ? "coming-soon" : ""}"
+             data-option-id="${opt.id}" data-selected="${qty > 0}" data-sold-out="${soldOut}" data-max="${max}">
+          <div class="row">
+            <div style="min-width:0">
+              <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
+                <strong>${escapeHtml(opt.name || opt.id)}</strong>
+                ${pass ? `<span class="pass-badge">${locale.startsWith("en") ? "Pass" : "Pase"}</span>` : ""}
+                ${gated ? `<span class="pass-badge" style="color:var(--tickean-primary);background:color-mix(in srgb,var(--tickean-primary) 12%,transparent)">${escapeHtml(t(locale, "unlocked"))}</span>` : ""}
+                ${badge ? `<span class="promo-badge">${escapeHtml(badge)}</span>` : ""}
+                ${stockBadge}
+              </div>
+              <div class="muted" style="font-size:0.78rem;margin-top:2px">${escapeHtml(subtitle || "")}</div>
+              ${legend ? `<div class="promo-legend">${escapeHtml(legend)}</div>` : ""}
+            </div>
+            <div style="font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap">${this.money(Number(opt.price || 0))}</div>
+          </div>
+          <div class="row" style="margin-top:8px">
+            <span class="muted" style="font-size:0.78rem">${soldOut ? escapeHtml(t(locale, "soldOut")) : t(locale, "quantity")}</span>
+            ${soldOut || comingSoon ? `<span class="muted" style="font-size:0.78rem">\u2014</span>` : `<div class="qty" role="group" aria-label="${t(locale, "quantity")} ${escapeHtml(opt.name || "")}">
+                    <button type="button" class="secondary" data-action="dec" aria-label="-" ${qty <= 0 ? "disabled" : ""}>\u2212</button>
+                    <span data-qty aria-live="polite">${qty}</span>
+                    <button type="button" class="secondary" data-action="inc" aria-label="+" ${qty >= max ? "disabled" : ""}>+</button>
+                  </div>`}
+          </div>
+        </div>
+      `;
+    };
+    const dayBlocks = [...days.entries()].map(([showId, opts]) => {
+      const show = shows.find((s) => s.id === showId);
+      const schedule = show ? formatShowDayScheduleLabel(
+        {
+          date: show.date,
+          endDate: show.endDate,
+          title: show.title
+        },
+        timeZone,
+        locale,
+        { includeTitle: Boolean(show.title) }
+      ) : "";
+      const label = schedule || show?.title || t(locale, "tickets");
+      return `
+          <div class="stack" style="gap:8px">
+            <p class="group-title">${escapeHtml(label)}</p>
+            ${opts.map((o) => renderOption(o, false)).join("")}
+          </div>
+        `;
+    }).join("");
+    return `
+      <div class="stack" part="ticket-selector" style="gap:8px">
+        <p class="section-title">${t(locale, "tickets")}</p>
+        ${abonos.length ? `<div class="stack" style="gap:8px">
+                <p class="group-title" style="color:var(--tickean-pass)">${escapeHtml(t(locale, "passes"))}</p>
+                ${abonos.map((o) => renderOption(o, true)).join("")}
+              </div>` : ""}
+        ${days.size > 1 ? dayBlocks : dayOptions.map((o) => renderOption(o, false)).join("")}
+      </div>
+    `;
+  }
+  afterRender() {
+    if (this.firstPaint) {
+      this.firstPaint = false;
+      this.setAttribute("data-animated", "");
+    }
+    this.root.querySelectorAll("[data-option-id]").forEach((el) => {
+      if (el.dataset.soldOut === "true") return;
+      const optionId = el.getAttribute("data-option-id");
+      const max = Number(el.dataset.max || 99);
+      const qty = this.state?.cart.find((c) => c.showOptionId === optionId)?.amount || 0;
+      el.querySelector('[data-action="dec"]')?.addEventListener("click", () => {
+        this.controller?.setCartItem(optionId, Math.max(0, qty - 1));
+      });
+      el.querySelector('[data-action="inc"]')?.addEventListener("click", () => {
+        this.controller?.setCartItem(optionId, Math.min(max, qty + 1));
+      });
+    });
+  }
+};
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+if (typeof customElements !== "undefined" && !customElements.get("tickean-ticket-selector")) {
   customElements.define("tickean-ticket-selector", TickeanTicketSelector);
 }
 
 // src/elements/discount.ts
+function countUnlockedOptions(state) {
+  if (!state?.event?.shows) return 0;
+  let n = 0;
+  for (const show of state.event.shows) {
+    for (const opt of show.showOptions || []) {
+      if (opt.catalogVisibility === "PROMO_GATED") n += 1;
+    }
+  }
+  return n;
+}
+function shouldShowDiscountCode(params) {
+  if (params.discountCode) return true;
+  return params.discountsEnabled !== false;
+}
 var TickeanDiscount = class extends TickeanElementBase {
+  constructor() {
+    super(...arguments);
+    this.lastSuccess = null;
+  }
+  static get observedAttributes() {
+    return [...TickeanElementBase.observedAttributes, "mode"];
+  }
+  mode() {
+    return this.getAttribute("mode") === "unlock" ? "unlock" : "discount";
+  }
   renderBody() {
-    const code = this.state?.discountCode || "";
+    const state = this.state;
+    if (!state) return "";
+    const mode = this.mode();
+    const unlockedCount = countUnlockedOptions(state);
+    const discountsEnabled = state.session?.capabilities?.discounts;
+    const visible = mode === "unlock" ? Boolean(state.event?.hasPromoGatedShowOptions) || unlockedCount > 0 : shouldShowDiscountCode({
+      discountsEnabled,
+      discountCode: state.discountCode
+    });
+    if (!visible) return "";
+    const code = state.discountCode || "";
+    const locale = this.elementLocale;
+    const quoting = Boolean(state.isQuoting);
+    const error = state.error?.code === "discount_invalid" ? state.error.message : null;
+    const title = t(locale, "discountToggle");
+    const hint = mode === "unlock" ? t(locale, "promoUnlockHint") : t(locale, "discountCodeHint");
     return `
-      <div class="wrap stack" part="discount">
-        <label>
-          ${t(this.elementLocale, "discount")}
-          <input id="code" value="${escapeAttr(code)}" autocomplete="off" />
-        </label>
-        <button type="button" id="apply">${t(this.elementLocale, "apply")}</button>
-        ${this.state?.error ? `<div class="danger" role="alert">${escapeHtml2(this.state.error.message)}</div>` : ""}
+      <div class="promo-unlock" part="discount" data-mode="${mode}">
+        <div class="promo-unlock-copy">
+          <p class="promo-unlock-title">${escapeHtml2(title)}</p>
+          <p class="promo-unlock-hint muted">${escapeHtml2(hint)}</p>
+        </div>
+        <div class="promo-unlock-row">
+          <input
+            id="code"
+            value="${escapeAttr(code)}"
+            autocomplete="off"
+            spellcheck="false"
+            placeholder="${escapeAttr(t(locale, "promoUnlockPlaceholder"))}"
+            aria-label="${escapeAttr(t(locale, "discount"))}"
+            ${quoting ? "disabled" : ""}
+          />
+          <button type="button" class="secondary" id="apply" ${quoting ? "disabled" : ""}>
+            ${quoting ? escapeHtml2(t(locale, "verifying")) : escapeHtml2(t(locale, "apply"))}
+          </button>
+        </div>
+        ${error ? `<p class="promo-unlock-msg danger" role="alert">${escapeHtml2(error)}</p>` : this.lastSuccess ? `<p class="promo-unlock-msg success" role="status">${escapeHtml2(this.lastSuccess)}</p>` : ""}
       </div>
     `;
   }
   afterRender() {
     const input = this.root.querySelector("#code");
-    this.root.querySelector("#apply")?.addEventListener("click", async () => {
-      const value = input?.value?.trim() || "";
-      try {
-        await this.controller?.applyDiscountCode(value);
-      } catch {
+    input?.addEventListener("input", () => {
+      if (input) input.value = input.value.toUpperCase();
+    });
+    input?.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter") {
+        ev.preventDefault();
+        void this.applyCode();
       }
     });
+    this.root.querySelector("#apply")?.addEventListener("click", () => {
+      void this.applyCode();
+    });
+  }
+  async applyCode() {
+    const input = this.root.querySelector("#code");
+    const value = input?.value?.trim() || "";
+    if (!value) return;
+    this.lastSuccess = null;
+    try {
+      const quote = await this.controller?.applyDiscountCode(value);
+      const unlocked = quote?.unlockedShowOptions || [];
+      const names = unlocked.map((o) => o.name).filter((n) => Boolean(n));
+      const locale = this.elementLocale;
+      if (names.length > 0) {
+        this.lastSuccess = tFormat(locale, "promoUnlockSuccessNamed", {
+          names: names.join(", ")
+        });
+      } else if ((quote?.unlockedShowOptionIds || []).length > 0 || unlocked.length > 0) {
+        this.lastSuccess = t(locale, "promoUnlockSuccess");
+      } else {
+        this.lastSuccess = t(locale, "promoUnlockApplied");
+      }
+      this.render();
+    } catch {
+      this.lastSuccess = null;
+    }
   }
 };
 function escapeAttr(value) {
@@ -423,65 +2107,360 @@ if (typeof customElements !== "undefined" && !customElements.get("tickean-discou
   customElements.define("tickean-discount", TickeanDiscount);
 }
 
+// src/phone-countries.ts
+var PHONE_COUNTRIES = [
+  { iso: "AR", name: "Argentina", dial: "54", flag: "\u{1F1E6}\u{1F1F7}" },
+  { iso: "CL", name: "Chile", dial: "56", flag: "\u{1F1E8}\u{1F1F1}" },
+  { iso: "UY", name: "Uruguay", dial: "598", flag: "\u{1F1FA}\u{1F1FE}" },
+  { iso: "PY", name: "Paraguay", dial: "595", flag: "\u{1F1F5}\u{1F1FE}" },
+  { iso: "BO", name: "Bolivia", dial: "591", flag: "\u{1F1E7}\u{1F1F4}" },
+  { iso: "BR", name: "Brasil", dial: "55", flag: "\u{1F1E7}\u{1F1F7}" },
+  { iso: "PE", name: "Per\xFA", dial: "51", flag: "\u{1F1F5}\u{1F1EA}" },
+  { iso: "CO", name: "Colombia", dial: "57", flag: "\u{1F1E8}\u{1F1F4}" },
+  { iso: "EC", name: "Ecuador", dial: "593", flag: "\u{1F1EA}\u{1F1E8}" },
+  { iso: "MX", name: "M\xE9xico", dial: "52", flag: "\u{1F1F2}\u{1F1FD}" },
+  { iso: "US", name: "United States", dial: "1", flag: "\u{1F1FA}\u{1F1F8}" },
+  { iso: "ES", name: "Espa\xF1a", dial: "34", flag: "\u{1F1EA}\u{1F1F8}" },
+  { iso: "GB", name: "United Kingdom", dial: "44", flag: "\u{1F1EC}\u{1F1E7}" }
+];
+var byIso = new Map(PHONE_COUNTRIES.map((c) => [c.iso, c]));
+function countryFromIso(iso) {
+  const key = (iso || "").toUpperCase();
+  return byIso.get(key) || PHONE_COUNTRIES[0];
+}
+function countryFromLocale(locale) {
+  const l = (locale || "").toLowerCase();
+  if (l.startsWith("es-cl")) return countryFromIso("CL");
+  if (l.startsWith("es-mx")) return countryFromIso("MX");
+  if (l.startsWith("pt") || l.startsWith("pt-br")) return countryFromIso("BR");
+  if (l.startsWith("en-gb")) return countryFromIso("GB");
+  if (l.startsWith("en")) return countryFromIso("US");
+  if (l.startsWith("es")) return countryFromIso("AR");
+  return PHONE_COUNTRIES[0];
+}
+function toE164(dial, national) {
+  const digits = national.replace(/\D/g, "").replace(/^0+/, "");
+  const d = dial.replace(/\D/g, "");
+  return `+${d}${digits}`;
+}
+function nationalPlaceholder(iso) {
+  switch (iso) {
+    case "AR":
+      return "11 2345 6789";
+    case "CL":
+      return "9 1234 5678";
+    case "MX":
+      return "55 1234 5678";
+    case "US":
+      return "(555) 123-4567";
+    default:
+      return "Phone number";
+  }
+}
+async function detectCountryIso(apiBaseUrl) {
+  const base = (apiBaseUrl || "https://api.tickean.com").replace(/\/$/, "");
+  try {
+    const res = await fetch(`${base}/bff/marketplace/location/ip`, {
+      credentials: "omit"
+    });
+    if (!res.ok) return null;
+    const json = await res.json();
+    if (json?.available && json.countryCode) {
+      return String(json.countryCode).toUpperCase();
+    }
+  } catch {
+  }
+  return null;
+}
+
 // src/elements/buyer-verification.ts
 var TickeanBuyerVerification = class extends TickeanElementBase {
   constructor() {
     super(...arguments);
-    this.phone = "+5491112345678";
+    this.country = countryFromLocale("es-AR");
+    this.national = "";
     this.name = "";
     this.email = "";
     this.code = "";
+    this.geoResolved = false;
+    this.countryTouched = false;
+    this.step = "phone";
+    this.knownBuyer = null;
+    this.busy = null;
+    this.firstPaint = true;
+    this.formError = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    void this.resolveGeoCountry();
+  }
+  apiBaseUrl() {
+    return this.getAttribute("api-base-url") || this.closest("tickean-checkout")?.getAttribute("api-base-url") || "https://api.tickean.com";
+  }
+  async resolveGeoCountry() {
+    if (this.geoResolved || this.countryTouched) return;
+    this.country = countryFromLocale(this.elementLocale);
+    const iso = await detectCountryIso(this.apiBaseUrl());
+    if (!this.countryTouched && iso) {
+      this.country = countryFromIso(iso);
+      this.geoResolved = true;
+      this.render();
+    } else {
+      this.geoResolved = true;
+    }
+  }
+  fullPhone() {
+    return toE164(this.country.dial, this.national);
   }
   renderBody() {
     const verified = this.state?.buyerVerified;
-    return `
-      <div class="wrap stack" part="buyer-verification">
-        <label>
-          ${t(this.elementLocale, "phone")}
-          <input id="phone" type="tel" value="${escapeAttr2(this.phone)}" autocomplete="tel" />
-        </label>
-        <label>
-          ${t(this.elementLocale, "name")}
-          <input id="name" value="${escapeAttr2(this.name)}" autocomplete="name" />
-        </label>
-        <label>
-          ${t(this.elementLocale, "email")}
-          <input id="email" type="email" value="${escapeAttr2(this.email)}" autocomplete="email" />
-        </label>
-        <button type="button" class="secondary" id="send">${t(this.elementLocale, "sendOtp")}</button>
-        <label>
-          ${t(this.elementLocale, "otpCode")}
-          <input id="otp" inputmode="numeric" value="${escapeAttr2(this.code)}" autocomplete="one-time-code" />
+    const locale = this.elementLocale;
+    const options = PHONE_COUNTRIES.map(
+      (c) => `<option value="${c.iso}" ${c.iso === this.country.iso ? "selected" : ""}>${c.flag} +${c.dial}</option>`
+    ).join("");
+    if (verified) {
+      return `
+        <div class="wrap stack" part="buyer-verification">
+          <div class="badge">\u2713 ${escapeHtml3(t(locale, "verified"))}</div>
+          <div class="muted">${escapeHtml3(this.state?.buyer?.name || this.state?.buyer?.phone || this.fullPhone())}</div>
+        </div>
+      `;
+    }
+    const phoneBlock = `
+      <label class="field">
+        <span>${escapeHtml3(t(locale, "phone"))}</span>
+        <div class="phone-row">
+          <div class="phone-country">
+            <select id="country" aria-label="${escapeAttr2(t(locale, "country"))}" ${this.step !== "phone" ? "disabled" : ""}>${options}</select>
+          </div>
+          <input id="phone" type="tel" inputmode="tel" autocomplete="tel-national"
+            placeholder="${escapeAttr2(nationalPlaceholder(this.country.iso))}"
+            value="${escapeAttr2(this.national)}" ${this.step !== "phone" ? "disabled" : ""} />
+        </div>
+      </label>`;
+    const onboardBlock = this.step === "onboard" ? `
+        <p class="muted" style="margin:0;font-size:0.8rem">${escapeHtml3(t(locale, "onboardHint"))}</p>
+        <label class="field">
+          <span>${escapeHtml3(t(locale, "name"))}</span>
+          <input id="name" value="${escapeAttr2(this.name)}" autocomplete="name" placeholder="${escapeAttr2(t(locale, "namePlaceholder"))}" />
         </label>
-        <button type="button" id="verify">${t(this.elementLocale, "verifyOtp")}</button>
-        ${verified ? `<div class="muted" role="status">${escapeHtml3(this.state?.buyer?.name || this.state?.buyer?.phone || "OK")}</div>` : ""}
+        <label class="field">
+          <span>${escapeHtml3(t(locale, "email"))}</span>
+          <input id="email" type="email" value="${escapeAttr2(this.email)}" autocomplete="email" placeholder="name@email.com" />
+        </label>` : "";
+    const welcome = this.step === "otp" && this.knownBuyer?.name ? `<p class="muted" style="margin:0;font-size:0.8rem">${escapeHtml3(t(locale, "welcomeBack").replace("{name}", this.knownBuyer.name))}</p>` : "";
+    const primaryLabel = this.busy === "lookup" || this.busy === "send" ? t(locale, "sending") : this.step === "onboard" ? t(locale, "continueToOtp") : t(locale, "continueToOtp");
+    return `
+      <div class="wrap stack" part="buyer-verification" style="gap:10px">
+        <p class="section-title">${escapeHtml3(t(locale, "stepBuyer"))}</p>
+        ${phoneBlock}
+        ${onboardBlock}
+        ${welcome}
+        ${this.step === "phone" || this.step === "onboard" ? `<button type="button" id="continue" ${this.busy ? "disabled" : ""}>
+                ${escapeHtml3(primaryLabel)}
+              </button>` : ""}
+        ${this.step !== "phone" ? `<button type="button" class="ghost" id="change-phone">${escapeHtml3(t(locale, "changePhone"))}</button>` : ""}
+        ${this.formError ? `<div class="danger" role="alert">${escapeHtml3(this.formError)}</div>` : ""}
+        ${this.step === "otp" ? `<div class="sheet-backdrop" data-sheet>
+                <div class="sheet" role="dialog" aria-modal="true" aria-label="${escapeAttr2(t(locale, "otpTitle"))}">
+                  <div class="row">
+                    <h3>${escapeHtml3(t(locale, "otpTitle"))}</h3>
+                    <button type="button" class="ghost" data-close>${escapeHtml3(t(locale, "close"))}</button>
+                  </div>
+                  <p class="muted" style="margin:0">${escapeHtml3(t(locale, "otpHint"))}</p>
+                  <p class="muted" style="margin:0;font-weight:600">${escapeHtml3(this.fullPhone())}</p>
+                  <div class="otp-digits" id="otp-boxes">
+                    ${[0, 1, 2, 3, 4, 5].map(
+      (i) => `<input data-otp-i="${i}" inputmode="numeric" maxlength="1" autocomplete="${i === 0 ? "one-time-code" : "off"}" value="${escapeAttr2(this.code[i] || "")}" />`
+    ).join("")}
+                  </div>
+                  <button type="button" id="verify" ${this.busy === "verify" ? "disabled" : ""}>
+                    ${escapeHtml3(this.busy === "verify" ? t(locale, "verifying") : t(locale, "verifyOtp"))}
+                  </button>
+                  <button type="button" class="secondary" id="resend" ${this.busy === "send" ? "disabled" : ""}>
+                    ${escapeHtml3(t(locale, "resendOtp"))}
+                  </button>
+                </div>
+              </div>` : ""}
       </div>
     `;
   }
   afterRender() {
+    if (this.firstPaint) {
+      this.firstPaint = false;
+      this.setAttribute("data-animated", "");
+    }
+    const country = this.root.querySelector("#country");
     const phone = this.root.querySelector("#phone");
     const name = this.root.querySelector("#name");
     const email = this.root.querySelector("#email");
-    const otp = this.root.querySelector("#otp");
-    const sync = () => {
-      this.phone = phone?.value || "";
-      this.name = name?.value || "";
-      this.email = email?.value || "";
-      this.code = otp?.value || "";
+    const syncProfile = () => {
+      this.national = phone?.value || this.national;
+      this.name = name?.value ?? this.name;
+      this.email = email?.value ?? this.email;
+    };
+    country?.addEventListener("change", () => {
+      this.countryTouched = true;
+      this.country = countryFromIso(country.value);
+      syncProfile();
+      this.render();
+    });
+    phone?.addEventListener("input", syncProfile);
+    name?.addEventListener("input", syncProfile);
+    email?.addEventListener("input", syncProfile);
+    const sendOtp = async () => {
+      this.busy = "send";
+      this.formError = "";
+      this.render();
+      try {
+        await this.controller?.sendOtp(this.fullPhone());
+        this.step = "otp";
+        this.code = "";
+      } catch (err) {
+        this.formError = err?.message || t(this.elementLocale, "error");
+      } finally {
+        this.busy = null;
+        this.render();
+      }
+    };
+    const continueFlow = async () => {
+      syncProfile();
+      this.formError = "";
+      if (!this.national.replace(/\D/g, "")) {
+        this.formError = t(this.elementLocale, "phone");
+        this.render();
+        return;
+      }
+      if (this.step === "onboard") {
+        if (!this.name.trim() || !this.email.trim()) {
+          this.formError = t(this.elementLocale, "onboardRequired");
+          this.render();
+          return;
+        }
+        if (!/^\S+@\S+\.\S+$/.test(this.email.trim())) {
+          this.formError = t(this.elementLocale, "emailInvalid");
+          this.render();
+          return;
+        }
+        await sendOtp();
+        return;
+      }
+      this.busy = "lookup";
+      this.render();
+      try {
+        const result = await this.controller?.lookupBuyer(this.fullPhone());
+        if (result?.exists) {
+          this.knownBuyer = {
+            name: result.buyer?.name,
+            email: result.buyer?.email
+          };
+          this.name = result.buyer?.name || "";
+          this.email = result.buyer?.email || "";
+          await sendOtp();
+        } else {
+          this.knownBuyer = null;
+          this.step = "onboard";
+          this.busy = null;
+          this.render();
+        }
+      } catch (err) {
+        const status = err?.status;
+        const message = String(err?.message || "");
+        if (status === 404 || /Cannot POST .*buyer\/lookup/i.test(message)) {
+          this.knownBuyer = { name: void 0 };
+          await sendOtp();
+          return;
+        }
+        this.formError = message || t(this.elementLocale, "error");
+        this.busy = null;
+        this.render();
+      }
     };
-    this.root.querySelector("#send")?.addEventListener("click", async () => {
-      sync();
-      await this.controller?.sendOtp(this.phone);
+    this.root.querySelector("#continue")?.addEventListener("click", () => {
+      void continueFlow();
+    });
+    this.root.querySelector("#change-phone")?.addEventListener("click", () => {
+      this.step = "phone";
+      this.knownBuyer = null;
+      this.code = "";
+      this.formError = "";
+      this.render();
+    });
+    this.root.querySelector("#resend")?.addEventListener("click", () => {
+      void sendOtp();
+    });
+    this.root.querySelector("[data-close]")?.addEventListener("click", () => {
+      this.step = this.knownBuyer ? "phone" : "onboard";
+      this.render();
+    });
+    this.root.querySelector("[data-sheet]")?.addEventListener("click", (e) => {
+      if (e.target.hasAttribute("data-sheet")) {
+        this.step = this.knownBuyer ? "phone" : "onboard";
+        this.render();
+      }
     });
-    this.root.querySelector("#verify")?.addEventListener("click", async () => {
-      sync();
-      await this.controller?.verifyOtp({
-        phone: this.phone,
-        code: this.code,
-        name: this.name || void 0,
-        email: this.email || void 0
+    const boxes = [
+      ...this.root.querySelectorAll("[data-otp-i]")
+    ];
+    const readCode = () => boxes.map((b) => b.value.replace(/\D/g, "")).join("");
+    const verify = async () => {
+      this.code = readCode();
+      if (this.code.length < 4) return;
+      this.busy = "verify";
+      this.formError = "";
+      this.render();
+      try {
+        await this.controller?.verifyOtp({
+          phone: this.fullPhone(),
+          code: this.code,
+          name: this.knownBuyer?.name ? void 0 : this.name || void 0,
+          email: this.knownBuyer?.email ? void 0 : this.email || void 0
+        });
+      } catch (err) {
+        const message = String(err?.message || "");
+        if (/name and email are required/i.test(message)) {
+          this.knownBuyer = null;
+          this.step = "onboard";
+          this.formError = t(this.elementLocale, "onboardRequired");
+        } else {
+          this.formError = message || t(this.elementLocale, "error");
+        }
+      } finally {
+        this.busy = null;
+        this.render();
+      }
+    };
+    boxes.forEach((box, i) => {
+      box.addEventListener("input", () => {
+        const v = box.value.replace(/\D/g, "").slice(-1);
+        box.value = v;
+        if (v && boxes[i + 1]) boxes[i + 1].focus();
+        this.code = readCode();
+        if (this.code.length === 6) void verify();
+      });
+      box.addEventListener("keydown", (e) => {
+        if (e.key === "Backspace" && !box.value && boxes[i - 1]) {
+          boxes[i - 1].focus();
+        }
       });
+      box.addEventListener("paste", (e) => {
+        const text = e.clipboardData?.getData("text") || "";
+        const digits = text.replace(/\D/g, "").slice(0, 6);
+        if (!digits) return;
+        e.preventDefault();
+        digits.split("").forEach((d, idx) => {
+          if (boxes[idx]) boxes[idx].value = d;
+        });
+        this.code = readCode();
+        if (this.code.length === 6) void verify();
+      });
+    });
+    this.root.querySelector("#verify")?.addEventListener("click", () => {
+      void verify();
     });
+    if (this.step === "otp" && boxes[0]) {
+      boxes[0].focus();
+    }
   }
 };
 function escapeAttr2(value) {
@@ -491,62 +2470,438 @@ function escapeHtml3(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 if (typeof customElements !== "undefined" && !customElements.get("tickean-buyer-verification")) {
-  if (typeof customElements !== "undefined") customElements.define("tickean-buyer-verification", TickeanBuyerVerification);
+  customElements.define("tickean-buyer-verification", TickeanBuyerVerification);
+}
+
+// src/elements/attendees.ts
+var TickeanAttendees = class extends TickeanElementBase {
+  constructor() {
+    super(...arguments);
+    this.slots = [];
+    this.hydrated = false;
+    this.termsAccepted = false;
+  }
+  optionName(id) {
+    for (const show of this.state?.event?.shows || []) {
+      for (const opt of show.showOptions || []) {
+        if (opt.id === id) return opt.name || id;
+      }
+    }
+    return id;
+  }
+  rebuildSlots() {
+    const cart = this.state?.cart || [];
+    const prev = new Map(this.slots.map((s) => [s.key, s]));
+    const next = [];
+    for (const item of cart) {
+      for (let i = 0; i < item.amount; i++) {
+        const key = `${item.showOptionId}:${i}`;
+        const existing = prev.get(key);
+        next.push({
+          key,
+          showOptionId: item.showOptionId,
+          label: this.optionName(item.showOptionId),
+          firstName: existing?.firstName || "",
+          lastName: existing?.lastName || "",
+          email: existing?.email || "",
+          phone: existing?.phone || ""
+        });
+      }
+    }
+    this.slots = next;
+    this.emitAttendees();
+  }
+  emitAttendees() {
+    const settings = this.state?.event?.registrationSettings;
+    const attendees = this.slots.map((s) => ({
+      showOptionId: s.showOptionId,
+      firstName: s.firstName || void 0,
+      lastName: s.lastName || void 0,
+      email: settings?.requireAttendeeEmail ? s.email || void 0 : void 0,
+      phone: settings?.requireAttendeePhone ? s.phone || void 0 : void 0
+    }));
+    this.dispatchEvent(
+      new CustomEvent("attendees-change", {
+        detail: { attendees, complete: this.isComplete() },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  isComplete() {
+    const settings = this.state?.event?.registrationSettings;
+    if (!this.slots.length) return false;
+    if (settings?.terms?.required && !this.termsAccepted) return false;
+    return this.slots.every((s) => {
+      if (!s.firstName.trim() || !s.lastName.trim()) return false;
+      if (settings?.requireAttendeeEmail && !s.email.trim()) return false;
+      if (settings?.requireAttendeePhone && !s.phone.trim()) return false;
+      return true;
+    });
+  }
+  getAttendees() {
+    const termsRequired = Boolean(
+      this.state?.event?.registrationSettings?.terms?.required
+    );
+    return this.slots.map((s) => ({
+      showOptionId: s.showOptionId,
+      firstName: s.firstName || void 0,
+      lastName: s.lastName || void 0,
+      email: s.email || void 0,
+      phone: s.phone || void 0,
+      termsAccepted: termsRequired ? this.termsAccepted : void 0
+    }));
+  }
+  renderBody() {
+    if (!this.hydrated || this.slots.length === 0) {
+      this.rebuildSlots();
+      this.hydrated = true;
+    } else {
+      const expected = (this.state?.cart || []).reduce((n, i) => n + i.amount, 0);
+      if (expected !== this.slots.length) this.rebuildSlots();
+    }
+    const locale = this.elementLocale;
+    const settings = this.state?.event?.registrationSettings;
+    if (!this.state?.event?.collectAttendeeData) {
+      return `<div class="muted">${escapeHtml4(t(locale, "attendees"))}</div>`;
+    }
+    return `
+      <div class="stack" part="attendees" style="gap:10px">
+        <p class="section-title">${escapeHtml4(t(locale, "attendees"))}</p>
+        ${this.slots.map(
+      (slot, index) => `
+          <div class="wrap stack" style="gap:8px;padding:10px 12px" data-slot="${escapeAttr3(slot.key)}">
+            <div class="row">
+              <strong style="font-size:0.9rem">${escapeHtml4(tFormat(locale, "attendeeN", { n: index + 1 }))}</strong>
+              <span class="muted" style="font-size:0.78rem">${escapeHtml4(slot.label)}</span>
+            </div>
+            <div class="phone-row">
+              <label class="field">
+                <span>${escapeHtml4(t(locale, "firstName"))}</span>
+                <input data-f="firstName" value="${escapeAttr3(slot.firstName)}" autocomplete="given-name" />
+              </label>
+              <label class="field">
+                <span>${escapeHtml4(t(locale, "lastName"))}</span>
+                <input data-f="lastName" value="${escapeAttr3(slot.lastName)}" autocomplete="family-name" />
+              </label>
+            </div>
+            ${settings?.requireAttendeeEmail ? `<label class="field"><span>${escapeHtml4(t(locale, "email"))}</span>
+                    <input data-f="email" type="email" value="${escapeAttr3(slot.email)}" autocomplete="email" /></label>` : ""}
+            ${settings?.requireAttendeePhone ? `<label class="field"><span>${escapeHtml4(t(locale, "phone"))}</span>
+                    <input data-f="phone" type="tel" value="${escapeAttr3(slot.phone)}" autocomplete="tel" /></label>` : ""}
+          </div>
+        `
+    ).join("")}
+        ${settings?.terms?.required ? `<label class="terms-row">
+                <input type="checkbox" id="terms" ${this.termsAccepted ? "checked" : ""} />
+                <span>
+                  ${escapeHtml4(settings.terms.label || t(locale, "acceptTerms"))}
+                  ${settings.terms.pdfUrl ? ` <a href="${escapeAttr3(settings.terms.pdfUrl)}" target="_blank" rel="noopener noreferrer">PDF</a>` : ""}
+                </span>
+              </label>` : ""}
+      </div>
+    `;
+  }
+  afterRender() {
+    this.root.querySelectorAll("[data-slot]").forEach((el) => {
+      const key = el.getAttribute("data-slot");
+      const slot = this.slots.find((s) => s.key === key);
+      if (!slot) return;
+      el.querySelectorAll("[data-f]").forEach((input) => {
+        input.addEventListener("input", () => {
+          const field = input.getAttribute("data-f");
+          if (field === "firstName" || field === "lastName" || field === "email" || field === "phone") {
+            slot[field] = input.value;
+            this.emitAttendees();
+          }
+        });
+      });
+    });
+    this.root.querySelector("#terms")?.addEventListener("change", (e) => {
+      this.termsAccepted = Boolean(e.target.checked);
+      this.emitAttendees();
+    });
+  }
+};
+function escapeAttr3(value) {
+  return value.replace(/"/g, "&quot;");
+}
+function escapeHtml4(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+if (typeof customElements !== "undefined" && !customElements.get("tickean-attendees")) {
+  customElements.define("tickean-attendees", TickeanAttendees);
 }
 
 // src/elements/payment.ts
+var METHOD_ORDER = ["TRANSFER", "MERCADO_PAGO", "CARD", "FREE"];
+var METHOD_META = {
+  TRANSFER: { titleKey: "payTransfer", descKey: "payTransferDesc" },
+  MERCADO_PAGO: { titleKey: "payMercadoPago", descKey: "payMercadoPagoDesc" },
+  CARD: { titleKey: "payCard", descKey: "payCardDesc" },
+  FREE: { titleKey: "payFree", descKey: "payFreeDesc" }
+};
 var TickeanPayment = class extends TickeanElementBase {
+  constructor() {
+    super(...arguments);
+    this.busy = false;
+    this.selectedMethod = null;
+    this.copiedKey = null;
+    this.copiedTimer = null;
+    this.redirectedUrl = null;
+  }
   static get observedAttributes() {
-    return [...TickeanElementBase.observedAttributes, "payment-method", "currency"];
+    return [
+      ...TickeanElementBase.observedAttributes,
+      "payment-method",
+      "currency",
+      "view"
+    ];
+  }
+  disconnectedCallback() {
+    if (this.copiedTimer) clearTimeout(this.copiedTimer);
+    super.disconnectedCallback();
+  }
+  view() {
+    return this.getAttribute("view") === "transfer" ? "transfer" : "method";
+  }
+  methods() {
+    const fromEvent = this.state?.event?.availablePaymentMethods || [];
+    const attr = this.getAttribute("payment-method");
+    if (fromEvent.length) {
+      return [...fromEvent].sort(
+        (a, b) => METHOD_ORDER.indexOf(a) - METHOD_ORDER.indexOf(b)
+      );
+    }
+    return [attr || "TRANSFER"];
+  }
+  resolveMethod() {
+    const methods = this.methods();
+    const attr = this.getAttribute("payment-method");
+    const purchaseMethod = this.state?.purchase?.paymentMethod;
+    if (this.selectedMethod && methods.includes(this.selectedMethod)) {
+      return this.selectedMethod;
+    }
+    if (purchaseMethod && methods.includes(purchaseMethod)) return purchaseMethod;
+    if (attr && methods.includes(attr)) return attr;
+    if (methods.length === 1) return methods[0];
+    return this.selectedMethod || "";
   }
   renderBody() {
     const state = this.state;
-    const nextAction = state?.nextAction || { type: "none" };
-    const paymentMethod = this.getAttribute("payment-method") || state?.event?.availablePaymentMethods?.[0] || "TRANSFER";
+    const locale = this.elementLocale;
     const currency = this.getAttribute("currency") || "ARS";
+    const view = this.view();
     if (state?.phase === "completed") {
-      return `<div class="wrap" part="payment"><div role="status">${t(this.elementLocale, "completed")}</div></div>`;
+      return `<div class="wrap reveal" part="payment"><div class="badge" role="status">\u2713 ${t(locale, "completed")}</div></div>`;
+    }
+    if (view === "transfer") {
+      return this.renderTransferView(locale, currency);
+    }
+    return this.renderMethodView(locale, currency);
+  }
+  redirectUrl() {
+    const next = this.state?.nextAction;
+    if (next?.type === "redirect" && next.url) return next.url;
+    const payment = this.state?.payment;
+    return payment?.redirectUrl || payment?.initPoint || null;
+  }
+  renderMethodView(locale, currency) {
+    const state = this.state;
+    const methods = this.methods();
+    const paymentMethod = this.resolveMethod();
+    const multi = methods.length > 1;
+    const needsPick = multi && !paymentMethod;
+    const hasPurchase = Boolean(state?.purchase);
+    const redirectUrl = this.redirectUrl();
+    const isRedirecting = Boolean(redirectUrl) && (state?.phase === "requires_action" || state?.nextAction?.type === "redirect");
+    if (isRedirecting && redirectUrl) {
+      return `
+        <div class="stack" part="payment">
+          <p class="section-title reveal reveal-1">${t(locale, "stepPayment")}</p>
+          <div class="wrap stack reveal reveal-2" style="gap:12px;align-items:center;text-align:center">
+            <div class="transfer-waiting" role="status">
+              <span class="transfer-waiting-dot" aria-hidden="true"></span>
+              <span>${escapeHtml5(t(locale, "redirectingPay"))}</span>
+            </div>
+            <a class="muted" id="redirect" href="${escapeAttr4(redirectUrl)}" target="_top" rel="noopener noreferrer" style="font-size:0.78rem">
+              ${escapeHtml5(t(locale, "redirectPay"))}
+            </a>
+            <div data-payment-method="${escapeAttr4(paymentMethod)}" data-currency="${escapeAttr4(currency)}" hidden></div>
+          </div>
+        </div>
+      `;
     }
+    const locked = this.busy || state?.phase === "purchasing";
+    const canPay = Boolean(
+      state?.cart.length && state?.buyerVerified && !locked && paymentMethod
+    );
+    const methodPicker = `
+      <div class="pay-methods" role="radiogroup" aria-label="${escapeAttr4(t(locale, "paymentMethods"))}" data-locked="${locked}">
+        ${methods.map((method) => {
+      const meta = METHOD_META[method] || METHOD_META.TRANSFER;
+      const selected = method === paymentMethod;
+      return `
+              <button type="button" class="pay-method" role="radio" aria-checked="${selected}"
+                data-method="${escapeAttr4(method)}" data-selected="${selected}" ${locked ? "disabled" : ""}>
+                <span class="pay-method-radio" aria-hidden="true"></span>
+                <span class="pay-method-copy">
+                  <strong>${escapeHtml5(t(locale, meta.titleKey))}</strong>
+                  <span class="muted">${escapeHtml5(t(locale, meta.descKey))}</span>
+                </span>
+              </button>`;
+    }).join("")}
+      </div>`;
+    const prePayTransferHint = paymentMethod === "TRANSFER" ? `<p class="muted" style="margin:0;font-size:0.78rem">${escapeHtml5(t(locale, "payTransferHint"))}</p>` : "";
+    const payLabel = locked ? t(locale, "creatingPayment") : needsPick ? t(locale, "choosePayment") : t(locale, "pay");
+    return `
+      <div class="stack" part="payment">
+        <p class="section-title reveal reveal-1">${t(locale, "stepPayment")}</p>
+        <div class="wrap stack reveal reveal-2" style="gap:12px">
+          ${methodPicker}
+          ${prePayTransferHint}
+          <button type="button" id="pay" ${canPay ? "" : "disabled"}>
+            ${escapeHtml5(payLabel)}
+          </button>
+          <div data-payment-method="${escapeAttr4(paymentMethod)}" data-currency="${escapeAttr4(currency)}" hidden></div>
+        </div>
+      </div>
+    `;
+  }
+  renderTransferView(locale, currency) {
+    const nextAction = this.state?.nextAction || { type: "none" };
+    const paymentMethod = this.resolveMethod();
+    const methodTitle = t(
+      locale,
+      (METHOD_META[paymentMethod] || METHOD_META.TRANSFER).titleKey
+    );
     return `
-      <div class="wrap stack" part="payment">
-        ${renderNextAction(nextAction, this.elementLocale, (n) => this.money(n))}
-        ${!state?.purchase ? `<button type="button" id="pay" ${!state?.cart.length || !state?.buyerVerified ? "disabled" : ""}>${t(this.elementLocale, "pay")}</button>` : ""}
-        <div data-payment-method="${escapeAttr3(paymentMethod)}" data-currency="${escapeAttr3(currency)}" hidden></div>
+      <div class="stack" part="payment">
+        <p class="section-title reveal reveal-1">${t(locale, "stepTransfer")}</p>
+        <div class="wrap stack reveal reveal-2" style="gap:12px">
+          <div class="pay-method-locked row">
+            <div>
+              <div class="muted" style="font-size:0.72rem">${escapeHtml5(t(locale, "paymentMethods"))}</div>
+              <strong style="font-size:0.9rem">${escapeHtml5(methodTitle)}</strong>
+            </div>
+            <button type="button" class="ghost-btn" id="change-method">${escapeHtml5(t(locale, "changePaymentMethod"))}</button>
+          </div>
+          ${renderNextAction(nextAction, locale, (n) => this.money(n), this.copiedKey)}
+          ${nextAction.type === "display_instructions" ? `<div class="transfer-waiting" role="status">
+                  <span class="transfer-waiting-dot" aria-hidden="true"></span>
+                  <span>${escapeHtml5(t(locale, "transferWaiting"))}</span>
+                </div>
+                <p class="muted" style="margin:0;font-size:0.78rem">${escapeHtml5(t(locale, "transferPendingHint"))}</p>` : ""}
+          <div data-payment-method="${escapeAttr4(paymentMethod)}" data-currency="${escapeAttr4(currency)}" hidden></div>
+        </div>
       </div>
     `;
   }
   afterRender() {
-    const paymentMethod = this.getAttribute("payment-method") || this.state?.event?.availablePaymentMethods?.[0] || "TRANSFER";
     const currency = this.getAttribute("currency") || "ARS";
-    this.root.querySelector("#pay")?.addEventListener("click", async () => {
-      await this.controller?.purchaseAndPay({
-        paymentMethod,
-        currency
+    const view = this.view();
+    this.root.querySelector("#change-method")?.addEventListener("click", () => {
+      this.dispatchEvent(
+        new CustomEvent("tickean-change-payment-method", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    this.root.querySelectorAll("[data-method]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        if (btn.disabled || this.busy || this.state?.phase === "purchasing") return;
+        this.selectedMethod = btn.getAttribute("data-method");
+        this.render();
       });
     });
-    this.root.querySelector("#redirect")?.addEventListener("click", () => {
-      const url = this.state?.nextAction?.url;
-      if (url) window.location.assign(url);
+    this.root.querySelectorAll("[data-copy]").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        const value = btn.getAttribute("data-copy") || "";
+        const key = btn.getAttribute("data-copy-key") || value;
+        const ok = await copyText(value);
+        if (!ok) return;
+        this.copiedKey = key;
+        if (this.copiedTimer) clearTimeout(this.copiedTimer);
+        this.copiedTimer = setTimeout(() => {
+          this.copiedKey = null;
+          this.render();
+        }, 1600);
+        this.render();
+      });
     });
+    if (view === "method") {
+      this.root.querySelector("#pay")?.addEventListener("click", async () => {
+        const paymentMethod = this.resolveMethod();
+        if (!paymentMethod) return;
+        this.busy = true;
+        this.render();
+        try {
+          const root = this.getRootNode();
+          const host = root.host || this.closest("tickean-checkout");
+          const attendees = host?.getAttendees?.();
+          await this.controller?.purchaseAndPay({
+            paymentMethod,
+            currency,
+            attendees: attendees?.length ? attendees : void 0
+          });
+        } finally {
+          this.busy = false;
+          this.render();
+        }
+      });
+    }
+    const redirectUrl = this.redirectUrl();
+    if (redirectUrl && this.redirectedUrl !== redirectUrl && (this.state?.phase === "requires_action" || this.state?.nextAction?.type === "redirect")) {
+      this.redirectedUrl = redirectUrl;
+      navigateTopLevel(redirectUrl);
+    }
   }
 };
-function renderNextAction(nextAction, locale, money) {
+function navigateTopLevel(url) {
+  if (typeof window === "undefined" || !url) return;
+  try {
+    const topWin = window.top;
+    if (topWin && topWin !== window) {
+      topWin.location.assign(url);
+      return;
+    }
+  } catch {
+  }
+  window.location.assign(url);
+}
+function renderNextAction(nextAction, locale, money, copiedKey) {
   switch (nextAction.type) {
     case "display_instructions": {
       const instructions = nextAction.paymentInstructions || {};
+      const alias = instructions.alias ? String(instructions.alias) : "";
+      const cvu = instructions.cvu ? String(instructions.cvu) : instructions.accountIdentifier ? String(instructions.accountIdentifier) : "";
+      const amount = instructions.amount != null ? Number(instructions.amount) : null;
       return `
-        <div>
-          <strong>${t(locale, "transferInstructions")}</strong>
-          <div class="stack" style="margin-top:8px">
-            ${instructions.alias ? `<div><span class="muted">${t(locale, "alias")}</span>: <code>${escapeHtml4(String(instructions.alias))}</code></div>` : ""}
-            ${instructions.cvu ? `<div><span class="muted">${t(locale, "cvu")}</span>: <code>${escapeHtml4(String(instructions.cvu))}</code></div>` : ""}
-            ${instructions.amount != null ? `<div><span class="muted">${t(locale, "amount")}</span>: ${money(Number(instructions.amount))}</div>` : ""}
+        <div class="transfer-box stack" style="gap:12px">
+          ${amount != null && Number.isFinite(amount) ? `<div class="transfer-amount">
+                  <span class="transfer-amount-label">${escapeHtml5(t(locale, "transferExactAmount"))}</span>
+                  <strong class="transfer-amount-value">${escapeHtml5(money(amount))}</strong>
+                </div>` : ""}
+          <div class="stack" style="gap:8px">
+            <strong>${escapeHtml5(t(locale, "transferInstructions"))}</strong>
+            ${alias ? renderCopyRow(locale, "alias", alias, "alias", copiedKey) : ""}
+            ${cvu ? renderCopyRow(locale, "cvu", cvu, "cvu", copiedKey) : ""}
           </div>
         </div>
       `;
     }
-    case "redirect":
-      return `<button type="button" id="redirect">${t(locale, "redirectPay")}</button>`;
+    case "redirect": {
+      const url = nextAction.url || "";
+      return `
+        <div class="stack" style="gap:10px;align-items:center;text-align:center">
+          <div class="transfer-waiting" role="status">
+            <span class="transfer-waiting-dot" aria-hidden="true"></span>
+            <span>${escapeHtml5(t(locale, "redirectingPay"))}</span>
+          </div>
+          ${url ? `<a class="muted" id="redirect" href="${escapeAttr4(url)}" target="_top" rel="noopener noreferrer" style="font-size:0.78rem">${escapeHtml5(t(locale, "redirectPay"))}</a>` : ""}
+        </div>`;
+    }
     case "stripe_elements":
       return `<div class="provider-slot" data-provider="stripe" part="stripe-mount">${t(locale, "providerPlaceholder")} (Stripe)</div>`;
     case "airwallex_dropin":
@@ -556,14 +2911,60 @@ function renderNextAction(nextAction, locale, money) {
     case "fintoc_widget":
       return `<div class="provider-slot" data-provider="fintoc" part="fintoc-mount">${t(locale, "providerPlaceholder")} (Fintoc)</div>`;
     default:
-      return "";
+      return `<p class="muted" style="margin:0">${escapeHtml5(t(locale, "transferWaiting"))}</p>`;
   }
 }
-function escapeAttr3(value) {
+function renderCopyRow(locale, labelKey, value, copyKey, copiedKey) {
+  const copied = copiedKey === copyKey;
+  return `
+    <div class="copy-row">
+      <div class="copy-row-text">
+        <span class="muted">${escapeHtml5(t(locale, labelKey))}</span>
+        <code>${escapeHtml5(value)}</code>
+      </div>
+      <button type="button" class="copy-btn" data-copy="${escapeAttr4(value)}" data-copy-key="${escapeAttr4(copyKey)}" aria-label="${escapeAttr4(
+    copied ? t(locale, "copied") : t(locale, "copy")
+  )}">
+        ${copied ? checkIcon() : copyIcon()}
+        <span>${escapeHtml5(copied ? t(locale, "copied") : t(locale, "copy"))}</span>
+      </button>
+    </div>
+  `;
+}
+function copyIcon() {
+  return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10" stroke="currentColor" stroke-width="2"/></svg>`;
+}
+function checkIcon() {
+  return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+}
+async function copyText(value) {
+  try {
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(value);
+      return true;
+    }
+  } catch {
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = value;
+    ta.setAttribute("readonly", "");
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+function escapeAttr4(value) {
   return value.replace(/"/g, "&quot;");
 }
-function escapeHtml4(value) {
-  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function escapeHtml5(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 if (typeof customElements !== "undefined" && !customElements.get("tickean-payment")) {
   customElements.define("tickean-payment", TickeanPayment);
@@ -571,34 +2972,70 @@ if (typeof customElements !== "undefined" && !customElements.get("tickean-paymen
 
 // src/elements/order-summary.ts
 var TickeanOrderSummary = class extends TickeanElementBase {
+  optionName(id) {
+    for (const show of this.state?.event?.shows || []) {
+      for (const opt of show.showOptions || []) {
+        if (opt.id === id) return opt.name || id;
+      }
+    }
+    return id;
+  }
   renderBody() {
-    const total = this.state?.quote?.totalPrice || 0;
+    const total = Number(this.state?.quote?.totalPrice) || Number(this.state?.purchase?.totalPrice) || 0;
     const items = this.state?.cart || [];
+    const locale = this.elementLocale;
+    const breakdown = this.state?.quote?.pricingBreakdown || {};
+    const promo = Number(breakdown.promotionDiscountTotal || 0);
+    const code = Number(breakdown.codeDiscountTotal || 0);
+    const service = Number(breakdown.serviceCharge || 0);
+    const subtotal = Number(breakdown.subtotalBase) || Math.max(0, total - service + promo + code);
     return `
-      <div class="wrap stack" part="order-summary">
-        <div class="row">
-          <span>${t(this.elementLocale, "total")}</span>
+      <div class="wrap stack reveal reveal-2" part="order-summary">
+        <p class="section-title">${t(locale, "orderSummary")}</p>
+        <div class="summary-line">
+          <span class="muted">${tFormat(locale, "itemsCount", { count: items.length })}</span>
+          ${this.state?.isQuoting ? `<span class="muted">${t(locale, "loading")}</span>` : ""}
+        </div>
+        ${items.length === 0 ? `<div class="muted">${t(locale, "emptyCart")}</div>` : items.map(
+      (item) => `<div class="summary-line"><span>${escapeHtml6(this.optionName(item.showOptionId))}</span><span class="muted">\xD7${item.amount}</span></div>`
+    ).join("")}
+        ${items.length && subtotal > 0 ? `<div class="summary-line"><span class="muted">${escapeHtml6(t(locale, "subtotal"))}</span><span>${escapeHtml6(this.money(subtotal))}</span></div>` : ""}
+        ${promo > 0 ? `<div class="summary-line"><span class="muted">${escapeHtml6(t(locale, "promoDiscount"))}</span><span>\u2212${escapeHtml6(this.money(promo))}</span></div>` : ""}
+        ${code > 0 ? `<div class="summary-line"><span class="muted">${escapeHtml6(t(locale, "discount"))}</span><span>\u2212${escapeHtml6(this.money(code))}</span></div>` : ""}
+        ${service > 0 ? `<div class="summary-line"><span class="muted">${escapeHtml6(t(locale, "serviceCharge"))}</span><span>${escapeHtml6(this.money(service))}</span></div>` : ""}
+        <div class="row" style="margin-top:2px;padding-top:8px;border-top:1px solid var(--tickean-border)">
+          <span style="font-weight:600">${t(locale, "total")}</span>
           <span class="total" aria-live="polite">${this.money(total)}</span>
         </div>
-        ${items.length === 0 ? `<div class="muted">${t(this.elementLocale, "emptyCart")}</div>` : `<div class="muted">${items.length} item(s)</div>`}
-        ${this.state?.isQuoting ? `<div class="muted">${t(this.elementLocale, "loading")}</div>` : ""}
       </div>
     `;
   }
 };
+function escapeHtml6(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 if (typeof customElements !== "undefined" && !customElements.get("tickean-order-summary")) {
-  if (typeof customElements !== "undefined") customElements.define("tickean-order-summary", TickeanOrderSummary);
+  customElements.define("tickean-order-summary", TickeanOrderSummary);
 }
 
 // src/elements/checkout.ts
 import {
   createCheckoutController
 } from "@tickean/checkout-js";
+var TICKEAN_HOME = "https://tickean.com";
+var TICKEAN_TICKETS_URL = "https://mi.tickean.com/tickets";
 var TickeanCheckout = class extends TickeanElementBase {
   constructor() {
     super(...arguments);
     this.ownedControllerId = null;
     this.ownedController = null;
+    this.stepIndex = 0;
+    this.shellMounted = false;
+    this.shellLayout = null;
+    this.attendees = [];
+    this.attendeesComplete = false;
+    /** After "Cambiar método", stay on payment until they confirm again. */
+    this.suppressTransferAutoAdvance = false;
   }
   static get observedAttributes() {
     return [
@@ -609,81 +3046,501 @@ var TickeanCheckout = class extends TickeanElementBase {
       "return-url",
       "demo",
       "payment-method",
-      "currency"
+      "currency",
+      "layout"
     ];
   }
+  /** Used by payment element / hosts. */
+  getAttendees() {
+    const el = this.root.querySelector("tickean-attendees");
+    if (el?.getAttendees) return el.getAttendees();
+    return this.attendees;
+  }
   connectedCallback() {
     this.ensureController();
     super.connectedCallback();
+    this.addEventListener("attendees-change", ((e) => {
+      this.attendees = e.detail?.attendees || [];
+      this.attendeesComplete = Boolean(e.detail?.complete);
+      this.syncStepsChrome();
+    }));
+    this.addEventListener("tickean-change-payment-method", (() => {
+      this.suppressTransferAutoAdvance = true;
+      this.controller?.changePaymentMethod?.();
+      const paymentIdx = this.stepIds().indexOf("payment");
+      if (paymentIdx >= 0) {
+        this.stepIndex = paymentIdx;
+        this.syncStepsChrome();
+      }
+    }));
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this.ownedControllerId) {
-      this.ownedController?.dispose();
-      unregisterController(this.ownedControllerId);
-      this.ownedControllerId = null;
-      this.ownedController = null;
-    }
+    this.teardownOwnedController();
+    this.shellMounted = false;
+    this.shellLayout = null;
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (["publishable-key", "event-slug", "api-base-url", "return-url", "demo"].includes(
       name
     ) && oldValue !== newValue) {
-      if (this.ownedControllerId) {
-        this.ownedController?.dispose();
-        unregisterController(this.ownedControllerId);
-        this.ownedControllerId = null;
-        this.ownedController = null;
+      if (this.isConnected) {
+        this.teardownOwnedController();
+        this.ensureController();
       }
-      this.ensureController();
+    }
+    if (name === "layout" && oldValue !== newValue) {
+      this.shellMounted = false;
+      this.shellLayout = null;
+      this.stepIndex = 0;
     }
     super.attributeChangedCallback(name, oldValue, newValue);
   }
+  get layout() {
+    const raw = (this.getAttribute("layout") || "steps").toLowerCase();
+    return raw === "stacked" ? "stacked" : "steps";
+  }
+  needsAttendees() {
+    return Boolean(this.state?.event?.collectAttendeeData);
+  }
+  needsTransferStep() {
+    return this.state?.nextAction?.type === "display_instructions";
+  }
+  stepIds() {
+    const ids = ["tickets", "buyer"];
+    if (this.needsAttendees()) ids.push("attendees");
+    ids.push("payment");
+    if (this.needsTransferStep()) ids.push("transfer");
+    ids.push("done");
+    return ids;
+  }
+  currentStep() {
+    return this.stepIds()[this.stepIndex] || "tickets";
+  }
+  teardownOwnedController() {
+    this.ownedController?.dispose();
+    if (this.ownedControllerId) unregisterController(this.ownedControllerId);
+    this.ownedControllerId = null;
+    this.ownedController = null;
+    if (this.hasAttribute(controllerAttr())) this.removeAttribute(controllerAttr());
+  }
   ensureController() {
-    if (this.getAttribute(controllerAttr())) return;
+    if (this.ownedController) return;
     const eventSlug = this.getAttribute("event-slug");
     const publishableKey = this.getAttribute("publishable-key") || "";
     if (!eventSlug) return;
+    if (this.getAttribute(controllerAttr())) this.removeAttribute(controllerAttr());
+    const resumeCode = typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("resume") || void 0 : void 0;
     const options = {
       publishableKey,
       eventSlug,
       apiBaseUrl: this.getAttribute("api-base-url") || void 0,
       returnUrl: this.getAttribute("return-url") || void 0,
+      resumeCode: resumeCode || void 0,
       demo: this.hasAttribute("demo"),
       persistence: false
     };
     this.ownedController = createCheckoutController(options);
     this.ownedControllerId = registerController(this.ownedController);
     this.setAttribute(controllerAttr(), this.ownedControllerId);
+    if (resumeCode && typeof window !== "undefined") {
+      void this.ownedController.ready.then(() => {
+        const snap = this.ownedController?.getSnapshot();
+        if (!snap || snap.error) return;
+        try {
+          const url = new URL(window.location.href);
+          if (url.searchParams.has("resume")) {
+            url.searchParams.delete("resume");
+            window.history.replaceState(
+              {},
+              "",
+              `${url.pathname}${url.search}${url.hash}`
+            );
+          }
+        } catch {
+        }
+        const steps = this.stepIds();
+        let target = "tickets";
+        if (snap.phase === "completed") target = "done";
+        else if (snap.nextAction?.type === "display_instructions" || snap.phase === "processing") {
+          target = this.needsTransferStep() ? "transfer" : "payment";
+        } else if (snap.purchase) target = "payment";
+        else if (snap.buyerVerified) {
+          target = this.needsAttendees() ? "attendees" : "payment";
+        } else if ((snap.cart?.length || 0) > 0) target = "buyer";
+        const idx = steps.indexOf(target);
+        if (idx >= 0) {
+          this.stepIndex = idx;
+          this.syncStepsChrome();
+        }
+      });
+    }
+  }
+  restartCheckout() {
+    this.teardownOwnedController();
+    this.stepIndex = 0;
+    this.shellMounted = false;
+    this.shellLayout = null;
+    this.suppressTransferAutoAdvance = false;
+    this.attendees = [];
+    this.attendeesComplete = false;
+    this.ensureController();
+    this.bindController();
+    this.render();
+  }
+  poweredByHtml(locale) {
+    return `
+      <a class="powered" href="${TICKEAN_HOME}" target="_blank" rel="noopener noreferrer">
+        <span class="powered-mark" aria-hidden="true"></span>
+        <span>${escapeHtml7(t(locale, "poweredBy"))} <strong>Tickean</strong></span>
+      </a>
+    `;
+  }
+  eventHeaderHtml() {
+    const event = this.state?.event;
+    if (!event) return "";
+    const locale = this.elementLocale;
+    const location = event.location || {};
+    const timeZone = resolveEventTimeZone(location);
+    const flyer = getEventFlyerUrl(event.images);
+    const { dateLabel, showLines } = buildEventScheduleSummary(
+      event.shows || [],
+      timeZone,
+      locale
+    );
+    const place = [location.venueName, location.city].filter(Boolean).join(" \xB7 ");
+    return `
+      <div class="checkout-header">
+        <div class="event-hero">
+          ${flyer ? `<img class="event-flyer" src="${escapeAttr5(flyer)}" alt="${escapeAttr5(event.title || "")}" loading="lazy" />` : `<div class="event-flyer event-flyer-fallback" aria-hidden="true">\u2726</div>`}
+          <div class="event-hero-copy">
+            <h2>${escapeHtml7(event.title || "")}</h2>
+            ${dateLabel ? `<p class="event-dates">${escapeHtml7(dateLabel)}</p>` : ""}
+            ${place ? `<p class="muted event-place">${escapeHtml7(place)}</p>` : ""}
+            ${showLines.length ? `<details class="event-schedule">
+                    <summary>${escapeHtml7(t(locale, "showTimes"))}</summary>
+                    <ul class="event-show-times">${showLines.map((line) => `<li>${escapeHtml7(line)}</li>`).join("")}</ul>
+                  </details>` : ""}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  loadingShell(locale) {
+    return `
+      <div class="loading-shell" part="checkout-loading">
+        <div class="loading-label">\u2726 ${escapeHtml7(t(locale, "loading"))}</div>
+        <div class="skeleton lg"></div>
+        <div class="skeleton md"></div>
+        <div class="skeleton" style="width:42%"></div>
+        ${this.poweredByHtml(locale)}
+      </div>
+    `;
+  }
+  render() {
+    const state = this.state;
+    const layout = this.layout;
+    const locale = this.elementLocale;
+    if (!state || state.loading) {
+      this.shellMounted = false;
+      this.shellLayout = null;
+      this.root.innerHTML = `<style>${this.styles()}</style>${this.loadingShell(locale)}`;
+      return;
+    }
+    if (state.phase === "purchasing") {
+      this.suppressTransferAutoAdvance = false;
+    }
+    if (layout === "steps" && state.phase === "completed") {
+      const doneIndex = this.stepIds().indexOf("done");
+      if (doneIndex >= 0) this.stepIndex = doneIndex;
+    } else if (layout === "steps" && this.needsTransferStep() && state.phase !== "completed" && !this.suppressTransferAutoAdvance) {
+      const transferIndex = this.stepIds().indexOf("transfer");
+      if (transferIndex >= 0) this.stepIndex = transferIndex;
+    }
+    const hasTransferPanel = Boolean(
+      this.root.querySelector('[data-panel="transfer"]')
+    );
+    if (layout === "steps" && this.shellMounted && this.needsTransferStep() !== hasTransferPanel) {
+      this.shellMounted = false;
+    }
+    if (layout === "steps" && this.shellMounted && this.shellLayout === "steps" && this.root.querySelector("[data-tickean-shell='steps']")) {
+      this.syncStepsChrome();
+      return;
+    }
+    this.root.innerHTML = `<style>${this.styles()}</style>${this.renderBody()}`;
+    this.shellMounted = true;
+    this.shellLayout = layout;
+    this.setAttribute("data-animated", "");
+    this.afterRender();
   }
   renderBody() {
+    return this.layout === "stacked" ? this.renderStacked() : this.renderSteps();
+  }
+  sharedChildAttrs(id, locale, appearance) {
+    const apiBase = this.getAttribute("api-base-url") || "https://api.tickean.com";
+    return `controller-id="${escapeAttr5(id)}" locale="${escapeAttr5(locale)}" appearance="${escapeAttr5(appearance)}" api-base-url="${escapeAttr5(apiBase)}"`;
+  }
+  renderStacked() {
     const id = this.getAttribute(controllerAttr()) || "";
     const locale = this.getAttribute("locale") || "es-AR";
     const appearance = this.getAttribute("appearance") || "default";
     const paymentMethod = this.getAttribute("payment-method") || "TRANSFER";
     const currency = this.getAttribute("currency") || "ARS";
     const state = this.state;
-    if (!state || state.loading) {
-      return `<div class="wrap muted">${t(this.elementLocale, "loading")}</div>`;
+    const attrs = this.sharedChildAttrs(id, locale, appearance);
+    return `
+      <div class="stack checkout-steps" part="checkout" data-tickean-shell="stacked">
+        ${this.eventHeaderHtml()}
+        <tickean-discount ${attrs} mode="unlock"></tickean-discount>
+        <tickean-ticket-selector ${attrs}></tickean-ticket-selector>
+        <tickean-discount ${attrs} mode="discount"></tickean-discount>
+        <tickean-buyer-verification ${attrs}></tickean-buyer-verification>
+        ${this.needsAttendees() ? `<tickean-attendees ${attrs}></tickean-attendees>` : ""}
+        <details class="summary-drawer">
+          <summary class="summary-drawer-toggle">
+            <span>${escapeHtml7(t(this.elementLocale, "viewSummary"))}</span>
+            <strong>${escapeHtml7(this.money(Number(state.quote?.totalPrice || 0)))}</strong>
+          </summary>
+          <div class="summary-drawer-body">
+            <tickean-order-summary ${attrs}></tickean-order-summary>
+          </div>
+        </details>
+        <tickean-payment ${attrs} view="method" payment-method="${escapeAttr5(paymentMethod)}" currency="${escapeAttr5(currency)}"></tickean-payment>
+        ${this.needsTransferStep() ? `<tickean-payment ${attrs} view="transfer" payment-method="${escapeAttr5(paymentMethod)}" currency="${escapeAttr5(currency)}"></tickean-payment>` : ""}
+        ${this.poweredByHtml(this.elementLocale)}
+      </div>
+    `;
+  }
+  stepLabel(id, locale) {
+    switch (id) {
+      case "tickets":
+        return t(locale, "stepTickets");
+      case "buyer":
+        return t(locale, "stepBuyer");
+      case "attendees":
+        return t(locale, "attendees");
+      case "payment":
+        return t(locale, "stepPayment");
+      case "transfer":
+        return t(locale, "stepTransfer");
+      case "done":
+        return t(locale, "stepDone");
     }
+  }
+  renderSteps() {
+    const id = this.getAttribute(controllerAttr()) || "";
+    const locale = this.elementLocale;
+    const appearance = this.getAttribute("appearance") || "default";
+    const paymentMethod = this.getAttribute("payment-method") || "TRANSFER";
+    const currency = this.getAttribute("currency") || "ARS";
+    const state = this.state;
+    const attrs = this.sharedChildAttrs(id, locale, appearance);
+    const steps = this.stepIds();
+    const step = this.currentStep();
+    const progress = Math.round((this.stepIndex + 1) / steps.length * 100);
+    const stepper = steps.map((sid, index) => {
+      const active = sid === step;
+      const done = index < this.stepIndex;
+      return `
+          <li class="stepper-item" data-step-id="${sid}" data-active="${active}" data-done="${done}">
+            <span class="stepper-dot" aria-hidden="true">${done ? "\u2713" : index + 1}</span>
+            <span class="stepper-label">${escapeHtml7(this.stepLabel(sid, locale))}</span>
+          </li>`;
+    }).join("");
+    const dockTotal = this.money(Number(state.quote?.totalPrice || 0));
     return `
-      <div class="stack" part="checkout">
-        <h2 style="margin:0">${escapeHtml5(state.event?.title || "")}</h2>
-        <p class="muted" style="margin:0">${escapeHtml5(state.event?.description || "")}</p>
-        <tickean-ticket-selector controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}"></tickean-ticket-selector>
-        <tickean-discount controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}"></tickean-discount>
-        <tickean-buyer-verification controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}"></tickean-buyer-verification>
-        <tickean-order-summary controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}"></tickean-order-summary>
-        <tickean-payment controller-id="${escapeAttr4(id)}" locale="${escapeAttr4(locale)}" appearance="${escapeAttr4(appearance)}" payment-method="${escapeAttr4(paymentMethod)}" currency="${escapeAttr4(currency)}"></tickean-payment>
-        ${state.error ? `<div class="danger" role="alert">${escapeHtml5(state.error.message)}</div>` : ""}
+      <div class="checkout-steps compact" part="checkout" data-tickean-shell="steps" style="--tickean-progress:${progress}%">
+        ${this.eventHeaderHtml()}
+        <div class="progress" aria-hidden="true"><span data-progress></span></div>
+        <ol class="stepper" aria-label="Checkout" style="grid-template-columns:repeat(${steps.length},minmax(0,1fr))">${stepper}</ol>
+        <p class="step-caption muted" data-step-caption>
+          ${escapeHtml7(tFormat(locale, "stepOf", { current: this.stepIndex + 1, total: steps.length }))}
+        </p>
+        <div class="checkout-layout">
+          <aside class="checkout-aside compact-aside" ${step === "done" ? "hidden" : ""} data-aside>
+            <details class="summary-drawer">
+              <summary class="summary-drawer-toggle">
+                <span>${escapeHtml7(t(locale, "viewSummary"))}</span>
+                <strong data-dock-total>${escapeHtml7(dockTotal)}</strong>
+              </summary>
+              <div class="summary-drawer-body">
+                <tickean-order-summary ${attrs}></tickean-order-summary>
+              </div>
+            </details>
+          </aside>
+          <div class="step-panels">
+            <section class="step-panel stack" data-panel="tickets" ${step === "tickets" ? "" : "hidden"}>
+              <tickean-discount ${attrs} mode="unlock"></tickean-discount>
+              <tickean-ticket-selector ${attrs}></tickean-ticket-selector>
+            </section>
+            <section class="step-panel stack" data-panel="buyer" ${step === "buyer" ? "" : "hidden"}>
+              <tickean-discount ${attrs} mode="discount"></tickean-discount>
+              <tickean-buyer-verification ${attrs}></tickean-buyer-verification>
+            </section>
+            <section class="step-panel stack" data-panel="attendees" ${step === "attendees" ? "" : "hidden"}>
+              <tickean-attendees ${attrs}></tickean-attendees>
+            </section>
+            <section class="step-panel stack" data-panel="payment" ${step === "payment" ? "" : "hidden"}>
+              <tickean-payment ${attrs} view="method" payment-method="${escapeAttr5(paymentMethod)}" currency="${escapeAttr5(currency)}"></tickean-payment>
+            </section>
+            ${this.needsTransferStep() ? `<section class="step-panel stack" data-panel="transfer" ${step === "transfer" ? "" : "hidden"}>
+                    <tickean-payment ${attrs} view="transfer" payment-method="${escapeAttr5(paymentMethod)}" currency="${escapeAttr5(currency)}"></tickean-payment>
+                  </section>` : ""}
+            <section class="step-panel" data-panel="done" ${step === "done" ? "" : "hidden"}>
+              <div class="done-card">
+                <div class="done-icon" aria-hidden="true">\u2713</div>
+                <h3>${escapeHtml7(t(locale, "completed"))}</h3>
+                <p class="muted">${escapeHtml7(t(locale, "doneSubtitle"))}</p>
+                <div data-done-summary class="muted"></div>
+                <div class="done-actions">
+                  <a class="done-primary" href="${TICKEAN_TICKETS_URL}" target="_blank" rel="noopener noreferrer">
+                    ${escapeHtml7(t(locale, "viewTickets"))}
+                  </a>
+                  <button type="button" class="secondary" data-action="buy-again">
+                    ${escapeHtml7(t(locale, "buyAgain"))}
+                  </button>
+                </div>
+              </div>
+            </section>
+            <div class="danger" role="alert" data-error ${state.error ? "" : "hidden"}>
+              ${state.error ? escapeHtml7(state.error.message) : ""}
+            </div>
+          </div>
+        </div>
+        <div class="checkout-sticky" data-sticky ${step === "done" ? "hidden" : ""}>
+          <div class="checkout-dock" data-step-nav ${step === "transfer" ? "hidden" : ""}>
+            <div class="dock-side dock-side-start">
+              <button type="button" class="secondary dock-back" data-action="back" ${this.stepIndex <= 0 ? "hidden" : ""}>
+                ${escapeHtml7(t(locale, "back"))}
+              </button>
+            </div>
+            <div class="dock-total">
+              <span class="muted">${escapeHtml7(t(locale, "total"))}</span>
+              <strong data-dock-total>${escapeHtml7(dockTotal)}</strong>
+            </div>
+            <div class="dock-side dock-side-end">
+              <button type="button" class="dock-next" data-action="next" ${step === "payment" || step === "transfer" || step === "done" ? "hidden" : ""} ${this.canGoNext() ? "" : "disabled"}>
+                ${escapeHtml7(t(locale, "next"))}
+              </button>
+            </div>
+          </div>
+          ${this.poweredByHtml(locale)}
+        </div>
       </div>
     `;
   }
+  canGoNext() {
+    const state = this.state;
+    if (!state) return false;
+    const step = this.currentStep();
+    if (step === "tickets") return (state.cart?.length || 0) > 0;
+    if (step === "buyer") return Boolean(state.buyerVerified);
+    if (step === "attendees") return this.attendeesComplete || this.getAttendeesCompleteFromDom();
+    return false;
+  }
+  getAttendeesCompleteFromDom() {
+    const el = this.root.querySelector("tickean-attendees");
+    return Boolean(el?.isComplete?.());
+  }
+  syncStepsChrome() {
+    const locale = this.elementLocale;
+    const steps = this.stepIds();
+    if (this.stepIndex >= steps.length) this.stepIndex = steps.length - 1;
+    const step = this.currentStep();
+    const state = this.state;
+    const progress = Math.round((this.stepIndex + 1) / steps.length * 100);
+    const shell = this.root.querySelector("[data-tickean-shell='steps']");
+    if (shell) shell.style.setProperty("--tickean-progress", `${progress}%`);
+    this.root.querySelectorAll(".stepper-item").forEach((item) => {
+      const sid = item.getAttribute("data-step-id");
+      const index = steps.indexOf(sid);
+      item.dataset.active = String(sid === step);
+      item.dataset.done = String(index < this.stepIndex);
+      const dot = item.querySelector(".stepper-dot");
+      if (dot) dot.textContent = index < this.stepIndex ? "\u2713" : String(index + 1);
+    });
+    const caption = this.root.querySelector("[data-step-caption]");
+    if (caption) {
+      caption.textContent = tFormat(locale, "stepOf", {
+        current: this.stepIndex + 1,
+        total: steps.length
+      });
+    }
+    this.root.querySelectorAll(".step-panel").forEach((panel) => {
+      const id = panel.getAttribute("data-panel");
+      panel.hidden = id !== step;
+    });
+    const sticky = this.root.querySelector("[data-sticky]");
+    if (sticky) sticky.hidden = step === "done";
+    const nav = this.root.querySelector("[data-step-nav]");
+    if (nav) nav.hidden = step === "transfer";
+    const aside = this.root.querySelector("[data-aside]");
+    if (aside) aside.hidden = step === "done";
+    const back = this.root.querySelector('[data-action="back"]');
+    if (back) {
+      back.hidden = this.stepIndex <= 0 || step === "done" || step === "transfer";
+      back.disabled = state?.phase === "purchasing";
+    }
+    const next = this.root.querySelector('[data-action="next"]');
+    if (next) {
+      next.hidden = step === "payment" || step === "transfer" || step === "done";
+      next.disabled = !this.canGoNext();
+    }
+    const drawer = this.root.querySelector("details.summary-drawer");
+    if (drawer && !drawer.dataset.userToggled) {
+      drawer.open = false;
+    }
+    const dockTotal = this.money(Number(state?.quote?.totalPrice || 0));
+    this.root.querySelectorAll("[data-dock-total]").forEach((el) => {
+      el.textContent = dockTotal;
+    });
+    const errorEl = this.root.querySelector("[data-error]");
+    if (errorEl) {
+      if (state?.error) {
+        errorEl.hidden = false;
+        errorEl.textContent = state.error.message;
+      } else {
+        errorEl.hidden = true;
+        errorEl.textContent = "";
+      }
+    }
+    const doneSummary = this.root.querySelector("[data-done-summary]");
+    if (doneSummary && step === "done") {
+      const purchaseId = state?.purchase?.id;
+      doneSummary.textContent = purchaseId ? `#${purchaseId}` : "";
+    }
+  }
+  afterRender() {
+    this.root.querySelector('[data-action="buy-again"]')?.addEventListener("click", () => {
+      this.restartCheckout();
+    });
+    if (this.layout !== "steps") return;
+    this.root.querySelector("details.summary-drawer")?.addEventListener("toggle", (ev) => {
+      const details = ev.currentTarget;
+      details.dataset.userToggled = "1";
+    });
+    this.root.querySelector('[data-action="back"]')?.addEventListener("click", () => {
+      if (this.state?.phase === "purchasing") return;
+      if (this.stepIndex > 0) {
+        this.stepIndex -= 1;
+        this.syncStepsChrome();
+      }
+    });
+    this.root.querySelector('[data-action="next"]')?.addEventListener("click", () => {
+      if (!this.canGoNext()) return;
+      const steps = this.stepIds();
+      if (this.stepIndex < steps.length - 1) {
+        this.stepIndex += 1;
+        if (this.currentStep() === "done") this.stepIndex -= 1;
+        this.syncStepsChrome();
+      }
+    });
+  }
 };
-function escapeAttr4(value) {
+function escapeAttr5(value) {
   return value.replace(/"/g, "&quot;");
 }
-function escapeHtml5(value) {
+function escapeHtml7(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 if (typeof customElements !== "undefined" && !customElements.get("tickean-checkout")) {
@@ -696,6 +3553,7 @@ var ELEMENT_TAGS = [
   "tickean-ticket-selector",
   "tickean-discount",
   "tickean-buyer-verification",
+  "tickean-attendees",
   "tickean-payment",
   "tickean-order-summary"
 ];
@@ -717,6 +3575,7 @@ function detachController(id) {
 }
 defineTickeanElements();
 export {
+  TickeanAttendees,
   TickeanBuyerVerification,
   TickeanCheckout,
   TickeanDiscount,