/* TOGOPEPTIDE — Mobile UX layer
 * Roadmap cluster 14 (items 481, 482, 493, 494, 496, 499)
 *
 * Adds:
 *   - bottom-pinned 4-tab nav  (Shop / Cart / Search / Account)  [481]
 *   - safe-area-inset honour    [482]
 *   - sticky-bar z-index/padding adjust on PDP   [493]
 *   - "back to top" floating action button (FAB)  [496]
 *   - mobile-only PWA install bottom-banner       [499]
 *
 * All rules are gated to <= 767px, matching the shell mobile breakpoint.
 * Desktop layout is intentionally unchanged.
 */

/* ─────────────────────────────────────────────────────────────
 * Z-index stack (mobile only)
 *  bottom-tab-nav : 9999
 *  back-to-top    : 9998
 *  pwa banner     : 9997
 * ───────────────────────────────────────────────────────────── */

:root {
  --tgp-mn-height: 64px;
  --tgp-mn-bg: rgba(11, 11, 13, 0.92);
  --tgp-mn-border: rgba(255, 255, 255, 0.08);
  --tgp-mn-fg: #d6d6d9;
  --tgp-mn-fg-muted: #8c8c92;
  --tgp-mn-accent: var(--color-accent-text, var(--tgp-red, var(--tgp-brand-red, #D31E27)));
}

html[data-theme="light"] {
  --tgp-mn-bg: rgba(255, 255, 255, 0.96);
  --tgp-mn-border: rgba(0, 0, 0, 0.10);
  --tgp-mn-fg: #1a1a1c;
  --tgp-mn-fg-muted: #6a6a72;
}

/* hidden by default; shown only on small viewports */
.tgp-mobile-nav,
.tgp-back-to-top,
.tgp-mobile-install {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
 * Mobile-only block
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Reserve room so footer-nav doesn't cover content.
     - body-padding: ruimte ná main (footer enz.)
     - main-padding: ruimte ná main content
     - hero-padding: voorkomt dat hero CTAs in de bottom-nav-zone vallen
       (hero kan tot ~viewport-height groeien op mobile en is een binnen-flow
       container — eigen padding-bottom is nodig). */
  body {
    padding-bottom: calc(var(--tgp-mn-height) + env(safe-area-inset-bottom, 0px));
  }
  main {
    padding-bottom: calc(var(--tgp-mn-height) + env(safe-area-inset-bottom, 0px) + 16px);
  }
  /* Install-card op mobile: alleen op homepage tonen om productpagina's,
     winkelmandje en account-flows niet te storen. Was eerder overal aanwezig
     en blokte tap-targets op shop/category/compound. */
  body:not([data-page="home"]) .tgp-mobile-install {
    display: none !important;
  }

  /* Primary form-submit CTAs (checkout, register, contact) krijgen
     mobile-margin om te voorkomen dat de bottom-nav ze bedekt.
     Specifiek voor primary actie-buttons in form-summary contexts. */
  #pay-checkout,
  .pay-summary .btn--primary,
  .pay-summary .btn--block,
  .auth-form .btn--primary,
  .auth-form .btn--block,
  form[data-newsletter] .btn--primary {
    margin-bottom: calc(var(--tgp-mn-height) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  /* Sticky-CTAs (pay/checkout) eindigen boven de nav.
     NOTE: hero-CTA visibility op mobile = bekende HIGH tech-debt.
     Hero is intern uitgerokken (decoratie onder actions binnen hero),
     waardoor "Browse the catalog"+"Fat-Loss Stack" key-conversie CTAs
     in bottom-nav-zone vallen op viewport ≤800px. Vraagt hero-redesign
     voor mobile-first (verplaats decoratie onder actions, of compacte
     hero-variant). Geen quick CSS-fix mogelijk zonder andere pages te
     breken. Zie eindrapport. */
  .sticky-cta,
  body:not([data-page="pay"]) .pay-sticky-cta {
    bottom: calc(var(--tgp-mn-height) + env(safe-area-inset-bottom, 0px)) !important;
  }
  body[data-page="pay"] .pay-sticky-cta {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  body[data-page="pay"] .tgp-mobile-nav,
  body[data-page="pay"] .togo-bottom-nav {
    display: none !important;
  }

  /* ── Bottom-pinned 4-tab nav  [481] [482] ─────────────── */
  .tgp-mobile-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* z-index: was 9999 (magic) → --z-bottom-nav (90). Bottom-nav zit
       boven sticky-bar maar onder FABs/header/modals. */
    z-index: var(--z-bottom-nav, 90);
    background: var(--tgp-mn-bg);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
            backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--tgp-mn-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.30);
  }

  .tgp-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .tgp-mobile-nav__item {
    display: flex;
  }

  .tgp-mobile-nav__btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: var(--tgp-mn-fg-muted);
    text-decoration: none;
    width: 100%;
    min-height: 56px;             /* tap-target */
    padding: 8px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font: 500 11px/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
    position: relative;
    transition: color 160ms ease;
  }

  .tgp-mobile-nav__btn:active {
    transform: scale(0.96);
  }

  .tgp-mobile-nav__icon {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tgp-mobile-nav__label {
    font-size: 11px;
    letter-spacing: 0.01em;
  }

  /* Active tab — brand-red highlight + top hairline */
  .tgp-mobile-nav__btn[aria-current="page"],
  .tgp-mobile-nav__btn.is-active {
    color: var(--tgp-mn-accent);
  }
  .tgp-mobile-nav__btn[aria-current="page"]::before,
  .tgp-mobile-nav__btn.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    background: var(--tgp-mn-accent);
    border-radius: 0 0 2px 2px;
  }

  /* Cart badge */
  .tgp-mobile-nav__badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tgp-mn-accent);
    color: #fff;
    font: 700 10px/16px system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 0 0 2px var(--tgp-mn-bg);
    display: none;
  }
  .tgp-mobile-nav__btn.has-badge .tgp-mobile-nav__badge {
    display: block;
  }

  /* Account avatar */
  .tgp-mobile-nav__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tgp-mn-accent), #7a1620);
    color: #fff;
    font: 700 11px/24px system-ui, sans-serif;
    text-align: center;
    letter-spacing: 0;
  }

  /* ── Sticky add-to-cart bar  [493] ─────────────────────
     Existing .sticky-bar lives at bottom on PDP. With the mobile
     bottom nav now present we (a) move sticky-bar above the nav
     on mobile, and (b) ensure body has matching padding.        */
  .sticky-bar {
    bottom: calc(var(--tgp-mn-height) + env(safe-area-inset-bottom, 0px)) !important;
    /* z-index: was 9990 (magic) → --z-sticky (80). Onder bottom-nav. */
    z-index: var(--z-sticky, 80);
  }

  /* ── FAB stack lift above bottom nav  [497] ─────────────
     On mobile (≤767px) a 64px bottom-nav appears. Theme toggle
     now lives in the header, so the bottom-right cluster only
     has feedback (slot 1) + back-to-top (slot 2). The desktop
     reading/PDP back-to-top buttons are hidden in favor of
     .tgp-back-to-top to avoid two identical scroll-up circles. */
  #togo-reading-totop,
  #togo-pdp-totop {
    display: none !important;
  }

  /* ── Back-to-top FAB  [496]  (slot 2 of FAB stack on mobile) ───── */
  .tgp-back-to-top {
    display: flex;
    position: fixed;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--tgp-mn-height) + env(safe-area-inset-bottom, 0px) + 70px);
    /* z-index: was 9998 (magic) → --z-fab (600). Back-to-top is een FAB. */
    z-index: var(--z-fab, 600);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--tgp-mn-border);
    background: var(--tgp-mn-bg);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
            backdrop-filter: saturate(180%) blur(14px);
    color: var(--tgp-mn-fg);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .tgp-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .tgp-back-to-top:active {
    transform: scale(0.94);
  }

  .tgp-back-to-top svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ── Mobile-only PWA install banner  [499] ─────────────
     A *separate* lightweight install banner that shows ABOVE the
     bottom-nav when the engagement gate has passed and beforeinstallprompt
     was captured. Uses a different DOM id from togo-pwa-install.js so the
     two never collide. */
  .tgp-mobile-install {
    position: fixed;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    /* Stapelt BOVEN de feedback-FAB (die op bottom:78px staat, 44px hoog).
       FAB top = 122 vanaf bodem. Install bottom = 148 → gap = 26px tussen ze. */
    bottom: calc(var(--tgp-mn-height) + env(safe-area-inset-bottom, 0px) + 70px);
    /* z-index: was 9997 (magic) → --z-floater-prompt (650). Install
       prompt stapelt boven feedback-FAB maar onder cookie/toast. */
    z-index: var(--z-floater-prompt, 650);
    background: var(--tgp-mn-bg);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
            backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--tgp-mn-border);
    border-radius: 14px;
    padding: 12px 12px 12px 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    gap: 12px;
    color: var(--tgp-mn-fg);
    font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .tgp-mobile-install.is-visible {
    display: flex;
  }

  .tgp-mobile-install__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--tgp-mn-accent), #7a1620);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
  }

  .tgp-mobile-install__copy {
    flex: 1;
    min-width: 0;
  }
  .tgp-mobile-install__title {
    font-weight: 600;
    color: var(--tgp-mn-fg);
    margin: 0 0 1px;
    font-size: 13px;
  }
  .tgp-mobile-install__sub {
    color: var(--tgp-mn-fg-muted);
    margin: 0;
    font-size: 11.5px;
  }

  .tgp-mobile-install__cta,
  .tgp-mobile-install__close {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    font: 600 12px/1 system-ui, sans-serif;
  }
  .tgp-mobile-install__cta {
    background: var(--tgp-mn-accent);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
  }
  .tgp-mobile-install__cta:active { transform: scale(0.96); }
  .tgp-mobile-install__close {
    background: transparent;
    color: var(--tgp-mn-fg-muted);
    padding: 6px 8px;
    font-size: 18px;
    line-height: 1;
  }
  .tgp-mobile-install__close:hover { color: var(--tgp-mn-fg); }
}

/* ─────────────────────────────────────────────────────────────
 * Reduced-motion safety
 * ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tgp-back-to-top,
  .tgp-mobile-nav__btn,
  .tgp-mobile-install {
    transition: none !important;
  }
  .tgp-mobile-nav__btn:active,
  .tgp-back-to-top:active,
  .tgp-mobile-install__cta:active {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * Print: hide everything mobile-only
 * ───────────────────────────────────────────────────────────── */
@media print {
  .tgp-mobile-nav,
  .tgp-back-to-top,
  .tgp-mobile-install { display: none !important; }
}