/* =========================================================
   GENIUS MOVIES
   BROWSE FILTER PANEL V1
   ========================================================= */


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

.gm-browse-filter-panel{

    display:flex;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:12px;

    width:100%;

    margin:
        12px 0 20px;

    padding:
        14px 16px;

    box-sizing:border-box;

    border-radius:16px;

    background:#10151e;

    border:
        1px solid
        #27303d;

    box-shadow:
        0 8px 26px
        rgba(0,0,0,.12);
}


.gm-browse-filter-heading{

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

    margin-bottom:1px;

    font-size:14px;

    font-weight:800;

    color:#f5f7fb;
}


.gm-browse-filter-heading-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    border-radius:8px;

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

    color:#ed3159;

    font-size:15px;
}


/* =========================================================
   FIELD
   ========================================================= */

.gm-browse-filter-field{

    display:flex;

    flex-direction:column;

    gap:6px;

    flex:
        1 1 190px;

    min-width:180px;

    max-width:280px;
}


.gm-browse-filter-label{

    display:block;

    margin:0;

    padding:0 2px;

    font-size:11px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#98a2b3;
}


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

.gm-browse-filter-select{

    width:100%;

    height:46px;

    box-sizing:border-box;

    appearance:auto;

    margin:0;

    padding:
        0 38px 0 13px;

    border-radius:11px;

    border:
        1px solid
        #303947;

    outline:none;

    background:#171d28;

    color:#f5f7fb;

    font-family:inherit;

    font-size:14px;

    font-weight:700;

    cursor:pointer;
}


.gm-browse-filter-select:hover{

    border-color:#4b5667;
}


.gm-browse-filter-select:focus{

    border-color:#ed3159;

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


.gm-browse-filter-select option{

    background:#171d28;

    color:#f5f7fb;
}


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

.gm-browse-filter-clear{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    flex:
        0 0 auto;

    min-width:130px;

    height:46px;

    padding:
        0 16px;

    border-radius:11px;

    border:
        1px solid
        #303947;

    background:#171d28;

    color:#f5f7fb;

    font-family:inherit;

    font-size:13px;

    font-weight:800;

    cursor:pointer;

    transition:
        .18s ease;
}


.gm-browse-filter-clear:hover{

    color:#ffffff;

    border-color:#ed3159;

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


/* =========================================================
   ACTIVE FILTER INDICATOR
   ========================================================= */

.gm-browse-filter-panel.gm-has-filter{

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


.gm-browse-filter-panel.gm-has-filter
.gm-browse-filter-heading-icon{

    background:#ed3159;

    color:#ffffff;
}


/* =========================================================
   REMOVE ORIGINAL HUGE FILTER ROWS
   ========================================================= */

.gm-browse-original-filters-hidden,

.gm-browse-original-filter-row-hidden{

    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;
}


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

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

    background:#ffffff;

    border-color:#dbe2ea;

    box-shadow:
        0 7px 24px
        rgba(31,41,55,.07);
}


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

    color:#202b3c;
}


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

    color:#707b8d;
}


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

    background:#f7f9fc !important;

    color:#202b3c !important;

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

    border-color:#dbe2ea !important;
}


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

    background:#ffffff;

    color:#202b3c;
}


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

    background:#f7f9fc;

    color:#344054;

    border-color:#dbe2ea;
}


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

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

    color:#ed3159;

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


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

@media(max-width:760px){

    .gm-browse-filter-panel{

        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-browse-filter-heading{

        grid-column:
            1 / -1;

        margin-bottom:0;

        font-size:13px;
    }


    .gm-browse-filter-field{

        width:100%;

        min-width:0;

        max-width:none;
    }


    .gm-browse-filter-select{

        height:44px;

        padding-left:10px;

        font-size:13px;
    }


    .gm-browse-filter-clear{

        grid-column:
            1 / -1;

        width:100%;

        height:42px;

        min-width:0;
    }

}


@media(max-width:380px){

    .gm-browse-filter-panel{

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


    .gm-browse-filter-heading,
    .gm-browse-filter-clear{

        grid-column:auto;
    }

}