/* ============================================================
   FEF Live Counter Widget
   A fluctuating "N people viewing" badge with live visual effects.
   Colours are driven by Elementor Style controls; this owns layout
   and the animations. --fef-lc-fx = effect colour.
   ============================================================ */

.fef-lc-wrap{ display:flex; }

.fef-lc{
    --fef-lc-fx:#22c55e;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#f0fdf4;
    line-height:1.2;
    max-width:100%;
}

/* Icon */
.fef-lc-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#22c55e;
    flex:0 0 auto;
}
.fef-lc-icon svg{ width:18px; height:18px; fill:currentColor; }
.fef-lc-svg{ fill:currentColor; }

/* Text + number */
.fef-lc-body{ display:inline-flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
.fef-lc-num{
    font-weight:700;
    color:#15803d;
    font-variant-numeric:tabular-nums;
    display:inline-block;
    transition:transform .18s ease, opacity .18s ease;
}
.fef-lc-num.is-bumping{ transform:translateY(-2px); opacity:.35; }
.fef-lc-text{ color:#166534; }

/* ============================================================
   Live effects
   ============================================================ */

/* Shared effect anchor */
.fef-lc-fx{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:12px; height:12px;
}
/* When the effect sits on the icon, overlay it top-right */
.fef-lc-fxpos-on_icon .fef-lc-icon .fef-lc-fx{
    position:absolute;
    top:-4px; right:-4px;
    width:10px; height:10px;
}

/* ---- Pulsing dot ---- */
.fef-lc-pulse{ width:10px; height:10px; }
.fef-lc-pulse::before{
    content:""; position:absolute; inset:0;
    border-radius:50%; background:var(--fef-lc-fx);
}
.fef-lc-pulse::after{
    content:""; position:absolute; inset:0;
    border-radius:50%; background:var(--fef-lc-fx);
    animation:fefLcPulse 1.8s ease-out infinite;
}
@keyframes fefLcPulse{
    0%   { transform:scale(1);   opacity:.6; }
    100% { transform:scale(2.6); opacity:0; }
}

/* ---- Emitting circles (radar fade) ---- */
.fef-lc-emit{ width:12px; height:12px; }
.fef-lc-emit::before{                 /* solid core */
    content:""; position:absolute; inset:3px;
    border-radius:50%; background:var(--fef-lc-fx);
}
.fef-lc-emit i{
    position:absolute; inset:0;
    border-radius:50%;
    border:2px solid var(--fef-lc-fx);
    opacity:0;
    animation:fefLcEmit 2.4s ease-out infinite;
}
.fef-lc-emit i:nth-child(2){ animation-delay:.8s; }
.fef-lc-emit i:nth-child(3){ animation-delay:1.6s; }
@keyframes fefLcEmit{
    0%   { transform:scale(.4); opacity:.7; }
    80%  { opacity:0; }
    100% { transform:scale(3);  opacity:0; }
}

/* ---- Spiralling orbit dots ---- */
.fef-lc-spiral{ width:16px; height:16px; }
.fef-lc-spiral::before{               /* centre */
    content:""; position:absolute; top:50%; left:50%;
    width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
    border-radius:50%; background:var(--fef-lc-fx);
}
.fef-lc-spiral i{
    position:absolute; inset:0;
    animation:fefLcSpin 2.2s linear infinite;
}
.fef-lc-spiral i:nth-child(2){ animation-duration:3.2s; animation-direction:reverse; }
.fef-lc-spiral i::after{
    content:""; position:absolute; top:0; left:50%;
    width:4px; height:4px; margin-left:-2px;
    border-radius:50%; background:var(--fef-lc-fx);
    opacity:.85;
}
.fef-lc-spiral i:nth-child(2)::after{ width:3px; height:3px; opacity:.5; }
@keyframes fefLcSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

/* ---- Breathing glow ---- */
.fef-lc-breathe{ width:10px; height:10px; }
.fef-lc-breathe::before{
    content:""; position:absolute; inset:0;
    border-radius:50%; background:var(--fef-lc-fx);
    animation:fefLcBreathe 2.2s ease-in-out infinite;
}
@keyframes fefLcBreathe{
    0%,100% { transform:scale(.8); box-shadow:0 0 0 0 var(--fef-lc-fx); opacity:.85; }
    50%     { transform:scale(1.1); box-shadow:0 0 10px 2px var(--fef-lc-fx); opacity:1; }
}

/* Reduced-motion: keep a static dot, drop the animation */
@media (prefers-reduced-motion: reduce){
    .fef-lc-pulse::after,
    .fef-lc-emit i,
    .fef-lc-spiral i,
    .fef-lc-breathe::before,
    .fef-lc-num{ animation:none !important; transition:none !important; }
    .fef-lc-num.is-bumping{ transform:none; opacity:1; }
}

/* Small screens: let the badge wrap gracefully */
@media (max-width:480px){
    .fef-lc{ gap:6px; }
    .fef-lc-body{ gap:4px; }
}