/* ==========================================================
   JOKERFLIX — TV EXPERIENCE GREEN
   Somente /v2-unitv-test/
   ========================================================== */

:root{
    --jf-green:#2cff72;
    --jf-green2:#00d95f;
    --jf-green3:#7cff9f;
    --jf-black:#050706;
    --jf-panel:#0b0f0c;
    --jf-soft:#121814;
    --jf-line:rgba(91,255,132,.18);
    --jf-glow:rgba(44,255,114,.32);
}


/* FUNDO */

html,
body{
    background:
        radial-gradient(
            circle at 72% 0%,
            rgba(0,255,100,.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 0% 60%,
            rgba(0,255,90,.055),
            transparent 32%
        ),
        #050706 !important;

    color:#fff;
}


body::before{
    content:'';
    position:fixed;
    pointer-events:none;
    z-index:99999;

    width:420px;
    height:420px;

    right:-180px;
    top:30%;

    background:
        radial-gradient(
            circle,
            rgba(44,255,114,.09),
            transparent 67%
        );

    filter:blur(10px);
}


/* ==========================================================
   MENU LATERAL TV BOX
   ========================================================== */

#unitvRail{
    position:fixed;
    z-index:9000;

    left:0;
    top:0;
    bottom:0;

    width:92px;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:23px 10px;

    background:
        linear-gradient(
            180deg,
            rgba(5,10,7,.98),
            rgba(4,7,5,.95)
        );

    border-right:
        1px solid rgba(44,255,114,.12);

    box-shadow:
        20px 0 45px rgba(0,0,0,.38);

    backdrop-filter:blur(20px);
}


#unitvRailLogo{
    width:55px;
    height:55px;

    margin-bottom:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    font-size:25px;
    font-weight:1000;

    color:#061009;

    background:
        linear-gradient(
            145deg,
            var(--jf-green3),
            var(--jf-green)
        );

    box-shadow:
        0 0 30px rgba(44,255,114,.30);
}


.unitvRailBtn{
    position:relative;

    width:68px;
    min-height:62px;

    margin-bottom:8px;
    padding:8px 5px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;

    border:1px solid transparent;
    border-radius:15px;

    background:transparent;
    color:#8f9992;

    font-size:10px;
    font-weight:750;

    cursor:pointer;

    transition:.18s ease;
}


.unitvRailBtn .uIcon{
    font-size:22px;
    line-height:1;
}


.unitvRailBtn:hover,
.unitvRailBtn.ativo,
.unitvRailBtn:focus{
    outline:none;

    color:#fff;

    border-color:
        rgba(44,255,114,.38);

    background:
        linear-gradient(
            145deg,
            rgba(44,255,114,.18),
            rgba(44,255,114,.045)
        );

    box-shadow:
        inset 0 0 22px rgba(44,255,114,.07),
        0 0 22px rgba(44,255,114,.09);

    transform:scale(1.05);
}


.unitvRailBtn.ativo::before{
    content:'';

    position:absolute;
    left:-11px;

    width:4px;
    height:28px;

    border-radius:0 5px 5px 0;

    background:var(--jf-green);

    box-shadow:
        0 0 14px var(--jf-green);
}


/* esconde menu horizontal antigo */

.nav{
    display:none !important;
}


/* deixa conteúdo respirar com rail */

header,
main,
#hero,
.hero{
    margin-left:92px !important;
}


/* ==========================================================
   TOPO
   ========================================================== */

header{
    min-height:68px;

    background:
        rgba(4,7,5,.90) !important;

    border-bottom:
        1px solid rgba(44,255,114,.08) !important;

    backdrop-filter:
        blur(22px);
}


header input,
#pesquisa{
    border:
        1px solid rgba(44,255,114,.17) !important;

    background:
        rgba(255,255,255,.055) !important;

    box-shadow:
        inset 0 0 16px rgba(0,0,0,.22);

    transition:.2s ease;
}


header input:focus,
#pesquisa:focus{
    outline:none;

    border-color:
        rgba(44,255,114,.65) !important;

    box-shadow:
        0 0 0 3px rgba(44,255,114,.08),
        0 0 22px rgba(44,255,114,.08);
}


/* ==========================================================
   HERO
   ========================================================== */

#hero{
    min-height:550px !important;
}


#hero::after,
.hero::after{
    content:'';

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(2,6,3,.98) 0%,
            rgba(3,8,5,.78) 28%,
            rgba(4,10,6,.24) 60%,
            rgba(4,8,5,.22) 100%
        ),
        linear-gradient(
            0deg,
            #050706 0%,
            transparent 38%
        );
}


.heroConteudo,
.heroContent{
    position:relative;
    z-index:5;
}


.heroAssistirPro,
#heroAssistirPro{
    border:none !important;

    background:
        linear-gradient(
            135deg,
            var(--jf-green),
            var(--jf-green2)
        ) !important;

    color:#031008 !important;

    box-shadow:
        0 8px 30px rgba(44,255,114,.24);

    font-weight:900 !important;

    transition:.18s ease;
}


.heroAssistirPro:hover,
#heroAssistirPro:hover{
    transform:
        translateY(-2px)
        scale(1.025);

    box-shadow:
        0 12px 42px rgba(44,255,114,.38);
}


/* ==========================================================
   CARDS / TRILHOS
   ========================================================== */

.trilho{
    gap:14px !important;
    scroll-behavior:smooth;
}


.trilho > *,
#grid > *{
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.trilho > *:hover,
#grid > *:hover{
    transform:
        translateY(-5px)
        scale(1.035);

    z-index:15;

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        0 0 0 2px rgba(44,255,114,.52),
        0 0 24px rgba(44,255,114,.12) !important;
}


/* foco para controle/TV Box */

button:focus-visible,
.card:focus-visible,
.tvCard:focus-visible{
    outline:
        3px solid var(--jf-green) !important;

    outline-offset:3px;

    box-shadow:
        0 0 30px rgba(44,255,114,.35) !important;
}


/* chips */

.chip.ativo,
.tvChip.ativo{
    background:
        linear-gradient(
            135deg,
            var(--jf-green),
            #12dd65
        ) !important;

    color:#031108 !important;

    border-color:transparent !important;

    box-shadow:
        0 0 18px rgba(44,255,114,.17);
}


/* ==========================================================
   TV AO VIVO
   ========================================================== */

.tvCard{
    border:
        1px solid rgba(44,255,114,.10) !important;

    background:
        linear-gradient(
            150deg,
            #111713,
            #070a08
        ) !important;
}


.tvCard:hover{
    border-color:
        rgba(44,255,114,.62) !important;

    box-shadow:
        0 15px 40px rgba(0,0,0,.45),
        0 0 28px rgba(44,255,114,.14) !important;
}


.tvCardLogo{
    min-height:140px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(44,255,114,.16),
            transparent 62%
        ),
        linear-gradient(
            145deg,
            #18201a,
            #090d0a
        ) !important;
}


.tvCardLogo img{
    width:88% !important;
    height:82% !important;

    max-width:170px !important;

    filter:
        saturate(1.25)
        brightness(1.12)
        contrast(1.08)
        drop-shadow(
            0 8px 17px rgba(0,0,0,.6)
        ) !important;
}


.tvAoVivoBadge{
    background:
        linear-gradient(
            135deg,
            #35ff7a,
            #00bb50
        ) !important;

    color:#021108 !important;

    box-shadow:
        0 0 14px rgba(44,255,114,.28) !important;
}


/* ==========================================================
   PLAYER ESTILO TV
   ========================================================== */

.playerModal{
    position:fixed !important;
    z-index:20000 !important;

    inset:0 !important;

    width:100vw !important;
    height:100vh !important;

    padding:0 !important;

    background:#000 !important;
}


.playerModal.escondido{
    display:none !important;
}


.playerTopo{
    position:absolute !important;

    z-index:25;

    left:0;
    right:0;
    top:0;

    min-height:72px;

    padding:
        16px 28px !important;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.90),
            transparent
        ) !important;

    border:none !important;

    pointer-events:none;
}


.playerTopo strong,
.playerTopo button{
    pointer-events:auto;
}


.playerTopo button{
    width:42px;
    height:42px;

    border-radius:50% !important;

    border:
        1px solid rgba(44,255,114,.30) !important;

    background:
        rgba(7,15,9,.72) !important;

    color:#fff !important;

    backdrop-filter:blur(12px);
}


#player,
#youtubePlayer{
    position:absolute !important;

    inset:0 !important;

    width:100vw !important;
    height:100vh !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain;

    background:#000;
}


#playerStatus{
    position:absolute;

    z-index:30;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    padding:10px 15px;

    border-radius:10px;

    background:
        rgba(0,0,0,.66);

    color:#fff;
}


/* infobar estilo set-top box */

#unitvInfoBar{
    position:absolute;

    z-index:24;

    left:0;
    right:0;
    bottom:0;

    min-height:135px;

    padding:
        28px 42px 26px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.98) 0%,
            rgba(1,9,4,.91) 50%,
            transparent 100%
        );

    opacity:1;
    transform:translateY(0);

    transition:
        opacity .28s ease,
        transform .28s ease;

    pointer-events:none;
}


#unitvInfoBar.oculto{
    opacity:0;
    transform:translateY(20px);
}


#unitvPlayerName{
    font-size:23px;
    font-weight:900;
}


#unitvPlayerSub{
    margin-top:7px;

    font-size:12px;
    color:#a8b5ac;
}


#unitvGreenLine{
    width:min(580px,48vw);
    height:3px;

    margin-top:14px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--jf-green) 38%,
            rgba(255,255,255,.24) 38%
        );

    box-shadow:
        0 0 12px rgba(44,255,114,.38);
}


#unitvControls{
    pointer-events:auto;

    display:flex;
    gap:9px;
}


.unitvControl{
    min-width:72px;

    padding:
        9px 12px;

    border:
        1px solid rgba(44,255,114,.22);

    border-radius:10px;

    background:
        rgba(10,18,12,.80);

    color:#fff;

    font-size:11px;
    font-weight:800;

    cursor:pointer;

    backdrop-filter:blur(10px);

    transition:.16s ease;
}


.unitvControl:hover{
    border-color:
        rgba(44,255,114,.75);

    background:
        rgba(44,255,114,.16);

    box-shadow:
        0 0 18px rgba(44,255,114,.13);
}


@media(max-width:800px){

    #unitvRail{
        width:68px;
    }

    header,
    main,
    #hero,
    .hero{
        margin-left:68px !important;
    }

    .unitvRailBtn{
        width:52px;
    }

    #unitvInfoBar{
        padding:
            24px 16px 22px;

        min-height:120px;
    }

    #unitvControls{
        display:none;
    }
}


/* ==========================================================
   JOKERFLIX GREEN V2
   ========================================================== */

.jfFlixGreen{
    color:#2cff72 !important;

    text-shadow:
        0 0 16px rgba(44,255,114,.28);
}


/* Remove caixa preta quando não existe mensagem */

#playerStatus:empty{
    display:none !important;
}


#playerStatus{
    background:
        rgba(5,18,10,.78) !important;

    border:
        1px solid rgba(44,255,114,.22);

    color:#fff;

    box-shadow:
        0 8px 30px rgba(0,0,0,.30),
        0 0 22px rgba(44,255,114,.08);
}


/* controles completos */

#unitvControls{
    max-width:70%;

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}


.unitvSelect{
    appearance:none;

    padding-right:27px !important;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #2cff72 50%
        ),
        linear-gradient(
            135deg,
            #2cff72 50%,
            transparent 50%
        ) !important;

    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50% !important;

    background-size:
        5px 5px,
        5px 5px !important;

    background-repeat:
        no-repeat !important;
}


.unitvSelect option{
    background:#101612;
    color:#fff;
}


.unitvControl:disabled{
    opacity:.38;
    cursor:not-allowed;
}


/* hero troca com sensação lateral */

@keyframes jfHeroTroca{

    0%{
        opacity:.72;
        transform:translateX(18px);
    }

    100%{
        opacity:1;
        transform:translateX(0);
    }
}


#hero.jfHeroTroca{
    animation:
        jfHeroTroca .55s ease both;
}


/* verde mais forte no player */

#unitvGreenLine{
    background:
        linear-gradient(
            90deg,
            #2cff72,
            #00d95f 58%,
            rgba(255,255,255,.18)
        ) !important;

    box-shadow:
        0 0 15px rgba(44,255,114,.48) !important;
}


@media(max-width:950px){

    #unitvControls{
        max-width:58%;
        flex-wrap:wrap;
    }

    .unitvControl{
        min-width:58px;
    }
}


/* ==========================================================
   JOKERFLIX GREEN V2
   ========================================================== */

.jfFlixGreen{
    color:#2cff72 !important;

    text-shadow:
        0 0 16px rgba(44,255,114,.28);
}


/* Remove caixa preta quando não existe mensagem */

#playerStatus:empty{
    display:none !important;
}


#playerStatus{
    background:
        rgba(5,18,10,.78) !important;

    border:
        1px solid rgba(44,255,114,.22);

    color:#fff;

    box-shadow:
        0 8px 30px rgba(0,0,0,.30),
        0 0 22px rgba(44,255,114,.08);
}


/* controles completos */

#unitvControls{
    max-width:70%;

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}


.unitvSelect{
    appearance:none;

    padding-right:27px !important;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #2cff72 50%
        ),
        linear-gradient(
            135deg,
            #2cff72 50%,
            transparent 50%
        ) !important;

    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50% !important;

    background-size:
        5px 5px,
        5px 5px !important;

    background-repeat:
        no-repeat !important;
}


.unitvSelect option{
    background:#101612;
    color:#fff;
}


.unitvControl:disabled{
    opacity:.38;
    cursor:not-allowed;
}


/* hero troca com sensação lateral */

@keyframes jfHeroTroca{

    0%{
        opacity:.72;
        transform:translateX(18px);
    }

    100%{
        opacity:1;
        transform:translateX(0);
    }
}


#hero.jfHeroTroca{
    animation:
        jfHeroTroca .55s ease both;
}


/* verde mais forte no player */

#unitvGreenLine{
    background:
        linear-gradient(
            90deg,
            #2cff72,
            #00d95f 58%,
            rgba(255,255,255,.18)
        ) !important;

    box-shadow:
        0 0 15px rgba(44,255,114,.48) !important;
}


@media(max-width:950px){

    #unitvControls{
        max-width:58%;
        flex-wrap:wrap;
    }

    .unitvControl{
        min-width:58px;
    }
}


/* ==========================================================
   JOKER_PLAYER_SEEK_STYLE_V3
   ========================================================== */

#unitvInfoBar{
    display:grid !important;

    grid-template-columns:
        minmax(240px,1fr)
        auto;

    grid-template-areas:
        "info controls"
        "seek seek";

    gap:
        15px 22px;

    align-items:end !important;

    padding-bottom:
        22px !important;
}


.unitvInfoLeft{
    grid-area:info;
}


#unitvControls{
    grid-area:controls;
}


#unitvSeekArea{
    grid-area:seek;

    width:100%;

    display:flex;
    align-items:center;
    gap:12px;

    pointer-events:auto;

    color:
        rgba(255,255,255,.78);

    font-size:11px;
    font-weight:700;
}


#unitvTimeAtual,
#unitvTimeTotal{
    min-width:46px;

    font-variant-numeric:
        tabular-nums;
}


#unitvTimeTotal{
    text-align:right;
}


#unitvSeek{
    flex:1;

    height:5px;

    margin:0;

    appearance:none;
    -webkit-appearance:none;

    border:none;
    border-radius:999px;

    outline:none;

    cursor:pointer;

    background:
        linear-gradient(
            90deg,
            #2cff72,
            #00d95f
        );

    accent-color:#2cff72;
}


#unitvSeek::-webkit-slider-runnable-track{
    height:5px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            rgba(44,255,114,.92),
            rgba(255,255,255,.25)
        );
}


#unitvSeek::-webkit-slider-thumb{
    appearance:none;
    -webkit-appearance:none;

    width:17px;
    height:17px;

    margin-top:-6px;

    border:
        3px solid #061008;

    border-radius:50%;

    background:#2cff72;

    box-shadow:
        0 0 14px
        rgba(44,255,114,.70);

    cursor:grab;
}


#unitvSeek::-webkit-slider-thumb:active{
    cursor:grabbing;

    transform:scale(1.15);
}


#unitvSeek::-moz-range-thumb{
    width:15px;
    height:15px;

    border:
        3px solid #061008;

    border-radius:50%;

    background:#2cff72;

    box-shadow:
        0 0 14px
        rgba(44,255,114,.70);
}


#unitvSeek:disabled{
    cursor:default;
    opacity:.65;
}


#unitvSeekArea.unitvLive
#unitvSeek{
    opacity:.45;
}


@media(max-width:900px){

    #unitvInfoBar{
        grid-template-columns:1fr;
        grid-template-areas:
            "info"
            "seek";

        padding:
            25px 18px 18px !important;
    }

    #unitvControls{
        display:none !important;
    }
}



/* JOKERFLIX_CORNER_LOGO_STYLE_V1 */
[data-jf-corner-logo="1"]{
    padding:0!important;
    overflow:hidden!important;
    border-radius:16px!important;
    background:#050806!important;
    box-shadow:0 0 18px rgba(0,255,110,.35)!important;
}

[data-jf-corner-logo="1"] img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
}

/* JOKER_SEARCH_POSITION_V1 */

@media (min-width:1000px){

    [data-jf-search-move="1"]{
        transform:translateX(-260px) !important;
        transition:transform .2s ease !important;
    }

}

@media (max-width:999px){

    [data-jf-search-move="1"]{
        transform:none !important;
    }

}