/* ═══════════════════════════════════════════════════════════
   Kasi Box — Global Mobile Fixes
   Compatible with iOS 10+ (iPhone 6 / iOS 12 safe)
═══════════════════════════════════════════════════════════ */

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

/* ── No horizontal scroll ever ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

/* ── Images never overflow ── */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Prevent iOS font size inflation ── */
html { -webkit-text-size-adjust: 100%; }

/* ── Font rendering ── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Forms: prevent iOS zoom (needs 16px min) ── */
input, select, textarea {
  font-size: 16px !important;
  max-width: 100%;
}

/* ── Tables: always scrollable ── */
.table-wrap, .overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
table { min-width: 100%; }

/* ── Bottom nav: safe area padding with plain fallback for iOS <11 ── */
.bottom-nav {
  padding-bottom: 4px;
  padding-bottom: env(safe-area-inset-bottom, 4px);
}

/* ── Bottom nav links: always display correctly ──
   Override any global a/button rules that could collapse them */
.bottom-nav a {
  max-width: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-box-flex: 1 !important;
  flex: 1 !important;
  min-width: 0 !important;
  display: -webkit-box !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  flex-direction: column !important;
  -webkit-box-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  justify-content: center !important;
}

/* ── Main content: correct padding ── */
.kb-main {
  padding-bottom: 72px;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  min-height: calc(100vh - 52px);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  .kb-main {
    padding-left: 236px;
    padding-bottom: 32px;
  }
}

/* ── Notification panel: don't overflow screen ── */
#notif-panel {
  max-width: calc(100vw - 24px);
  right: 0;
}

/* ── Horizontal scroll strips ── */
.scroll-x, .store-scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar,
.store-scroll::-webkit-scrollbar { display: none; }
.scroll-x > *, .store-scroll > * {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* gap fallback for older WebKit */
@supports not (gap: 1px) {
  .store-scroll > * + * { margin-left: 10px; }
  .scroll-x > * + *     { margin-left: 10px; }
}

/* ── Map boxes ── */
.map-box {
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}
@media (min-width: 640px) {
  .map-box { height: 350px; }
}

/* ── Product grid: always 2 columns on mobile ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Stat grid ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ── Modals: slide up from bottom on mobile ── */
@media (max-width: 639px) {
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ── Chat layout ── */
.chat-wrap {
  position: fixed;
  top: 52px;
  bottom: 60px;
  left: 0;
  right: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .chat-wrap { left: 220px; bottom: 0; }
}

/* ── Admin tables: hide extra columns on small screens ── */
@media (max-width: 767px) {
  .admin-table th:nth-child(n+5),
  .admin-table td:nth-child(n+5) { display: none; }
}

/* ── Flex wrapping helpers ── */
@media (max-width: 639px) {
  .mobile-stack { -webkit-flex-direction: column !important; flex-direction: column !important; }
  .mobile-full  { width: 100% !important; }
}

/* ── Prevent long words/URLs from breaking layout — but NOT in nav ── */
p, span, td, th, li {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Only break words in content links, not nav links */
.kb-main a {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* ── Toast animation ── */
@keyframes toastIn {
  from { opacity:0; transform:translateX(-50%) translateY(10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── Tailwind responsive helpers ── */
@media (min-width: 768px) {
  .md\:flex   { display: -webkit-box !important; display: flex !important; }
  .md\:block  { display: block !important; }
  .md\:hidden { display: none !important; }
  .md\:grid   { display: grid !important; }
}

/* ── Fix: inline-ad full row in product grid ── */
.inline-ad { grid-column: 1 / -1 !important; }

/* ── Fix: hero banner on mobile ── */
@media (max-width: 767px) {
  .hero-banner {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
  }
}

/* ── Fix: forms don't overflow on small screens ── */
form { max-width: 100%; }
.grid { max-width: 100%; }

/* ── Fix: long store names don't break cards ── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Fix: variation/combo rows in product form ── */
@media (max-width: 639px) {
  .variation-row,
  .combo-row .grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Fix: checkout summary card ── */
@media (max-width: 639px) {
  #summary-card { font-size: 13px; }
}

/* ── Fix: driver map full height ── */
.delivery-map {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Fix: top bar doesn't overflow ── */
.top-bar {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
.top-bar > div {
  max-width: 100%;
  overflow: hidden;
}

/* ── Fix: visitor stats pill wraps on small screens ── */
@media (max-width: 480px) {
  #header-online-count { display: none; }
}

/* ── Smooth scrolling on iOS ── */
.overflow-y-auto,
.overflow-x-auto,
.scroll-x,
.store-scroll {
  -webkit-overflow-scrolling: touch;
}

/* ── Prevent horizontal overflow ── */
body { overflow-x: hidden; }
img  { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════
   iPhone 6 / Small screen fixes (375px wide)
═══════════════════════════════════════════════════════════ */

/* Promo cards stack vertically so button doesn't crush text */
@media (max-width: 420px) {
  .promo-card-inner {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .promo-card-inner .promo-btn {
    width: 100% !important;
    text-align: center;
    -webkit-box-pack: center;
    justify-content: center;
  }

  /* Category filter pills: smaller so more fit */
  .category-filter-bar a {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Store cards slightly narrower */
  .store-scroll > div { width: 118px !important; }

  /* Promo text smaller */
  .promo-card-inner h3 { font-size: 15px !important; }
  .promo-card-inner p  { font-size: 12px !important; }

  /* Reduce vertical spacing */
  .space-y-5 > * + * { margin-top: 12px !important; }

  /* Grid gap */
  .grid-cols-2 { gap: 8px !important; }
}

/* ── Fix 'inset' shorthand not supported on iOS <14.5 ── */
[style*="inset:0"] {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}