/**
 * Professional Visitor Counter — Frontend CSS v2.2
 *
 * Scoped under .pvc-counter so no theme rule can override digit styles.
 * --pvc-digit-h and --pvc-digit-w are set by PHP (output_css_vars) as
 * explicit px values so JS height reads are reliable before fonts load.
 *
 * @package ProfessionalVisitorCounter
 */

/* ── Base variables (overridden by PHP <style id="pvc-css-vars">) ─── */
:root {
    --pvc-font-size  : 36px;
    --pvc-digit-h    : 45px;
    --pvc-digit-w    : 27px;
    --pvc-color      : #003366;
    --pvc-bg         : #f0f4f8;
    --pvc-radius     : 8px;
    --pvc-transition : 0.6s cubic-bezier(0.25, 1, 0.35, 1);
}

/* ── Outer counter wrapper ───────────────────────────────────────── */
.pvc-counter {
    all              : initial;       /* reset any theme inheritance */
    display          : inline-flex;
    flex-wrap        : wrap;
    align-items      : center;
    justify-content  : center;
    gap              : 6px;
    font-size        : var(--pvc-font-size);
    font-family      : inherit;
    line-height      : 1;
    vertical-align   : middle;
    box-sizing       : border-box;
}

/* Restore pointer events and font inheritance stripped by all:initial */
.pvc-counter *,
.pvc-counter *::before,
.pvc-counter *::after {
    box-sizing: border-box;
}

.pvc-align-left   { justify-content: flex-start; width: 100%; }
.pvc-align-center { justify-content: center;     width: 100%; }
.pvc-align-right  { justify-content: flex-end;   width: 100%; }

.pvc-label {
    display    : block;
    width      : 100%;
    font-size  : .42em;
    font-family: inherit;
    font-weight: 600;
    opacity    : .7;
    margin-bottom: 6px;
    color      : inherit;
}
.pvc-icon   { font-size: .5em; line-height: 1; }
.pvc-prefix,
.pvc-suffix {
    font-size  : .42em;
    font-weight: 600;
    opacity    : .8;
    align-self : flex-end;
    padding-bottom: .1em;
    font-family: inherit;
}

/* ── Digit strip ─────────────────────────────────────────────────── */
.pvc-digits-wrap {
    display    : inline-flex;
    align-items: center;
    gap        : 2px;
}

.pvc-digit-sep {
    align-self    : flex-end;
    padding-bottom: .05em;
    font-weight   : 700;
    font-size     : .7em;
    opacity       : .65;
    line-height   : 1;
    flex-shrink   : 0;
}

/* ── Reel column (shared by all 4 reel styles) ───────────────────── */
.pvc-digit-reel {
    position     : relative;
    overflow     : hidden;
    width        : var(--pvc-digit-w);
    height       : var(--pvc-digit-h);
    border-radius: 3px;
    flex-shrink  : 0;
}

.pvc-digit-inner {
    display       : flex;
    flex-direction: column;
    will-change   : transform;
    transition    : transform var(--pvc-transition);
}

.pvc-digit-face {
    display          : flex;
    align-items      : center;
    justify-content  : center;
    width            : var(--pvc-digit-w);
    height           : var(--pvc-digit-h);
    font-weight      : 800;
    font-variant-numeric: tabular-nums;
    flex-shrink      : 0;
    line-height      : 1;
    user-select      : none;
    -webkit-user-select: none;
}

/* Top/bottom fade on reel styles */
.pvc-digit-reel::before,
.pvc-digit-reel::after {
    content       : '';
    position      : absolute;
    left: 0; right: 0;
    height        : 28%;
    z-index       : 2;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   STYLE 1 — Classic Dark Odometer
   ════════════════════════════════════════════════════════════════ */
.pvc-style-odometer .pvc-digits-wrap {
    background   : #1a1a2e;
    padding      : 3px 4px;
    border-radius: 8px;
    box-shadow   : 0 4px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
    gap          : 3px;
}
.pvc-style-odometer .pvc-digit-reel {
    background: #16213e;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06);
}
.pvc-style-odometer .pvc-digit-reel::before {
    top: 0;
    background  : linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.pvc-style-odometer .pvc-digit-reel::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
    border-top: 1px solid rgba(255,255,255,.06);
}
.pvc-style-odometer .pvc-digit-face {
    color      : #e2e8f0;
    text-shadow: 0 0 8px rgba(167,187,255,.35);
    font-family: 'Courier New', Courier, monospace;
}
.pvc-style-odometer .pvc-digit-sep { color: #94a3b8; }
.pvc-style-odometer .pvc-prefix,
.pvc-style-odometer .pvc-suffix    { color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════════
   STYLE 2 — Clean Light Reel
   ════════════════════════════════════════════════════════════════ */
.pvc-style-reel-light .pvc-digits-wrap {
    background   : #f8fafc;
    padding      : 3px 4px;
    border-radius: 10px;
    box-shadow   : 0 2px 12px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.07);
    gap          : 3px;
}
.pvc-style-reel-light .pvc-digit-reel {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
}
.pvc-style-reel-light .pvc-digit-reel::before {
    top: 0;
    background  : linear-gradient(to bottom, rgba(248,250,252,.9), transparent);
    border-bottom: 1px solid #e2e8ef;
}
.pvc-style-reel-light .pvc-digit-reel::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(248,250,252,.9), transparent);
    border-top: 1px solid #e2e8ef;
}
.pvc-style-reel-light .pvc-digit-face { color: #1e293b; font-weight: 900; }
.pvc-style-reel-light .pvc-digit-sep  { color: #64748b; }

/* ═══════════════════════════════════════════════════════════════════
   STYLE 3 — Neon Glow
   ════════════════════════════════════════════════════════════════ */
.pvc-style-reel-neon .pvc-digits-wrap {
    background   : #0a0a1a;
    padding      : 3px 5px;
    border-radius: 10px;
    box-shadow   : 0 0 30px rgba(0,255,200,.15), 0 0 0 1px rgba(0,255,200,.2);
    gap          : 4px;
}
.pvc-style-reel-neon .pvc-digit-reel {
    background: #0d0d24;
    box-shadow: 0 0 0 1px rgba(0,255,200,.18), inset 0 0 10px rgba(0,255,200,.05);
}
.pvc-style-reel-neon .pvc-digit-reel::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(10,10,26,.8), transparent);
}
.pvc-style-reel-neon .pvc-digit-reel::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(10,10,26,.8), transparent);
}
.pvc-style-reel-neon .pvc-digit-face {
    color      : #00ffc8;
    text-shadow: 0 0 8px rgba(0,255,200,.9), 0 0 20px rgba(0,255,200,.4);
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
}
.pvc-style-reel-neon .pvc-digit-sep {
    color: #00ffc8; text-shadow: 0 0 6px rgba(0,255,200,.7); opacity: 1;
}
.pvc-style-reel-neon .pvc-prefix,
.pvc-style-reel-neon .pvc-suffix { color: #00ffc8; text-shadow: 0 0 6px rgba(0,255,200,.6); }

/* ═══════════════════════════════════════════════════════════════════
   STYLE 4 — Gradient Reel
   ════════════════════════════════════════════════════════════════ */
.pvc-style-reel-gradient .pvc-digits-wrap {
    background   : linear-gradient(135deg, #667eea, #764ba2);
    padding      : 4px 5px;
    border-radius: 12px;
    box-shadow   : 0 8px 30px rgba(102,126,234,.45);
    gap          : 4px;
}
.pvc-style-reel-gradient .pvc-digit-reel {
    background     : rgba(255,255,255,.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow     : 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.25);
}
.pvc-style-reel-gradient .pvc-digit-reel::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(102,126,234,.6), transparent);
}
.pvc-style-reel-gradient .pvc-digit-reel::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(118,75,162,.6), transparent);
}
.pvc-style-reel-gradient .pvc-digit-face {
    color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.3); font-weight: 900;
}
.pvc-style-reel-gradient .pvc-digit-sep { color: rgba(255,255,255,.7); opacity: 1; }
.pvc-style-reel-gradient .pvc-prefix,
.pvc-style-reel-gradient .pvc-suffix    { color: rgba(255,255,255,.8); }

/* ═══════════════════════════════════════════════════════════════════
   STYLE 5 — Flip Clock  (fully rebuilt)
   ════════════════════════════════════════════════════════════════ */

/*
 * Architecture:
 *
 *  .pvc-style-flip .pvc-digits-wrap
 *    └─ .pvc-flip-digit   (one per digit, sized in px by JS)
 *         ├─ .pvc-flip-upper  (top half — shows top of current digit)
 *         │    └─ .pvc-flip-num
 *         ├─ .pvc-flip-lower  (bottom half — shows bottom of current digit)
 *         │    └─ .pvc-flip-num
 *         ├─ .pvc-flip-panel.pvc-flip-out  (injected during animation)
 *         └─ .pvc-flip-panel.pvc-flip-in   (injected during animation)
 *
 * Key fixes vs previous version:
 *  — overflow:visible on .pvc-flip-digit so rotateX is not clipped
 *  — perspective on each .pvc-flip-digit individually (not on parent)
 *  — .pvc-flip-num height = 50% of card, not 100% (was overflowing)
 *  — line-height = var(--pvc-flip-cell-h) = half the card height
 *  — isolation:isolate prevents z-index bleed from theme
 *  — will-change:transform only on animating panels (not static halves)
 *  — animation cleanup: panels removed via JS AFTER animation completes
 */

/* Card height driven by CSS var so JS can read it reliably */
.pvc-style-flip {
    --pvc-flip-h      : var(--pvc-digit-h);        /* full card height */
    --pvc-flip-w      : var(--pvc-digit-w);         /* full card width  */
    --pvc-flip-half   : calc(var(--pvc-flip-h) / 2);/* half card height */
    --pvc-flip-bg-top : #1e293b;
    --pvc-flip-bg-bot : #16213e;
    --pvc-flip-color  : #e2e8f0;
    --pvc-flip-seam   : rgba(0,0,0,.7);
    --pvc-flip-dur    : 0.32s;
}

.pvc-style-flip .pvc-digits-wrap {
    gap: 4px;
    align-items: center;
}

.pvc-flip-digit {
    position   : relative;
    display    : inline-block;
    width      : var(--pvc-flip-w);
    height     : var(--pvc-flip-h);
    border-radius: 6px;
    flex-shrink: 0;
    isolation  : isolate;              /* prevents z-index bleed        */
    perspective: 400px;                /* perspective per card           */
    overflow   : visible;              /* must be visible for 3D rotate  */
    /* shadow via ::before to allow overflow:visible on parent */
}

/* Card shadow — separate from the card so overflow:visible works */
.pvc-flip-digit::before {
    content      : '';
    position     : absolute;
    inset        : 0;
    border-radius: 6px;
    box-shadow   : 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
    z-index      : -1;
    pointer-events: none;
}

/* Horizontal seam line */
.pvc-flip-digit::after {
    content   : '';
    position  : absolute;
    left: 2px; right: 2px;
    top       : calc(var(--pvc-flip-half) - 1px);
    height    : 2px;
    background: var(--pvc-flip-seam);
    z-index   : 20;
    pointer-events: none;
    border-radius: 1px;
}

/* Upper static half */
.pvc-flip-upper {
    position      : absolute;
    top           : 0;
    left          : 0;
    right         : 0;
    height        : var(--pvc-flip-half);
    overflow      : hidden;
    background    : var(--pvc-flip-bg-top);
    border-radius : 6px 6px 0 0;
    display       : flex;
    align-items   : flex-start;   /* num anchored to TOP  → only top  half visible */
    justify-content: center;
    z-index       : 1;
}

/* Lower static half */
.pvc-flip-lower {
    position      : absolute;
    bottom        : 0;
    left          : 0;
    right         : 0;
    height        : var(--pvc-flip-half);
    overflow      : hidden;
    background    : var(--pvc-flip-bg-bot);
    border-radius : 0 0 6px 6px;
    display       : flex;
    align-items   : flex-end;     /* num anchored to BOTTOM → only bottom half visible */
    justify-content: center;
    z-index       : 1;
}

/* Digit number inside upper/lower — half the total card height */
.pvc-flip-upper .pvc-flip-num,
.pvc-flip-lower .pvc-flip-num {
    display     : block;
    font-family : 'Courier New', Courier, monospace;
    font-size   : calc(var(--pvc-flip-h) * 0.56);
    font-weight : 800;
    color       : var(--pvc-flip-color);
    /*
     * CRITICAL: height and line-height must be the FULL card height.
     * Each panel is only 50% tall with overflow:hidden, so only the
     * top half (upper) or bottom half (lower) of this full-height span
     * is ever visible — giving the split-digit appearance.
     * Setting height = half would render a COMPLETE digit in each panel,
     * which is exactly the doubled-digit bug shown in the screenshot.
     */
    line-height : var(--pvc-flip-h);
    height      : var(--pvc-flip-h);
    width       : var(--pvc-flip-w);
    text-align  : center;
    letter-spacing: -0.02em;
    flex-shrink : 0;
    user-select : none;
    -webkit-user-select: none;
}

/* ── Animated fold panels ─────────────────────────────────────────── */

.pvc-flip-panel {
    position       : absolute;
    left           : 0;
    right          : 0;
    height         : var(--pvc-flip-half);
    overflow       : hidden;
    will-change    : transform;
    z-index        : 10;
    display        : flex;
    justify-content: center;
    transform-origin: 50% 100%;      /* overridden per variant below */
    -webkit-backface-visibility: hidden;
    backface-visibility        : hidden;
    transform-style: preserve-3d;
}

.pvc-flip-panel .pvc-flip-num {
    display     : block;
    font-family : 'Courier New', Courier, monospace;
    font-size   : calc(var(--pvc-flip-h) * 0.56);
    font-weight : 800;
    color       : var(--pvc-flip-color);
    /* Full card height — panel overflow:hidden clips to show the correct half */
    height      : var(--pvc-flip-h);
    line-height : var(--pvc-flip-h);
    width       : var(--pvc-flip-w);
    text-align  : center;
    letter-spacing: -0.02em;
    flex-shrink : 0;
    user-select : none;
    -webkit-user-select: none;
}

/* Fold-out: top half of OLD digit folds downward (away from viewer) */
.pvc-flip-out {
    top            : 0;
    align-items    : flex-start;  /* top of full-height num aligns to panel top */
    background     : var(--pvc-flip-bg-top);
    transform-origin: 50% 100%;
    border-radius  : 6px 6px 0 0;
    animation      : pvc-fold-out var(--pvc-flip-dur) ease-in forwards;
}

/* Fold-in: bottom half of NEW digit folds up into place */
.pvc-flip-in {
    bottom         : 0;
    align-items    : flex-end;    /* bottom of full-height num aligns to panel bottom */
    background     : var(--pvc-flip-bg-bot);
    transform-origin: 50% 0%;
    border-radius  : 0 0 6px 6px;
    animation      : pvc-fold-in var(--pvc-flip-dur) ease-out var(--pvc-flip-dur) both;
}

@keyframes pvc-fold-out {
    0%   { transform: rotateX(0deg);    }
    100% { transform: rotateX(-90deg);  }
}

@keyframes pvc-fold-in {
    0%   { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg);  }
}

.pvc-style-flip .pvc-digit-sep {
    color      : #94a3b8;
    font-size  : calc(var(--pvc-flip-h) * 0.4);
    font-weight: 700;
    align-self : center;
    padding    : 0 1px;
    line-height: 1;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   STYLE 6 — Badge
   ════════════════════════════════════════════════════════════════ */
.pvc-style-badge .pvc-digits-wrap {
    background   : var(--pvc-bg, #4f46e5);
    color        : var(--pvc-color, #fff);
    padding      : .22em .6em;
    border-radius: 50px;
    font-weight  : 800;
    font-size    : 1em;
    box-shadow   : 0 3px 12px rgba(0,0,0,.2);
    letter-spacing: .02em;
    font-family  : inherit;
}

/* ═══════════════════════════════════════════════════════════════════
   STYLE 7 — Plain
   ════════════════════════════════════════════════════════════════ */
.pvc-style-plain .pvc-digits-wrap {
    font-weight : 800;
    color       : var(--pvc-color, #1e293b);
    font-size   : 1em;
    font-family : inherit;
}

/* ── Footer integration ──────────────────────────────────────────── */
.pvc-footer-counter {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    :root {
        --pvc-font-size : clamp(22px, 5.5vw, 36px);
    }
}
@media (max-width: 380px) {
    :root {
        --pvc-font-size : clamp(18px, 5vw, 28px);
    }
}

/* ── Accessibility — reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pvc-digit-inner       { transition: none !important; }
    .pvc-flip-out,
    .pvc-flip-in           { animation-duration: 1ms !important; }
}