/* Reset e Base */
body { 
    font-family: 'Arial', sans-serif; 
    margin: 0; 
    padding: 0; 
    background: #f9f9f9; 
    color: #333; 
}
/* Adiciona padding na parte inferior do body para não esconder conteúdo atrás do footer */
body.step-sabores { 
    padding-bottom: 90px; 
} 

.container { 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 0; 
    background: white; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
}

/* ------------------------------------------- */
/* NOVAS CORES DE DESTAQUE */
/* ------------------------------------------- */
.cor-principal, .header h1, .tamanho-opcao strong { 
    color: #2C5F2D; /* VERDE ESCURO NEUTRO */
} 
.cor-secundaria { 
    color: #ff8c00; /* Laranja Escuro: Foco/Total - Mantido */
}

/* Títulos */
h1 { 
    text-align: center; 
    margin-bottom: 20px; 
}
h2 { 
    border-bottom: 2px solid #eee; 
    padding-bottom: 5px; 
    margin-top: 25px; 
    color: #ff8c00; /* Laranja */
    font-size: 1.4em; 
} 

/* ------------------------------------------- */
/* CABEÇALHO CORRIGIDO: Logo Esquerda, Texto Meio-Direita */
/* ------------------------------------------- */
.header {
    background-color: #2C5F2D; /* Fundo do header com a cor principal (Verde) */
    color: white;
    padding: 15px 20px; /* Diminui o padding para reduzir a altura */
    display: flex; /* Habilita o Flexbox para alinhar itens */
    align-items: center; /* Alinha verticalmente no centro */
    position: relative; 
}

.header img {
    /* O logo está na esquerda, com margem à direita */
    width: 100px; /* Reduzido para 100px para caber melhor na lateral */
    height: auto;
    margin-right: 15px;
    flex-shrink: 0; /* Impede que a imagem encolha */
}

.header-text {
    /* Contém o título e o endereço */
    flex-grow: 1; /* Ocupa o espaço restante */
    text-align: left; /* Alinha o texto à esquerda do bloco */
}

.header h1 {
    color: white; 
    margin: 0;
    font-size: 1.8em; /* Reduzido para caber melhor */
    text-align: left; /* Garante alinhamento à esquerda */
}

.header p {
    margin: 0;
    font-size: 0.9em;
    color: #ccc; 
    text-align: left; /* Garante alinhamento à esquerda */
}

/* Botão + Info no cabeçalho */
.btn-info-header {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%); /* Centraliza verticalmente */
    background: #ff8c00; 
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    flex-shrink: 0; /* Impede que o botão encolha */
}
.btn-info-header:hover {
    background: #cc7000;
}

/* ------------------------------------------- */
/* Aviso de Entrega Grátis (Mais Discreto) */
/* ------------------------------------------- */
.aviso-entrega-gratis {
    background-color: #f7f7f7; /* Fundo cinza bem claro */
    color: #2C5F2D; /* Cor principal (Verde Escuro) */
    text-align: center;
    padding: 8px 15px;
    font-size: 1em; /* Fonte ligeiramente menor */
    font-weight: bold;
    margin-bottom: 20px; 
    border-bottom: 2px dashed #ccc; /* Linha tracejada para separação discreta */
}

/* Conteúdo Principal */
.content {
    padding: 0 20px 20px 20px; /* Removido padding superior */
}

/* ------------------------------------------- */
/* BOTÕES DE AÇÃO E CONTROLES */
/* ------------------------------------------- */
.btn-primary {
    display: block;
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    color: white;
    background-color: #2C5F2D; 
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover:not(:disabled) {
    background-color: #3E8E41; 
}

/* Botão de Voltar Tamanho */
.btn-voltar-tamanho {
    background:#555; 
    color: white; 
    border: none; 
    padding: 8px 15px; 
    border-radius: 5px; 
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 0.9em;
}

/* Botões Pequenos de Sabor (+/-) */
.sabor-controle button {
    background-color: #ff8c00; 
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2em;
    cursor: pointer;
    transition: opacity 0.2s;
}

/* ------------------------------------------- */
/* TAMANHOS (Opções de Radio) */
/* ------------------------------------------- */
.tamanho-opcao {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 15px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
}

.tamanho-opcao input[type="radio"] {
    margin-right: 10px; 
    transform: scale(1.2); 
    flex-shrink: 0;
}

.tamanho-opcao .info {
    flex-grow: 1;
    font-size: 0.95em;
}
/* AJUSTE: white-space: nowrap; para evitar que R$ quebre a linha */
.tamanho-opcao .preco {
    font-weight: bold;
    color: #ff8c00; 
    white-space: nowrap; 
}

.tamanho-opcao:hover {
    border-color: #2C5F2D; 
    box-shadow: 0 0 5px rgba(44, 95, 45, 0.2);
}

/* ------------------------------------------- */
/* ITENS E LISTAS (Sabores e Adicionais) */
/* ------------------------------------------- */
.item-sabor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
.sabor-info { flex-grow: 1; margin-right: 15px; }
.sabor-info strong { color: #333; font-size: 1.05em; }
.sabor-info p { margin: 3px 0 0; font-size: 0.9em; color: #666; }
.sabor-controle { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 1.1em; }
.sabor-controle span { width: 20px; text-align: center; }

.categoria-titulo {
    background-color: #f0f0f0;
    color: #2C5F2D; 
    padding: 8px 10px;
    margin: 20px -20px 10px -20px; 
    font-size: 1.1em;
    font-weight: bold;
    border-left: 5px solid #ff8c00; 
}

/* ------------------------------------------- */
/* ETAPA 3 - FINALIZAÇÃO (FORMULÁRIO) */
/* ------------------------------------------- */
label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: bold; color: #333; }
input[type="text"], input[type="number"], select, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; 
}

.endereco-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 10px; 
}
.endereco-grid input {
    width: 100%; 
    box-sizing: border-box;
}

/* ------------------------------------------- */
/* CARRINHO FIXO (RODAPÉ) */
/* ------------------------------------------- */
#carrinho-fixo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    transform: translateX(-50%);
    left: 50%;
    box-sizing: border-box; 
    
    background-color: #333; 
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: none; 
}

#carrinho-fixo .total-info { font-size: 1.1em; }
#carrinho-fixo #total-valor-fixo { font-size: 1.3em; color: #ff8c00; }
#carrinho-fixo .btn-avancar {
    background-color: #ff8c00; 
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

/* ------------------------------------------- */
/* MODAL E WHATSAPP FLUTUANTE */
/* ------------------------------------------- */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 90%; max-width: 400px; border-radius: 10px; position: relative; }
.close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close-btn:hover, .close-btn:focus { color: #2C5F2D; text-decoration: none; cursor: pointer; }
.modal-info a { color: #2C5F2D; text-decoration: none; }

.whatsapp-float-btn {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366; 
    color: #fff;
    border-radius: 50px;
    text-align: center;
    z-index: 100;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    display: none; 
    text-decoration: none;
    /* Ajuste de alinhamento do ícone: */
    line-height: 60px; 
    font-size: 2em; 
}
.whatsapp-float-btn span {
    display: block; 
    line-height: 60px; 
    height: 60px;
}

/* ------------------------------------------- */
/* NOVOS ESTILOS PARA ÍCONES DE REDES NO HEADER (ALTO CONTRASTE) */
/* ------------------------------------------- */

/* Estilo do container dos novos ícones */
.contato-header {
    margin-top: 8px; /* Pequeno espaçamento abaixo do texto Cruz Alta - RS */
    display: flex;
    flex-direction: column; /* Coloca WhatsApp e Instagram em linhas separadas */
    gap: 5px; /* Espaço vertical entre as linhas de contato */
    align-items: flex-start; /* Alinha os itens à esquerda */
}

/* Estilo geral para os links de ícone/texto */
.contato-header a {
    color: white; /* Cor do texto no header (ALTO CONTRASTE) */
    text-decoration: none; /* Remove sublinhado */
    font-size: 0.9em; /* Tamanho da fonte */
    font-weight: bold; /* Deixa o texto em negrito */
    display: flex; /* Habilita flexbox para alinhar ícone e texto */
    align-items: center; /* Alinha verticalmente */
    transition: opacity 0.2s;
}

.contato-header a:hover {
    opacity: 0.8;
}

/* Estilo do ícone */
.contato-header i {
    font-size: 1.1em; 
    margin-right: 5px; /* Espaço entre o ícone e o texto */
}

/* Cor do ícone do WhatsApp no header - MANTEM A COR ORIGINAL DO WA */
.contato-header a .fa-whatsapp {
    color: #25d366; 
}

/* Cor do ícone do Instagram no header - MANTEM A COR ORIGINAL DO IG */
.contato-header a .fa-instagram {
    color: #C13584; 
}

/* Estilo do texto ao lado do ícone */
.contato-header .contato-texto {
    color: white; /* Garante que o texto fique branco */
}