/* Mobile bottom tab bar (nav/_bottom_tabs.php). Loaded only when Admin > Homepage Manager > "Mobile bottom tab bar" = Show.
 * To remove it: switch that setting to Hide - this file and the markup are then no longer output. */
.mob-tabs { display: none; }

@media (max-width: 992px) {
    .mob-tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10005;               /* above page content, below the slide-in menu (10020) and its overlay (10015) */
        display: flex;
        background: #fff;
        border-top: 1px solid #e8ebef;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .07);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mob-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 60px;
        padding: 6px 4px 4px;
        border: 0;
        background: transparent;
        color: #6b7280;
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.1;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    .mob-tab svg { display: block; }
    .mob-tab:hover, .mob-tab:focus { color: #374151; text-decoration: none; outline: none; }
    .mob-tab.active { color: #22a06b; font-weight: 700; }
    .mob-tab.active::before {          /* small bar above the active tab */
        content: "";
        position: absolute;
        top: 0;
        left: 28%;
        right: 28%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: #22a06b;
    }
    .mob-tab-icon { position: relative; display: inline-flex; }
    .mob-tab-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background: #fe2e3e;
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* keep the end of the page and floating buttons clear of the bar */
    body.has-bottom-tabs { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    body.has-bottom-tabs .scrollup { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    body.has-bottom-tabs .cookies-warning { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}