/* ═══════════════════════════════════════════════════════════════════════════
   A1 Khandeshi — Global Mobile Fixes
   Included on all pages to smooth out mobile experience
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

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

/* Smooth scrolling on mobile */
html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* Better tap targets — minimum 44px */
button, a, [role="button"] { min-height: 36px; }

/* ── Navigation ── */
nav { padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { nav { padding-left: 64px; padding-right: 64px; } }

/* Logo sizing on mobile */
nav img { max-height: 56px; }
@media (min-width: 768px) { nav img { max-height: 64px; } }

/* Hide scrollbars on filter tabs */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Hero section ── */
@media (max-width: 640px) {
  /* Reduce hero padding on mobile */
  section.relative.min-h-screen { min-height: 85vh; padding-top: 2rem; padding-bottom: 2rem; }

  /* Hero title — never overflow */
  section.relative h1 { font-size: 2rem; line-height: 1.2; }

  /* Hero buttons — full width on small mobile */
  section.relative .flex.flex-col.sm\:flex-row { gap: 0.75rem; }
  section.relative button, section.relative a.bg-primary,
  section.relative a.bg-\[\#25D366\] {
    width: 100%;
    justify-content: center;
  }
}

/* ── Product cards ── */
@media (max-width: 640px) {
  /* Single column product grid on mobile */
  .grid.sm\:grid-cols-2 { grid-template-columns: 1fr; }

  /* Product card buttons full width */
  .product-card button { width: 100%; }
}

/* ── Filter tabs — horizontal scroll on mobile ── */
@media (max-width: 640px) {
  [id$="-grid"] + .flex,
  .filter-btn { white-space: nowrap; }
}

/* ── Checkout form ── */
@media (max-width: 640px) {
  /* Full-width inputs on mobile */
  .field-wrap input,
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="number"], select, textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
  }

  /* UPI QR — stack vertically on mobile */
  #upi-section .grid { grid-template-columns: 1fr; }
  #upi-qr-img { width: 160px; height: 160px; }
  #upi-amount { font-size: 2.5rem; }

  /* "I've Paid" button — full width, comfortable padding */
  button.paid-pulse {
    width: 100%;
    padding: 1rem;
    font-size: 0.9rem;
  }
}

/* ── Cart page ── */
@media (max-width: 1024px) {
  /* Order summary below cart on tablet */
  #cart-content { grid-template-columns: 1fr; }
}

/* ── Profile page ── */
@media (max-width: 1024px) {
  /* Stack sidebar above content on mobile */
  .lg\:col-span-1 + .lg\:col-span-3 { margin-top: 0; }

  /* Tab buttons — horizontal scroll on mobile */
  nav.space-y-1 {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }
  nav.space-y-1::-webkit-scrollbar { display: none; }
  nav.space-y-1 button {
    flex-shrink: 0;
    white-space: nowrap;
    width: auto;
    border-left: none !important;
    border-bottom: 3px solid transparent;
  }
  nav.space-y-1 button.active {
    border-bottom-color: #a03b1b;
  }
}

/* ── WhatsApp floating button ── */
@media (max-width: 640px) {
  .whatsapp-float { bottom: 16px; right: 16px; }
  .whatsapp-float svg { width: 22px; height: 22px; }
  .whatsapp-float { padding: 0.85rem; }
}

/* ── Modals ── */
@media (max-width: 480px) {
  /* Full-width modals on small phones */
  #wa-modal > div,
  #addr-picker-modal > div,
  #addr-modal > div {
    max-width: calc(100vw - 2rem) !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    border-radius: 1rem !important;
  }
}

/* ── Footer ── */
@media (max-width: 768px) {
  footer { text-align: center; }
  footer .grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

/* ── Typography — prevent overflow ── */
h1, h2, h3, h4, p {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Touch improvements ── */
@media (hover: none) {
  /* Remove hover effects on touch devices */
  button:hover, a:hover { opacity: 1; }

  /* Larger tap targets for product action buttons */
  .product-card button {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }
}

/* ── Prevent font scaling on iOS ── */
@media screen and (max-width: 640px) {
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}

/* ── Better input appearance on iOS ── */
input, textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0.75rem;
}

/* ── Reviews grid mobile ── */
@media (max-width: 640px) {
  .grid.md\:grid-cols-2.lg\:grid-cols-3 { grid-template-columns: 1fr; }
}

/* ── Order confirmed page ── */
@media (max-width: 640px) {
  #confirm-order-id { font-size: 1.1rem; letter-spacing: 0.05em; }
  .bg-primary.text-white.rounded-2xl { padding: 1.25rem 1rem; }
}