/* Page-scoped styles for page-pay.php. Tokens, dsUp/dsFloat/dsPulse keyframes and
   component styles come from card.css / the theme — only /pay extras live here. */

.ds-pay-page {
  background: #F5F4FA;
  color: var(--ink);
  font-family: IRANSansX, Vazirmatn, system-ui, sans-serif;
  overflow-x: hidden;
}

.ds-pay-page h1,
.ds-pay-page h2,
.ds-pay-page h3 { font-family: YekanBakh, IRANSansX, sans-serif; }

/* Hero decorative layers must never intercept clicks. */
.ds-pay-hero { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ds-pay-page *,
  .ds-pay-page *::before,
  .ds-pay-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .ds-pay-page [aria-hidden="true"] { display: none; }
}

/* Hero remittance illustration (see template-parts/pay/hero.php). */
@keyframes dsSend {
  0%        { right: 14%; opacity: 0; transform: translateY(-50%) scale(.5); }
  10%       { opacity: 1; transform: translateY(-50%) scale(1); }
  70%       { right: 72%; opacity: 1; transform: translateY(-50%) scale(1); }
  82%, 100% { right: 72%; opacity: 0; transform: translateY(-50%) scale(.5); }
}
@keyframes dsArrive {
  0%, 68%   { transform: scale(1); }
  78%       { transform: scale(1.08); }
  88%, 100% { transform: scale(1); }
}
@keyframes dsWire { to { background-position: -68px 0; } }
@keyframes dsTick {
  0%, 16%   { opacity: 1; }
  26%, 100% { opacity: .34; }
}