.app-footer-menu {
    box-sizing: border-box;
    height: calc(var(--footer-menu-height, 70px) + env(safe-area-inset-bottom));
    min-height: calc(var(--footer-menu-height, 70px) + env(safe-area-inset-bottom));
    background-color: var(--app-bottom-color, #172554) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    isolation: isolate;
    contain: layout paint;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scroll-padding-inline: .35rem;
}

.app-footer-menu.is-carousel-overflow {
    box-shadow: inset -18px 0 18px -20px #ffffffb8, inset 18px 0 18px -20px #ffffffb8, 0 -12px 34px #02061761;
}

.app-footer-menu.is-carousel-moving .footer-menu-link {
    animation: footer-carousel-cue .7s ease both;
}

.footer-menu-link {
    box-sizing: border-box;
    height: calc(var(--footer-menu-height, 70px) - .84rem);
    min-height: min(44px, calc(var(--footer-menu-height, 70px) - .5rem));
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.footer-menu-link .menu-icon,
.footer-menu-link .menu-icon-image {
    width: min(var(--footer-icon-size, 24px), calc(var(--footer-menu-height, 70px) - .75rem));
    height: min(var(--footer-icon-size, 24px), calc(var(--footer-menu-height, 70px) - .75rem));
    flex: 0 0 min(var(--footer-icon-size, 24px), calc(var(--footer-menu-height, 70px) - .75rem));
}

.app-footer-menu.is-compact {
    gap: .16rem;
    padding-top: .18rem;
    padding-bottom: max(.18rem, env(safe-area-inset-bottom));
}

.app-footer-menu.is-compact .footer-menu-link {
    flex-direction: row;
    gap: .28rem;
    min-width: 78px;
    height: calc(var(--footer-menu-height, 40px) - .36rem);
    padding: .12rem .36rem;
    border-radius: 10px;
}

.app-footer-menu.is-compact .footer-menu-link span {
    min-width: 0;
    line-height: 1;
}

.has-app-footer .push-status {
    bottom: calc(var(--footer-menu-height, 70px) + env(safe-area-inset-bottom) + 16px);
}

.menu-icon-image,
.footer-menu-link .menu-icon-image {
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.footer-menu-link[aria-current="page"] {
    border-color: #ffffff38;
    background-color: #ffffff18;
}

@keyframes footer-carousel-cue {
    0%, 100% { opacity: 1; }
    50% { opacity: .86; }
}

@media (prefers-reduced-motion: reduce) {
    .app-footer-menu {
        scroll-behavior: auto;
    }

    .app-footer-menu.is-carousel-moving .footer-menu-link {
        animation: none;
    }
}