html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
}


h1, h2, h3, h4, .font-heading {
    font-family: 'Oswald', sans-serif;
}

/* Custom scrollbar para o menu lateral */
#sidebar nav::-webkit-scrollbar {
    width: 6px;
}
#sidebar nav::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
#sidebar nav::-webkit-scrollbar-thumb {
    background: #d97706; 
    border-radius: 4px;
}
#sidebar nav::-webkit-scrollbar-thumb:hover {
    background: #b45309; 
}

/* Efeito Parallax simples para o Hero */
.bg-hero {
    background-image: linear-gradient(rgba(28, 25, 23, 0.8), rgba(28, 25, 23, 0.7)), url('https://images.unsplash.com/photo-1505075932243-73138b3fc8f2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.beer-card:hover .beer-img {
    transform: scale(1.05);
}


/* ============================================== */
/* ESTILOS DO WIDGET DE ATENDIMENTO               */
/* ============================================== */

/* Animações personalizadas para o chat abrir e fechar suavemente */
.chat-window-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
.chat-window-closed {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    pointer-events: none;
}

/* Estilização suave da barra de rolagem do chat */
#chat-messages::-webkit-scrollbar {
    width: 6px;
}
#chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
#chat-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 10px;
}
#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; 
}

/* Animação de digitação do bot */
.typing-dot {
    animation: typing 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* ============================================== */
/* MENU SUSPENSO DE PARTILHA (Lado Esquerdo)      */
/* ============================================== */

/* Container principal fixo no ecrã */
.fab-container {
    position: fixed;
	pointer-events: none;
    bottom: 30px;
    left: 75px; /* Ajustado para ficar fora da área do menu lateral (w-16) */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
    z-index: 90;
}

/* Ocultar na versão móvel (ecrãs até 768px) */
@media (max-width: 768px) {
    .fab-container {
        display: none !important;
    }
}

/* Estilo base de todos os botões redondos */
.fab-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
	
}

.fab-container .fab-btn,
.fab-container .fab-options a {
    pointer-events: auto; 
}

/* Botão Principal (Atalhos) */
.fab-main {
    background-color: #d97706;
    width: 52px; 
    height: 52px;
}

.fab-main svg {
    fill: white;
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.fab-main .icon-close {
    display: none;
}

/* Estilização das opções que sobem */
.fab-options {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* Cores de cada rede social */
.btn-whatsapp { background-color: #25D366; }
.btn-telegram { background-color: #0088cc; }
.btn-instagram { background-color: #3b5998; }
.btn-link     { background-color: #9e9e9e; }
.btn-email    { background-color: #616161; }

.fab-options svg {
    fill: white;
    width: 24px;
    height: 24px;
}

/* Estado Ativo (Menu aberto) */
.fab-container.active .fab-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-container.active .fab-main {
    background-color: #000000;
}

.fab-container.active .fab-main .icon-share {
    display: none;
}
.fab-container.active .fab-main .icon-close {
    display: block;
}

.fab-btn:hover {
    transform: scale(1.08);
}

/* Notificação (Link Copiado) */
.toast-notification {
    position: fixed;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: bottom 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.toast-notification.show {
    bottom: 40px;
    opacity: 1;
}

/* --- Estilos do Banner de Cookies em Formato de Caixa (Box) --- */

.cookie-flutuante {
    position: fixed;
    bottom: 20px;                  /* Distância do fundo da página */
    left: 70px;                    /* Posiciona no canto esquerdo (mude para "right: 20px" se preferir na direita) */
    width: 350px;                  /* Largura fixa para dar o formato de caixinha */
    max-width: calc(100% - 40px);  /* Garante que caiba perfeitamente em celulares */
    z-index: 2000;
    background-color: #333;
    color: white;
    padding: 20px;
    border-radius: 8px;            /* Cantos arredondados para o estilo box */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra mais suave ao redor da caixa */
    
    /* Organiza o texto e os botões em coluna (um embaixo do outro) */
	border: 1px solid #000000; /* Borda de 2px de espessura, linha contínua, na cor dourada/laranja */
    display: flex;
    flex-direction: column;
    gap: 15px;                     /* Espaço entre o texto e o botão */
    align-items: flex-start;
    
    /* Transição suave para aparecer/sumir */
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.cookie-flutuante.escondido {
    /* Faz a caixinha descer um pouco e sumir suavemente */
    transform: translateY(30px);
    opacity: 0;
    pointer-events: none;          /* Evita cliques enquanto estiver invisível */
}

.cookie-flutuante p {
    margin: 0;
    font-size: 0.8em;
    line-height: 1.5;
    text-align: left;
}

.cookie-flutuante a {
    color: #d97706;                /* Cor de destaque do link */
    text-decoration: underline;
}

.botoes-cookie {
    width: 100%;                   /* Faz a área do botão ocupar toda a largura da caixinha */
    display: flex;
    justify-content: flex-end;     /* Alinha o botão de aceitar no canto inferior direito da caixinha */
}

.botoes-cookie button {
	font-size: 13px; /* Adicione esta linha (ajuste o número como preferir, ex: 12px, 14px ou 0.8em) */
    background-color: #d97706;     /* Cor do botão de aceite */
    color: #FFFFFF;
    border: none;
    padding: 5px 5px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.botoes-cookie button:hover {
    background-color: #b45309;
    color: #FFFFFF;
}

/* --- Ajuste Responsivo para Celulares Muito Pequenos --- */
@media (max-width: 480px) {
    .cookie-flutuante {
        bottom: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
        padding: 15px;
    }
}

/* ============================================== */
/* SISTEMA DE PAINÉIS DE CERVEJAS (RADIO HACK)    */
/* ============================================== */

/* 1. Esconde os painéis de detalhes por padrão */
.beer-details-panel {
    display: none;
}

/* 2. Exibe a área transparente de fechar sobre os cartões quando ativos */
#beer1:checked ~ .grid-item-1 .close-overlay,
#beer2:checked ~ .grid-item-2 .close-overlay,
#beer3:checked ~ .grid-item-3 .close-overlay,
#beer4:checked ~ .grid-item-4 .close-overlay {
    display: block;
}

/* 3. Aplica destaque de cor dourada no cartão que foi selecionado */
#beer1:checked ~ .grid-item-1 .beer-card,
#beer2:checked ~ .grid-item-2 .beer-card,
#beer3:checked ~ .grid-item-3 .beer-card,
#beer4:checked ~ .grid-item-4 .beer-card {
    border-color: #d97706; /* brewGold */
    box-shadow: 0 10px 25px -5px rgba(217, 119, 6, 0.4);
    background-color: #fffbeb; 
}

/* 4. Mostra o painel correspondente ao rádio marcado e o estica no grid */
#beer1:checked ~ .details-1,
#beer2:checked ~ .details-2,
#beer3:checked ~ .details-3,
#beer4:checked ~ .details-4 {
    display: block;
    grid-column: 1 / -1; 
    animation: fadeInPanel 0.4s ease-out forwards;
}

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================== */
/* ORDENAÇÃO RESPONSIVA DO GRID                   */
/* Garante que o painel abra embaixo do card certo*/
/* ============================================== */

/* Para telas de Tablet (2 cartões por linha) */
@media (max-width: 1024px) and (min-width: 768px) {
    .grid-item-1 { order: 1; }
    .grid-item-2 { order: 2; }
    .details-1, .details-2 { order: 3; } /* Painéis 1 e 2 embaixo da 1ª linha */
    .grid-item-3 { order: 4; }
    .grid-item-4 { order: 5; }
    .details-3, .details-4 { order: 6; } /* Painéis 3 e 4 embaixo da 2ª linha */
}

/* Para Celulares (1 cartão por linha) */
@media (max-width: 767px) {
    .grid-item-1 { order: 1; }
    .details-1 { order: 2; }
    .grid-item-2 { order: 3; }
    .details-2 { order: 4; }
    .grid-item-3 { order: 5; }
    .details-3 { order: 6; }
    .grid-item-4 { order: 7; }
    .details-4 { order: 8; }
}