/*
========================================
BASE GERAL
========================================
*/

.flux-counter,
.flux-hot{
    display:inline-flex;
    align-items:center;
    vertical-align:middle;
    max-width:100%;
    box-sizing:border-box;
}


/*
========================================
CONTADOR
========================================
*/

.flux-counter{
    gap:16px; /* distância entre blocos */
    font-size:14px;
    line-height:1.4;
    font-weight:400;
    color:#8a8a8a;
    white-space:normal;
    flex-wrap:wrap;
}

.flux-counter-main{
    display:inline-flex;
    align-items:center;
    gap:4px; /* distância ícone -> texto */
    min-width:0;
}

.flux-counter-total{
    white-space:nowrap;
    flex-wrap:nowrap;
}


/*
========================================
HOT DOS CARDS
========================================
*/

.flux-hot{
    position:relative;
    gap:4px; /* distância ícone -> texto */
    font-size:13px;
    line-height:1.3;
    font-weight:500;
    color:#8a8a8a;
    white-space:nowrap;
    max-width:100%;
}


/*
========================================
CAIXA DO ÍCONE
========================================
*/

.flux-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    min-width:16px;
    max-width:16px;
    height:16px;
    min-height:16px;
    max-height:16px;
    flex:0 0 16px;
    overflow:hidden;
    line-height:1;
    vertical-align:middle;
}


/*
========================================
PILHA DE SVG
========================================
*/

.flux-svg{
    display:none;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    line-height:1;
    flex:0 0 16px;
}

.flux-svg.is-active{
    display:inline-flex;
}


/*
========================================
TAMANHO DOS SVG
========================================
*/

.flux-svg svg,
.flux-icon > .flux-svg svg,
.flux-like-heart svg{
    display:block;
    width:16px;
    height:16px;
    min-width:16px;
    min-height:16px;
    max-width:16px;
    max-height:16px;
}


/*
========================================
TEXTO
========================================
*/

.flux-text,
.flux-hot-label{
    color:#8a8a8a;
}

.flux-text{
    display:inline-flex;
    align-items:center;
    line-height:1.1;
    word-break:break-word;
    font-variant-numeric: tabular-nums;
}

.flux-counter-total .flux-text{
    white-space:nowrap;
}

.flux-hot-label{
    display:inline-flex;
    align-items:center;
    line-height:1.1;
    white-space:nowrap;
    max-width:14ch;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align:middle;
}


/*
========================================
ESTADO NEUTRO
analytics cinza
========================================
*/

.flux-counter.is-neutral,
.flux-hot.is-neutral{
    color:#8a8a8a;
}

.flux-counter.is-neutral .flux-text,
.flux-hot.is-neutral .flux-hot-label{
    color:#8a8a8a;
}

.flux-analytics svg,
.flux-analytics svg *,
.flux-counter .flux-analytics svg,
.flux-counter .flux-analytics svg *{
    fill:#8a8a8a !important;
    stroke:#8a8a8a !important;
    color:#8a8a8a !important;
}


/*
========================================
ESTADO COM SELO
========================================
*/

.flux-counter.has-badge,
.flux-hot.has-badge{
    color:#8a8a8a;
}

.flux-counter.has-badge .flux-text,
.flux-hot.has-badge .flux-hot-label{
    color:#8a8a8a;
}


/*
========================================
SELOS
========================================
*/

.flux-fire svg,
.flux-fire svg *,
.flux-star svg,
.flux-star svg *,
.flux-rocket svg,
.flux-rocket svg *,
.flux-relampago svg,
.flux-relampago svg *{
    filter:none !important;
    opacity:1;
}


/*
========================================
LIKE
========================================
*/

.flux-like{
    position:relative;
    display:inline-flex;
    align-items:center;
    vertical-align:middle;
    gap:4px;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    outline:none !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    text-decoration:none !important;
    color:#9b9b9b;
    cursor:pointer;
    line-height:1;
    font:inherit;
    appearance:none;
    -webkit-appearance:none;
    border-radius:0 !important;
    transition:
        color .18s ease,
        opacity .18s ease,
        transform .18s ease;
}

.flux-like:hover,
.flux-like:focus,
.flux-like:focus-visible,
.flux-like:active{
    border:none !important;
    outline:none !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    text-decoration:none !important;
}

.flux-like:disabled{
    cursor:default;
}

.flux-like-heart{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    flex:0 0 16px;
    line-height:1;
    vertical-align:middle;
    transform-origin:center center;
    transition:transform .18s ease;
}

.flux-like-heart svg{
    width:16px;
    height:16px;
    display:block;
    overflow:visible;
}

.flux-like-heart svg path{
    fill:none;
    stroke:#9f9f9f;
    stroke-width:1.8;
    transition:
        fill .18s ease,
        stroke .18s ease;
}

.flux-like-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:1ch;
    color:#9b9b9b;
    font-size:14px;
    line-height:1;
    vertical-align:middle;
    font-variant-numeric: tabular-nums;
    opacity:.95;
    transition:
        color .18s ease,
        opacity .18s ease,
        transform .18s ease;
}

.flux-like:hover:not(:disabled):not(.is-liked),
.flux-like:focus-visible:not(:disabled):not(.is-liked){
    color:#8f8f8f;
    transform:translateY(-1px);
}

.flux-like:hover:not(:disabled):not(.is-liked) .flux-like-heart svg path,
.flux-like:focus-visible:not(:disabled):not(.is-liked) .flux-like-heart svg path{
    stroke:#8d8d8d;
}

.flux-like:hover:not(:disabled):not(.is-liked) .flux-like-count,
.flux-like:focus-visible:not(:disabled):not(.is-liked) .flux-like-count{
    color:#8f8f8f;
}

.flux-like.is-liked{
    color:#9b9b9b;
    transform:none;
}

.flux-like.is-liked .flux-like-heart svg path{
    fill:#d94b63;
    stroke:#d94b63;
}

.flux-like.is-liked .flux-like-count{
    color:#9b9b9b;
}

.flux-like-burst{
    position:absolute;
    left:8px;
    top:8px;
    width:0;
    height:0;
    pointer-events:none;
    border-radius:999px;
    opacity:0;
    transform:translate(-50%, -50%) scale(0.2);
    box-shadow:0 0 0 0 rgba(217,75,99,0.18);
}

.flux-like.is-animating .flux-like-heart{
    animation:fluxLikeHeartRefined .68s cubic-bezier(.22,.88,.28,1);
}

.flux-like.is-animating .flux-like-burst{
    animation:fluxLikeHaloRefined .68s cubic-bezier(.22,.88,.28,1);
}

.flux-like.is-animating .flux-like-count{
    animation:fluxLikeCountRefined .46s ease;
}

.flux-like-count.is-like-count-final{
    animation:fluxLikeCountFinal .46s ease;
}

@keyframes fluxLikeHeartRefined{
    0%{ transform:scale(1); }
    14%{ transform:scale(0.90); }
    42%{ transform:scale(1.10); }
    62%{ transform:scale(0.98); }
    100%{ transform:scale(1); }
}

@keyframes fluxLikeHaloRefined{
    0%{
        opacity:0;
        transform:translate(-50%, -50%) scale(0.20);
        box-shadow:0 0 0 0 rgba(217,75,99,0.18);
    }
    22%{
        opacity:.35;
        transform:translate(-50%, -50%) scale(0.65);
        box-shadow:0 0 0 4px rgba(217,75,99,0.14);
    }
    55%{
        opacity:.18;
        transform:translate(-50%, -50%) scale(1);
        box-shadow:0 0 0 9px rgba(217,75,99,0.08);
    }
    100%{
        opacity:0;
        transform:translate(-50%, -50%) scale(1.18);
        box-shadow:0 0 0 14px rgba(217,75,99,0);
    }
}

@keyframes fluxLikeCountRefined{
    0%{
        opacity:.68;
        transform:translateY(2px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fluxLikeCountFinal{
    0%{
        transform:translateY(0) scale(1);
        opacity:1;
    }
    50%{
        transform:translateY(-1px) scale(1.12);
        opacity:1;
    }
    100%{
        transform:translateY(0) scale(1);
        opacity:1;
    }
}


/*
========================================
VISITAS COUNT-UP
========================================
*/

.flux-text.is-counting{
    opacity:1;
}

.flux-text.is-counter-final{
    animation:fluxCounterFinal .48s ease;
}

@keyframes fluxCounterFinal{
    0%{
        transform:translateY(0) scale(1);
        opacity:1;
    }
    50%{
        transform:translateY(-1px) scale(1.06);
        opacity:1;
    }
    100%{
        transform:translateY(0) scale(1);
        opacity:1;
    }
}


/*
========================================
SELOS PADRÃO
========================================
*/

.flux-hot.is-badge-updating .flux-icon{
    animation:fluxHotBadgeIconIn .52s cubic-bezier(.22,.88,.28,1);
}

.flux-hot.is-badge-updating .flux-hot-label{
    animation:fluxHotBadgeLabelIn .44s ease-out;
}

@keyframes fluxHotBadgeIconIn{
    0%{
        opacity:.7;
        transform:scale(.86);
    }
    58%{
        opacity:1;
        transform:scale(1.12);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes fluxHotBadgeLabelIn{
    0%{
        opacity:.5;
        transform:translateY(2px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}


/*
========================================
RELÂMPAGO PREMIUM
Mais forte, em todas as aparições
========================================
*/

.flux-hot.is-lightning-updating::after{
    content:"";
    position:absolute;
    left:8px;
    top:8px;
    width:16px;
    height:16px;
    pointer-events:none;
    border-radius:999px;
    transform:translate(-50%, -50%) scale(0.20);
    box-shadow:0 0 0 0 rgba(255,198,67,0.30);
    opacity:0;
    animation:fluxLightningHaloPremium .95s cubic-bezier(.20,.90,.25,1);
}

.flux-hot.is-lightning-updating .flux-icon{
    animation:fluxLightningIconPremium .95s cubic-bezier(.20,.90,.25,1);
    filter:drop-shadow(0 0 4px rgba(255,204,90,.28));
}

.flux-hot.is-lightning-updating .flux-hot-label{
    animation:fluxLightningLabelPremium .52s ease-out;
}

@keyframes fluxLightningIconPremium{
    0%{
        opacity:.7;
        transform:scale(.78);
    }
    22%{
        opacity:1;
        transform:scale(1.22);
    }
    42%{
        transform:scale(.96);
    }
    62%{
        transform:scale(1.10);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes fluxLightningHaloPremium{
    0%{
        opacity:0;
        transform:translate(-50%, -50%) scale(.20);
        box-shadow:0 0 0 0 rgba(255,198,67,0.30);
    }
    24%{
        opacity:.38;
        transform:translate(-50%, -50%) scale(.88);
        box-shadow:0 0 0 7px rgba(255,198,67,0.20);
    }
    58%{
        opacity:.18;
        transform:translate(-50%, -50%) scale(1.12);
        box-shadow:0 0 0 12px rgba(255,198,67,0.10);
    }
    100%{
        opacity:0;
        transform:translate(-50%, -50%) scale(1.30);
        box-shadow:0 0 0 16px rgba(255,198,67,0);
    }
}

@keyframes fluxLightningLabelPremium{
    0%{
        opacity:.55;
        transform:translateY(2px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}


/*
========================================
AJUSTES FINOS
========================================
*/

.flux-counter .flux-text{
    font-size:14px;
    font-weight:400;
}

.flux-hot .flux-hot-label{
    font-size:13px;
    font-weight:500;
}

.flux-counter .flux-like,
.flux-counter .flux-like:hover,
.flux-counter .flux-like:focus,
.flux-counter .flux-like:focus-visible,
.flux-counter .flux-like:active{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
}


/*
========================================
COMPATIBILIDADE ELEMENTOR
========================================
*/

.elementor-widget .flux-counter,
.elementor-widget .flux-hot,
.elementor .flux-counter,
.elementor .flux-hot{
    display:inline-flex;
    align-items:center;
    max-width:100%;
}

.elementor-widget .flux-icon,
.elementor .flux-icon{
    width:16px;
    min-width:16px;
    max-width:16px;
    height:16px;
    min-height:16px;
    max-height:16px;
    flex:0 0 16px;
}

.elementor-widget .flux-svg,
.elementor .flux-svg{
    width:16px;
    height:16px;
}

.elementor-widget .flux-svg svg,
.elementor .flux-svg svg{
    width:16px;
    height:16px;
}


/*
========================================
COMPATIBILIDADE JETENGINE
========================================
*/

.jet-listing-grid .flux-counter,
.jet-listing-grid .flux-hot,
.jet-engine-listing-grid .flux-counter,
.jet-engine-listing-grid .flux-hot{
    display:inline-flex;
    align-items:center;
    max-width:100%;
}


/*
========================================
EVITAR HERANÇA AGRESSIVA
========================================
*/

.flux-counter *,
.flux-hot *{
    box-sizing:border-box;
}

.flux-counter svg,
.flux-hot svg{
    box-shadow:none !important;
    border:none !important;
    background:none !important;
}


/*
========================================
RESPONSIVO
========================================
*/

@media (max-width:768px){

    .flux-counter{
        font-size:13px;
        gap:16px;
    }

    .flux-counter-main{
        gap:4px;
    }

    .flux-hot{
        font-size:12px;
        gap:4px;
    }

    .flux-icon{
        width:14px;
        min-width:14px;
        max-width:14px;
        height:14px;
        min-height:14px;
        max-height:14px;
        flex:0 0 14px;
    }

    .flux-svg{
        width:14px;
        height:14px;
        flex:0 0 14px;
    }

    .flux-svg svg,
    .flux-icon > .flux-svg svg,
    .flux-like-heart svg{
        width:14px;
        height:14px;
        min-width:14px;
        min-height:14px;
        max-width:14px;
        max-height:14px;
    }

    .flux-counter .flux-text{
        font-size:13px;
    }

    .flux-hot .flux-hot-label{
        font-size:12px;
        max-width:14ch;
    }

    .flux-like{
        gap:4px;
    }

    .flux-like-heart{
        width:14px;
        height:14px;
        flex:0 0 14px;
    }

    .flux-like-count{
        font-size:13px;
    }

    .flux-hot.is-lightning-updating::after{
        left:7px;
        top:7px;
        width:14px;
        height:14px;
    }
}