:root {
            --primary-dark: #2c2c2c; /* Quase preto */
            --secondary-dark: #4a4a4a; /* Cinza escuro */
            --accent-orange: #ff6f00; /* Laranja vibrante */
            --light-text: #e0e0e0; /* Cinza claro para texto */
            --white: #ffffff;
            --card-bg: rgba(0, 0, 0, 0.75); /* Fundo de card semi-transparente */
            --card-border: 1px solid rgba(255, 255, 255, 0.1);
            --whatsapp-green: #25D366;
            --whatsapp-green-hover: #1DA851;

            /* Variáveis para o resumo flutuante no desktop */
            --summary-width-desktop: 300px;
            --summary-spacing-desktop: 25px;
        }

        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background: var(--primary-dark) url('https://images.unsplash.com/photo-1517457375-a09e73550e19?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center fixed;
            background-size: cover;
            color: var(--light-text);
            display: flex; /* Usado para centralizar o container */
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            padding: 20px 0; /* Apenas padding vertical para o body */
            box-sizing: border-box;
            position: relative; /* Contexto para z-index se necessário */
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6); /* Escurece o fundo */
            z-index: -1;
        }

        .container {
            width: 100%;
            /* Ajusta a largura máxima para dar espaço ao resumo flutuante na direita */
            max-width: calc(1200px - var(--summary-width-desktop) - var(--summary-spacing-desktop));
            background-color: rgba(0, 0, 0, 0.85); /* Fundo principal mais escuro e semi-transparente */
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
            overflow: hidden; /* Importante para o border-radius */
            color: var(--light-text);
            /* Adiciona margem à direita para o espaço do resumo flutuante */
            margin-right: calc(var(--summary-width-desktop) + var(--summary-spacing-desktop));
            margin-left: auto; /* Centraliza o container na área restante */
            position: relative; /* Para contexto de z-index */
            z-index: 1; /* Garante que o container esteja acima do overlay */
        }

        header {
            background-color: var(--accent-orange);
            padding: 30px 20px;
            text-align: center;
            border-bottom: 5px solid var(--primary-dark);
        }

        header h1 {
            font-family: 'Oswald', sans-serif;
            font-size: 3.8em;
            margin: 0;
            color: var(--white);
            text-transform: uppercase;
            letter-spacing: 3px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
        }

        main {
            padding: 20px;
        }

        .menu-section {
            margin-bottom: 40px;
        }

        .menu-section h2 {
            font-family: 'Oswald', sans-serif;
            font-size: 2.5em;
            color: var(--accent-orange);
            margin-top: 0;
            margin-bottom: 25px;
            text-transform: uppercase;
            text-align: center;
            position: relative;
            padding-bottom: 10px;
        }

        .menu-section h2::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            width: 80px;
            height: 4px;
            background-color: var(--white);
            border-radius: 2px;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            justify-content: center;
        }

        .product-card {
            background-color: var(--card-bg);
            border-radius: 10px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            border: var(--card-border);
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
        }

        .product-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-bottom: var(--card-border);
        }

        .product-info {
            padding: 15px;
            flex-grow: 1;
        }

        .product-info h3 {
            font-family: 'Oswald', sans-serif;
            font-size: 1.6em;
            margin: 0 0 8px 0;
            color: var(--white);
            text-transform: capitalize;
        }

        .product-description {
            font-size: 0.9em;
            margin: 0;
            color: var(--light-text);
            line-height: 1.4;
        }

        .product-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-top: var(--card-border);
            background-color: rgba(0, 0, 0, 0.3);
        }

        .product-price {
            font-size: 1.5em;
            font-weight: bold;
            color: var(--accent-orange);
            white-space: nowrap;
        }

        .item-quantity {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .item-quantity button {
            background-color: var(--accent-orange);
            color: var(--white);
            border: none;
            padding: 8px 12px;
            font-size: 1.1em;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.2s;
            line-height: 1;
        }

        .item-quantity button:hover {
            background-color: #e66200;
        }

        .item-quantity input {
            width: 50px;
            text-align: center;
            border: 1px solid var(--secondary-dark);
            border-radius: 5px;
            padding: 8px 0;
            background-color: var(--primary-dark);
            color: var(--white);
            font-size: 1.1em;
            -moz-appearance: textfield; /* Remove spinner para Firefox */
        }
        .item-quantity input::-webkit-outer-spin-button,
        .item-quantity input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0; /* Remove spinner para Chrome, Safari, Edge */
        }

        /* ESTILO DA CALCULADORA FLUTUANTE - DESKTOP */
        .order-summary {
            position: fixed;
            top: 50%;
            right: var(--summary-spacing-desktop); /* Espaçamento da borda direita */
            transform: translateY(-50%); /* Centraliza verticalmente */
            width: var(--summary-width-desktop); /* Largura fixa */
            background-color: var(--secondary-dark);
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
            z-index: 1000; /* Garante que fique acima de outros elementos */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            border: 1px solid rgba(255, 255, 255, 0.15); /* Borda sutil */
        }

        #total-value {
            font-size: 2.2em;
            font-weight: bold;
            color: var(--white);
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        #whatsapp-button {
            background-color: var(--whatsapp-green);
            color: var(--white);
            border: none;
            padding: 18px 25px; /* Ajusta o padding do botão para o resumo */
            font-size: 1.1em; /* Ajusta o tamanho da fonte para o botão */
            font-weight: bold;
            cursor: pointer;
            border-radius: 10px;
            transition: background-color 0.3s ease, transform 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center; /* Centraliza o texto do botão */
            gap: 12px;
            text-decoration: none;
            width: 100%; /* Faz o botão preencher a largura do resumo */
            box-sizing: border-box; /* Inclui o padding na largura */
        }

        #whatsapp-button:hover {
            background-color: var(--whatsapp-green-hover);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        #whatsapp-button img {
            width: 28px;
            height: 28px;
        }
        
        #selected-items-list {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2); /* Linha divisória */
    max-height: 200px; /* Limita a altura para rolagem se muitos itens */
    overflow-y: auto; /* Adiciona barra de rolagem se exceder a altura */
    text-align: left; /* Alinha o texto da lista à esquerda */
    width: 100%; /* Ocupa a largura total do resumo */
    /* Adicione estas linhas para garantir que o estilo de "nenhum item selecionado" seja resetado corretamente */
    color: var(--light-text); 
    font-size: 1em;
}

.selected-item-summary {
    font-size: 1em;
    color: var(--light-text);
    margin-bottom: 5px;
    line-height: 1.3;
}

.selected-item-summary:last-child {
    margin-bottom: 0;
}

        footer {
            background-color: var(--primary-dark);
            padding: 20px;
            text-align: center;
            font-size: 0.9em;
            color: var(--light-text);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Responsividade */
        @media (max-width: 992px) {
            /* Diminui a largura máxima do container em tablets */
            .container {
                max-width: calc(100% - var(--summary-width-desktop) - var(--summary-spacing-desktop));
            }
            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }

        @media (max-width: 768px) {
            body {
                padding: 0; /* Remove padding do body em mobile */
                display: flex;
                flex-direction: column;
            }

            .container {
                max-width: 100%; /* Container ocupa 100% da largura */
                margin-right: 0; /* Remove margem direita */
                border-radius: 0; /* Remove bordas arredondadas nas laterais */
                box-shadow: none; /* Remove sombra */
            }

            header h1 {
                font-size: 3em;
            }
            .menu-section h2 {
                font-size: 2em;
            }
            .product-grid {
                grid-template-columns: 1fr; /* Uma coluna em telas menores */
                gap: 20px;
            }
            .product-card {
                flex-direction: row; /* Imagem ao lado do texto em telas menores */
                align-items: center;
                border-radius: 0; /* Sem borda arredondada nos cards em full width */
            }
            .product-image {
                width: 100px; /* Imagem menor em mobile */
                height: 100px;
                flex-shrink: 0;
                border-right: var(--card-border);
                border-bottom: none;
            }
            .product-info {
                padding: 10px 15px;
            }
            .product-actions {
                flex-direction: column;
                justify-content: center;
                gap: 10px;
                padding: 10px;
                border-top: none;
                border-left: var(--card-border);
            }
            .product-price {
                font-size: 1.3em;
            }
            .item-quantity button {
                padding: 6px 10px;
                font-size: 1em;
            }
            .item-quantity input {
                width: 40px;
                padding: 6px 0;
                font-size: 1em;
            }

            /* CALCULADORA FLUTUANTE - MOBILE (vira rodapé fixo) */
            .order-summary {
                position: sticky; /* ou fixed. Sticky permite que ele role para a vista e depois fixe */
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                transform: none; /* Remove a transformação de centralização */
                border-radius: 0; /* Remove bordas arredondadas */
                padding: 15px 20px; /* Ajusta o padding para mobile */
                border-top: 3px solid var(--accent-orange); /* Borda superior para destacar */
                box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5); /* Sombra para simular elevação */
                flex-direction: row; /* Layout horizontal para total e botão */
                justify-content: space-between;
                align-items: center;
                gap: 15px;
                padding: 20px 5px 5px 0;
                padding-bottom: 20px;
            }

            #total-value {
                font-size: 1.8em; /* Total menor em mobile */
                white-space: nowrap;
                margin-bottom: 0;
                padding-left: 20px;
            }

            #whatsapp-button {
                padding: 12px 20px; /* Padding do botão em mobile */
                font-size: 1em; /* Tamanho da fonte do botão em mobile */
                width: auto; /* Deixa o botão se ajustar ao conteúdo */
                flex-shrink: 0; /* Impede o botão de encolher */
            }

            #whatsapp-button img {
                width: 24px;
                height: 24px;
            }

            /* Ajusta o padding inferior do main para que o conteúdo não seja escondido pelo rodapé fixo */
            main {
                padding-bottom: 120px; /* Altura aproximada do rodapé fixo + espaçamento */
                margin-right: 0; /* Remove margem direita em mobile */
            }
            
            @media (max-width: 768px) {
    #selected-items-list {
        max-height: 100px; /* Menor altura em mobile */
        margin-bottom: 10px;
        padding-bottom: 10px;
        text-align: left !important; /* Força o alinhamento para a esquerda em mobile para a lista */
    }
}

@media (max-width: 480px) {
    #selected-items-list {
        max-height: 80px; /* Ainda menor em telas muito pequenas */
    }
}

            /* Ajusta a margem inferior do footer para que não seja escondido pelo rodapé fixo */
            footer {
                margin-bottom: 90px; /* Ajuste para acomodar o summary fixo no final */
            }
        }

        @media (max-width: 480px) {
            header h1 {
                font-size: 2.2em;
            }
            .menu-section h2 {
                font-size: 1.8em;
            }
            .product-card {
                flex-direction: column; /* Empilha imagem e info novamente em telas muito pequenas */
            }
            .product-image {
                width: 100%;
                height: 150px;
                border-bottom: var(--card-border);
                border-right: none;
            }
            .product-actions {
                border-left: none;
                border-top: var(--card-border);
            }
            /* O resumo fixo do mobile vira coluna em telas muito pequenas */
            .order-summary {
                flex-direction: column;
                align-items: stretch; /* Estica os itens para a largura total */
                gap: 10px;
                align-items: baseline;
            }
            #whatsapp-button {
                width: 100%; /* Botão ocupa 100% da largura disponível */
            }
            /* Ajustes para espaçamento do rodapé em telas muito pequenas */
            main {
                padding-bottom: 150px; /* Mais padding se o resumo for mais alto */
            }
            footer {
                margin-bottom: 130px; /* Ajuste maior para o footer */
            }
        }