.mobile-tabbar {
    display: none;
}

@media (max-width: 1024px) {
    .mobile-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: 60px;
        height: auto;
        background: #fff;
        border-top: 1px solid #E0E6ED;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-tabbar .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: 'Manrope', sans-serif;
        font-size: 10px;
        font-weight: 500;
        color: #B9C8D7;
        text-decoration: none;
        position: relative;
        width: 20%;
        height: 100%;
        fill: #B9C8D7;
    }

    .mobile-tabbar .tab-item.active {
        color: #0A1428;
        fill: #0A1428;
    }

    .mobile-tabbar svg {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
    }

  .mobile-tabbar .tab-badge {
        position: absolute;
        top: 6px;
        left: calc(50% - 16px);
        background: #E30016;
        color: #fff;
        font-size: 9px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        line-height: 1;
    }

    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}