/* Responsive Design Fixes */

/* CSS Custom Properties for dynamic viewport */
:root {
  --vh: 1vh;
}

/* Mobile-first responsive design */
@media (max-width: 1024px) {
  /* Ensure mobile layout takes precedence */
  .lg\:flex {
    display: none !important;
  }
  
  .lg\:hidden {
    display: block !important;
  }
  
  /* Fix container spacing on mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Improve mobile typography */
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
  }
  
  /* Better mobile spacing */
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  .space-y-6 > * + * {
    margin-top: 1.5rem;
  }
  
  /* Mobile-friendly buttons */
  button, .btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
  
  /* Improve mobile forms */
  input, textarea, select {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 0.75rem;
    border-radius: 0.5rem;
  }
  
  /* Mobile navigation improvements */
  .bottom-navbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* Mobile search improvements */
  .open-mobile_search-modal {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* Mobile modal improvements */
  .mobile-menu,
  .mobile-cart {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* Improve mobile scrolling */
  .mobile-cart-items-container,
  .mobile-menu {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
}

/* Tablet specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  .mobile-menu {
    width: 350px;
  }
  
  .mobile-cart {
    width: 380px;
  }
  
  /* Better tablet spacing */
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  /* Adjust mobile sidebar widths */
  .mobile-menu,
  .mobile-cart {
    width: 85vw;
    max-width: 320px;
  }
  
  /* Smaller text on very small screens */
  .mobile-menu-item {
    font-size: 0.9rem;
    padding: 0.75rem 0.5rem;
  }
  
  /* Adjust search modal */
  .mobile-search-modal .bg-white {
    margin: 0.5rem;
    margin-top: 4rem;
  }
  
  /* Bottom navbar adjustments */
  .bottom-navbar {
    padding: 0 0.75rem;
    height: 3.5rem;
  }
  
  .bottom-navbar li {
    font-size: 0.7rem;
  }
  
  /* Search bar adjustments */
  .open-mobile_search-modal {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* Very small devices */
@media (max-width: 360px) {
  .mobile-menu,
  .mobile-cart {
    width: 90vw;
  }
  
  .bottom-navbar {
    left: 0.25rem;
    right: 0.25rem;
    bottom: 0.25rem;
  }
  
  .open-mobile_search-modal {
    left: 0.5rem;
    right: 0.5rem;
  }
}

/* Landscape mobile adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-search-modal .bg-white {
    margin-top: 2rem;
    max-height: calc(100vh - 3rem);
  }
  
  .mobile-menu,
  .mobile-cart {
    padding-top: 0.5rem;
  }
  
  /* Adjust main content padding */
  main {
    padding-top: 5rem !important;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders and shadows */
  .mobile-menu,
  .mobile-cart,
  .mobile-search-modal .bg-white {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .bottom-navbar {
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* Dark mode mobile improvements */
@media (prefers-color-scheme: dark) {
  .mobile-menu,
  .mobile-cart {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .bottom-navbar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .open-mobile_search-modal {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Accessibility improvements for mobile */
@media (max-width: 1024px) {
  /* Focus indicators */
  button:focus,
  .mobile-menu-item:focus,
  input:focus,
  textarea:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .mobile-menu,
    .mobile-cart,
    .bottom-navbar {
      border: 2px solid;
    }
    
    .mobile-menu-item:hover {
      background: #000;
      color: #fff;
    }
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu,
    .mobile-cart,
    .mobile-search-modal,
    .overlay {
      transition: none;
    }
    
    .bottom-navbar {
      transition: none;
    }
  }
}

/* Print styles - hide mobile elements */
@media print {
  .mobile-menu,
  .mobile-cart,
  .mobile-search-modal,
  .bottom-navbar,
  .open-mobile_search-modal,
  .overlay {
    display: none !important;
  }
}

/* Safe area adjustments for devices with notches */
@supports (padding: max(0px)) {
  .bottom-navbar {
    /* padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); */
  }
  
  .mobile-menu,
  .mobile-cart {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  
  nav {
    padding-top: max(0, env(safe-area-inset-top));
  }
}

/* Fix for iOS Safari bottom bar */
@supports (-webkit-touch-callout: none) {
  .bottom-navbar {
    /* padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0)); */
  }
  
  main {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* Smooth scrolling for mobile */
@media (max-width: 1024px) {
  html {
    scroll-behavior: smooth;
  }
  
  /* But disable for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}