/*
Theme Name: Be Beauty Theme
Author: Elo Criativo
Description: Tema exclusivo para Be Beauty
Version: 1.0
*/

/* CONFIGURAÇÕES GERAIS DO HEADER */

/* Aplica as cores dinâmicas (definidas no PHP) */
.navbar-dynamic {
  background-color: var(--bb-header-bg, #000000) !important;
  transition: background-color 0.3s ease;
}

/* Cor dos Links e Texto da Marca */
.navbar-dynamic .nav-link,
.navbar-dynamic .navbar-brand {
  color: var(--bb-menu-color, #ffffff) !important;
}

/* Hover nos links */
.navbar-dynamic .nav-link:hover {
  opacity: 0.8;
}

/* Cor dos Ícones Sociais */
.navbar-dynamic .nav-social .nav-link {
  color: var(--bb-icon-color, #ffffff) !important;
}

/* Garante que o SVG obedeça a cor do texto */
.navbar-dynamic .nav-social svg path {
  fill: currentColor;
}

/* Cor do menu hambúrguer no mobile */
.navbar-dynamic .navbar-toggle span {
  background-color: var(--bb-menu-color, #ffffff) !important;
}

/* FIX DA LOGO (SVG & Tamanho) */
.navbar-brand {
  display: flex;
  align-items: center;
  min-height: 50px;
}

.navbar-brand .logo {
  width: 150px; /* Tamanho ideal para Desktop */
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .navbar-brand .logo {
    width: 120px; /* Tamanho menor para Mobile */
  }
}

/* FIX DE LARGURA (Layout Wide) */
.container-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Expande a largura do header em telas grandes para igualar ao original */
@media (min-width: 1200px) {
  .navbar-top .container-menu {
    max-width: 1360px !important;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* FOOTER */
@media (min-width: 992px) {
  .w-md-auto {
    width: auto !important;
  }
}

.shape svg {
  position: relative;
  will-change: transform;
}

@media (max-width: 991px) {
  /* Esconde a div do arco completamente em tablets e celulares */
  .custom-footer-shape {
    display: none !important;
  }

  /* Garante que o fundo do rodapé seja branco (ou a cor do seu site) já que o arco sumiu */
  .footer-section {
    background-color: #ffffff; /* Ajuste se o fundo do seu site não for branco puro */
  }
}

/* Icone Redes Sociais Header */
/* REMOVE background dos ícones sociais */
.nav-social .nav-link {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Garante que no hover também não apareça fundo */
.nav-social .nav-link:hover,
.nav-social .nav-link:focus {
  background-color: transparent !important;
}

/* MENU MOBILE */
/* Força o conteúdo a aparecer quando o Fancybox ativa */
/* O seletor .fancybox-content garante que só afete quando o menu estiver aberto */
.fancybox-content#navbar-mobile-style-2 {
  display: block !important; /* Anula o d-none */
  background-color: var(--bb-header-bg) !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding-top: 20px !important; /* Respiro no topo */
}

/* Remove padding extra do container do Fancybox para ficar tela cheia */
.fancybox-navbar .fancybox-slide {
  padding: 0 !important;
}

/* Garante que o texto dos links seja visível (Branco) */
#navbar-mobile-style-2 .nav-link {
  color: #ffffff !important;
  font-size: 24px; /* Tamanho bom para mobile */
}

#navbar-mobile-style-2 .navbar-toggle span {
  background-color: #ffffff !important;
}

.navbar-dark .navbar-toggle {
  justify-content: center;
}