.mobile-menu {
    background: rgba(138, 21, 56, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    padding: 8px 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

    .mobile-menu .menu-item {
        flex: 1;
        text-align: center;
        padding: 10px 0;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        background: transparent;
        border: none;
        border-radius: 12px;
        margin: 0 6px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 0.3px;
        position: relative;
        overflow: hidden;
    }

        .mobile-menu .menu-item i {
            font-size: 20px;
            transition: transform 0.2s ease;
        }

        .mobile-menu .menu-item:hover {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            transform: translateY(-2px);
        }

            .mobile-menu .menu-item:hover i {
                transform: scale(1.1);
            }

        .mobile-menu .menu-item:active {
            transform: translateY(0px);
        }

        .mobile-menu .menu-item.active {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
            color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            border-bottom: 2px solid #ff6b9d;
        }

            /* Active indicator animation */
            .mobile-menu .menu-item.active::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 30px;
                height: 2px;
                background: linear-gradient(90deg, #ff6b9d, #ff9ec4);
                border-radius: 2px;
                animation: slideIn 0.3s ease;
            }

@keyframes slideIn {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 30px;
        opacity: 1;
    }
}

/* Special styling for button to match */
.mobile-menu .btn.menu-item {
    border: none;
    background: transparent;
}

    .mobile-menu .btn.menu-item:hover {
        background: rgba(255, 255, 255, 0.15);
    }

/* Optional: Add subtle ripple effect on click */
.mobile-menu .menu-item {
    position: relative;
    overflow: hidden;
}

    .mobile-menu .menu-item::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.4s, height 0.4s;
    }

    .mobile-menu .menu-item:active::after {
        width: 100px;
        height: 100px;
    }

/* Responsive touch optimization */
@media (max-width: 576px) {
    .mobile-menu .menu-item {
        margin: 0 4px;
        font-size: 12px;
        padding: 8px 0;
    }

        .mobile-menu .menu-item i {
            font-size: 18px;
            margin-right: 4px !important;
        }
}