/* ============================================== 15. MOBILE MENU & TOAST ============================================== */
#offcanvasRight{z-index: 9999;}
 .mobile-bottom-menu {
     display: flex;
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     z-index: 1050;
     background: var(--primary);
     box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
     justify-content: space-around;
     align-items: center;
     padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) 0;
     animation: slideUp 0.4s ease-out forwards;
     border-top: 1px solid rgba(201,169,97,0.1);
}

 .mobile-bottom-menu .menu-item {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 23%;
     padding: 6px 0;
     border-radius: var(--radius-sm);
     transition: var(--transition);
     position: relative;
}
 .mobile-bottom-menu .menu-item i {
     font-size: 22px;
     margin-bottom: 3px;
     color: var(--theme-white);
     transition: var(--transition);
}
 .mobile-bottom-menu .menu-item span {
     font-size: 10px;
     font-weight: 600;
     color: var(--theme-white);
     transition: var(--transition);
}
 .mobile-bottom-menu .menu-item:hover i, .mobile-bottom-menu .menu-item.active i {
     color: var(--primary);
     transform: scale(1.15) translateY(-2px);
}
 .mobile-bottom-menu .menu-item:hover span, .mobile-bottom-menu .menu-item.active span {
     color: var(--primary);
}