/* Configurações Gerais */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--index-01-fundo);
    font-family: var(--fonte-01);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Header */
.cardapio-header {
    text-align: center;
    padding: 20px 20px 10px 20px;
}

/* Estilo do link do logotipo */
.logotipo {
    display: inline-block;
    margin-bottom: 10px;
    text-decoration: none;
}

/* Controle real do tamanho da imagem do logo */
.cardapio-header img {
    width: 100px; /* < < AQUI CONFIGURAMOS O TAMANHO DO LOGOTIPO. */
    height: auto;
    display: block;
    margin: 0 auto;
}

.cardapio-header h1 {
    font-family: var(--fonte-03);
    color: var(--primeira-cor);
    font-size: 30px; /* < < AQUI CONFIGURAMOS O TAMANHO DO H1. */
    margin: 10px 0 0 0;
}

/* ======================================================================
    SLUG-CARDAPIO * INÍCIO
====================================================================== */
.slug-cardapio {
    text-align: right;
    margin: 5px 10px;
}

.slug-cardapio p {
    display: inline-block;
    background-color: transparent; /* Fundo levemente transparente. */
    color: var(--primeira-cor); /* Cor do texto "Indicação de:" */
    font-size: 0.95rem;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #DDD;
    margin: 0;
}

/* Destaque para o nome em si */
.slug-cardapio p strong {
    color: #FF6600; /* Cor apenas do NOME do parceiro */
    font-weight: bold;
    text-transform: capitalize; /* Faz o nome começar com letra maiúscula assim "Nome" e assim "Nome-Sobrenome" sucessivamente. */
}
/* ======================================================================
    FINAL * SLUG
====================================================================== */

/* Menu Flutuante */
#menu-flutuante-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

#btn-menu-cardapio {
    width: 36px;       /* Largura do botão do menu. */
    height: 36px;      /* Altura do botão do menu. */
    border-radius: 8px; /* Formato quadrado arredondado do botão do menu. */
    background-color: var(--primeira-cor); /* Cor do botão do menu. */
    color: var(--cor-branca); /* Cor do ícone do amburguer. */
    border: none;
    font-size: 18px; /* Tamanho do ícone do amburguer. */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* No Desktop, mantém o efeito de hover normalmente */
@media (hover: hover) {
    #btn-menu-cardapio:hover {
        background-color: var(--quinta-cor); /* Cor do botão do menu quando o mouse está em cima. */
        transform: scale(1.05);
    }
}

/* No Mobile/Touch, removemos o hover e usamos o :active para quando clicamos no botão. */
@media (hover: none) {
    #btn-menu-cardapio:active {
        background-color: var(--quinta-cor);
        transform: scale(0.95); /* Efeito de apertar o botão. */
    }
}

/* Ajuste para o Menu Lateral */
#menu-categorias-cardapio {
    position: fixed;
    bottom: 80px;
    right: -320px; /* Começa fora da tela. */
    background: #FFF;
    /* Ajuste de largura responsiva: */
    width: calc(100% - 40px); /* Ocupa a tela toda menos 20px de cada lado. */
    max-width: 250px; /* Mas no PC/Tablet ele para em 250px. */
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    padding: 20px;
    z-index: 1001; /* Fica acima do botão. */
}

/*
    Quando clicamos no botão hambúrguer, o JavaScript adiciona a classe .aberto ao menu. Aqui no CSS, o que controla o que aparece é o código abaixo right: 20px;
*/
#menu-categorias-cardapio.aberto {
    right: 20px; /* Faz o menu "entrar" na tela vindo da direita. O 20px significa a distância entre a borda direita do menu e a borda direita da tela. */
    left: auto; /* Se a tela for menor que o max-width + as margens, fazemos com que o menu se distancie também da esquerda. */
}

#menu-categorias-cardapio ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu-categorias-cardapio li {
    margin-bottom: 15px;
    border-bottom: 1px solid #EEE;
    padding-bottom: 10px;
}

#menu-categorias-cardapio a {
    text-decoration: none; /* Tira o sublinhado do link. */
    color: var(--primeira-cor); /* Cor do texto do menu do botão flutuante. */
    font-weight: bold;
    font-size: 16px; /* Tamanho do texto do menu do botão flutuante. */
    display: block;
}

#menu-categorias-cardapio a:hover {
    color: var(--quinta-cor);  /* Cor do texto do menu do botão flutuante, com o mouse em cima. */
    text-decoration: underline; /* Faz aparecer o sublinhado do link somente quando o mouse está em cima, mostrando que trata-se de um link, de que é algo clicável. */
    text-decoration-skip-ink: all; /* Garante que o sublinhado não passe para o separador. */
}

/* Separador ANTES dos links (aparece em todos, exceto no primeiro da lista) */
#menu-categorias-cardapio li:nth-child(n+3) a::before {
    content: "";                /* Remove o texto, o separador, para o desenharmos. */
    display: inline-block;
    width: 8px;                 /* Largura do separador. */
    height: 8px;                /* Altura do separador. */
    background-color: var(--quinta-cor); /* Cor do separador. */
    border-radius: 50%;         /* Faz o separador ficar redondo. */
    margin-right: 12px;
    vertical-align: middle; /* Alinha o separador verticalmente com o texto do menu. */
    opacity: 0.5;
}

/* Muda a cor do separador quando passamos o mouse no link */
#menu-categorias-cardapio li:nth-child(n+3) a:hover::before {
    background-color: var(--quinta-cor);
    opacity: 1; /* Fica mais visível junto com o texto */
    text-decoration: none !important; /* Faz com que o separador não fique sublinhado. */
}

/* Container Principal */
.container-cardapio {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px 100px 15px;
}

/* Título da Categoria */
.secao-categoria {
    margin-top: 30px;
}

/* ======================================================================
    FUNDO DO DESTAQUE DAS CATEGORIAS * INÍCIO
====================================================================== */
/* Configuração Base da Bandeira */
.titulo-categoria {
    text-align: center;
    font-family: var(--fonte-03);
    color: #FFF;
    font-size: 1.6rem;
    margin-bottom: 40px;
    position: relative;
    padding: 12px 45px;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0% 0%, 100% 0%, 94% 50%, 100% 100%, 0% 100%, 6% 50%);
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    
    /* Cor padrão caso algo falhe */
    background-color: var(--primeira-cor);
}

/* LÓGICA DE CORES CÍCLICAS (Exemplo com 5 cores)
   O (5n+1) significa: a cada 5 elementos, pegue o primeiro, e assim por diante.
*/

/* 1ª Categoria */
.secao-categoria:nth-of-type(6n+1) .titulo-categoria {
    background-color: #E67E22; /* Laranja */
}

/* 2ª Categoria */
.secao-categoria:nth-of-type(6n+2) .titulo-categoria {
    background-color: #27AE60; /* Verde */
}

/* 3ª Categoria */
.secao-categoria:nth-of-type(6n+3) .titulo-categoria {
    background-color: #2980B9; /* Azul */
}

/* 4ª Categoria */
.secao-categoria:nth-of-type(6n+4) .titulo-categoria {
    background-color: #8E44AD; /* Roxo */
}

/* 5ª Categoria */
.secao-categoria:nth-of-type(6n+5) .titulo-categoria {
    background-color: #C0392B; /* Vermelho */
}

/* 6ª Categoria */
.secao-categoria:nth-of-type(6n+6) .titulo-categoria {
    background-color: #CF0F85; /* Rosa */
}
/* ======================================================================
    FINAL * FUNDO DO DESTAQUE DAS CATEGORIAS
====================================================================== */
/* Grade de Produtos */
.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 50px 30px; /* Mais espaço no topo para a etiqueta não bater no card de cima. */
}

/* Produto */
.produto {
    background: #FFF;
    border: 1px solid #E0E0E0;
    border-radius: 15px;
    padding: 35px 20px 20px 20px;
    position: relative; /* Necessário para a etiqueta absoluta. */
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

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

/* Etiqueta Pendurada */
.etiqueta-titulo {
    position: absolute;
    top: -15px; /* Faz a etiqueta subir para cima da borda. */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--segunda-cor); /* Cor de fundo do destaque da etiqueta.*/
    color: #FFF;
    padding: 8px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 2;
}

/* Conteúdo do Card */
.corpo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.descricao-curta {
    font-size: 0.9rem; /* Tamanho do texto da descrição dos produtos. */
    color: #000; /* Cor do texto da descrição dos produtos. */
    line-height: 1.4;
    margin-bottom: 20px;
}

/* Imagens do Produto * INÍCIO */
/* Foto do Produto */
.foto-cardapio img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
    cursor: pointer;
}

.sem-foto {
    height: 180px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #ccc;
    margin-bottom: 15px;
}

/* ======================================================================
    BOTÕES DE INFORMAÇÕES * INÍCIO
====================================================================== */
.container-botoes-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Espaçamento entre os botões de informações. */
    justify-content: center;
    margin-bottom: 15px;
}

.btn-info-mini {
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--primeira-cor);
    background: transparent;
    color: var(--primeira-cor);
    cursor: pointer;
    flex: 1 1 calc(50% - 8px); /* No mobile, ficam 2 botões por linha. */
    min-width: 90px; 
    max-width: 150px; /* Impede que o botão "Link" estique demais sozinho. */
    white-space: nowrap;
    text-align: center;
    transition: all 0.2s;
}

/* Container que escurece o fundo */
#popupInfoCardapio {
    display: none; 
    position: fixed; 
    z-index: 99999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.8); 
    align-items: center; 
    justify-content: center; 
}

/* A caixa branca com a borda colorida (Padronizada com a Loja: 400px) */
#popupInfoCardapio > div {
    background: #FFF;
    padding: 0; 
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    max-height: 80vh; 
    position: relative;
    color: #333;
    box-shadow: 0 0px 10px rgba(0,0,0,0.3);
    border: 5px solid var(--primeira-cor);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Botão Fechar dentro do Popup (Padronizado com a Loja) */
#popupInfoCardapio .btn-carrinho-adicionar {
    display: block;
    margin: 10px auto 20px auto; 
    padding: 12px 24px;
    width: auto; 
    min-width: 120px;
    border-radius: 6px;
    cursor: pointer;
}

#popupInfoCardapio.visivel {
    display: flex !important;
}

/* Área do texto com ROLAGEM */
#popupConteudoCardapio {
    overflow-y: auto;
    padding: 20px; 
    line-height: 1.6;
    color: #444;
    font-size: 15px;
    text-align: left;
    max-height: calc(80vh - 100px); 
    box-sizing: border-box;
}

/* Estilização da barra de rolagem para ficar discreta */
#popupConteudoCardapio::-webkit-scrollbar {
    width: 6px;
}
#popupConteudoCardapio::-webkit-scrollbar-thumb {
    background: var(--primeira-cor);
    border-radius: 10px;
}

/* Container do Modal de Imagem (Dados Técnicos) */
#modalImagem {
    display: none; 
    position: fixed; 
    z-index: 99999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.9); 
    align-items: center; 
    justify-content: center; 
}

/* Quando o JS adiciona a classe .visivel, o modal aparece */
#modalImagem.visivel {
    display: flex !important;
}

/* Garante que a imagem dentro do modal não ultrapasse a tela */
#modalGaleria img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
/* ======================================================================
    FINAL * BOTÕES DE INFORMAÇÕES
====================================================================== */

/* Preço em destaque */
.valor-varejo-destaque {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--segunda-cor);
    margin-bottom: 5px;
}

/* Inputs e Botões de Compra */
.input-qtd-cardapio {
    width: 90%;         /* Colocamos 90% para sobrar espaço nas laterais. */
    box-sizing: border-box; /* Impede que o padding empurre o campo para fora. */
    margin: 0 auto 8px auto; /* Centraliza o campohorizontalmente e dá margem embaixo. */
    padding: 12px 10px;
    border-radius: 8px;
    border: 1px solid #DDD;
    text-align: center;
    margin-bottom: 8px;
    display: block;     /* Garante que as margens auto funcionem corretamente. */
}

.btn-carrinho-adicionar {
    width: auto; /* Largura do botão se ajusta ao texto. */
    background-color: var(--cardapio-digital-01-botao-carrinho-adicionar);
    color: #FFF;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    margin: 4px 0;
    transition: transform 0.2s;
    line-height: 1.2;
}

.btn-carrinho-ver {
    width: auto; /* Largura do botão se ajusta ao texto. */
    background-color: var(--cardapio-digital-01-botao-carrinho-ver);
    color: #FFF;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    margin: 4px 0;
    transition: transform 0.2s;
    line-height: 1.2;
}

.btn-carrinho-adicionar:active, .btn-carrinho-ver:active {
    transform: scale(0.98);    /* Efeito de clique suave */
}

/* Efeito de Hover nos botões de compra */
.btn-carrinho-adicionar:hover {
    background-color: var(--quinta-cor); /* Cor ao passar o mouse. */
}

.btn-carrinho-ver:hover {
    background-color: var(--quinta-cor); /* Cor ao passar o mouse. */
}

.msg-erro-qtd {
    color: #D9534F;
    font-size: 0.75rem;
    margin-bottom: 0;
    min-height: auto;
}
/* FINAL * Imagens do Produto */

/* Controles de Compra */
.controles-compra {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    margin: 5px 0;
}

/* Preços de Varejo e de Atacado */
.precos-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.preco-atacado {
    display: inline-block;       /* Faz o destaque do atacado ter o tamanho do texto. */
    font-size: 0.95rem;
    color: var(--segunda-cor);
    font-weight: bold;
    background-color: #F3F3F3; /* Cor de fundo do destaque dos preços no atacado. */
    padding: 6px 15px;           /* Ajuste lateral. */
    border-radius: 8px;
    border: 1px dashed #DDD;
    margin: 5px auto;            /* Espaçamento externo. */
    text-align: center;
}

.preco-atacado small {
    font-size: 0.7rem;           /* Tamanho do texto "No Atacado" */
    color: #555;               /* Cor do texto descritivo */
    font-weight: normal;
    display: block;
    margin-bottom: 2px;          /* Espaço entre o texto e o valor */
}

/* Responsividade Mobile */
/* Tablet em pé e dispositivos médios (até 1024px) */
@media (max-width: 1024px) {
    .cardapio-header img {
        width: 120px; /* Logo um pouco maior no tablet que no desktop. */
    }
    .cardapio-header h1 {
        font-size: 34px; /* Título um pouco maior para preencher o espaço do tablet. */
    }
}

@media (max-width: 768px) {
    .cardapio-header img {
        width: 100px;
    }
    .cardapio-header h1 {
        font-size: 26px; /* h1 no celular. */
    }
    
    .grade-produtos {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .etiqueta-titulo {
        font-size: 0.8rem;
        padding: 6px 20px;
        width: 90%;
    }

    /* Ajuste para o menu não grudar na esquerda em telas pequenas */
    #menu-categorias-cardapio.aberto {
        right: 20px;
        left: auto; /* Valor padrão para telas maiores que 320px. */
    }
}

@media (max-width: 480px) {
    .btn-info-mini {
        flex: 1 1 45%;
        font-size: 0.8rem;
    }
}

/* Para celulares de tela bem estreita (como iPhone SE ou antigos) */
@media (max-width: 320px) {
    #menu-categorias-cardapio.aberto {
        right: 15px; /* Reduzimos um pouco a folga lateral. */
        left: 15px;  /* Fazemos com que a esquerda tenha a mesma folga. */
        width: auto; /* O menu estica para ocupar o espaço entre os 15px da esquerda e da direita. */
        max-width: none; /* Removemos o limite de 250px para  menu ficar centralizado. */
    }
}