/* NoxTools site kit — the payments "Marquee Belt" (payments demo 8: demo/home-payments/payments-8.html).
   Shared by the home page (239, gen_home.py section 7) and the Plans page (1906, gen_plans.py "We accept payments from");
   enqueued only on those two pages, after site.css (noxtools-site-kit.php). Markup + the few lines of behaviour:
   nxel.pay_belt(). The home band's own backdrop and head (wallet panda, eyebrow, heading) stay in home.css.

   Two full-width rows of large white payment chips gliding slowly in opposite directions, and the activation note as
   two tags. Each chip: the gateway's real logo mark on a light tile + the method name (owner, 27 Sep; the marks are
   assets/pay-logos/, sources in SOURCES.md). Motion: transform-only; it pauses on hover, while the belt has focus (it
   is one Tab stop, a tap focuses it on touch screens) and while off-screen. Owner (27 Sep): no Pause / Play button on
   the belt — phones and prefers-reduced-motion never move. Each row holds the real list plus three aria-hidden copies
   and moves by exactly one set (-25%) per loop. Phones (<=767px) and prefers-reduced-motion: no movement at all — the
   copies go, and the eleven chips wrap into one centred cloud whose width the script balances so no chip is ever alone
   on a line.
   Scoping: every rule starts with .nx-site (the kit's body class), so the specificity is the same as the old
   .elementor-239-scoped rules and beats Elementor's and the theme's defaults on any page. */

/* the band: a section tagged nx-beltband (layout full_width, no column gap) lets the belt run edge to edge at every
   width — it drops site.css's 16px container gutter (<=1024px, 0,5,0), and its other widgets carry the gutter themselves */
.nx-site .elementor-section.elementor-top-section.nx-beltband:not(.nx-header) > .elementor-container{padding-left:0;padding-right:0}
.nx-site .nx-beltband .elementor-widget:not(.nx-belt-w){padding:0 20px}
/* the band's head spacing is set by its own widgets (sub-line 10px margin-top, belt 30px / 22px on phones), so drop
   Elementor's 20px widget gap between them — the same on home and Plans */
.nx-site .nx-beltband .elementor-widget:not(:last-child){margin-bottom:0}

/* the belt: full-bleed (up to 1920px), two rows, opposite directions, soft fade at both ends */
.nx-site .nx-belt{box-sizing:border-box;margin:30px auto 0;max-width:1920px;display:grid;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.nx-site .nx-belt-row{overflow:hidden;width:100%;padding:5px 0}
.nx-site .nx-belt-track{display:flex;width:max-content;will-change:transform;animation:nx-belt-l 46s linear infinite}
.nx-site .nx-belt-row--rev .nx-belt-track{animation:nx-belt-r 52s linear infinite}
.nx-site .nx-belt:hover .nx-belt-track,.nx-site .nx-belt:focus-within .nx-belt-track,
.nx-site .nx-belt.is-off .nx-belt-track{animation-play-state:paused}
/* the belt itself is one Tab stop (tabindex="0", no button): focusing it — Tab, or a tap on touch screens — stops both
   rows until focus moves on. The ring shows for keyboard focus only, drawn inside the box (the belt's edge-fade mask
   would hide an outline outside it) and on every chip, so it reads even where the ends fade out */
.nx-site .nx-belt:focus{outline:none}
.nx-site .nx-belt:focus-visible{outline:2px solid #4F46E5;outline-offset:-2px}
.nx-site .nx-belt:focus-visible .nx-bchip{border-color:#4F46E5;box-shadow:0 0 0 1px #4F46E5}
@keyframes nx-belt-l{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes nx-belt-r{from{transform:translateX(-25%)}to{transform:translateX(0)}}
.nx-site .nx-belt-set{display:flex;gap:10px;margin:0;padding:0 10px 0 0;list-style:none;flex:none}
/* owner (27 Sep): smaller bubbles than the demo — 44px desktop, 40px tablets, 38px phones, 36px the narrowest phones */
.nx-site .nx-bchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:6px 16px 6px 7px;
  border-radius:999px;background:#fff;border:1px solid #E2E8F0;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 22px -14px rgba(15,23,42,.18);
  color:#0B1120;font:600 14px/1.2 var(--nx-body);white-space:nowrap;letter-spacing:-.005em}
.nx-site .nx-bchip:hover{border-color:#C7D2FE}
/* the logo tile: a light hairline tile, --bt tall (30px desktop, 28 tablets, 26 phones, 24 the narrowest phones), so
   each brand mark shows in its own colours. Symbols sit in a square tile; a wordmark (UPI, Paytm) or a pair (Visa +
   Mastercard, Tether + Bitcoin) widens the tile instead of shrinking the mark. Marks are sized by height only. */
.nx-site .nx-bic{--bt:30px;flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  gap:4px;min-width:var(--bt);height:var(--bt);padding:0;border-radius:9px;background:#F8FAFC;border:1px solid #E2E8F0}
.nx-site .nx-bic--wide{padding:0 7px}
.nx-site .nx-blg{display:block;flex:none;width:auto;max-width:none;height:calc(var(--bt) * .64);margin:0}
/* optical balance: the two widest symbols a touch shorter, so every square-tile mark is ~19px tall / <=21px wide with
   >=4.5px of tile either side (JazzCash's ink fills its whole PNG; GPay is 1.17:1) */
.nx-site .nx-blg[src*="jazzcash"]{height:calc(var(--bt) * .56)}
.nx-site .nx-blg[src$="gpay.svg"]{height:calc(var(--bt) * .58)}
.nx-site .nx-blg--word{height:calc(var(--bt) * .4)}
.nx-site .nx-blg--mc{height:calc(var(--bt) * .5)}
.nx-site .nx-blg--coin{height:calc(var(--bt) * .6);border-radius:50%}
.nx-site .nx-blg--coin + .nx-blg--coin{margin-left:-7px;box-shadow:0 0 0 1.5px #F8FAFC}   /* the coins overlap a little */

/* the activation note: two timing tags under the belt */
.nx-site .nx-belt-note{box-sizing:border-box;margin:16px auto 0;padding:0 20px;max-width:900px;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.nx-site .nx-belt-note li{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:0;padding:0 16px 0 12px;
  border-radius:999px;background:#fff;border:1px solid #E2E8F0;font:500 14px/1.35 var(--nx-body);color:#334155}
.nx-site .nx-belt-note b{font-weight:700;color:#0B1120}
.nx-site .nx-belt-note .nx-nw{white-space:nowrap}   /* "2–3 hours" never breaks after the dash */
.nx-site .nx-belt-dot{flex:none;width:22px;height:22px;border-radius:999px;display:grid;place-items:center}
.nx-site .nx-belt-dot svg{width:13px;height:13px}
.nx-site .nx-belt-dot--ok{background:#DCFCE7;color:#15803D}
.nx-site .nx-belt-dot--wait{background:#FEF3C7;color:#B45309}

/* tablets: the belt keeps gliding, chips a touch smaller */
@media (max-width:1023px){
  .nx-site .nx-bchip{min-height:40px;font-size:13.5px;padding:5px 14px 5px 6px;gap:8px}
  .nx-site .nx-bic{--bt:28px;border-radius:8px}.nx-site .nx-bic--wide{padding:0 6px}
  .nx-site .nx-belt-track{animation-duration:40s}.nx-site .nx-belt-row--rev .nx-belt-track{animation-duration:46s}
}
/* phones + reduced motion: no animation — the copies go and the eleven chips wrap into one static centred cloud */
@media (max-width:767px),(prefers-reduced-motion:reduce){
  .nx-site .nx-belt{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 16px;
    -webkit-mask-image:none;mask-image:none}
  .nx-site .nx-belt-row,.nx-site .nx-belt-track,.nx-site .nx-belt-set{display:contents}
  .nx-site .nx-belt-track,.nx-site .nx-belt-row--rev .nx-belt-track{animation:none !important;transform:none}
  .nx-site .nx-belt-set[aria-hidden]{display:none}
  .nx-site .nx-belt-note{margin-top:30px}
}
@media (max-width:767px){
  .nx-site .nx-beltband .elementor-widget:not(.nx-belt-w){padding:0 16px}
  .nx-site .nx-belt{margin-top:22px}
  .nx-site .nx-bchip{min-height:38px;font-size:13px;padding:4px 12px 4px 5px;gap:7px;border-radius:12px}
  .nx-site .nx-bic{--bt:26px;border-radius:7px}
  .nx-site .nx-belt-note{margin-top:24px;gap:8px;padding:0 16px}
  .nx-site .nx-belt-note li{font-size:13.5px;padding:6px 14px 6px 10px;white-space:normal}
}
/* the narrowest phones: a slightly smaller chip and gutter so the first line still takes three chips — with two per
   line, eleven chips would always leave one alone on the last line */
@media (max-width:379px){
  .nx-site .nx-belt{gap:7px;padding:0 10px}
  .nx-site .nx-bchip{font-size:12.5px;padding:4px 10px 4px 4px;gap:6px;min-height:36px}
  .nx-site .nx-bic{--bt:24px;border-radius:7px}.nx-site .nx-bic--wide{padding:0 5px}
}