/* ==========================================================================
   1. ROOT VARIABLES & GLOBAL STYLES
   ========================================================================== */
:root {
    --fb-bg: #F0F2F5;
    --fb-blue: #0866FF;
    --fb-dark: #050505;
    --fb-gray: #65676B;
    --fb-hover: #E4E6E9;
}

body {
    background-color: var(--fb-bg);
    color: var(--fb-dark);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-y: scroll;
}

/* ==========================================================================
   2. UTILITY CLASSES
   ========================================================================== */
.text-fb-blue { color: var(--fb-blue) !important; }
.text-fb-gray { color: var(--fb-gray) !important; }
.bg-hover:hover { background-color: var(--fb-hover) !important; cursor: pointer; transition: 0.2s; }
.cursor-pointer { cursor: pointer; }
.img-cover { object-fit: cover; }

.sidebar-scroll {
    height: calc(100vh - 56px);
    overflow-y: auto;
    scrollbar-width: thin; 
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; } 
.sidebar-scroll::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 10px;}

/* ==========================================================================
   3. NAVBAR COMPONENT STYLES
   ========================================================================== */
.nav-tab {
    height: 56px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    color: var(--fb-gray);
    border-radius: 8px;
}
.nav-tab:hover:not(.active) { background-color: var(--fb-hover); }
.nav-tab.active { border-bottom-color: var(--fb-blue); color: var(--fb-blue); border-radius: 0; }

.circle-btn {
    width: 40px; height: 40px; border-radius: 50%; background-color: var(--fb-hover);
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fb-dark);
}
.circle-btn:hover { background-color: #D8DADF; }

/* ==========================================================================
   4. CARD & FEED STYLES
   ========================================================================== */
.story-card { height: 200px; border-radius: 12px; cursor: pointer; transition: transform 0.2s; position: relative; overflow: hidden; }
.story-card:hover { transform: scale(1.02); }
.bg-story { background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%); }
.bg-reel { background: linear-gradient(to bottom, #ff0844 0%, #ffb199 100%); }

.post-action-btn {
    padding: 6px 0;
    border-radius: 6px;
    color: var(--fb-gray);
    font-weight: 600;
    transition: 0.2s;
}
.post-action-btn:hover { background-color: var(--fb-hover); }
.post-action-btn.liked { color: var(--fb-blue) !important; }

/* ==========================================================================
   5. RESPONSIVE STYLES
   ========================================================================== */
@media (max-width: 767.98px) {
     .navbar-brand-icon { font-size: 32px; }
}
.offcanvas-lg { background-color: var(--fb-bg); }


.lrs-area{
    top: 56px; max-width: 360px;
}

a{
    text-decoration: none !important;
}