/* iOS Safari Overlap Prevention Fixes */

/* Completely disable all transforms and problematic properties on iOS */
@supports (-webkit-touch-callout: none) {
  /* Reset all transforms */
  * {
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-perspective: none !important;
    perspective: none !important;
  }
  
  /* Ensure proper stacking context */
  body {
    position: relative;
    z-index: 0;
  }
  
  /* Main sections */
  section {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    overflow: visible !important;
    contain: layout !important;
  }
  
  /* Navigation bar */
  nav {
    position: fixed !important;
    z-index: 9999 !important;
    isolation: isolate !important;
  }
  
  /* Grid containers */
  .grid {
    display: grid !important;
    position: relative !important;
    z-index: 1 !important;
    gap: 2rem !important;
  }
  
  /* Product cards - complete reset */
  .product-card {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    contain: layout style !important; /* Changed from strict */
    will-change: auto !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }
  
  /* Product images */
  .product-image {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    contain: layout !important; /* Changed from strict to layout */
  }
  
  .product-image img {
    position: relative !important;
    z-index: 1 !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Instagram images */
  .instagram-post {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    contain: layout !important;
  }
  
  .instagram-post img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Disable all hover effects */
  .product-card:hover {
    margin: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Menu items */
  .menu-item {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    contain: layout !important;
  }
  
  /* Special cards */
  .special-card {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    contain: layout !important;
    overflow: visible !important; /* Allow badge to show */
  }
  
  .special-badge {
    position: absolute !important;
    transform: none !important; /* Remove rotation on iOS */
  }
  
  /* Buttons */
  .btn-primary,
  .btn-secondary {
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Disable all animations */
  * {
    animation: none !important;
    -webkit-animation: none !important;
  }
  
  /* Only allow safe transitions */
  * {
    -webkit-transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
  }
}

/* Additional iOS device class fixes */
.ios-device .product-card,
.ios-safari .product-card {
  position: relative !important;
  z-index: auto !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
  contain: strict !important;
  overflow: hidden !important;
}

.ios-device section,
.ios-safari section {
  overflow: visible !important;
  position: relative !important;
  z-index: auto !important;
}

/* Touch device fixes */
.touch-device .product-card {
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.touch-device .product-card:active {
  opacity: 0.9 !important;
}

/* Prevent any absolute positioning issues */
@supports (-webkit-touch-callout: none) {
  .product-card *,
  .menu-item *,
  .special-card * {
    position: relative !important;
  }
  
  /* Exception for truly absolute elements like badges */
  .special-badge {
    position: absolute !important;
  }
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  .ios-device .grid,
  .ios-safari .grid,
  .touch-device .grid {
    display: block !important;
  }
  
  .ios-device .product-card,
  .ios-safari .product-card,
  .touch-device .product-card {
    display: block !important;
    margin-bottom: 2rem !important;
    width: 100% !important;
  }
}

/* Fix hero section on iOS */
.ios-device .hero-section,
.ios-safari .hero-section {
  position: relative !important;
  overflow: hidden !important;
}

/* Fix overlapping text */
.ios-device h1, .ios-device h2, .ios-device h3,
.ios-safari h1, .ios-safari h2, .ios-safari h3 {
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure footer stays at bottom */
footer {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 2rem !important;
}