/* style.css */

        /* Definição de variáveis CSS para cores - Tema Escuro Padrão */
        :root {
            --bg-primary: #1a1a1a;
            /* Fundo principal (body) */
            --bg-secondary: #2c2c2c;
            /* Fundos de cards/seções */
            --text-primary: #e0e0e0;
            /* Cor de texto principal */
            --texto-categoria: #e0e0e0;
            /* Cor do texto da categoria */
            --text-secondary: #b0b0b0;
            /* Cor de texto secundária/descrições */
            --accent-color: #ff6347;
            /* Cor de destaque (laranja/vermelho) */
            --category-color: #403d3d;
            /* Cor de fundo da categoria para tema escuro */
            --button-bg-success: #4CAF50;
            /* Cor de fundo de botão de sucesso (adicionar) */
            --button-bg-success-hover: #45a049;
            /* Hover do botão de sucesso */
            --button-bg-warning: #25d366;
            /* Cor de fundo de botão de aviso (whatsapp) */
            --button-bg-warning-hover: #1da851;
            /* Hover do botão de aviso */
            --border-color: #444;
            /* Cor das bordas finas */
            --shadow-color: rgba(0, 0, 0, 0.4);
            /* Cor da sombra */
            --header-bg: #333;
            /* Fundo do cabeçalho */
            --footer-bg: #1a1a1a;
            --titulo-carrinho: #197be3;
            --separador-categoria: #d4a814;
        }

        /* Variáveis para o Tema Claro */
        body.light-theme {
            --bg-primary: #f1f1f1;
            --bg-secondary: #FFFAFA;
            --text-primary: #242222;
            --texto-categoria: #242222;
            /* Texto da categoria escuro para tema claro */
            --text-secondary: #666;
            --accent-color: #812617;
            --button-bg-success: #4CAF50;
            --button-bg-success-hover: #45a049;
            --button-bg-warning: #25d366;
            --button-bg-warning-hover: #1da851;
            --border-color: #545454;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --header-bg: #d2d2ce;
            /* Cor do logo para o tema claro */
            --footer-bg: #FFFAFA;
            /* Cor do rodapé para o tema claro */
            --category-color: #bebdbd;
            /* Cor de fundo da categoria para tema claro (preto) */
        }

        /* ----------------------------ALERTA DE FUNCIONAMENTO SER FOR SEGUNDA FEIRA-----------------------------------------*/
        #status-funcionamento-main {
            text-align: center;
            padding: 10px 10px;
            margin: 20px auto; /* Centraliza horizontalmente e adiciona margem */
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: bold;
            max-width: 800px; /* Limita a largura para não ficar muito esticado em telas grandes */
            display: none; /* Por padrão, escondido; só aparece se for segunda */
            
        }

        #status-funcionamento-main.fechado-main {
            background-color: var(--bg-secondary);
            color: var(--texto-categoria); 
          
        }

        #status-funcionamento-main.aberto-main {
            /* Estilos se você decidir mostrar "Aberto" também */
            background-color: #e8f5e900; /* Verde pastel */
            color: #388e3c; /* Verde escuro */
            padding: 0.1%;
          
        }

        /* Reset básico e fontes */
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .p{
            font-style: var(--text-primary);
            background-color: var(--text-primary);
        }
        /* Cabeçalho */
        header {
            background-color: var(--header-bg);
            color: var(--text-primary);
            padding: 1em;
            text-align: center;
            box-shadow: 0 2px 4px var(--shadow-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: background-color 0.3s ease;
           
         
        }

        .logo-container {
            margin-bottom: 10px;
        }

        .header-logo {
            max-width: 150px;
            height: auto;
            border-radius: 50%;
            border: 3px solid var(--text-primary);
        }

        header p {
            margin: 0;
            font-size: 1.1em;
            font-weight: 400;
        }

        

        /* Estilos para o ícone de alternar tema */
        .theme-toggle-container {
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 1.8em;
            cursor: pointer;
            color: var(--text-primary);
            transition: color 0.3s ease;
            z-index: 100;
        }

        /* Estilos para o ícone de informações */
        .info-toggle-container {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 1.8em;
            cursor: pointer;
            color: var(--text-primary);
            transition: color 0.3s ease;
            z-index: 100;
        }

        .search-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
            background-color: var(--background-color); /* Use a cor de fundo do seu tema */
            border-bottom: 1px solid var(--border-color);
            gap: 10px; /* Espaço entre o input e o botão */
        }
        #searchInput {
            flex-grow: 1; /* Permite que o input ocupe o máximo de espaço possível */
            max-width: 500px; /* Limita a largura máxima */
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: 25px; /* Bordas arredondadas */
            font-size: 1rem;
            background-color: var(--input-bg-color); /* Cor de fundo para o input */
            color: var(--text-color); /* Cor do texto */
            transition: border-color 0.3s ease;
        }
        #searchInput::placeholder {
            color: var(--text-color-light); /* Cor do placeholder */
        }

        #searchInput:focus {
            border-color: var(--primary-color); /* Cor da borda ao focar */
            outline: none;
        }

        .button-search {
            background-color: var(--primary-color); /* Cor primária para o botão */
            color: white;
            border: none;
            border-radius: 25px; /* Bordas arredondadas */
            padding: 10px 15px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s ease, transform 0.1s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .button-search:hover {
            background-color: var(--dark-primary-color); /* Cor mais escura ao passar o mouse */
            transform: translateY(-1px); /* Pequeno efeito ao passar o mouse */
        }

        .button-search i {
            margin: 0; /* Remove margem padrão de ícones */
        }

        

        /* Estilos para o ícone do carrinho */
        .cart-icon-container {
            position: fixed;
            top: 72px;
            right: 20px;
            font-size: 2.0em;
            cursor: pointer;
            color: var(--category-color);
            /* Usando category-color para o ícone, que é escuro no tema claro */
            background-color: var(--text-secondary);
            /* Pode ser ajustado se esta cor não ficar boa para o fundo do ícone */
            border-radius: 50%;
            width: 30px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px var(--shadow-color);
            z-index: 999;
            transition: transform 0.1s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .cart-icon {
            font-size: 1.5em;
        }

        .cart-count {
            background-color: var(--accent-color);
            /* Usa variável */
            color: white;
            border-radius: 50%;
            padding: 0.2em 0.5em;
            font-size: 0.5em;
            font-weight: bold;
            min-width: 1.5em;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -5px;
            right: -5px;
            transition: background-color 0.3s ease;
            /* Transição para a cor de fundo */
        }


        /* Animação de flash para o ícone do carrinho */
        .cart-icon-container.flash {
            animation: cartFlash 0.8s ease-out;
        }
        /* --- INDICADOR VISUAL DE ROLAGEM NO CARRINHO --- */

/* Sombra suave na parte inferior da lista de itens */
        #cart-items-scroll-container {
            position: relative;
        }

/* Pseudo-elemento para criar a sombra */
        #cart-items-scroll-container::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px; /* Altura da sombra */
            background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3)); /* Gradiente que desaparece para cima */
            pointer-events: none; /* Permite que cliques passem através da sombra */
            z-index: 10; /* Fica acima dos itens, mas abaixo do cabeçalho do modal */
            transition: opacity 0.3s ease;
        }

/* Oculta a sombra se a lista de itens estiver totalmente visível (não há rolagem) */
        #cart-items-scroll-container:not(:hover):not(:focus-within) {
            /* Não aplica a sombra se o container não estiver em foco ou hover */
        }

/* Ajusta a sombra quando o usuário está rolando ou passando o mouse */
        #cart-items-scroll-container:hover::after,
        #cart-items-scroll-container:focus-within::after {
            opacity: 1;
        }

/* Para telas pequenas, ajuste a altura da sombra */
        @media (max-width: 768px) {
            #cart-items-scroll-container::after {
                height: 40px;
            }
        }

        @keyframes cartFlash {
            0% {
                transform: scale(1);
                background-color: var(--accent-color);
            }

            50% {
                transform: scale(1.15);
                background-color: var(--button-bg-success);
            }

            100% {
                transform: scale(1);
                background-color: var(--accent-color);
            }
        }
        /* Rolagem dos itens dentro do carrinho */
        #cart-items-scroll-container {
            max-height: 40vh;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        /* Adicione estilos para o novo modal de resumo */
        #summary-modal .summary-details {
            padding: 15px;
            background-color: var(--card-bg-color);
            border-radius: 8px;
            margin-bottom: 15px;
            max-height: 50vh;
            overflow-y: auto;
            text-align: left;
        }
        .summary-details h3 {
            color: var(--primary-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 5px;
            margin-top: 15px;
        }
        .summary-details pre {
            white-space: pre-wrap; /* Mantém a formatação da mensagem do WhatsApp */
            font-size: 0.9em;
            color: var(--text-color);
            background-color: var(--bg-color);
            padding: 10px;
            border-radius: 5px;
        }
        /* Estilos para a barra de navegação de categorias */
        .category-navigation {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            padding: 1em;
            background-color: var(--bg-secondary);
            box-shadow: 0 2px 4px var(--shadow-color);
            margin: 0.5em auto;
            max-width: 1200px;
            border-radius: 8px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;

        }

        .category-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: var(--category-color);      
            color: var(--texto-categoria);
            border: 1px solid var(--texto-categoria);
            padding: 0.8em 0.5em;
            border-radius: 25px;
            cursor: pointer;
            font-size: 2em;
            font-weight: 700;
            transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.3s ease; /* Adicionada transição para border-color */
            width: 120px;
            height: 100px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            line-height: 1.2;
            gap: 5px;
            /* Espaçamento entre o ícone e o texto */
            max-width: 100%;
            /* Ajustado para melhor responsividade em certas situações */
            width: fit-content;
            /* Permite que a largura se ajuste ao conteúdo quando apropriado */
        }

        .category-button:hover {
            background-color: var(--button-bg-success-hover);
            transform: translateY(-2px);
        }

        /* Botão Voltar ao Topo */
        #scrollToTopBtn {
            display: none; /* Esconde o botão por padrão */
            position: fixed; /* Fixa o botão na tela */
            bottom: 20px; /* Posição abaixo do botão do chat */
            right: 20px;
            z-index: 998; /* Mesmo z-index do botão do chat */
            background-color: transparent; /* Cor de destaque definida nas variáveis */
            color: white;
            border: none;
            border-radius: 50%; /* Torna o botão redondo */
            width: 1.8%;
            height: 4%;
            font-size: 1.1em;
            cursor: pointer;
            box-shadow: 0 2px 5px var(--shadow-color); /* Sombra para destaque */
            transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease; /* Transições */
    /* Removido: display: flex; aqui inicialmente */
        }
        #scrollToTopBtn.show { /* Adicionamos uma classe 'show' para controle via JS */
            display: flex !important; /* Força o display flex quando a classe show é adicionada */
            opacity: 1; /* Garante opacidade total quando visível */
        }
        

        #scrollToTopBtn:hover {
            background-color: var(--accent-color);
            transform: translateY(-3px);
        }

        /* Para o ícone do Font Awesome */
        #scrollToTopBtn .fas {
            font-size: 1.5em;
            line-height: 1;
            
            /* Garante que o ícone fique centralizado verticalmente */
        }

        /* Estilo para o contêiner da animação Lottie/imagem fallback dentro do botão */
        .lottie-icon-container {
            width: 60px;
            height: 60px;
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
   
        }

        /* Estilos para o SVG gerado pelo Lottie (se Lottie.js usar SVG) */
        .lottie-icon-container svg {
            width: 100%;
            height: 100%;
        }

        /* Estilos para a imagem fallback dentro do contêiner (se lottieJsonUrl não for fornecido) */
        .lottie-icon-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }


        .category-button span.button-text {
            font-size: 0.85em;
            max-height: 2.4em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            line-height: 1.2;
        }


        /* Layout principal */
        main {
            display: flex;
            flex-direction: column;
            padding: 1em;
            gap: 1.5em;
            max-width: 1200px;
            margin: 1.5em auto;
        }

        /* Seções do cardápio */
        #menu-sections {
            flex: 3;
            background-color: var(--bg-secondary);
            padding: 1.5em;
            border-radius: 8px;
            box-shadow: 0 2px 8px var(--shadow-color);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .category {
            margin-bottom: 2em;
        }

        .category h2 {
            color: var(--accent-color);
            border-bottom: 2px solid var(--separador-categoria);
            padding-bottom: 0.5em;
            margin-bottom: 1.5em;
            font-size: 1.8em;
            font-weight: 600;
            transition: color 0.3s ease, border-color 0.3s ease;
            font-family: 'Poppins', sans-serif;
            display: inline-block;
            width: 100%; /* Garante que o título ocupe a largura total */
            text-align: center; /* Centraliza o título da categoria */
            /* Mantém a fonte consistente */

        }

        .products-grid {
            display: grid;
            gap: 20px; /* Espaçamento entre os itens */
            grid-template-columns: repeat(2, 1fr);
            font-size: 15px;
            text-indent: 0.5em;
            font-family: pacifico, sans-serif; /* Mantém a fonte consistente */
            font-weight: 800; /* Mantém o peso da fonte consistente */
        }

        .product-card {
            background-color: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px var(--shadow-color);
            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 0.2em 0.2em 0.8em;
            transition: transform 0.2s ease-in-out, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            width: 100%;
           
            margin: 10px auto;
            
        }

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

        /* Contêiner da imagem/item- Garante uma proporção fixa para evitar o corte indesejado */
        .product-card .product-image-container {
            width: 100%;
            height: 180px;
            padding-top: 75%;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid var(--border-color);
            border-radius: 8px 8px 0 0;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* A Imagem em si - Preenche o contêiner e se ajusta/centraliza */
        .product-card .product-image-container img {
            position: absolute;
            top: 0;
            left: 0;
            top:30%;
            left: 30%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            transition: transform 0.3s ease;
            
        }
        /* Efeito de zoom ao passar o mouse sobre a imagem*/
        .product-card .product-image-container img:hover {
            transform: scale(1.05);
        }
     
        .product-card:not(:has(.product-image-container img))::before {
            /* Ajustado o seletor para verificar o contêiner */
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 180px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.5;
            pointer-events: none;
            z-index: 1;
        }

        /* Remove a marca d'água padrão (ajustado para o novo seletor) PRODUTOS DO MODAL DENTRO CARRINHO */
        .product-card::before {
            content: none;
        }

        /* Estilo para o título do produto */
        .product-card h3 {
            color: var(--product-title-color);
            font-size: 1em;
            font-weight: 600; /* Mantém o peso da fonte */
            margin: 0.4em 0.3em 0.1em; /* Ajuste fino das margens */
            text-align: center;
            width: 100%; 
            transition: color 0.3s ease;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* Limita a 2 linhas */
            -webkit-box-orient: vertical;
            word-wrap: break-word; /* Quebra palavras longas se necessário */
            
            overflow: hidden; /* Esconde o excesso de texto */
            hyphens: auto; /* Hifeniza palavras longas para melhor quebra */
            min-height: 1.2em; 
            line-height: 1.2; 
        }

        .product-card p {
            font-size: 0.9em;
            color: var(--text-secondary);
            padding: 0.1em 0.5em 0.3em;
            flex-grow: 1;
            transition: color 0.3s ease;
        }

        .product-card .price {
            font-size: 1.6em;
            color: var(--accent-color);
            font-weight: 780;
            margin: 0.2em 0 0.em;
            transition: color 0.3s ease;
            font-family: 'pricedown', sans-serif;
        
        
        }

        .product-card button.add-to-cart {
            background-color: var(--button-bg-success);
            color: white;
            border: none;
            padding: 0.9em 1.5em;
            font-size: 1em;
            cursor: pointer;
            border-radius: 0 0 8px 8px;
            transition: background-color 0.2s ease;
            width: 100%;
            flex-shrink: 0;
            min-height: 30px; /* Garante que o botão tenha uma altura mínima para melhor usabilidade */
        }

        .product-card button.add-to-cart:hover {
            background-color: var(--button-bg-success-hover);
        }


        /* Estilos Comuns do Modal (Aplicam-se a todos os modais) */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(11, 124, 165, 0.609);
            justify-content: center;
            align-items: center;
        }
        

        .modal-content {
            background-color: var(--bg-secondary);
            margin: auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px var(--button-bg-success-hover);
            width: 90%;
            max-width: 450px;
            /* Largura padrão para carrinho/info */
            position: relative;
            animation: fadeIn 0.3s ease-out;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .modal-content h2 {
            color: var(--titulo-carrinho);
            transition: color 0.3s ease;
            margin-top: 0;
            margin-bottom: 1em;
            text-align: center;
           
        }

        /* Animação de entrada do modal */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .close-button {
            color: var(--text-secondary);
            float: right;
            font-size: 28px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 15px;
            transition: color 0.3s ease;
        }


        .close-button:hover,
        .close-button:focus {
            color: var(--text-primary);
            text-decoration: none;
            cursor: pointer;
        }

        #cart-items-modal {
            min-height: 80px;
            margin-bottom: 1.5em;
            max-height: 30vh;
            /* Reduz a altura máxima para dar espaço aos novos campos */
            overflow-y: auto;
            padding-right: 5px;
        }
        /* Container que irá rolar os itens do carrinho */
        #cart-items-scroll-container {
            position: relative;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px;
            scrollbar-width: thin; 
            scrollbar-color: var(--primary-color) var(--background-light);
        }
        #cart-items-scroll-container::after {
            content: '';
            position: sticky; /* Fica fixo na parte inferior do container rolável */
            bottom: 0; /* Ancora na parte inferior */
            left: 0;
            width: 100%;
            height: 30px; /* Altura da área do indicador */
            background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3)); /* Gradiente escuro na parte inferior */
            pointer-events: none; /* Permite que cliques passem através do indicador */
            z-index: 10; /* Fica acima dos itens, mas abaixo do cabeçalho do modal */
            opacity: 0; /* Inicialmente invisível */
            transition: opacity 0.3s ease; /* Transição suave para aparecer/desaparecer */
        }
        /* Opcional: Se quiser um indicador na parte superior também (quando perto do topo, mas pode rolar para baixo) */
        #cart-items-scroll-container::before {
            content: '';
            position: sticky; /* Fica fixo na parte superior do container rolável */
            top: 0; /* Ancora na parte superior */
            left: 0;
            width: 100%;
            height: 30px; /* Altura da área do indicador */
            background: linear-gradient(to top, transparent, rgba(0,0,0,0.3)); /* Gradiente escuro na parte superior */
            pointer-events: none; /* Permite que cliques passem através do indicador */
            z-index: 10; /* Fica acima dos itens, mas abaixo do cabeçalho do modal */
            opacity: 0; /* Inicialmente invisível */
            transition: opacity 0.3s ease; /* Transição suave para aparecer/desaparecer */
        }
        /* Mostra o indicador superior quando o scroll não está no final */
        #cart-items-scroll-container:not(:last-child)::before {
            opacity: 1; /* Torna o indicador visível */
        }
        /* Opcional: Adicione uma animação pulsante sutil para o indicador superior também */
        #cart-items-scroll-container::before {
            /* ... (regras anteriores) ... */
            /* Adiciona uma animação contínua e sutil */
            animation: pulseScrollIndicator 2s infinite alternate-reverse ease-in-out; /* Usa reverse para alternância */
        }
        #cart-items-scroll-container:not(:first-child):not(:last-child)::after {
            opacity: 1; /* Torna o indicador visível */

        }
        #cart-items-scroll-container::after {
            animation: pulseScrollIndicator 2s infinite alternate ease-in-out;
        }

        #cart-items-scroll-container::-webkit-scrollbar {
            width: 8px;
        }

        #cart-items-scroll-container::-webkit-scrollbar-track {
            background: var(--background-light);
            border-radius: 10px;
        }

        #cart-items-scroll-container::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 10px;
        }
        @keyframes pulseScrollIndicator {
            from {
                opacity: 0.3; /* Menos opacidade no início */
            }
            to {
                opacity: 0.8; /* Mais opacidade no final */
            }
        }

        /* Estilo para os botões de rolagem */
        .cart-scroll-buttons {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            margin-top: 10px; /* Espaçamento entre os itens e os botões */
            border-top: 1px solid var(--border-color); /* Linha divisória opcional */
        }

        .cart-scroll-buttons button {
            background-color: var(--secondary-color);
            color: var(--text-color-dark);
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s ease;
        }

        .cart-scroll-buttons button:hover {
            background-color: var(--primary-color);
        }

        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.8em;
            border-bottom: 1px dashed var(--border-color);
            padding-bottom: 0.5em;
            transition: border-color 0.3s ease;
           
        }

        .cart-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .cart-item-info span {
            display: block;
        }

        .cart-item-info .item-name {
            font-weight: 600;
            color: var(--texto-categoria);
            transition: color 0.3s ease;
        }

        .cart-item-info .item-price {
            font-size: 0.9em;
            color: white;
            transition: color 0.3s ease;
        }

        .cart-item-quantity {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 80px;

        }

        .cart-item-quantity button {
            background-color: var(--accent-color);
            color: white;
            border: none;
            border-radius: 4px;
            width: 25px;
            height: 25px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1em;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.2s ease;
        }

        .cart-item-quantity button:hover {
            background-color: var(--button-bg-success-hover);
        }

        .cart-item-quantity span {
            font-weight: 600;
            color: white;
            transition: color 0.3s ease;
        }


        .cart-summary-modal {
            border-top: 2px solid var(--border-color);
            padding-top: 1em;
            text-align: right;
            transition: border-color 0.3s ease;
        }

        #cart-total-modal {
            font-size: 1.8em;
            font-weight: 700;
            color: rgb(162, 173, 11);
            display: block;
            margin-top: 0.5em;
            transition: color 0.3s ease;
            padding: 0.2em;
        }

        /* NOVOS ESTILOS PARA OS CAMPOS DO CARRINHO */
        .order-options {
            margin-top: 1.5em;
            padding-top: 1.5em;
            border-top: 1px solid var(--border-color);
            text-align: left;
            color: var(--text-secondary);
            /* Alinha o texto dentro desta seção à esquerda */
        }

        .order-options h3 {
            color: var(--button-bg-success-hover);
            margin-top: 0;
            margin-bottom: 1em;
            font-size: 1.4em;
            text-align: center;
            /* Centraliza o título "Detalhes do Pedido" */
        }

        .input-group {
            margin-bottom: 1em;
        }

        .input-group label {
            display: block;
            margin-bottom: 0.5em;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.95em;
        }

        .order-input {
            width: calc(100% - 22px);
            /* Ajusta para padding e borda */
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            background-color: var(--bg-primary);
            /* Fundo um pouco mais escuro */
            color: var(--text-primary);
            font-size: 1em;
            transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
            -webkit-appearance: none;
            /* Remove estilo padrão de selects/inputs em alguns browsers */
            -moz-appearance: none;
            appearance: none;
        }

        .order-input:focus {
            border-color: var(--accent-color);
            outline: none;
            box-shadow: 0 0 5px rgba(255, 99, 71, 0.5);
        }

        /* Estilo para placeholder */
        .order-input::placeholder {
            color: var(--text-secondary);
            opacity: 0.7;
        }

        /* Estilo específico para selects */
        .order-input select {
            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23b0b0b0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.6c-4.4%200-8.5%201.7-11.7%204.9-3.2%203.2-4.9%207.3-4.9%2011.7%200%204.4%201.7%208.5%204.9%2011.7l124.6%20124.6c3.2%203.2%207.3%204.9%2011.7%204.9s8.5-1.7%2011.7-4.9l124.6-124.6c3.2-3.2%204.9-7.4%204.9-11.8.1-4.4-1.6-8.5-4.8-11.7z%22%2F%3E%3C%2Fsvg%3E');
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 12px;
            padding-right: 30px;
            /* Espaço para o ícone da seta */
        }

        /* Estilo para opções de select (alguns navegadores não estilizam bem) */
        .order-input option {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
        }

        #jantinha-options {
            /* Por padrão, começa oculto no HTML, mas o JS o controla */
            /* Garante que o block seja efetivo quando o JS o define */
            display: block;
            /* Este valor será sobrescrito pelo JS */
            /* Adicione transições se quiser um efeito mais suave ao aparecer/desaparecer */
            transition: all 0.3s ease-in-out;
            overflow: hidden;
            /* Garante que o conteúdo não vaze durante a transição */
            max-height: 0;
            /* Começa com altura 0 para transição suave */
            opacity: 0;
            /* Começa com opacidade 0 para transição suave */
        }

        #jantinha-options[style*="display: block"] {
            max-height: 200px;
            /* Altura suficiente para mostrar os campos */
            opacity: 1;
        }

        .delivery-fee-info {
            font-size: 0.9em var(--text-primary);
            color: var(--text-secondary);
            margin-top: 1.5em;
            text-align: center;
            padding: 0.8em;
            border: 1px dashed var(--border-color);
            border-radius: 5px;
            background-color: var(--bg-primary);
        }

        .delivery-fee-info strong {
            color: var(--accent-color);
        }


        #checkout-whatsapp-modal {
            background-color: var(--button-bg-warning);
            color: white;
            border: none;
            padding: 1em 1.5em;
            font-size: 1.1em;
            cursor: pointer;
            border-radius: 5px;
            width: 100%;
            margin-top: 1em;
            transition: background-color 0.2s ease;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        #checkout-whatsapp-modal:hover {
            background-color: var(--button-bg-warning-hover);
        }

        /* Estilos para o Modal de Informações */
        #info-modal .modal-content {
            max-width: 550px;
        }

        .info-section {
            margin-bottom: 1.5em;
            padding: 1em;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: var(--bg-secondary);
            box-shadow: 0 1px 3px var(--shadow-color);
            transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .info-section h3 {
            color: var(--accent-color);
            margin-top: 0;
            margin-bottom: 0.8em;
            font-size: 1.3em;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.5em;
        }

        .info-section ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .info-section ul li {
            margin-bottom: 0.5em;
            color: var(--text-primary);
        }

        .info-section a {
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s ease;
        }

        .info-section a:hover {
            text-decoration: underline;
            color: var(--button-bg-success-hover);
        }

        .info-section .maps-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .contact-info {
            text-align: center;
        }

        /* Modal de Fotos */
        #photos-modal .modal-content {
            max-width: 900px;
            max-height: 90vh;
            overflow-y: auto;
        }

        #modal-photos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 2em;
            padding: 2em 0;
            width: 100%;
            height: auto;
        }

        #modal-photos-grid img {
            width: 150%;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 5px var(--shadow-color);
            transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
        }

        #modal-photos-grid img:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 10px var(--shadow-color);
        }
/*----------------------------------------------fotos dos itens-----------------------------------------------------------*/
#image-modal {
    display: none; /* Inicia oculto */
    position: fixed;
    z-index: 1001; /* Z-index um pouco maior que os outros modais */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita rolagem da tela principal */
    background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro semi-transparente */
    display: flex; /* Para centralizar o conteúdo */
    justify-content: center;
    align-items: center;
}

#image-modal .modal-content {
    background-color: transparent; /* Fundo transparente para o modal da imagem */
    box-shadow: none; /* Sem sombra para o modal da imagem */
    padding: 0;
    max-width: 95%; /* Limita a largura para a imagem */
    max-height: 95%; /* Limita a altura para a imagem */
    display: flex; /* Para centralizar a imagem dentro do modal-content */
    justify-content: center;
    align-items: center;
}

#image-modal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Garante que a imagem se ajuste sem cortar */
    display: block; /* Remove espaço extra abaixo da imagem */
}

#image-modal .close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    color: white;
    font-size: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 1002; /* Acima da imagem */
}

#image-modal .close-button:hover {
    background-color: var(--accent-color);
}

/*-------------------------------------fim do bloco das fotos dos itens-----------------------------------------------------------*/
        /* Rodapé */
        footer {
            text-align: center;
            padding: 1.5em;
            background-color: var(--footer-bg);
            color: var(--text-secondary);
            font-size: 0.9em;
            margin-top: 2em;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Responsividade para telas maiores (desktop)---------------------------------------------------------------------------- */
        @media (min-width: 1366px) and (max-width: 1919px) {
            .products-grid {
                grid-template-columns: repeat(3, 1fr);
                /* 3 colunas para tablets */
                gap: 20px;
            }
            .category-navigation {
                display: relative;
                width: 70%;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 30px;
                margin: 0 auto;
                background-color: transparent;
        
                
               
            }
            .header,
            footer,
            nav.category-navigation {
                max-width: 100%;
                /* Mesma largura do main para alinhamento */
                margin: 0 auto;
                /* Centraliza */
                padding-left: 0;
                padding-right: 0;
                background-color: transparent;
                gap: 30px;
            }
            
        }
        
        @media (min-width: 768px) {
            .products-grid {
                grid-template-columns: repeat(5, 1fr);
                /* 5 colunas para desktop */
                gap: 30px;
            }
             #image-modal .close-button {
                top: 20px;
                right: 20px;
                font-size: 40px;
                width: 50px;
                height: 50px;
            }

            .category-navigation {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            }

            header,
            footer,
            nav.category-navigation {
                max-width: 95%;
                /* Mesma largura do main para alinhamento */
                margin: 0 auto;
                /* Centraliza */
                padding-left: 0;
                padding-right: 0;
            }

            #cart-modal .modal-content {
                max-width: 600px;
                color: var(--text-secondary);
                
            }
            #cart-items-scroll-container::after,
            #cart-items-scroll-container::before {
                height: 20px; /* Menor altura */
                animation-duration: 1.5s; /* Animação um pouco mais rápida */

            }
        }

            #chatModal .modal-content {
                max-width: 100%;
                width: 800px;
                max-height: 90vh;
                
            }

            .logo-container {
                margin-bottom: 0;
            }

            .header-logo {
                max-width: 150px;
            }

            .theme-toggle-container {
                top: 20px;
                left: 20px;
                font-size: 2em;
            }

            .info-toggle-container {
                top: 20px;
                right: 20px;
                font-size: 2em;
            }

            .cart-icon-container {
                bottom: 30px;
                right: 30px;
                font-size: 1.8em;
                width: 70px;
                height: 70px;
            }

            main {
                max-width: 95%;
                /* Altere este valor para a largura máxima desejada */
                margin: 0 auto;
                /* Centraliza o conteúdo na tela */
                padding-left: 0;
                /* Remove padding lateral se a intenção é esticar ao máximo */
                padding-right: 0;
                /* Remove padding lateral se a intenção é esticar ao máximo */
            }

            #menu-sections {
                order: 1;
            }

            #scrollToTopBtn {
                display: block;
                bottom: 30px;
                right: 35px;
                width: 35px;
                height: 35px;
            }
            #scrollToTopBtn .fas {
                font-size: 2.5em;
                line-height: 1;
            
            }

            .category h2 {
                text-indent: 1em;
                margin-bottom: 1em;
                font-size: 2.1em;
                text-align: center;
                line-height: 0.2;
                /* Ajusta o espaçamento entre linhas */
            }

            .category-button {
                width: 180px;
                height: 120px;
                font-size: 1em;
                border-radius: 25px;
            }

            .chat-toggle-btn {
                position: fixed;
                bottom: 30px;
                /* Ajuste para que não conflite com o "Voltar ao Topo" */
                right: 20px;
                z-index: 998;
                /* Mantém o mesmo z-index que o "Voltar ao Topo" */
                background-color: var(--button-bg-warning);
                /* Cor de aviso (verde) */
                color: white;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                font-size: 1.5em;
                cursor: pointer;
                box-shadow: 0 2px 5px var(--shadow-color);
                transition: background-color 0.3s ease, transform 0.2s ease;
                display: flex;
                /* Garante que ele seja visível por padrão */
                justify-content: center;
                align-items: center;
            }
        

        .chat-toggle-btn:hover {
            background-color: var(--button-bg-warning-hover);
            transform: translateY(-3px);
        }

        #modal-photos-grid img {
            width: 100%;
            height: 200px;
            border-radius: 15px;
            box-shadow: 0 2px 10px var(--shadow-color);
            transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
        }



        /* -----------------------------------------Responsividade para telas muito pequenas -------------------------------*/
        @media (max-width: 480px) {
            header h1 {
                font-size: 1.8em;
            }
            .category-navigation {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
                padding: 1em;
                background-color: var(--bg-secondary);
                box-shadow: 0 2px 4px var(--shadow-color);
                margin: 0.5em auto;
                max-width: 1200px;
                border-radius: 8px;
                transition: background-color 0.3s ease, box-shadow 0.3s ease;

            }
             #image-modal .close-button {
                top: 10px;
                right: 10px;
                font-size: 30px;
                width: 40px;
                height: 40px;
            }


            .products-grid { /* Ajusta a grade de produtos para telas pequenas NOS ITENS PRUDUTOS */
                display: grid;
                gap: 20px;/* Espaçamento entre os itens */
                grid-template-columns: repeat(2, 1fr);
                font-size: 15px;
                text-indent: 0.5em;
                font-family: pacifico, sans-serif; /* Mantém a fonte consistente */
                font-weight: 800; /* Mantém o peso da fonte consistente */

            }
            #modal-photos-grid img {
                width: 50%;
                height: 50px;
                border-radius: 15px;
                box-shadow: 0 2px 5px var(--shadow-color);
                transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
            }

            header{
                border-radius: 15px;
                width: 90%;
                align-items: center;
            }

            header p {
                font-size: 0.8em;
            }

            .header-logo {
                max-width: 63px;
             
            }

            .theme-toggle-container {
                font-size: 1.6em;
                top: 10px;
                left: 10px;
            }

            .info-toggle-container {
                font-size: 1.6em;
                top: 10px;
                right: 10px;
            }

            .cart-icon-container {
                font-size: 1.4em;
                width: 40px;
                height: 40px;
                right: 15px;
                top: 55px;
            }

            .cart-icon {
                font-size: 1.2em;
                position: absolute;
            }

            .cart-count {
                top: -8px;
                right: -8px;
                font-size: 0.4em;
                padding: 0.3em 0.4em;
            }

            .category h2 {
                text-indent: 1em; /* Indenta o título da categoria */
                text-align: center;
                margin-bottom: 0.5em;
                font-size: 1.2em;
                line-height: 0.5; /* Ajusta o espaçamento entre linhas */

            }
            #cart-items-scroll-container::after,
            #cart-items-scroll-container::before {
                height: 20px; /* Menor altura */
                animation-duration: 1.5s; /* Animação um pouco mais rápida */

            }

            /* Contêiner da imagem - Garante uma proporção fixa - MANTER AQUI PARA REGRAS ESPECÍFICAS DE TELAS MUITO PEQUENAS */
            .product-card .product-image-container {
                width: 90%;
                padding-top: 75%;
                position: relative;
                overflow: hidden;
                border-radius: 8px;
                margin: 0 auto 10px auto;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .product-card .product-image-container img {
                position: absolute;
                /* Posiciona a imagem para preencher o contêiner */
                top: 20%;
                left: 25%;
                width: 55%;
                height: 70%;
                object-fit: cover;
                object-position: center;
            }

            .product-card::before {
                height: 100px;
            }

            .category-navigation {
                flex-direction: row;
                justify-content: space-around;
                padding: 0.5em;
                gap: 5px;
             
            }

            .category-button {
                width: 75px;
                height: 75px;
                padding: 0.5em 0.2em;
                font-size: 0.6em;
                border-radius: 8px;
                gap: 1px;
                /* Espaçamento entre o ícone e o texto */
            }

            .lottie-icon-container {
                width: 50px;
                height: 50px;
                margin-bottom: 3px;
                

              
            }

            .category-button span.button-text {
                font-size: 0.9em;
            }

            /* Modal de Informações em telas pequenas */
            #info-modal .modal-content {
                padding: 5px;
                width: 80%;
            }

            .info-section h3 {
                font-size: 1.2em;
                gap: 8px;
            }

            .info-section p,
            .info-section li {
                font-size: 0.9em;
            }

            /* Modal de Fotos em telas pequenas */
            #photos-modal .modal-content {
                max-width: 95%;
                max-height: 90vh;
            }

            #modal-photos-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 0.8em;
            }

            #modal-photos-grid img {
                height: 100px;
            }

            /* NOVOS ESTILOS PARA OS CAMPOS DO CARRINHO EM TELAS PEQUENAS */
            .modal-content {
                max-width: 80%;
                /* Ajusta a largura máxima para o modal em telas pequenas */
            }

            #cart-items-modal {
                display: flex; /* ou block, ou column - dependendo do layout dos seus itens */
                flex-direction: column; /* Se os itens são um embaixo do outro */
                gap: 10px; /* Espaço entre os itens */
            }

            .order-input {
                font-size: 0.9em;
                padding: 8px;
            }

            .input-group label {
                font-size: 0.8em;
            }

            /* Botão flutuante do Chatbot */
            .chat-toggle-btn {
                position: fixed;
                bottom: 20px;
                right: 20px;
                z-index: 998;
                background-color: var(--button-bg-warning);
                /* Cor de aviso (verde) */
                color: white;
                border: none;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                font-size: 1.5em;
                cursor: pointer;
                box-shadow: 0 2px 5px var(--shadow-color);
                transition: background-color 0.3s ease, transform 0.2s ease;
                display: flex;
                /* Garante que ele seja visível por padrão */
                justify-content: center;
                align-items: center;
            }

            .chat-toggle-btn:hover {
                background-color: var(--button-bg-warning-hover);
                transform: translateY(-3px);
            }
        }
         #scrollToTopBtn {
                display: none;
                bottom: 15px;
                left: 15px;
                width: 35px;
                height: 35px;
            }

        #scrollToTopBtn .fas {
                font-size: 1.5em;
                line-height: 1;
            
            }

        /* Estilos específicos para o Modal do Chatbot */
        .chat-modal-content {
            max-width: 300px;
            padding: 20px;
            /* Largura um pouco menor para o chat */
        }

        .image-card {
            height: 250px;
            object-fit: contain;
        }

        .chatbox {

            border-radius: 5px;
            padding: 10px;
            height: 400px;
            /* Altura fixa para a caixa de chat */
            overflow-y: auto;
            /* Rolagem quando o conteúdo exceder */
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            background-color: var();
            /* Fundo da caixa de mensagens */
            font-size: 13px;
            font-style: var(--accent-color);

        }

        .message {
            padding: 8px 12px;
            border-radius: 15px;
            max-width: 80%;
            word-wrap: break-word;
            /* Quebra palavras longas */
        }

        .user-message {
            align-self: flex-end;
            /* Alinha mensagens do usuário à direita */
            background-color: var(--accent-color);
            color: white;
        }

        .bot-message {
            align-self: flex-start;
            /* Alinha mensagens do bot à esquerda */
            background-color: var(--category-color);
            /* Uma cor neutra para o bot */
            color: var(--text-primary);
        }

        .button-chat {
            background-color: var(--button-bg-success);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            margin-top: 10px;
            width: 100%;
            transition: background-color 0.2s ease;
        }

        .button-chat:hover {
            background-color: var(--button-bg-success-hover);
        }

        .product-card button.add-to-cart {
            padding: 0.5em 1em;
            /* Ajusta o padding para telas pequenas */
            font-size: 0.9em;
            /* Reduz o tamanho da fonte */
        }

        /* -------------------------Responsividade para telas muito pequenas 378px--------------------------------------------------------*/
        @media (max-width: 378px) {

            #scrollToTopBtn {
                display: none;
                bottom: 20px;
                left: 15px;
            }
            #scrollToTopBtn .fas {
                font-size: 1.5em;
                line-height: 1;
            
            }
            .category-navigation {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
                padding: 1em;
                background-color: var(--bg-secondary);
                box-shadow: 0 2px 4px var(--shadow-color);
                margin: 0.5em auto;
                border-radius: 15px;
                width: 88%;

            }
                        
            #image-modal .close-button {
                top: 10px;
                right: 10px;
                font-size: 30px;
                width: 40px;
                height: 40px;
            }

            #modal-photos-grid img {
                width: 50%;
                height: 50px;
                border-radius: 8px;
                box-shadow: 0 2px 5px var(--shadow-color);
                transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
            }
            #info-modal .modal-content {
                padding: 5px;
                width: 80%;
            }

            .info-section h3 {
                font-size: 1.2em;
                gap: 8px;
            }

            .info-section p,
            .info-section li {
                font-size: 0.8em;
                /* Alterado de 0.9em para 0.8em */
            }

            /* Garante que cada categoria se ajuste à coluna */
            .menu-category {
                width: 0%;
                /* Ocupa a largura total da coluna da grade */
            }

        }
        #cart-items-scroll-container::after,
        #cart-items-scroll-container::before {
                height: 20px; /* Menor altura */
                animation-duration: 1.5s; /* Animação um pouco mais rápida */

            }

        @media (max-width: 390px) { /*--------------------------------telas 390px-------------------------------------------------*/

            #scrollToTopBtn {
                display: none;
                bottom: 20px;
                left: 15px;
                width: 35px;
                height: 35px;
            }

            .category-navigation {
                display: flex;
                justify-content: center;
                gap: 2px;
                padding: 0.8em;
                margin: 0.1em auto;
                border-radius: 15px;
                width: 88%;

        }
            #info-modal .modal-content {
                padding: 5px;
                width: 80%;
                background-color: var(--bg-secondary);
            }

            .info-section h3 {
                font-size: 1.2em;
                gap: 8px;
            }
            #modal-photos-grid img {
                width: 50%;
                height: 50px;
                border-radius: 8px;
                box-shadow: 0 2px 5px var(--shadow-color);
                transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
            }

            .info-section p,
            .info-section li {
                font-size: 0.8em;
                /* Alterado de 0.9em para 0.8em */
            }

            .product-card button.add-to-cart {
                padding: 0.5em 1em;
                /* Ajusta o padding para telas pequenas */
                font-size: 0.7em;
                /* Reduz o tamanho da fonte */
            }
            #cart-items-scroll-container::after,
            #cart-items-scroll-container::before {
                height: 20px; /* Menor altura */
                animation-duration: 1.5s; /* Animação um pouco mais rápida */

            }

        }
      /* ============= ESTILOS PARA A PÁGINA DE FOTOS (photos.html) ============= */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Container do Botão Voltar para o Menu (centralizado abaixo do header) */
.menu-back-container {
  text-align: center;
  margin: 20px 0;
}

.back-to-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 10px var(--shadow-color);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.back-to-menu-button:hover {
  background-color: var(--button-bg-success-hover);
  transform: translateY(-2px);
}

/* Ícones temáticos CLICÁVEIS */
.icons-container {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0;
  width: 100%;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  text-decoration: none;
  color: var(--text-primary);
}

.icon-item:hover {
  transform: scale(1.05);
}

.icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-color);
  box-shadow: 0 4px 10px var(--shadow-color);
  color: white;
  font-size: 24px;
}

.icon i {
  font-size: 28px;
}

.icon-label {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  color: var(--text-primary);
}

/* Seções de Categoria de Fotos */
.photo-category-section {
  margin: 50px 0;
}

.category-title {
  color: var(--accent-color);
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Grade de Fotos */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 30px;
}

.photo {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 15px var(--shadow-color);
  transition: transform 0.3s ease;
  background-color: var(--bg-secondary); /* Fundo para evitar espaços vazios */
  aspect-ratio: 3 / 2; /* Proporção fixa (opcional, remova se quiser altura automática) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo img {
  width: 100%;
  height: 100%; /* Ocupa todo o contêiner */
  object-position: center; /* Centraliza a imagem */
  transition: transform 0.5s ease;
}

.photo:hover img {
  transform: scale(1.03);
  filter: brightness(1.1);
}

/* Responsividade */
@media (max-width: 768px) {
  .icons-container {
    gap: 10px;
  }

  .icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .icon i {
    font-size: 22px;
  }

  .icon-label {
    font-size: 10px;
  }

  .photo {
    height: 250px;
  }

  .back-to-menu-button {
    padding: 10px 20px;
    font-size: 14px;
  }

  .category-title {
    font-size: 1.5em;
  }
}

@media (max-width: 480px) {
  .icon {
    width: 45px;
    height: 45px;
  }

  .icon-label {
    font-size: 9px;
  }

  .photo {
    height: 200px;
  }

  .back-to-menu-button {
    padding: 8px 16px;
    font-size: 12px;
  }

  .category-title {
    font-size: 1.3em;
  }
}
/* =========================================================
   NOVO CSS: MODAL DE RESUMO DO PEDIDO (#summary-modal)
   ========================================================= */

/* Estilo para a área de conteúdo do resumo, injetada pelo JS */
.summary-details {
    padding: 15px;
    border-radius: 10px;
    background-color: var(--bg-primary); /* Fundo um pouco mais escuro para destaque */
    color: var(--text-primary);
    max-height: 60vh; /* Limita a altura para scroll em telas pequenas */
    overflow-y: auto;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Estilo para cada seção dentro do resumo (Detalhes, Itens) */
.summary-section {
    padding: 15px 0;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 15px;
}

.summary-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.summary-section h3 {
    color: var(--accent-color); /* Título em cor de destaque */
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 700;
}

/* Estilo para a lista de itens no resumo */
.summary-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.5;
    font-size: 1em;
}

.summary-items-list li {
    padding: 10px 0;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
}

.summary-items-list li:last-child {
    border-bottom: none;
}

/* Estilo para as opções (espeto, feijão, salada) */
.item-options-list {
    list-style: disc; /* Use um disco para as sub-opções */
    padding-left: 20px;
    margin-top: 5px;
    font-size: 0.9em;
    color: var(--text-secondary);
}

.item-options-list li {
    border-bottom: none;
    padding: 2px 0;
}

/* Estilo para o campo de total final */
.final-total {
    background-color: var(--bg-secondary); /* Fundo mais escuro para o total */
    padding: 18px;
    margin-top: 20px;
    border-radius: 10px;
    border: 2px solid var(--accent-color); /* Borda de destaque */
    text-align: center;
}

.final-total h3 {
    color: var(--text-primary);
    font-size: 1.8em;
    font-weight: 800;
    margin: 0;
}

/* Estilo para a mensagem da taxa de entrega */
.delivery-fee-info {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-top: 15px;
    padding: 5px 0;
    font-style: italic;
}

/* Estilo para o botão de envio final do WhatsApp */
.send-order-btn-final {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    margin-top: 25px;
    font-size: 1.3em;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    background-color: var(--button-bg-warning); /* Verde WhatsApp */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4);
    text-transform: uppercase;
}

.send-order-btn-final:hover {
    background-color: var(--button-bg-warning-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.6);
}

.send-order-btn-final i {
    margin-right: 12px;
    font-size: 1.6em;
}

/* --- AJUSTES PARA TEMA CLARO --- */
body.light-theme .summary-details {
    background-color: #f7f7f7; /* Fundo mais claro */
    border: 1px solid #ddd;
}

body.light-theme .summary-section {
    border-bottom: 1px dashed #ccc;
}

body.light-theme .summary-items-list li {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
}

body.light-theme .final-total {
    background-color: #eee;
    border: 2px solid var(--accent-color);
}
/* Estilos para o ícone de Reserva */
.reservation-icon-container {
    position: fixed;
    top: 72px; /* Mesma altura do carrinho */
    left: 20px; /* Posição à esquerda */
    font-size: 1.5em;
    cursor: pointer;
    color: var(--category-color); /* Usando category-color para o ícone, que é escuro no tema claro */
    background-color: var(--text-secondary); /* Cor de fundo para o container */
    border-radius: 50%;
    width: 35px; /* Aumentado para 35px para ficar proporcional ao carrinho */
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px var(--shadow-color);
    z-index: 999;
    transition: transform 0.1s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease;
}

.reservation-icon {
    font-size: 1.5em;
}


/* Animação de flash para o ícone de reserva (opcional, se quiser um efeito similar ao do carrinho) */
.reservation-icon-container.flash {
    animation: cartFlash 0.8s ease-out;
}

/* Estilos para o modal de Reserva */
#reservation-modal .modal-content {
    max-width: 450px; /* Largura padrão */
    width: 90%; /* Para telas menores */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--button-bg-success-hover);
    background-color: var(--bg-secondary);
    animation: fadeIn 0.3s ease-out;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#reservation-modal .modal-content h2 {
    color: var(--titulo-carrinho);
    transition: color 0.3s ease;
    margin-top: 0;
    margin-bottom: 1em;
    text-align: center;
}

#reservation-modal .input-group {
    margin-bottom: 1em;
}

#reservation-modal .input-group label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95em;
}

#reservation-modal .order-input {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1em;
    transition: border-color 0.3s ease;
}

#reservation-modal .order-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

#reservation-modal button#send-reservation-whatsapp {
    background-color: var(--button-bg-warning);
    color: white;
    border: none;
    padding: 0.9em 1.5em;
    font-size: 1em;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
    transition: background-color 0.2s ease;
    margin-top: 1em;
}

#reservation-modal button#send-reservation-whatsapp:hover {
    background-color: var(--button-bg-warning-hover);
}

#reservation-warning {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 0.5em;
    padding: 0.5em;
    text-align: center;
    font-style: italic;
}
/* Estilos para o ícone de Reserva (copiados do carrinho) */
#reservation-icon {
    position: fixed;
    top: 72px; /* Mesma altura do carrinho */
    left: 20px; /* Posição à esquerda */
    font-size: 2.0em;
    cursor: pointer;
    color: var(--category-color); /* Usando category-color para o ícone, que é escuro no tema claro */
    background-color: var(--text-secondary); /* Cor de fundo para o container */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px var(--shadow-color);
    z-index: 999;
    transition: transform 0.1s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease;
}
/* --- ESTILOS PARA A DESCRIÇÃO DOS PRODUTOS E BOTÃO "LER MAIS" --- */

/* Container da descrição */
.description-container {
    position: relative;
    margin-top: 0.5em;
}

/* Estilo da descrição do produto */
.product-description {
    font-size: 0.9em;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limita a descrição a 3 linhas em telas pequenas */
    -webkit-box-orient: vertical;
    transition: all 0.3s ease;
}

/* Estado expandido da descrição */
.product-description.expanded {
    -webkit-line-clamp: none; /* Remove o limite de linhas */
    max-height: none; /* Permite que a descrição ocupe todo o espaço necessário */
    overflow: visible;
}

/* Botão "Ler Mais" */
.read-more-button {
    background-color: transparent;
    border: none;
    color: var(--accent-color); /* Cor de destaque */
    cursor: pointer;
    font-size: 0.85em;
    font-weight: bold;
    padding: 0.2em 0.5em;
    text-decoration: underline;
    margin-top: 0.3em;
    transition: color 0.2s ease;
}

.read-more-button:hover {
    color: var(--button-bg-success-hover); /* Cor mais escura ao passar o mouse */
}

/* --- RESPONSIVIDADE: Ajustes para telas pequenas --- */

@media (max-width: 768px) {
    .product-description {
        font-size: 0.85em;
        -webkit-line-clamp: 2; /* Limita a 2 linhas em telas menores */
    }

    .read-more-button {
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    .product-description {
        font-size: 0.8em;
        -webkit-line-clamp: 1; /* Limita a 1 linha em telas muito pequenas */
    }

    .read-more-button {
        font-size: 0.75em;
    }
}
/* --- RESPONSIVIDADE: Botão de Reserva (ícone) em telas pequenas --- */

/* Ajusta a posição e o tamanho do ícone da reserva em telas menores */
@media (max-width: 768px) {
    #reservation-icon {
        top: 60px; /* Ajuste fino da posição vertical */
        left: 15px; /* Ajuste fino da posição horizontal */
        font-size: 1.8em; /* Ligeiramente menor */
        width: 40px; /* Ajusta a largura */
        height: 40px; /* Ajusta a altura */
    }
}

/* Ajusta a posição e o tamanho do ícone da reserva em telas muito pequenas */
@media (max-width: 480px) {
    #reservation-icon {
        top: 55px; /* Ajuste fino da posição vertical */
        left: 12px; /* Ajuste fino da posição horizontal */
        font-size: 1.6em; /* Mais um pouco menor */
        width: 35px; /* Ajusta a largura */
        height: 35px; /* Ajusta a altura */
    }
}

/* Ajusta a posição e o tamanho do ícone da reserva em telas extremamente pequenas */
@media (max-width: 378px) {
    #reservation-icon {
        top: 50px; /* Ajuste fino da posição vertical */
        left: 10px; /* Ajuste fino da posição horizontal */
        font-size: 1.5em; /* Menor ainda */
        width: 30px; /* Ajusta a largura */
        height: 30px; /* Ajusta a altura */
    }
}