/* =====================================================
   JR MOTOS MOTO CAFÉ
   STYLE.CSS
   PARTE 1
=====================================================*/

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#090909;
    color:#fff;
    font-family:'Poppins',sans-serif;
}

/* =====================================================
   HERO
=====================================================*/

.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px;
    background:linear-gradient(180deg,#000,#111);
    border-bottom:3px solid #d6a300;
}

.logo{
    width:420px;
    max-width:90%;
    margin-bottom:30px;
}

.hero h1{
    font-size:70px;
    color:#d6a300;
    margin-bottom:15px;
}

.hero p{
    font-size:22px;
}

.sub{
    max-width:900px;
    margin-top:20px;
    line-height:1.7;
    opacity:.9;
}

/* =====================================================
   BOTÕES
=====================================================*/

.botao{
    display:inline-block;
    margin-top:40px;
    padding:18px 40px;
    background:#d6a300;
    color:#000;
    text-decoration:none;
    font-size:22px;
    font-weight:bold;
    border-radius:50px;
    transition:.3s;
}

.botao:hover{
    background:#f0c33c;
    transform:translateY(-3px);
}

/* =====================================================
   MENU
=====================================================*/

.menu{
    position:sticky;
    top:82px;
    z-index:9998;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding:15px 20px;
    background:rgba(15,15,15,.95);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(214,163,0,.25);
    box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.menu a{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    background:#1a1a1a;
    border:1px solid #333;
    border-radius:999px;
    color:#d6a300;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:.3s;
    white-space:nowrap;
}

.menu a:hover,
.menu a.active{
    background:#d6a300;
    color:#000;
    transform:translateY(-2px);
}

/* =====================================================
   CONTAINER
=====================================================*/

.container{
    width:95%;
    max-width:1200px;
    margin:auto;
    padding:50px 0;
}

section{
    margin-bottom:70px;
    scroll-margin-top:130px;
}

h2{
    font-size:42px;
    color:#d6a300;
    margin-bottom:25px;
    padding-bottom:10px;
    border-bottom:2px solid #333;
}

/* =====================================================
   CARDS
=====================================================*/

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
    margin-top:30px;
}

.card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#181818;
    border:2px solid #d6a300;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.45);
    transition:.35s;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 30px rgba(214,163,0,.25);
}

/* FOTO */

.foto-produto{

    width:100%;

    height:110px;

    object-fit:cover;

    object-position:center center;

    display:block;

    background:#111;

}

/* TEXTO */

.card h3{
    padding:20px 20px 8px;
    font-size:28px;
    color:#fff;
    line-height:1.2;
}

.card p{
    padding:0 20px;
    color:#ddd;
    line-height:1.5;
    flex:1;
}

/* PREÇO */

.valor{
    padding:15px 20px 20px;
    font-size:30px;
    font-weight:bold;
    color:#d6a300;
}

/* =====================================================
   LISTA
=====================================================*/

.item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid #2c2c2c;
    transition:.25s;
}

.item:hover{
    padding-left:10px;
    background:#111;
}

.item span{

    color:#fff;

    flex:1;

    font-size:15px;

    font-weight:500;

}

.item strong{

    color:#d6a300;

    min-width:70px;

    text-align:right;

    font-size:18px;

}

/* =====================================================
   FOOTER
=====================================================*/

footer{
    margin-top:80px;
    padding:60px 20px;
    background:#000;
    border-top:3px solid #d6a300;
    text-align:center;
}

footer h3{
    color:#d6a300;
    font-size:34px;
    margin-bottom:20px;
}

footer p{
    margin:8px 0;
    color:#bbb;
    font-size:18px;
}

/* =====================================================
   SCROLL
=====================================================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:#d6a300;
    border-radius:10px;
}

/* =====================================================
   PESQUISA
=====================================================*/

.pesquisa{
    position:sticky;
    top:0;
    z-index:9999;
    background:#000;
    padding:15px;
    border-bottom:2px solid #d6a300;
    display:flex;
    justify-content:center;
    align-items:center;
}

.campo-busca{
    position:relative;
    width:100%;
    max-width:900px;
}

.campo-busca input{
    width:100%;
    padding:18px 55px 18px 20px;
    background:#111;
    color:#fff;
    border:2px solid #d6a300;
    border-radius:40px;
    outline:none;
    font-size:20px;
    transition:.3s;
}

.campo-busca input::placeholder{
    color:#888;
}

.campo-busca input:focus{
    box-shadow:0 0 15px rgba(214,163,0,.35);
}

#limparBusca{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    display:none;
    cursor:pointer;
    color:#999;
    font-size:22px;
    transition:.3s;
    user-select:none;
}

#limparBusca:hover{
    color:#d6a300;
}

/* =====================================================
   RESULTADO DA PESQUISA
=====================================================*/

#resultadoBusca{
    display:none;
    max-width:900px;
    margin:10px auto 0;
    background:#111;
    border:2px solid #d6a300;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.45);
}

.resultado{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    cursor:pointer;
    border-bottom:1px solid #333;
    transition:.25s;
}

.resultado:last-child{
    border-bottom:none;
}

.resultado:hover{
    background:#d6a300;
    color:#000;
}

/* =====================================================
   PRODUTO DESTACADO
=====================================================*/

.destacado{
    border:3px solid #d6a300 !important;
    border-radius:15px;
    background:#2a2200 !important;
    box-shadow:0 0 25px rgba(214,163,0,.60);
    transition:.3s;
}

/* =====================================================
   CARDS ESPECIAIS
=====================================================*/

.destaque{
    position:relative;
    border:2px solid #d6a300;
    overflow:hidden;
}

.destaque:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 30px rgba(214,163,0,.30);
}

.selo-favorito{
    position:absolute;
    top:12px;
    left:12px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    background:#d6a300;
    color:#000;
    border-radius:50px;
    font-size:12px;
    font-weight:bold;
    z-index:10;
}

/* =====================================================
   BOTÃO PEDIR
=====================================================*/

.btn-pedir{
    display:block;
    margin:0 20px 20px;
    padding:14px;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    text-align:center;
    border-radius:12px;
    font-size:16px;
    font-weight:bold;
    transition:.3s;
}

.btn-pedir:hover{
    background:#1fa851;
    transform:translateY(-2px);
}

/* =====================================================
   BOTÃO VOLTAR AO TOPO
=====================================================*/

#voltarTopo{
    position:fixed;
    right:20px;
    bottom:110px;

    display:none;
    align-items:center;
    gap:8px;

    padding:12px 18px;

    border:none;
    border-radius:50px;

    background:#d6a300;
    color:#000;

    font-size:16px;
    font-weight:bold;

    cursor:pointer;

    z-index:999999;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

    transition:.3s;
}

#voltarTopo:hover{
    background:#f0c33c;
    transform:translateY(-3px);
}

#voltarTopo span{
    font-size:14px;
}

/* =====================================================
   CARRINHO DE COMPRAS
=====================================================*/

#carrinhoBarra{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;

    background:#111;
    border-top:3px solid #d6a300;

    display:flex;
    justify-content:space-between;
    align-items:center;

   padding:8px 15px;

    z-index:99999;

    box-shadow:0 -10px 30px rgba(0,0,0,.45);
}

#carrinhoInfo{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    color:#fff;
    flex:1;
    font-size:14px;
}

#totalCarrinho{
    font-size:24px;
    font-weight:700;
    color:#d6a300;
}

#finalizarPedido{
    background:#25D366;
    color:#fff;
    border:none;

    padding:16px 28px;

    border-radius:12px;

    font-size:18px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;

    flex-shrink:0;
}

#finalizarPedido:hover{
    background:#1fa851;
    transform:translateY(-2px);
}

/* =====================================================
   BOTÃO ADICIONAR AO CARRINHO
=====================================================*/

.btn-carrinho{
    width:calc(100% - 40px);

    margin:8px 20px 20px;

    padding:12px;

    background:#25D366;

    color:#fff;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.btn-carrinho:hover{
    background:#1fa851;
    transform:translateY(-2px);
}

/* =====================================================
   CONTROLE DE QUANTIDADE DOS CARDS
=====================================================*/

.controle-qtd{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;

    margin:15px 20px 20px;
}

.controle-qtd button{

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:#d6a300;

    color:#000;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.controle-qtd button:hover{

    transform:scale(1.08);

}

.controle-qtd .qtd{

    min-width:25px;

    text-align:center;

    font-size:22px;

    font-weight:bold;

    color:#fff;

}

/* =====================================================
   CONTROLE DAS LISTAS
=====================================================*/

.controle-qtd-lista{

    display:flex;

    align-items:center;

    gap:8px;

}

.controle-qtd-lista button{

    width:30px;
    height:30px;

    border:none;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    cursor:pointer;

    font-weight:bold;

}

.controle-qtd-lista .qtd{

    min-width:22px;

    text-align:center;

    color:#fff;

    font-weight:bold;

}

/* =====================================================
   BOTÃO LISTA
=====================================================*/

.btn-lista{

    min-width:34px;

    height:34px;

    border:none;

    outline:none;

    background:#25D366;

    border-radius:8px;

    color:#fff;

    font-size:13px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    padding:0 12px;

    appearance:none;

    -webkit-appearance:none;

    flex-shrink:0;

}

.btn-lista:hover{

    background:#1fa851;

    transform:scale(1.08);

}

/* =====================================================
   RESPONSIVO CARRINHO
=====================================================*/

@media(max-width:768px){

#carrinhoBarra{

    padding:12px;

}

#totalCarrinho{

    font-size:20px;

}

#finalizarPedido{

    padding:10px 14px;

    font-size:14px;

    border-radius:10px;

}

.btn-carrinho{

    font-size:14px;

    padding:10px;

}

}

/* =====================================================
   PAINEL "MEU PEDIDO"
=====================================================*/

#painelPedido{

    position:fixed;

    top:0;
    right:-420px;

    width:380px;
    height:100vh;

    background:#181818;

    border-left:3px solid #d6a300;

    box-shadow:-8px 0 30px rgba(0,0,0,.45);

    display:flex;
    flex-direction:column;

    transition:.35s;

    z-index:999999;

}

#painelPedido.aberto{

    right:0;

}

/* =====================================================
   TOPO
=====================================================*/

.pedido-topo{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px;

    border-bottom:1px solid #333;

}

.pedido-topo h2{

    margin:0;

    color:#d6a300;

    font-size:24px;

    border:none;

    padding:0;

}

#fecharPedido{

    background:none;

    border:none;

    color:#fff;

    font-size:30px;

    cursor:pointer;

    transition:.3s;

}

#fecharPedido:hover{

    color:#d6a300;

}

/* =====================================================
   LISTA DOS PRODUTOS
=====================================================*/

#listaPedido{

    flex:1;

    overflow-y:auto;

    padding:15px 20px;

}

.pedido-vazio{

    margin-top:80px;

    text-align:center;

    opacity:.6;

}

/* =====================================================
   ITEM DO PEDIDO
=====================================================*/

.itemPedido{

    padding:8px 0;

    border-bottom:1px solid #333;

}

.tituloPedido{

    color:#fff;

    font-size:16px;

    font-weight:600;

    margin-bottom:8px;

}

.controlePainel{

    display:flex;

    align-items:center;

    gap:10px;

}

.controlePainel button{

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    transition:.3s;

}

.controlePainel button:hover{

    background:#1fa851;

    transform:scale(1.08);

}

.controlePainel span{

    min-width:22px;

    text-align:center;

    font-size:18px;

    font-weight:bold;

    color:#fff;

}

.subtotalPedido{

    margin-top:8px;

    color:#d6a300;

    font-size:14px;

    text-align:right;

}

/* =====================================================
   TOTAL
=====================================================*/

.pedido-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 15px;

    background:#1b1b1b;

    border-top:2px solid #444;

    font-size:18px;

    font-weight:bold;

    flex-shrink:0;

}

#valorPedido{

    color:#d6a300;

}

/* =====================================================
   DADOS DO CLIENTE
=====================================================*/

.dadosPedido{
    padding:8px 14px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.dadosPedido label{
    font-size:12px;
    color:#bbb;
    margin-bottom:2px;
}

.dadosPedido input,
.dadosPedido select,
.dadosPedido textarea{

    height:42px;
    padding:8px 12px;
    font-size:14px;
    border-radius:10px;
}

.dadosPedido textarea{
    height:55px;
    min-height:55px;
    resize:none;
}

/* =====================================================
   BOTÃO ENVIAR
=====================================================*/

#btnEnviarPedido{

    margin:12px 14px;

    height:48px;

    padding:0;

    border-radius:12px;

    font-size:17px;

    font-weight:bold;

}

#btnEnviarPedido:hover{

    background:#1fa851;

    transform:translateY(-2px);

}

/* =====================================================
   MOBILE
=====================================================*/

@media(max-width:768px){

.foto-produto{

    height:110px;

}

}

/* =====================================================
   ESPECIAIS
=====================================================*/

.especial-item{

    display:flex;
    align-items:center;
    gap:15px;

    background:#1b1b1b;

    border:2px solid #d6a300;

    border-radius:16px;

    padding:15px;

    margin-bottom:18px;

    box-shadow:0 5px 15px rgba(0,0,0,.35);

    transition:.30s;

}

.especial-item:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(214,163,0,.20);

}

.especial-item img{

    width:100px;
    height:100px;

    min-width:100px;

    object-fit:cover;

    object-position:center;

    border-radius:12px;

}

.especial-info{

    flex:1;

}

.especial-info h3{

    font-size:22px;

    color:#fff;

    margin-bottom:8px;

}

.especial-info p{

    color:#ccc;

    line-height:1.5;

    margin-bottom:10px;

}

.especial-info .valor{

    padding:0;

    font-size:24px;

}

/* =====================================================
   FAVORITOS
=====================================================*/

#favoritos .cards{

    margin-top:15px;

}

#favoritos .card{

    min-height:360px;

}

#favoritos .foto-produto{

    height:170px;

}

#favoritos h3{

    font-size:22px;

}

/* =====================================================
   MOBILE
=====================================================*/

@media(max-width:768px){

.hero{

    min-height:45vh;

    padding:20px 15px;

}

.logo{

    width:150px;

    margin-bottom:5px;

}

.hero h1{

    font-size:30px;

    margin:5px 0;

}

.hero p{

    font-size:16px;

}

.sub{

    display:block;

    font-size:14px;

    line-height:1.5;

    margin-top:8px;

}

.botao{

    font-size:15px;

    padding:12px 22px;

    margin-top:18px;

}

.container{

    width:96%;

    padding:30px 0;

}

h2{

    font-size:28px;

}

.menu{

    overflow-x:auto;

    flex-wrap:nowrap;

    justify-content:flex-start;

    gap:8px;

    padding:10px;

    scrollbar-width:none;

}

.menu::-webkit-scrollbar{

    display:none;

}

.menu a{

    flex:0 0 auto;

    font-size:14px;

    padding:8px 14px;

}

.cards{

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:12px;

}

.card{

    border-radius:12px;

    min-height:260px;

}



.card h3{

    font-size:14px;

    padding:6px 8px 2px;

    min-height:34px;

    line-height:1.1;

}

.card p{

    padding:0 8px;

    font-size:11px;

    min-height:28px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.valor{

    padding:6px 8px;

    font-size:15px;

}

.btn-carrinho{

    width:calc(100% - 16px);

    margin:6px 8px 8px;

    padding:8px;

    font-size:13px;

}

.especial-item{

    gap:10px;

    padding:10px;

}

.especial-item img{

    width:75px;

    height:75px;

    min-width:75px;

}

.especial-info h3{

    font-size:16px;

}

.especial-info p{

    font-size:12px;

}

.especial-info .valor{

    font-size:18px;

}

#voltarTopo{

    bottom:95px;

    right:15px;

    padding:10px 14px;

    font-size:14px;

}

}

/* =====================================================
   ANIMAÇÕES
=====================================================*/

.card,
.especial-item,
.btn-carrinho,
.btn-pedir,
.menu a,
.botao,
#finalizarPedido,
#btnEnviarPedido,
.btn-lista,
.controle-qtd button,
.controlePainel button{
    transition:.30s ease;
}

.card:hover{
    transform:translateY(-5px);
}

.foto-produto{
    transition:transform .35s;
}

.card:hover .foto-produto{
    transform:scale(1.05);
}

/* =====================================================
   IMAGENS PADRONIZADAS
=====================================================*/

img{
    max-width:100%;
    display:block;
}

.foto-produto,
.especial-item img{
    object-fit:cover;
    object-position:center;
}

/* =====================================================
   LINKS
=====================================================*/

a{
    color:inherit;
}

/* =====================================================
   SELEÇÃO DE TEXTO
=====================================================*/

::selection{
    background:#d6a300;
    color:#000;
}

/* =====================================================
   INPUTS
=====================================================*/

input,
select,
textarea,
button{

    font-family:inherit;

}

button{

    outline:none;

}

/* =====================================================
   REMOVER ESPAÇOS EXTRAS
=====================================================*/

.cards:last-child,
.item:last-child,
.especial-item:last-child{

    margin-bottom:0;

}

/* =====================================================
   AJUSTES GERAIS
=====================================================*/

strong{
    font-weight:700;
}

p{
    word-break:break-word;
}

/* =====================================================
   MOBILE EXTRA
=====================================================*/

@media(max-width:480px){

.logo{

    width:150px;

}

.hero h1{

    font-size:24px;

}

.cards{

    gap:10px;

}



.card h3{

    font-size:14px;

}

.card p{

    font-size:11px;

}

.valor{

    font-size:17px;

}

.btn-carrinho{

    font-size:12px;

}

.especial-item img{

    width:65px;

    height:65px;

}

.especial-info h3{

    font-size:15px;

}

.especial-info p{

    font-size:11px;

}

.especial-info .valor{

    font-size:17px;

}

}

/* =====================================================
   FIM DO STYLE.CSS
=====================================================*/

.btnFinalizar{

    width:calc(100% - 30px);

    margin:15px;

    padding:14px;

    background:#d6a300;

    color:#000;

    border:none;

    border-radius:12px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.btnFinalizar:hover{

    background:#f0c33c;

}

/* FORMULÁRIO INICIA ESCONDIDO */

.dadosPedido{
    display:none;
}

#btnEnviarPedido{
    display:none;
}

/* Esconde o botão Início quando o pedido estiver aberto */

#painelPedido.aberto ~ #voltarTopo{
    display:none !important;
}

.selo-disponivel{
    position:absolute;
    top:12px;
    right:12px;
    background:transparent;
    color:#28a745;
    font-size:22px;
    padding:0;
    line-height:1;
    z-index:10;
}

.selo-esgotado{
    position:absolute;
    top:12px;
    right:12px;
    background:#dc3545;
    color:#fff;
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
    z-index:10;
}

/*=================================
INSTALAR APP
=================================*/

#instalarApp{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.65);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:999999;

}

.instalar-conteudo{

    width:90%;
    max-width:380px;

    background:#111;

    border:2px solid #d6a300;

    border-radius:18px;

    padding:25px;

    color:#fff;

    text-align:center;

}

.instalar-conteudo h3{

    color:#d6a300;

    margin-bottom:15px;

}

.instalar-conteudo p{

    line-height:1.6;

    color:#ddd;

}

.instalar-botoes{

    display:flex;

    gap:10px;

    margin-top:25px;

}

.instalar-botoes button{

    flex:1;

    border:none;

    border-radius:10px;

    padding:14px;

    cursor:pointer;

    font-weight:bold;

}

#btnInstalar{

    background:#25D366;

    color:#fff;

}

#fecharInstalar{

    background:#555;

    color:#fff;

}

/* COMBOS SEM FOTO */

#listaCombos .card{

    min-height:auto !important;
    height:auto !important;

}

#listaCombos .foto-produto{

    display:none;

}

#listaCombos .card h3{

    margin-top:5px;

}

#listaCombos .valor{

    margin-top:25px;

}

.btn-indisponivel{
    padding:6px 12px;
    border:none;
    border-radius:6px;
    background:#666;
    color:#fff;
    font-size:12px;
    font-weight:bold;
    cursor:not-allowed;
    white-space:nowrap;
}

.status-indisponivel{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    background:#dc3545;

    color:#fff;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

    flex:none;

    width:auto;

}

.btn-lista-indisponivel{

    padding:4px 10px;

    border:none;

    border-radius:6px;

    background:#dc3545;

    color:#fff;

    font-size:12px;

    font-weight:bold;

    cursor:not-allowed;

    width:auto;

    flex:none;

}

/*==========================
ADMIN
==========================*/

.btn-admin{

position:fixed;

bottom:160px;

right:20px;

width:60px;

height:60px;

border-radius:50%;

border:none;

background:#c40000;

color:white;

font-size:28px;

cursor:pointer;

z-index:1000000;

box-shadow:0 5px 15px rgba(0,0,0,.35);

}

.btn-admin:hover{

transform:scale(1.05);

}

.janela-admin{

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:92%;
    max-width:500px;

    max-height:85vh;

    background:#fff;

    border-radius:15px;

    display:none;

    flex-direction:column;

    overflow:hidden;

    z-index:1000000;

    box-shadow:0 10px 35px rgba(0,0,0,.4);

}

.admin-topo{

background:#111;

color:white;

padding:15px;

display:flex;

justify-content:space-between;

align-items:center;

}

.admin-topo h2{

margin:0;

font-size:22px;

}

.admin-topo button{

background:none;

border:none;

color:white;

font-size:22px;

cursor:pointer;

}

.admin-conteudo{

    flex:1;

    overflow-y:auto;

    padding:20px;

}

/* ==========================
   LOGIN ADMINISTRADOR
========================== */

.login-admin{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.login-box{
    width:90%;
    max-width:380px;
    background:#fff;
    border-radius:15px;
    padding:25px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.login-box h2{
    margin-top:0;
    color:#b30000;
}

.login-box input{
    width:100%;
    padding:12px;
    margin:20px 0;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:18px;
    box-sizing:border-box;
}

.login-botoes{
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.login-botoes button{
    flex:1;
    padding:12px;
    border:none;
    border-radius:8px;
    font-size:16px;
    cursor:pointer;
}

#cancelarAdmin{
    background:#777;
    color:#fff;
}

#entrarAdmin{
    background:#b30000;
    color:#fff;
}

/*==========================
MENU ADMIN
==========================*/

.menu-admin{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 18px;

    margin-bottom:10px;

    border:none;

    border-radius:10px;

    background:#1b1b1b;

    color:#fff;

    font-size:17px;

    cursor:pointer;

    transition:.25s;

}

.menu-admin:hover{

    background:#c40000;

    transform:translateX(4px);

}

.menu-admin span{

    font-size:24px;

    color:#d6a300;

}

#listaAdmin{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.item-admin{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#1b1b1b;

    color:#fff;

    padding:12px;

    border-radius:8px;

    transition:.2s;

}

.editar-admin{

    background:#d6a300;

    border:none;

    padding:8px 12px;

    border-radius:8px;

    cursor:pointer;

    font-weight:bold;

}

#editarProduto label{

    display:flex;

    align-items:center;

    gap:8px;

    color:#222;

    font-size:16px;

    font-weight:600;

    margin-top:10px;

}

#editarProduto input[type="checkbox"]{

    width:18px;

    height:18px;

}

.selo-promocao{

    position:absolute;

    top:45px;

    left:10px;

    background:#d60000;

    color:#fff;

    padding:5px 10px;

    border-radius:8px;

    font-size:12px;

    font-weight:bold;

    z-index:20;

}

.preco-antigo{

    text-decoration: line-through;

    color:#888;

    margin-right:8px;

    font-size:15px;

    font-weight:normal;

}

.desconto-promocao{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin:10px auto;

    padding:6px 12px;

    background:#d60000;

    color:#fff;

    border-radius:20px;

    font-size:13px;

    font-weight:bold;

}

/* ===== Painel Admin ===== */

.item-admin.admin-promocao{

    background:#ffe5e5;
    border-left:6px solid #ff2d2d;
    color:#222;

}

.item-admin.admin-indisponivel{

    background:#ececec;
    border-left:6px solid #666;
    color:#666;

    opacity:.75;

}

.item-admin.admin-promocao-indisponivel{

    background:#fff2d8;
    border-left:6px solid #ff9800;

}

.item-admin.admin-promocao span{

    color:#222;
    font-weight:700;

}

.item-admin.admin-indisponivel span{

    color:#666;

}

.item-admin.admin-promocao-indisponivel{

    background:#fff3d8;
    border-left:6px solid #ff9800;

}

.item-admin.admin-promocao-indisponivel span{

    color:#222;
    font-weight:700;

}
/* ===== Promoção na lista ===== */

.item{

    position:relative;

}

.selo-promocao-lista{

    position:absolute;

    top:8px;

    left:8px;

    background:#d60000;

    color:#fff;

    padding:4px 8px;

    border-radius:8px;

    font-size:11px;

    font-weight:bold;

    z-index:10;

}

.desconto-promocao-lista{

    display:inline-block;

    margin-top:8px;

    background:#d60000;

    color:#fff;

    padding:5px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

}
.nome-promocao{

    color:#d60000;

    font-weight:bold;

}

.nome-promocao::before{

    content:"🔥 ";

}

.desconto-promocao-lista{

    display:inline-block;

    background:#d60000;

    color:#fff;

    padding:4px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

    margin-top:6px;

}

function carregarLista(categoria,id){

    const area = document.getElementById(id);

    if(!area) return;

    area.innerHTML = "";

    produtos
    .filter(p => {

        return (
            p.categoria === categoria ||
            (categoria === "salgados" &&
             p.nome === "4 Pães de Queijo" &&
             p.categoria === "favoritos")
        );

    })

    .forEach(produto => {

        let disponibilidade = produto.disponivel;

        const favorito = produtos.find(p =>
            p.categoria === "favoritos" &&
            p.nome === produto.nome
        );

        if(favorito){
            disponibilidade = favorito.disponivel;
        }

        area.innerHTML += `

<div class="item">

<div class="info-item">

<span class="${produto.promocao ? 'nome-promocao' : ''}">

${produto.promocao ? '🔥 PROMOÇÃO • ' : ''}

${produto.nome}

</span>

${produto.promocao ? `
<div class="desconto-promocao-lista">
💰 ECONOMIZE ${Math.round((1 - (produto.precoPromocional / produto.preco)) * 100)}%
</div>
` : ""}

</div>

<div class="valor-item">

${produto.promocao ? `
<span class="preco-antigo">
R$ ${produto.preco.toFixed(2).replace(".",",")}
</span>

<strong class="preco-atual">
R$ ${produto.precoPromocional.toFixed(2).replace(".",",")}
</strong>
` : `
<strong>
R$ ${produto.preco.toFixed(2).replace(".",",")}
</strong>
`}

</div>

${disponibilidade ? `

<button
class="btn-lista"
data-produto="${produto.nome}"
data-preco="${produto.promocao ? produto.precoPromocional : produto.preco}">
🛒 Adicionar
</button>

` : `

<button class="btn-lista-indisponivel" disabled>
Indisponível
</button>

`}

</div>

`;

    });

}
.texto-promocao{

    display:inline-block;

    margin-top:6px;

    background:#d60000;

    color:#fff;

    padding:4px 10px;

    border-radius:14px;

    font-size:11px;

    font-weight:bold;

    width:max-content;

}

.wifi-card{

    max-width:340px;

    margin:18px auto;

    padding:16px;

    border-radius:16px;

    background:linear-gradient(180deg,#1b1b1b,#111);

    border:2px solid #ff9800;

    box-shadow:0 6px 18px rgba(0,0,0,.30);

    color:#fff;

    text-align:center;

}

.wifi-icon{

    font-size:32px;

    margin-bottom:6px;

}

.wifi-card h2{

    color:#ff9800;

    font-size:24px;

    margin:5px 0;

}

.wifi-card p{

    color:#ddd;

    font-size:15px;

    margin:8px 0 14px;

    line-height:1.4;

}

.wifi-info{

    background:#222;

    border-radius:10px;

    padding:8px;

    margin:10px 0;

}

.wifi-info strong{

    display:block;

    color:#666;

    font-size:14px;

    margin-bottom:5px;

}

.wifi-info span{

    display:block;

    color:#fff;

    font-size:17px;

    font-weight:600;

}

.btn-wifi,
.btn-copiar{

    width:100%;

    padding:10px;

    border:none;

    border-radius:10px;

    background:#ff9800;

    color:#111;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    margin-top:10px;

}

.btn-wifi:hover,
.btn-copiar:hover{

    transform:scale(1.03);

}

.wifi-senha{

    display:none;

    margin-top:15px;

}

.wifi-bar{

    max-width:420px;

    margin:18px auto;

    background:#1b1b1b;

    border:2px solid #ff9800;

    border-radius:14px;

    padding:14px;

    color:#fff;

}

.wifi-linha{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}

.wifi-titulo{

    color:#ff9800;

    font-size:20px;

    font-weight:bold;

}

.wifi-rede{

    margin-top:5px;

    color:#ddd;

    font-size:14px;

}

.senha-box{

    background:#2b2b2b;

    border-radius:10px;

    padding:10px;

    margin:15px 0;

    text-align:center;

}

.senha-box strong{

    display:block;

    color:#ff9800;

    margin-bottom:5px;

}

.senha-box span{

    color:#fff;

    font-size:18px;

    font-weight:bold;

}

.btn-wifi,
.btn-copiar{

    background:#ff9800;

    color:#111;

    border:none;

    padding:10px 16px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

}

.btn-wifi:hover,
.btn-copiar:hover{

    background:#ffb300;

}