/* Mobile Bottom Navigation Styles */

.mobile-bottom-nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(229, 231, 235, 0.8);
    transition: all 0.3s ease;
}

/* Ensure mobile nav is hidden on desktop */
@media (min-width: 1024px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Show mobile nav only on tablet and mobile */
@media (max-width: 1023px) {
    .mobile-bottom-nav:not(.hidden) {
        display: block !important;
    }
}

.mobile-bottom-nav a,
.mobile-bottom-nav button {
    position: relative;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 4px;
}

.mobile-bottom-nav a:hover,
.mobile-bottom-nav button:hover {
    background-color: rgba(59, 130, 246, 0.1);
    transform: scale(1.05);
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav button.active {
    color: #2563eb !important;
    background-color: rgba(59, 130, 246, 0.15);
}

/* Cart badge animation */
.mobile-bottom-nav .cart-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Responsive behavior */
@media (max-width: 640px) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-bottom-nav .grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
    }

    .mobile-bottom-nav i {
        font-size: 1.25rem;
    }

    .mobile-bottom-nav span {
        font-size: 0.625rem;
        font-weight: 500;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .mobile-bottom-nav {
        height: 4rem;
    }

    .mobile-bottom-nav i {
        font-size: 1.5rem;
    }

    .mobile-bottom-nav span {
        font-size: 0.75rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .mobile-bottom-nav {
        background-color: rgba(17, 24, 39, 0.95);
        border-top-color: rgba(55, 65, 81, 0.8);
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        color: #9ca3af;
    }

    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav button:hover {
        color: #60a5fa;
        background-color: rgba(59, 130, 246, 0.1);
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav button.active {
        color: #3b82f6 !important;
        background-color: rgba(59, 130, 246, 0.2);
    }
}

/* Hide on scroll down, show on scroll up */
.mobile-bottom-nav.hide-nav {
    transform: translateY(100%);
}

.mobile-bottom-nav.show-nav {
    transform: translateY(0);
}

/* Safe area support for iPhone X and newer */
@supports (padding: max(0px)) {
    .mobile-bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* Accessibility */
.mobile-bottom-nav a:focus,
.mobile-bottom-nav button:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav,
    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        transition: none;
    }

    .mobile-bottom-nav .cart-badge {
        animation: none;
    }
}