/*==================================================
    TIPA MART
    CATEGORY SIDEBAR
==================================================*/


/*==================================================
    SIDEBAR
==================================================*/

.category-sidebar{

    width:100%;

    background:#FFFFFF;

    border:1px solid #E6E6E6;

    border-radius:6px;

    overflow:hidden;

}


/*==================================================
    HEADER
==================================================*/

.category-sidebar__header{

    padding:16px 18px;

    background:#F7F8FA;

    border-bottom:1px solid #E6E6E6;

}


.category-sidebar__header h3{

    margin:0;

    display:flex;

    align-items:center;

    gap:9px;

    color:#082C6C;

    font-size:17px;

    font-weight:700;

}


.category-sidebar__header h3 i{

    color:#F5B51D;

    font-size:15px;

}


/*==================================================
    FORM
==================================================*/

.category-sidebar__form{

    padding:15px 18px 18px;

}


/*==================================================
    TREE
==================================================*/

.category-sidebar__tree{

    list-style:none;

    margin:0;

    padding:0;

}


.category-sidebar__tree--level-0{

    margin:0;

    padding:0;

}


/*==================================================
    CATEGORY ITEM
==================================================*/

.category-sidebar__item{

    margin:0;

    padding:0;

}


/*==================================================
    CHECKBOX ROW
==================================================*/

.category-sidebar__checkbox{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    min-height:38px;

    margin:0;

    padding:7px 4px;

    cursor:pointer;

    user-select:none;

    border-radius:4px;

    transition:

        background-color .2s ease,

        color .2s ease;

}


.category-sidebar__checkbox:hover{

    background:#F7F8FA;

}


/*==================================================
    HIDDEN NATIVE CHECKBOX
==================================================*/

.category-sidebar__checkbox input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}


/*==================================================
    CUSTOM CHECKMARK
==================================================*/

.category-sidebar__checkmark{

    flex:0 0 17px;

    width:17px;

    height:17px;

    border:1px solid #CFCFCF;

    border-radius:3px;

    background:#FFFFFF;

    position:relative;

    transition:

        background-color .2s ease,

        border-color .2s ease;

}


/*==================================================
    CHECKED STATE
==================================================*/

.category-sidebar__checkbox input:checked
+ .category-sidebar__checkmark{

    background:#082C6C;

    border-color:#082C6C;

}


.category-sidebar__checkbox input:checked
+ .category-sidebar__checkmark::after{

    content:"";

    position:absolute;

    left:5px;

    top:2px;

    width:5px;

    height:9px;

    border:solid #FFFFFF;

    border-width:0 2px 2px 0;

    transform:rotate(45deg);

}


/*==================================================
    CATEGORY NAME
==================================================*/

.category-sidebar__name{

    flex:1;

    color:#444;

    font-size:14px;

    line-height:1.4;

}


.category-sidebar__checkbox:hover
.category-sidebar__name{

    color:#082C6C;

}


.category-sidebar__checkbox input:checked
~ .category-sidebar__name{

    color:#082C6C;

    font-weight:600;

}


/*==================================================
    CHILDREN
==================================================*/

.category-sidebar__children{

    margin:0 0 0 15px;

    padding:0 0 0 10px;

    border-left:1px solid #E8E8E8;

}


/*==================================================
    DEEPER LEVELS
==================================================*/

.category-sidebar__children
.category-sidebar__children{

    margin-left:10px;

}


/*==================================================
    APPLY BUTTON
==================================================*/

.category-sidebar__button{

    width:100%;

    height:40px;

    margin-top:16px;

    border:0;

    border-radius:5px;

    background:#082C6C;

    color:#FFFFFF;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    transition:

        background-color .25s ease,

        transform .2s ease;

}


.category-sidebar__button:hover{

    background:#F5B51D;

    color:#082C6C;

    transform:translateY(-1px);

}


/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .category-sidebar__form{

        padding:14px;

    }


    .category-sidebar__header{

        padding:14px 16px;

    }

}


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

@media (max-width:768px){

    .category-sidebar{

        margin-bottom:20px;

    }

}