.public-mobile-tabbar {
    display: none;
}

@media (max-width: 767px) {
    body.site_body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .public-mobile-tabbar {
        position: fixed;
        z-index: 1090;
        right: 0;
        bottom: 0;
        left: 0;
        min-height: calc(72px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 7px 5px calc(7px + env(safe-area-inset-bottom));
        border-top: 1px solid #e3e7ee;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -9px 24px rgba(7, 23, 71, .08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .public-mobile-tabbar a {
        min-width: 0;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 3px 1px;
        color: #596176;
        font-family: "Inter", "Nunito Sans", "Segoe UI", Arial, sans-serif;
        font-size: 9px;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .public-mobile-tabbar a i {
        width: 34px;
        height: 30px;
        display: grid;
        place-items: center;
        font-size: 19px;
        border-radius: 11px;
    }

    .public-mobile-tabbar a:hover,
    .public-mobile-tabbar a:focus-visible,
    .public-mobile-tabbar a.is-active {
        color: #f50655;
    }

    .public-mobile-tabbar a.is-active {
        font-weight: 850;
    }

    .public-mobile-tabbar a.is-active i {
        background: rgba(245, 6, 85, .09);
    }

    .public-mobile-tabbar a:focus-visible {
        outline: 2px solid rgba(245, 6, 85, .42);
        outline-offset: -2px;
        border-radius: 11px;
    }
}

@media (max-width: 340px) {
    .public-mobile-tabbar a {
        font-size: 8px;
    }

    .public-mobile-tabbar a i {
        font-size: 17px;
    }
}

@media (max-width: 767px) and (orientation: landscape) and (max-height: 520px) {
    .public-mobile-tabbar {
        min-height: calc(62px + env(safe-area-inset-bottom));
        padding-top: 3px;
        padding-bottom: calc(3px + env(safe-area-inset-bottom));
    }

    .public-mobile-tabbar a {
        min-height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-mobile-tabbar a {
        transition: none;
    }
}