/* ============================================================
   Universal mobile bottom navigation
   Used by every public page (layout-v1 / layout-v2 / layout-v3).
   Markup : resources/views/frontend/partials/mobile-nav.blade.php
   Items  : config/mobile-nav.php
   Hidden on desktop; shown at <= 760px only.
   ============================================================ */

.mn-tabbar{display:none}

@media (max-width:760px){
    .mn-tabbar{
        display:flex;
        position:fixed;
        left:0 !important;
        right:0 !important;
        bottom:0;
        z-index:900; /* below the theme mobile menu (999) and sticky header (1000) */
        justify-content:space-around;
        align-items:flex-end;
        background:#fff;
        border-top:1px solid var(--mn-line,#E3EBE5);
        padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
        box-shadow:0 -10px 30px -22px rgba(11,61,36,.55);
        font-family:inherit;
        direction:ltr;
    }

    .mn-tab{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:2px;
        min-width:62px;
        max-width:25%;
        padding:4px 2px;
        text-align:center;
        font-size:11px;
        font-weight:600;
        line-height:1.2;
        color:var(--mn-muted,#4B5B52);
        text-decoration:none;
        background:none;
        border:0;
    }

    .mn-tab svg{width:24px;height:24px;display:block}
    .mn-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
    .mn-tab.is-active{color:var(--mn-brand,#15803D)}
    .mn-tab:active{opacity:.75}

    .mn-tab--mid{margin-top:-24px;color:var(--mn-brand,#15803D)}
    .mn-tab--mid i{
        display:grid;
        place-items:center;
        width:54px;
        height:54px;
        border-radius:50%;
        background:var(--mn-brand,#15803D);
        color:#fff;
        border:4px solid #fff;
        box-shadow:0 10px 20px -6px rgba(21,128,61,.6);
        font-style:normal;
    }
    .mn-tab--mid svg{width:24px;height:24px}

    /* reserve space so the bar never hides page content */
    body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}

    /* keep existing floating widgets clear of the bar */
    .spotmv-wa-widget{bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important}
    #cartIconWrapper{bottom:calc(88px + env(safe-area-inset-bottom,0px))}

    /* cookie notice sits above the bar instead of hiding it */
    .cookie-consent{bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important}
}