/* ==================================================
   تمام استایل‌های نوار ناوبری (Navbar) در این فایل متمرکز شده است
   ================================================== */

/* ---------------------- متغیرهای مخصوص نوار ---------------------- */
:root {
    --nav-bg: linear-gradient(115deg, #e50914, #ff3345);
    --nav-border-bottom: 1px solid rgba(255,255,255,.35);
    --nav-shadow: 0 8px 20px rgba(0,0,0,.2);
    --nav-text: #212529;
    --nav-text-hover: #000;
    --nav-brand-color: #ffffff;
    --nav-link-padding: .62rem 1.1rem;
}

/* ---------- هدر اصلی سایت (حاوی نوار) ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    backdrop-filter: blur(3px);
    padding: 6px 8px;
}

    /* ---------- خود نوار ---------- */
    .site-header .navbar {
        background: var(--nav-bg);
        border-bottom: var(--nav-border-bottom);
        box-shadow: var(--nav-shadow);
        border-radius: 12px;
        margin: 0;
        border: 1px solid rgba(255,255,255,.45);
    }

    /* ---------- برند/لوگو ---------- */
    .site-header .navbar-brand {
        color: var(--nav-brand-color) !important;
        font-weight: 800;
        font-size: 1.25rem;
    }

    /* ---------- آیتم‌های منو (لینک‌ها) ---------- */
    .site-header .navbar-nav .nav-link {
        color: var(--nav-text) !important;
        font-weight: 700;
        padding: var(--nav-link-padding);
        transition: all 0.2s ease;
        border: 1px solid rgba(0,0,0,.30) !important;
        border-radius: 10px !important;
        background: linear-gradient(180deg, #ffffff, #f1f3f5) !important;
        box-shadow: 0 2px 0 rgba(255,255,255,.65) inset;
        margin: 0 !important;
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        gap: .35rem;
    }

        .site-header .navbar-nav .nav-link:hover {
            color: var(--nav-text-hover) !important;
            transform: translateY(-1px);
            text-decoration: none;
            background: #fff !important;
        }

        .site-header .navbar-nav .nav-link.active {
            filter: brightness(0.85);
        }

        /* ---------- رنگ‌بندی مخصوص کلاس main-topnav (اگر استفاده شود) ---------- */
        .main-topnav .nav-item:nth-child(1) .nav-link,
        .main-topnav .nav-item:nth-child(2) .nav-link,
        .main-topnav .nav-item:nth-child(3) .nav-link,
        .main-topnav .nav-item:nth-child(4) .nav-link,
        .main-topnav .nav-item:nth-child(5) .nav-link,
        .main-topnav .nav-item:nth-child(6) .nav-link,
        .main-topnav .nav-item:nth-child(7) .nav-link {
            background: linear-gradient(180deg, #ffffff, #f1f3f5) !important;
        }

    /* ---------- دکمه خروج / ورود ---------- */
    .site-header .btn-outline-light {
        color: #111 !important;
        border-color: rgba(0,0,0,.6) !important;
        background: linear-gradient(180deg, #ff4a58, #f12738) !important;
        transition: all 0.2s;
    }

        .site-header .btn-outline-light:hover {
            background: #ff3142 !important;
            color: #111 !important;
        }

    /* ورود */
    .login-btn {
        color: #111 !important;
        border-color: rgba(0,0,0,.6) !important;
    }

    /* نام کاربری */
    .navbar-text {
        color: #fff !important;
        font-weight: bold;
        margin-left: 0.5rem;
    }

        .navbar-text:hover {
            color: #fff !important;
            text-decoration: underline;
        }

    /* ---------- نشان اعلان پیام در منو ---------- */
    #mainChatNavLink {
        position: relative;
        padding-inline-end: 2rem !important;
        overflow: visible !important;
    }

        #mainChatNavLink::after {
            display: none !important;
        }

        #mainChatNavLink .chat-unread-badge {
            position: absolute;
            top: -2px;
            inset-inline-end: -12px;
            transform: none;
            display: none;
            min-width: 24px;
            height: 24px;
            padding: 0 7px;
            border-radius: 999px;
            background: #ff2d55 !important;
            color: #fff !important;
            border: 2px solid #fff;
            box-shadow: 0 4px 10px rgba(0,0,0,.25);
            font-size: 13px;
            font-weight: 700;
            line-height: 20px;
            text-align: center;
            z-index: 20;
        }

    /* ---------- دکمه همبرگری (موبایل) ---------- */
    .site-header .navbar-toggler {
        background: #fff !important;
        border-color: #fff !important;
        border-radius: 8px;
    }

    .site-header .navbar-toggler-icon {
        filter: none !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
    }

    .site-header .navbar-toggler:focus {
        box-shadow: none !important;
    }

    /* ---------- حاشیه سفید دور بخش کاربری (اختیاری) ---------- */
    .site-header .navbar .navbar-collapse > *:last-child {
        border: 1px solid rgba(255,255,255,.55);
        border-radius: 10px;
        padding: 0.3rem 0.75rem;
        margin-inline-start: 1rem;
        background: rgba(255,255,255,.12);
    }

    /* ---------- ریسپانسیو نوار ---------- */
    @media (max-width: 991.98px) {
        .site-header {
            padding: 0;
        }

        .site-header .navbar {
            border-radius: 0;
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
            border: 0;
        }

        .main-topnav .nav-link::after {
            display: none !important;
        }

        .main-topnav .nav-item {
            width: 100%;
        }

        .site-header .navbar .navbar-collapse > *:last-child {
            margin-inline-start: 0;
            border: none;
            background: transparent;
            padding: 0;
        }

        .site-header .navbar-nav .nav-link {
            width: 100%;
            justify-content: center;
        }

        .navbar-text, .btn-outline-light {
            margin-top: 0.5rem;
            text-align: center;
        }
    }