/* ============================================================
   SK CHIT FUNDS – ANALYTICS COUNTER STYLES
   Designed to blend naturally with the existing footer
   (footer.css) using the same design tokens.
   ============================================================ */

/* ── Stats bar: sits just above the legal bar ── */
.sk-stats-bar {
    border-top: 1px solid rgba(11, 107, 58, 0.15);
    padding: 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* ── Individual stat item ── */
.sk-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    color: var(--green-950, #082F2B);
    opacity: 0.75;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.sk-stat-item:hover {
    opacity: 1;
}

/* ── The numeric value ── */
.sk-stat-value {
    font-weight: 700;
    font-size: 0.925rem;
    color: var(--green-500, #0b6b3a);
    font-variant-numeric: tabular-nums;
    min-width: 2.5ch;           /* prevents layout shift while loading */
    display: inline-block;
}

/* ── Small dot separator between icon and label ── */
.sk-stat-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-gold, #b8892f);
    flex-shrink: 0;
    display: inline-block;
}

/* ── Live pulse indicator (green dot before live count) ── */
.sk-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    display: inline-block;
    animation: sk-pulse 2s infinite;
}

@keyframes sk-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(0.85); }
}

/* ── Divider between two stat items ── */
.sk-stats-divider {
    width: 1px;
    height: 1rem;
    background: rgba(11, 107, 58, 0.2);
    flex-shrink: 0;
}

/* ── Error state: dim items when backend is unreachable ── */
.sk-stats-error .sk-stat-item {
    opacity: 0.35;
}

/* ── Responsive: stack on small screens ── */
@media (max-width: 480px) {
    .sk-stats-bar {
        gap: 1rem;
    }
    .sk-stats-divider {
        display: none;
    }
    .sk-stat-item {
        font-size: 0.8rem;
    }
}