/* Visitor Insight Pro — Public Counter Styles */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&display=swap');

.vip-counter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    font-family: 'Sora', sans-serif;
    max-width: 100%;
}

/* Sizes */
.vip-size-small  .vip-stat { padding: 10px 14px; }
.vip-size-small  .vip-number { font-size: 1.4rem; }
.vip-size-small  .vip-label  { font-size: 9px; }
.vip-size-medium .vip-stat { padding: 14px 20px; }
.vip-size-medium .vip-number { font-size: 1.9rem; }
.vip-size-medium .vip-label  { font-size: 10px; }
.vip-size-large  .vip-stat { padding: 20px 28px; }
.vip-size-large  .vip-number { font-size: 2.6rem; }
.vip-size-large  .vip-label  { font-size: 11px; }

/* Stat Block */
.vip-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 14px;
    min-width: 90px;
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}
.vip-stat:hover { transform: translateY(-3px); }

.vip-icon  { font-size: 1.4em; margin-bottom: 4px; }
.vip-number { font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.vip-label  { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 5px; }

/* ── Themes ── */

/* Dark */
.vip-theme-dark .vip-stat {
    background: #1a1d27;
    border: 1px solid #2a2d3e;
    color: #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.vip-theme-dark .vip-number { color: #fff; }
.vip-theme-dark .vip-label  { color: #64748b; }
.vip-theme-dark .vip-online .vip-number { color: #22c55e; }

/* Light */
.vip-theme-light .vip-stat {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.vip-theme-light .vip-number { color: #0f172a; }
.vip-theme-light .vip-label  { color: #94a3b8; }
.vip-theme-light .vip-online .vip-number { color: #16a34a; }

/* Gradient */
.vip-theme-gradient .vip-stat {
    color: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
.vip-theme-gradient .vip-stat:nth-child(1) { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.vip-theme-gradient .vip-stat:nth-child(2) { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.vip-theme-gradient .vip-stat:nth-child(3) { background: linear-gradient(135deg,#06b6d4,#3b82f6); }
.vip-theme-gradient .vip-stat:nth-child(4) { background: linear-gradient(135deg,#22c55e,#10b981); }
.vip-theme-gradient .vip-number { color: #fff; }
.vip-theme-gradient .vip-label  { color: rgba(255,255,255,0.8); }

/* Glass */
.vip-theme-glass .vip-stat {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.vip-theme-glass .vip-number { color: #fff; }
.vip-theme-glass .vip-label  { color: rgba(255,255,255,0.6); }
.vip-theme-glass .vip-online .vip-number { color: #86efac; }

/* ── Inline Style ── */
.vip-style-inline { flex-direction: row; align-items: center; }
.vip-style-inline .vip-stat {
    flex-direction: row; gap: 8px; padding: 10px 16px;
    border-radius: 8px;
}
.vip-style-inline .vip-icon  { font-size: 1.1em; margin: 0; }
.vip-style-inline .vip-number { font-size: 1.1rem; }
.vip-style-inline .vip-label { margin: 0; }

/* ── Minimal Style ── */
.vip-style-minimal .vip-stat {
    background: none; border: none; box-shadow: none;
    border-right: 2px solid #e2e8f0; border-radius: 0; padding: 0 20px;
}
.vip-style-minimal .vip-stat:last-child { border-right: none; }
.vip-style-minimal .vip-number { font-size: 1.5rem; color: #1e293b; }
.vip-style-minimal .vip-label  { color: #94a3b8; }

/* ── Online Pulse ── */
.vip-online .vip-icon { animation: vip-pulse 2s infinite; }
@keyframes vip-pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .vip-counter { flex-direction: column; width: 100%; }
    .vip-stat { min-width: unset; }
}

/* ── Count-up animation ── */
.vip-counting { animation: vip-pop 0.3s ease; }
@keyframes vip-pop {
    0%   { transform: scale(0.95); }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}