:root {
    --mlc-mobile-footer-height: 0px;
    --mlc-mobile-footer-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.mlc-mobile-footer-nav {
    display: none;
}

@media (max-width: 991.98px) {
    body.mlc-has-mobile-footer-nav {
        padding-bottom: calc(var(--mlc-mobile-footer-height, 76px) + .6rem) !important;
    }

    .mlc-mobile-footer-nav {
        position: fixed !important;
        z-index: 1085 !important;
        inset: auto .45rem max(.38rem, var(--mlc-mobile-footer-safe-bottom)) .45rem !important;
        display: block !important;
        width: auto !important;
        max-width: calc(100vw - .9rem) !important;
        margin: 0 !important;
        padding: .34rem !important;
        border: 1px solid rgba(255, 255, 255, .64);
        border-radius: 1.35rem;
        background:
            linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.84));
        -webkit-backdrop-filter: blur(22px) saturate(1.35);
        backdrop-filter: blur(22px) saturate(1.35);
        box-shadow:
            0 18px 44px rgba(15, 23, 42, .20),
            0 3px 10px rgba(15, 23, 42, .08),
            inset 0 1px 0 rgba(255,255,255,.92);
        isolation: isolate;
        transform: translate3d(0, 0, 0) !important;
        contain: layout style;
    }

    .mlc-mobile-footer-nav::before {
        content: "";
        position: absolute;
        inset: .28rem;
        z-index: -1;
        border-radius: 1.08rem;
        background: rgba(255,255,255,.42);
        pointer-events: none;
    }

    .mlc-mobile-footer-nav__viewport {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        max-width: 100%;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        padding: .08rem .08rem .12rem;
    }

    .mlc-mobile-footer-nav__viewport::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .mlc-mobile-footer-nav__track {
        display: flex;
        align-items: stretch;
        width: max-content;
        min-width: 100%;
        gap: .48rem;
    }

    .mlc-mobile-footer-nav__item {
        --mlc-footer-color-a: #0ea5e9;
        --mlc-footer-color-b: #2563eb;
        position: relative;
        flex: 0 0 auto;
        min-width: 4.15rem;
        max-width: 5.8rem;
        min-height: 3.62rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .18rem;
        padding: .34rem .46rem .3rem;
        border: 1px solid color-mix(in srgb, var(--mlc-footer-color-a) 18%, white);
        border-radius: 1.05rem;
        background:
            linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.84));
        box-shadow:
            0 8px 18px color-mix(in srgb, var(--mlc-footer-color-a) 16%, transparent),
            inset 0 1px 0 rgba(255,255,255,.96);
        color: #263247 !important;
        text-decoration: none !important;
        text-align: center;
        scroll-snap-align: center;
        -webkit-tap-highlight-color: transparent;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .mlc-mobile-footer-nav__item::after {
        content: "";
        position: absolute;
        left: 22%;
        right: 22%;
        bottom: .12rem;
        height: .16rem;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--mlc-footer-color-a), var(--mlc-footer-color-b));
        opacity: .24;
        transform: scaleX(.55);
        transition: opacity .18s ease, transform .18s ease;
    }

    .mlc-mobile-footer-nav__item:active {
        transform: translateY(1px) scale(.97);
    }

    .mlc-mobile-footer-nav__item.is-active {
        border-color: color-mix(in srgb, var(--mlc-footer-color-a) 38%, white);
        box-shadow:
            0 10px 22px color-mix(in srgb, var(--mlc-footer-color-a) 28%, transparent),
            inset 0 1px 0 rgba(255,255,255,.98);
        transform: translateY(-1px);
    }

    .mlc-mobile-footer-nav__item.is-active::after {
        opacity: 1;
        transform: scaleX(1);
    }

    .mlc-mobile-footer-nav__icon {
        width: 1.92rem;
        height: 1.92rem;
        flex: 0 0 1.92rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .72rem;
        background: linear-gradient(135deg, var(--mlc-footer-color-a), var(--mlc-footer-color-b));
        color: #fff;
        box-shadow:
            0 7px 14px color-mix(in srgb, var(--mlc-footer-color-a) 34%, transparent),
            inset 0 1px 0 rgba(255,255,255,.28);
    }

    .mlc-mobile-footer-nav__icon i {
        font-size: 1rem;
        line-height: 1;
    }

    .mlc-mobile-footer-nav__title {
        display: block;
        width: 100%;
        overflow: hidden;
        color: inherit;
        font-size: .625rem;
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -.012em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mlc-mobile-footer-nav__edge {
        position: absolute;
        top: .45rem;
        bottom: .45rem;
        z-index: 2;
        width: 1rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .mlc-mobile-footer-nav__edge--start {
        left: .28rem;
        border-radius: 1rem 0 0 1rem;
        background: linear-gradient(90deg, rgba(248,250,252,.98), rgba(248,250,252,0));
    }

    .mlc-mobile-footer-nav__edge--end {
        right: .28rem;
        border-radius: 0 1rem 1rem 0;
        background: linear-gradient(270deg, rgba(248,250,252,.98), rgba(248,250,252,0));
    }

    .mlc-mobile-footer-nav.can-scroll-start .mlc-mobile-footer-nav__edge--start,
    .mlc-mobile-footer-nav.can-scroll-end .mlc-mobile-footer-nav__edge--end {
        opacity: 1;
    }

    .mlc-mobile-footer-nav.is-keyboard-open {
        display: none !important;
    }

    .mlc-pwa-install.is-visible {
        bottom: calc(var(--mlc-mobile-footer-height, 76px) + .85rem) !important;
    }

    /* Keep the frontend font-size and search controls fully above this footer. */
    body.mlc-has-mobile-footer-nav .mlc-public-accessibility {
        bottom: calc(var(--mlc-mobile-footer-height, 76px) + 1rem) !important;
        z-index: 1088 !important;
    }

    html[data-bs-theme="dark"] .mlc-mobile-footer-nav,
    body[data-theme="dark"] .mlc-mobile-footer-nav {
        border-color: rgba(148,163,184,.24);
        background: linear-gradient(135deg, rgba(15,23,42,.94), rgba(30,41,59,.90));
        box-shadow: 0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
    }

    html[data-bs-theme="dark"] .mlc-mobile-footer-nav::before,
    body[data-theme="dark"] .mlc-mobile-footer-nav::before {
        background: rgba(15,23,42,.34);
    }

    html[data-bs-theme="dark"] .mlc-mobile-footer-nav__item,
    body[data-theme="dark"] .mlc-mobile-footer-nav__item {
        border-color: rgba(148,163,184,.18);
        background: linear-gradient(180deg, rgba(51,65,85,.96), rgba(30,41,59,.92));
        color: #f8fafc !important;
        box-shadow: 0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
    }

    html[data-bs-theme="dark"] .mlc-mobile-footer-nav__edge--start,
    body[data-theme="dark"] .mlc-mobile-footer-nav__edge--start {
        background: linear-gradient(90deg, rgba(15,23,42,.98), rgba(15,23,42,0));
    }

    html[data-bs-theme="dark"] .mlc-mobile-footer-nav__edge--end,
    body[data-theme="dark"] .mlc-mobile-footer-nav__edge--end {
        background: linear-gradient(270deg, rgba(15,23,42,.98), rgba(15,23,42,0));
    }
}

@media (max-width: 380px) {
    .mlc-mobile-footer-nav {
        inset-inline: .28rem !important;
        max-width: calc(100vw - .56rem) !important;
    }

    .mlc-mobile-footer-nav__track {
        gap: .36rem;
    }

    .mlc-mobile-footer-nav__item {
        min-width: 3.82rem;
        padding-inline: .34rem;
    }
}

@media (min-width: 992px), print {
    .mlc-mobile-footer-nav {
        display: none !important;
    }

    body.mlc-has-mobile-footer-nav {
        padding-bottom: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mlc-mobile-footer-nav__item,
    .mlc-mobile-footer-nav__item::after,
    .mlc-mobile-footer-nav__edge {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}