/* =========================================================
   GENIUS MOVIES
   MOBILE FEATURED PREMIERE PLAY FIX V2

   Home + mobile only.
   Classes are added dynamically by JS.
   ========================================================= */


@media(max-width:760px){

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

    html.gm-mobile-featured-v2
    .gm-mobile-featured-root-v2{

        isolation:isolate !important;

        overflow:hidden !important;
    }


    /* =====================================================
       PLAY AREA
       Must stay ABOVE the poster selector.
       ===================================================== */

    html.gm-mobile-featured-v2
    .gm-mobile-featured-action-v2{

        position:relative !important;

        z-index:80 !important;

        pointer-events:auto !important;

        overflow:visible !important;

        isolation:isolate !important;
    }


    html.gm-mobile-featured-v2
    .gm-mobile-featured-play-v2{

        position:relative !important;

        z-index:100 !important;

        pointer-events:auto !important;

        touch-action:manipulation !important;

        -webkit-tap-highlight-color:
            rgba(237,49,89,.16) !important;

        opacity:1 !important;

        visibility:visible !important;

        cursor:pointer !important;
    }


    /*
     * Make the entire visible Play Now surface
     * receive the touch.
     */

    html.gm-mobile-featured-v2
    .gm-mobile-featured-play-v2,
    html.gm-mobile-featured-v2
    .gm-mobile-featured-play-v2 *{

        pointer-events:auto !important;
    }


    /* =====================================================
       POSTER SELECTOR
       Lower stacking layer than Play button.
       ===================================================== */

    html.gm-mobile-featured-v2
    .gm-mobile-featured-posters-v2{

        z-index:20 !important;

        pointer-events:auto !important;

        /*
         * JS calculates this only when an overlap exists.
         */

        transform:
            translateY(
                var(
                    --gm-featured-poster-shift-v2,
                    0px
                )
            ) !important;

        transition:
            transform .16s ease !important;
    }


    html.gm-mobile-featured-v2
    .gm-mobile-featured-posters-v2
    .gm-poster-choice{

        position:relative !important;

        z-index:21 !important;

        pointer-events:auto !important;

        touch-action:manipulation !important;
    }


    /*
     * Images themselves don't need to steal a touch.
     * Their parent button remains clickable.
     */

    html.gm-mobile-featured-v2
    .gm-mobile-featured-posters-v2
    .gm-poster-choice img{

        pointer-events:none !important;
    }


    /* =====================================================
       PLAY BUTTON DESIGN
       Keep current mobile design but guarantee readability.
       ===================================================== */

    html.gm-mobile-featured-v2
    .gm-mobile-featured-play-v2{

        min-width:0 !important;

        min-height:54px !important;

        padding:
            0 22px !important;

        border-radius:
            14px !important;

        box-sizing:border-box !important;

        font-weight:900 !important;

        line-height:1 !important;

        text-decoration:none !important;

        box-shadow:
            0 10px 28px
            rgba(0,0,0,.20) !important;
    }


    /* DARK */

    html[data-gm-theme="dark"]
    .gm-mobile-featured-play-v2{

        background:#ffffff !important;

        color:#172033 !important;

        -webkit-text-fill-color:
            #172033 !important;

        border:
            1px solid
            rgba(255,255,255,.92) !important;
    }


    html[data-gm-theme="dark"]
    .gm-mobile-featured-play-v2 *{

        color:#172033 !important;

        -webkit-text-fill-color:
            #172033 !important;
    }


    /* LIGHT */

    html[data-gm-theme="light"]
    .gm-mobile-featured-play-v2{

        background:#202b3c !important;

        color:#ffffff !important;

        -webkit-text-fill-color:
            #ffffff !important;

        border:
            1px solid
            #202b3c !important;
    }


    html[data-gm-theme="light"]
    .gm-mobile-featured-play-v2 *{

        color:#ffffff !important;

        -webkit-text-fill-color:
            #ffffff !important;
    }

}