/* 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;
    }
  }
}

/* Fix for responsive grid columns - تضمین کارکرد کلاس‌های responsive grid Tailwind */
/* این CSS کلاس‌های responsive grid را در همه صفحات تضمین می‌کند */

/* Tablet (md - 768px+) */
/* Fix اسلایدر بنر: تضمین کارکرد hidden md:block و block md:hidden در production */
@media (min-width: 768px) {
  .md\:block {
    display: block !important;
  }
  .md\:hidden {
    display: none !important;
  }
  .md\:flex {
    display: flex !important;
  }
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .md\:col-span-1 {
    grid-column: span 1 / span 1 !important;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
  .md\:col-span-4 {
    grid-column: span 4 / span 4 !important;
  }
  .md\:col-span-6 {
    grid-column: span 6 / span 6 !important;
  }
}

/* Desktop (lg - 1024px+) */
@media (min-width: 1024px) {
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .lg\:col-span-1 {
    grid-column: span 1 / span 1 !important;
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4 !important;
  }
  .lg\:col-span-6 {
    grid-column: span 6 / span 6 !important;
  }
}

/* Large Desktop (xl - 1280px+) */
@media (min-width: 1280px) {
  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}