/* ============================================
   TRENDARYO RESPONSIVE STYLES
   Optimized for all devices including old phones
   ============================================ */

/* Performance optimizations for old devices */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   MOBILE FIRST - Base styles (320px+)
   ============================================ */
@media (max-width: 480px) {
    /* Disable 3D canvas on very small screens for performance */
    #three-canvas {
        display: none !important;
    }
    
    body {
        font-size: 14px;
        background: #0a0a2a !important;
    }
    
    /* Header adjustments */
    .store-header-inner {
        padding: 0.6rem 0.8rem;
        gap: 0.5rem;
    }
    
    .store-logo {
        font-size: 1.2rem;
    }
    
    .store-brand {
        min-width: auto;
    }
    
    .store-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    
    .store-actions {
        gap: 0.4rem;
    }
    
    /* Hide less important buttons on tiny screens */
    .store-actions a[aria-label="Compare"],
    .store-actions a[aria-label="Wishlist"] {
        display: none;
    }
    
    /* Page headers */
    .page-header-3d {
        padding: 6rem 1rem 2rem;
    }
    
    .page-title-3d {
        font-size: 1.8rem;
    }
    
    .page-subtitle-3d {
        font-size: 0.9rem;
    }
    
    .page-offset {
        padding-top: 80px;
    }
    
    /* Shop page */
    .shop-section-3d {
        padding: 1rem;
    }
    
    .shop-container-3d {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .shop-sidebar-3d {
        position: static;
        padding: 1rem;
    }
    
    .products-grid-3d {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .product-card-3d {
        border-radius: 12px;
    }
    
    .product-image-3d {
        height: 200px;
    }
    
    .product-info-3d {
        padding: 1rem;
    }
    
    .product-name-3d {
        font-size: 0.9rem;
    }
    
    .price-3d {
        font-size: 1.1rem;
    }
    
    .btn-add-cart-3d {
        padding: 0.8rem;
        font-size: 0.75rem;
    }
    
    /* Cart page */
    .cart-container-3d {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .cart-items-3d {
        padding: 1rem;
    }
    
    .cart-item-3d {
        grid-template-columns: 80px 1fr;
        gap: 1rem;
        padding: 1rem 0;
    }
    
    .cart-item-image-3d {
        width: 80px;
        height: 80px;
    }
    
    .cart-item-details-3d h3 {
        font-size: 0.9rem;
    }
    
    .cart-item-quantity-3d {
        margin-top: 0.5rem;
    }
    
    .qty-btn-3d {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
    
    .cart-item-total-3d,
    .remove-btn-3d {
        grid-column: 1 / -1;
        text-align: left;
        margin-top: 0.5rem;
    }
    
    .cart-summary-3d {
        position: static;
        padding: 1.5rem;
    }
    
    /* Checkout page */
    .checkout-container-3d {
        grid-template-columns: 1fr;
    }
    
    .checkout-steps-3d {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .step-3d {
        padding: 0.8rem;
        font-size: 0.8rem;
    }
    
    .form-row-3d {
        grid-template-columns: 1fr;
    }
    
    /* Account page */
    .account-container-3d {
        grid-template-columns: 1fr;
    }
    
    .account-sidebar-3d {
        padding: 1rem;
    }
    
    .profile-avatar-3d {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }
    
    .menu-item-3d {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    .stats-grid-3d {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .stat-card-3d {
        padding: 1rem;
    }
    
    .stat-value-3d {
        font-size: 1.5rem;
    }
    
    .order-header-3d {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    /* Admin pages */
    .admin-container {
        grid-template-columns: 1fr;
    }
    
    .admin-sidebar {
        position: static;
    }
    
    .admin-nav-item {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    /* Forms */
    .form-group-3d {
        margin-bottom: 1rem;
    }
    
    .form-input-3d,
    .form-select-3d,
    .form-textarea-3d {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    /* Buttons */
    .btn-3d,
    .btn-primary-3d,
    .checkout-btn-3d {
        padding: 0.8rem 1.5rem;
        font-size: 0.85rem;
    }
    
    /* Modals */
    .modal-3d {
        padding: 1rem;
    }
    
    .modal-content-3d {
        width: 95%;
        max-width: none;
        padding: 1.5rem;
    }
}

/* ============================================
   SMALL PHONES (481px - 600px)
   ============================================ */
@media (min-width: 481px) and (max-width: 600px) {
    .products-grid-3d {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid-3d {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cart-item-3d {
        grid-template-columns: 90px 1fr auto;
    }
}

/* ============================================
   TABLETS PORTRAIT (601px - 768px)
   ============================================ */
@media (min-width: 601px) and (max-width: 768px) {
    .store-search {
        display: flex;
        min-width: 180px;
    }
    
    .products-grid-3d {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .shop-container-3d {
        grid-template-columns: 1fr;
    }
    
    .cart-container-3d {
        grid-template-columns: 1fr;
    }
    
    .checkout-container-3d {
        grid-template-columns: 1fr;
    }
    
    .account-container-3d {
        grid-template-columns: 1fr;
    }
    
    .stats-grid-3d {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   TABLETS LANDSCAPE (769px - 900px)
   ============================================ */
@media (min-width: 769px) and (max-width: 900px) {
    .products-grid-3d {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .shop-container-3d {
        grid-template-columns: 250px 1fr;
    }
    
    .cart-container-3d {
        grid-template-columns: 1fr 350px;
    }
    
    .checkout-container-3d {
        grid-template-columns: 1fr 350px;
    }
}

/* ============================================
   SMALL LAPTOPS (901px - 1024px)
   ============================================ */
@media (min-width: 901px) and (max-width: 1024px) {
    .products-grid-3d {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .shop-container-3d {
        grid-template-columns: 260px 1fr;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .page-header-3d {
        padding: 4rem 2rem 2rem;
    }
    
    .page-title-3d {
        font-size: 2rem;
    }
    
    .page-offset {
        padding-top: 100px;
    }
    
    .profile-avatar-3d {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .store-icon-btn,
    .btn-3d,
    .menu-item-3d,
    .filter-label-3d {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects */
    .product-card-3d:hover,
    .store-icon-btn:hover,
    .btn-3d:hover {
        transform: none;
    }
    
    /* Simplify animations */
    .product-card-3d::before {
        display: none;
    }
}

/* ============================================
   LOW RESOLUTION SCREENS
   ============================================ */
@media (max-resolution: 150dpi) {
    /* Reduce blur effects for performance */
    .store-header,
    .shop-sidebar-3d,
    .cart-items-3d,
    .cart-summary-3d {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    #three-canvas,
    .store-header,
    .store-nav,
    .preloader-3d,
    .btn-add-cart-3d,
    .product-wishlist-3d {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .page-offset {
        padding-top: 0;
    }
}

/* ============================================
   ACCESSIBILITY - HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
    .store-header,
    .product-card-3d,
    .cart-items-3d,
    .shop-sidebar-3d {
        border-width: 2px;
    }
    
    .btn-3d,
    .btn-add-cart-3d {
        border: 2px solid currentColor;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Already dark by default */
}

/* ============================================
   UTILITY CLASSES FOR RESPONSIVE
   ============================================ */
.hide-mobile {
    display: none !important;
}

@media (min-width: 769px) {
    .hide-mobile {
        display: block !important;
    }
    
    .hide-desktop {
        display: none !important;
    }
}

.text-center-mobile {
    text-align: center;
}

@media (min-width: 769px) {
    .text-center-mobile {
        text-align: left;
    }
}

/* ============================================
   PERFORMANCE: Reduce particle count on mobile
   ============================================ */
@media (max-width: 768px) {
    /* This will be handled in JavaScript */
    body[data-mobile="true"] #three-canvas {
        opacity: 0.5;
    }
}