/* public/css/styles.css
   Estilos adicionais e pequenas customizações.
   Usamos Tailwind via CDN para utilitários; aqui colocamos ajustes extras.

   Observação: removi TODAS as regras relacionadas ao banner/carrossel conforme solicitado.
*/

/* Sombra leve nos cards de produto */
.product-card {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Botão primário vermelho */
.btn-primary {
  background-color: #E10600;
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #000000;
}

/* Fade-in default (applied by JS when elements enter viewport) */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.fade-in.show {
  opacity: 1;
  transform: none;
}

/* Ajustes do botão WhatsApp flutuante: manter ícone no centro e tamanho adequado */
#whatsapp-float-btn img,
#whatsapp-float-btn svg {
  display: block !important;
  width: 200px !important;       /* tamanho do ícone dentro do botão */
  height: 200px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: transparent !important; /* evita fundo indesejado vindo do SVG na renderização */
  pointer-events: none !important;
}

/* ===== WhatsApp float - correção definitiva ===== */
.whatsapp-float {
  position: fixed !important;
  right: 1rem !important;
  bottom: 1rem !important;
  z-index: 100005 !important;   /* botão acima da onda */
  width: 64px !important;
  height: 64px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  background: transparent !important; /* garantir que o próprio botão não pinte com cor */
  box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .12s ease !important;
  animation: heartbeat 1.8s infinite !important;
  overflow: visible !important;
}

/* Remove qualquer pseudo-elemento antes que possa pintar um círculo indesejado */
.whatsapp-float::before {
  content: none !important;
  display: none !important;
}

/* ===== Heartbeat (batida de coração) ===== */
@keyframes heartbeat {
  0% { transform: scale(1); }
  10% { transform: scale(1.08); }
  30% { transform: scale(0.98); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ===== Shockwave (onda de choque) =====
   Usamos ::after para criar uma onda que se expande por trás do botão.
   A animação é suave e repetitiva. */
.whatsapp-float::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%) scale(0.6);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(37,211,102,0.22) 0%,
    rgba(37,211,102,0.10) 40%,
    rgba(37,211,102,0) 70%);
  z-index: 100004 !important; /* abaixo do botão, acima do resto */
  pointer-events: none;
  opacity: 0;
  filter: blur(6px);
  animation: shockwave 2.4s infinite;
}

/* Ajuste da onda para telas maiores (para ficar mais ampla que o botão) */
@media (min-width: 768px) {
  .whatsapp-float::after { width: 140%; height: 140%; }
}

@keyframes shockwave {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.9;
  }
  40% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0.45;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
}

/* Suporte para usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none !important; }
  .whatsapp-float::after { animation: none !important; }
}

/* ===== footer social icons (external SVGs) ===== */
.footer-social { /* garante alinhamento consistente */ }
.footer-social a { overflow: visible; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; }
.footer-social .social-icon {
  width: 50px !important;   /* tamanho do ícone */
  height: 50px !important;
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
  transition: transform .14s ease, opacity .14s ease, filter .14s ease;
  will-change: transform, opacity;
}

/* Hover: não pintar fundo, apenas transformar o ícone */
.footer-social .social-link:hover { background-color: transparent !important; }
.footer-social .social-link:hover .social-icon {
  transform: scale(1.08);
  opacity: 0.95;
  /* opcional: leve mudança de cor via filter, comente/descomente conforme gosto */
  /* filter: hue-rotate(-10deg) saturate(1.1) brightness(1.05); */
}

.footer-social .social-link {
  color: #ffffff; /* cor padrão do ícone */
}
.footer-social .social-link:hover {
  color: #E10600; /* cor desejada no hover (ex.: vermelho da marca) */
  background-color: transparent !important; /* garante que não apareça o círculo */
}

#banner-carousel 
.carousel-slide img { 
width: 100% !important; 
height: 100% !important; 
object-fit: cover !important; 
object-position: center center !important; 
}






/* Controla apenas o tamanho do logo em desktop e celular.
   Usa somente /images/logo.jpg (substitua se usar outro nome).
   Inclua este arquivo depois do seu styles.css para garantir que sobrescreva utilitários.
*/

/* Seletor específico para garantir override das classes utilitárias */
.brand-wrap > img {
  display: block;
  width: 250px;      /* tamanho no desktop (ajuste aqui) */
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* Mobile: aumenta o logo em telas pequenas */
@media (max-width: 600px) {
  .brand-wrap > img {
    width: 180px;    /* tamanho no celular (ajuste aqui) */
  }
}

/* Opcional: ajuste intermediário (tablet) */
@media (min-width: 601px) and (max-width: 900px) {
  .brand-wrap > img {
    width: 150px;
  }
}








/* Corrige corte dos banners no celular: em telas pequenas usa height:auto e object-fit:contain */
@media (max-width: 768px) {
  #banner-carousel .carousel-slide {
    height: auto; /* permite que o slide expanda conforme a imagem */
  }
  #banner-carousel .carousel-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* Forçar posicionamento do menu mobile (override definitivo, apenas em mobile) */
@media (max-width: 767px) {
  #mobile-menu {
    position: fixed !important;
    top: 90px !important;
    right: 12px !important;
    left: auto !important;
    width: 280px !important;
    max-width: calc(100% - 24px) !important;
    background: #000 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
    z-index: 12000 !important;
    box-sizing: border-box !important;
  }
  #mobile-menu ul { padding: 1rem !important; margin: 0 !important; width:100% !important; box-sizing:border-box !important; }
}







/* ====== Styles for independent mobile menu 2 ====== */
/* mostra o botão alternativo apenas em mobile */
@media (max-width: 767px) {
  #hamburger-btn-2 { display: flex !important; align-items:center; justify-content:center; }
  #mobile-menu-2 { display: none !important; } /* controlado por JS */
}

/* aberto */
#mobile-menu-2.open {
  display: block !important;
}

/* pequenas melhorias visuais */
#hamburger-btn-2 svg rect { fill: #fff; }
#mobile-menu-2 a.nav-link:hover { color: #E10600 !important; } /* hover vermelho da marca */


/* Ajuste de posição do menu-2 (mude o valor em --menu-top se precisar) */
:root {
  --mobile-menu-2-top: 100px; /* troque por 110px, 120px, etc */
}
@media (max-width: 767px) {
  #mobile-menu-2 { top: var(--mobile-menu-2-top) !important; }
  #hamburger-btn-2 { top: calc(var(--mobile-menu-2-top) - 76px) !important; } /* opcional: posiciona o botão relativo ao painel */
}






/* ajuste estático: encostar o painel mais próximo ao header */
@media (max-width: 767px) {
  #mobile-menu-2 { top: 80px !important; } /* experimente 80px ou 70px até ficar visualmente ok */
  #hamburger-btn-2 { top: 25px !important; } /* opcional: mantém o botão acima do painel */
}











/* ============================================================================== */
/* OBS: Se desejar que eu aplique próximas alterações, peça o próximo único passo. */