@media (max-width: 991px) {
    /* ۱. حفظ لوگو و دکمه منوی همبرگری در یک ردیف در بالای صفحه */
    .navbar-brand-left {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* =========================================
       ۲. استایل منوی اصلی (همبرگری) - یوزر فرندلی
       ========================================= */
    #navbar-menu {
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        margin-top: 15px;
        padding: 10px;
        border: 1px solid #f1f5f9;
    }

    /* دکمه‌های منوی اصلی (خوانا و مناسب برای تاچ) */
    .navbar-nav > li > a {
        padding: 14px 15px !important;
        border-radius: 8px;
        font-weight: 500;
        color: #334155;
        transition: background 0.2s ease;
    }

        .navbar-nav > li > a:active {
            background-color: #f8fafc !important; /* فیدبک بصری هنگام لمس */
        }

    /* زیرمنوهای منوی اصلی (آکاردئونی ملایم - بدون روی هم افتادن) */
    .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        background-color: #f8fafc !important;
        border: none !important;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
        padding: 5px 15px !important;
        margin-top: 5px !important;
        border-radius: 8px;
    }

    /* =========================================
       ۳. بخش پایین هدر (پروفایل، سبد خرید، ورود)
       ========================================= */
    .attr-right {
        display: block !important;
        width: 100%;
        margin-top: 15px;
        padding: 15px !important; /* افزایش فضای تاچ */
        background-color: #f8fafc;
        border-radius: 16px;
        border-top: 1px solid #f1f5f9;
        position: relative;
        z-index: 99;
    }

    .attr-nav > ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        padding: 0;
        margin: 0;
        gap: 12px;
    }

    /* ترتیب قرارگیری */
    #btnOpenLogin,
    #userDropdown {
        order: 1 !important;
        width: 100%;
    }

    li.cart-dropdown {
        order: 2 !important;
        width: 100%;
    }

    /* =========================================
       ۴. استایل‌دهی مدرن دکمه‌های ورود و کاربری
       ========================================= */
    /* الف) دکمه ورود / ثبت نام */
    .attr-nav > ul > li#btnOpenLogin {
        background-color: #ffb606 !important;
        color: #000 !important;
        padding: 12px 20px !important;
        border-radius: 50px !important;
        border: none !important;
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(255, 182, 6, 0.3) !important;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease;
    }

    /* ب) دکمه بازکردن حساب من و سبد خرید */
    .attr-nav > ul > li > a {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        padding: 12px 20px !important;
        border-radius: 50px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #334155;
        font-weight: 600;
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        width: 100%;
    }

    /* =========================================
       ۵. دراپ‌داون‌های پروفایل و سبد خرید (باز شدن شناور)
       ========================================= */
    .attr-right .dropdown {
        position: relative !important;
        width: 100%;
    }

    .attr-right .dropdown-menu {
        position: absolute !important; /* باز شدن دقیقاً زیر دکمه بدون هل دادن بقیه سایت */
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 10000 !important;
        background-color: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
        border-radius: 16px !important;
        margin-top: 8px !important; /* فاصله میلی‌متری و جذاب از دکمه */
        padding: 10px !important;
        float: none !important;
    }

        /* فاصله‌گذاری و استایل آیتم‌های داخل منوی پروفایل */
        .attr-right .dropdown-menu li {
            margin-bottom: 8px;
        }

            .attr-right .dropdown-menu li:last-child {
                margin-bottom: 0;
            }

        /* استایل کارت‌مانند برای لینک‌های پروفایل */
        .attr-right .dropdown-menu a {
            position: relative;
            z-index: 10000 !important;
            pointer-events: auto !important;
            display: flex !important;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            padding: 12px 16px !important;
            background-color: #f8fafc; /* پس‌زمینه ملایم لینک‌ها */
            border-radius: 12px;
            color: #475569 !important;
            font-size: 14px;
            font-weight: 500;
            border: 1px solid #e2e8f0;
        }

            .attr-right .dropdown-menu a i {
                font-size: 16px;
                color: #94a3b8;
            }

            /* استایل متمایز برای دکمه خروج */
            .attr-right .dropdown-menu a#btnLogout {
                color: #ef4444 !important;
                background-color: #fef2f2;
                border-color: #fecaca;
            }

                .attr-right .dropdown-menu a#btnLogout i {
                    color: #ef4444;
                }

        /* حذف خط ساده جداکننده قدیمی */
        .attr-right .dropdown-menu li.divider {
            display: none !important;
        }
}