/* ── ADD-ON LAYER for the redesign's #holders wallet card ─────────────────
   Only the pieces the shipped build has no styling for: the USD headline,
   the zero-state note, the supporting stat row and the share card. Everything
   else stays on the redesign's own classes and --wow-* tokens.
   ──────────────────────────────────────────────────────────────────────── */

/* the payout tracker leads on dollars, share count underneath */
.payout-under{margin:14px 0 0;font-size:clamp(21px,2.8vw,30px);color:var(--wow-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.payout-under small{font-size:.58em;letter-spacing:.09em;color:var(--wow-gold);margin-left:.4em}
.payout-under em{display:block;margin-top:9px;font-style:normal;font-size:12px;color:var(--wow-faint)}
.payout-clean p:last-child.payout-under{color:var(--wow-text)}

/* the dollar figure is the headline; GMEB is the supporting line */
.wallet-reward-headline{padding-bottom:4px}
.wallet-reward-headline>span{
  display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--wow-muted)
}
.wallet-reward-headline>strong{
  display:block;margin-top:10px;font-size:clamp(40px,5.4vw,64px);font-weight:300;
  letter-spacing:-.05em;line-height:1;color:var(--wow-text);font-variant-numeric:tabular-nums
}
.wallet-reward-headline>strong.is-zero{color:var(--wow-faint)}
.wallet-reward-gmeb{
  margin:12px 0 0;font-size:clamp(18px,2.2vw,24px);letter-spacing:-.02em;
  color:var(--wow-text);font-variant-numeric:tabular-nums
}
.wallet-reward-gmeb small{font-size:.58em;letter-spacing:.09em;color:var(--wow-gold);margin-left:.35em}
.wallet-reward-gmeb em{display:block;margin-top:8px;font-style:normal;font-size:12px;color:var(--wow-faint)}

.wallet-reward-verdict{
  margin:18px 0 0;padding:13px 16px;border-radius:12px;
  background:rgba(255,255,255,.028);border-left:2px solid var(--wow-gold);
  color:var(--wow-muted);font-size:14px;line-height:1.6
}

.wallet-reward-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:22px;
  background:var(--wow-border);border:1px solid var(--wow-border);border-radius:14px;overflow:hidden
}
.wallet-reward-grid>div{background:var(--wow-panel);padding:14px 16px}
.wallet-reward-grid span{
  display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--wow-faint)
}
.wallet-reward-grid strong{
  display:block;margin-top:6px;font-size:19px;font-weight:400;letter-spacing:-.03em;
  color:var(--wow-text);font-variant-numeric:tabular-nums
}

.wallet-reward-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.wallet-reward-actions>button,.wallet-reward-actions>a{
  font:inherit;font-size:13px;cursor:pointer;border-radius:999px;padding:11px 20px;
  border:1px solid var(--wow-border);background:transparent;color:var(--wow-text);
  transition:background .2s,border-color .2s,transform .12s
}
.wallet-reward-actions>button{background:var(--wow-red);border-color:var(--wow-red);color:#fff}
.wallet-reward-actions>button:hover:not(:disabled){background:#e6313e;transform:translateY(-1px)}
.wallet-reward-actions>button:disabled{opacity:.55;cursor:default}
.wallet-reward-actions>a:hover{border-color:var(--wow-faint);background:rgba(255,255,255,.04)}
.wallet-reward-actions>[hidden]{display:none}

.wallet-reward-figure{margin:22px 0 0}
.wallet-reward-figure img{width:100%;height:auto;border:1px solid var(--wow-border);border-radius:14px}
.wallet-reward-figure figcaption{margin-top:9px;font-size:11px;letter-spacing:.05em;color:var(--wow-faint)}

@media(max-width:760px){
  .wallet-reward-grid{grid-template-columns:1fr}
  .wallet-reward-actions>button,.wallet-reward-actions>a{flex:1 1 100%;text-align:center}
}

/* ── the container itself ─────────────────────────────────────────────────
   The shipped .wallet-rewards-result is a grid built for exactly three equal
   cells (GMEB RECEIVED / PENDING / TOTAL EARNED) with dividing borders between
   them. This version stacks a headline, a note, a stat row and the card, so
   the grid and its `> div` rules have to be unwound — otherwise every block
   gets laid into a column and the dollar figure ends up the size of a caption.
   ──────────────────────────────────────────────────────────────────────── */
.wallet-rewards-result{display:block!important;grid-template-columns:none!important;margin-top:22px}
.wallet-rewards-result>div{padding:0!important;border-left:0!important;min-width:0}
.wallet-rewards-result>div+div{border-left:0!important;padding-left:0!important}
.wallet-reward-grid>div,.wallet-reward-grid>div+div{padding:14px 16px!important}
/* his rule paints .wallet-reward-primary gold; the headline is chalk now */
.wallet-reward-headline strong{color:var(--wow-text)}
.wallet-reward-headline strong.is-zero{color:var(--wow-faint)}

/* his `.wallet-rewards-result span{font-size:7.8px}` was shrinking the GMEB
   figure to caption size — it targets the span directly, so inheriting from
   the paragraph is not enough to beat it */
.wallet-reward-gmeb span{font-size:1em;letter-spacing:inherit;display:inline}
.wallet-reward-gmeb small{display:inline}
.wallet-reward-gmeb{display:block;white-space:normal}

/* The payout caption carries the share count now, so it earns a little more
   size than the 12px his rule sets — and the GMEB unit takes the gold the
   design uses for the underlying everywhere else. Same selector and
   !important as his, loaded after, so it is a deliberate override not a fight. */
.total-paid-card #wowPaidUsd{font-size:15px!important;color:var(--wow-text)!important;margin-top:18px!important}
.total-paid-card #wowPaidUsd b{font-weight:400;font-size:.72em;letter-spacing:.09em;color:var(--wow-gold);margin-left:.35em}
.total-paid-card #wowPaidUsd em{display:block;margin-top:7px;font-style:normal;font-size:11.5px;color:#68656c}