/* ══════════════════════════════════════════════════════════
   myLokaal — Mobile App Shell Styles
   Applied ONLY on small screens (max-width: 768px)
   Inspired by Kupa app — clean, reactive, native-feel
   ══════════════════════════════════════════════════════════ */

/* ── App Splash Screen ──────────────────────────────────── */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0D5C34;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity .5s ease, visibility .5s ease;
}
#app-splash.splash-fade {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#app-splash img {
  width: 140px;
  height: auto;
  animation: splashPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
#app-splash .splash-dot {
  display: flex;
  gap: 8px;
  animation: splashPop .6s .3s cubic-bezier(.34,1.56,.64,1) both;
}
#app-splash .splash-dot span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  animation: splashBounce 1.1s .6s ease-in-out infinite;
}
#app-splash .splash-dot span:nth-child(2) { animation-delay: .75s; }
#app-splash .splash-dot span:nth-child(3) { animation-delay: .9s;  }
@keyframes splashPop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1);  }
}
@keyframes splashBounce {
  0%, 80%, 100% { transform: scale(.85); opacity: .4; }
  40%            { transform: scale(1.1); opacity: 1;  }
}

/* ── Bottom nav bar ────────────────────────────────────────── */
.app-bnav {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {

  /* ── App chrome ─────────────────────────────────────── */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
  }

  /* Hide desktop elements */
  footer,
  .kente,
  .ham { display: none !important; }

  /* Hide desktop nav links */
  .nav-links { display: none !important; }

  /* Mobile slide-out menu (Jobs, Events, Cart, Post Job/Shop, Account) —
     opened via the "Menu" tab in the bottom app nav, not the (hidden) hamburger.
     Stays closed by default via its own base rule in shared.css; only
     .mob-menu.open should ever show it. */
  .mob-menu { z-index: 9600; }
  .mob-menu.open { display: flex !important; }

  /* Hide logo in mobile nav — clean app bar */
  .nav .logo { display: none !important; }

  /* ── Top bar layout — left: nothing / center: nothing / right: actions ── */
  .nav-inner {
    justify-content: flex-end !important;
    padding: 0 12px !important;
    min-height: 54px !important;
    gap: 8px !important;
  }

  /* Cart button — prominent at top right */
  .cart-btn {
    order: 10;
    width: 40px !important;
    height: 40px !important;
    background: #E1F5EE !important;
    border-color: #c0ddd0 !important;
    color: #1D6B4A !important;
    font-size: 1rem !important;
  }
  .cart-btn:active { transform: scale(.92); }

  /* Location pill — compact on mobile */
  .location-pill {
    font-size: .7rem !important;
    padding: 6px 10px !important;
  }

  /* Tighten the top nav height */
  .nav { min-height: 54px; }

  /* Page hero — the hero already renders its own in-hero breadcrumb,
     so the separate top .bc-bar (shown for logged-in users) is a redundant
     second breadcrumb stacked above it. Hide it on mobile to tighten the space. */
  .bc-bar { display: none !important; }
  .page-hero { padding: 14px 0 22px; }
  .page-hero h1 { font-size: 1.55rem; }
  .page-hero .breadcrumb { margin-bottom: 8px; }

  /* Full-width sections */
  .section { padding: 24px 0; }
  .container { padding: 0 14px; }

  /* Cards fill full width on mobile */
  .jobs-grid { grid-template-columns: 1fr !important; }
  .shops-grid { grid-template-columns: 1fr 1fr !important; }
  .prod-grid { grid-template-columns: 1fr 1fr !important; }

  /* Jobs layout — single column, hide sidebar */
  .jobs-layout { grid-template-columns: 1fr !important; }
  .jobs-sidebar { display: none !important; }

  /* ── Bottom navigation bar ──────────────────────────── */
  .app-bnav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9500;
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    align-items: stretch;
    background: #fff;
    border-top: 1px solid #e8ede9;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  }

  .bnav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #9faab8;
    text-decoration: none;
    font-family: var(--font, 'DM Sans', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 8px 4px 6px;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
  }

  .bnav-tab svg {
    stroke: currentColor;
    transition: transform .15s;
  }
  .bnav-tab:active svg { transform: scale(.88); }

  /* Active state */
  .bnav-tab.act { color: #1D9E75; }

  /* Active indicator bar at top */
  .bnav-tab.act::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2.5px;
    background: #1D9E75;
    border-radius: 0 0 3px 3px;
  }

  /* Centre Marketplace tab — elevated pill shape at all times;
     the GREEN fill only appears when Marketplace is actually the active page,
     same as every other tab. Shape stays elevated so it keeps its visual weight. */
  .bnav-tab.bnav-center {
    flex: 0 0 70px;
    margin-top: -14px;
    background: #fff;
    border: 1.5px solid #e8ede9;
    border-radius: 18px;
    height: 54px;
    color: #9faab8;
    box-shadow: 0 -4px 16px rgba(0,0,0,.10);
    align-self: center;
    font-size: 9.5px;
    gap: 2px;
    padding: 6px 4px;
  }
  .bnav-tab.bnav-center::before { display: none; }
  .bnav-tab.bnav-center:active { transform: scale(.94); }

  .bnav-tab.bnav-center.act {
    background: #1D9E75;
    border-color: #1D9E75;
    color: #fff;
    box-shadow: 0 -4px 24px rgba(29,158,117,.5);
  }
  .bnav-tab.bnav-center.act svg { stroke: #fff; }

  /* ── Mobile-first card tweaks ──────────────────────── */
  .job-card { padding: 16px; }
  .shop-card .shop-body { padding: 12px; }
  .prod-card .prod-body { padding: 10px 12px; }

  /* Bigger tap targets */
  .btn, .btn-g, .btn-gd, .btn-ow { min-height: 46px; padding: 12px 20px; }

  /* Category scroll bar */
  .cat-bar { overflow-x: auto; }
  .cat-scroll { padding: 0 14px; gap: 8px; }

  /* Filter panel — horizontal strip on mobile */
  .filter-panel {
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Homepage mobile overrides ─────────────────────── */
  .hl-hero-wrap { padding: 24px 0 28px !important; }
  .hl-hero-right { display: none !important; }
  .hl-h1 { font-size: 1.75rem !important; }
  .hl-sub { font-size: 13px !important; }

  /* Trending scroll — make cards a bit smaller */
  .hl-trend-card { flex: 0 0 148px !important; min-width: 148px !important; }

  /* Category rail — 4 per row on mobile */
  .hl-cat-rail { flex-wrap: wrap; }
  .hl-cat-item { flex: 1 0 25%; border-bottom: 1px solid var(--hl-line, #DCE3DE); padding: 14px 4px; }

  /* Merch grid — single column */
  .hl-merch-grid { grid-template-columns: 1fr !important; }

  /* Jobs grid in dark section — single col */
  #jobs-section .jobs-grid { grid-template-columns: 1fr !important; }

  /* Deal cards — slightly smaller */
  .hl-deal-card { flex: 0 0 152px; min-width: 152px; }

  /* Trust strip — smaller */
  .hl-trust-inner { gap: 14px; font-size: 12px; }

  /* CTA band — stack vertically */
  .hl-cta-inner { flex-direction: column; text-align: center; }

  /* Search form — stack */
  .bk-form { flex-direction: column !important; }
  .bk-search-btn { width: 100% !important; justify-content: center !important; }

  /* Shop mini rail */
  .hl-shop-mini { flex: 0 0 50%; }

  /* Cat4 grid — 2 col on mobile */
  .hl-cat4-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Cart FAB is redundant on mobile — cart is in top-right nav bar */
  .mob-cart-fab { display: none !important; }

  /* ── PWA standalone mode ────────────────────────────── */
  @media (display-mode: standalone) {
    .nav { padding-top: env(safe-area-inset-top); }
    #app-splash { padding-top: env(safe-area-inset-top); }
  }
}

/* ── Desktop: ensure splash is never shown ─────────────── */
@media (min-width: 769px) {
  #app-splash { display: none !important; }
}