/* Mobile bottom nav — same chrome as topbar / sidebar. Hidden on desktop. */

:root{
    --satoads-mobile-nav-h:0px
}

.satoads-mobile-nav{
    display:none
}

@media (max-width:1023px){
    body.satoads-has-mobile-nav{
        --satoads-mobile-nav-h:calc(64px + env(safe-area-inset-bottom,0px))
    }

    body.satoads-has-mobile-nav .satoads-shell-main{
        padding-bottom:var(--satoads-mobile-nav-h)
    }

    body.satoads-has-mobile-nav .mps-store-prefs-fab{
        bottom:calc(var(--satoads-mobile-nav-h) + 12px)
    }

    .satoads-mobile-nav{
        display:block;
        position:fixed;
        inset-inline:0;
        bottom:0;
        z-index:90;
        background:transparent;
        border:0;
        box-shadow:none;
        padding-bottom:env(safe-area-inset-bottom,0px);
        box-sizing:border-box;
        pointer-events:none;
        overflow:visible
    }

    .satoads-mobile-nav-inner{
        display:flex;
        align-items:stretch;
        justify-content:space-between;
        height:56px;
        max-width:100%;
        margin:0;
        padding:0 4px;
        box-sizing:border-box;
        pointer-events:auto;
        position:relative;
        overflow:visible;
        background:var(--satoads-header-bg,var(--satoads-bg,#fafaf7));
        border-top:1px solid var(--satoads-hairline,var(--satoads-border,#e5e5e5))
    }
    .satoads-mobile-nav-inner::after{
        content:"";
        position:absolute;
        inset-inline:0;
        top:100%;
        height:env(safe-area-inset-bottom,0px);
        background:inherit;
        pointer-events:none
    }

    .satoads-mobile-nav-item{
        appearance:none;
        -webkit-appearance:none;
        flex:1 1 0;
        min-width:0;
        max-width:none;
        height:100%;
        margin:0;
        padding:6px 4px 8px;
        display:inline-flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        border:0;
        border-radius:0;
        background:transparent;
        color:var(--satoads-text-muted,#7d8187);
        text-decoration:none;
        font:inherit;
        font-size:12px;
        font-weight:400;
        line-height:16px;
        letter-spacing:0;
        cursor:pointer;
        box-shadow:none;
        position:relative;
        -webkit-tap-highlight-color:transparent;
        touch-action:manipulation;
        user-select:none;
        -webkit-user-select:none;
        transition:color 0.15s ease,background 0.15s ease
    }

    .satoads-mobile-nav-item::before{
        content:"";
        position:absolute;
        top:0;
        inset-inline:18%;
        height:2px;
        border-radius:999px;
        background:transparent
    }

    .satoads-mobile-nav-item:hover,
    .satoads-mobile-nav-item:focus-visible{
        color:var(--satoads-text,#0a0a0a);
        background:transparent
    }

    .satoads-mobile-nav-item:focus-visible{
        outline:1px solid var(--satoads-text,#0a0a0a);
        outline-offset:-3px
    }

    .satoads-mobile-nav-item:active{
        background:var(--satoads-surface-2,#f0f0ed);
        transform:none;
        filter:none
    }

    .satoads-mobile-nav-item.is-active,
    .satoads-mobile-nav-item.is-open{
        color:var(--satoads-text,#0a0a0a)
    }

    .satoads-mobile-nav-item.is-active::before,
    .satoads-mobile-nav-item.is-open::before{
        background:var(--satoads-text,#0a0a0a)
    }

    .satoads-mobile-nav-ico{
        display:flex;
        align-items:center;
        justify-content:center;
        width:22px;
        height:22px;
        flex-shrink:0;
        color:inherit
    }

    .satoads-mobile-nav-ico svg{
        width:20px;
        height:20px;
        display:block;
        stroke-width:1.5
    }

    .satoads-mobile-nav-label{
        display:block;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:12px;
        font-weight:400;
        line-height:16px;
        letter-spacing:0;
        position:relative;
        top:var(--satoads-glyph-nudge,0px)
    }

    .satoads-mobile-nav-item.is-deposit{
        overflow:visible;
        z-index:2;
        gap:2px;
        height:72px;
        margin-top:-16px;
        justify-content:flex-end;
        padding:0 4px 8px;
        background:transparent;
        color:var(--satoads-text-muted,#7d8187)
    }
    .satoads-mobile-nav-item.is-deposit::before{
        display:none
    }
    .satoads-mobile-nav-item.is-deposit:hover,
    .satoads-mobile-nav-item.is-deposit:focus-visible,
    .satoads-mobile-nav-item.is-deposit:active{
        background:transparent;
        color:var(--satoads-text,#0a0a0a)
    }
    .satoads-mobile-nav-item.is-deposit:focus-visible{
        outline:none
    }
    .satoads-mobile-nav-item.is-deposit:focus-visible .satoads-mobile-nav-ico{
        outline:1px solid var(--satoads-text,#0a0a0a);
        outline-offset:2px
    }
    .satoads-mobile-nav-item.is-deposit .satoads-mobile-nav-ico{
        width:40px;
        height:40px;
        border-radius:8px;
        background:var(--satoads-header-bg,var(--satoads-bg,#fafaf7));
        color:var(--satoads-text,#0a0a0a);
        border:1px solid var(--satoads-outline-border,rgba(10,10,10,0.18));
        box-shadow:none;
        transform:translateY(-12px);
        transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease
    }
    .satoads-mobile-nav-item.is-deposit .satoads-mobile-nav-ico svg{
        width:18px;
        height:18px;
        stroke-width:1.5
    }
    .satoads-mobile-nav-item.is-deposit .satoads-mobile-nav-label{
        color:inherit;
        margin-top:-6px
    }
    .satoads-mobile-nav-item.is-deposit:hover .satoads-mobile-nav-ico,
    .satoads-mobile-nav-item.is-deposit.is-active .satoads-mobile-nav-ico{
        background:var(--satoads-surface-2,#f0f0ed);
        border-color:var(--satoads-text,#0a0a0a);
        color:var(--satoads-text,#0a0a0a)
    }
    .satoads-mobile-nav-item.is-deposit.is-active{
        color:var(--satoads-text,#0a0a0a)
    }
    .satoads-mobile-nav-item.is-deposit:active .satoads-mobile-nav-ico{
        transform:translateY(-12px);
        filter:none;
        background:var(--satoads-surface-2,#f0f0ed)
    }

    body.satoads-kb-open{
        --satoads-mobile-nav-h:0px
    }

    body.satoads-kb-open .satoads-mobile-nav{
        transform:translateY(110%);
        pointer-events:none
    }
}

@media (min-width:1024px){
    .satoads-mobile-nav{
        display:none!important
    }
}

@media (prefers-reduced-motion:reduce){
    .satoads-mobile-nav,
    .satoads-mobile-nav-item,
    .satoads-mobile-nav-item.is-deposit .satoads-mobile-nav-ico{
        transition:none
    }
    .satoads-mobile-nav-item.is-deposit:active .satoads-mobile-nav-ico{
        transform:translateY(-12px)
    }
}

@media print{
    .satoads-mobile-nav{
        display:none!important
    }
}