.stripeLiveCheckout .simulatedCheckoutDialog{width:min(820px,100%)}
.stripeCheckoutMount{min-height:120px}
.stripeCheckoutLoading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:110px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:17px;background:var(--surface-input);color:var(--muted)}
.stripeCheckoutLoading::before{width:20px;height:20px;border:3px solid color-mix(in srgb,var(--accent) 22%,transparent);border-top-color:var(--accent);border-radius:50%;content:"";animation:stripeCheckoutSpin .8s linear infinite}
.stripeCheckoutFailure{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;padding:18px;border:1px solid color-mix(in srgb,var(--danger) 58%,var(--line));border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 9%,var(--surface-input)),var(--surface-input));box-shadow:inset 0 1px #ffffff08}.stripeCheckoutFailure>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid color-mix(in srgb,var(--danger) 55%,var(--line));border-radius:12px;color:var(--danger);font-size:1.15rem;font-weight:900;background:color-mix(in srgb,var(--danger) 9%,transparent)}.stripeCheckoutFailure strong{display:block;color:var(--text)}.stripeCheckoutFailure p{margin:4px 0 12px;color:var(--muted);font-size:.76rem;line-height:1.45}.stripeCheckoutFailure .btn{min-height:38px;padding:7px 14px}
.stripeCheckoutShell{display:grid;gap:15px;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 58%,var(--line));border-radius:19px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,var(--surface-input)),var(--surface-input));box-shadow:inset 0 1px #ffffff0b}
.stripeCheckoutHeading{display:flex;align-items:center;justify-content:space-between;gap:12px}.stripeCheckoutHeading>div{display:grid;gap:3px}.stripeCheckoutHeading span{color:var(--accent2);font-size:.67rem;font-weight:900;letter-spacing:.12em}.stripeCheckoutHeading strong{font-size:.95rem}.stripeCheckoutHeading em{padding:6px 9px;border:1px solid color-mix(in srgb,var(--good) 45%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--good) 8%,transparent);color:var(--good);font-size:.64rem;font-style:normal;font-weight:850;white-space:nowrap}
.stripeExpressWrap{min-height:48px}.stripeExpressWrap[hidden]{display:none}.stripeCheckoutDivider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}.stripeCheckoutDivider::before,.stripeCheckoutDivider::after{height:1px;flex:1;background:var(--line);content:""}
.stripePaymentWrap{min-height:118px}.stripeSecurityNote{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:11px;background:color-mix(in srgb,var(--accent) 6%,var(--surface-raised));color:var(--muted);font-size:.7rem;line-height:1.45}.stripeCheckoutError{color:var(--danger)!important}
.stripeVerifyingDialog{display:grid;justify-items:center;width:min(500px,100%);padding:34px;border:1px solid color-mix(in srgb,var(--accent) 70%,var(--line));border-radius:25px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel));box-shadow:0 34px 100px #0009,0 0 36px color-mix(in srgb,var(--accent) 22%,transparent);text-align:center}.stripeVerifyingDialog>span{margin-top:18px;color:var(--accent2);font-size:.7rem;font-weight:900;letter-spacing:.13em}.stripeVerifyingDialog h2{margin:6px 0 8px}.stripeVerifyingDialog p{max-width:410px;margin:0;color:var(--muted);line-height:1.5}.stripeVerifyingDialog small{margin-top:16px;color:var(--accent2)}.stripeVerifyIcon{display:grid;place-items:center;width:84px;height:84px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:24px;background:var(--surface-input);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 18%,transparent)}.stripeVerifyIcon span{width:38px;height:38px;border:4px solid color-mix(in srgb,var(--accent) 20%,transparent);border-top-color:var(--accent);border-radius:50%;animation:stripeCheckoutSpin .85s linear infinite}
@keyframes stripeCheckoutSpin{to{transform:rotate(360deg)}}
@media(max-width:560px){.stripeCheckoutShell{padding:13px}.stripeCheckoutHeading{align-items:flex-start;flex-direction:column}.stripeCheckoutHeading em{align-self:flex-start}}
@media(prefers-reduced-motion:reduce){.stripeCheckoutLoading::before{animation:none}}

/* Safety net for Stripe's own injected nodes.
   Stripe.js appends frames (and in recent builds a floating badge) directly to
   <body>. The JS teardown removes them when checkout closes, but if Stripe adds
   a node shape we don't recognise, it must still not float over the app. Scoped
   to :not(.stripeCheckoutOpen) so nothing is ever hidden while a payment is
   actually in progress. */
body:not(.stripeCheckoutOpen) > iframe[src*="stripe.com"],
body:not(.stripeCheckoutOpen) > iframe[name^="__privateStripe"],
body:not(.stripeCheckoutOpen) > iframe[name*="stripe" i]{
  display:none !important;
}

/* Test-card hint. Rendered only when the server reports test keys, so it can
   never appear to someone paying for real. */
.stripeTestHint{
  margin-top:12px; padding:11px 13px;
  border:1px dashed color-mix(in srgb, var(--warn,#f59e0b) 55%, var(--line));
  border-radius:12px;
  background:color-mix(in srgb, var(--warn,#f59e0b) 9%, transparent);
}
.stripeTestHint strong{ display:block; margin-bottom:4px; font-size:.78rem; color:var(--warn,#f59e0b); }
.stripeTestHint p{ margin:0; color:var(--text); font-size:.76rem; line-height:1.5; }
.stripeTestHint b{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.stripeTestHintAlt{ margin-top:5px!important; opacity:.75; font-size:.72rem!important; }