/* =========================================================
   payment-success.css — NEW FILE
   Path: assets/css/payment-success.css

   Styling scoped to public/payment-success.html only. Reuses
   existing design tokens from style.css/auth.css.
   ========================================================= */

.ps-error {
  text-align: center; padding: var(--space-7) var(--space-5);
  background: var(--color-primary-tint); color: var(--color-primary-hover);
  border-radius: var(--radius-md);
}

.ps-icon-badge {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--space-5);
  background: var(--color-success-tint); color: var(--color-success);
  display: flex; align-items: center; justify-content: center;
}
.ps-icon-badge .icon { width: 36px; height: 36px; }

.ps-heading { text-align: center; margin-bottom: var(--space-3); }
.ps-subtitle { text-align: center; color: var(--color-body); max-width: 480px; margin: 0 auto var(--space-7); }

.ps-ref-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--color-bg-section); border-radius: var(--radius-md);
  padding: var(--space-6); margin-bottom: var(--space-7); text-align: center;
}
.ps-ref-label { font-size: var(--fs-small); color: var(--color-body); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; }
.ps-ref-value { font-size: 28px; font-weight: var(--fw-bold); color: var(--color-primary); }
.ps-ref-meta { font-size: var(--fs-small); color: var(--color-body); }

.ps-nav-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-7); }
.ps-nav-actions .btn { flex: 1; min-width: 160px; }

@media (max-width: 600px) {
  .ps-ref-value { font-size: 22px; }
  .ps-nav-actions { flex-direction: column; }
  .ps-nav-actions .btn { width: 100%; }
}