/* Custom mobile overrides for Nazakat Knots */

/* ============================================================
   BENTO GRID DESIGN SYSTEM
   Shared surface + grid utilities used across every page so the
   admin panel and the customer-facing site read as one visual
   language. Pure CSS (no Tailwind plugin needed) — classes below
   are additive and safe to combine with existing Tailwind utility
   classes already on each element.
============================================================= */

/* Base "bento" card surface: soft white card, slate border, large
   radius, gentle hover lift. Use alongside padding/gap utilities. */
.bento-card {
  background-color: #ffffff;
  border: 1px solid rgb(226 232 240); /* slate-200 */
  border-radius: 1.5rem; /* rounded-3xl */
  transition: border-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

.bento-card.bento-hover:hover {
  border-color: rgb(148 163 184); /* slate-400 */
  transform: scale(1.01);
  box-shadow: 0 10px 25px -8px rgba(143, 90, 41, 0.15);
}

/* Responsive bento grid shell: mobile stacks to a single column,
   tablet/desktop open up into the modular multi-column layout. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* Modular span helpers — mirror Tailwind's col/row-span naming so
   markup stays readable at a glance. */
@media (min-width: 768px) {
  .bento-span-2 { grid-column: span 2 / span 2; }
  .bento-span-3 { grid-column: span 3 / span 3; }
  .bento-span-full { grid-column: 1 / -1; }
  .bento-row-span-2 { grid-row: span 2 / span 2; }
}

/* 1. Prevent unwanted horizontal scrolling across all mobile screen widths (320px - 414px) */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

/* 2. iOS Input Auto-Zoom Fix (Forces 16px font on small screens to prevent forced zoom on focus) */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 3. Minimum Touch Targets for Hand-Friendly Mobile Navigation & Actions */
button, 
a, 
input, 
select {
  min-height: 44px;
  touch-action: manipulation;
}

/* Exclude inline compact utility buttons from enforcing large vertical heights */
.thumbnail-img,
[data-cart-action] {
  min-height: initial;
}

/* 4. Hide Scrollbars cleanly for horizontal thumbnail & product category scrollbars */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 5. Fluid Responsive Grid Utility */
.product-grid-responsive {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .product-grid-responsive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .product-grid-responsive {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* 6. Bottom Tab Bar (mobile-first primary navigation) */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid #f3e4cc; /* brand-100 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(143, 90, 41, 0.08);
}

.bottom-nav-item {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px 6px;
  color: #9ca3af; /* gray-400 */
  min-height: 56px;
}

.bottom-nav-item svg {
  width: 22px;
  height: 22px;
}

.bottom-nav-item span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.bottom-nav-item.active {
  color: #8f5a29; /* brand-600 */
}

.bottom-nav-item.active svg {
  stroke-width: 2.5;
}

/* Reserve space at the bottom of scrollable content so the fixed
   bottom nav never covers the last item on the page. Applied via class
   on <main>, and as a safety net on any page whose <footer> (or other
   content) comes after <main> and would otherwise sit under the nav. */
.has-bottom-nav {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

body:has(.bottom-nav) {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
body:has(.bottom-nav) main.has-bottom-nav {
  padding-bottom: 1.5rem; /* avoid double spacing when body already reserves room */
}