.mv-bnav {
    display: none;
}

@media (max-width: 767px) {
    .mv-bnav {
        display: block;
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
        z-index: 60;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 1.625rem;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        opacity: 1;
        transform: translateY(0);
        transition: opacity 220ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }

    .mv-bnav.is-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 1rem));
    }

    body[data-ui-scope="dashboard"] .mv-bnav,
    body[data-ui-scope="checkout"] .mv-bnav,
    body.menu-kiosk-body .mv-bnav,
    body:has(.cart-flow__mobilebar) .mv-bnav,
    body:has(.checkout-flow__mobilebar) .mv-bnav,
    body:has(.mv-pd-mobilebar) .mv-bnav {
        display: none;
    }

    body[data-store-theme="dark"] .mv-bnav {
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(15, 23, 42, 0.86);
        box-shadow: 0 12px 30px rgba(2, 6, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .mv-bnav__row {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0.2rem 0.375rem;
    }

    .mv-bnav__tab {
        position: relative;
        display: flex;
        min-width: 0;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        padding: 0.15rem 0.125rem;
        color: #6b7280;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        transition: color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    body[data-store-theme="dark"] .mv-bnav__tab {
        color: #94a3b8;
    }

    .mv-bnav__tab:active {
        transform: translateY(1px) scale(0.98);
    }

    .mv-bnav__icon {
        position: relative;
        display: grid;
        width: 2.25rem;
        height: 2.25rem;
        place-items: center;
        border-radius: 999px;
        transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mv-bnav__tab i {
        font-size: 1.45rem;
        line-height: 1;
        position: relative;
        z-index: 1;
    }

    /* Barra so com icones — esconde os rotulos de texto */
    .mv-bnav__tab span:last-child {
        display: none;
    }

    /* Aba ativa: so o proprio icone ganha a cor da loja (sem circulo de fundo) */
    .mv-bnav__tab.is-active,
    .mv-bnav__tab.is-active .mv-bnav__icon {
        color: var(--brand-primary, #f97316);
    }

    .mv-bnav__fab {
        display: flex;
        flex: 0 0 auto;
        transform: translateY(-1.3rem);
        flex-direction: column;
        align-items: center;
        color: var(--brand-primary, #f97316);
        text-decoration: none;
    }

    .mv-bnav__fab-circle {
        position: relative;
        display: grid;
        width: 3.4rem;
        height: 3.4rem;
        place-items: center;
        border: 4px solid #fff;
        border-radius: 999px;
        background: var(--brand-primary, #f97316);
        color: #fff;
        box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary, #f97316) 45%, transparent);
    }

    body[data-store-theme="dark"] .mv-bnav__fab-circle {
        border-color: #0f172a;
    }

    .mv-bnav__fab-circle i {
        font-size: 1.55rem;
        line-height: 1;
    }

    /* Barra so com icones — esconde o rotulo do carrinho */
    .mv-bnav__fab-cap {
        display: none;
    }

    .mv-bnav__badge {
        position: absolute;
        top: -0.125rem;
        right: -0.125rem;
        display: grid;
        min-width: 1.25rem;
        height: 1.25rem;
        place-items: center;
        padding: 0 0.25rem;
        border: 2px solid #fff;
        border-radius: 999px;
        background: #fff;
        color: var(--brand-primary, #f97316);
        font-size: 0.69rem;
        font-weight: 800;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    }

    body[data-store-theme="dark"] .mv-bnav__badge {
        border-color: #0f172a;
    }

    @keyframes mv-fab-bump {
        0% { transform: scale(1); }
        32% { transform: scale(1.2); }
        58% { transform: scale(0.92); }
        100% { transform: scale(1); }
    }

    @keyframes mv-badge-pop {
        0% { transform: scale(1); }
        42% { transform: scale(1.55); }
        100% { transform: scale(1); }
    }

    .mv-bnav__fab.bump .mv-bnav__fab-circle {
        animation: mv-fab-bump 0.46s ease;
    }

    .mv-bnav__fab.bump .mv-bnav__badge {
        animation: mv-badge-pop 0.46s ease;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .mv-bnav__tab,
    .mv-bnav,
    .mv-bnav__fab.bump .mv-bnav__fab-circle,
    .mv-bnav__fab.bump .mv-bnav__badge {
        animation: none;
        transition: none;
    }
}