/* Mobile app enhancement styles */

/* App-like card animation effects */
@media (max-width: 768px) {
  /* Card hover/tap effects */
  .product-card, 
  .cart-item-mobile, 
  .bg-white, 
  .dark\:bg-gray-800 {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .product-card:active, 
  .cart-item-mobile:active {
    transform: scale(0.98);
  }
  
  /* Mobile status bar area - safe area insets */
  .py-4 {
    padding-top: max(16px, env(safe-area-inset-top));
  }
  
  /* Fixed position elements respecting safe areas */
  .fixed {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  /* Hide scrollbars but keep functionality */
  ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }
  
  /* Momentum-based scrolling */
  .overflow-y-auto,
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Prevent text selection on tap */
  .no-select, 
  button, 
  h1, h2, h3, 
  .font-medium, 
  .font-semibold, 
  .font-bold {
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Mobile menu enhancements */
  #sidebar {
    border-radius: 0 24px 24px 0;
  }
  
  /* Chart optimizations for mobile */
  canvas {
    max-height: 60vh;
  }
  
  /* Disable pull-to-refresh to make app feel native */
  html, body {
    overscroll-behavior-y: contain;
  }
  
  /* Add rubber-band effect to elements that should have it */
  .rubber-band {
    overscroll-behavior-y: auto;
  }
}

/* Loading indicators optimized for mobile */
.loading-spinner {
  animation-duration: 0.75s;
}

/* Disable text selection during animations for smoother performance */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Improved bottom navigation */
#bottom-nav {
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}