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

/* ── App Splash Screen — first launch / slow connection only ──
   Shown or not is decided by the inline script in header.php via the
   [hidden] attribute; this file only styles it. [hidden] must win over
   the unconditional display:flex below, hence the dedicated rule. */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0e1733;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity .5s ease, visibility .5s ease;
}
#app-splash[hidden] { display: none; }
#app-splash.splash-fade {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#app-splash img {
  width: 120px;
  height: auto;
  animation: splashPop .5s cubic-bezier(.34,1.56,.64,1) both,
             splashBreathe 1.8s .6s ease-in-out infinite;
}
#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: #f98603;
  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 splashBreathe {
  0%, 100% { transform: scale(1);    opacity: 1;  }
  50%      { transform: scale(1.04); opacity: .88; }
}
@keyframes splashBounce {
  0%, 80%, 100% { transform: scale(.85); opacity: .4; }
  40%            { transform: scale(1.1); opacity: 1;  }
}

/* ── First-launch onboarding overlay ──────────────────────────
   Visibility gated by [hidden] the same way as #app-splash above —
   same reason: the unconditional display:flex below needs an explicit
   [hidden] rule to lose to it. */
.ml-onboarding {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: #0e1733;
  display: flex;
  flex-direction: column;
  padding: 78px 24px calc(40px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
  overflow-y: auto;
}
.ml-onboarding[hidden] { display: none; }
.ml-onboarding.ml-onb-in { opacity: 1; transform: translateY(0); }
.ml-onboarding.ml-onb-fade { opacity: 0; pointer-events: none; }
.ml-onb-wordmark { font: 900 1.5rem/1 'Hanken Grotesk', sans-serif; letter-spacing: -.04em; color: #fff; flex: none; }
.ml-onb-wordmark span { color: #f98603; }
.ml-onb-body { margin-top: auto; }
.ml-onb-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 100px;
  background: rgba(255,255,255,.1);
  font: 700 .7rem 'Hanken Grotesk', sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.68);
}
.ml-onb-h1 {
  margin: 16px 0 10px;
  font: 900 2.1rem/1.05 'Hanken Grotesk', sans-serif;
  letter-spacing: -.04em; color: #fff;
}
.ml-onb-h1 em {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  color: #f98603; letter-spacing: -.02em;
}
.ml-onb-sub {
  margin: 0 0 26px; max-width: 300px;
  font: 400 .9rem/1.6 'Hanken Grotesk', sans-serif;
  color: rgba(255,255,255,.68);
}
.ml-onb-city-label {
  margin-bottom: 10px;
  font: 700 .7rem 'Hanken Grotesk', sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.ml-onb-cities { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ml-onb-city-btn {
  cursor: pointer; padding: 9px 15px; border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,.18); background: transparent;
  color: #fff; font: 700 .82rem 'Hanken Grotesk', sans-serif;
}
.ml-onb-city-btn:active { background: rgba(255,255,255,.1); }
.ml-onb-cta { width: 100%; justify-content: center; }
.ml-onb-vendor {
  text-align: center; margin-top: 14px;
  font: 400 .78rem 'Hanken Grotesk', sans-serif;
  color: rgba(255,255,255,.42);
}
.ml-onb-vendor a { color: #f98603; font-weight: 700; }

/* ── PWA install / push-opt-in bottom sheets ──────────────────
   Shared shell for the "Add to Home Screen" and "Enable Notifications"
   prompts fired by frontend/js/pwa-install.js. */
.ml-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 9700;
  background: rgba(14,23,51,.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
}
.ml-sheet-overlay.ml-sheet-in { opacity: 1; }
.ml-sheet {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 10px 24px calc(28px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  text-align: center;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.ml-sheet-overlay.ml-sheet-in .ml-sheet { transform: translateY(0); }
.ml-sheet-handle { width: 36px; height: 4px; background: #e4e8f2; border-radius: 2px; margin: 0 auto 18px; }
.ml-sheet-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: #ffe4ca; color: #a85a02;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 1.6rem; overflow: hidden;
}
.ml-sheet-icon img { width: 100%; height: 100%; object-fit: cover; }
.ml-sheet-title { font: 900 1.05rem 'Hanken Grotesk', sans-serif; letter-spacing: -.02em; margin: 0 0 8px; color: #0e1733; }
.ml-sheet-sub { font: 400 .86rem/1.55 'Hanken Grotesk', sans-serif; color: #64748b; margin: 0 0 20px; }
.ml-sheet-steps { text-align: left; display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.ml-sheet-step { display: flex; gap: 12px; align-items: flex-start; font: 400 .86rem/1.5 'Hanken Grotesk', sans-serif; color: #334155; }
.ml-sheet-step-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: #ffe4ca; color: #a85a02;
  font: 700 .74rem 'Hanken Grotesk', sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.ml-sheet-cta { width: 100%; justify-content: center; }
.ml-sheet-later {
  display: block; width: 100%; margin-top: 10px; padding: 10px;
  background: none; border: none;
  font: 700 .82rem 'Hanken Grotesk', sans-serif; color: #64748b;
  cursor: pointer;
}

/* ── Bottom nav bar ────────────────────────────────────────── */
.app-bnav {
  display: none; /* hidden on desktop */
}
.ml-action-bar { display: none; }
.mob-menu-backdrop { display: none; }

@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;
  }
  /* Pages that show a sticky action bar (cart/checkout/product) need extra
     clearance above the tab bar so page content never sits under it. */
  body.has-ml-action-bar {
    padding-bottom: calc(68px + 94px + env(safe-area-inset-bottom)) !important;
  }

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

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

  /* Mobile slide-in menu drawer (Jobs, Events, Cart, Post Job/Shop, Account) —
     opened via the "Menu" tab in the bottom app nav, not the (hidden) hamburger.
     A right-hand drawer over a dimmed backdrop, not a full-screen takeover —
     stays closed by default via its own base rule in shared.css; only
     .mob-menu.open should ever show it. */
  .mob-menu {
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(82vw, 340px);
    z-index: 9600;
    box-shadow: -8px 0 32px rgba(14,23,51,.18);
    transform: translateX(100%);
    visibility: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
    display: flex !important; /* flex layout at rest; slid off-screen + hidden when closed */
  }
  .mob-menu.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s;
  }

  /* Lock the page behind the drawer while it's open — otherwise a touch
     scroll that starts on the (non-overflowing) drawer chains through to
     the body underneath instead of staying inside the drawer. */
  body.mob-menu-locked {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
  }

  .mob-menu-backdrop {
    display: none;
    position: fixed; inset: 0;
    z-index: 9550;
    background: rgba(14,23,51,.5);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .mob-menu-backdrop.open { display: block; opacity: 1; }

  /* Top app bar — one row, sized with clamp() so it stays proportional
     across small/large phones instead of jumping at a fixed breakpoint.
     Home: full wordmark logo + location pill + cart, kept modestly sized
     since the hero below also has its own location + search.
     Every other page: icon-only emblem logo + location pill + cart,
     all on the same row — no second row, to save vertical space. */
  .nav-inner {
    justify-content: space-between !important;
    padding: 0 clamp(12px, 3.5vw, 18px) !important;
    min-height: clamp(50px, 13vw, 56px) !important;
    gap: clamp(6px, 2vw, 10px) !important;
  }
  .nav { min-height: clamp(50px, 13vw, 56px); }

  .nav .logo { display: flex !important; align-items: center; }
  .nav-logo-full { height: clamp(22px, 6vw, 28px) !important; width: auto !important; }
  .nav-logo-emblem { height: clamp(30px, 8vw, 36px) !important; width: clamp(30px, 8vw, 36px) !important; }

  /* Non-home pages: swap the wordmark for the icon-only emblem mark */
  body:not(.page-home) .nav-logo-full { display: none !important; }
  body:not(.page-home) .nav-logo-emblem { display: block !important; }

  .nav-acts {
    display: flex !important;
    align-items: center;
    gap: clamp(6px, 2vw, 10px);
  }
  .nav-acts #navUserArea { display: none !important; }

  /* Search trigger — dropped from the mobile header; reachable via the
     bottom tab bar / dedicated search page instead. */
  .nav-srch-btn { display: none !important; }

  /* Cart button — filled orange circle w/ glow, matching the app design system */
  .cart-btn {
    order: 10;
    width: clamp(32px, 8.5vw, 38px) !important;
    height: clamp(32px, 8.5vw, 38px) !important;
    background: #f98603 !important;
    border: 0 !important;
    color: #0e1733 !important;
    font-size: .95rem !important;
    box-shadow: 0 2px 14px rgba(249,134,3,.25);
  }
  .cart-btn:active { transform: scale(.92); }
  .cart-badge {
    background: #b3261e !important;
    border-color: #fff !important;
    font-family: 'IBM Plex Mono', monospace !important;
  }

  /* Home: keep the cart modest too — the header just needs to be present,
     not prominent, since the hero owns the page's visual weight. */
  .page-home .cart-btn {
    width: clamp(28px, 7.5vw, 32px) !important;
    height: clamp(28px, 7.5vw, 32px) !important;
    font-size: .82rem !important;
  }

  /* Location — compact pill in the nav row showing the actual place name,
     not just an icon (no separate row). Text truncates with an ellipsis
     if a city name is unusually long, and the pill is capped so it can
     never push the cart button off the edge of the screen. Shown on every
     page, including home — the header is the one place it's always
     visible, even though home's hero/onboarding also let you set it. */
  .nav-acts .location-pill {
    display: flex !important;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: clamp(110px, 34vw, 160px);
    height: clamp(32px, 8.5vw, 38px);
    padding: 0 12px 0 10px !important;
    border-radius: 100px;
    background: #fff !important;
    border: 1.5px solid #e4e8f2 !important;
    color: #0e1733 !important;
    overflow: hidden;
  }
  .nav-acts .location-pill i.fa-location-dot { color: #b3261e !important; font-size: .78rem; flex-shrink: 0; }
  .nav-acts .location-pill span {
    display: inline-block !important;
    min-width: 0;
    font-size: .74rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-acts .location-pill i.fa-chevron-down { display: block; font-size: .5rem !important; opacity: .55; flex-shrink: 0; }
  .nav-acts .location-pill:active { background: #f4f6fc !important; }

  /* 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 — flat, equal-width tabs, Font Awesome
     icons, translucent blur. Matches the app design system's tab bar. ── */
  .app-bnav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9500;
    padding: 9px 6px calc(env(safe-area-inset-bottom) + 9px);
    align-items: stretch;
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    backdrop-filter: blur(16px) saturate(1.8);
    border-top: 1px solid #e4e8f2;
  }

  .bnav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #64748b;
    text-decoration: none;
    padding: 4px 0;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    background: none;
    border: 0;
  }

  .bnav-tab i {
    font-size: 1.05rem;
    transition: transform .15s;
  }
  .bnav-tab:active i { transform: scale(.88); }

  .bnav-tab span {
    font: 700 .64rem 'Hanken Grotesk', sans-serif;
  }

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

  /* ── 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;
  }

  /* ── Sticky bottom action bar (cart/checkout/product "buy" CTA) ──
     Sits directly above the tab bar. See frontend/includes/mobile-action-bar.php. */
  .ml-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom));
    z-index: 9400;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom) * 0);
    background: #fff;
    border-top: 1px solid #e4e8f2;
    box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  }
  .ml-action-bar-total { flex: none; }
  .ml-abt-label { font: 400 .7rem 'Hanken Grotesk', sans-serif; color: #64748b; }
  .ml-abt-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.05rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #0e1733;
  }
  .ml-action-bar-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px !important;
    border-radius: 100px !important;
  }
  .ml-action-bar-btn.disabled,
  .ml-action-bar-btn:disabled {
    opacity: .5;
    pointer-events: none;
  }

  /* ── 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, #e4e8f2); 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; }

  /* ── App design-system card language ──────────────────
     Same tokens the homepage already uses (--hl-green = orange,
     --hl-ink = navy, --hl-line = #e4e8f2) — just rounder, flatter
     cards on mobile, matching the app design's shop/product cards. */
  .hl-trend-card, .hl-deal-card, .hl-shop-mini { border-radius: 16px !important; }
  .hl-trend-img, .hl-shop-mini-pic { border-radius: 16px 16px 0 0; }
  .hl-trend-price, .hl-shop-mini-mt {
    font-family: 'IBM Plex Mono', monospace !important;
    font-variant-numeric: tabular-nums;
  }
  .hl-shop-mini { border: 1px solid var(--hl-line, #e4e8f2); border-right: 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; }
}