/* =========================================================
   GENIUS MOVIES
   MOBILE NATIVE BROWSE FILTER V6
   ========================================================= */


/*
 * Desktop remains exactly as before.
 */

.gm-mobile-native-filter-v6{

    display:none;
}


@media(max-width:760px){

    /* =====================================================
       OLD MOBILE FILTER ROWS
       ===================================================== */

    html.gm-mobile-native-browse-v6
    .browse-tabs,

    html.gm-mobile-native-browse-v6
    .chip-row{

        display:none !important;

        width:0 !important;

        height:0 !important;

        min-height:0 !important;

        max-height:0 !important;

        margin:0 !important;

        padding:0 !important;

        border:0 !important;

        overflow:hidden !important;

        visibility:hidden !important;
    }


    /*
     * Hide old experimental mobile filter.
     */

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

        display:none !important;
    }


    /*
     * Desktop filter V1 must not duplicate
     * the new mobile native filter.
     */

    html.gm-mobile-native-browse-v6
    .gm-browse-filter-panel{

        display:none !important;
    }


    /* =====================================================
       NEW FILTER PANEL
       ===================================================== */

    html.gm-mobile-native-browse-v6
    .gm-mobile-native-filter-v6{

        display:grid !important;

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

        gap:10px;

        width:
            calc(100% - 24px);

        margin:
            12px
            12px
            16px;

        padding:12px;

        box-sizing:border-box;

        border-radius:14px;

        background:#10151e;

        border:
            1px solid
            #27303d;

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


    .gm-mobile-native-filter-title{

        grid-column:
            1 / -1;

        display:flex;

        align-items:center;

        gap:8px;

        min-height:28px;

        color:#f5f7fb;

        font-size:14px;

        line-height:1;

        font-weight:900;
    }


    .gm-mobile-filter-symbol{

        display:inline-flex;

        align-items:center;

        justify-content:center;

        width:28px;

        height:28px;

        border-radius:8px;

        background:
            rgba(237,49,89,.15);

        color:#ed3159;

        font-size:16px;
    }


    .gm-mobile-native-filter-field{

        display:flex;

        flex-direction:column;

        gap:6px;

        width:100%;

        min-width:0;
    }


    .gm-mobile-native-filter-field
    > span{

        padding-left:2px;

        color:#98a2b3;

        font-size:10px;

        line-height:1.1;

        font-weight:900;

        letter-spacing:.08em;

        text-transform:uppercase;
    }


    .gm-mobile-native-select{

        display:block !important;

        width:100% !important;

        min-width:0 !important;

        height:44px !important;

        margin:0 !important;

        padding:
            0 9px !important;

        box-sizing:border-box !important;

        border:
            1px solid
            #303947 !important;

        border-radius:
            10px !important;

        outline:none !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;
    }


    .gm-mobile-native-select:focus{

        border-color:
            #ed3159 !important;

        box-shadow:
            0 0 0 3px
            rgba(237,49,89,.10);
    }


    .gm-mobile-native-select option{

        background:#171d28;

        color:#f5f7fb;
    }


    .gm-mobile-native-filter-clear{

        grid-column:
            1 / -1;

        width:100%;

        height:40px;

        border:
            1px solid
            #303947;

        border-radius:10px;

        background:#171d28;

        color:#f5f7fb;

        font-family:inherit;

        font-size:12px;

        font-weight:900;
    }


    /* =====================================================
       LIGHT MODE
       ===================================================== */

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

        background:#ffffff !important;

        border-color:#dce3eb !important;

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


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

        color:#202b3c !important;

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


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

        color:#687386 !important;

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


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

        background:
            #f6f8fb !important;

        border-color:
            #d9e0e9 !important;

        color:
            #202b3c !important;

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


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

        background:#ffffff;

        color:#202b3c;
    }


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

        background:#f6f8fb;

        border-color:#d9e0e9;

        color:#344054;
    }


    /* =====================================================
       BROWSE HEADING SAFETY
       Actual element is marked by V6 JS.
       ===================================================== */

    html.gm-mobile-native-browse-v6
    .gm-mobile-browse-heading-v6{

        position:relative !important;

        z-index:1 !important;

        height:auto !important;

        min-height:0 !important;

        max-height:none !important;

        overflow:visible !important;

        visibility:visible !important;

        opacity:1 !important;

        transform:none !important;
    }

}


@media(max-width:390px){

    html.gm-mobile-native-browse-v6
    .gm-mobile-native-filter-v6{

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


    .gm-mobile-native-filter-title,

    .gm-mobile-native-filter-clear{

        grid-column:auto;
    }

}