/* Menu lateral independente do estilo principal */

.topo-menu-lateral{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:66px;
    padding:10px 18px
}

.topo-acoes{
    display:flex;
    align-items:center;
    gap:10px
}

.topo-titulo-secao{
    font-family:Georgia,serif;
    font-size:19px;
    letter-spacing:.04em;
    text-transform:uppercase
}

.barra-acoes-pagina{
    border-bottom:1px solid #e8dbc5;
    background:#fffaf0;
    box-shadow:0 2px 7px rgba(91,60,38,.05)
}

.barra-acoes-pagina-conteudo{
    display:flex;
    width:100%;
    min-height:62px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 18px
}

.barra-acoes-esquerda,
.barra-acoes-direita{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap
}

.barra-acoes-direita{
    margin-left:auto;
    justify-content:flex-end
}

.btn-voltar-topo{
    gap:7px
}

.indicador-novos-pedidos{
    position:relative;
    display:inline-flex;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:rgba(255,255,255,.42);
    transition:background .18s ease,color .18s ease,transform .18s ease
}

.indicador-novos-pedidos:hover{
    background:rgba(255,255,255,.10);
    color:rgba(255,255,255,.72)
}

.indicador-novos-pedidos.tem-novos{
    color:#fff
}

.indicador-novos-pedidos.tem-novos:hover{
    background:rgba(255,255,255,.14);
    transform:translateY(-1px)
}

.icone-sino-pedidos{
    display:grid;
    width:25px;
    height:25px;
    place-items:center
}

.icone-sino-pedidos svg{
    display:block;
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round
}

.contador-novos-pedidos{
    position:absolute;
    top:1px;
    right:0;
    display:flex;
    min-width:19px;
    height:19px;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    border:2px solid #fff;
    border-radius:999px;
    background:#d62828;
    color:#fff;
    box-shadow:0 2px 7px rgba(120,0,0,.38);
    font-size:10px;
    font-weight:800;
    line-height:1
}

.contador-novos-pedidos[hidden]{display:none}

.botao-abrir-menu{
    display:inline-flex;
    width:44px;
    height:44px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0;
    border:0;
    border-radius:11px;
    background:rgba(239,113,129,.32);
    cursor:pointer
}

.botao-abrir-menu span{
    display:block;
    width:22px;
    height:2px;
    border-radius:999px;
    background:#fff
}

body>.menu,
body>nav.menu{
    display:none!important
}

.menu-overlay{
    position:fixed;
    inset:0;
    z-index:990;
    background:rgba(27,12,15,.52);
    opacity:0;
    transition:opacity .25s ease;
    backdrop-filter:blur(2px)
}

.menu-overlay.visivel{opacity:1}

.menu-lateral{
    position:fixed;
    top:0;
    right:0;
    z-index:1000;
    display:flex;
    width:min(340px,88vw);
    height:100dvh;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    box-shadow:-10px 0 35px rgba(0,0,0,.20);
    transform:translateX(105%);
    transition:transform .25s ease
}

.menu-lateral.aberto{transform:translateX(0)}
body.menu-aberto{overflow:hidden}

.menu-lateral-topo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px;
    background:linear-gradient(90deg,var(--vinho2),var(--vinho));
    color:#fff
}

.menu-lateral-usuario{
    display:flex;
    min-width:0;
    align-items:center;
    gap:11px
}

.menu-lateral-avatar{
    display:grid;
    width:44px;
    height:44px;
    flex:0 0 44px;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:var(--vinho);
    font-family:Georgia,serif;
    font-size:22px;
    font-weight:700
}

.menu-lateral-usuario small{
    display:block;
    color:rgba(255,255,255,.75);
    font-size:12px
}

.menu-lateral-usuario strong{
    display:block;
    overflow:hidden;
    margin-top:2px;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:17px
}

.botao-fechar-menu{
    display:grid;
    width:40px;
    height:40px;
    flex:0 0 40px;
    place-items:center;
    padding:0;
    border:0;
    border-radius:10px;
    background:rgba(255,255,255,.13);
    color:#fff;
    font-size:29px;
    cursor:pointer
}

.menu-lateral-links{
    display:grid;
    flex:1;
    align-content:start;
    gap:5px;
    overflow-y:auto;
    padding:14px
}

.menu-lateral-links a{
    display:grid;
    grid-template-columns:36px 1fr;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:8px 12px;
    border-radius:11px;
    color:#35282a;
    font-size:15px;
    font-weight:700;
    text-decoration:none
}

.menu-lateral-links a:hover{
    background:#fff1ed;
    color:var(--vinho)
}

.menu-lateral-links a.ativo{
    background:var(--vinho);
    color:#fff
}

.menu-icone{
    display:grid;
    width:30px;
    height:30px;
    place-items:center;
    border-radius:8px;
    background:rgba(239,113,129,.14);
    font-size:17px;
    font-weight:800
}

.menu-lateral-links a.ativo .menu-icone{
    background:rgba(255,255,255,.16)
}

.menu-lateral-rodape{
    padding:14px;
    border-top:1px solid #eadfe1
}

.menu-sair{
    display:grid;
    grid-template-columns:36px 1fr;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:8px 12px;
    border-radius:11px;
    background:#fff1f1;
    color:#b5262f;
    font-weight:800;
    text-decoration:none
}

@media(max-width:650px){
    .topo-menu-lateral{
        min-height:60px;
        padding:8px 12px
    }

    .menu-lateral{
        width:min(330px,90vw)
    }

    .topo-titulo-secao{
        font-size:16px
    }

    .marca-logo{
        width:44px;
        height:44px;
        flex-basis:44px
    }

    .barra-acoes-pagina-conteudo{
        min-height:56px;
        padding:8px 12px
    }

    .barra-acoes-pagina .btn{
        min-height:40px;
        padding:9px 12px
    }
}

@media print{
    .barra-acoes-pagina{display:none!important}
}