/* ============================================================
   Amar Subscription — device & UX fixes (2026-09-09, v3)
   Loaded after the main stylesheet from index.html.
   ============================================================ */

/* ---- 1. Desktop nav: let category tabs WRAP instead of clipping
          (previously overflow-x-auto + no-scrollbar: on <=1536px screens
          the last 3-6 categories were unreachable with a mouse) ---- */
@media (min-width: 768px) {
  nav.no-scrollbar {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* ---- 2. iOS Safari: never auto-zoom on input focus.
          Apple zooms when the focused input font-size is < 16px. ---- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---- 3. iPhone home-indicator safe area for fixed bottom UI ---- */
/* product page sticky buy bar */
.fixed.bottom-0.left-0.right-0 {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
/* floating WhatsApp / Messenger stack (bottom-5 or bottom-[100px]) */
.fixed.right-4.bottom-5 {
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.fixed.right-4.bottom-\[100px\] {
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
/* bottom-sheet drawers & menus (cart drawer, mobile menu, shop filter) */
.absolute.right-0.top-0.h-full {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- 4. Touch targets: bigger qty steppers on mobile ---- */
@media (max-width: 767px) {
  .grid.h-6.w-6.place-items-center,
  .grid.h-7.w-7.place-items-center {
    height: 2rem;
    width: 2rem;
  }
}

/* ---- 5. Full-screen modal overlays: keep content inside the viewport
          on short landscape phones (checkout confirm, admin modals) ---- */
.fixed.inset-0 {
  overscroll-behavior: contain;
}