/**
 * Modern Mobile Menu Styles
 * Professional sliding mobile navigation with RTL/LTR support
 */

/* Mobile Menu Panel - Initially Hidden */
.mobile-menu-panel {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    will-change: transform;
}

/* Ensure menu is hidden initially */
#mobile-menu .mobile-menu-panel {
    transform: translateX(-100%) !important;
    visibility: hidden;
}

[dir="rtl"] #mobile-menu .mobile-menu-panel {
    transform: translateX(100%) !important;
    visibility: hidden;
}

/* Show menu when opened */
#mobile-menu.menu-open .mobile-menu-panel {
    transform: translateX(0) !important;
    visibility: visible;
}

/* Force proper initial state */
#mobile-menu .mobile-menu-panel.translate-x-0 {
    transform: translateX(0) !important;
    visibility: visible;
}

#mobile-menu .mobile-menu-panel.-translate-x-full {
    transform: translateX(-100%) !important;
    visibility: hidden;
}

#mobile-menu .mobile-menu-panel.translate-x-full {
    transform: translateX(100%) !important;
    visibility: hidden;
}

/* Mobile Menu Button - Keep hamburger icon always */
#mobile-menu-button svg path {
    d: path("M4 6h16M4 12h16M4 18h16") !important;
}

/* Mobile Menu Overlay */
#mobile-menu-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Mobile Menu Header Custom Styling */
.mobile-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    background-color: white !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Enhanced Menu Items */
.mobile-menu-link {
    position: relative;
    transition: all 0.2s ease;
}

.mobile-menu-link:hover {
    transform: translateX(4px);
}

[dir="rtl"] .mobile-menu-link:hover {
    transform: translateX(-4px);
}

.mobile-menu-link.active,
.mobile-menu-link[aria-current="page"] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-left: 4px solid #3b82f6;
}

[dir="rtl"] .mobile-menu-link.active,
[dir="rtl"] .mobile-menu-link[aria-current="page"] {
    border-left: none;
    border-right: 4px solid #3b82f6;
}

/* Submenu Animation */
.mobile-submenu {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-submenu:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

/* Arrow Animation */
.mobile-submenu-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* User Profile Section */
.mobile-user-actions .bg-gray-50 {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border: 1px solid #e5e7eb;
}

/* Enhanced Icons */
.mobile-nav-items .hgi-stroke,
.mobile-user-actions .hgi-stroke {
    transition: color 0.2s ease;
}

.mobile-menu-link:hover .hgi-stroke {
    color: #3b82f6;
}

/* Scrollbar Styling */
.mobile-menu-panel .overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.mobile-menu-panel .overflow-y-auto::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.mobile-menu-panel .overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.mobile-menu-panel .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Close Button Enhancement */
#mobile-menu-close {
    transition: all 0.2s ease;
}

#mobile-menu-close:hover {
    background-color: #f3f4f6;
    transform: rotate(90deg);
}


/* Translation Button Styling */
.mobile-page-translation a {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
}

.mobile-page-translation a:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Responsive Improvements */
@media (max-width: 380px) {
    .mobile-menu-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Dark Mode Support (if implemented) */
@media (prefers-color-scheme: dark) {
    .mobile-menu-panel {
        background-color: #1f2937;
        color: #f9fafb;
    }

    .mobile-menu-link {
        color: #d1d5db;
    }

    .mobile-menu-link:hover {
        color: #f9fafb;
        background-color: #374151;
    }

    .mobile-menu-link:hover span {
        color: #fff;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .mobile-menu-panel {
        border: 2px solid #000;
    }

    .mobile-menu-link {
        border-bottom: 1px solid #ccc;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .mobile-menu-panel,
    .mobile-submenu,
    .mobile-submenu-arrow,
    .mobile-menu-link,
    #mobile-menu-close {
        transition: none !important;
        animation: none !important;
    }

    .mobile-menu-link:hover {
        transform: none !important;
    }
}


/* Loading State */
.mobile-menu-panel.loading {
    opacity: 0.7;
    pointer-events: none;
}

.mobile-menu-panel.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}