/* 
 * Ficheiro: public/css/style.css
 * Documentação: Folha de estilos global do projeto "Sol e Sombra Bifanas"
 */

/* Variáveis CSS Dinâmicas (Tema Claro) */
:root {
    --cor-fundo-body: #fdfbf7;
    --cor-texto-body: #333333;
    --cor-primaria: #4a3018;
    --cor-texto-primario: #ffffff;
    --cor-secundaria: #005f69;
    --cor-texto-secundario: #ffffff;
    --cor-destaque: #d4a32d;
    --cor-fundo-cartao: #f4eedc;
    --cor-borda-cartao: #c2b292;
}

html {
    scroll-behavior: smooth;
}
section[id] {
    scroll-margin-top: 140px;
}

/* Temas Dinâmicos */
[data-theme="escuro"] {
    --cor-fundo-body: #222222;
    --cor-texto-body: #f0f0f0;
    --cor-primaria: #111111;
    --cor-texto-primario: #ffffff;
    --cor-secundaria: #333333;
    --cor-texto-secundario: #ffffff;
    --cor-fundo-cartao: #2a2a2a;
    --cor-borda-cartao: #555555;
}
[data-theme="sombra"] {
    --cor-fundo-body: #3d2612;
    --cor-texto-body: #fdfbf7;
    --cor-primaria: #2b1a0c;
    --cor-texto-primario: #d4a32d;
    --cor-secundaria: #4a3018;
    --cor-texto-secundario: #ffffff;
    --cor-fundo-cartao: #4a3018;
    --cor-borda-cartao: #d4a32d;
}
[data-theme="petroleo"] {
    --cor-fundo-body: #004d55;
    --cor-texto-body: #ffffff;
    --cor-primaria: #00363b;
    --cor-texto-primario: #d4a32d;
    --cor-secundaria: #005f69;
    --cor-texto-secundario: #ffffff;
    --cor-fundo-cartao: #005f69;
    --cor-borda-cartao: #d4a32d;
}

/* Estilos Globais */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--cor-fundo-body);
    color: var(--cor-texto-body);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.tasca-font {
    font-family: 'Special Elite', cursive;
    letter-spacing: 1px;
}
.bg-primario {
    background-color: var(--cor-primaria) !important;
    color: var(--cor-texto-primario);
    transition: 0.3s;
}
.bg-secundario {
    background-color: var(--cor-secundaria) !important;
    color: var(--cor-texto-secundario);
    transition: 0.3s;
}
.text-destaque {
    color: var(--cor-destaque) !important;
}

/* Navegação e Rodapé */
.navbar-custom {
    background-color: var(--cor-primaria);
    border-bottom: 4px solid var(--cor-destaque);
    transition: background-color 0.3s ease;
}
.navbar-custom .nav-link {
    color: var(--cor-texto-primario);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s;
}
.navbar-custom .nav-link:hover {
    color: var(--cor-destaque);
}
.logo-navbar {
    max-height: 45px;
    width: auto;
    transition: 0.3s;
}
.logo-footer {
    max-height: 100px;
    width: auto;
    margin-bottom: 1.5rem;
}

/* Elementos Visuais e Decorações */
.seccao-decorada {
    position: relative;
    overflow: hidden;
}
.decoracao-circulo {
    position: absolute;
    z-index: 0;
    opacity: 0.10;
    pointer-events: none;
}
.circulo-1 {
    top: 20px;
    left: 450px;
    width: 450px;
}
.circulo-2 {
    top: 30px;
    right: 250px;
    width: 350px;
}

/* Botões */
.btn-destaque {
    background-color: var(--cor-destaque);
    color: #111;
    font-weight: bold;
    border: 2px solid var(--cor-destaque);
    border-radius: 2px;
    transition: 0.3s;
}
.btn-destaque:hover {
    background-color: #2a1d15;
    color: var(--cor-destaque);
}
.btn-outline-secundario {
    border: 2px solid var(--cor-secundaria);
    color: var(--cor-secundaria);
    font-weight: 600;
    border-radius: 2px;
}
.btn-outline-secundario:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-texto-secundario);
}

/* Secção Hero e Lousa */
.lousa-banner-container {
    position: relative;
    background-color: var(--cor-primaria);
    padding: 3rem 0;
    /*border-bottom: 8px solid var(--cor-secundaria);*/
    transition: 0.3s;
}
.img-carrossel {
    height: 60vh;
    object-fit: cover;
    opacity: 0.6;
}
.overlay-texto-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    width: 100%;
}

/* Atenção: A imagem de fundo agora usa '../img/' porque o CSS está dentro da pasta css/ */
.bg-azulejo {
    background-image: url('../img/azulejo.png');
    background-repeat: repeat;
    background-size: 150px auto;
    border-bottom: 4px solid var(--cor-primaria);
    border-top: 4px solid var(--cor-primaria);
}

/* Moldura de Madeira (Rústica) */
.moldura-madeira {
    background-color: #5c3a21;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 4px, rgba(0,0,0,0.06) 4px, rgba(0,0,0,0.06) 8px), linear-gradient(to right, #4a2e17, #7a4b2a, #4a2e17);
    padding: 18px;
    border-radius: 6px;
    border-top: 8px solid #8b5a33;
    border-left: 8px solid #6b4226;
    border-right: 8px solid #3d2412;
    border-bottom: 8px solid #26140a;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.8);
    max-width: 600px;
    margin: 0 auto;
    transition: 0.3s;
}
.lousa-tasca {
    background-color: #1a1a1a;
    border: 2px solid #0a0a0a;
    padding: 2.5rem;
    border-radius: 2px;
}
.texto-giz {
    font-family: 'Special Elite', cursive;
    color: #f9f9f9;
    letter-spacing: 1px;
}
.linha-giz {
    border-top: 2px dashed rgba(255, 255, 255, 0.3);
    margin: 1.5rem 0;
}
.item-lousa {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
    padding-bottom: 0.5rem;
}

/* Ementa e Comentários */
.categoria-ementa {
    background: var(--cor-fundo-cartao);
    padding: 2.5rem;
    border-radius: 2px;
    border: 4px double var(--cor-borda-cartao);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.03), 0 8px 20px rgba(0,0,0,0.08);
    transition: 0.3s;
    position: relative;
    z-index: 1;
}
.border-bottom-pontilhado {
    border-bottom: 2px dashed var(--cor-borda-cartao);
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
}
.foto-miniatura img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 2px;
    border: 2px solid var(--cor-borda-cartao);
    filter: sepia(20%);
}
.preco-ementa {
    color: var(--cor-destaque);
    font-weight: 700;
    font-size: 1.2rem;
    background-color: var(--cor-primaria);
    color: var(--cor-fundo-cartao);
    padding: 2px 8px;
    border-radius: 2px;
    margin-left: 10px;
}

.comentario-card {
    background-color: var(--cor-fundo-cartao);
    border: 2px solid var(--cor-borda-cartao);
    border-top: 4px solid var(--cor-secundaria);
    padding: 2rem;
    border-radius: 2px;
    transition: 0.3s;
}
.quote-icon {
    font-size: 3rem;
    color: var(--cor-destaque);
    line-height: 1;
    margin-bottom: -1rem;
    font-family: 'Special Elite', cursive;
}
.estrelas-tasca {
    color: var(--cor-destaque);
    font-size: 1.2rem;
}

/* Torna o interruptor do switch mais comprido e estilizado */
.form-switch .form-check-input.switch-largo {
    width: 3.4em !important;
    height: 1.7em !important;
    cursor: pointer;
    transition: background-position 0.2s ease-in-out, background-color 0.2s;
}
/* Garante que o switch fica bem alinhado verticalmente com o texto */
.form-check.form-switch {
    padding-left: 0 !important;
}

/* --- CORES PERSONALIZADAS DOS SWITCHES --- */
.form-check.form-switch {
    padding-left: 0 !important;
}
.switch-largo {
    width: 3.4em !important;
    height: 1.7em !important;
    cursor: pointer;
    margin-left: 0 !important;
    transition: background-position 0.2s ease-in-out, background-color 0.2s;
}

/* --- LÓGICA INVERTIDA DOS SWITCHES --- */
.form-check.form-switch {
    padding-left: 0 !important;
}
.switch-largo {
    width: 3.4em !important;
    height: 1.7em !important;
    cursor: pointer;
    margin-left: 0 !important;
    transition: background-position 0.2s ease-in-out, background-color 0.2s;
}

/* LIGADO (Verde) -> Bolinha forçada para a ESQUERDA */
.switch-estado:checked, .switch-modal:checked, .switch-semana:checked {
    background-color: #198754 !important; /* Verde */
    border-color: #198754 !important;
    background-position: left center !important; /* Magia aqui */
}

/* DESLIGADO (Vermelho) -> Bolinha forçada para a DIREITA */
.switch-estado:not(:checked), .switch-modal:not(:checked) {
    background-color: #dc3545 !important; /* Vermelho */
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-position: right center !important; /* Magia aqui */
}

/* DESLIGADO (Preto) -> Bolinha forçada para a DIREITA */
.switch-semana:not(:checked) {
    background-color: #000000 !important; /* Vermelho */
    border-color: #000000 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-position: right center !important; /* Magia aqui */
}

/* Muda o foco azul padrão para o verde do tema Sol e Sombra */
.form-img-verde:focus {
    border-color: #198754 !important; /* Borda verde */
    box-shadow: 0 0 0 0.05rem rgba(25, 135, 84, 0.25) !important; /* Brilho verde suave */
}

.form-img-azul:focus {
    border-color: #0d6efd !important; /* Borda verde */
    box-shadow: 0 0 0 0.05rem rgba(13, 110, 253, 0.25) !important; /* Brilho verde suave */
}

/* Animação visual (Efeito de "Pulo") para quando o cartão muda de posição */
@keyframes pulse-swap {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.caixa-animada {
    animation: pulse-swap 0.4s ease-in-out;
}

/* 1. Remove a borda padrão e o brilho dos inputs de dentro */
.grupo-foco-verde .form-control:focus,
.grupo-foco-verde .form-select:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 2. A MAGIA: Força o arredondamento e corta as pontas quadradas do input interior */
.grupo-foco-verde {
    border-radius: 0.375rem !important; /* Força o raio equivalente ao .rounded do Bootstrap */
    overflow: hidden !important;        /* Corta qualquer bico que tente transbordar */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* 3. Aplica a borda verde redondinha na CAIXA EXTERIOR inteira */
.grupo-foco-verde:focus-within {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.1rem rgba(25, 135, 84, 0.55) !important; /* Brilho verde suave */
}

/* 1. Remove a borda padrão e o brilho dos inputs de dentro */
.grupo-foco-azul .form-control:focus,
.grupo-foco-azul .form-select:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 2. Força o arredondamento e corta as pontas (Aquele truque mágico!) */
.grupo-foco-azul {
    border-radius: 0.375rem !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* 3. Aplica a borda AZUL na CAIXA EXTERIOR inteira ao clicar */
.grupo-foco-azul:focus-within {
    border-color: #0d6efd !important; /* Azul principal do Bootstrap */
    box-shadow: 0 0 0 0.1rem rgba(13, 110, 253, 0.55) !important; /* Brilho azul */
}

/* Proíbe o Bootstrap (Flexbox) de esmagar as etiquetas calculadas pelo JS */
.label-sincronizada {
    flex-shrink: 0 !important;
}

.texto-comentario-cliente {
    /* 1. O truque do corte de linhas (Truncate) */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Define o número máximo de linhas permitidas no post-it */
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* 2. Previne que palavras gigantes sem espaços deformem o cartão para os lados */
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Muda a cor de fundo e da borda para verde quando selecionado */
.form-check-input:checked {
    background-color: #198754 !important;
    border-color: #198754 !important;
}

/* Substitui a sombra azul de foco por uma verde (ou remove-a) */
.form-check-input:focus {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
}

/* Força o checkbox do Modal Editar a ser AZUL */
#modalEditarItem .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

#modalEditarItem .form-check-input:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* 5. Rodapé Legal / Avisos da Ementa */
.rodape-kraft {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem; /* Letra pequenina */
    color: #444;
    border-top: 2px solid #2c2c2c; /* A linha horizontal por cima do texto */
    padding-top: 10px;
    margin-top: 0px;
    line-height: 1.4;

    /* A MAGIA AQUI */
    column-span: all; /* Faz o elemento ignorar as colunas e ocupar a largura total */
    width: 100%; /* Garante que estica de uma ponta à outra */
}

.rodape-kraft p {
    margin-bottom: 4px; /* Espaço mínimo entre as linhas */
}

/* O contentor para alinhar as mini lousas */
.seletor-idiomas {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* O visual da Mini Lousa */
.btn-lousa {
    background-color: #222222; /* Fundo do quadro negro */
    color: #eeeeee; /* Cor do texto tipo giz branco */
    font-family: 'Courier New', Courier, monospace; /* Fonte tipo máquina de escrever da tua lousa */
    font-weight: bold;
    font-size: 1.1rem;
    padding: 6px 16px;
    text-decoration: none;
    border: 4px solid #4a2e15; /* Moldura de madeira escura */
    border-radius: 4px;
    /* Sombras: uma interior para a lousa parecer afundada na moldura, outra exterior para o botão saltar do ecrã */
    box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.9), 3px 3px 6px rgba(0, 0, 0, 0.2); 
    transition: all 0.2s ease-in-out;
}

/* Efeito ao passar o rato (Hover) */
.btn-lousa:hover {
    color: #f3c937; /* Amarelo do título "Petiscos do dia" */
    transform: scale(1.05) rotate(-1deg); /* Um ligeiro salto e inclinação rústica */
}

/* O idioma que está atualmente selecionado (Active) */
.btn-lousa.active {
    color: #f3c937; /* Fica amarelo para sabermos que é a língua ativa */
    border-color: #654120; /* Madeira um pouco mais clara para destacar */
}