/* ===== MOBILE-SPECIFIC STYLES ===== */

/* Swipe gestures for mobile menu */
.mobile-menu {
  touch-action: pan-y;
}

/* Prevent text size adjustment */
html {
  -webkit-text-size-adjust: 100%;
}

/* Better touch targets */
button,
input,
select,
textarea {
  font-size: 16px; /* Prevents iOS zoom on focus */
}

/* Hide scrollbar but keep functionality */
.cart-items::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
  width: 4px;
}

.cart-items::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.cart-items::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--radius-full);
}

/* Mobile-specific animations */
@media (max-width: 768px) {
  .modal-container {
    animation: slideUpMobile 0.3s ease-out;
  }
  
  .cart-sidebar.active {
    animation: slideInRight 0.3s ease-out;
  }
  
  @keyframes slideUpMobile {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
}

/* Landscape optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  .modern-hero {
    padding: var(--space-lg) 0;
  }
  
  .hero-container {
    gap: var(--space-lg);
  }
  
  .floating-product {
    height: 250px;
  }
  
  .product-image {
    aspect-ratio: 3/4;
  }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .loading-spinner {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* Dark mode detection */
@media (prefers-color-scheme: dark) {
  body:not([data-theme]) {
    background-color: #0f172a;
    color: #f1f5f9;
  }
}