/**
 * Etinion Stats Counter — etst-stats.css
 * Widget: Etinion Stats Counter
 * Prefix: etst-
 */

/* ══════════════════════════════════════════════════════
   1. ROOT & LAYOUT
   ══════════════════════════════════════════════════════ */

.etst-stats {
    display: flex;
    width: 100%;
}

/* ── Horizontal ── */
.etst-layout-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.etst-layout-horizontal .etst-item {
    flex: 1 1 0;
    min-width: 120px;
}

/* ── Grid ── */
.etst-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--etst-cols-d, 4), 1fr);
}

@media (max-width: 1024px) {
    .etst-layout-grid {
        grid-template-columns: repeat(var(--etst-cols-t, 2), 1fr);
    }
}

@media (max-width: 767px) {
    .etst-layout-grid {
        grid-template-columns: repeat(var(--etst-cols-m, 1), 1fr);
    }

    .etst-layout-horizontal {
        flex-direction: column;
        align-items: center;
    }
}

/* ══════════════════════════════════════════════════════
   2. ITEM
   ══════════════════════════════════════════════════════ */

.etst-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    text-align: center;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   3. ICON
   ══════════════════════════════════════════════════════ */

.etst-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #3b82f6;
    margin-bottom: 12px;
}

.etst-icon svg {
    width: 40px;
    height: 40px;
}

.etst-icon i {
    line-height: 1;
}

/* ══════════════════════════════════════════════════════
   4. NUMBER
   ══════════════════════════════════════════════════════ */

.etst-number {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 36px;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
    margin-bottom: 4px;
}

.etst-prefix,
.etst-suffix {
    font-size: 0.65em;
    font-weight: 600;
    color: inherit;
}

.etst-value {
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════
   5. LABEL
   ══════════════════════════════════════════════════════ */

.etst-label {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    margin-top: 4px;
}

/* ══════════════════════════════════════════════════════
   6. EMPTY
   ══════════════════════════════════════════════════════ */

.etst-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

/* ══════════════════════════════════════════════════════
   7. RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .etst-number {
        font-size: 28px;
    }

    .etst-item {
        padding: 16px 12px;
    }
}