/* ─────────────────── SIDEBAR FRAME ─────────────────── */
.categories-sidebar{
    width:320px;           
    min-width:320px;
    height:max-content;    
    max-height:100%;       
    overflow:auto;         
    border:2px solid #E7F1FF;
    border-radius:10px;
    background:#fff;
    box-shadow:0 4px 6px rgba(0,0,0,.05);
    padding:20px 15px;
}

/* header */
.categories-header{
    padding-bottom:15px;
    font:700 24px/1 'Rethink Sans',sans-serif;
    color:#16283D;
    border-bottom:2px solid #E7F1FF;
}

/* inner scroll zone */
.categories-container{
    display:flex;
    overflow:hidden;
    max-height:100%;
}
.categories-list{
    flex:1;
    overflow-y:scroll;
    padding:5px 0;
    max-height:620px;      /* visible height inside frame */
}

/* ───── category row ───── */
.category-item{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    cursor:pointer;
    position:relative;
}
.category-item.active{border-bottom:1px solid #E7F1FF;}

.category-name{color:#16283D;font:400 16px/1 'Rethink Sans',sans-serif;padding-left:10px;}
.category-name a{color:inherit!important;text-decoration:none;}
.category-item.active .category-name{color:#0E76FF;font-weight:500;}

/* arrow */
.dropdown-arrow{display:flex;align-items:center;justify-content:center;padding:10px 15px;}
.arrow-icon{width:9.38px;height:4.69px;stroke:#16283D;stroke-width:1.5px;}
.arrow-icon img{transition:transform .3s ease;}
.category-item.active .arrow-icon img{transform:rotate(180deg);}

/* ───── sub-categories ───── */
.subcategory-list{display:none;width:100%;padding-left:15px;margin-top:10px;}
.category-item.active .subcategory-list{display:block;}

.subcategory-item{
    display:block;
    padding:10px;
    margin:8px 0;
    font:400 16px/1 'Rethink Sans',sans-serif;
    color:#16283D;
    text-decoration:none;
    border-radius:5px;
}
.subcategory-item:hover{font-weight:500;background:#EAEBED;}

/* ───── custom scrollbar (track & thumb) ───── */
.categories-list::-webkit-scrollbar{width:5px}
.categories-list::-webkit-scrollbar-track{background:#EAEBED;border-radius:100px}
.categories-list::-webkit-scrollbar-thumb{background:#BABFC5;border-radius:100px}

.categories-list{
    scrollbar-width:thin;                        /* Firefox */
    scrollbar-color:#BABFC5 #EAEBED;
    padding-right:10px;
}

/* ───── mobile overrides ───── */
@media(max-width:1024px){
  
    .categories-sidebar {
        /* width:350px;
        min-width: 350px */
    }
}
@media(max-width:768px){
    .categories-container{height:300px}
}