/* Mobile bottom navigation (mu-plugins/social-team-pwa.php). Desktop keeps the mega menu header.
   Flat tab bar: 58px row + home-indicator safe area, 12px side padding, 24px icons,
   6px icon/label gap, 11px labels. Current page = brand blue + filled icon. */

.st-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --st-bottom-nav-h: 58px;
        --st-bottom-nav-space: calc(var(--st-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    body.has-st-bottom-nav {
        padding-bottom: var(--st-bottom-nav-space);
    }

    .st-bottom-nav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 9000;
        display: flex;
        padding: 0 12px env(safe-area-inset-bottom, 0px);
        background: #ffffff;
        border-top: 1px solid #E7EDF3;
        font-family: var(--font-primary, 'DIN Next LT Arabic', -apple-system, 'Segoe UI', Tahoma, sans-serif);
    }

    .st-bottom-nav__item {
        flex: 1 1 0;
        min-width: 0;
        height: var(--st-bottom-nav-h);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: #6B7C90;
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .st-bottom-nav__item:hover,
    .st-bottom-nav__item:focus {
        color: #2E8FC7;
    }

    .st-bottom-nav__item:focus-visible {
        outline: 2px solid #2E8FC7;
        outline-offset: -3px;
        border-radius: 10px;
    }

    .st-bottom-nav__item[aria-current="page"] {
        color: #2E8FC7;
        font-weight: 700;
    }

    .st-bottom-nav__icon {
        width: 24px;
        height: 24px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.15s ease;
    }

    .st-bottom-nav__item:active .st-bottom-nav__icon {
        transform: scale(0.9);
    }

    .st-bottom-nav__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-block: 1px;
    }

    /* Header hides while scrolling down (toggled by bottom-nav.js) */
    .has-st-bottom-nav .mega-menu-header {
        transition: transform 0.28s ease;
    }

    .has-st-bottom-nav .mega-menu-header.st-header-hidden {
        transform: translateY(-100%);
    }

    /* The bar stays visible over the full-screen mobile menus; keep their last items reachable */
    body.has-st-bottom-nav .mobile-menu-body,
    body.has-st-bottom-nav .mobile-sub-body {
        padding-bottom: calc(var(--st-bottom-nav-space) + 16px);
    }

    /* Lift floating elements above the bar */
    body.has-st-bottom-nav .whatsapp-btn,
    body.has-st-bottom-nav .scroll-to-top-btn,
    body.has-st-bottom-nav .toast {
        bottom: calc(var(--st-bottom-nav-space) + 16px);
    }

    body.has-st-bottom-nav .ec-floating-cta,
    body.has-st-bottom-nav .st-cookie-consent {
        bottom: calc(var(--st-bottom-nav-space) + 12px);
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .has-st-bottom-nav .mega-menu-header,
    .st-bottom-nav__icon {
        transition: none;
    }
}

@media print {
    .st-bottom-nav {
        display: none !important;
    }
}