/* ==========================================================================
   COMPREHENSIVE RESPONSIVE ENHANCEMENTS — AHAD MEDICAL STOREFRONT
   Mobile (320px-480px), Tablet (600px-1024px), Laptop (1280px-1440px), Desktop (1600px+)
   ========================================================================== */

/* 1. Global Viewport & Root Overflow Safety */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  width: 100%;
  position: relative;
  min-height: 100vh;
}

#root {
  overflow-x: clip;
  width: 100%;
}

/* 2. Pulse Beam & Fixed Animation Overflow Protection */
.animate-pulse-beam {
  contain: paint;
}

/* 3. Intro Brand Overlay Responsive Containment (320px - 380px) */
@media (max-width: 380px) {
  .fixed.inset-0 .w-72 {
    width: 100% !important;
    max-width: 240px !important;
  }
  .fixed.inset-0 .max-w-sm {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* 4. Product Detail Page & QuickView Modal Responsive Enhancements */
@media (max-width: 480px) {
  /* Outer Page Margin/Padding Adjustment */
  .max-w-7xl.mx-auto.px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Product Detail Card internal spacing */
  .grid.grid-cols-1.lg\:grid-cols-12.bg-white.p-6 {
    padding: 1rem !important;
    border-radius: 1rem !important;
    gap: 1.5rem !important;
  }

  /* Breadcrumb Navigation: responsive max width */
  nav.flex.items-center.gap-2 span.truncate {
    max-width: 110px !important;
  }

  /* Thumbnail Gallery: strict containment and touch scroll */
  .overflow-x-auto {
    max-width: 100% !important;
    min-width: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Thumbnail Buttons: slightly more compact on tiny screens */
  .overflow-x-auto .w-20.h-24 {
    width: 4.25rem !important;
    height: 5.25rem !important;
  }
}

@media (max-width: 380px) {
  /* Action Buttons Row on Extra-Small Viewports (320px - 375px) */
  .space-y-3 .flex.items-center.gap-3 {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Add to Cart button inside action row */
  .space-y-3 .flex.items-center.gap-3 > button.flex-1 {
    min-width: 130px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Quantity Selector in action row */
  .space-y-3 .flex.items-center.gap-3 > div.flex.items-center {
    flex-shrink: 0 !important;
  }

  /* Wishlist Icon button in action row */
  .space-y-3 .flex.items-center.gap-3 > button.p-3\.5 {
    padding: 0.75rem !important;
    flex-shrink: 0 !important;
  }

  /* Size Selector pills wrap smoothly */
  .flex.flex-wrap.gap-2 button {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
  }
}

/* 5. Header Secondary Navigation & Tagline (1024px - 1200px) */
@media (min-width: 1024px) and (max-width: 1200px) {
  header nav > .flex.items-center.gap-1\.5.text-\[11px\] {
    display: none !important;
  }
  header nav ul {
    gap: 0.125rem !important;
  }
  header nav ul li button {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    font-size: 10.5px !important;
  }
}

/* 6. QuickView Modal Mobile Optimization */
@media (max-width: 768px) {
  .shadow-modal.max-w-3xl {
    max-height: 88vh !important;
    overflow-y: auto !important;
  }
  .shadow-modal.max-w-3xl .md\:w-1\/2.bg-slate-50 {
    padding: 1rem !important;
  }
  .shadow-modal.max-w-3xl .md\:w-1\/2.bg-slate-50 .aspect-\[4\/5\] {
    aspect-ratio: 16/10 !important;
    max-height: 200px !important;
  }
  .shadow-modal.max-w-3xl .md\:w-1\/2.overflow-y-auto {
    padding: 1rem !important;
    overflow-y: visible !important;
  }

  /* Sizing Guide modal */
  .shadow-modal.max-w-2xl {
    max-height: 88vh !important;
  }
  .shadow-modal.max-w-2xl .p-6 {
    padding: 1rem !important;
  }
}

/* 7. Hero Slider Mobile Media Enhancement */
@media (max-width: 639px) {
  /* Allow the doctor/nurse photography to be visible while maintaining high contrast text */
  .rounded-2xl .pointer-events-none.sm\:hidden {
    opacity: 0.82 !important;
  }
  /* Hero buttons wrap comfortably */
  .rounded-2xl .flex.flex-wrap.items-center.gap-2\.5 {
    gap: 0.5rem !important;
  }
  .rounded-2xl .flex.flex-wrap.items-center.gap-2\.5 a,
  .rounded-2xl .flex.flex-wrap.items-center.gap-2\.5 button {
    white-space: nowrap !important;
  }
}

/* 8. Mobile Bottom Navigation & Safe Area Inset */
.safe-bottom {
  padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 0.4rem)) !important;
}

/* 9. Form Inputs Mobile Zoom Prevention (iOS 16px font standard) */
@media (max-width: 640px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 10. Large Screens & Ultra-Wide Displays (1600px+) */
@media (min-width: 1600px) {
  .max-w-7xl {
    max-width: 88rem !important;
  }
}