/**
 * Mobile Compatibility Fixes
 * Add this file to your layout after enhancements.css
 * <link rel="stylesheet" href="{{ asset('css/mobile-fixes.css') }}">
 */

/* ========================================
   CRITICAL MOBILE FIXES
   ======================================== */

/* Header Mobile Optimization */
@media (max-width: 768px) {
    .header {
        padding: 0.75rem 1rem !important;
    }
    
    .logo {
        font-size: 1.4rem !important;
    }
    
    .nav-icons {
        gap: 0.5rem !important;
    }
    
    .header-container {
        flex-wrap: wrap;
    }
}

/* Home Page Grids - Mobile Optimization */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .problems-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .categories-grid,
    .problems-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Typography Scaling for Mobile */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    .hero-tagline {
        font-size: 1rem !important;
    }
    
    .page-header h1 {
        font-size: 2rem !important;
    }
    
    .section-header h2 {
        font-size: 1.75rem !important;
    }
}

/* Spacing Optimization for Mobile */
@media (max-width: 768px) {
    .hero {
        padding: 3rem 1rem !important;
    }
    
    .categories-section,
    .products-section,
    .problems-section {
        padding: 2rem 1rem !important;
    }
    
    .checkout-container,
    .cart-container {
        padding: 2rem 1rem !important;
    }
    
    .page-header {
        padding: 2rem 1rem !important;
    }
}

/* Touch Target Sizes - Minimum 44x44px */
@media (max-width: 768px) {
    /* Buttons */
    .btn,
    .btn-primary,
    .btn-secondary {
        min-height: 44px;
        padding: 0.875rem 1.5rem;
    }
    
    /* Icon Buttons */
    .nav-icon-btn,
    .cart-icon,
    .search-icon-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.75rem;
    }
    
    /* Quantity Controls */
    .qty-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Remove Buttons */
    .remove-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Product Card Actions */
    .product-card__wishlist {
        min-width: 48px;
        min-height: 48px;
    }
    
    .product-card__add-cart {
        min-height: 44px;
        font-size: 0.95rem;
    }
    
    .product-card__quick-view {
        width: 44px;
        height: 44px;
    }
}

/* Form Inputs - Prevent iOS Zoom & Better Touch */
@media (max-width: 768px) {
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 1rem !important; /* Larger padding for easier tapping */
    }
    
    .form-row {
        grid-template-columns: 1fr !important; /* Stack on mobile */
        gap: 1rem;
    }
}

/* Cart Items - Mobile Optimization */
@media (max-width: 576px) {
    .cart-item {
        grid-template-columns: 80px 1fr !important;
        gap: 0.75rem !important;
        padding: 1rem 0 !important;
    }
    
    .cart-item-details h3 {
        font-size: 1rem !important;
    }
    
    .cart-item-image {
        width: 80px;
        height: 80px;
    }
}

/* Checkout Form - Mobile Optimization */
@media (max-width: 768px) {
    .checkout-form {
        padding: 1.5rem 1rem !important;
    }
    
    .order-summary {
        padding: 1.5rem 1rem !important;
    }
}

/* Product Cards - Mobile Touch Optimization */
@media (max-width: 768px) {
    .product-card__actions {
        gap: 0.5rem;
    }
}

/* Footer - Mobile Optimization */
@media (max-width: 768px) {
    .footer {
        padding: 2rem 1rem !important;
    }
    
    .footer-container {
        gap: 1.5rem !important;
    }
}

/* Table Responsiveness - Horizontal Scroll */
@media (max-width: 768px) {
    .table-container,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }
    
    /* Optional: Card layout for tables */
    .table-card-layout {
        display: block;
    }
    
    .table-card-layout thead {
        display: none;
    }
    
    .table-card-layout tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 1rem;
        background: var(--card-bg);
    }
    
    .table-card-layout td {
        display: block;
        text-align: right;
        padding: 0.5rem 0;
        border: none;
    }
    
    .table-card-layout td::before {
        content: attr(data-label) ": ";
        float: left;
        font-weight: 600;
        color: var(--muted);
    }
}

/* Search Input Wrapper - Mobile Optimization */
@media (max-width: 768px) {
    .search-input-wrapper {
        right: -1rem !important;
        left: -1rem !important;
        min-width: auto !important;
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
    }
}

/* Product Detail Page - Mobile */
@media (max-width: 576px) {
    .product-detail {
        padding: 1.5rem 1rem !important;
        gap: 1.5rem !important;
    }
    
    .product-gallery .main-image {
        height: 280px !important;
        font-size: 6rem !important;
    }
    
    .product-info-detail h1 {
        font-size: 1.75rem !important;
    }
    
    .product-price-detail .price {
        font-size: 1.5rem !important;
    }
}

/* Shop Page - Mobile Optimization */
@media (max-width: 576px) {
    .shop-container {
        padding: 1.5rem 1rem !important;
    }
    
    .shop-filters {
        padding: 1rem !important;
    }
}

/* Blog Cards - Mobile */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* Testimonials - Mobile */
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Account Pages - Mobile */
@media (max-width: 640px) {
    .account-container {
        padding: 0 1rem !important;
    }
    
    .content-header,
    .content-body {
        padding: 1rem !important;
    }
}

/* Additional Mobile Optimizations */
@media (max-width: 480px) {
    /* Very small screens */
    .hero h1 {
        font-size: 1.75rem !important;
    }
    
    .section-header h2 {
        font-size: 1.5rem !important;
    }
    
    .btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9rem !important;
    }
}

/* Prevent text selection on buttons (better UX) */
@media (max-width: 768px) {
    .btn,
    button,
    .nav-icon-btn,
    .cart-icon {
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
        -webkit-touch-callout: none;
        user-select: none;
    }
}

/* Smooth scrolling for mobile */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}