/* Desktop Responsive Design for G.AZ Fashions */
/* Override mobile-first constraints for proper desktop experience */

/* Remove mobile constraints on desktop */
@media (min-width: 768px) {
    /* Remove mobile container constraints */
    .mobile-app-container,
    .modern-header,
    .main-content,
    .bottom-navigation,
    footer.bg-dark {
        max-width: none !important;
        margin: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        transform: none !important;
        left: auto !important;
    }
    
    /* Remove mobile body styling */
    body {
        background: none !important;
        display: block !important;
        flex-direction: column !important;
        min-height: auto !important;
    }
    
    /* Hide mobile bottom navigation on desktop */
    .bottom-navigation {
        display: none !important;
    }
    
    /* Show proper desktop navigation */
    .navbar {
        display: block !important;
    }
    
    /* Full width main content */
    .main-content {
        width: 100% !important;
        min-height: auto !important;
        padding-bottom: 0 !important;
        flex: none !important;
    }
    
    /* Desktop header styling */
    .modern-header {
        width: 100% !important;
        position: relative !important;
    }
    
    /* Business header improvements */
    .business-header {
        padding: 1rem 0 !important;
    }
    
    .business-name h1 {
        font-size: 2rem !important;
    }
    
    .logo-image {
        height: 60px !important;
        max-width: 200px !important;
    }
    
    /* Full width sections */
    .full-width-content {
        width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Hero section full width */
    .hero-section {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 70vh !important;
    }
    
    /* Section spacing improvements */
    .clearance-section,
    .latest-products-section,
    .products-section {
        width: 100% !important;
        margin: 0 !important;
        padding: 3rem 0 !important;
    }
    
    /* Container improvements for desktop */
    .container {
        max-width: 1400px !important;
    }
    
    .container-fluid {
        max-width: none !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Tablet specific styles */
@media (min-width: 768px) and (max-width: 1199px) {
    .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .hero-section {
        min-height: 70vh;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-description {
        font-size: 1.2rem;
    }
}

/* Desktop styles */
@media (min-width: 1200px) {
    /* Container improvements */
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1400px;
    }
    
    .container-fluid {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    
    /* Hero section enhancements */
    .hero-section {
        min-height: 80vh;
        padding: 4rem 0;
    }
    
    .hero-title {
        font-size: 4rem;
        margin-bottom: 1.5rem;
    }
    
    .hero-description {
        font-size: 1.3rem;
        margin-bottom: 2rem;
    }
    
    .hero-btn {
        padding: 1rem 2.5rem;
        font-size: 1.1rem;
    }
    
    /* Enhanced business header */
    .business-header {
        padding: 1.5rem 0;
    }
    
    .business-name h1 {
        font-size: 2.5rem;
    }
    
    .logo-image {
        height: 80px;
        max-width: 250px;
    }
    
    /* Cart icon improvements */
    .cart-icon {
        font-size: 1.5rem;
    }
    
    /* Remove desktop cart badge - handled by unified mobile system */
    
    /* Search section enhancements */
    .search-section {
        padding: 2rem 0;
    }
    
    .search-input-wrapper {
        padding: 15px 25px;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .search-input {
        font-size: 1.1rem;
    }
}

/* Large desktop styles */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1600px;
    }
    
    .container-fluid {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    
    .hero-section {
        min-height: 85vh;
        padding: 5rem 0;
    }
    
    .hero-title {
        font-size: 5rem;
    }
    
    .hero-description {
        font-size: 1.4rem;
    }
    
    .business-name h1 {
        font-size: 3rem;
    }
    
    .logo-image {
        height: 100px;
        max-width: 300px;
    }
}

/* Desktop layout improvements for specific sections */
@media (min-width: 768px) {
    /* Hero carousel enhancements */
    .hero-carousel {
        height: 70vh;
        min-height: 500px;
    }
    
    .hero-background {
        background-size: cover !important;
        background-position: center !important;
        background-attachment: fixed;
    }
    
    .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 100%;
        text-align: left;
        max-width: 600px;
    }
    
    .hero-title {
        font-size: 3.5rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
        margin-bottom: 2rem;
        opacity: 0.9;
    }
    
    .hero-actions {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .btn-hero {
        padding: 1rem 2rem;
        font-size: 1.1rem;
        min-width: 160px;
        text-align: center;
    }
}

@media (min-width: 1200px) {
    .hero-carousel {
        height: 80vh;
        min-height: 600px;
    }
    
    .hero-title {
        font-size: 4.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
    }
    
    .btn-hero {
        padding: 1.25rem 2.5rem;
        font-size: 1.2rem;
        min-width: 180px;
    }
}

/* Desktop navigation enhancements */
@media (min-width: 768px) {
    .navbar {
        padding: 1rem 0;
        box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    }
    
    .navbar-brand {
        display: flex;
        align-items: center;
        font-size: 1.8rem;
        font-weight: 700;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1.25rem;
        font-weight: 500;
        font-size: 1.05rem;
        transition: all 0.3s ease;
        border-radius: 6px;
        margin: 0 0.25rem;
    }
    
    .navbar-nav .nav-link:hover {
        background-color: rgba(255, 107, 53, 0.1);
        color: var(--orange-primary);
    }
    
    /* Enhanced header desktop navigation styling */
    .enhanced-header nav .nav-link {
        padding: 0.75rem 1rem;
        font-weight: 500;
        font-size: 1.05rem;
        transition: all 0.3s ease;
        border-radius: 6px;
        margin: 0 0.25rem;
        position: relative;
    }
    
    .enhanced-header nav .nav-link:hover {
        background-color: rgba(255, 107, 53, 0.1);
        color: #ff6b35;
        transform: translateY(-2px);
    }
    
    /* Special styling for Account link */
    .enhanced-header nav .nav-link[href="#"] {
        border: 2px solid #ff6b35;
        background-color: rgba(255, 107, 53, 0.05);
        color: #ff6b35;
    }
    
    .enhanced-header nav .nav-link[href="#"]:hover {
        background-color: #ff6b35;
        color: white;
        transform: translateY(-2px);
    }
    
    .dropdown-menu {
        border: none;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        border-radius: 12px;
        padding: 0.75rem 0;
        margin-top: 0.5rem;
    }
    
    .dropdown-item {
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .dropdown-item:hover {
        background-color: var(--orange-light);
        color: var(--orange-dark);
        padding-left: 2rem;
    }
}

/* Product grid desktop enhancements */
@media (min-width: 768px) {
    .product-card {
        transition: all 0.3s ease;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(255, 107, 53, 0.15);
    }
    
    .product-image {
        height: 250px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .product-card:hover .product-image {
        transform: scale(1.05);
    }
    
    .product-info {
        padding: 1.5rem;
    }
    
    .product-title {
        font-size: 1.2rem;
        margin-bottom: 0.8rem;
    }
    
    .product-price {
        font-size: 1.3rem;
        font-weight: bold;
        color: var(--orange-primary);
    }
}

/* Enhanced desktop product cards */
@media (min-width: 1200px) {
    .product-image {
        height: 300px;
    }
    
    .product-info {
        padding: 2rem;
    }
    
    .product-title {
        font-size: 1.3rem;
    }
    
    .product-price {
        font-size: 1.4rem;
    }
}

/* Category navigation desktop styling */
@media (min-width: 768px) {
    .category-nav {
        padding: 1rem 0;
        background: var(--light-gray);
    }
    
    .category-nav .nav-pills .nav-link {
        border-radius: 25px;
        padding: 0.8rem 1.5rem;
        margin: 0 0.5rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .category-nav .nav-pills .nav-link:hover {
        background-color: var(--orange-light);
        color: var(--orange-dark);
    }
    
    .category-nav .nav-pills .nav-link.active {
        background-color: var(--orange-primary);
        color: white;
    }
}

/* Checkout page desktop improvements */
@media (min-width: 768px) {
    .checkout-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 3rem 2rem;
    }
    
    .cart-summary {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }
    
    .checkout-form {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    }
}

/* Admin panel desktop styling */
@media (min-width: 768px) {
    .admin-sidebar {
        min-height: 100vh;
        background: var(--gray-dark);
    }
    
    .admin-content {
        padding: 2rem;
    }
    
    .admin-card {
        border-radius: 15px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        border: none;
    }
    
    .admin-table {
        font-size: 0.95rem;
    }
    
    .admin-table th {
        background-color: var(--orange-primary);
        color: white;
        border: none;
        padding: 1rem;
    }
    
    .admin-table td {
        padding: 1rem;
        vertical-align: middle;
    }
}

/* Footer desktop improvements */
@media (min-width: 768px) {
    .footer {
        padding: 3rem 0 2rem;
    }
    
    .footer-section {
        margin-bottom: 2rem;
    }
    
    .footer-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        color: var(--orange-primary);
    }
    
    .footer-link {
        display: block;
        padding: 0.3rem 0;
        color: #ccc;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .footer-link:hover {
        color: var(--orange-primary);
        text-decoration: none;
    }
}

/* Smooth scrolling for desktop */
@media (min-width: 768px) {
    html {
        scroll-behavior: smooth;
    }
    
    body {
        overflow-x: hidden;
    }
}

/* Desktop-specific animations */
@media (min-width: 768px) {
    .fade-in-up {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s ease;
    }
    
    .fade-in-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    .scale-on-hover {
        transition: transform 0.3s ease;
    }
    
    .scale-on-hover:hover {
        transform: scale(1.02);
    }
}

/* Ensure mobile styles don't interfere with desktop */
@media (min-width: 768px) {
    /* Override any mobile-specific positioning */
    .sticky-top {
        position: sticky !important;
        top: 0 !important;
    }
    
    /* Ensure proper z-index stacking */
    .navbar {
        z-index: 1030;
    }
    
    .hero-section {
        z-index: 1;
    }
    
    /* Remove mobile touch styles */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}