/* Responsive Design Improvements - Tablet & Mobile */

/* Custom breakpoints for better tablet support */
:root {
    --breakpoint-xs: 375px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* Tablet-specific improvements (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Container padding */
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    /* Form grids - Single column on tablet for better UX */
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Product cards - 2 columns max on tablet */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }
    
    /* Reduce heading sizes slightly */
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    /* Better spacing for cards */
    .glass-card,
    .card {
        padding: 1.25rem !important;
    }
    
    /* Navbar adjustments */
    .navbar-links {
        gap: 1.5rem;
    }
    
    /* Product detail layout */
    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    
    /* Checkout steps */
    .checkout-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Admin tables - Better horizontal scroll */
    .admin-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-table {
        min-width: 800px;
    }
}

/* Mobile improvements (< 768px) */
@media (max-width: 767px) {
    /* Larger touch targets */
    button,
    .btn,
    a.btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Reduce padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Stack all grids */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\\:grid-cols-2,
    .lg\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Smaller headings */
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    /* Full-width buttons on mobile */
    .btn-group {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .btn-group > * {
        width: 100% !important;
    }
    
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
}

/* Landscape mobile (560px - 767px height < 500px) */
@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical spacing */
    .py-12 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .py-8 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Smaller navbar */
    .navbar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Extra small devices (< 375px) */
@media (max-width: 374px) {
    /* Reduce font sizes further */
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    /* Smaller padding */
    .p-8 {
        padding: 1rem !important;
    }
    
    .p-6 {
        padding: 0.75rem !important;
    }
}

/* Print styles */
@media print {
    /* Hide navigation and unnecessary elements */
    .navbar,
    .footer,
    .btn,
    button {
        display: none !important;
    }
    
    /* Remove backgrounds */
    body,
    .glass-card,
    .card {
        background: white !important;
        color: black !important;
    }
    
    /* Expand all content */
    .hidden,
    .lg\\:hidden {
        display: block !important;
    }
}