/* Bottom Navigation Bar - Mobile Only */
.ubitto-bottom-nav {
    display: none;
}

@media screen and (max-width: 768px) {
    .ubitto-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        z-index: 999;
        padding: 4px 0;
        padding-bottom: calc(4px + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        justify-content: space-around;
        align-items: center;
    }

    .ubitto-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #888;
        font-size: 10px;
        padding: 4px 8px;
        gap: 2px;
        flex: 1;
        transition: color 0.2s;
    }

    .ubitto-bottom-nav a.active {
        color: var(--bb-primary-color, #F9653F);
    }

    .ubitto-bottom-nav a:hover,
    .ubitto-bottom-nav a:focus {
        color: var(--bb-primary-color, #F9653F);
        text-decoration: none;
    }

    .ubitto-bottom-nav .nav-icon {
        font-size: 20px;
        line-height: 1;
    }

    .ubitto-bottom-nav .nav-label {
        font-weight: 500;
        white-space: nowrap;
    }

    /* Reserve room at the bottom so content (especially CTAs at the end of
       a page) isn't hidden behind the fixed nav. The nav itself is taller
       on iPhones with a home indicator (safe-area-inset-bottom adds ~34px),
       so we use calc() to match dynamically — was a fixed 60/70px before. */
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    .buddypanel,
    .bb-mobile-panel-inner,
    aside.buddypanel,
    .buddypanel-logo-off .buddypanel {
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }

    /* Lift fixed-bottom floating CTAs (e.g. .float-cta) above the nav so
       they don't sit on top of the bar. Nav height varies by device:
       - Android Chrome: ~62px
       - iPhone (no home indicator): ~62px + 0 safe-area = 62px
       - iPhone (home indicator): ~62px + 34px safe-area = 96px
       Add ~20px breathing room above the tallest nav. The double-specific
       html body … prefix beats any later-loaded plugin rule that might
       reset `.float-cta` (some plugins do this with !important inline JS). */
    html body .float-cta,
    body .float-cta {
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        right: 16px !important;
    }

    /* Prevent body scroll when hamburger menu is open */
    body.bb-buddypanel-toggled {
        overflow: hidden !important;
        touch-action: none;
    }

    body.bb-buddypanel-toggled .buddypanel {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Expandable submenus (Dashboard, Activity, Community, Account) */
    .ubitto-bottom-nav .nav-submenu-wrap {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ubitto-bottom-nav .nav-submenu-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #888;
        font-size: 10px;
        padding: 4px 8px;
        gap: 2px;
        transition: color 0.2s;
        cursor: pointer;
    }

    .ubitto-bottom-nav .nav-submenu-wrap.active .nav-submenu-toggle {
        color: var(--bb-primary-color, #F9653F);
    }

    .ubitto-bottom-nav .nav-submenu-menu {
        position: absolute;
        bottom: calc(100% + 8px);
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        min-width: 180px;
        max-width: calc(100vw - 24px);
        overflow: hidden;
        z-index: 1000;
    }

    /* Position dropdown per slot so it doesn't overflow off-screen.
       Dashboard (leftmost) anchors left, Account (rightmost) anchors right,
       Activity / Community in the middle anchor center. */
    .ubitto-bottom-nav .nav-submenu-wrap[data-key="dashboard"] .nav-submenu-menu {
        left: 0;
    }
    .ubitto-bottom-nav .nav-submenu-wrap[data-key="activity"] .nav-submenu-menu,
    .ubitto-bottom-nav .nav-submenu-wrap[data-key="community"] .nav-submenu-menu,
    .ubitto-bottom-nav .nav-submenu-wrap[data-key="programs"] .nav-submenu-menu {
        left: 50%;
        transform: translateX(-50%);
    }
    .ubitto-bottom-nav .nav-submenu-wrap[data-key="account"] .nav-submenu-menu {
        right: 0;
    }

    .ubitto-bottom-nav .nav-submenu-menu a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        color: #333;
        font-size: 14px;
        text-decoration: none;
        border-bottom: 1px solid #f0f0f0;
        flex-direction: row;
        white-space: nowrap;
    }

    .ubitto-bottom-nav .nav-submenu-menu a:last-child {
        border-bottom: none;
    }

    .ubitto-bottom-nav .nav-submenu-menu a:hover,
    .ubitto-bottom-nav .nav-submenu-menu a:active {
        background: #f8f8f8;
        color: var(--bb-primary-color, #F9653F);
    }

    .ubitto-bottom-nav .nav-submenu-menu a .bb-icon-l {
        font-size: 18px;
        color: #888;
    }

}

/* Lift floating buttons above mobile bottom nav — stack WhatsApp above GTranslate.
   Chrome iOS toggles its bottom toolbar on scroll, which makes these plugins
   reapply inline `bottom` via JS and beat our stylesheet. Pin them to bottom:0
   and push up via transform so plugin JS can't clobber the offset. */
@media screen and (max-width: 768px) {
    /* GTranslate is positioned by the plugin's own custom CSS (targets div#gt_float_wrapper)
       — we don't redeclare it here to avoid conflicting selectors.

       WhatsApp baseline: sit just above the bottom nav when there's no main
       CTA on the page. The high-position (above a .float-cta) is overridden
       in the :has() rule below. */
    html body .wa__btn_popup,
    body div.wa__btn_popup {
        bottom: calc(75px + env(safe-area-inset-bottom)) !important;
        right: 20px !important;
        top: auto !important;
    }
    html body .wa__popup_chat_box,
    body div.wa__popup_chat_box {
        bottom: calc(150px + env(safe-area-inset-bottom)) !important;
        right: 20px !important;
        top: auto !important;
    }
    /* When the v3-10 .float-cta pill is on the page (it sits at 100px +
       safe-area from bottom, ~50px tall), raise WhatsApp above it with
       ~10px breathing room so the two stack instead of overlapping. */
    /* Double-specific prefix + !important so we beat plugin inline JS that
       sets style.bottom = btnBottomDistance + "px" on this element at
       DOMContentLoaded. */
    html body:has(.float-cta) .wa__btn_popup,
    body:has(.float-cta) div.wa__btn_popup {
        bottom: calc(140px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
    }
    html body:has(.float-cta) .wa__popup_chat_box,
    body:has(.float-cta) div.wa__popup_chat_box {
        bottom: calc(215px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
    }
}

/* Desktop — the WhatsApp plugin ships with offset: 150 baked into its inline
   JS config, which makes the button float weirdly high in the middle of the
   right edge when there's no CTA above it. Pin to a sensible baseline at
   bottom: 20px, then raise above the .float-cta when one is present. */
@media screen and (min-width: 769px) {
    html body .wa__btn_popup {
        bottom: 20px !important;
        right: 20px !important;
    }
    html body .wa__popup_chat_box {
        bottom: 95px !important;
        right: 20px !important;
    }
    html body:has(.float-cta) .wa__btn_popup {
        bottom: 95px !important;
    }
    html body:has(.float-cta) .wa__popup_chat_box {
        bottom: 170px !important;
    }
}