/* * Arquivo: assets/css/style.css
 * Tema Escuro inspirado na MHM Direct e Navbar na cor principal.
 */

:root {
    --custom-dark: #1e293b; /* Azul/Preto Marinho para o fundo do body e cards */
    --bs-primary: #007bff;  /* Azul Padrão para Botões ('Saiba Mais') */
    --bs-navbar-blue: var(--bs-primary); /* A Navbar usa a mesma cor dos botões principais */
    --bs-success: #25d366; /* Cor do WhatsApp */
}

body {
    background-color: var(--custom-dark);
}

/* Customização de Fundo */
.bg-dark-custom {
    background-color: var(--custom-dark) !important;
}

.bg-navbar-blue {
    background-color: var(--bs-navbar-blue) !important;
}

/* Logo - Remove o filtro */
.navbar-brand img {
    filter: none; 
}

/* Cor do texto geral no body escuro */
h1, h2, h3, h4, h5, p, a, .card-text, .text-white {
    color: white !important;
}

/* Cards de Produto - Fundo mais claro para contraste */
.card {
    background-color: #2e3b4f; 
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Logos de Marcas: Removido o 'filter: invert(1)' */
.logo-marcas {
    filter: none;
}

/* Botão Flutuante do WhatsApp (mantido 100% responsivo) */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: var(--bs-success); 
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* Mídias para Responsividade do Float Button */
@media (max-width: 767px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
    }
}


/* --- CORREÇÃO DO CARROSSEL DE PRODUTOS --- */

/* Regras de correção para os carrosseis de produto */
/* O CSS abaixo garante que os indicadores de navegação (tracinhos)
    fiquem posicionados abaixo dos cards de produto, resolvendo a sobreposição.
*/

/* 1. Garante que os carrosseis Brother e Epson tenham espaço extra abaixo */
#brotherCarousel,
#epsonCarousel {
    padding-bottom: 40px; 
}

/* 2. Empurra os indicadores (tracinhos) para baixo no espaço reservado */
#brotherCarousel .carousel-indicators,
#epsonCarousel .carousel-indicators {
    bottom: -30px;
}