/* =========================================================
   JOKERFLIX MOBILE PREMIUM V1
   Só entra em celular/tablet pequeno.
   TV / TV BOX / FIRE STICK ficam intocados.
   ========================================================= */

@media (max-width: 850px){

    html,
    body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    body{
        padding-bottom:75px !important;
    }


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

    #jfUserControl{
        top:9px !important;
        right:9px !important;
        gap:5px !important;
        max-width:70vw !important;
    }

    #jfUserControl .jf-user-btn{
        padding:8px 9px !important;
        font-size:11px !important;
        border-radius:10px !important;
        white-space:nowrap !important;
    }

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

    [data-jf-search-move="1"] input{
        width:100% !important;
        min-width:0 !important;
        height:43px !important;
        font-size:14px !important;
    }


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

    #hero,
    #heroBg{
        min-height:390px !important;
        height:auto !important;
        border-radius:0 0 22px 22px !important;
    }

    #heroBg{
        background-size:
            100% 100%,
            auto 76% !important;

        background-position:
            center,
            right -25px center !important;
    }

    #heroTitulo{
        font-size:clamp(28px,9vw,44px) !important;
        line-height:1.03 !important;
        max-width:72% !important;
    }

    #heroDescricao{
        max-width:66% !important;
        font-size:13px !important;
        line-height:1.35 !important;

        display:-webkit-box !important;
        -webkit-line-clamp:3 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
    }

    #heroBtn,
    #heroAssistirPro{
        min-height:43px !important;
        padding:0 15px !important;
        font-size:13px !important;
        border-radius:11px !important;
    }


    /* ===============================
       CAPAS / CARDS
       =============================== */

    .card,
    .item,
    .movie-card,
    .filme-card,
    .serie-card,
    [class*="card"]{
        scroll-snap-align:start;
    }

    img{
        max-width:100%;
    }


    /* ===============================
       LISTAS HORIZONTAIS
       =============================== */

    [class*="rail"],
    [class*="row"],
    [class*="lista"],
    [class*="carousel"]{
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
    }


    /* ===============================
       PLAYER
       =============================== */

    video{
        width:100% !important;
        max-width:100% !important;
    }

    #unitvSeekArea{
        width:100% !important;
    }


    /* ===============================
       LOGIN
       =============================== */

    .jf-login-box{
        width:92vw !important;
        padding:25px 18px !important;
        border-radius:21px !important;
    }

    .jf-login-logo{
        width:72px !important;
        height:72px !important;
    }

    .jf-login-title{
        font-size:27px !important;
    }

    .jf-field{
        height:52px !important;
        font-size:16px !important;
    }


    /* ===============================
       MINHA CONTA
       =============================== */

    .jf-conta-box{
        width:94vw !important;
        max-height:85vh !important;
        overflow:auto !important;
        padding:22px 18px !important;
    }

    .jf-conta-linha{
        font-size:13px !important;
    }


    /* ===============================
       CONTROLE DE TOQUE
       remove zoom de foco usado em TV
       =============================== */

    .jf-tv-active{
        transform:none !important;
    }

}


/* CELULAR BEM PEQUENO */
@media (max-width: 480px){

    #hero,
    #heroBg{
        min-height:350px !important;
    }

    #heroTitulo{
        font-size:30px !important;
        max-width:75% !important;
    }

    #heroDescricao{
        max-width:70% !important;
        -webkit-line-clamp:2 !important;
    }

    #jfUserControl .jf-user-btn{
        font-size:10px !important;
        padding:7px !important;
    }
}


/* CELULAR DEITADO */
@media (max-width: 950px) and (orientation: landscape){

    #hero,
    #heroBg{
        min-height:90vh !important;
    }

    #heroTitulo{
        font-size:38px !important;
    }

    #heroDescricao{
        max-width:52% !important;
    }
}