/* =========================================================
   GENIUS MOVIES
   MOBILE BROWSE FILTER V5
   ========================================================= */


.gm-mobile-browse-filter-v5{

    display:none;
}


@media(max-width:760px){

    /*
     * Only browse routes receive this HTML class.
     */

    html.gm-mobile-browse-v5
    .gm-mobile-browse-filter-v5{

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:9px;

        width:
            calc(100% - 24px);

        margin:
            8px 12px
            14px;

        padding:
            12px;

        box-sizing:border-box;

        border-radius:14px;

        background:#10151e;

        border:
            1px solid
            #27303d;

        box-shadow:
            0 7px 22px
            rgba(0,0,0,.10);
    }


    html.gm-mobile-browse-v5
    .gm-mobile-filter-title{

        grid-column:
            1 / -1;

        display:flex;

        align-items:center;

        gap:7px;

        font-size:13px;

        font-weight:900;

        color:#f5f7fb;
    }


    html.gm-mobile-browse-v5
    .gm-mobile-filter-field{

        display:flex;

        flex-direction:column;

        gap:5px;

        min-width:0;
    }


    html.gm-mobile-browse-v5
    .gm-mobile-filter-field
    > span{

        font-size:10px;

        line-height:1;

        font-weight:900;

        letter-spacing:.07em;

        text-transform:uppercase;

        color:#98a2b3;
    }


    html.gm-mobile-browse-v5
    .gm-mobile-filter-select{

        display:block !important;

        width:100% !important;

        min-width:0 !important;

        height:44px !important;

        padding:
            0 9px !important;

        box-sizing:border-box !important;

        border-radius:10px !important;

        border:
            1px solid
            #303947 !important;

        background:#171d28 !important;

        color:#f5f7fb !important;

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

        font-family:inherit !important;

        font-size:13px !important;

        font-weight:700 !important;
    }


    html.gm-mobile-browse-v5
    .gm-mobile-filter-clear{

        grid-column:
            1 / -1;

        height:40px;

        border:
            1px solid
            #303947;

        border-radius:10px;

        background:#171d28;

        color:#f5f7fb;

        font-family:inherit;

        font-weight:800;

        font-size:12px;
    }


    /*
     * Hide duplicated old mobile rows:
     *
     * New / Movies / Web Series...
     * 2026 / 2025 / ...
     * Horror / Comedy / ...
     */

    html.gm-mobile-browse-v5
    .gm-mobile-old-filter-hidden{

        display:none !important;

        height:0 !important;

        min-height:0 !important;

        max-height:0 !important;

        margin:0 !important;

        padding:0 !important;

        overflow:hidden !important;

        visibility:hidden !important;
    }


    /*
     * If old experimental filter V1 exists,
     * hide it only on mobile.
     */

    html.gm-mobile-browse-v5
    .gm-browse-filter-panel{

        display:none !important;
    }


    /* LIGHT MODE */

    html[data-gm-theme="light"]
    .gm-mobile-browse-filter-v5{

        background:#ffffff !important;

        border-color:#dce3eb !important;

        box-shadow:
            0 6px 20px
            rgba(15,23,42,.06);
    }


    html[data-gm-theme="light"]
    .gm-mobile-filter-title{

        color:#202b3c !important;

        -webkit-text-fill-color:
            #202b3c !important;
    }


    html[data-gm-theme="light"]
    .gm-mobile-filter-field
    > span{

        color:#6b7585 !important;

        -webkit-text-fill-color:
            #6b7585 !important;
    }


    html[data-gm-theme="light"]
    .gm-mobile-filter-select{

        background:#f6f8fb !important;

        color:#202b3c !important;

        -webkit-text-fill-color:
            #202b3c !important;

        border-color:#dce3eb !important;
    }


    html[data-gm-theme="light"]
    .gm-mobile-filter-clear{

        background:#f6f8fb !important;

        color:#344054 !important;

        border-color:#dce3eb !important;
    }

}


@media(max-width:390px){

    html.gm-mobile-browse-v5
    .gm-mobile-browse-filter-v5{

        grid-template-columns:
            minmax(0,1fr);
    }


    html.gm-mobile-browse-v5
    .gm-mobile-filter-title,

    html.gm-mobile-browse-v5
    .gm-mobile-filter-clear{

        grid-column:auto;
    }

}