/* =============================================================================
   Vine Views Pro – Public Badge Styles
   Author: Emmanuel Abimbola | VineSub Tech
   ============================================================================= */

/* ── CSS Variables (overridden by inline dynamic CSS) ──────────────────────── */
:root {
    --vvp-badge-primary:    #6c63ff;
    --vvp-badge-text:       #ffffff;
    --vvp-badge-bg:         #6c63ff;
    --vvp-badge-radius:     50px;
    --vvp-badge-font-size:  14px;
    --vvp-badge-pad-x:      12px;
    --vvp-badge-pad-y:      5px;
    --vvp-badge-shadow:     0 4px 16px rgba(108,99,255,0.4);
    --vvp-badge-anim-dur:   1500ms;
    --vvp-badge-font-wt:    600;
}

/* ── Base Badge ────────────────────────────────────────────────────────────── */
.vvp-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         var(--vvp-badge-pad-y) var(--vvp-badge-pad-x);
    background:      var(--vvp-badge-bg);
    color:           var(--vvp-badge-text);
    border-radius:   var(--vvp-badge-radius);
    font-size:       var(--vvp-badge-font-size);
    font-weight:     var(--vvp-badge-font-wt);
    box-shadow:      var(--vvp-badge-shadow);
    position:        relative;
    overflow:        hidden;
    vertical-align:  middle;
    line-height:     1.4;
    margin:          6px 0;
    cursor:          default;
    user-select:     none;
    transition:      transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    will-change:     transform;
    -webkit-font-smoothing: antialiased;
}

.vvp-badge .vvp-icon {
    display:     inline-flex;
    align-items: center;
    width:       1.1em;
    height:      1.1em;
    flex-shrink: 0;
}

.vvp-badge .vvp-icon svg {
    width:  100%;
    height: 100%;
    fill:   currentColor;
}

.vvp-badge .vvp-count {
    font-variant-numeric: tabular-nums;
    min-width:            1ch;
}

.vvp-badge .vvp-label {
    font-size:   0.85em;
    opacity:     0.88;
    font-weight: 500;
}

.vvp-badge .vvp-label-before { margin-right: 2px; }
.vvp-badge .vvp-label-after  { margin-left:  2px; }

/* ── Hover Effect ──────────────────────────────────────────────────────────── */
.vvp-badge.vvp-hover:hover {
    transform:  translateY(-2px) scale(1.04);
    box-shadow: 0 8px 28px rgba(108,99,255,0.55);
    filter:     brightness(1.08);
}

/* ── Milestone Tag ─────────────────────────────────────────────────────────── */
.vvp-milestone-tag {
    display:       inline-block;
    margin-left:   5px;
    padding:       1px 6px;
    background:    rgba(255,255,255,0.22);
    border-radius: 20px;
    font-size:     0.72em;
    font-weight:   700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DISPLAY STYLES
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Pill (default) ─────────────────────────────────────────────────────────── */
.vvp-style-pill {
    border-radius: 999px;
}

/* ── Badge ──────────────────────────────────────────────────────────────────── */
.vvp-style-badge {
    border-radius: 6px;
    padding:       4px 10px;
    font-size:     0.82em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Counter ────────────────────────────────────────────────────────────────── */
.vvp-style-counter {
    border-radius: 8px;
    flex-direction: column;
    gap:           2px;
    padding:       8px 16px;
    text-align:    center;
    background:    linear-gradient(135deg, var(--vvp-badge-bg), color-mix(in srgb, var(--vvp-badge-bg) 80%, #fff));
}
.vvp-style-counter .vvp-count {
    font-size:   1.6em;
    font-weight: 800;
    line-height: 1;
}
.vvp-style-counter .vvp-label { font-size: 0.75em; opacity: 0.8; }

/* ── Minimal ────────────────────────────────────────────────────────────────── */
.vvp-style-minimal {
    background:  transparent;
    color:       var(--vvp-badge-primary);
    box-shadow:  none;
    padding:     0;
    font-size:   0.9em;
    border-bottom: 1px dashed var(--vvp-badge-primary);
    border-radius: 0;
}
.vvp-style-minimal:hover { background: transparent; transform: none; filter: none; }

/* ── Card ───────────────────────────────────────────────────────────────────── */
.vvp-style-card {
    border-radius: 14px;
    padding:       12px 20px;
    background:    linear-gradient(135deg, var(--vvp-badge-bg) 0%, color-mix(in srgb, var(--vvp-badge-bg) 70%, #000) 100%);
    box-shadow:    0 8px 32px rgba(0,0,0,0.2);
    gap:           10px;
}
.vvp-style-card .vvp-icon { width: 1.4em; height: 1.4em; }
.vvp-style-card .vvp-count { font-size: 1.2em; font-weight: 800; }

/* ── Neon ───────────────────────────────────────────────────────────────────── */
.vvp-style-neon {
    background:    transparent;
    color:         var(--vvp-badge-primary);
    border:        2px solid var(--vvp-badge-primary);
    border-radius: 6px;
    box-shadow:
        0 0 8px var(--vvp-badge-primary),
        inset 0 0 8px rgba(108,99,255,0.08);
    text-shadow:   0 0 8px var(--vvp-badge-primary);
    animation:     vvp-neon-flicker 4s infinite;
}
.vvp-style-neon:hover {
    box-shadow:
        0 0 20px var(--vvp-badge-primary),
        0 0 40px var(--vvp-badge-primary),
        inset 0 0 12px rgba(108,99,255,0.15);
}

/* ── Glass ──────────────────────────────────────────────────────────────────── */
.vvp-style-glass {
    background:    rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:        1px solid rgba(255,255,255,0.28);
    border-radius: 14px;
    box-shadow:    0 8px 32px rgba(31,38,135,0.18);
    color:         #fff;
}
.vvp-style-glass:hover {
    background:    rgba(255,255,255,0.22);
    box-shadow:    0 12px 40px rgba(31,38,135,0.28);
}

/* ── Flame ──────────────────────────────────────────────────────────────────── */
.vvp-style-flame {
    background:    linear-gradient(135deg, #ff6b35, #f7c59f, #ffb347);
    color:         #fff;
    border-radius: 999px;
    box-shadow:    0 4px 20px rgba(255,107,53,0.5);
    animation:     vvp-flame-pulse 2s ease-in-out infinite;
}
.vvp-style-flame .vvp-icon { filter: drop-shadow(0 0 4px rgba(255,255,255,0.6)); }

/* ══════════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Glow ───────────────────────────────────────────────────────────────────── */
.vvp-badge.vvp-glow {
    animation: vvp-glow-pulse 2.5s ease-in-out infinite;
}

/* ── Pulse animation ────────────────────────────────────────────────────────── */
.vvp-badge.vvp-anim-pulse .vvp-icon {
    animation: vvp-icon-pulse 2s ease-in-out infinite;
}

/* ── Bounce animation ───────────────────────────────────────────────────────── */
.vvp-badge.vvp-anim-bounce.vvp-in-view {
    animation: vvp-bounce-in 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ── Flip animation ─────────────────────────────────────────────────────────── */
.vvp-badge.vvp-anim-flip.vvp-in-view {
    animation: vvp-flip-in 0.7s ease forwards;
}

/* ── Fade animation ─────────────────────────────────────────────────────────── */
.vvp-badge.vvp-anim-fade {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.vvp-badge.vvp-anim-fade.vvp-in-view { opacity: 1; }

/* ── Sparkle animation ──────────────────────────────────────────────────────── */
.vvp-badge.vvp-anim-sparkle .vvp-icon {
    animation: vvp-sparkle 1.8s ease-in-out infinite alternate;
}

/* ── Animate-in (used after AJAX update) ───────────────────────────────────── */
.vvp-badge.vvp-animate-in {
    animation: vvp-pop 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ── Particles ──────────────────────────────────────────────────────────────── */
.vvp-particles { display: none; }
.vvp-badge.vvp-in-view .vvp-particles {
    display:  block;
    position: absolute;
    inset:    0;
    pointer-events: none;
    overflow: hidden;
}
.vvp-particles::before,
.vvp-particles::after {
    content:  '';
    position: absolute;
    width:    4px;
    height:   4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    animation: vvp-particle-float 3s ease-in-out infinite;
}
.vvp-particles::after {
    left:             60%;
    animation-delay:  0.8s;
    width:            3px;
    height:           3px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════════════ */

@keyframes vvp-glow-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(108,99,255,0.4); }
    50%       { box-shadow: 0 4px 32px rgba(108,99,255,0.75), 0 0 0 4px rgba(108,99,255,0.15); }
}

@keyframes vvp-icon-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.22); opacity: 0.8; }
}

@keyframes vvp-bounce-in {
    0%   { transform: scale(0.3); opacity: 0; }
    50%  { transform: scale(1.1); opacity: 1; }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes vvp-flip-in {
    0%   { transform: perspective(400px) rotateY(-90deg); opacity: 0; }
    40%  { transform: perspective(400px) rotateY(20deg); }
    70%  { transform: perspective(400px) rotateY(-10deg); }
    100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
}

@keyframes vvp-sparkle {
    0%   { transform: rotate(0deg) scale(1);    filter: brightness(1); }
    100% { transform: rotate(15deg) scale(1.15); filter: brightness(1.4) drop-shadow(0 0 6px #fff); }
}

@keyframes vvp-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    70%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

@keyframes vvp-neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        box-shadow: 0 0 8px var(--vvp-badge-primary), inset 0 0 8px rgba(108,99,255,0.08);
        opacity: 1;
    }
    20%, 24%, 55% {
        box-shadow: none;
        opacity: 0.85;
    }
}

@keyframes vvp-flame-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(255,107,53,0.5); transform: scale(1); }
    50%       { box-shadow: 0 6px 32px rgba(255,107,53,0.75); transform: scale(1.03); }
}

@keyframes vvp-particle-float {
    0%   { transform: translate(10px, 0)   scale(1);   opacity: 0.8; }
    50%  { transform: translate(20px, -12px) scale(0.7); opacity: 0.4; }
    100% { transform: translate(15px, -24px) scale(0.2); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   POPULAR POSTS WIDGET & SHORTCODE
   ══════════════════════════════════════════════════════════════════════════════ */

.vvp-popular-widget,
.vvp-popular-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.vvp-popular-widget li,
.vvp-popular-list li {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap:           10px;
}

.vvp-popular-widget li:last-child,
.vvp-popular-list  li:last-child { border-bottom: none; }

.vvp-popular-widget li a,
.vvp-popular-list  li a {
    flex:          1;
    font-size:     0.9em;
    line-height:   1.4;
    color:         inherit;
    text-decoration: none;
    transition:    color 0.2s;
}

.vvp-popular-widget li a:hover,
.vvp-popular-list  li a:hover { color: var(--vvp-badge-primary, #6c63ff); }

.vvp-widget-count {
    display:       inline-block;
    background:    var(--vvp-badge-bg, #6c63ff);
    color:         var(--vvp-badge-text, #fff);
    font-size:     0.75em;
    font-weight:   700;
    padding:       2px 8px;
    border-radius: 999px;
    white-space:   nowrap;
    flex-shrink:   0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .vvp-badge {
        font-size:   calc(var(--vvp-badge-font-size) * 0.9);
        padding:     calc(var(--vvp-badge-pad-y) * 0.85) calc(var(--vvp-badge-pad-x) * 0.85);
    }
    .vvp-style-counter .vvp-count { font-size: 1.3em; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE AUTO-ADAPT
   ══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    .vvp-style-glass {
        background:  rgba(0,0,0,0.25);
        border-color: rgba(255,255,255,0.15);
    }
    .vvp-popular-widget li,
    .vvp-popular-list  li { border-bottom-color: rgba(255,255,255,0.08); }
}

/* ── Print ──────────────────────────────────────────────────────────────────── */
@media print {
    .vvp-badge {
        box-shadow: none !important;
        animation:  none !important;
    }
}