/* =========================================================
   JOKERFLIX UI PRO
   ========================================================= */

:root{
    --jf-red:#e50914;
    --jf-bg:#060606;
    --jf-panel:#111;
    --jf-border:#262626;
    --jf-muted:#a4a4a4;
}

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(229,9,20,.08),
            transparent 28%
        ),
        var(--jf-bg);
}


/* HEADER */

header{
    height:76px;
    background:rgba(6,6,6,.82);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.07);
    box-shadow:0 8px 30px rgba(0,0,0,.16);
}

.logo{
    font-size:29px;
    letter-spacing:-1.5px;
}

nav{
    gap:4px;
}

.nav{
    border-radius:9px;
    padding:10px 14px;
    transition:.2s;
}

.nav:hover{
    background:#181818;
}

.nav.ativo{
    color:#fff;
    background:rgba(229,9,20,.14);
}

.busca input{
    width:min(320px,28vw);
    height:44px;
    background:rgba(25,25,25,.84);
    border:1px solid #303030;
    border-radius:12px;
    transition:.2s;
}

.busca input:focus{
    border-color:#666;
    background:#171717;
    box-shadow:0 0 0 3px rgba(255,255,255,.04);
}


/* HERO */

#hero{
    height:min(68vh,650px);
    min-height:510px;
}

#heroBg{
    transform:scale(1.01);
}

#heroBg:after{
    background:
        linear-gradient(
            to top,
            #060606 0%,
            rgba(6,6,6,.16) 48%,
            rgba(6,6,6,.13) 100%
        ),
        linear-gradient(
            to right,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.74) 28%,
            rgba(0,0,0,.12) 70%
        );
}

.heroConteudo{
    width:min(720px,90%);
    padding-bottom:72px;
}

.heroConteudo .tag{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(229,9,20,.13);
    border:1px solid rgba(229,9,20,.28);
    font-size:11px;
}

.heroConteudo h1{
    font-size:clamp(42px,5vw,72px);
    letter-spacing:-2px;
    line-height:.98;
    margin-top:8px;
}

.heroConteudo p{
    font-size:16px;
    color:#d8d8d8;
    max-width:650px;
}

.heroMetaPro{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 15px;
}

.heroMetaPro span{
    background:rgba(20,20,20,.72);
    border:1px solid rgba(255,255,255,.12);
    padding:5px 9px;
    border-radius:999px;
    color:#eee;
    font-size:12px;
    backdrop-filter:blur(8px);
}

#heroBtn,
.heroAssistirPro{
    border:0;
    border-radius:9px;
    padding:13px 19px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    margin:10px 8px 0 0;
}

.heroAssistirPro{
    color:#fff;
    background:var(--jf-red);
    box-shadow:0 8px 28px rgba(229,9,20,.24);
}

#heroBtn{
    color:#fff;
    background:rgba(80,80,80,.65);
    backdrop-filter:blur(8px);
}


/* CONTEÚDO */

#conteudo{
    padding:4px 4% 90px;
}

.secao{
    margin-bottom:38px;
}

.secaoTitulo h2{
    font-size:22px;
    letter-spacing:-.4px;
}

.secaoTitulo button{
    padding:7px 10px;
    border-radius:8px;
}

.secaoTitulo button:hover{
    background:#161616;
    color:#fff;
}


/* HOME EM TRILHOS */

#inicioView .trilho{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4px 3px 18px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:#333 transparent;
}

#inicioView .trilho .card{
    flex:0 0 clamp(155px,12vw,195px);
    scroll-snap-align:start;
}

#inicioView .trilho::-webkit-scrollbar{
    height:6px;
}

#inicioView .trilho::-webkit-scrollbar-thumb{
    background:#333;
    border-radius:20px;
}


/* CARDS */

.card{
    border-radius:12px;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 5px 18px rgba(0,0,0,.18);
    transition:
        transform .2s,
        border-color .2s,
        box-shadow .2s;
}

.card:hover{
    transform:translateY(-6px) scale(1.025);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 16px 34px rgba(0,0,0,.55);
}

.card img{
    transition:transform .3s;
}

.card:hover img{
    transform:scale(1.035);
}

.cardGrad{
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,.50) 25%,
            transparent 55%
        );
}

.cardTitulo{
    left:11px;
    right:11px;
    bottom:11px;
    font-size:13px;
    line-height:1.22;
}

.cardAno{
    right:9px;
    top:9px;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.12);
}

.cardBadgesPro{
    position:absolute;
    top:9px;
    left:9px;
    z-index:8;
    display:flex;
    flex-direction:column;
    gap:5px;
    align-items:flex-start;
}

.cardBadgesPro span{
    font-size:10px;
    line-height:1;
    font-weight:900;
    padding:5px 7px;
    border-radius:6px;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
}

.badgeQualidadePro{
    color:#fff;
    background:var(--jf-red);
}

.badgeRatingPro{
    color:#111;
    background:rgba(255,215,70,.95);
}


/* CABEÇALHO DE LISTA */

.listaTopo{
    padding:34px 0 17px;
    align-items:center;
}

.listaTopo h1{
    font-size:34px;
    letter-spacing:-1px;
}

.listaTopo span{
    margin-left:auto;
    font-size:13px;
    color:#888;
}


/* FILTROS */

.filtrosPro{
    position:relative;
    margin-bottom:25px;
    padding:17px;
    border:1px solid var(--jf-border);
    border-radius:15px;
    background:
        linear-gradient(
            145deg,
            rgba(25,25,25,.94),
            rgba(12,12,12,.94)
        );
    box-shadow:0 12px 32px rgba(0,0,0,.18);
}

.chipsPro{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:14px;
    scrollbar-width:none;
}

.chipsPro::-webkit-scrollbar{
    display:none;
}

.chipPro{
    flex:none;
    border:1px solid #333;
    background:#171717;
    color:#bbb;
    border-radius:999px;
    padding:9px 14px;
    font-size:13px;
    cursor:pointer;
    transition:.15s;
}

.chipPro:hover{
    color:#fff;
    border-color:#555;
}

.chipPro.ativo{
    color:#fff;
    background:var(--jf-red);
    border-color:var(--jf-red);
}

.filtrosLinhaPro{
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
    padding-top:14px;
    border-top:1px solid #252525;
}

.filtroGrupoPro{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:175px;
}

.filtroGrupoPro span{
    font-size:11px;
    font-weight:800;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.filtroGrupoPro select{
    min-width:175px;
    height:42px;
    padding:0 12px;
    color:#fff;
    background:#0e0e0e;
    border:1px solid #323232;
    border-radius:9px;
    outline:none;
    cursor:pointer;
}

.filtroGrupoPro select:focus{
    border-color:#777;
}

.limparFiltrosPro{
    height:42px;
    padding:0 15px;
    border-radius:9px;
    border:1px solid #333;
    background:#181818;
    color:#aaa;
    cursor:pointer;
}

.limparFiltrosPro:hover{
    color:#fff;
    border-color:#555;
}


/* GRID */

#grid{
    grid-template-columns:
        repeat(auto-fill,minmax(155px,1fr));
    gap:18px 14px;
}


/* DETALHES */

.modal{
    background:rgba(0,0,0,.9);
    backdrop-filter:blur(8px);
}

.modalBox{
    width:min(1100px,96%);
    border-radius:18px;
    border:1px solid #292929;
    background:#0f0f0f;
}

#detalheBanner{
    height:460px;
}

#detalheBanner:after{
    background:
        linear-gradient(
            to top,
            #0f0f0f 0%,
            rgba(15,15,15,.72) 17%,
            rgba(0,0,0,.05) 65%
        ),
        linear-gradient(
            to right,
            rgba(0,0,0,.35),
            transparent 60%
        );
}

.detalheConteudo{
    padding:0 42px 42px;
}

.detalheConteudo h1{
    font-size:clamp(32px,4vw,52px);
    letter-spacing:-1.3px;
    margin-bottom:13px;
}

#detalheMeta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0 0 16px;
}

.metaPillPro{
    display:inline-flex;
    align-items:center;
    padding:6px 9px;
    color:#ddd;
    background:#1b1b1b;
    border:1px solid #303030;
    border-radius:999px;
    font-size:12px;
}

#detalheDescricao{
    max-width:850px;
    font-size:15px;
    color:#c5c5c5;
    line-height:1.65;
}

.playBtn{
    background:var(--jf-red);
    color:#fff;
    border-radius:9px;
    min-width:140px;
    transition:.15s;
}

.playBtn:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
}


/* EPISÓDIOS */

.temporadaTopo{
    margin-top:8px;
}

#temporadaSelect{
    min-width:150px;
    background:#151515;
    border-radius:9px;
}

.episodio{
    border-bottom:1px solid #222;
    border-radius:9px;
    transition:.15s;
    padding:12px 8px;
}

.episodio:hover{
    background:#171717;
}


/* PLAYER */

.playerTopo{
    background:#050505;
    border-bottom:1px solid #1d1d1d;
}

.qualidadeBox{
    border-bottom:1px solid #202020;
}


/* TV / TABLET */

@media(max-width:1050px){

    #grid{
        grid-template-columns:
            repeat(auto-fill,minmax(145px,1fr));
    }

    #inicioView .trilho .card{
        flex-basis:165px;
    }
}


/* CELULAR */

@media(max-width:700px){

    header{
        padding:10px 12px;
        gap:8px;
    }

    .logo{
        font-size:23px;
    }

    .busca{
        flex:1;
    }

    .busca input{
        width:100%;
    }

    nav{
        gap:3px;
        padding-bottom:2px;
    }

    .nav{
        flex:none;
        padding:8px 11px;
    }

    #hero{
        height:500px;
        min-height:500px;
    }

    .heroConteudo{
        padding:0 18px 45px;
    }

    .heroConteudo h1{
        font-size:39px;
    }

    .heroConteudo p{
        font-size:14px;
    }

    #conteudo{
        padding-left:14px;
        padding-right:14px;
    }

    #inicioView .trilho{
        margin-right:-14px;
    }

    #inicioView .trilho .card{
        flex-basis:145px;
    }

    .filtrosPro{
        padding:13px;
        margin-left:-3px;
        margin-right:-3px;
    }

    .filtrosLinhaPro{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .filtroGrupoPro{
        min-width:0;
    }

    .filtroGrupoPro:first-child{
        grid-column:1/-1;
    }

    .filtroGrupoPro select{
        width:100%;
        min-width:0;
    }

    .limparFiltrosPro{
        grid-column:1/-1;
    }

    #grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap:12px 9px;
    }

    .listaTopo h1{
        font-size:28px;
    }

    #detalheBanner{
        height:300px;
    }

    .detalheConteudo{
        padding:0 18px 28px;
    }
}

/* ==========================================================
   JOKER_TV_STYLE_V1
   ========================================================== */

.tvFiltros{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:4px 0 22px;
}

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

.tvChip{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:#fff;
    border-radius:999px;
    padding:9px 14px;
    cursor:pointer;
    font:inherit;
    transition:.18s ease;
}

.tvChip:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.11);
}

.tvChip.ativo{
    background:#fff;
    color:#111;
}

#grid.tvGrid{
    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(190px,1fr));
    gap:16px;
}

.tvCard{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(18,18,18,.96);
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.tvCard:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.28);
    box-shadow:0 12px 32px rgba(0,0,0,.28);
}

.tvCardLogo{
    width:100%;
    aspect-ratio:16/9;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:#090909;
}

.tvCardLogo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.tvCardLogo.tvSemLogo{
    font-size:44px;
}

.tvCardInfo{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:13px 14px 15px;
}

.tvCardInfo strong{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:15px;
}

.tvCardInfo span{
    opacity:.62;
    font-size:12px;
}

.tvAoVivoBadge{
    position:absolute;
    top:9px;
    left:9px;
    padding:5px 8px;
    border-radius:7px;
    background:#d7142d;
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.06em;
    box-shadow:0 3px 10px rgba(0,0,0,.35);
}

.tvVazio{
    grid-column:1/-1;
    padding:40px 20px;
    text-align:center;
    opacity:.7;
}


@media(max-width:600px){

    #grid.tvGrid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .tvCardLogo{
        padding:12px;
    }

    .tvCardInfo{
        padding:10px;
    }

    .tvChip{
        padding:8px 11px;
        font-size:12px;
    }
}



/* ==========================================================
   JOKER_TV_ISOLATED_GRID_STYLE_V1
   ========================================================== */

#tvGrid.tvGrid{
    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(190px,1fr));
    gap:16px;
}

#tvGrid.escondido{
    display:none !important;
}

@media(max-width:600px){

    #tvGrid.tvGrid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap:10px;
    }
}


/* ==========================================================
   JOKER_TV_PREMIUM_VISUAL_V1
   ========================================================== */

.tvCard{
    --tv-accent:255,45,70;

    position:relative;
    isolation:isolate;

    background:
        linear-gradient(
            145deg,
            rgba(28,28,34,.98),
            rgba(7,7,10,.98)
        );

    border:
        1px solid rgba(var(--tv-accent),.24);

    box-shadow:
        0 10px 25px rgba(0,0,0,.24);

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease;
}

.tvCard::before{
    content:'';
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    top:0;
    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--tv-accent),.95),
            transparent
        );

    opacity:.9;
}

.tvCard:hover{
    transform:
        translateY(-5px)
        scale(1.015);

    border-color:
        rgba(var(--tv-accent),.65);

    box-shadow:
        0 17px 40px rgba(0,0,0,.38),
        0 0 22px rgba(var(--tv-accent),.13);
}


.tvCardLogo{
    position:relative;

    min-height:135px;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(var(--tv-accent),.25),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #202026,
            #08080b 72%
        );

    overflow:hidden;
}


.tvCardLogo::after{
    content:'';
    position:absolute;
    inset:auto -20% -60% -20%;
    height:75%;

    background:
        radial-gradient(
            ellipse,
            rgba(var(--tv-accent),.20),
            transparent 65%
        );

    pointer-events:none;
}


.tvCardLogo img{
    position:relative;
    z-index:2;

    width:88%;
    height:82%;
    max-width:155px;

    object-fit:contain;

    filter:
        saturate(1.22)
        contrast(1.08)
        brightness(1.08)
        drop-shadow(
            0 7px 12px rgba(0,0,0,.55)
        );

    transition:
        transform .20s ease,
        filter .20s ease;
}


.tvCard:hover .tvCardLogo img{
    transform:scale(1.07);

    filter:
        saturate(1.35)
        contrast(1.10)
        brightness(1.12)
        drop-shadow(
            0 9px 16px rgba(0,0,0,.6)
        );
}


.tvCardInfo{
    position:relative;
    z-index:2;

    background:
        linear-gradient(
            180deg,
            rgba(15,15,18,.90),
            rgba(8,8,10,.98)
        );
}


.tvCardInfo strong{
    font-size:15px;
    font-weight:750;
    letter-spacing:.01em;
}


.tvAoVivoBadge{
    background:
        linear-gradient(
            135deg,
            #ff173d,
            #a90020
        );

    border:
        1px solid rgba(255,255,255,.18);

    box-shadow:
        0 4px 13px rgba(255,0,40,.30);
}


/* =========================
   CORES POR CATEGORIA
   ========================= */

.tvCat-tv-aberta{
    --tv-accent:255,50,65;
}

.tvCat-noticias{
    --tv-accent:48,145,255;
}

.tvCat-esportes{
    --tv-accent:34,210,120;
}

.tvCat-filmes-e-series{
    --tv-accent:158,80,255;
}

.tvCat-infantil{
    --tv-accent:255,155,35;
}

.tvCat-documentarios{
    --tv-accent:218,175,70;
}

.tvCat-variedades{
    --tv-accent:235,70,150;
}

.tvCat-24-horas{
    --tv-accent:40,190,190;
}

.tvCat-ppv{
    --tv-accent:255,80,35;
}

.tvCat-musicas{
    --tv-accent:190,70,255;
}

.tvCat-pluto-tv{
    --tv-accent:70,110,255;
}


/* logo ausente também fica bonito */

.tvSemLogo{
    background:
        radial-gradient(
            circle,
            rgba(var(--tv-accent),.30),
            transparent 60%
        ),
        #101014 !important;

    font-size:50px !important;
}


@media(max-width:600px){

    .tvCardLogo{
        min-height:105px;
    }

    .tvCardLogo img{
        max-width:125px;
    }
}