/**
 * Mobile Responsive Optimizations for GrahaguruB2C.IN
 * Ensures all pages work perfectly on mobile devices
 */

/* Base Mobile Optimizations */
@media (max-width: 768px) {
  /* Typography - Prevent text overflow */
  body {
    font-size: 14px;
    overflow-x: hidden;
  }

  h1 {
    font-size: 1.75rem !important;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  p {
    font-size: 14px;
  }

  /* Container adjustments */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Touch-friendly buttons */
  button,
  a.btn,
  .btn-cosmic,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  /* Form inputs - prevent zoom on iOS */
  input,
  textarea,
  select {
    font-size: 16px !important;
    padding: 12px !important;
  }

  /* Navigation improvements */
  .nav-bar {
    padding: 12px 16px !important;
  }

  .nav-bar .container {
    max-width: 100%;
  }

  /* Mobile menu animations */
  #mobileMenu,
  #mobileMenuM,
  #mobileMenuC,
  #mobileMenuB {
    animation: slideDown 0.3s ease;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Grid layouts - single column on mobile */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Product grids */
  .grid.sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Card spacing */
  .glass-card,
  .stat-card {
    margin-bottom: 1rem;
    padding: 1rem !important;
  }

  /* Modal adjustments */
  .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    margin: 2rem auto !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Cart sidebar - full width on mobile */
  .cart-sidebar {
    width: 100% !important;
    right: -100% !important;
  }

  .cart-sidebar.open {
    right: 0 !important;
  }

  /* Images - responsive */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }

  /* Tables - scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Spacing adjustments */
  .space-y-4 > * + * {
    margin-top: 1rem !important;
  }

  .space-y-6 > * + * {
    margin-top: 1.5rem !important;
  }

  /* Padding reductions */
  section {
    padding: 2rem 1rem !important;
  }

  /* Fix sticky elements on mobile */
  .sticky,
  .fixed {
    position: relative;
  }

  .nav-bar {
    position: sticky !important;
  }
}

/* Small mobile devices (phones in portrait) */
@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.25rem !important;
  }

  /* Single column for everything */
  .grid {
    grid-template-columns: 1fr !important;
  }

  /* Smaller padding */
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Reduce button sizes slightly */
  button,
  .btn {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
}

/* Landscape phones and small tablets */
@media (min-width: 481px) and (max-width: 768px) {
  /* Two column grids for products */
  .grid.product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stat cards in 2 columns */
  .stat-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  a,
  button,
  .nav-item,
  .clickable {
    min-height: 48px;
    min-width: 48px;
  }

  /* Remove hover effects on touch devices */
  *:hover {
    transition: none !important;
  }

  /* Improve tap highlighting */
  * {
    -webkit-tap-highlight-color: rgba(139, 69, 193, 0.2);
  }
}

/* Prevent horizontal scroll */
body,
html {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Fix iOS Safari bottom bar issues */
@supports (-webkit-touch-callout: none) {
  .fixed-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
  /* Focus states more visible */
  *:focus {
    outline: 2px solid rgba(139, 69, 193, 0.8);
    outline-offset: 2px;
  }

  /* Skip navigation visible on focus */
  .skip-nav:focus {
    position: static;
    width: auto;
    height: auto;
  }
}

/* Performance: Reduce animations on mobile */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}