/* =================================
   ARQUIVO DE ESTILO CENTRAL (style.css)
   =================================
*/

/* 1. Definição das Variáveis de Cores */
:root {
    --cor-fundo: #f8f9fa;
 --cor-texto: #212529;
    --cor-fundo-card: #ffffff;
    --cor-borda-card: rgba(0, 0, 0, 0.125);
    --cor-fundo-modal: #ffffff;
    --cor-fundo-header: #ffffff;
    --cor-fundo-botao-tema: #f8f9fa;
    --bs-primary: #0d6efd;
 /* Adicionada variável do azul do Bootstrap */
}

[data-bs-theme="dark"] {
    --cor-fundo: #212529;
    --cor-texto: #dee2e6;
    --cor-fundo-card: #343a40;
 --cor-borda-card: rgba(255, 255, 255, 0.1);
    --cor-fundo-modal: #2b3035;
    --cor-fundo-header: #2b3035;
    --cor-fundo-botao-tema: #343a40;
 }

/* 2. Aplicando as Variáveis aos Elementos */
body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    padding-bottom: 80px;
 /* Espaço para o rodapé de navegação */
}
header { background-color: var(--cor-fundo-header); }
.card { background-color: var(--cor-fundo-card); border-color: var(--cor-borda-card);
 }
[data-bs-theme="dark"] .card, 
[data-bs-theme="dark"] .card-title, 
[data-bs-theme="dark"] .card-text, 
[data-bs-theme="dark"] .text-dark {
    color: var(--cor-texto) !important;
}
.modal-content { background-color: var(--cor-fundo-modal);
 }

/* 3. Estilo do Botão Seletor de Tema com Imagens */
.theme-toggler {
    border-radius: 50%; width: 40px;
 height: 40px; display: flex; align-items: center;
    justify-content: center; background-color: var(--cor-fundo-botao-tema);
    border: 1px solid var(--cor-borda-card); padding: 0;
 }
.theme-toggler img { width: 16px; height: 16px; }
.theme-toggler .icon-sun { display: none; }
.theme-toggler .icon-moon { display: block;
 }
[data-bs-theme="dark"] .theme-toggler .icon-sun { display: block; }
[data-bs-theme="dark"] .theme-toggler .icon-moon { display: none;
 }

/* 4. Estilo do Rodapé de Navegação para Clientes */
.footer-nav {
    position: fixed; bottom: 0; left: 0;
 right: 0;
    background-color: var(--cor-fundo-header);
    border-top: 1px solid var(--cor-borda-card);
    z-index: 1020; padding: 0.5rem 0;
 }
.footer-nav .nav-link {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; color: var(--cor-texto); font-size: 0.75rem;
 }
.footer-nav .footer-icon { width: 24px; height: 24px; margin-bottom: 0.25rem; }

/* 5. Regra Corrigida para Inverter a Cor dos Ícones */
[data-bs-theme="dark"] .footer-icon,
[data-bs-theme="dark"] .theme-toggler img,
[data-bs-theme="dark"] .btn-outline-secondary img {
    filter: invert(1) grayscale(100%) brightness(200%);
 }

/* ESTILOS PARA AS OPÇÕES DENTRO DO MODAL */
.opcao-grupo { margin-top: 1.5rem; }
.opcao-grupo h4 { font-size: 1.1rem; font-weight: 600;
 margin-bottom: 0.75rem; }
.form-check-input { display: none; }

.form-check-label-btn {
    display: flex; /* MUDANÇA: usa flex para alinhar imagem e texto */
    align-items: center;
    width: 100%;
    text-align: left;
 padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--cor-borda-card);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
 }
.form-check-label-btn:hover {
    border-color: var(--bs-primary); background-color: rgba(13, 110, 253, 0.1);
 }
.form-check-input:checked + .form-check-label-btn {
    background-color: var(--bs-primary); color: white;
    border-color: var(--bs-primary); font-weight: 500;
 }

/* ==============================================
   7. ESTILOS PARA O SELETOR DE QUANTIDADE
   ==============================================
*/
.adicional-item {
    display: flex;
 justify-content: space-between; align-items: center;
    padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--cor-borda-card);
}
.adicional-item:last-child { border-bottom: none; }
.adicional-nome { 
    font-weight: 500;
    display: flex; /* MUDANÇA: usa flex para alinhar imagem e texto */
    align-items: center;
 }
.quantity-selector { display: flex; align-items: center; }
.quantity-btn {
    width: 32px; height: 32px;
    background-color: var(--bs-primary);
    color: white;
 border: 1px solid var(--bs-primary);
    font-size: 1.2rem; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1;
 }
.quantity-btn.minus-btn { border-radius: 0.375rem 0 0 0.375rem; }
.quantity-btn.plus-btn { border-radius: 0 0.375rem 0.375rem 0;
 }
.quantity-input {
    width: 40px; height: 32px; text-align: center;
    border: 1px solid var(--cor-borda-card); border-left: none; border-right: none;
 background-color: var(--cor-fundo-card); color: var(--cor-texto);
    -moz-appearance: textfield; /* Firefox */
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
 }

/* ==============================================
   8. LAYOUT FORÇADO PARA O BOTÃO DO CARRINHO
   ==============================================
*/
.cart-button-layout {
    display: flex !important;
 justify-content: space-between !important;
    align-items: center !important;
}

/* ==============================================
   9. NOVOS ESTILOS PARA BANNER E MINIATURAS
   ==============================================
*/
/* Estilo do Banner no topo do modal do cliente */
#modal-product-img {
    width: 100%;
 height: 180px;
    object-fit: cover;
    /* Margens negativas para 'sangrar' para fora do padding do corpo do modal */
    margin: -1rem -1rem 1rem -1rem;
 border-radius: var(--bs-modal-inner-border-radius) var(--bs-modal-inner-border-radius) 0 0;
}

/* Miniatura para opções de sabor/adicional no modal do cliente */
.option-thumbnail {
    width: 40px;
 height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
}

/* Miniatura para o painel de admin */
.admin-thumbnail {
    width: 60px;
 height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
    border: 1px solid var(--cor-borda-card);
}