/* ============================================================
   NormNet mini-app — pay screen `.np-*` classes.

   The mini-app renders the SHARED @nn/cabinet <Pay> screen (same component the web
   funnel uses) so the payment moment looks identical on both surfaces. That component
   emits the web design-system `.np-*` classes, which live in the storefront's
   account-pages.css. The mini-app deliberately does NOT load the whole account-pages.css
   (it carries a global `html,body` rule + unscoped cabinet helpers that would restyle the
   Devices/Settings/Referral screens) — so this is the PAY-ONLY subset, copied verbatim
   from apps/storefront/public/ds/account-pages.css. Nothing else in the mini-app uses
   `.np-*` (verified: 0 matches in account-app.css / globals.css), so this is collision-free.
   Keep in sync with account-pages.css when those rules change.
   ============================================================ */

/* centered card (mounted by the pay page around <Pay/>) */
.np-card {
  width: 100%; max-width: 468px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl, 22px); box-shadow: var(--shadow-lg, 0 30px 70px -30px rgba(0,0,0,0.6));
  padding: 30px 28px 26px;
}
.np-card.wide { max-width: 540px; }

/* title + subtitle */
.np-title { font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: -0.02em; margin: 12px 0 0; text-wrap: balance; }
.np-sub { color: var(--txt-2); font-size: 14.5px; line-height: 1.5; margin: 9px 0 0; text-wrap: pretty; }
.np-center { text-align: center; }

/* order summary row (the «Оплачено» card) */
.np-order { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.np-order .li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; font-size: 14px; }
.np-order .li + .li { border-top: 1px solid var(--line); }
.np-order .li .k { color: var(--txt-2); white-space: nowrap; }
.np-order .li .v { font-weight: 600; text-align: right; }
.np-order .li.total { background: var(--surface-2); }
.np-order .li.total .k { color: var(--txt); font-weight: 600; }
.np-order .li.total .v { font-family: var(--font-display); font-weight: 700; font-size: 19px; }

/* footnote (trial NSPK disclaimer + refund note on the fail screen) */
.np-foot-note { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--txt-3); font-size: 12.5px; }
.np-foot-note svg { width: 14px; height: 14px; }

/* step wrapper — <Pay/> always renders `.np-step.on` (single visible step). */
.np-step { display: none; opacity: 0; transform: translateY(10px); transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1); }
.np-step.on { display: block; opacity: 1; transform: none; }