/* ════════════════════════════════════════════════════════════════
   WINR v32 — Checkout (pay to join a paid community) styles
   WINR-branded wrapper around Stripe-hosted checkout. Additive;
   remove the v32 link tag to revert.
   ════════════════════════════════════════════════════════════════ */

.v32-overlay{
  position:fixed; inset:0; z-index:1300;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,0.64); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s ease;
}
.v32-overlay.open{ opacity:1; }
.v32-modal{
  position:relative; width:100%; max-width:430px;
  max-height:calc(100vh - 40px); overflow-y:auto;
  padding:28px 26px 22px; border-radius:var(--radius-lg, 20px);
  background:rgba(14,15,19,0.97); border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 32px 80px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.06);
  transform:translateY(12px) scale(.98); transition:transform .26s cubic-bezier(0.16,1,0.3,1);
}
.v32-overlay.open .v32-modal{ transform:none; }
.v32-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(255,255,255,0.04); border:1px solid var(--border-card, rgba(255,255,255,0.09));
  color:var(--text-mid, #A1A1AA); cursor:pointer; transition:all .18s ease; z-index:2;
}
.v32-close:hover{ color:#fff; background:rgba(255,255,255,0.08); }

/* head */
.v32-co-head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.v32-co-mono{
  flex:0 0 52px; width:52px; height:52px; border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900;
}
.v32-co-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--text-lo, #71717A); }
.v32-co-name{ font-size:19px; font-weight:900; letter-spacing:-0.3px; color:var(--text-hi, #fff); line-height:1.15; margin-top:2px; }
.v32-co-price{ font-size:13px; color:var(--neon-green, #39FF14); font-weight:700; margin-top:3px; }

.v32-co-section-label{ font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--text-lo, #71717A); margin:4px 0 10px; }
.v32-co-included{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; }
.v32-co-included li{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-mid, #A1A1AA); line-height:1.45; }
.v32-co-included strong{ color:var(--text-hi, #fff); font-weight:700; }
.v32-co-check{ flex:0 0 18px; width:18px; height:18px; margin-top:1px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(57,255,20,0.12); color:var(--neon-green, #39FF14); }

/* order summary */
.v32-co-summary{ padding:14px 16px; border-radius:var(--radius-md, 14px); background:rgba(0,0,0,0.24); border:1px solid var(--border-card, rgba(255,255,255,0.09)); margin-bottom:16px; }
.v32-co-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--text-mid, #A1A1AA); padding:4px 0; }
.v32-co-row.total{ margin-top:6px; padding-top:11px; border-top:1px solid var(--border-card, rgba(255,255,255,0.09)); font-size:16px; font-weight:800; color:var(--text-hi, #fff); }
.v32-co-row.total span:last-child{ color:var(--neon-green, #39FF14); font-variant-numeric:tabular-nums; }
.v32-co-renew{ font-size:11px; color:var(--text-lo, #71717A); margin-top:8px; text-align:center; }

/* terms */
.v32-co-terms{ display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--text-mid, #A1A1AA); line-height:1.45; margin-bottom:16px; cursor:pointer; }
.v32-co-terms input{ margin-top:2px; accent-color:var(--neon-green, #39FF14); width:15px; height:15px; flex:0 0 auto; }
.v32-co-terms a{ color:var(--text-hi, #fff); text-decoration:underline; text-underline-offset:2px; }

/* buttons */
.v32-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 22px; border-radius:var(--radius-pill, 999px); font-size:14px; font-weight:800; cursor:pointer; border:1px solid transparent; transition:transform .15s ease, background .2s ease, opacity .2s ease; }
.v32-btn-primary{ background:#fff; color:#0b0b0e; }
.v32-btn-primary:hover{ transform:translateY(-1px); background:#e9e9ed; }
.v32-btn-block{ width:100%; }
.v32-btn.disabled, .v32-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.v32-co-foot{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:13px; font-size:11px; color:var(--text-lo, #71717A); text-align:center; }

/* processing / success states */
.v32-state{ text-align:center; padding:18px 6px 6px; }
.v32-state-title{ font-size:19px; font-weight:900; color:var(--text-hi, #fff); letter-spacing:-0.3px; margin-top:16px; }
.v32-state-sub{ font-size:13px; color:var(--text-mid, #A1A1AA); margin-top:7px; line-height:1.5; }
.v32-state-sub strong{ color:var(--text-hi, #fff); }
.v32-state .v32-btn{ margin-top:22px; }
.v32-spinner{ width:42px; height:42px; margin:0 auto; border-radius:50%; border:3px solid rgba(255,255,255,0.12); border-top-color:#fff; animation:v32spin .7s linear infinite; }
@keyframes v32spin{ to{ transform:rotate(360deg); } }
.v32-success-badge{
  width:64px; height:64px; margin:0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(57,255,20,0.12); color:var(--neon-green, #39FF14);
  border:1px solid rgba(57,255,20,0.3);
  animation:v32pop .42s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes v32pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* ════════════════════════════════════════════════════════════════
   v32 — branded hero, pitch, guarantee + owner editor
   --v32-accent / --v32-accent-soft set per-community on .v32-modal
   ════════════════════════════════════════════════════════════════ */
.v32-modal{ --v32-accent:#fff; --v32-accent-soft:rgba(255,255,255,0.14); padding:0; }
.v32-modal > #v32Body{ display:block; }

/* hero strip */
.v32-hero{
  position:relative; padding:26px 26px 20px; min-height:120px;
  background-size:cover; background-position:center;
  display:flex; flex-direction:column; justify-content:flex-end;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.v32-hero-mono{ flex-direction:row; align-items:center; gap:14px; min-height:0; padding:26px; }
.v32-hero-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--text-lo,#71717A); }
.v32-hero-name{ font-size:21px; font-weight:900; letter-spacing:-0.4px; color:#fff; line-height:1.1; margin-top:3px; text-shadow:0 2px 12px rgba(0,0,0,0.5); }
.v32-hero-price{ font-size:13px; font-weight:800; color:var(--v32-accent); margin-top:4px; }
.v32-co-pad{ padding:20px 26px 22px; }
.v32-co-pitch{ font-size:13.5px; line-height:1.55; color:var(--text-mid,#A1A1AA); margin-bottom:18px; }

/* accent-tinted check icons + price total */
.v32-co-check{ background:var(--v32-accent-soft); color:var(--v32-accent); }
.v32-co-row.total span:last-child{ color:var(--v32-accent); }
.v32-hero-price, .v32-co-price{ color:var(--v32-accent); }

/* guarantee badge */
.v32-guarantee{
  display:flex; align-items:center; gap:9px; margin:0 0 16px;
  padding:11px 14px; border-radius:var(--radius-md,14px);
  background:var(--v32-accent-soft); border:1px solid var(--v32-accent);
  color:#fff; font-size:12.5px; font-weight:600;
}
.v32-guarantee svg{ color:var(--v32-accent); flex:0 0 auto; }

/* success badge picks up the community accent */
.v32-success-badge{ background:var(--v32-accent-soft); color:var(--v32-accent); border-color:var(--v32-accent); }

/* keep close button above hero */
.v32-close{ background:rgba(0,0,0,0.4); }

/* ── Owner editor ── */
.v32-ed-head{ padding:26px 26px 4px; }
.v32-ed-title{ font-size:20px; font-weight:900; letter-spacing:-0.3px; color:#fff; }
.v32-ed-sub{ font-size:13px; color:var(--text-mid,#A1A1AA); margin-top:6px; line-height:1.5; }
#v32Body > .v32-ed-label:first-of-type{ margin-top:8px; }
.v32-ed-label{ display:block; padding:0 26px; margin:16px 0 7px; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--text-lo,#71717A); }
.v32-ed-opt{ color:var(--text-lo,#71717A); font-weight:600; text-transform:none; letter-spacing:0; }
.v32-ed-input{
  display:block; width:calc(100% - 52px); margin:0 26px; padding:11px 13px;
  border-radius:10px; background:var(--bg-input,#0E0E12); border:1px solid var(--border-card,rgba(255,255,255,0.09));
  color:var(--text-hi,#fff); font-size:14px; font-family:inherit; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.v32-ed-input:focus{ border-color:rgba(255,255,255,0.28); box-shadow:0 0 0 3px rgba(255,255,255,0.06); }
.v32-ed-area{ resize:vertical; line-height:1.45; }
.v32-ed-benefit{ display:flex; align-items:center; gap:8px; margin:0 26px 8px; }
.v32-ed-benefit .v32-ed-input{ width:100%; margin:0; }
.v32-ed-x{ flex:0 0 30px; width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,0.05); border:1px solid var(--border-card,rgba(255,255,255,0.09)); color:var(--text-mid,#A1A1AA); font-size:18px; line-height:1; cursor:pointer; transition:all .15s ease; }
.v32-ed-x:hover{ color:#ff6b6b; border-color:rgba(255,107,107,0.4); }
.v32-ed-add{ display:inline-block; margin:2px 26px 4px; padding:7px 14px; border-radius:var(--radius-pill,999px); background:transparent; border:1px dashed rgba(255,255,255,0.2); color:var(--text-mid,#A1A1AA); font-size:12.5px; font-weight:700; cursor:pointer; transition:all .15s ease; }
.v32-ed-add:hover{ color:#fff; border-color:rgba(255,255,255,0.4); }
.v32-ed-actions{ display:flex; gap:10px; padding:18px 26px 6px; }
.v32-ed-actions .v32-btn{ flex:1; height:44px; }
.v32-btn-ghost{ background:transparent; color:var(--text-mid,#A1A1AA); border:1px solid var(--border-card,rgba(255,255,255,0.09)); }
.v32-btn-ghost:hover{ color:#fff; border-color:rgba(255,255,255,0.25); }
.v32-ed-actions + .v32-co-foot{ padding-bottom:22px; }

/* ════════════════════════════════════════════════════════════════
   v32 — premium success animation + legal sheet
   ════════════════════════════════════════════════════════════════ */
.v32-state-success{ padding:26px 26px 22px; }
.v32-state-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--v32-accent,#fff); opacity:.85; margin-top:18px; animation:v32RiseIn .5s ease .22s both; }
.v32-state-success .v32-state-title{ animation:v32RiseIn .5s ease .3s both; }
.v32-state-success .v32-state-sub{ animation:v32RiseIn .5s ease .38s both; }
.v32-state-success .v32-btn{ animation:v32RiseIn .5s ease .46s both; }
@keyframes v32RiseIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* success badge: pop + a celebratory ring pulse */
.v32-success-badge{ position:relative; animation:v32pop .5s cubic-bezier(0.34,1.7,0.5,1) both; }
.v32-success-badge svg{ animation:v32CheckDraw .45s ease .18s both; }
@keyframes v32CheckDraw{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:scale(1); } }
.v32-success-ring{
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--v32-accent,#39FF14);
  opacity:0; animation:v32Ring 1.1s ease-out .3s 2;
}
@keyframes v32Ring{
  0%{ opacity:.55; transform:scale(.85); }
  100%{ opacity:0; transform:scale(1.55); }
}

/* legal sheet — stacks above checkout */
.v32-legal-overlay{ z-index:1400; }
.v32-legal-modal{ max-width:420px; }
.v32-legal-pad{ padding:30px 26px 26px; }
.v32-legal-title{ font-size:19px; font-weight:900; letter-spacing:-0.3px; color:#fff; margin-bottom:14px; }
.v32-legal-p{ font-size:13px; line-height:1.6; color:var(--text-mid,#A1A1AA); margin:0 0 12px; }
.v32-legal-p:last-child{ margin-bottom:0; color:var(--text-lo,#71717A); font-style:italic; }

/* owner editor — founding milestone fields */
.v32-ed-founding{ display:flex; gap:8px; margin:0 26px; }
.v32-ed-founding .v32-ed-input{ margin:0; }
.v32-ed-num{ flex:0 0 90px; text-align:center; }
.v32-ed-hintline{ padding:8px 26px 0; font-size:11.5px; color:var(--text-lo,#71717A); line-height:1.5; }
.v32-ed-hintline strong{ color:var(--text-mid,#A1A1AA); }