/* ============================================================
 * MOBILE MENU OVERRIDE — منوی همبرگری Premium
 * این فایل بعد از style.css اصلی لود می‌شود و تغییرات را override می‌کند.
 * همه قواعد با !important تا مطمئن بشیم override بشن.
 * ============================================================ */

/* [FIX] سربرگ منوی موبایل (شامل دکمه بستن + برند ALIBANDANA) باید فقط
 * داخل drawer موبایل نمایش داده شود. در دسکتاپ، چون main-nav به‌صورت
 * بلاک افقی نمایش داده می‌شود، این سربرگ نباید قابل دیدن باشد.
 * در Style.css اصلی، .mobile-nav-close به‌صورت display:none پیش‌فرض است
 * و در موبایل display:flex می‌شود، ولی .mobile-nav-header و .mobile-nav-brand
 * هیچ قاعده‌ای نداشتند و در دسکتاپ به‌اشتباه نمایش داده می‌شدند.
 * راه‌حل: display:none پیش‌فرض، و در موبایل با !important بازنمایش داده می‌شوند.
 */
.mobile-nav-header {
    display: none !important;
}

/* [PREMIUM] دکمه‌ها و آیتم‌های فقط موبایل — در دسکتاپ مخفی */
@media (max-width: 768px) {

    /* Overlay واقعی */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0,0,0,0.6) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        z-index: 9998 !important;
        cursor: pointer !important;
    }
    body.menu-open .mobile-menu-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* منوی اصلی — پس‌زمینه تیره‌تر */
    .main-nav {
        background: #0a0a0c !important;
        box-shadow: -20px 0 60px rgba(0,0,0,0.6) !important;
        overscroll-behavior: contain !important;
    }

    /* سربرگ منو */
    .mobile-nav-header {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 20px 12px 18px !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        background: linear-gradient(135deg, rgba(192,57,43,0.12), rgba(192,57,43,0.02)) !important;
    }
    .mobile-nav-close {
        color: rgba(255,255,255,0.6) !important;
        padding: 6px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    .mobile-nav-close:hover {
        background: rgba(255,255,255,0.1) !important;
        color: #fff !important;
    }
    .mobile-nav-brand {
        display: flex !important;
        flex-direction: column !important;
        text-decoration: none !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    .mobile-nav-brand-text {
        font-size: 17px !important;
        font-weight: 900 !important;
        letter-spacing: 0.5px !important;
        background: linear-gradient(135deg, #fff, #bdc3c7) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    .mobile-nav-brand-sub {
        font-size: 11px !important;
        color: rgba(255,255,255,0.45) !important;
        margin-top: 2px !important;
    }

    /* [FIX #1] حذف فاصله 70px بالا در nav-list موبایل.
     * این فاصله قبلاً برای فضای خالی بالای منو بود، ولی حالا که
     * .mobile-nav-header نمایش داده می‌شود، باید آیتم‌ها بلافاصله زیر
     * سربرگ قرار بگیرند. top padding از 70px به 0 تغییر کرد.
     * همچنین gap افقی برای جدا کردن کارت‌های شیشه‌ای اضافه شد.
     */
    .nav-list {
        padding: 12px 12px 30px !important;
        gap: 8px !important;
    }

    /* [FIX] حذف خط پایین از nav-item-row (در style.css اصلی border-bottom دارد) */
    .nav-item-row {
        border-bottom: none !important;
    }

    /* =====================================================================
     * [PREMIUM] کارت شیشه‌ای برای هر آیتم منوی همبرگری
     * هر .nav-item-row به یک کارت glassy برجسته تبدیل می‌شود:
     *  - پس‌زمینه نیمه‌شفاف با blur (glassmorphism)
     *  - حاشیه روشن برای ایجاد حس برجستگی
     *  - سایه داخلی و خارجی برای حس سه‌بعدی
     *  - انیمیشن نرم روی hover
     * ===================================================================== */
    .nav-item-row {
        background: rgba(255, 255, 255, 0.04) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
        margin-bottom: 0 !important;
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        overflow: hidden !important;
        transition:
            background 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease,
            transform 0.25s ease !important;
    }

    /* [PREMIUM] hover: کارت برجسته‌تر می‌شود (کمی روشن‌تر + سایه قوی‌تر) */
    .nav-item-row:hover {
        background: rgba(255, 255, 255, 0.07) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        transform: translateY(-1px) !important;
    }

    /* [PREMIUM] آیتم فعال: کارت با لهجه‌ی قرمز برند */
    .nav-item.active > .nav-item-row {
        background: linear-gradient(135deg, rgba(192, 57, 43, 0.18), rgba(192, 57, 43, 0.05)) !important;
        border: 1px solid rgba(192, 57, 43, 0.35) !important;
        box-shadow:
            0 6px 18px rgba(192, 57, 43, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

    /* [PREMIUM] آیتم بازشده (submenu-open): کارت با لهجه قرمز ملایم */
    .nav-item.has-submenu.submenu-open > .nav-item-row {
        background: linear-gradient(135deg, rgba(192, 57, 43, 0.12), rgba(192, 57, 43, 0.03)) !important;
        border-color: rgba(192, 57, 43, 0.25) !important;
    }

    /* [PREMIUM] زیرمنوها نباید داخل کارت باشند — آن‌ها به‌صورت کشویی زیر کارت باز می‌شوند.
     * برای حفظ ظاهر یکپارچه، یک حاشیه ظریف و پس‌زمینه نیمه‌شفاف به آن‌ها می‌دهیم.
     */
    .submenu {
        margin: 4px 0 0 0 !important;
        background: rgba(0, 0, 0, 0.25) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
    }
    .nav-item.has-submenu.submenu-open > .submenu {
        padding: 6px !important;
        margin-bottom: 4px !important;
    }

    /* [FIX #2a] حذف خط قرمز زیر آیکون‌ها (.nav-link::after که در style.css
     * اصلی با width:60% و background:var(--color-primary) در bottom:0 تعریف شده).
     * در موبایل، چون nav-link شامل آیکون + متن به‌صورت افقی است، این خط زیر
     * آیکون می‌افتاد و ظاهر زشتی داشت. آن را به عرض صفر تبدیل می‌کنیم.
     */
    .nav-link::after,
    .nav-link:hover::after,
    .nav-item.active > .nav-item-row > .nav-link::after {
        width: 0 !important;
        height: 0 !important;
        background: none !important;
        content: none !important;
    }

    /* [FIX #2b + GLASS CARD] حالا که هر nav-item-row یک کارت شیشه‌ای دارد،
     * .nav-link فقط نقش محتوای داخل کارت را دارد — نباید پس‌زمینه یا
     * حاشیه جداگانه‌ای داشته باشد. پدینگ بزرگ‌تر برای راحتی لمسی.
     */
    .nav-link {
        padding: 16px 16px !important;
        color: rgba(255,255,255,0.9) !important;
        font-weight: 500 !important;
        position: relative !important;
        border-bottom: none !important;
        border-right: none !important;
        background: transparent !important;
        border-radius: 14px !important;
        transition: color 0.2s ease !important;
    }
    .nav-link:hover {
        background: transparent !important;
        color: #fff !important;
    }

    /* [GLASS CARD] آیتم فعال: فقط رنگ متن عوض می‌شود، کارت قرمز خودش را دارد */
    .nav-item.active > .nav-item-row > .nav-link {
        color: var(--color-primary-light) !important;
        background: transparent !important;
        font-weight: 700 !important;
        border-right: none !important;
    }

    /* زیرمنوها — فاصله کمتر و ظاهر نیمه‌شفاف */
    .submenu li a {
        padding: 12px 16px 12px 48px !important;
        color: rgba(255,255,255,0.65) !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }
    .submenu li a:hover {
        color: #fff !important;
        background: rgba(192,57,43,0.1) !important;
    }
    .nav-item.has-submenu.submenu-open > .submenu {
        border-bottom: none !important;
    }

    /* آیکون پیگیری سفارش */
    .nav-link-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,0.05) !important;
        color: rgba(255,255,255,0.7) !important;
        margin-left: 12px !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
    }
    .nav-link:hover .nav-link-icon {
        background: rgba(192,57,43,0.15) !important;
        color: var(--color-primary-light) !important;
    }
    .nav-item.nav-track-item .nav-link {
        display: flex !important;
        align-items: center !important;
    }
    /* [GLASS CARD] آیتم پیگیری سفارش هم به‌صورت کارت شیشه‌ای نمایش داده می‌شود،
     * دیگر نیازی به border-top جداکننده نیست چون کارت خودش آن را جدا می‌کند.
     */
    .nav-item.nav-track-item {
        display: block !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* دکمه نصب اپلیکیشن — فاصله کمتر */
    .nav-pwa-install {
        margin: 16px 12px 24px !important;
        padding: 14px 18px !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 20px rgba(192,57,43,0.25) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }
    .nav-pwa-install-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    /* =====================================================================
     * [PREMIUM] انیمیشن Stagger — کارت‌ها یکی‌یکی هنگام باز شدن منو ظاهر می‌شوند
     *
     * مکانیزم:
     *  - وقتی منو بسته است (بدون body.menu-open): همه‌ی nav-item و nav-pwa-install
     *    در حالت مخفی هستند (translateX + opacity:0).
     *  - وقتی منو باز می‌شود (body.menu-open + .main-nav.active):
     *    هر آیتم با تأخیر تصاعدی ( nth-child(n) → transition-delay ) ظاهر می‌شود.
     *
     * نکات ایمنی:
     *  - فقط داخل @media (موبایل) — در دسکتاپ تأثیری ندارد.
     *  - hover روی nav-item-row همچنان کار می‌کند چون transform جداگانه دارد.
     *  - وقتی منو بسته می‌شود، آیتم‌ها فوراً مخفی می‌شوند (transition سریع)
     *    تا تجربه کاربری روان بماند.
     *  - اولین ۱۰ آیتم پشتیبانی می‌شوند (کافی برای منوی علی‌باندانا).
     *  - nav-pwa-install هم آخرین آیتم (با تأخیر بیشتر) ظاهر می‌شود.
     * ===================================================================== */

    /* حالت بسته: همه‌ی آیتم‌ها و دکمه‌ی نصب، مخفی و کمی به سمت چپ جابه‌جا شده‌اند */
    .main-nav .nav-list > .nav-item,
    .main-nav .nav-pwa-install {
        opacity: 0 !important;
        transform: translateX(20px) !important;
        transition:
            opacity 0.25s ease,
            transform 0.25s ease !important;
    }

    /* حالت باز: کارت‌ها یکی‌یکی ظاهر می‌شوند */
    body.menu-open .main-nav.active .nav-list > .nav-item,
    body.menu-open .main-nav.active .nav-pwa-install {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    /* تأخیر تصاعدی برای هر آیتم — stagger effect */
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(1),
    body.menu-open .main-nav.active .nav-pwa-install:nth-child(1) {
        transition-delay: 0.05s !important;
    }
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(2) {
        transition-delay: 0.10s !important;
    }
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(3) {
        transition-delay: 0.15s !important;
    }
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(4) {
        transition-delay: 0.20s !important;
    }
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(5) {
        transition-delay: 0.25s !important;
    }
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(6) {
        transition-delay: 0.30s !important;
    }
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(7) {
        transition-delay: 0.35s !important;
    }
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(8) {
        transition-delay: 0.40s !important;
    }
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(9) {
        transition-delay: 0.45s !important;
    }
    body.menu-open .main-nav.active .nav-list > .nav-item:nth-child(10) {
        transition-delay: 0.50s !important;
    }
    /* دکمه نصب اپ — آخرین آیتم، با تأخیر بیشتر از همه */
    body.menu-open .main-nav.active .nav-pwa-install {
        transition-delay: 0.55s !important;
    }

} /* end @media */