/* ============================================================
   Deposit Statistics — shared page-template styles
   Loaded on all page templates (general, ovdp, crypto, coins)
   via wprs_enqueue_page_assets() in functions.php
   ============================================================ */

/* ── Design tokens shared across page templates ─────────────── */
:root {
    --green:      #2E9D58;
    --green-soft: rgba(46,157,88,.10);
    --red:        #CD0E00;
    --blue:       #1F6FE0;
    --blue-soft:  rgba(31,111,224,.10);
}

/* ── Block layout ────────────────────────────────────────────── */
section.block { padding: 36px 0 }
.block + .block { padding-top: 0 }

/* ── Panel header typography (general + crypto) ─────────────── */
.panel__header h3 { margin: 0 0 3px }

/* ── Donut chart layout base (general + crypto) ─────────────── */
.donut-chart { display: flex; flex-direction: column; align-items: center; gap: 18px }
.donut-chart__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center }

/* ── Responsive ──────────────────────────────────────────────── */

/* 1024px */
@media (max-width: 1024px) {
    .hero-card { padding: 28px 30px; gap: 32px }
    .hero-card__value { font-size: 52px }
}

/* 768px */
@media (max-width: 768px) {
    section.block { padding: 24px 0 }
    .hero-card__value { font-size: 48px }
    .hero-card__actions { flex-wrap: wrap }
}

/* 560px */
@media (max-width: 560px) {
    .hero-card { padding: 20px }
    .hero-card__grid { grid-template-columns: 1fr }
    .hero-card__value { font-size: 40px }
    .hero-card__value-cents,
    .hero-card__value-currency { font-size: 22px }
    .hero-card__actions { flex-direction: column }
    .hero-card__btn { justify-content: center }
}