/* Mobile Responsive Styles */
@media (max-width: 768px) {
    /* Hide regular navigation on mobile */
    .navbar-nav.me-auto {
        display: none !important;
    }

    /* Show mobile-specific navigation */
    .navbar-nav.mobile-nav {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
    }

    /* Order Status specific styles for mobile */
    .OrderStatus {
        display: block !important;
        width: 100%;
        margin: 10px 0;
        padding: 10px;
        background-color: #f8f9fa;
        border-radius: 5px;
        text-align: center;
    }

        .OrderStatus .status-badge {
            font-size: 14px;
            padding: 6px 12px;
        }

        .OrderStatus .status-text {
            font-size: 14px;
            margin-top: 5px;
        }

    /* Mobile navigation toggle */
    .mobile-nav-toggle {
        display: block !important;
    }

    /* Hide desktop-specific elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-specific elements */
    .mobile-only {
        display: block !important;
    }

    /* Adjust navbar for mobile */
    .navbar-collapse {
        background-color: #343a40;
        padding: 1rem;
        margin-top: 10px;
        border-radius: 5px;
    }

    /* Mobile cart counter */
    #cart-count {
        font-size: 14px;
        padding: 4px 8px;
    }
}

/* Desktop Styles (default) */
.navbar-nav.me-auto {
    display: flex;
}

.OrderStatus {
    display: none; /* Hidden by default on desktop */
}

.mobile-nav-toggle {
    display: none;
}

.mobile-only {
    display: none;
}

/* Order Status Styles (for both desktop and mobile) */
.OrderStatus {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    .OrderStatus .status-header {
        display: flex;
        justify-content: between;
        align-items: center;
        margin-bottom: 10px;
    }

    .OrderStatus .status-title {
        font-weight: bold;
        font-size: 16px;
        margin: 0;
    }

    .OrderStatus .status-badge {
        background-color: rgba(255, 255, 255, 0.2);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: bold;
    }

    .OrderStatus .status-progress {
        background-color: rgba(255, 255, 255, 0.3);
        height: 6px;
        border-radius: 3px;
        overflow: hidden;
        margin: 10px 0;
    }

    .OrderStatus .status-progress-bar {
        height: 100%;
        background-color: #fff;
        border-radius: 3px;
        transition: width 0.3s ease;
    }

    .OrderStatus .status-steps {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.8);
    }

    .OrderStatus .status-step {
        text-align: center;
        flex: 1;
    }

        .OrderStatus .status-step.active {
            color: #fff;
            font-weight: bold;
        }

/* Mobile-specific Order Status variations */
@media (max-width: 768px) {
    .OrderStatus.compact {
        padding: 10px;
        margin: 8px 0;
    }

        .OrderStatus.compact .status-title {
            font-size: 14px;
        }

        .OrderStatus.compact .status-badge {
            font-size: 11px;
            padding: 3px 8px;
        }

        .OrderStatus.compact .status-steps {
            font-size: 10px;
        }
}

/* Enhanced mobile navigation */
.mobile-nav-container {
    display: none;
}

@media (max-width: 768px) {
    .mobile-nav-container {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #dee2e6;
        z-index: 1000;
        padding: 10px;
    }

    .mobile-nav-buttons {
        display: flex;
        justify-content: space-around;
    }

    .mobile-nav-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #6c757d;
        font-size: 12px;
        padding: 5px;
    }

        .mobile-nav-button.active {
            color: #0d6efd;
        }

        .mobile-nav-button i {
            font-size: 20px;
            margin-bottom: 4px;
        }
}

/* Hamburger menu animation */
.navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
}

    .navbar-toggler:focus {
        box-shadow: none;
    }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Smooth transitions */
.navbar-collapse {
    transition: all 0.3s ease;
}

/* Order status color variations */
.status-pending {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.status-processing {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}

.status-shipped {
    background: linear-gradient(135deg, #45b7d1 0%, #96c93d 100%);
}

.status-delivered {
    background: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%);
    color: #333;
}

.status-cancelled {
    background: linear-gradient(135deg, #606c88 0%, #3f4c6b 100%);
}