/* ── Desktop: hide mobile-only elements ─────────────────── */
.bottom-nav { display: none; }
.cart-drawer-overlay { display: none; }
.cart-drawer { display: none; }
.ptr-indicator { display: none; }

/* ═══════════════════════════════════════════════════════════
   FoodFlow Mobile CSS — App-like experience
   Only applies to screens ≤ 768px
═══════════════════════════════════════════════════════════ */

/* ── iOS/Android safe area variables ─────────────────────── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --bottom-nav-h: 60px;
}

@media (max-width: 768px) {

/* ── Base resets ─────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
body {
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 20px);
  overscroll-behavior-y: contain;
}

/* Prevent iOS input zoom (inputs must be ≥16px) */
input, select, textarea {
  font-size: 16px !important;
}

/* ── Navbar mobile ───────────────────────────────────────── */
.navbar {
  padding: 10px 14px;
  padding-top: calc(10px + var(--safe-top));
  position: sticky;
  top: 0;
  z-index: 200;
}
.navbar .nav-right { gap: 8px; }
.navbar .back-btn  { font-size: 12px; padding: 6px 12px; }

/* ── Bottom Navigation Bar ───────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottom-nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: #fff;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  z-index: 500;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: var(--text3);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bn-item:active { transform: scale(.92); }
.bn-item.active { color: var(--primary); }
.bn-item .bn-icon { font-size: 22px; line-height: 1; }
.bn-item .bn-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid #fff;
}

/* ── Cart Slide-up Drawer ────────────────────────────────── */
.cart-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 600;
  opacity: 0;
  transition: opacity .25s;
}
.cart-drawer-overlay.open {
  display: block;
  opacity: 1;
}
.cart-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 601;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
  box-shadow: 0 -4px 30px rgba(0,0,0,.15);
}
.cart-drawer.open { transform: translateY(0); }
.cart-drawer-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}
.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.cart-drawer-close {
  width: 30px;
  height: 30px;
  background: var(--bg3);
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
}
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  -webkit-overflow-scrolling: touch;
}
.cart-drawer-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer-checkout {
  width: 100%;
  padding: 15px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-drawer-checkout:active { transform: scale(.98); }

/* Hide old cart FAB on mobile — bottom nav cart handles it */
@media (max-width: 768px) {
  .cart-fab { display: none !important; }
}

/* ── Touch feedback on all interactive elements ──────────── */
.menu-item-card:active,
.category-pill:active,
.btn-primary:active,
.pay-opt:active,
.bn-item:active {
  transform: scale(.96);
  transition: transform .1s;
}

/* ── Menu grid mobile ────────────────────────────────────── */
.menu-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  padding: 0 12px 12px !important;
}
.menu-item-card {
  border-radius: 14px !important;
}
.item-img {
  height: 110px !important;
  font-size: 38px !important;
}
.item-body { padding: 8px 10px 10px !important; }
.item-name { font-size: 12.5px !important; }
.item-price { font-size: 13px !important; }
.item-add-btn {
  width: 30px !important;
  height: 30px !important;
  font-size: 18px !important;
}

/* ── Banner carousel mobile ──────────────────────────────── */
.banner-carousel {
  border-radius: 0 !important;
  height: 180px !important;
}
.banner-slide img { object-fit: cover; }

/* ── Category nav mobile ─────────────────────────────────── */
.category-nav {
  padding: 8px 12px !important;
  gap: 7px !important;
}
.category-pill {
  padding: 6px 13px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* ── Search bar mobile ───────────────────────────────────── */
.search-bar {
  margin: 8px 12px !important;
  font-size: 15px !important;
}

/* ── Skeleton loading ────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, #e8e8e8 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.skeleton-img  { height: 110px; }
.skeleton-line { height: 12px; margin: 8px 10px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.price { width: 40%; height: 14px; }

/* ── Page transitions ────────────────────────────────────── */
.page-enter {
  animation: slideInRight .25s cubic-bezier(.32,.72,0,1);
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.page-exit {
  animation: slideOutLeft .25s cubic-bezier(.32,.72,0,1);
}
@keyframes slideOutLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-30%);  opacity: 0; }
}

/* ── Checkout mobile ─────────────────────────────────────── */
.checkout-wrap {
  padding: 0 !important;
}
.co-card {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  margin-bottom: 8px !important;
}
.co-sidebar { display: none !important; }
.co-main { width: 100% !important; }

/* ── Variant modal mobile ────────────────────────────────── */
.variant-modal-inner {
  border-radius: 20px 20px 0 0 !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1) !important;
}
.variant-modal-inner.open {
  transform: translateY(0) !important;
}

/* ── Branch modal mobile ─────────────────────────────────── */
.bmod {
  border-radius: 20px 20px 0 0 !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  max-height: 90vh !important;
}
.bmod-ov {
  align-items: flex-end !important;
  padding: 0 !important;
}

/* ── Orders page mobile ──────────────────────────────────── */
.orders-list { padding: 12px !important; }
.order-card  { border-radius: 12px !important; margin-bottom: 10px !important; }

/* ── Auth forms mobile ───────────────────────────────────── */
.auth-card {
  border-radius: 0 !important;
  min-height: 100vh !important;
  padding: 24px 20px !important;
}

/* ── Pull to refresh indicator ───────────────────────────── */
.ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-60px);
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 20px 20px;
  font-size: 12.5px;
  font-weight: 600;
  z-index: 999;
  transition: transform .3s;
}
.ptr-indicator.visible { transform: translateX(-50%) translateY(0); }

/* ── Floating action smoothing ───────────────────────────── */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scroll momentum ─────────────────────────────────────── */
.menu-grid-wrap,
.cart-drawer-body,
.orders-list {
  -webkit-overflow-scrolling: touch;
}

/* ── Account page mobile ─────────────────────────────────── */
.aw { padding: 12px !important; }
.prof-card {
  padding: 14px !important;
  gap: 10px !important;
}
.pav {
  width: 46px !important;
  height: 46px !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
}

/* Stats grid: 3 cols → stack to 2 on small screens */
.aw > div[style*="grid-template-columns"] {
  grid-template-columns: 1fr 1fr !important;
}

/* Name + edit form grid → single column */
div[style*="grid-template-columns:1fr 1fr"] {
  grid-template-columns: 1fr !important;
}

/* Nav links on customer pages */
.nav-links { display: none !important; }

/* Loyalty page */
.loyalty-wrap { padding: 12px !important; }

/* ── Auth page: hide left column on mobile ──────────────── */
.auth-left { display: none !important; }
.auth-right {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  min-height: 100vh !important;
  padding: 24px 20px !important;
}
.auth-wrap {
  grid-template-columns: 1fr !important;
  min-height: 100vh !important;
}

/* ── Category + Search: mobile tweaks ───────────────────── */
.cats-search {
  padding: 6px 12px !important;
}
.cats-search input {
  font-size: 15px !important;
}
.cats-row2 {
  padding: 4px 8px !important;
}
#catsTrack {
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
#catsTrack::-webkit-scrollbar { display: none; }
.cat-arrow {
  display: flex !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
}

/* ── Header: hide cart + account on mobile (bottom nav handles them) ── */
.cart-btn          { display: none !important; }
.acct-dd           { display: none !important; }
.nav-links         { display: none !important; }
.nav-right .back-btn { display: none !important; }
.nav-right a[href*="auth"] { display: none !important; }

/* Keep logo + live status visible */
.navbar { justify-content: space-between !important; }
.nav-right { gap: 6px !important; }

/* ── Variant modal: above bottom nav, footer always visible ─ */

.vmod {
  max-height: calc(92vh - var(--bottom-nav-h) - var(--safe-bottom)) !important;
  padding-bottom: 0 !important;
}
.vmod-footer {
  padding-bottom: calc(var(--safe-bottom) + 16px) !important;
}

/* ── Hide old cart panel on mobile (drawer replaces it) ─── */
.cart-overlay { display: none !important; }
.cart-panel   { display: none !important; }
.cart-fab     { display: none !important; }

/* Ensure bottom nav always on top of everything except modals ── */
.bottom-nav {
  z-index: 5000 !important;
  position: fixed !important;
}

/* Variant modal must be above bottom nav ── */
.vmod-ov { z-index: 9000 !important; }

/* ── Checkout page: clear bottom nav ────────────────────── */
.co-wrap {
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 20px) !important;
}

/* Ensure Place Order button is never behind nav ── */
.place-btn {
  position: relative;
  z-index: 1;
}

/* Cart summary on checkout: remove sidebar on mobile ── */
.co-sidebar {
  display: none !important;
}
.co-main {
  width: 100% !important;
  grid-column: 1 / -1 !important;
}

/* General page bottom padding so last element is never hidden ── */
main, .aw, .page-wrap, .orders-wrap {
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px) !important;
}

/* ── Cart drawer: must sit above bottom nav ─────────────── */
.cart-drawer-overlay { z-index: 5500 !important; }
.cart-drawer         { z-index: 5501 !important; }

/* Cart drawer footer: add safe area padding so button is touchable */
.cart-drawer-footer {
  padding-bottom: calc(var(--safe-bottom) + 16px) !important;
}

/* Cart drawer total height: account for safe area */
.cart-drawer {
  padding-bottom: 0 !important;
}

} /* end @media (max-width: 768px) */