/* ============================================================================
   MOBILE-APP POLISH SPIKE — frosted-glass nav chrome
   ----------------------------------------------------------------------------
   Loaded ONLY when $fclMobileShell is true (conditional <link> in header.php),
   and every rule is ALSO scoped under body.fcl-mobile-shell so it can never
   leak onto another page even if the file were linked elsewhere.

   Accent colour: --wl-color-primary is ONLY defined for Elite whitelabel events
   with custom colours (header.php, inside `if ($useCustomColors)`). So we fall
   back to the standard brand orange #ff7616 — NOT the legacy red #DA4453 — for
   everyone else. Elite custom-colour events tint automatically via the variable.
   Dark bar base colour is #21252a (rgb 33,37,42) — matches .theme-dark bars.
   ============================================================================ */

/* --- Frosted-glass top + bottom bars --------------------------------------- */
body.fcl-mobile-shell #header-bar,
body.fcl-mobile-shell #footer-bar {
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  transition: background-color 0.25s ease;
}
/* The bar colour follows the whitelabel/Elite bar colour (--wl-mobile-top-bar /
   --wl-mobile-bottom-bar), at ~82% so the blur still reads. Falls back to #21252a. */
body.fcl-mobile-shell #header-bar {
  background-color: color-mix(in srgb, var(--wl-mobile-top-bar, #21252a) 82%, transparent) !important;
}
body.fcl-mobile-shell #footer-bar {
  background-color: color-mix(in srgb, var(--wl-mobile-bottom-bar, #21252a) 82%, transparent) !important;
}

/* During navigation, mobile Safari's backdrop-filter can show the changing content
   through the translucent bar before it repaints (the "flashing text" behind the bar).
   Make the bars effectively opaque while a page is loading, then fade back to glass. */
body.fcl-mobile-shell.fcl-nav-loading #header-bar {
  background-color: color-mix(in srgb, var(--wl-mobile-top-bar, #1c1f24) 99%, transparent) !important;
}
body.fcl-mobile-shell.fcl-nav-loading #footer-bar {
  background-color: color-mix(in srgb, var(--wl-mobile-bottom-bar, #1c1f24) 99%, transparent) !important;
}

body.fcl-mobile-shell #header-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

body.fcl-mobile-shell #footer-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28) !important;
}

/* --- Solid fallback where backdrop-filter is unsupported ------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.fcl-mobile-shell #header-bar {
    background-color: color-mix(in srgb, var(--wl-mobile-top-bar, #21252a) 97%, transparent) !important;
  }
  body.fcl-mobile-shell #footer-bar {
    background-color: color-mix(in srgb, var(--wl-mobile-bottom-bar, #21252a) 97%, transparent) !important;
  }
}

/* --- Sliding active-tab pill (single shared element) ----------------------- */
/* One element animates its position/width to the active item, so the marker
   SLIDES between tabs (friefamilier-style) instead of blinking. Positioned by
   window.fclPositionNavPill() in custom.js. The icon/label colour itself is
   still handled by dynamic-colors.php (.active-nav -> wl primary). */
body.fcl-mobile-shell #footer-bar a { transition: color .2s ease; }
body.fcl-mobile-shell #footer-bar .fcl-nav-pill {
  position: absolute;
  top: 6px;
  left: 0;
  width: 0;
  height: 50px; /* tall enough to fully contain icon + label (was clipping the label) */
  border-radius: 14px;
  /* Subtle accent tint (uses the whitelabel/brand colour); falls back to brand orange */
  background: color-mix(in srgb, var(--wl-color-primary, #ff7616) 22%, transparent);
  z-index: 0; /* behind icon/label which sit at z-index:2 in style.css */
  pointer-events: none;
  opacity: 0;
  transform: translateX(0);
  /* Own compositing layer so the slide animates on the GPU and does NOT invalidate
     the bar's backdrop-filter every frame (that was the glass "popping in"/clunk). */
  will-change: transform, width;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              width .34s cubic-bezier(.22, 1, .36, 1),
              opacity .2s ease;
}

/* --- Modern login / register pill buttons (guest header) ------------------- */
body.fcl-mobile-shell #header-bar .btn,
body.fcl-mobile-shell .public-login-btn {
  border-radius: 999px !important;
  border: 1px solid var(--wl-color-primary, #ff7616) !important;
  color: var(--wl-color-primary, #ff7616) !important;
  padding: 6px 16px !important;
  transition: background .18s ease, color .18s ease, transform .08s ease;
}
body.fcl-mobile-shell #header-bar .btn:active,
body.fcl-mobile-shell .public-login-btn:active {
  transform: scale(.96);
}

/* --- Floating (detached) bottom bar — toggled per-event in admin_menubarlogo - */
body.fcl-mobile-shell.fcl-floating-nav #footer-bar {
  left: 12px !important;
  right: 12px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  height: 62px !important;
  min-height: 62px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden; /* clip the sliding pill to the rounded corners */
}

/* Many-item (staff) bar: keep it floating but scroll sideways instead of cramming icons */
body.fcl-mobile-shell.fcl-nav-scroll #footer-bar {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  justify-content: flex-start !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* Edge fade: the ICONS fade into the bar colour at the left/right edges (the bar itself
   stays solid). Sticky pseudo-elements pinned to each edge, with negative margins so they
   overlay the icons without consuming layout width. */
body.fcl-mobile-shell.fcl-nav-scroll #footer-bar::before,
body.fcl-mobile-shell.fcl-nav-scroll #footer-bar::after {
  content: "";
  position: sticky;
  flex: 0 0 auto;
  width: 30px;
  align-self: stretch;
  z-index: 4;
  pointer-events: none;
}
body.fcl-mobile-shell.fcl-nav-scroll #footer-bar::before {
  left: 0;
  margin-right: -30px;
  background: linear-gradient(to right, var(--wl-mobile-bottom-bar, #21252a) 35%, transparent);
}
body.fcl-mobile-shell.fcl-nav-scroll #footer-bar::after {
  right: 0;
  margin-left: -30px;
  background: linear-gradient(to left, var(--wl-mobile-bottom-bar, #21252a) 35%, transparent);
}
body.fcl-mobile-shell.fcl-nav-scroll #footer-bar::-webkit-scrollbar { display: none; }
body.fcl-mobile-shell.fcl-nav-scroll #footer-bar > a { flex: 0 0 auto !important; min-width: 76px; }
/* The sliding pill is omitted on the scrollable bar (active item shown by colour) */
body.fcl-mobile-shell.fcl-nav-scroll #footer-bar .fcl-nav-pill { display: none !important; }

/* --- Native-feel touch tweaks (installed PWA) ------------------------------ */
body.fcl-mobile-shell #header-bar,
body.fcl-mobile-shell #footer-bar {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* Eliminate the ~300ms touch delay so the optimistic tap (pill slide + active
   state) fires the instant a tab is pressed, not after the browser waits to rule
   out a double-tap-zoom. */
body.fcl-mobile-shell #header-bar a,
body.fcl-mobile-shell #footer-bar a {
  touch-action: manipulation;
}

/* --- Respect reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.fcl-mobile-shell #footer-bar a,
  body.fcl-mobile-shell #footer-bar .fcl-nav-pill,
  body.fcl-mobile-shell #header-bar .btn,
  body.fcl-mobile-shell .public-login-btn {
    transition: none !important;
  }
}