/* ========================================================================
   NOVO CABEÇALHO MODERNO
   ======================================================================== */

/* --- Configurações Gerais e Container --- */
.site-header a {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.site-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    width: 100%;
}

/* --- 1. Barra Superior (Utility Bar) --- */
.header-top {
    background-color: #f8f9fa; /* Um cinza bem claro */
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid #e9ecef;
}
.header-top .container {
    justify-content: space-between;
}
.header-top .top-links a {
    color: #6c757d; /* Cinza escuro */
    text-decoration: none;
    margin-right: 20px;
}
.header-top .top-links a:hover {
    color: #212529; /* Preto */
}
.header-top .top-links i {
    margin-right: 5px;
}

/* --- 2. Cabeçalho Principal (Logo, Busca, Ícones) --- */
.header-main {
    background-color: #fff;
    padding: 25px 0;
}
.header-main .container {
    justify-content: space-between;
    gap: 20px; /* Espaçamento entre os elementos */
}
.header-main .logo img {
    max-height: 60px; /* Ajuste a altura do seu logo */
    display: block;
}
.header-main .search-bar {
    flex-grow: 1; /* Faz a barra de busca ocupar o espaço disponível */
    margin: 0 30px;
}
.search-bar form {
    position: relative;
    width: 100%;
}
.search-bar input {
    width: 100%;
    height: 44px;
    border: 1px solid #ced4da;
    border-radius: 22px; /* Deixa bem arredondado */
    padding: 0 55px 0 25px;
    font-size: 14px;
    outline: none; /* Remove a borda azul ao clicar */
}
.search-bar input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.search-bar button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #6c757d;
}

.header-main .user-actions {
    display: flex;
    align-items: center;
    gap: 25px; /* Espaçamento entre "Minha Conta" e "Carrinho" */
}
.user-actions a, .user-actions .dropdown-toggle {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #343a40;
    font-size: 14px;
    white-space: nowrap; /* Impede que o texto quebre em duas linhas */
}
.user-actions a:hover, .user-actions .dropdown-toggle:hover {
    color: #007bff; /* Azul ao passar o mouse */
}
.user-actions i {
    font-size: 24px;
    margin-right: 8px;
}

/* --- 3. Barra de Navegação de Categorias --- */
.main-nav {
    background-color: #004a91; /* Azul escuro, como na referência */
    color: #fff;
    border-top: 1px solid #e9ecef;
}
.main-nav .container {
    justify-content: flex-start;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
}
.main-nav a {
    color: #fff;
    text-decoration: none;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}
.main-nav a:hover {
    background-color: #005aa1; /* Um tom de azul mais claro */
}
.main-nav a i {
    margin-right: 8px;
}
.main-nav a.nav-button-categorias {
    background-color: #d90000; /* Vermelho para destaque */
    font-weight: bold;
}
.main-nav a.nav-button-categorias:hover {
    background-color: #b80000; /* Vermelho mais escuro */
}


/* --- Estilos para a Busca AJAX --- */
.search-bar {
    position: relative; /* Essencial para posicionar a caixa de resultados */
}

#resultado-busca {
    position: absolute;
    top: 100%; /* Posiciona logo abaixo do campo de busca */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none; /* Começa escondido */
    max-height: 400px; /* Altura máxima com barra de rolagem */
    overflow-y: auto;
}

#resultado-busca a {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

#resultado-busca a:last-child {
    border-bottom: none;
}

#resultado-busca a:hover {
    background-color: #f8f9fa;
}

#resultado-busca img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 3px;
}

#resultado-busca .info h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

#resultado-busca .info span {
    font-size: 16px;
    font-weight: bold;
    color: #28a745;
}

/* --- Estilos para o contador do carrinho --- */
.cart-icon-link {
    position: relative; /* Necessário para posicionar o badge */
    display: inline-block;
}

.cart-quantity-badge {
    position: absolute;
    top: -18px;   /* Ajuste para mover para cima */
    right: 92px; /* Ajuste para mover para a direita (mais perto do ícone) */
    background-color: #d90000; /* Vermelho forte */
    color: #fff;
    border-radius: 50%;
    padding: 3px 7px; /* Aumenta um pouco o preenchimento */
    font-size: 12px; /* Aumenta a fonte */
    font-weight: bold;
    line-height: 1; /* Garante que o texto fique centralizado verticalmente */
    border: 1px solid #fff;
    min-width: 20px; /* Garante que a bolinha não fique muito pequena para números de 1 dígito */
    text-align: center; /* Centraliza o texto */
}

/* Estilo para o container da imagem do produto */
.product-image-container {
    display: block;
    height: 200px; /* Mesma altura da imagem */
    background-color: #f8f9fa; /* Um cinza bem claro, quase branco */
    padding: 10px; /* Um pequeno espaçamento interno */
    box-sizing: border-box;
}

.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain!important; /* Redundante, mas garante a aplicação */
}
/* Ajustes para as imagens dos cards */
.card-img-top {
    width: 100%; /* Garante que a imagem ocupe a largura total do seu contêiner */
    height: 200px; /* Altura fixa para manter o alinhamento dos cards */
    object-fit: contain; /* Garante que a imagem caiba sem cortar, mantendo a proporção */
    background-color: #f8f9fa; /* Fundo claro para o espaço em branco */
    padding: 10px; /* Um pequeno respiro ao redor da imagem */
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho total */
}

.product-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background-color: #f8f9fa;
}
/* Estilo para a imagem principal na página de detalhes do produto */
#main-image {
    max-height: 550px; /* <<< VOCÊ PODE AJUSTAR ESTE VALOR! */
    max-width: 100%;   /* Garante que a imagem nunca ultrapasse a largura da coluna */
    height: auto;      /* A altura se ajusta para manter a proporção (importante para responsividade) */
    width: auto;       /* A largura se ajusta para manter a proporção quando a altura é limitada */
    display: block;    /* Remove espaços extras que a tag <img> pode ter */
    margin: 0 auto;    /* Centraliza a imagem horizontalmente dentro da coluna */
}
/*
 * EFEITO HOVER E FADE UP PARA DROPDOWN NO DESKTOP
 * Este código só será aplicado em telas maiores que 992px (desktops e tablets grandes)
*/
@media (min-width: 992px) {
    
    /* Prepara o menu dropdown para a animação */
    .dropdown .dropdown-menu {
        /* Garante que o menu seja um bloco, mas o escondemos com outras propriedades */
        display: block;
        
        /* Estado inicial: invisível e ligeiramente para baixo */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px); /* Começa 10px abaixo da sua posição final */
        
        /* Define a animação (transição) para as propriedades */
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        
        /* Remove o padding que o Bootstrap adiciona e que pode atrapalhar a animação */
        margin-top: 0;
    }
    
    /* ATIVAÇÃO: Quando o mouse passar sobre o container .dropdown... */
    .dropdown:hover > .dropdown-menu {
        
        /* Estado final: visível e na posição original */
        opacity: 1;
        visibility: visible;
        transform: translateY(0); /* Volta para a posição normal */
    }

}
/*
 * ESTILO ATUALIZADO PARA BOTÕES DO DROPDOWN
 * Com cores e ícones específicos.
*/

/* Estilo base para AMBOS os botões */
.dropdown-menu a.dropdown-item {
    display: flex;          /* Alinha o ícone e o texto lado a lado */
    align-items: center;    /* Centraliza verticalmente */
    justify-content: center;/* Centraliza horizontalmente */
    gap: 8px;               /* Espaço entre o ícone e o texto */
    
    width: 90%;
    margin-left:5%;
    box-sizing: border-box; 
    text-align: center;
    /*font-weight: bold;*/
    color: #FFFFFF!important; /* Usa !important para garantir a cor do texto */
  
    transition: background-color 0.2s ease; /* Efeito suave na troca de cor */
}

/* Espaço entre os botões */
.dropdown-menu a.dropdown-item:not(:last-child) {
    margin-bottom: 5px; 
}

/* Cor específica para o botão ENTRAR (Verde) */
.dropdown-menu a.btn-entrar {
    background-color: #28a745; /* Verde Bootstrap 'success' */
}

/* Cor específica para o botão CADASTRE-SE (Vermelho) */
.dropdown-menu a.btn-cadastrar {
    background-color: #dc3545; /* Vermelho Bootstrap 'danger' */
}

/* Efeito HOVER para o botão ENTRAR */
.dropdown-menu a.btn-entrar:hover {
    background-color: #218838; /* Verde mais escuro */
}

/* Efeito HOVER para o botão CADASTRE-SE */
.dropdown-menu a.btn-cadastrar:hover {
    background-color: #c82333; /* Vermelho mais escuro */
}



.dropdown-item {
    background-color: #194076!important;
    border: 0;
}
/*
 * ESTILO PARA NOTIFICAÇÃO 'CARRINHO VAZIO'
*/
.toast-aviso {
    /* Posicionamento */
    position: fixed; /* Fica fixo na tela */
    top: 0; /* Começa acima da tela para animar para baixo */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; /* Garante que fique acima de tudo */
    
    /* Aparência */
    background-color: #dc3545; /* Vermelho, indicando um aviso */
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;

    /* Estado inicial (escondido) */
    opacity: 0;
    visibility: hidden;
    
    /* Animação suave */
    transition: top 0.4s ease, opacity 0.4s ease, visibility 0.4s;
}

/* Classe que será adicionada via JS para mostrar a notificação */
.toast-aviso.visivel {
    top: 20px; /* Desce para a posição final */
    opacity: 1;
    visibility: visible;
}