/* Ensure only one icon is visible at a time */
.mobile-nav-toggle i.bi-list,
.mobile-nav-toggle i.bi-x {
    display: inline-block;
    font-size: 1.5rem; /* Increased icon size */
    padding: 4px; /* Added some padding around the icon */
}

/* Hide the X icon by default */
.mobile-nav-toggle i.bi-x {
    display: none;
}

/* Show the X icon and hide the list icon when sidebar is active */
body.mobile-nav-active .mobile-nav-toggle i.bi-list {
    display: none;
}

body.mobile-nav-active .mobile-nav-toggle i.bi-x {
    display: inline-block;
}


/* Ensure the toggle button has the correct z-index */
.mobile-nav-toggle {
    z-index: 9999 !important;
    position: relative;
}

/* Ensure the sidebar has the correct z-index */
.mobile-nav-sidebar {
    z-index: 9998 !important;
}

/* Ensure the overlay has the correct z-index */
.mobile-nav-overlay {
    z-index: 9997 !important;
}

.mobile-nav-sidebar {
    position: fixed;
    top: 0;
    right: 0; /* في حال الاتجاه RTL */
    width: 250px;
    height: 100vh;
    background-color: #fff;
    z-index: 9998;
    transform: translateX(100%); /* اجعله خارج الشاشة */
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

/* عندما يكون مفعّلاً */
body.mobile-nav-active .mobile-nav-sidebar {
    transform: translateX(0); /* يرجع لمكانه الأصلي */
}
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    display: none;
}

body.mobile-nav-active .mobile-nav-overlay {
    display: block;
}