/* --- Variáveis de Cor e Fontes --- */
:root {
    --cor-primaria: #6d4c41;
    --cor-primaria-rgb: 109, 76, 65;
    --cor-secundaria: #efebe9;
    --cor-texto: #3e2723;
    --cor-destaque: #a1887f;
    --cor-branco: #FFFFFF;
    
    --fonte-titulos: 'Roboto', sans-serif;
    --fonte-corpo: 'Source Sans Pro', sans-serif;
}

/* --- Estilos Gerais --- */
html, body {
    scroll-behavior: smooth;
    font-family: var(--fonte-corpo);
    background-color: var(--cor-branco);
    color: var(--cor-texto);
    line-height: 1.7;
    margin: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulos);
    font-weight: 500;
    color: var(--cor-primaria);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Barra de Navegação --- */
#main-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    transition: padding 0.4s ease, box-shadow 0.4s ease;
}

#main-navbar.scrolled {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#main-navbar.scrolled img {
    height: 50px !important;
    transition: height 0.4s ease;
}

.w3-bar {
    background-color: #fdfdfd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.w3-bar-item img:hover {
    transform: scale(1.08);
    transition: transform 0.3s ease;
}

/* --- Conteúdo Principal --- */
.w3-content {
    /* REMOÇÃO DO ESPAÇO EXTRA ENTRE CARROSSEL E LIVRO DO MÊS */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* --- Seção Livro do Mês --- */
.livro-mes-container {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-top: 32px;
}

.livro-mes-imagem {
    flex: 0 0 40%;
    max-width: 350px;
}
.livro-mes-imagem img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.livro-mes-info {
    flex: 1;
    text-align: left;
}

/* --- CORREÇÃO GERAL PARA IMAGENS RESPONSIVAS --- */
.w3-container img, .gallery-item img, .menu-item-card img {
    max-width: 100% !important;
    height: auto;
}

/* --- Rodapé --- */
footer {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    padding: 40px 16px;
    margin-top: 64px;
}
footer p {
    color: var(--cor-secundaria);
    margin: 8px 0;
}
footer .w3-button {
    background-color: transparent;
    color: var(--cor-branco);
    transition: color 0.3s ease, transform 0.3s ease;
}
footer .w3-button:hover {
    color: var(--cor-secundaria);
    transform: scale(1.15);
}
footer .fa {
    font-size: 24px;
}

/* --- Classes de Responsividade --- */
.w3-show { display: block !important; }
@media (min-width:993px) {
    .w3-hide-large { display: none !important; }
}
@media (max-width:992px) and (min-width:601px) {
    .w3-hide-medium { display: none !important; }
    /* Agora esconde tudo que está à direita, EXCETO o hamburger-icon */
    .w3-bar .w3-right:not(#hamburger-icon) { display: none; }
}

@media (min-width:601px) {
    /* Esta regra pode ser removida ou mantida, não interfere */
    .w3-bar .w3-right.mobile-hamburger { display: none; }
}

@media (max-width:600px) {
    .w3-hide-small { display: none !important; }
    /* Aplicando a mesma exceção aqui */
    .w3-bar .w3-right:not(#hamburger-icon) { display: none; }
}
@media (max-width:600px) {
    .w3-hide-small { display: none !important; }
    .cafe-card-container {
        flex-direction: column;
        align-items: center;
    }
}
/* --- Estilo para o link ativo na barra de navegação --- */
.w3-bar .w3-button.active-link {
  color: var(--cor-primaria) !important; /* Usa a cor primária do seu site */
  font-weight: bold;
  border-bottom: 3px solid var(--cor-destaque); /* Adiciona uma borda inferior para destaque */
}

/* Para o menu mobile (hambúrguer) */
.w3-bar-block .w3-button.active-link {
    background-color: var(--cor-secundaria) !important;
    color: var(--cor-primaria) !important;
}

/* --- Estilos para o Cabeçalho do Painel Admin --- */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- ESTILOS DO NOVO CARROSSEL --- */
.carousel-container {
    position: relative;
    overflow: hidden; 
}

.carousel-slides .slide img {
    width: 100%;
    height: auto; /* A altura agora é automática, mantendo a proporção da imagem */
    display: block; /* Garante que não haja espaços extras abaixo da imagem */
}

/* Animação de Fade */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* Setas de Navegação */
.carousel-prev, .carousel-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.3);
}

.carousel-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.carousel-prev:hover, .carousel-next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* --- NOVA SEÇÃO DE INTRODUÇÃO --- */
.intro-section {
    position: relative; /* Essencial para posicionar as bolhas dentro */
    overflow: hidden; /* Garante que as bolhas não "vazem" para fora */
    text-align: center;
    padding: 80px 16px;
    background-color: var(--cor-secundaria);
}

/* O conteúdo de texto (h1, p, botão) */
.intro-section-content {
    position: relative; /* Garante que o texto fique acima das bolhas */
    z-index: 2;
}

.intro-section h1 {
    font-size: 2.2rem;
    color: var(--cor-primaria);
    margin: 0;
}

.intro-section p {
    font-size: 1.1rem;
    color: var(--cor-texto);
    max-width: 600px;
    margin: 16px auto 32px auto;
}

/* A primeira bolha flutuante (maior, no fundo) */
.intro-section::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(var(--cor-primaria-rgb), 0.08);
    top: -100px;
    left: -100px;
    animation: float 12s ease-in-out infinite;
}

/* A segunda bolha flutuante (menor, na frente) */
.intro-section::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: rgba(var(--cor-primaria-rgb), 0.1);
    bottom: -50px;
    right: -50px;
    animation: float 10s ease-in-out infinite;
    animation-delay: 2s; /* Começa a animação com um atraso */
}

/* A animação que faz as bolhas flutuarem */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-25px); }
    100% { transform: translateY(0px); }
}

/* Ajuste de responsividade */
@media (max-width: 600px) {
    .intro-section h1 {
        font-size: 1.8rem;
    }
    .intro-section::before, .intro-section::after {
        /* Esconde as bolhas em telas muito pequenas para não poluir a tela */
        display: none;
    }
}


/* --- NOVO LAYOUT PARA O LIVRO DO MÊS NA PÁGINA INICIAL --- */
.livro-mes-container {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-top: 32px;
}

.livro-mes-imagem {
    flex: 0 0 40%; /* A imagem ocupa 40% da largura */
    max-width: 350px;
}
.livro-mes-imagem img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.livro-mes-info {
    flex: 1; /* O texto ocupa o resto do espaço */
    text-align: left;
}

/* Responsividade para o layout do livro do mês */
@media (max-width: 768px) {
    .livro-mes-container {
        flex-direction: column;
        text-align: center;
    }
    .livro-mes-info {
        text-align: center;
    }
}
/* --- NOVO MENU DE USUÁRIO --- */
.user-icon-button {
    background-color: transparent;
    border: 2px solid var(--cor-primaria);
    color: var(--cor-primaria);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 5px;
}

.user-icon-button:hover {
    background-color: var(--cor-primaria);
    color: white;
}

.user-icon-button .fa-user {
    font-size: 20px;
}

.user-dropdown-content {
    min-width: 200px;
    text-align: right;
}

/* --- NOVOS ESTILOS PARA A PÁGINA DO CAFÉ --- */

/* Galeria de Fotos */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Seção de Texto "Sobre" */
.cafe-about-section {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Seção do Cardápio */
.menu-section {
    padding: 48px 0;
}

.menu-category {
    margin-bottom: 48px;
}

.menu-category-title {
    text-align: center;
    font-family: var(--fonte-titulos);
    color: var(--cor-primaria);
    font-size: 1.8rem;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--cor-destaque);
    padding-bottom: 8px;
    display: inline-block;
}

.menu-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.menu-item-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.menu-item-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.menu-item-info {
    padding: 16px;
}

.menu-item-info h4 {
    font-family: var(--fonte-titulos);
    color: var(--cor-primaria);
    margin-top: 0;
}

/* --- ESTILOS PARA A PÁGINA DO CAFÉ CULTURAL --- */
.menu-category-title {
    text-align: center;
    font-family: var(--fonte-titulos);
    color: var(--cor-primaria);
    font-size: 1.8rem;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--cor-destaque);
    padding-bottom: 8px;
    display: inline-block;
}

/* --- BOTÃO FLUTUANTE DO WHATSAPP --- */
.whatsapp-float-button {
    position: fixed; /* Fixa o botão na tela */
    width: 60px;
    height: 60px;
    bottom: 30px; /* Distância da parte inferior da tela */
    right: 30px;  /* Distância da parte direita da tela */
    background-color: #25d366; /* Cor oficial do WhatsApp */
    color: #FFF;
    border-radius: 50px; /* Deixa o botão redondo */
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 100; /* Garante que ele fique acima de outros elementos */
    transition: transform 0.2s ease-in-out;
}

/* Efeito ao passar o mouse */
.whatsapp-float-button:hover {
    transform: scale(1.1); /* Aumenta um pouco o tamanho */
    color: #FFF; /* Mantém o ícone branco */
}

/* Ajuste para o ícone ficar bem centralizado */
.whatsapp-float-button i {
    margin-top: 15px;
}

/* --- ESTILOS PARA A PÁGINA DE PROMOÇÕES E CARDS DE PRODUTOS --- */
.promocoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Estilo base para todos os cards (livros e café) */
.promo-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.promo-card-image {
    position: relative;
    height: 350px;
    background-color: #f9f9f9;
    padding: 16px;
    box-sizing: border-box;
}

.promo-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Para capas de LIVROS, a imagem inteira aparece */
}

/* ---- ALTERAÇÃO ESPECÍFICA PARA OS CARDS DO CAFÉ ---- */
.cafe-card .promo-card-image {
    padding: 0; /* Remove o padding para a imagem preencher tudo */
    height: 220px; 
}

.cafe-card .promo-card-image img {
    object-fit: cover; /* Para fotos de COMIDA, a imagem cobre e preenche o espaço */
}

.promo-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--cor-primaria);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.promo-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.promo-card-content h4 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--cor-texto);
}

.promo-description {
    color: #666;
    font-size: 0.9rem;
    flex-grow: 1; /* Empurra o preço para baixo, alinhando todos os cards */
}

/* --- Estilos para Preços de Produtos --- */
.price-box {
    margin-top: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: var(--fonte-titulos);
}
.regular-price {
    color: var(--cor-primaria);
    font-size: 1.4rem;
}
.original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 1rem;
    margin-right: 10px;
}
.promo-price {
    color: #2e7d32; /* Um tom de verde para destaque */
    font-size: 1.5rem;
}

/* Ajuste para o layout do cardápio do café */
.menu-item-info .price-box {
    text-align: right;
    margin-top: 16px;
}

/* --- ESTILO DEFINITIVO PARA O MENU DE USUÁRIO COM HOVER --- */

/* O container principal que alinha o ícone e os links */
.user-info-container {
    display: flex;
    align-items: center;
}

/* O container para o ícone. O cursor muda para indicar interatividade */
.user-icon-container {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer; /* Muda o cursor para a "mãozinha" */
    z-index: 2; /* Garante que o ícone fique na frente */
}

/* O container dos links que aparecerá e desaparecerá */
.user-links-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: -20px; /* Faz os links começarem "dentro" do ícone */
    padding-left: 30px; /* Espaço para que o texto não apareça sobre o ícone */
    background-color: var(--cor-secundaria);
    height: 45px;
    border-radius: 30px;

    /* A MÁGICA ACONTECE AQUI: Escondendo os links por padrão */
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap; /* Impede que o texto quebre a linha durante a transição */
    transition: max-width 0.5s ease-in-out, opacity 0.3s ease-in-out 0.1s;
}

/* A MÁGICA CONTINUA: Mostrando os links ao passar o mouse no container principal */
.user-info-container:hover .user-links-container {
    max-width: 400px; /* Largura máxima para os links aparecerem */
    opacity: 1;
}

/* Estilo para a saudação "Olá, nome" */
.user-links-container span {
    font-family: var(--fonte-titulos);
    color: var(--cor-texto);
    font-size: 0.9rem;
}

/* Estilo para os links "Painel Admin" e "Sair" */
.user-nav-link {
    padding: 6px 12px !important;
    border-radius: 20px;
    font-size: 0.9rem !important;
    background-color: var(--cor-branco); /* Fundo branco para diferenciar */
    transition: background-color 0.3s, color 0.3s;
}

.user-nav-link:hover {
    background-color: var(--cor-primaria) !important;
    color: var(--cor-branco) !important;
}

/* --- ESTILOS PARA A SEÇÃO DE PROMOÇÕES EM DESTAQUE --- */

.promocoes-destaque-grid {
    display: grid;
    /* Cria 3 colunas em telas grandes, e se ajusta automaticamente em telas menores */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 48px;
    margin-bottom: 48px;
}

/* Estilo para o botão de chamada para ação (CTA) */
.promo-cta-button {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 12px 28px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promo-cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(109, 76, 65, 0.3); /* Sombra com a cor primária */
    color: var(--cor-branco) !important;
}

/* --- Ajuste para links nos cards de promoção --- */
a.promo-card-link, a.promo-card-link:hover {
    text-decoration: none !important;
    color: inherit; /* Herda a cor do texto do elemento pai */
}

/* --- Créditos do Desenvolvedor no Rodapé --- */
.developer-credits {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.developer-socials a { color: var(--cor-branco); text-decoration: none; transition: color 0.3s, transform 0.3s; }
.developer-socials a:hover { color: var(--cor-secundaria); transform: scale(1.2); }
.developer-socials .fa { font-size: 20px; }

/* --- ESTILO PARA OS BOTÕES DE PAGINAÇÃO --- */
.pagination-container .page-btn {
    background-color: #fff;
    border: 1px solid var(--cor-destaque);
    color: var(--cor-primaria);
    padding: 8px 16px;
    margin: 0 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-container .page-btn:hover {
    background-color: var(--cor-secundaria);
}

.pagination-container .page-btn.active {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border-color: var(--cor-primaria);
}

.pagination-container .page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* --- ESTILO PARA OS BOTÕES DE FILTRO DE CATEGORIA --- */
#filtros-categorias-container .filtro-btn {
    background-color: #fff;
    border: 1px solid var(--cor-destaque);
    color: var(--cor-primaria);
    padding: 8px 16px;
    margin: 4px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--fonte-titulos);
    text-transform: uppercase;
    font-size: 0.9rem;
}

#filtros-categorias-container .filtro-btn:hover {
    background-color: var(--cor-secundaria);
    border-color: var(--cor-primaria);
}

#filtros-categorias-container .filtro-btn.active {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border-color: var(--cor-primaria);
}

/* ========================================================== */
/* **REGRAS DE RESPONSIVIDADE (MEDIA QUERIES)** */
/* ========================================================== */

/* Para telas de desktop (maiores que 992px) */
@media (min-width: 993px) {
    #hamburger-icon {
        display: none !important;
    }
}

/* Para telas de tablets e celulares (até 992px) */
@media (max-width: 992px) {
    .w3-bar a.w3-hide-small.w3-hide-medium {
        display: none !important;
    }
    #form-busca-nav, #user-nav-container {
        display: none !important;
    }
    #hamburger-icon {
        display: inline-block !important;
    }
    .livro-mes-container {
        flex-direction: column;
        text-align: center;
    }
    .livro-mes-info {
        text-align: center;
    }
}

/* Para telas de celulares (até 600px) */
@media (max-width: 600px) {
    .hero-text h1 {
        font-size: 1.5rem;
    }
    .hero-text p {
        font-size: 0.9rem;
    }
    .w3-padding-64 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    h2 {
        font-size: 1.5rem;
    }
}
/* --- ESTILOS PARA A PÁGINA DE PAPELARIA --- */
/* Cria uma classe modificadora para os cards de produtos de papelaria */
.papelaria-card .promo-card-image {
    /* Altura um pouco menor que a dos livros, ideal para produtos variados */
    height: 280px;
    /* Adiciona um preenchimento interno para que o produto "respire" */
    padding: 16px;
}
.papelaria-card .promo-card-image img {
    /* 'contain' garante que o produto inteiro sempre apareça dentro da área da imagem,
      sem cortar nenhuma parte, o que é ideal para itens de papelaria.
    */
    object-fit: contain;
}
.filtro-btn { /* Botões de filtro da página de papelaria */
    background-color: #fff;
    border: 1px solid var(--cor-destaque);
    color: var(--cor-primaria);
    padding: 8px 16px;
    margin: 4px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--fonte-titulos);
    text-transform: uppercase;
    font-size: 0.9rem;
}
.filtro-btn:hover {
    background-color: var(--cor-secundaria);
    border-color: var(--cor-primaria);
}
.filtro-btn.active {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border-color: var(--cor-primaria);
}
/* --- ESTILO PARA O DESTAQUE "COMBO DA SEMANA" --- */
.combo-semana-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: linear-gradient(135deg, var(--cor-secundaria), #ffffff);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 48px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

.combo-semana-imagem {
    flex: 0 0 40%;
    margin-right: 24px;
}

.combo-semana-imagem img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    height: 250px;
}

.combo-semana-info {
    flex: 1;
    text-align: left;
}

.combo-semana-info .tag-combo {
    background-color: var(--cor-primaria);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 12px;
}

.combo-semana-info h3 {
    margin-top: 0;
    font-size: 2rem;
}

.combo-semana-info p {
    font-size: 1.1rem;
    color: #555;
}

.combo-semana-info .combo-price {
    font-size: 2.2rem;
    font-weight: bold;
    color: #2e7d32; /* Verde escuro para o preço */
    margin-top: 16px;
    font-family: var(--fonte-titulos);
}

/* Responsividade para o card do combo */
@media (max-width: 768px) {
    .combo-semana-card {
        flex-direction: column;
        padding: 16px;
    }
    .combo-semana-imagem {
        width: 100%;
        margin-right: 0;
        margin-bottom: 16px;
    }
    .combo-semana-info {
        text-align: center;
    }
}
/* --- ESTILOS PARA O NOVO LAYOUT DA PÁGINA DA LIVRARIA --- */

/* 1. Define o layout de 2 colunas: 250px para a barra de filtros e o resto para os livros */
.livraria-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 32px; /* Espaçamento entre a barra de filtros e a grade de livros */
    align-items: start;
}

/* 2. Estilo do container da barra lateral de filtros */
.filter-sidebar {
    background-color: #fdfdfd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    position: sticky; /* Faz a barra "grudar" no topo ao rolar a página */
    top: 100px; /* Distância do topo para começar a "grudar" */
}

.filter-sidebar .filter-title {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cor-secundaria);
    font-size: 1.2rem;
}

/* 3. Transforma os botões de filtro em itens de uma lista vertical */
#filtros-categorias-container .filtro-btn {
    display: block; /* Faz com que cada botão ocupe a linha inteira */
    width: 100%;
    text-align: left; /* Alinha o texto à esquerda */
    margin: 4px 0;
    border-radius: 6px;
    border: none;
    background-color: transparent;
    text-transform: none; /* Remove o texto em maiúsculas */
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    padding: 10px 12px;
}

/* 4. Efeito visual ao passar o mouse sobre um item da lista */
#filtros-categorias-container .filtro-btn:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-primaria);
}

/* 5. Estilo do item de filtro que está ATIVO (selecionado) */
#filtros-categorias-container .filtro-btn.active {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    font-weight: bold;
}

/* 6. Regra para telas menores (tablets/celulares) */
@media (max-width: 992px) {
    .livraria-layout {
        grid-template-columns: 1fr; /* Muda para uma única coluna */
    }

    .filter-sidebar {
        position: static; /* Remove o efeito "grudento" em telas menores */
        margin-bottom: 32px;
    }
}
/* Estilo para itens ocultos na tabela do painel admin */
.item-oculto {
    opacity: 0.5;
    background-color: #f2f2f2;
}
.item-oculto td {
    text-decoration: line-through;
}
/* Estilo para o separador no menu mobile */
#mobile-menu .user-link-separator {
  border: 0;
  border-top: 1px solid #eee;
  margin: 8px 16px;
}
/* --- AJUSTES DE RESPONSIVIDADE PARA O PAINEL ADMIN --- */
@media (max-width: 600px) {
    .admin-header {
        flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo */
        justify-content: space-between; /* Mantém logo à esquerda e botão à direita */
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Força o título a ocupar toda a largura e ir para a linha de baixo */
    .admin-header h1 {
        flex-basis: 100%; /* Ocupa 100% da largura disponível */
        order: 3; /* Coloca o título como o último item na ordem visual */
        text-align: center;
        font-size: 1.5rem; /* Diminui um pouco o tamanho da fonte no mobile */
        margin-top: 16px;
    }

    /* Garante que o logo e o botão tenham um bom tamanho */
    .admin-header .w3-bar-item img {
        height: 50px !important;
    }
}
/* --- ESTILOS PARA SEÇÕES RECOLHÍVEIS (ACORDEÃO) NO PAINEL ADMIN --- */

.collapsible-trigger {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none; /* Impede a seleção de texto ao clicar */
    padding: 10px;
    background-color: var(--cor-secundaria);
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.collapsible-trigger:hover {
    background-color: #d7ccc8; /* Um tom um pouco mais escuro de 'secundaria' */
}

.collapsible-trigger .fa {
    transition: transform 0.4s ease;
}

/* Rotação do ícone quando a seção está aberta */
.collapsible-trigger.is-open .fa {
    transform: rotate(180deg);
}

.collapsible-content {
    max-height: 0; /* Começa oculto */
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    padding: 0 10px; /* Evita que o conteúdo apareça colado nas bordas durante a animação */
}

/* Estado aberto da seção */
.collapsible-content.is-open {
    max-height: 2000px; /* Um valor alto o suficiente para caber qualquer conteúdo */
    padding: 15px 10px;
}
/* --- ESTILOS PARA A PÁGINA 'O VÔ ALBERTO' --- */
.historia-container {
    display: flex;
    flex-direction: column; /* Define a direção para coluna (vertical) */
    align-items: center;   /* Centraliza os itens horizontalmente */
    gap: 32px;
}

.historia-imagem {
    max-width: 450px; /* Aumentei um pouco o tamanho máximo da imagem */
    width: 100%;
    margin-top: 24px; /* Adiciona um espaço acima da imagem */
    text-align: center;
}

.historia-imagem img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.historia-texto {
    max-width: 800px; /* Limita a largura do texto para melhor leitura */
    text-align: justify; /* Justifica o texto para um visual mais limpo */
}

.historia-texto h3 {
    text-align: center; /* Centraliza o subtítulo */
    margin-top: 0;
}

.historia-texto p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}
/* --- ESTILOS PARA A NOVA PÁGINA 'LIVRARIA' --- */
.intro-livraria {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.intro-livraria p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    text-align: justify;
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Diminuí um pouco o tamanho mínimo para melhor encaixe */
    gap: 24px; /* Aumentei o espaçamento */
    margin-top: 32px;
    align-items: start; /* Alinha os itens no topo */
}

.galeria-item {
    /* O contêiner agora não tem mais estilo visual, apenas estrutura */
    background-color: transparent;
    padding: 0;
}

.galeria-item img {
    width: 100%;
    height: auto; /* A altura agora é automática, mantendo a proporção da imagem */
    display: block; /* Remove pequenos espaços que a tag <img> pode ter por padrão */
    
    /* O estilo de card (sombra e bordas) é aplicado diretamente na imagem */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    /* Transições e cursor continuam aqui */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.galeria-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
/* --- ANIMAÇÃO DO ÍCONE HAMBÚRGUER --- */
#hamburger-icon {
    width: 35px;
    height: 30px;
    position: relative;
    margin-top: 15px; /* Ajuste para alinhar verticalmente */
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

#hamburger-icon .bar {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: var(--cor-primaria);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

#hamburger-icon .bar1 { top: 0px; }
#hamburger-icon .bar2 { top: 12px; }
#hamburger-icon .bar3 { top: 24px; }

#hamburger-icon.is-active .bar1 {
    top: 12px;
    transform: rotate(135deg);
}

#hamburger-icon.is-active .bar2 {
    opacity: 0;
    left: -60px;
}

#hamburger-icon.is-active .bar3 {
    top: 12px;
    transform: rotate(-135deg);
}
/* --- ANIMAÇÃO DE CARREGAMENTO (PRELOADER) --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cor-secundaria);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.75s ease;
}

.preloader-logo {
    width: 150px;
    animation: pulse 2s infinite ease-in-out;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none; /* Impede cliques no preloader quando invisível */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* --- NOVA SEÇÃO "REFÚGIO DE AROMAS" (PÁGINA INICIAL) --- */
.cafe-refugio-container {
    display: flex;
    align-items: center;
    gap: 48px;
}

.cafe-refugio-imagem {
    flex: 1;
    min-width: 300px;
}

.cafe-refugio-imagem img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: block;
}

.cafe-refugio-texto {
    flex: 1.2;
    text-align: left;
}

.cafe-refugio-texto h2 {
    margin-top: 0;
}

/* ===== RESPONSIVIDADE SIMPLIFICADA E CORRIGIDA ===== */
@media (max-width: 768px) {
    .cafe-refugio-container {
        flex-direction: column; /* Coloca imagem acima do texto */
        gap: 32px; /* Espaçamento entre imagem e texto */
        /* O fundo w3-light-grey já é aplicado no HTML, não precisa aqui */
    }

    /* Garante que a imagem não fique colada nas bordas */
    .cafe-refugio-imagem {
       width: 75%;
       max-width: 500px; /* Limita a largura máxima da imagem no mobile */
       margin: 0 auto; /* Centraliza a imagem se ela for menor que a largura total */
    }

    .cafe-refugio-texto {
        text-align: center; /* Centraliza o texto */
    }
}
/* --- Estilos do Ícone Hambúrguer Animado --- */

/* O container do ícone (a tag 'a') */
#hamburger-icon {
  width: 35px; /* Largura do ícone */
  height: 30px; /* Altura do ícone */
  position: relative;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
  /* Remove o padding padrão do w3-button para podermos centralizar as barras */
  padding: 0 !important; 
  /* Usa flexbox para espaçar as barras automaticamente */
  display: flex; 
  flex-direction: column;
  justify-content: space-between;
}

/* Estilo base das 3 barras */
.bar {
  display: block;
  position: relative;
  height: 4px; /* Espessura da barra */
  width: 100%;
  background: #333; /* Cor da barra */
  border-radius: 4px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

/* --- Animação (Quando .active é adicionado) --- */

/* Animação da Barra 1 (Cima) */
#hamburger-icon.active .bar1 {
  transform: rotate(135deg);
  /* Move a barra para o centro para formar o 'X' */
  position: absolute;
  top: 13px; 
}

/* Animação da Barra 2 (Meio) */
#hamburger-icon.active .bar2 {
  opacity: 0;
  left: -60px; /* Desliza para fora */
}

/* Animação da Barra 3 (Baixo) */
#hamburger-icon.active .bar3 {
  transform: rotate(-135deg);
  /* Move a barra para o centro para formar o 'X' */
  position: absolute; 
  top: 13px;
}

/* --- Estilos da Seção Marcas Parceiras (Scroller) --- */
.parceiros-section {
    padding: 64px 0; /* Aumenta o padding vertical e remove o horizontal */
    background-color: #f8f8f8;
}

/* 1. O contêiner externo (a "janela") */
.parceiros-scroller {
    width: 100%;
    overflow: hidden;
    margin-top: 24px; 
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

/* 2. O contêiner interno (a "esteira" que se move) */
.parceiros-scroller-inner {
    display: flex;
    gap: 60px; /* Espaçamento entre os logos */
    width: max-content; /* Garante que todos os logos fiquem na mesma linha */
    
    /* A Mágica: Animação 'scroll' */
    animation: scroll 30s linear infinite;
}

/* 3. Pausa a animação ao passar o mouse */
.parceiros-scroller:hover .parceiros-scroller-inner {
    animation-play-state: paused;
}

/* 4. A animação que move a "esteira" */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    /* Move 100% da largura do contêiner (que será o tamanho da lista duplicada) */
    100% {
        transform: translateX(-100%);
    }
}

/* 5. Estilo de cada logo individual */
.parceiro-logo {
    height: 50px; /* Altura fixa para todos */
    display: flex;
    align-items: center;
    justify-content: center;
}

.parceiro-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

/* Efeito ao passar o mouse (pausa a animação e colore o logo) */
.parceiro-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* --- Estilos da Lista de Parceiros no Admin (Sem alteração) --- */
#lista-parceiros .w3-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    height: 100%;
}
#lista-parceiros .parceiro-admin-logo {
    height: 80px;
    width: 100%;
    object-fit: contain;
    margin-bottom: 10px;
}
/* --- Animação Reversa para a Segunda Linha de Logos --- */

/* Define a animação de scroll reversa */
@keyframes scroll-reverse {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Aplica a animação reversa ao segundo contêiner */
#parceiros-container-2 {
    /* Usamos uma velocidade ligeiramente diferente (35s) para um efeito mais dinâmico */
    animation: scroll-reverse 35s linear infinite;
}
/* --- Estilos da Seção Sorteio --- */
.sorteio-section {
    padding: 64px 16px;
    background-color: var(--cor-secundaria); /* Usa o fundo suave */
}

.sorteio-section .w3-card-4 {
    background-color: white;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.sorteio-section label {
    font-family: var(--fonte-titulos);
    color: var(--cor-texto);
    font-size: 1.1rem;
}

#sorteio-mensagem.success {
    color: #2e7d32; /* Verde */
    font-weight: bold;
}

#sorteio-mensagem.error {
    color: #c62828; /* Vermelho */
    font-weight: bold;
}
/* --- Estilos para a Galeria do Café Cultural --- */

/* Aplica este estilo apenas aos itens da galeria que estão 
  dentro da seção do cardápio (menu-section).
*/
.menu-section .galeria-item img {
    height: 280px; /* Define uma altura fixa para todas as imagens */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
}
/* --- Estilos dos Placeholders (Skeletons) dos Logos --- */

.parceiro-logo-skeleton {
    height: 50px;       /* Mesma altura do logo real */
    width: 120px;       /* Uma largura média */
    background-color: #e0e0e0; /* Cinza claro */
    border-radius: 8px;
    flex-shrink: 0; /* Impede que os skeletons encolham */
    
    /* Animação de "pulso" */
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
/* --- Ajuste do Fade dos Parceiros no Celular --- */

@media (max-width: 600px) {
    .parceiros-scroller {
        /* * Diminui o 'fade' nas bordas.
         * Antes, o fade ia de 0% a 10% (e 90% a 100%).
         * Agora, ele vai de 0% a 3% (e 97% a 100%).
         */
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            black 1%,  /* Era 10% */
            black 99%,  /* Era 90% */
            transparent 100%
        );
    }
}
/* --- Tabela de Sorteio com Rolagem --- */
.tabela-scroll-vertical {
    max-height: 500px; /* Define a altura máxima da área visível */
    overflow-y: auto;  /* Adiciona a barra de rolagem se a lista for maior que a altura */
    border: 1px solid #ccc; /* Uma borda leve para delimitar a área */
}

/* Mantém o cabeçalho fixo enquanto rola (opcional, mas muito útil) */
.tabela-scroll-vertical thead th {
    position: sticky;
    top: 0;
    background-color: var(--cor-primaria); /* Cor marrom do cabeçalho */
    color: white;
    z-index: 1;
}