/* استایل‌های پایه برای همه دستگاه‌ها */
.mobile-categories-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    background: white;
    transform: translateZ(0); /* فعال کردن شتاب سخت‌افزار */
    will-change: transform;
}

.mobile-category-group {
    transition: all 0.3s ease;
}

.mobile-parent-category {
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent; /* حذف highlight در کلیک موبایل */
    cursor: pointer;
    user-select: none;
}

    /* رفع مشکل رنگ و بهبود contrast برای دسترسی‌پذیری */
    .mobile-parent-category:hover,
    .mobile-parent-category:focus {
        background-color: rgb(14 165 233); /* bg-sky-500 */
        color: white;
        outline: 2px solid #0ea5e9;
        outline-offset: -2px;
    }

/* بهبود برای دستگاه‌های لمسی */
@media (hover: none) and (pointer: coarse) {
    .mobile-parent-category:active {
        background-color: rgb(14 165 233);
        color: white;
    }

    .mobile-parent-category:hover {
        background-color: transparent;
        color: inherit;
    }
}

.mobile-submenu {
    animation: slideDown 0.3s ease-out;
    transform-origin: top center;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
        max-height: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 500px;
    }
}

/* پشتیبانی از کاهش motion برای کاربران حساس */
@media (prefers-reduced-motion: reduce) {
    .mobile-submenu,
    .mobile-main-arrow,
    .mobile-submenu-arrow {
        animation: none;
        transition: none;
    }

    .mobile-submenu {
        opacity: 1;
        transform: none;
    }
}

/* اسکرول بار برای همه مرورگرها */
.universal-scroll {
    overflow-y: auto;
    scrollbar-width: thin; /* فایرفاکس */
    scrollbar-color: #cbd5e1 #f8fafc; /* فایرفاکس */
    -webkit-overflow-scrolling: touch; /* اسکرول نرم برای iOS */
    overscroll-behavior: contain; /* جلوگیری از bounce effect */
}

    .universal-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .universal-scroll::-webkit-scrollbar-track {
        background: #f8fafc;
        border-radius: 10px;
    }

    .universal-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
        border: 2px solid #f8fafc;
    }

        .universal-scroll::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* رفع مشکل viewport height در مرورگرهای موبایل */
@supports (-webkit-touch-callout: none) {
    .mobile-categories-menu {
        max-height: -webkit-fill-available;
        max-height: fill-available;
    }

    .universal-scroll {
        max-height: calc(-webkit-fill-available - 60px);
        max-height: calc(fill-available - 60px);
    }
}

/* موقعیت‌یابی و سایز برای دستگاه‌های مختلف */
@media (max-width: 640px) {
    .mobile-categories-menu {
        /*width: 95vw;*/
        left: 2.5vw;
        right: 2.5vw;
        max-height: 70vh !important; /* کاهش ارتفاع برای نمایش محتوای پایین */
    }

    .universal-scroll {
        max-height: calc(70vh - 60px) !important;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .mobile-categories-menu {
        /*width: 90vw;*/
        left: 5vw;
        right: 5vw;
        max-height: 70vh !important;
    }

    .universal-scroll {
        max-height: calc(70vh - 60px) !important;
    }
}

/* بهبود نمایش فونت در دستگاه‌های مختلف */
.mobile-parent-category {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
}

/* استایل برای حالت loading */
.menu-loading {
    display: none;
}

    .menu-loading.active {
        display: block;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

/* استایل برای حالت خطا */
.menu-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
}

/* بهبود دسترسی‌پذیری برای حالت focus */
.mobile-close-menu:focus,
.mobile-category-main-btn:focus {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

/* بهینه‌سازی برای عملکرد بهتر */
.mobile-categories-menu * {
    box-sizing: border-box;
}

/* جلوگیری از flash of unstyled content (FOUC) */
.mobile-categories-menu[data-menu-loaded="false"] {
    visibility: hidden;
}

.mobile-categories-menu[data-menu-loaded="true"] {
    visibility: visible;
}

/* رفع مشکل اسکرول - اطمینان از نمایش محتوای پایین */
.mobile-categories-menu {
    z-index: 100; /* افزایش z-index برای نمایش روی محتوای دیگر */
}

/* کلاس برای وقتی که منو باز است */
.mobile-menu-open {
    overflow: hidden;
}

/* بهبود نمایش زیرمنوها */
.mobile-submenu {
    background-color: #fafafa;
    border-radius: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
}

/* رفع مشکل ارتفاع برای نمایش تمام محتوا */
.mobile-category-group {
    position: relative;
    z-index: 1;
}