/* =============================================================
   24 Ghanta View Counter — Frontend Styles
   All 4 variants. Colors injected via inline CSS vars from PHP.
   ============================================================= */

.gkk-wrapper {
    margin: 1.5rem 0;
    font-family: inherit;
    line-height: 1;
}

/* ---------------------------------------------------------------
   SHARED: Numbers & Labels
--------------------------------------------------------------- */
.gkk-num {
    font-size:   var(--gkk-num-size, 18px);
    font-weight: var(--gkk-num-weight, 500);
    color:       var(--gkk-num-color, #f1efe8);
    display:     block;
    line-height: 1.1;
}

.gkk-lbl {
    font-size:   var(--gkk-lbl-size, 11px);
    color:       var(--gkk-lbl-color, #888780);
    display:     block;
    line-height: 1.3;
    margin-top:  2px;
}

/* ---------------------------------------------------------------
   SHARED: Dots
--------------------------------------------------------------- */
.gkk-dot {
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    flex-shrink:   0;
}

.gkk-dot-live {
    background: var(--gkk-dot-live, #e24b4a);
    animation:  gkk-pulse 1.6s ease-in-out infinite;
}

.gkk-dot-total {
    background: var(--gkk-dot-total, #1D9E75);
}

@keyframes gkk-pulse {
    0%,  100% { opacity: 1;   transform: scale(1);   }
    50%        { opacity: 0.5; transform: scale(0.75); }
}

/* ---------------------------------------------------------------
   VARIANT A — Dark Pill (default)
--------------------------------------------------------------- */
.gkk-variant-a {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.gkk-pill {
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    var(--gkk-bg, #2C2C2A);
    border-radius: var(--gkk-radius, 20px);
    padding:       var(--gkk-pad-v, 6px) var(--gkk-pad-h, 14px) var(--gkk-pad-v, 6px) 10px;
}

.gkk-pill-content {
    display:        flex;
    flex-direction: column;
}

.gkk-variant-a .gkk-num  { color: var(--gkk-num-color, #f1efe8); }
.gkk-variant-a .gkk-lbl  { color: var(--gkk-lbl-color, #888780); }

/* ---------------------------------------------------------------
   VARIANT B — Card with left accent border
--------------------------------------------------------------- */
.gkk-variant-b {
    display: flex;
    gap:     12px;
    flex-wrap: wrap;
}

.gkk-card {
    display:      flex;
    align-items:  center;
    gap:          12px;
    background:   var(--gkk-bg, #f8f8f8);
    border:       1px solid #e0e0e0;
    border-left:  4px solid #e0e0e0;
    border-radius: 8px;
    padding:      var(--gkk-pad-v, 10px) var(--gkk-pad-h, 16px);
    flex:         1;
    min-width:    160px;
}

.gkk-card-live  { border-left-color: var(--gkk-dot-live,  #e24b4a); }
.gkk-card-total { border-left-color: var(--gkk-dot-total, #1D9E75); }

.gkk-card-icon {
    font-size: 10px;
    line-height: 1;
}

.gkk-card-icon-live  { color: var(--gkk-dot-live,  #e24b4a); }
.gkk-card-icon-total { color: var(--gkk-dot-total, #1D9E75); }

.gkk-card-body {
    display:        flex;
    flex-direction: column;
}

.gkk-variant-b .gkk-num { color: var(--gkk-num-color-b, #222); }
.gkk-variant-b .gkk-lbl { color: var(--gkk-lbl-color-b, #888); }

/* ---------------------------------------------------------------
   VARIANT C — Split border box
--------------------------------------------------------------- */
.gkk-variant-c {
    display:       flex;
    border:        1px solid #ddd;
    border-radius: var(--gkk-radius, 10px);
    overflow:      hidden;
}

.gkk-split-item {
    flex:           1;
    padding:        var(--gkk-pad-v, 10px) var(--gkk-pad-h, 14px);
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.gkk-split-live  { background: #ffffff; }
.gkk-split-total { background: #f9f9f9; border-left: 1px solid #ddd; }

.gkk-split-num-row {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.gkk-badge {
    font-size:     10px;
    padding:       2px 7px;
    border-radius: 4px;
    font-weight:   500;
    line-height:   1.4;
}

.gkk-badge-live  { background: #FCEBEB; color: #A32D2D; }
.gkk-badge-total { background: #E1F5EE; color: #0F6E56; }

.gkk-variant-c .gkk-num { color: var(--gkk-num-color-c, #222); }
.gkk-variant-c .gkk-lbl { color: var(--gkk-lbl-color-c, #888); font-size: 11px; }

/* ---------------------------------------------------------------
   VARIANT D — Minimal text with dot
--------------------------------------------------------------- */
.gkk-variant-d {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        10px 0;
    border-top:     1px solid #e0e0e0;
    border-bottom:  1px solid #e0e0e0;
}

.gkk-minimal-row {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.gkk-variant-d .gkk-num { color: var(--gkk-num-color-d, #222); font-size: var(--gkk-num-size, 15px); }
.gkk-variant-d .gkk-lbl { color: var(--gkk-lbl-color-d, #888); margin-top: 0; }

/* ---------------------------------------------------------------
   Number animation on change
--------------------------------------------------------------- */
.gkk-num.gkk-animating {
    transition: opacity 0.2s ease;
    opacity: 0.4;
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media ( max-width: 480px ) {
    .gkk-variant-a { gap: 6px; }
    .gkk-pill      { padding: 5px 10px 5px 8px; }
    .gkk-variant-b { flex-direction: column; }
    .gkk-card      { min-width: 0; }
}