/* =================================
   Simple Premium White Sidebar
   + Bottom Nav Sync
================================= */


.drawer-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.22);

    opacity:0;
    visibility:hidden;

    transition:.3s ease;

    z-index:9998;

}


.drawer-overlay.show{

    opacity:1;

    visibility:visible;

}





.side-drawer{

    position:fixed;

    top:0;

    right:0;

    width:300px;

    max-width:85%;

    height:100%;

    background:#ffffff;


    box-shadow:
    -12px 0 35px rgba(0,0,0,.15);


    transform:translateX(100%);


    transition:
    transform .35s cubic-bezier(.4,0,.2,1);


    z-index:9999;


    overflow-y:auto;


    touch-action:pan-y;

    will-change:transform;

}



.side-drawer.show{

    transform:translateX(0);

}





/* =================================
   Bottom Navigation Movement
================================= */


.bottom-nav{

    transition:
    transform .35s cubic-bezier(.4,0,.2,1),
    opacity .25s ease;

    will-change:transform;

}



body.drawer-open .bottom-nav{

    transform:translateX(-120px);

    opacity:.9;

}





/* =================================
   Header
================================= */


.drawer-header{

    height:130px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    background:#fff;


    border-bottom:
    1px solid #eee;

}



.drawer-brand{

    text-align:center;

}



.drawer-brand h2{

    margin:0;

    font-size:16px;

    font-weight:600;

    color:#222;

}



.drawer-brand p{

    margin-top:6px;

    font-size:12px;

    font-weight:400;

    color:#888;

}





#drawerClose{

    position:absolute;


    top:15px;


    left:15px;


    font-size:18px;


    color:#777;


    cursor:pointer;


}





/* =================================
   Menu
================================= */


.drawer-menu{

    padding:18px 15px;

}



.drawer-menu a{

    display:flex;


    align-items:center;


    justify-content:flex-start;


    gap:12px;


    padding:16px 12px;


    margin-bottom:5px;


    color:#333;


    text-decoration:none;


    font-size:14px;


    font-weight:400;


    border-radius:14px;


    transition:.25s ease;

}



.drawer-menu a:hover{

    background:#f5f6ff;

    color:#5865f2;

}





.drawer-menu hr{

    border:none;

    height:1px;

    background:#eee;

    margin:14px 5px;

}





/* =================================
   Menu Button
================================= */


.menu-btn{

    background:none;

    border:0;

}



.menu-btn span{

    width:22px;

    height:2px;


    background:#222;


    display:block;


    margin:5px;


    transition:.3s;

}



.menu-btn.active span:nth-child(1){

    transform:
    translateY(7px)
    rotate(45deg);

}



.menu-btn.active span:nth-child(2){

    opacity:0;

}



.menu-btn.active span:nth-child(3){

    transform:
    translateY(-7px)
    rotate(-45deg);

}


/* =================================
   Community Button
   نفس شكل أزرار القائمة
================================= */

.drawer-menu .community-sidebar-link{
    background:transparent;
    border:0;
    color:#333;
    font-weight:400;
    box-shadow:none;
}

.drawer-menu .community-sidebar-link:hover{
    background:#f5f6ff;
    color:#5865f2;
    transform:none;
    box-shadow:none;
}

.community-sidebar-icon{
    width:auto;
    height:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}


/* Supabase-backed unread dots */
.menu-btn{position:relative}
.menu-btn.has-unread::after{
 content:"";position:absolute;top:0;right:0;width:9px;height:9px;border-radius:50%;
 background:#f04444;border:2px solid #fff;box-shadow:0 0 0 1px rgba(240,68,68,.12)
}
.drawer-menu a[data-badge-section]{position:relative;padding-inline-start:34px}
.section-unread-dot{
 display:none;position:absolute;left:13px;top:50%;transform:translateY(-50%);
 width:9px;height:9px;border-radius:50%;background:#f04444;
 box-shadow:0 0 0 3px rgba(240,68,68,.10);flex:0 0 auto
}
.drawer-menu a[data-badge-section].has-unread .section-unread-dot{display:block}


/* Compact SVG shortcut to the standalone publishing page */
.drawer-header .drawer-publish-link{
    position:absolute;
    top:17px;
    right:17px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e8ebf2;
    border-radius:10px;
    background:#fff;
    color:#5865d9;
    text-decoration:none;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
    z-index:2;
}
.drawer-header .drawer-publish-link:hover{
    background:#f5f6ff;
    border-color:#cbd2ff;
    transform:translateY(-1px);
}
.drawer-header .drawer-publish-link:active{
    transform:scale(.96);
}
.drawer-publish-link svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    display:block;
}


/* Compact publishing-ban indicator and lightweight notification bubble */
.drawer-header .drawer-publish-link.is-publish-banned{
    color:#dc2626;
    border-color:#fecaca;
    background:#fff7f7;
}
.drawer-header .drawer-publish-link.is-publish-banned svg{
    stroke:currentColor;
}
.drawer-header .drawer-publish-link .publish-ban-bubble{
    position:absolute;
    top:42px;
    right:0;
    width:max-content;
    max-width:min(260px, calc(100vw - 44px));
    padding:8px 10px;
    border:1px solid rgba(220,38,38,.15);
    border-radius:10px;
    background:rgba(255,250,250,.98);
    color:#8f2424;
    box-shadow:0 5px 18px rgba(30,20,20,.09);
    font-size:11px;
    line-height:1.65;
    font-weight:300;
    white-space:normal;
    text-align:right;
    direction:rtl;
    opacity:0;
    visibility:hidden;
    transform:translateY(-3px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index:10002;
    pointer-events:none;
}
.drawer-header .drawer-publish-link .publish-ban-bubble.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.drawer-header .drawer-publish-link.is-publish-banned:active{
    transform:scale(.97);
}