/*
 * Mobile Bottom Menu - Glassmorphism
 * Visible under 850px width
 */

:root {
  --mbm-height: 78px; /* slightly taller for bigger icons */
  --mbm-gap: 4px;
  --mbm-radius: 16px;
  --mbm-bg: rgba(255, 255, 255, 0.76);
  --mbm-border: rgba(255, 255, 255, 0.25);
  --mbm-hover: rgba(255, 255, 255, 0.22);
  --mbm-active-bg: rgba(173, 0, 0, 0.12); /* brand-ish accent */
  --mbm-fg: #111;
  --mbm-fg-muted: #333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mbm-bg: rgba(15, 16, 18, 0.55);
    --mbm-border: rgba(255, 255, 255, 0.1);
    --mbm-hover: rgba(255, 255, 255, 0.08);
    --mbm-active-bg: rgba(173, 0, 0, 0.25);
    --mbm-fg: #f5f5f5;
    --mbm-fg-muted: #d7d7d7;
  }
}

/* Override with site's dark mode (Dracula plugin or manual dark class) */
html.dark:root,
html[data-dracula-scheme="dark"]:root {
  --mbm-bg: rgba(15, 16, 18, 0.55);
  --mbm-border: rgba(255, 255, 255, 0.1);
  --mbm-hover: rgba(255, 255, 255, 0.08);
  --mbm-active-bg: rgba(173, 0, 0, 0.25);
  --mbm-fg: #f5f5f5;
  --mbm-fg-muted: #d7d7d7;
}

/* Light mode override (when user has dark browser but light mode is enabled) */
html:not(.dark):root,
html:not([data-dracula-scheme="dark"]):root {
  --mbm-bg: rgba(255, 255, 255, 0.76);
  --mbm-border: rgba(255, 255, 255, 0.25);
  --mbm-hover: rgba(255, 255, 255, 0.22);
  --mbm-active-bg: rgba(173, 0, 0, 0.12);
  --mbm-fg: #111;
  --mbm-fg-muted: #333;
}

/* Hidden by default on large screens (also inline style sets display:none for FOUC safety) */
#mg-mobile-bottom-nav { display: none; }

/* Never show on cart/checkout (including Flux Checkout) */
body.woocommerce-cart #mg-mobile-bottom-nav,
body.woocommerce-checkout #mg-mobile-bottom-nav,
body.fc-checkout #mg-mobile-bottom-nav,
body.flux-checkout #mg-mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 850px) {
  /* push page content up so bar doesn't cover CTAs */
  body.has-mobile-bottom-nav {
    padding-bottom: calc(var(--mbm-height) + env(safe-area-inset-bottom, 0px));
  }

  #mg-mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 10px; /* floating a bit above the edge */
    transform: translateX(-50%);
    z-index: 9999;

    /* layout */
    width: min(680px, calc(100% - 20px));
    padding: 8px calc(8px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));

    /* glassmorphism */
    background: var(--mbm-bg);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid var(--mbm-border);
    border-radius: var(--mbm-radius);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18), 0 6px 12px rgba(0,0,0,0.12);

    /* show (override inline hidden) */
    display: block !important;
  }

  #mg-mobile-bottom-nav .mg-mbm-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--mbm-gap);
  }

  #mg-mobile-bottom-nav .mg-mbm-item {
    flex: 1 1 0%;
    margin-bottom: 0px;
  }

  #mg-mobile-bottom-nav .mg-mbm-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: calc(var(--mbm-radius) - 6px);
    color: var(--mbm-fg);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    outline: none;
  }

  #mg-mobile-bottom-nav .mg-mbm-link:hover,
  #mg-mobile-bottom-nav .mg-mbm-link:focus-visible {
    background: var(--mbm-hover);
  }

  #mg-mobile-bottom-nav .mg-mbm-link[aria-current="page"] {
    background: var(--mbm-active-bg);
    color: #ad0000;
  }

  #mg-mobile-bottom-nav .mg-mbm-icon { width: 24px; height: 24px; line-height: 1; }

  #mg-mobile-bottom-nav .mg-mbm-label {
    font-size: 10px;
    line-height: 1;
    color: var(--mbm-fg-muted);
    white-space: nowrap;
  }
}