/* =========================================================
   GENIUS MOVIES
   UNIVERSAL BROWSE FILTER V8
   PC + MOBILE
   ========================================================= */


/* =========================================================
   HIDE ORIGINAL HUGE FILTER ROWS
   only on catalog/filter pages where V8 exists
   ========================================================= */

html.gm-universal-browse-v8
.browse-tabs,

html.gm-universal-browse-v8
.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;
}


/* Remove abandoned experimental panels if still generated */

html.gm-universal-browse-v8
.gm-browse-filter-panel,

html.gm-universal-browse-v8
.gm-mobile-browse-filter-v5,

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

    display:none !important;
}


/* =========================================================
   MAIN PANEL
   ========================================================= */

.gm-universal-browse-filter-v8{

    display:flex;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:12px;

    width:
        calc(100% - 56px);

    margin:
        12px 28px
        18px;

    padding:
        14px 16px;

    box-sizing:border-box;

    border:
        1px solid
        #27303d;

    border-radius:15px;

    background:#10151e;

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


/* =========================================================
   HEADING
   ========================================================= */

.gm-universal-filter-heading{

    display:flex;

    align-items:center;

    gap:9px;

    flex:
        0 0 auto;

    min-width:190px;

    min-height:46px;
}


.gm-universal-filter-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex:0 0 38px;

    width:38px;

    height:38px;

    border-radius:10px;

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

    color:#ed3159;

    font-size:18px;

    font-weight:900;
}


.gm-universal-filter-heading
strong{

    display:block;

    margin:0 0 3px;

    color:#f5f7fb;

    font-size:14px;

    line-height:1;

    font-weight:900;
}


.gm-universal-filter-heading
small{

    display:block;

    color:#98a2b3;

    font-size:11px;

    line-height:1.25;

    font-weight:600;
}


/* =========================================================
   FIELDS
   ========================================================= */

.gm-universal-filter-field{

    display:flex;

    flex-direction:column;

    gap:6px;

    flex:
        1 1 210px;

    min-width:190px;

    max-width:300px;
}


.gm-universal-filter-label{

    padding-left:2px;

    color:#98a2b3;

    font-size:10px;

    line-height:1;

    font-weight:900;

    letter-spacing:.08em;

    text-transform:uppercase;
}


/* =========================================================
   SELECT
   ========================================================= */

.gm-universal-filter-select{

    display:block !important;

    width:100% !important;

    height:46px !important;

    margin:0 !important;

    padding:
        0 12px !important;

    box-sizing:border-box !important;

    border:
        1px solid
        #303947 !important;

    border-radius:
        11px !important;

    outline:none !important;

    background:
        #171d28 !important;

    color:
        #f5f7fb !important;

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

    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    cursor:pointer;
}


.gm-universal-filter-select:focus{

    border-color:
        #ed3159 !important;

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


.gm-universal-filter-select option{

    background:#171d28;

    color:#f5f7fb;
}


/* =========================================================
   CLEAR BUTTON
   ========================================================= */

.gm-universal-filter-clear{

    flex:0 0 auto;

    min-width:135px;

    height:46px;

    padding:
        0 16px;

    border:
        1px solid
        #303947;

    border-radius:11px;

    background:#171d28;

    color:#f5f7fb;

    font-family:inherit;

    font-size:13px;

    font-weight:900;

    cursor:pointer;
}


.gm-universal-filter-clear:hover{

    border-color:#ed3159;

    color:#ffffff;

    background:
        rgba(237,49,89,.13);
}


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

html[data-gm-theme="light"]
.gm-universal-browse-filter-v8{

    background:#ffffff !important;

    border-color:#dbe2ea !important;

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


html[data-gm-theme="light"]
.gm-universal-filter-heading
strong{

    color:#202b3c !important;

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


html[data-gm-theme="light"]
.gm-universal-filter-heading
small,

html[data-gm-theme="light"]
.gm-universal-filter-label{

    color:#697586 !important;

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


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

    background:
        #f6f8fb !important;

    color:
        #202b3c !important;

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

    border-color:
        #d9e0e9 !important;
}


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

    background:#ffffff;

    color:#202b3c;
}


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

    background:#f6f8fb;

    color:#344054;

    border-color:#d9e0e9;
}


html[data-gm-theme="light"]
.gm-universal-filter-clear:hover{

    color:#ed3159;

    border-color:
        rgba(237,49,89,.45);

    background:
        rgba(237,49,89,.07);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

    .gm-universal-browse-filter-v8{

        display:grid;

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

        gap:10px;

        width:
            calc(100% - 24px);

        margin:
            10px 12px
            16px;

        padding:12px;

        border-radius:14px;
    }


    .gm-universal-filter-heading{

        grid-column:
            1 / -1;

        min-width:0;

        min-height:38px;
    }


    .gm-universal-filter-icon{

        flex-basis:32px;

        width:32px;

        height:32px;

        border-radius:8px;

        font-size:15px;
    }


    .gm-universal-filter-heading
    strong{

        font-size:13px;
    }


    .gm-universal-filter-heading
    small{

        font-size:10px;
    }


    .gm-universal-filter-field{

        width:100%;

        min-width:0;

        max-width:none;
    }


    .gm-universal-filter-select{

        height:44px !important;

        padding:
            0 9px !important;

        font-size:
            13px !important;
    }


    .gm-universal-filter-clear{

        grid-column:
            1 / -1;

        width:100%;

        min-width:0;

        height:40px;
    }

}


@media(max-width:380px){

    .gm-universal-browse-filter-v8{

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


    .gm-universal-filter-heading,

    .gm-universal-filter-clear{

        grid-column:auto;
    }

}