/* ======================================================= */
/* RESET BÁSICO E VARIÁVEIS DE COR */
/* ======================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --cor-preto: #000000;
    --cor-dourado: #C5A46D;
    --cor-dourado-hover: #e0bb81;
    --cor-fundo: #121212;
    --cor-texto: #e0e0e0;
    --cor-branca: #FFFFFF;
    --cor-sucesso: #28a745;
    --cor-erro: #dc3545;
    --cor-fundo-card: #1e1e1e;
    --cor-marrom: #6B4F4F;  
}

/* SOLUCAO CRITICA PARA ELIMINAR ROLAGEM HORIZONTAL */
html, body {
    width: 100vw !important; 
    overflow-x: hidden !important; 
}


/* ======================================================= */
/* ESTRUTURA GERAL */
/* ======================================================= */
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), #121212 40%);
}

/* ======================================================= */
/* CABECALHO E NAVEGACAO */
/* ======================================================= */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px 20px;
    background-color: #162e29;
    border-bottom: 2px solid var(--cor-dourado);
    position: relative;
    z-index: 100;
    height: 110px;
    overflow: visible;
}

.logo img {
    height: 150px;
    object-fit: contain;
    display: block;
    margin-top: -8px;
}

/* Esconde o botao de menu no desktop */
.mobile-toggle {
    display: none;
}

/* Navegacao principal */
.main-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.main-nav > a {
    text-decoration: none;
    color: var(--cor-dourado);
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s ease;
}

.main-nav > a:hover {
    color: var(--cor-dourado-hover);
}

/* Submenu Painel Admin */
.dropdown-admin {
    position: relative;
    display: inline-block;
}

.nav-link-admin {
    background: none;
    border: none;
    padding: 0;
    color: var(--cor-dourado);
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}

.dropdown-content {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    display: none;
    background-color: #1a1f1e;
    border: 1px solid #2a2f2e;
    border-radius: 8px;
    min-width: 220px;
    padding: 6px 0;
    box-shadow: 0 12px 24px rgba(0,0,0,0.45);
    z-index: 2000;
}

.dropdown-content a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    color: var(--cor-branca);
}

.dropdown-content a:hover {
    background-color: #23302d;
    color: var(--cor-dourado-hover);
    padding-left: 22px;
    transition: all .18s ease;
}

.dropdown-admin.is-open .dropdown-content {
    display: block;
}

/* ======================================================= */
/* SECAO PRINCIPAL (HERO) */
/* ======================================================= */
.hero {
    min-height: 65vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                        url('https://images.pexels.com/photos/1721934/pexels-photo-1721934.jpeg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--cor-branca);
    padding: 40px 20px 60px;
    box-sizing: border-box;
}

.hero-content {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 40px;
    border-radius: 10px;
    border: 1px solid var(--cor-dourado);
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.hero-content h1.titulo-pagina {
    font-size: 44px;
    color: var(--cor-dourado);
    margin-bottom: 12px;
}

.hero-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--cor-branca);
    margin-bottom: 12px;
}



.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--cor-dourado);
    color: var(--cor-preto);
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
    background-color: var(--cor-dourado-hover);
}

/* ======================================================= */
/* CONTEUDO PRINCIPAL (BEM-VINDO) */
/* ======================================================= */
.container {
    max-width: 1200px;
    margin: 20px auto 10px;
    padding: 0 20px;
}

.titulo-pagina {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    color: var(--cor-dourado);
    margin-bottom: 10px;
    line-height: 1.3;
}

.container p {
    text-align: center;
    line-height: 1.5;
    font-size: 15px;
    color: #ccc;
    max-width: 700px;
    margin: 5px auto 15px;
}

/* ======================================================= */
/* AJUSTE DE LAYOUT DO CARDAPIO - VERSAO HARMONIZADA */
/* ======================================================= */

.cardapio-container {
    display: grid;
    /* Comportamento padrao de desktop: colunas flexiveis */
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 35px;
    justify-items: center;
    align-items: stretch;
    max-width: 1300px;
    margin: 50px auto;
    padding: 0 30px;
}

/* CARD DO PRODUTO */
.produto-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 380px;
    height: 100%; /* permite equalizar a altura */
    background-color: var(--cor-fundo-card);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.produto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

/* IMAGEM - agora cobre toda a largura e topo */
.produto-imagem {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* CONTEUDO INTERNO */
.produto-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    padding: 22px 24px 28px;
}

/* TITULO */
.produto-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--cor-dourado);
    margin-bottom: 10px;
    text-align: center;
}

/* DESCRICAO */
.produto-descricao {
    font-size: 15px;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
    flex-grow: 1; /* mantém texto elastico, alinha os botoes */
}

/* OPCOES DE COMPRA */
.produto-opcoes {
    margin-bottom: 20px;
}

.produto-opcoes label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #222;
    border: 1px solid #333;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.produto-opcoes label:hover {
    background-color: #2c2c2c;
}

.produto-opcoes input[type="radio"] {
    display: none;
}

.produto-opcoes label:has(input[type="radio"]:checked) {
    border-color: var(--cor-dourado);
    background-color: rgba(197,164,77,0.1);
}

/* BOTAO ADICIONAR */
.add-carrinho-btn {
    margin-top: auto;
    width: 100%;
    padding: 14px;
    background-color: var(--cor-dourado);
    color: var(--cor-preto);
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-carrinho-btn:hover {
    background-color: var(--cor-dourado-hover);
}

/* TITULO GERAL */
.titulo-pagina {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    color: var(--cor-dourado);
    margin-bottom: 40px;
}


/* ======================================================= */
/* AREA ADMINISTRATIVA / FORMULARIOS / ESTILOS DE INPUT GENERICOS */
/* ======================================================= */

/* Inputs e Botões padronizados para o Front-End (substitui admin-input/admin-btn) */
.app-input,
.app-select,
.app-textarea {
    background-color: #333;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px;
    color: var(--cor-texto);
    font-size: 16px;
    width: 100%;
    height: 42px;
    box-sizing: border-box;
}

.app-textarea {
    height: auto;
    min-height: 100px;
}

.app-input:focus,
.app-textarea:focus,
.app-select:focus {
    border-color: var(--cor-dourado-hover);
    outline: none;
}

.app-btn {
    display: inline-block;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    border: none;
}


/* Estilos de ADMIN (Mantidos para compatibilidade com painel) */
.admin-card {
    background-color: var(--cor-fundo-card);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 40px;
}

/* 🔑 CORREÇÃO DEFINITIVA DO SELECTOR DE CALDAS/PRODUTOS/GERAL 🔑 */
.admin-card > .form-grupo {
    width: 100%; 
    max-width: 400px; /* Limita a largura total do seletor no desktop */
    margin-bottom: 20px; 
}
/* Garante que o FORM e o SELECT ocupem 100% do espaço do contêiner */
.admin-card > .form-grupo form, 
.admin-card > .form-grupo form select.admin-select {
    width: 100%;
    display: block; 
}

.admin-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--cor-dourado);
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

/* Regras de Grid para desktop (3 colunas na principal e 2 colunas nos modais) */
.admin-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.admin-form.form-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

/* Classes de largura dentro do grid */
.admin-form .form-col-2 {
    grid-column: span 2;
}
.admin-form .form-col-full,
.admin-form .form-col-2-of-3 {
    grid-column: 1 / -1;
}

/* Ajustes especificos de Grid (4 colunas ou Flex) */
.admin-form.composicao-form {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr auto;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 20px;
}
.medidas-parametros-grid,
.param-custo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    align-items: flex-start;
}
.form-ultima-linha {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
    align-items: flex-end;
    border-top: 1px solid #444;
    padding-top: 15px;
}


.form-grupo {
    display: flex;
    flex-direction: column;
}

.form-grupo label {
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 14px;
}

/* Sobrescrevendo o estilo de input genérico com o estilo admin */
.admin-form .form-grupo input,
.admin-form .form-grupo textarea,
.admin-form .form-grupo select {
    background-color: #333;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px;
    color: var(--cor-texto);
    font-size: 16px;
    width: 100%;
    height: 42px;
    appearance: none;
}

.form-grupo select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23C5A46D'><polygon points='0,0 14,0 7,8'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 32px;
    cursor: pointer;
}

.admin-btn {
    grid-column: 1 / -1;
    background-color: var(--cor-dourado);
    color: var(--cor-preto);
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Garante que o link Finalizar Pedido pareca botao */
    display: inline-block; /* Garante que o link Finalizar Pedido tenha largura ajustavel */
    text-align: center;
}

.admin-btn:hover {
    background-color: var(--cor-dourado-hover);
}

/* AJUSTE REQUERIDO: Estilo para o botao "Continuar Comprando" (admin-btn-cancel) */
.admin-btn-cancel {
    display: inline-block;
    background-color: transparent; /* Fundo transparente */
    color: var(--cor-dourado);
    border: 1px solid var(--cor-dourado); /* Borda com a cor dourada */
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none; /* Remove sublinhado de link */
    text-align: center;
}

.admin-btn-cancel:hover {
    background-color: rgba(197, 164, 109, 0.1); /* Um leve fundo dourado transparente */
    color: var(--cor-dourado-hover);
    border-color: var(--cor-dourado-hover);
}
/* FIM DO AJUSTE */

/* ======================================================= */
/* TABELAS E MENSAGENS ADMIN */
/* ======================================================= */
.admin-tabela {
    width: 100%;
    border-collapse: collapse;
}

.admin-tabela th,
.admin-tabela td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #444;
}

.admin-tabela th {
    color: var(--cor-dourado);
}

.admin-mensagem {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
}

.admin-sucesso {
    background-color: var(--cor-sucesso);
    color: white;
}

.admin-erro {
    background-color: var(--cor-erro);
    color: white;
}

/* Estilos de Modal de Insumos */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-conteudo { position: relative; background-color: var(--cor-fundo-card, #1e1e1e); margin: 5% auto; padding: 30px; border-radius: 12px; border: 1px solid var(--cor-dourado, #C5A4D); width: 90%; max-width: 800px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); animation: fadeInScale 0.3s ease-out; }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-conteudo h3 { margin-top: 0; margin-bottom: 25px; font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--cor-dourado, #C5A4D); padding-bottom: 15px; border-bottom: 1px solid #444; }
.modal-fechar { position: absolute; top: 15px; right: 20px; color: var(--cor-texto, #e0e0e0); opacity: 0.7; font-size: 32px; font-weight: bold; cursor: pointer; transition: all 0.2s; }
.modal-fechar:hover { opacity: 1; color: var(--cor-dourado-hover, #e0bb81); transform: rotate(90deg); }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #444; }
.form-actions .admin-btn { grid-column: auto; padding: 12px 25px; font-size: 1rem; margin-top: 0; }
.form-col-full { grid-column: 1 / -1; }
.admin-form hr { grid-column: 1 / -1; border-color: #444; margin: 10px 0; }
.admin-form p { grid-column: 1 / -1; }
.admin-form .form-actions { grid-column: 1 / -1; }
.top-action-buttons { display:flex; align-items: center; gap:10px; }

/* ESTILOS DE AÇÃO NA TABELA (PRODUCAO) */
.admin-tabela .btn-acao {
    display: inline-block;
    padding: 6px 10px; 
    margin-right: 5px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px; 
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    color: #fff;
}
.admin-tabela .btn-editar {
    background-color: #007bff; /* AZUL */
    border: 1px solid #007bff;
}
.admin-tabela .btn-editar:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.admin-tabela .btn-excluir {
    background-color: #dc3545; /* VERMELHO */
    border: 1px solid #dc3545;
}
.admin-tabela .btn-excluir:hover {
    background-color: #c82333;
    border-color: #bd2130;
}
.admin-btn-secundario {
    background-color: transparent;
    color: var(--cor-dourado);
    border: 1px solid var(--cor-dourado);
}
.admin-btn-secundario:hover {
    background-color: rgba(197, 164, 109, 0.1);
}

/* Campos de validação (Produção/Forms) */
.validation-message { display: none; color: #f0caca; font-size: 14px; margin-top: 5px; }
.admin-input.error, .admin-select.error { border-color: #dc3545 !important; }

/* --- NOVO CSS PARA CONTROLE DE QUANTIDADE (DESKTOP) --- */
.quantidade-controls {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza no desktop */
    width: 100%;
    max-width: 150px; /* Limita a largura do controle no desktop */
    margin: 0 auto;
}
.btn-quantidade {
    background-color: var(--cor-dourado);
    color: var(--cor-preto);
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    transition: background-color 0.2s;
    line-height: 1; /* Centraliza o texto */
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-quantidade:hover {
    background-color: var(--cor-dourado-hover);
}
.quantidade-display {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--cor-texto);
    padding: 0 5px;
}
/* Oculta o input original no desktop */
.input-hidden-desktop {
    display: none !important;
}

/* Estilo para o novo botao Remover no carrinho (desktop) */
.remover-btn-carrinho {
    padding: 10px 15px; /* Deixa o botao mais largo */
    font-size: 1rem;
    display: block; /* Para que ocupe a celula no desktop */
    text-align: center;
    margin: 0 auto;
}
/* --- FIM NOVO CSS PARA CONTROLE DE QUANTIDADE (DESKTOP) --- */

/* ======================================================= */
/* REVERSAO DE LAYOUT PARA DESKTOP (FORCAR TABELA) */
/* ======================================================= */
/* Garante que o layout de card movel nao afete o desktop */
.container-carrinho .admin-tabela thead {
    display: table-header-group;
}
.container-carrinho .admin-tabela tbody,
.container-carrinho .admin-tabela tr {
    display: table-row-group;
    width: auto;
    margin: 0;
}
.container-carrinho .admin-tabela tr {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: table-row;
}
.container-carrinho .admin-tabela td {
    display: table-cell;
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #444;
    position: static;
}
.container-carrinho .admin-tabela td:nth-child(1) {
    width: 80px; /* Ajusta a largura da imagem no desktop */
}
.container-carrinho .admin-tabela td::before {
    content: none; /* Remove rotulos */
}
.container-carrinho .admin-tabela tr td:nth-child(1) {
    padding: 12px; /* Restaura padding original do TD */
    height: auto;
    border-bottom: 1px solid #444; /* Restaura borda de celula */
}
.container-carrinho .admin-tabela tr td:nth-child(1) img.produto-imagem-carrinho {
    width: 60px !important; /* Retorna a imagem pequena no desktop */
    height: 60px !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
}
/* ======================================================= */
/* NOVO PADRÃO: BARRA DE BUSCA E SELECT (SEARCH-BOX)       */
/* ======================================================= */

.search-box {
    position: relative;
    width: 100%;
}

/* Estilo unificado para INPUT e SELECT dentro da caixa */
.search-box input, 
.search-box select {
    width: 100%;
    /* 45px na direita para dar espaço ao ícone, 15px na esquerda */
    padding: 12px 45px 12px 15px; 
    background-color: #2c2c2c; /* Fundo cinza escuro padrão */
    border: 1px solid #444;
    border-radius: 8px;
    color: var(--cor-texto);
    font-size: 1rem;
    transition: all 0.3s ease;
    
    /* CRÍTICO: Remove a seta nativa do navegador e a seta antiga do CSS */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important; /* Sobrescreve a regra antiga da linha 379 */
}

/* Efeito de Foco (Borda Dourada) */
.search-box input:focus, 
.search-box select:focus {
    border-color: var(--cor-dourado);
    box-shadow: 0 0 0 2px rgba(197, 164, 109, 0.1);
    outline: none;
}

/* Ícone (Lupa ou Seta) fixo na direita */
.search-box i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
    font-size: 1.1rem;
    z-index: 1;
}

/* ======================================================= */
/* AJUSTE DE LAYOUT CARRINHO (DESKTOP) */
/* ======================================================= */
.carrinho-total h3 {
    text-align: right;
    font-size: 1.5rem;
    color: var(--cor-dourado);
    margin-top: 15px;
}
.carrinho-acoes {
    /* Container principal: Distribui espaco em 3 colunas (1/3, 1/3, 1/3) */
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 20px;
    width: 100%;
    margin-top: 20px;
    gap: 15px; /* Adicionado gap entre todos os itens para o calculo */
}

/* Item 1: Continuar Comprando (solto, a esquerda) */
.carrinho-acoes > .admin-btn-cancel-override { /* Usando a classe especifica do Cardapio */
    flex-grow: 1; /* Garante que ocupe 1/3 do espaco total */
    flex-basis: calc((100% - 30px) / 3); /* 1/3 do espaco descontando os gaps */
    min-width: 180px;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    /* Ajuste de margem removido pois o 'gap' trata do espacamento */
    margin-right: 0 !important;
}

/* Item 2 e 3: Botoes Direita (Atualizar + Finalizar) */
.carrinho-acoes .botoes-direita {
    display: flex;
    gap: 15px;
    align-items: stretch;
    flex-wrap: nowrap;

    /* Esta div ocupa os 2/3 restantes */
    flex-grow: 2;
    flex-basis: calc(2 * (100% - 30px) / 3); /* 2/3 do espaco descontando os gaps */

    /* Garante que os botoes internos se dividam */
    justify-content: space-between;
}

/* IGUALA O TAMANHO DOS DOIS BOTOES DENTRO DE BOTOES-DIREITA (Desktop) */
.carrinho-acoes .botoes-direita .admin-btn {
    flex-grow: 1;
    flex-basis: 50%; /* Divide o espaco da div "botoes-direita" igualmente */
    min-width: 150px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* ======================================================= */
/* FIM DOS AJUSTES DO CARRINHO */
/* ======================================================= */

/* ======================================================= */
/* FEEDBACK DE CARRINHO (AJAX) - CORRECAO CRITICA */
/* ======================================================= */
.feedback-adicionado,
.feedback-erro {
    /* Posicao Fixa: Fica flutuante e nao interfere no fluxo do documento */
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    /* PROPRIEDADE CRITICA: Ocultar o elemento */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* Estilos Visuais */
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: bold;
    color: var(--cor-branca);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    pointer-events: none; /* Nao bloqueia o clique no conteudo abaixo */
}

.feedback-adicionado {
    background-color: var(--cor-sucesso); /* Verde */
}

.feedback-erro {
    background-color: var(--cor-erro); /* Vermelho */
}

/* Classe ativada pelo JavaScript para mostrar o feedback */
.feedback-adicionado.show,
.feedback-erro.show {
    opacity: 1;
    visibility: visible;
}
/* ======================================================= */
/* FIM DO FEEDBACK DE CARRINHO */
/* ======================================================= */

/* ======================================================= */
/* ESTILOS ESPECIFICOS DE LOGIN/BUSCA (Identificacao Rápida) */
/* ======================================================= */

/* --- Container Principal --- */
.login-busca-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 40px 20px;
    background-color: var(--cor-fundo-card);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    text-align: center;
    border: 1px solid rgba(197, 164, 109, 0.3); /* Borda mais suave */
}
@media (max-width: 600px) {
    .login-busca-container {
        margin: 30px 10px;
        padding: 30px 15px;
    }
}

.login-busca-container h2 {
    font-family: 'Playfair Display', serif;
    color: var(--cor-dourado);
    margin-bottom: 25px;
    font-size: 2.2rem;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.description-text {
    color: #ccc;
    margin-bottom: 30px;
    font-size: 1.05rem;
}

/* --- Area de Busca (Input + Botao) --- */
.lookup-controls {
    display: flex;
    gap: 10px;
    align-items: stretch; /* Alinha a altura do input com o botão */
    margin-bottom: 20px;
}
.lookup-controls .form-grupo {
    flex-grow: 1;
    margin-bottom: 0;
    text-align: left;
}

/* Estilo do Botão Principal (Buscar) */
.app-btn.cta-primary {
    background-color: var(--cor-dourado);
    color: var(--cor-preto);
    border: none;
    font-weight: bold;
    flex-shrink: 0;
    min-width: 120px;
    transition: background-color 0.2s ease;
}
.app-btn.cta-primary:hover {
    background-color: var(--cor-dourado-hover);
}

/* --- Feedback e Mensagens --- */
#lookup-feedback {
    margin-top: 15px;
    min-height: 1.2em;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 8px 0;
    border-radius: 4px;
}
#lookup-feedback.lookup-error {
    color: var(--cor-erro);
}
#lookup-feedback.lookup-success {
    color: var(--cor-sucesso);
}


/* --- Opções de Fallback (Erro de Conexão) --- */
.action-options {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #444;
}
.action-options .fallback-message {
    color: var(--cor-erro);
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center; /* Alinha a mensagem de erro de fallback */
}

/* Estilo dos Links de Ação (Fallback) */
.action-options a.app-btn {
    display: block;
    margin-bottom: 12px;
    padding: 15px 12px;
    width: 100%;
    font-size: 1.05rem;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
}

/* Botão Login (Preenchido) */
.action-options a.cta-filled {
    background-color: var(--cor-dourado);
    color: var(--cor-preto);
}
.action-options a.cta-filled:hover {
    background-color: var(--cor-dourado-hover);
}

/* Botão Cadastro Rápido (Contorno) */
.action-options a.cta-cancel-outline {
    background-color: transparent;
    color: var(--cor-dourado);
    border: 1px solid var(--cor-dourado);
}
.action-options a.cta-cancel-outline:hover {
    background-color: rgba(197, 164, 109, 0.1);  
    color: var(--cor-dourado-hover);
    border-color: var(--cor-dourado-hover);
}

.separator-text {
    color: #999;
    font-size: 0.9em;
    margin: 15px 0 10px;
}

/* Sobrescreve inputs genéricos com os estilos de altura para a Busca Rápida */
.login-busca-container .app-input {
    height: 48px;
    padding: 12px;
    border-radius: 6px;
}
/* ======================================================= */
/* FIM DOS ESTILOS DE LOGIN/BUSCA */
/* ======================================================= */


/* ======================================================= */
/* DEFINICAO DO FOOTER (PARA ALINHAR E EMPURRAR PARA BAIXO) */
/* ======================================================= */
.main-footer {
    background-color: #0d0d0d; /* Fundo escuro */
    border-top: 2px solid var(--cor-dourado);
    padding: 20px 0;
    margin-top: 40px; /* Garante que nao encoste no conteudo, se o main nao empurrar */
    width: 100%;
    flex-shrink: 0; /* Impede que ele seja comprimido */
}

.footer-content {
    /* desktop: Alinhamento lateral */
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.footer-content p {
    margin: 0;
    color: #aaa;
    text-align: left; /* Garante alinhamento a esquerda para o copyright */
    font-size: 14px;
}
.footer-links a {
    color: var(--cor-dourado);
    text-decoration: none;
    margin-left: 15px;
    transition: color 0.3s;
    font-size: 14px;
}
.footer-links a:hover {
    color: var(--cor-dourado-hover);
}
/* ======================================================= */
/* FIM DA DEFINICAO DO FOOTER */
/* ======================================================= */


/* ======================================================= */
/* 🔑 ESTILOS ESPECIFICOS DE LOGIN/REGISTRO - PADRÃO ADM 🔑 */
/* ======================================================= */

/* Container Principal do Card de Login */
.login-card {
    max-width: 400px;
    margin: 60px auto;
    padding: 35px 30px;
    /* Herda cores de admin-card, mas garante aparência centralizada */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.login-card .titulo-pagina {
    font-size: 2rem;
    margin-bottom: 5px;
}

.login-incentivo-text {
    text-align: center;
    color: #aaa;
    margin-bottom: 30px !important;
    font-size: 0.95em;
}

/* Formulário de Login (admin-form com 1 coluna) */
.login-form.admin-form {
    display: flex; /* Força empilhamento em 1 coluna */
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    grid-template-columns: 1fr; /* Desliga o grid de 2 colunas */
}
.login-form .form-grupo {
    width: 100%;
}

/* INPUTS: Aplicando o estilo de input profissional no login */
.app-input {
    background-color: #333;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 10px;
    color: var(--cor-texto);
    font-size: 16px;
    width: 100%;
    height: 48px; /* Altura profissional */
    box-sizing: border-box;
}


/* 1. Correção do "Esqueceu sua senha?" */
.link-recuperar-senha {
    text-align: right;
    margin-top: -5px; /* Puxa para cima para ficar mais próximo da senha */
    margin-bottom: 5px; /* Espaço antes do botão Entrar */
    width: 100%;
}

.link-recuperar-senha .link-pequeno {
    display: inline-block; /* Garante que é um link, não um bloco de texto */
    color: #999; /* Cor discreta */
    font-size: 0.9em;
    text-decoration: none; /* Remove sublinhado por padrão */
    transition: color 0.2s;
}

.link-recuperar-senha .link-pequeno:hover {
    color: var(--cor-dourado);
    text-decoration: underline;
}


/* Container de links e ações secundárias */
.login-links-container {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333;
    margin-top: 25px;  
}

.login-links-container .link-cadastro {
    width: 100%;
    margin-top: 5px;
    padding: 15px 12px;
}


/* Media Query para dispositivos menores */
@media (max-width: 480px) {
    .login-card {
        margin: 30px 10px;
        padding: 25px 15px;
    }
}
/* FIM DO BLOCO DE AJUSTE */


/* ======================================================= */
/* ESTILOS DE DASHBOARD (Admin) */
/* ======================================================= */
.main-content { padding:20px; width:100%; }
.dashboard-cards {
    display: grid;
    /* Mantém a largura base para desktop */
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.card.kpi {
    background: #1e1e1e;
    border: 1px solid var(--cor-dourado,#C5A46D);
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    transition: transform .2s ease;
}
.card.kpi:hover { transform: translateY(-4px); }
.card.kpi i { font-size: 22px; margin-bottom: 8px; color: var(--cor-dourado,#C5A46D); }
.card.kpi h3 { font-size: 1rem; margin-bottom: 6px; }
.card.kpi p { font-size: 1.2rem; font-weight: bold; }
.card.kpi small { font-size: 0.8rem; color:#bbb; }
.alert-card { border: 1px solid #dc3545 !important; }

/* Estilos de alerta de preço/ação */
.price-alert-card { border-color: #ffc107 !important; background-color: #332b18; }
.price-alert-card i, .price-alert-card h3 { color: #ffc107; }
.price-alert-action {
    display: inline-block; margin-top: 5px; font-size: 0.8rem; font-weight: bold;
    color: #1e1e1e; background-color: #ffc107; padding: 5px 10px; border-radius: 5px;
    text-decoration: none; transition: background-color .2s ease;
}
.price-alert-action:hover { background-color: #ffd24d; }

/* Estilo para os cards de status */
.status-cards .card.kpi { padding: 15px; text-align: center; }
.status-cards .card.kpi i { font-size: 2rem; margin-bottom: 5px; }
.status-cards .card.kpi h3 { font-size: 1.1rem; }
.status-cards .card.kpi p { font-size: 1.5rem; }

/* Dropdown de Período */
.custom-select-dashboard {
    background-color: #2a2a2a; color: #C5A46D; border: 1px solid #C5A46D;
    padding: 5px 10px; border-radius: 5px; font-size: 1rem; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-repeat: no-repeat; background-position: right 10px center;
    background-size: 0.6em; padding-right: 30px;
}

/* Gráficos e Insights - AJUSTADOS PARA COMBINAR COM KPI */
.dashboard-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 25px;
    width: 100%;
}
.chart-card {
    background: #1e1e1e;
    border: 1px solid var(--cor-dourado,#C5A46D); 
    border-radius: 10px; 
    padding: 20px;
    width: 100%;
}
.chart-card h3 {
    color: var(--cor-dourado); 
    font-family: 'Playfair Display', serif; 
    margin-bottom: 15px; 
    padding-bottom: 5px;
    border-bottom: 1px solid #333; 
}
.chart-card canvas { width:100% !important; height:320px !important; }

.insights {
    background: #1e1e1e;
    border: 1px solid var(--cor-dourado,#C5A46D); 
    border-radius: 10px; 
    padding: 20px;
    margin-top: 30px;
}
.insights h3 { margin-bottom: 15px; color: var(--cor-dourado); }
.insights ul { list-style: none; padding: 0; }
.insights li { margin-bottom: 10px; font-size: 0.95rem; }
/* FIM DOS ESTILOS DE DASHBOARD */


/* ======================================================= */
/* RESPONSIVIDADE (MOBILE - Regras de quebra) */
/* ======================================================= */
@media (max-width: 768px) {
    .main-header {
        padding: 10px 20px;
        height: auto;
    }

    .logo img {
        height: 90px;
        margin-top: 0;
    }

    /* Exibe o menu sanduiche apenas no mobile */
    .mobile-toggle {
        display: block;
        font-size: 2.2rem;
        color: var(--cor-dourado);
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .main-nav {
        display: none;
    }

    .main-nav.is-open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #162e29;
        border-top: 2px solid var(--cor-dourado);
        box-shadow: 0 5px 10px rgba(0,0,0,0.3);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.5rem;
        gap: 1rem;
    }

    .main-nav.is-open a {
        font-size: 1.2rem;
        width: 100%;
        padding: 0.5rem 0;
    }

    .hero {
        min-height: 55vh;
    }

    .hero-content {
    background-color: rgba(0, 0, 0, 0.45);
    padding: 30px 35px;
    border-radius: 12px;
    border: 1px solid var(--cor-dourado);
    box-shadow: 0 0 20px rgba(0,0,0,0.35);
}


    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }

    /* Mantem o padding de 10px nas laterais para todas as paginas (Incluindo o carrinho) */
    .container {
        max-width: 100vw;
        padding: 0 10px;
        margin: 10px auto;
    }

    .titulo-pagina {
        font-size: 26px;
    }

    .container p {
        font-size: 14px;
        max-width: 90%;
    }

    /* CORRECAO CARDAPIO (PRODUTOS VISIVEIS) */
    .cardapio-container {
        display: flex; /* Flexbox para empilhamento estavel */
        flex-direction: column;
        align-items: center;
        gap: 25px;
        max-width: 100%;
        padding: 0 5px; /* Reduz o padding interno do cardapio container */
        margin: 30px auto;
    }

    .produto-card {
        max-width: 100%;
        width: 100%;
    }
    .produto-card:hover {
        transform: none;
        box-shadow: 0 0 12px rgba(0,0,0,0.3);
    }
    /* FIM DA CORRECAO CARDAPIO */

    /* CORRECAO ADMIN/MODAIS (PRODUTOS E INSUMOS) - FLEXBOX UNIVERSAL */
    .admin-form,
    .admin-form.form-grid-3,
    .admin-form.composicao-form,
    .medidas-parametros-grid,
    .param-custo-grid,
    .form-ultima-linha {
        /* Converte todos os layouts de Grid para Flexbox empilhavel */
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    /* Garante que todos os elementos ocupem a largura total */
    .admin-form .form-col-2,
    .admin-form .form-col-2-of-3,
    .admin-form .form-col-full,
    .admin-form .form-btn-add,
    .form-grupo,
    .form-ultima-linha > div {
        width: 100% !important; /* Forca a largura total */
        grid-column: auto !important; /* Reseta as regras de Grid */
    }
    
    /* 🔑 AJUSTE CALDAS/PRODUCAO: Seletor (garante que use a largura total) */
    .admin-card > .form-grupo form select.admin-select {
        max-width: 100%; /* No mobile, ocupe 100% */
    }

    /* Ajuste para o Container Principal dos Cards */
    .admin-card {
        padding: 20px 15px;
    }

    /* Empilha os botoes superiores */
    .top-action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .top-action-buttons button {
        width: 100%;
    }

    /* Regras de Modal responsivo */
    .modal-conteudo {
        margin: 10% auto;
        width: 95%;
        max-width: 95%;
    }
    
    /* 🔑 SOLUÇÃO DA TABELA ADMIN: ROLAGEM HORIZONTAL FORÇADA 🔑 */
    
    .tabela-container {
        width: 100%;
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch;
        padding: 0 10px; 
    }

    .admin-tabela {
        min-width: 650px; 
        border-collapse: collapse;
        display: table; 
    }

    .admin-tabela th,
    .admin-tabela td {
        padding: 8px 10px;
        font-size: 13px;
        white-space: nowrap; 
        border-bottom: 1px solid #444;
    }

    .admin-tabela td::before {
        content: none; 
    }
    /* FIM DA CORREÇÃO DE RESPONSIVIDADE DA TABELA */


    /* CORRECAO CARRINHO - LAYOUT DE CARD E IMAGEM (MOBILE) */

    /* Reverte a exibicao da tabela (Mobile) */
    .container-carrinho .admin-tabela thead {
        display: none;
    }
    .container-carrinho .admin-tabela tbody,
    .container-carrinho .admin-tabela tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
    }
    .container-carrinho .admin-tabela tr {
        background-color: var(--cor-fundo-card);
        border: 1px solid rgba(255,255,255,0.05);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        margin-bottom: 20px;
        overflow: hidden;
        padding: 0;
        width: 100%;
    }
    .container-carrinho .admin-tabela td {
        display: block;
        width: 100%;
        padding: 10px 15px;
        border-bottom: none;
        text-align: left;
        position: relative;
    }
    .container-carrinho .admin-tabela td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        font-weight: bold;
        color: #aaa;
    }
    .container-carrinho .admin-tabela td:nth-child(1) {
        padding: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 220px !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }
    .container-carrinho .admin-tabela tr td:nth-child(1) img.produto-imagem-carrinho {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .container-carrinho .admin-tabela td:nth-child(2) {
        font-family: 'Playfair Display', serif;
        font-size: 1.3rem;
        color: var(--cor-dourado);
        text-align: center !important;
        padding-top: 15px;
    }
    .container-carrinho .admin-tabela td:nth-child(2)::before { content: none; } /* Remove rotulo do nome no mobile */
    .container-carrinho .admin-tabela td:nth-child(3)::before { content: 'Preco Unitario:'; }
    .container-carrinho .admin-tabela td:nth-child(5)::before { content: 'Subtotal:'; }

    /* Estilo do controle de quantidade mobile */
    .container-carrinho .admin-tabela td:nth-child(4) {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .container-carrinho .admin-tabela td:nth-child(4)::before {
        content: 'Quantidade:';
        position: static;
        flex-shrink: 0;
    }

    /* Estilo do botao de remover mobile */
    .container-carrinho .admin-tabela td:nth-child(6) {
        text-align: center !important;
        border-top: 1px solid #333;
    }
    .container-carrinho .admin-tabela td:nth-child(6)::before { content: none; }
    .remover-btn-carrinho {
        width: 100%;
        padding: 10px;
        font-size: 0.9rem;
    }

    /* CORRECAO BOTOES DE ACAO MOBILE (Largura Total) */
    .carrinho-acoes {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: 10px;
    }
    .carrinho-acoes .botoes-direita {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    /* Garante que TODOS os botoes de acao ocupem 100% da largura do celular */
    .carrinho-acoes .admin-btn {
        width: 100% !important;
        min-width: auto !important;
        text-align: center;
        padding: 15px !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 0 !important;
    }

    .carrinho-total {
        padding: 20px 0 0 0;
        margin-right: 0;
    }


    /* CORRECAO FOOTER MOBILE */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .footer-content p {
        text-align: center;
    }
    .footer-links {
        display: flex;
        gap: 15px;
    }

    /* 🔑 AJUSTES ESPECÍFICOS DO DASHBOARD (MOBILE) 🔑 */
    
    /* 1. Ajuste do padding principal */
    .main-content {
        padding: 10px;
    }

    /* 2. Cards de KPI e Status (Ajuste fino da grade) */
    .dashboard-cards {
        gap: 10px;
        /* Força colunas menores, permitindo 2 ou 3 cards por linha */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    
    .status-cards .card.kpi {
        font-size: 0.9rem;
    }

    /* 3. Gráficos (Força 1 coluna para evitar esmagamento) */
    .dashboard-charts {
        grid-template-columns: 1fr; /* Empilha os gráficos */
        gap: 20px;
    }
    .chart-card {
        padding: 15px;
    }

    /* 4. Dropdown de Período (Ajusta o seletor e título) */
    .main-content > div:nth-child(3) { 
        flex-direction: column; 
        align-items: flex-start !important;
        margin: 20px 0 10px 0 !important;
        gap: 5px;
    }

    /* FIM DOS AJUSTES DO DASHBOARD */


    /* --- Responsividade Específica para Minha Conta --- */
    .minha-conta-page { padding-left: 10px; padding-right: 10px; }
    
    .minha-conta-page .page-title,
    .minha-conta-page .subtitle {
        text-align: center;
    }
    .minha-conta-page .page-title {
        font-size: 2rem;
    }
    .tabs-nav {
        justify-content: center;
        gap: 8px;
    }
    .cliente-data-display p {
        text-align: center; /* Centraliza no mobile */
    }
    
    /* Tabela Responsiva para Pedidos (Layout de Card) */
    .minha-conta-tabela thead { display: none; }
    .minha-conta-tabela tbody tr { display: block; margin-bottom: 20px; padding: 10px; border: 1px solid #333; }
    .minha-conta-tabela tbody tr td {  
        display: block;  
        text-align: right !important;  
        padding-left: 50% !important;  
        position: relative;
        border-bottom: none;
    }
    .minha-conta-tabela tbody tr td:first-child {
        font-family: 'Playfair Display', serif;
        font-size: 1.2rem;
        color: var(--cor-dourado);
        text-align: center !important;
        padding-left: 15px !important;
    }
    .minha-conta-tabela td::before {  
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
        color: #999;
    }
    .acoes-pedido-cliente { text-align: center !important; padding-top: 15px; border-top: 1px solid #333; }
    .form-grid { grid-template-columns: 1fr; }
    
    .planos-grid {
        padding: 0;
    }

    /* Ajuste para ícone de Assinatura no Mobile */
    .produto-imagem-carrinho.plano-placeholder::after {
        font-size: 20px;
    }
}

/* ======================================================= */
/* 🆕 ESTILOS DO MODAL (VERSÃO CLÁSSICA + CATEGORIAS) */
/* ======================================================= */

/* Fundo e Caixa */
.modal-overlay { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.9); z-index: 9999; 
    justify-content: center; align-items: center; backdrop-filter: blur(5px);
}
.modal-box { 
    background: #1e1e1e; 
    width: 95%; max-width: 600px; height: 85vh; 
    border-radius: 12px; border: 1px solid var(--cor-dourado); 
    display: flex; flex-direction: column; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.8); position: relative;
}

/* Cabeçalho Fixo (Com Abas) */
.modal-header { flex-shrink: 0; background: #252525; border-bottom: 1px solid #333; display: flex; flex-direction: column; }
.header-top { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.header-top h2 { margin: 0; font-size: 1.3rem; color: var(--cor-dourado); }
.close-modal { background:none; border:none; color:#888; font-size:1.8rem; cursor:pointer; }
.close-modal:hover { color: #fff; }

/* 🎨 ESTILO CORRIGIDO DAS ABAS DE CATEGORIA (PREMIUM) */ 
/* Container das Abas */
.tabs-categorias { 
    display: flex; 
    gap: 10px; 
    overflow-x: auto; 
    padding: 0 20px 15px 20px; 
    /* Remove a barra de rolagem feia */
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    /* Alinhamento */
    align-items: center;
    justify-content: flex-start;
}
.tabs-categorias::-webkit-scrollbar { display: none; }

/* O Botão da Categoria (Inativo) */
.tab-cat { 
    background-color: transparent; /* Fundo transparente para ficar elegante */
    border: 1px solid #444; /* Borda cinza escura sutil */
    color: #aaa; /* Texto cinza claro */
    padding: 10px 18px; /* Um pouco maior para facilitar o toque */
    border-radius: 4px; /* Cantos levemente arredondados (padrão do site) e não redondos */
    white-space: nowrap; 
    cursor: pointer; 
    font-family: 'Montserrat', sans-serif; /* Fonte padrão do site */
    font-size: 0.85rem; 
    font-weight: 600;
    text-transform: uppercase; /* Letras maiúsculas para dar autoridade */
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Hover (Ao passar o mouse) */
.tab-cat:hover { 
    border-color: var(--cor-dourado); 
    color: var(--cor-dourado); 
    background-color: rgba(197, 164, 109, 0.05); /* Leve brilho dourado no fundo */
}

/* Ativo (Selecionado) */
.tab-cat.ativo { 
    background-color: var(--cor-dourado); /* Fundo Dourado */
    color: #000; /* Texto Preto (Alto contraste) */
    border-color: var(--cor-dourado); 
    box-shadow: 0 2px 10px rgba(197, 164, 109, 0.2); /* Sombra dourada suave */
    font-weight: bold;
}

/* Corpo da Lista (Visual Limpo Anterior) */
.modal-body { flex-grow: 1; overflow-y: auto; padding: 15px; background: #1e1e1e; }

.produto-item { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 12px; background: #2a2a2a; margin-bottom: 10px; 
    border-radius: 8px; border: 1px solid #333;
}
.produto-item.selecionado { border-color: var(--cor-dourado); background: #332b00; } /* Destaque sutil */

.produto-info { display: flex; flex-direction: column; }
.produto-info h4 { margin: 0 0 5px 0; color: #fff; font-size: 1rem; }
.produto-info span { color: var(--cor-dourado); font-size: 0.9rem; font-weight: bold; }

/* ======================================================= */
/* ESTILOS DA PÁGINA PERSONALIZAR BOX (CLUBE ASSINATURA) */
/* ======================================================= */

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

.container-personalizacao .titulo-pagina {
    color: var(--cor-dourado);
    font-size: 2rem;
    margin-bottom: 10px;
    text-align: center;
}

/* Banner de Limite de Bolos */
.banner-limite {
    background: linear-gradient(135deg, rgba(197, 164, 109, 0.2), rgba(197, 164, 109, 0.05));
    border: 2px solid var(--cor-dourado);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
}

.banner-limite h3 {
    color: var(--cor-dourado);
    margin: 0 0 10px 0;
    font-size: 1.3rem;
}

.banner-limite p {
    color: #ccc;
    margin: 5px 0;
}

.contador-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 1.1rem;
}

.contador-box .numero {
    background: var(--cor-dourado);
    color: #000;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.5rem;
    min-width: 60px;
}

.contador-box.completo .numero {
    background: var(--cor-sucesso);
    color: white;
}

.contador-box.excedido .numero {
    background: var(--cor-erro);
    color: white;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Info do Plano */
.info-plano {
    background: var(--cor-fundo-card);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.info-plano h2 {
    color: var(--cor-dourado);
    margin-top: 0;
    font-size: 1.5rem;
}

.categorias-permitidas {
    background: rgba(197, 164, 109, 0.1);
    border-left: 3px solid var(--cor-dourado);
    padding: 15px;
    margin-top: 15px;
    border-radius: 4px;
}

.categoria-badge {
    background: var(--cor-dourado);
    color: #000;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 5px;
    display: inline-block;
    margin-bottom: 5px;
}

/* Grid de Produtos */
.produto-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px; 
    margin-top: 30px;
}

.card-produto-box {
    background: var(--cor-fundo-card);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid #444;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-produto-box:hover {
    transform: translateY(-5px);
    border-color: var(--cor-dourado);
}

.card-produto-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
    background: #1a1a1a;
}

.card-produto-box h4 { 
    margin: 0 0 10px 0; 
    color: var(--cor-dourado); 
    font-size: 1.2rem;
}

.card-produto-box p { 
    color: #aaa; 
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 15px;
    flex-grow: 1;
}

.preco-produto {
    font-weight: bold; 
    color: var(--cor-dourado);
    font-size: 1.3rem;
    margin: 10px 0;
}

/* Controles de Quantidade */
.quantidade-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
}

.quantidade-control button {
    background: var(--cor-dourado);
    color: #000;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s;
}

.quantidade-control button:hover {
    transform: scale(1.1);
}

.quantidade-control button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quantidade-control input {
    width: 50px;
    text-align: center;
    border: 1px solid #444;
    background: #1a1a1a;
    color: var(--cor-texto);
    padding: 5px;
    border-radius: 4px;
}

/* Botão Adicionar */
.btn-adicionar-box { 
    background-color: var(--cor-sucesso); 
    color: white; 
    padding: 12px 20px; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    transition: background-color 0.3s;
}

.btn-adicionar-box:hover {
    background-color: #218838;
}

.btn-adicionar-box:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Mensagem Vazio */
.mensagem-vazio {
    text-align: center;
    padding: 40px;
    color: #aaa;
    background: var(--cor-fundo-card);
    border-radius: 8px;
}

.mensagem-vazio h3 {
    margin-bottom: 15px;
}

/* Alertas */
.alert {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
}

.alert-error {
    background: var(--cor-erro);
    color: white;
}

.alert-warning {
    background: #ffc107;
    color: #000;
}

/* Carrinho Flutuante */
.carrinho-flutuante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--cor-dourado);
    color: #000;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    cursor: pointer;
    font-weight: bold;
    z-index: 1000;
    transition: transform 0.3s;
}

.carrinho-flutuante:hover {
    transform: scale(1.05);
}

.carrinho-flutuante.completo {
    background: var(--cor-sucesso);
    color: white;
}

.carrinho-flutuante.excedido {
    background: var(--cor-erro);
    color: white;
}

.carrinho-flutuante .contador {
    background: #000;
    color: var(--cor-dourado);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    font-size: 0.9rem;
}

.carrinho-flutuante.completo .contador {
    background: white;
    color: var(--cor-sucesso);
}

.carrinho-flutuante.excedido .contador {
    background: white;
    color: var(--cor-erro);
}

/* Debug Box */
.debug-box {
    background: #000;
    color: #0f0;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    border: 2px solid #0f0;
    max-height: 500px;
    overflow-y: auto;
}

.debug-box h3 {
    color: #0f0;
    margin-top: 0;
}

.debug-item {
    margin: 5px 0;
    padding: 5px;
    border-left: 2px solid #0f0;
    padding-left: 10px;
}

/* ======================================================= */
/* RESPONSIVIDADE - PERSONALIZAR BOX */
/* ======================================================= */
@media (max-width: 768px) {
    .container-personalizacao {
        padding: 10px;
        margin: 20px auto;
    }
    
    .banner-limite {
        padding: 15px;
    }
    
    .banner-limite h3 {
        font-size: 1.1rem;
    }
    
    .contador-box {
        font-size: 1rem;
        gap: 10px;
    }
    
    .contador-box .numero {
        font-size: 1.3rem;
        padding: 8px 15px;
        min-width: 50px;
    }
    
    .produto-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .card-produto-box {
        max-width: 100%;
    }
    
    .carrinho-flutuante {
        bottom: 15px;
        right: 15px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}


/* Botões Simples */
.qtd-controle { display: flex; align-items: center; background: #111; border-radius: 6px; padding: 2px; }
.btn-qtd { background: #333; color: #fff; border: none; width: 32px; height: 32px; border-radius: 4px; cursor: pointer; font-size: 1.1rem; font-weight: bold; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-qtd:hover { background: #555; }
.qtd-valor { color: #fff; font-weight: bold; width: 30px; text-align: center; font-size: 1.1rem; }

/* Rodapé */
.frete-progress-area { flex-shrink: 0; padding: 10px 20px; background: #252525; border-top: 1px solid #333; }
.progress-bar-bg { background: #000; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 5px; }
.progress-bar-fill { background: var(--cor-sucesso); height: 100%; width: 0%; transition: width 0.4s; }
.frete-msg { font-size: 0.85rem; color: #ccc; text-align: center; }

.modal-footer { flex-shrink: 0; padding: 15px 20px; background: #111; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; border-top: 1px solid #333; }
.btn-cancelar { background: transparent; border: 1px solid #555; color: #aaa; padding: 12px; border-radius: 6px; cursor: pointer; font-weight: bold; text-transform: uppercase; }
.btn-confirmar { background: var(--cor-dourado); color: #000; border: none; padding: 12px; border-radius: 6px; font-weight: bold; text-transform: uppercase; cursor: pointer; opacity: 0.5; pointer-events: none; }
.btn-confirmar.ativo { opacity: 1; pointer-events: all; }