/**
 * Persistent mobile bottom navigation, per master spec § "GLOBAL
 * NAVIGATION": Home, Search, Compare, Bonuses, Account. Visible only
 * below the desktop nav's breakpoint; see Nav.css.
 */

.ww-mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .ww-mobile-bottom-nav {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: var(--ww-z-mobile-bottom-nav);
        background: var(--wp--preset--color--surface);
        border-top: var(--ww-border-width) solid var(--ww-border-color);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Push page content clear of the fixed bar. */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
    }
}

.ww-mobile-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 56px;
    color: var(--wp--preset--color--muted);
    font-size: var(--wp--preset--font-size--caption);
    font-weight: 600;
}

.ww-mobile-bottom-nav__item:hover,
.ww-mobile-bottom-nav__item:focus-visible,
.ww-mobile-bottom-nav__item[aria-current="page"] {
    color: var(--wp--preset--color--accent);
}

.ww-mobile-bottom-nav__icon {
    width: 22px;
    height: 22px;
}