@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&display=swap');

/* =============================================
   ZM ONLINE — TEMA PREMIUM v2.1
   Paleta: Amarelo #FBBE00 | Escuro #332D30 | Preto #000000
   Referências: GShield + Modelos Telefonia LI
   ============================================= */

/* ── RESET ESTRUTURAL ── */
*, *::before, *::after { box-sizing: border-box !important; }
html, body { overflow-x: hidden !important; max-width: 100% !important; }
body {
  font-family: 'Montserrat', sans-serif !important;
  background-color: #f5f5f5 !important;
  color: #444444 !important;
  font-size: 13px !important;
}

/* ── CONTAINERS ── */
.container, .row-fluid, .span12, .conteudo,
.secao-principal, .secao, .wrapper {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ── BARRA DE TOPO ── */
#barra-topo, .barra-topo, #topo-superior, .topo-superior {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-size: 12px !important;
}
#barra-topo a, .barra-topo a, .topo-superior a { color: #ffffff !important; }
#barra-topo a:hover, .barra-topo a:hover { color: #FBBE00 !important; }

/* ── HEADER ── */
#cabecalho, .cabecalho, header {
  background-color: #ffffff !important;
  border-bottom: 3px solid #FBBE00 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10) !important;
}

/* ── MENU PRINCIPAL ── */
.menu.superior, #menu-categorias, .menu-categorias,
nav.menu-principal, .menu-principal {
  background-color: #000000 !important;
  overflow: visible !important;
}
.menu.superior .nivel-um > li > a,
.menu.superior .nivel-um > li > a strong,
#menu-categorias a, .menu-categorias a {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}
.menu.superior .nivel-um > li > a:hover,
.menu.superior .nivel-um > li > a:hover strong {
  color: #FBBE00 !important;
  background-color: rgba(251,190,0,0.12) !important;
}
.menu.superior .fundo-secundario { color: #FBBE00 !important; }

/* ── SUBMENUS DESKTOP ── */
.menu.superior .nivel-dois,
.menu.superior .nivel-tres,
.menu.superior ul.borda-alpha,
.menu-categorias .nivel-dois,
.menu-categorias .nivel-tres {
  background-color: #1a1a1a !important;
  border: 1px solid #FBBE00 !important;
  border-top: 3px solid #FBBE00 !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  min-width: 200px !important;
  z-index: 9999 !important;
}
.menu.superior .nivel-dois li a,
.menu.superior .nivel-tres li a,
.menu-categorias .nivel-dois li a,
.menu-categorias .nivel-tres li a {
  color: #eeeeee !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  display: block !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  transition: color 0.15s, background-color 0.15s !important;
}
.menu.superior .nivel-dois li a:hover,
.menu.superior .nivel-tres li a:hover,
.menu-categorias .nivel-dois li a:hover {
  color: #FBBE00 !important;
  background-color: rgba(251,190,0,0.10) !important;
}

/* ── DROPDOWN CONTA ── */
.dropdown-menu {
  background-color: #1a1a1a !important;
  border: 1px solid #FBBE00 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.dropdown-menu li a {
  color: #eeeeee !important;
  font-size: 12px !important;
  padding: 9px 16px !important;
  transition: color 0.15s, background-color 0.15s !important;
}
.dropdown-menu li a:hover {
  color: #FBBE00 !important;
  background-color: rgba(251,190,0,0.10) !important;
}

/* ── BUSCA ── */
#busca input, .campo-busca input, input[type='search'], input#auto-complete {
  border: 2px solid #FBBE00 !important;
  border-radius: 4px 0 0 4px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
}
#busca button, .btn-busca, button[hint="Buscar"] {
  background-color: #FBBE00 !important;
  color: #332D30 !important;
  border: none !important;
  font-weight: 700 !important;
}

/* ── BANNERS ── */
.banner, .banner-principal, .flexslider, .span12.banner, [class*="banner"] {
  max-width: 100% !important;
  overflow: hidden !important;
}
.banner img, .banner-principal img, .flexslider img, .span12.banner img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}
.flexslider {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.flex-viewport { overflow: hidden !important; max-width: 100% !important; }
.span12.banner.tarja { display: none !important; }

/* ── MINI BANNERS ── */
.mini-banner, [class*="mini-banner"], .banner-mini, .banners-mini {
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.mini-banner:hover, [class*="mini-banner"]:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.20) !important;
}
.mini-banner img, [class*="mini-banner"] img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.banners-mini .span4, .mini-banners .span4 { padding: 4px !important; }

/* ── BOTÕES ── */
.btn-comprar, .comprar, a.comprar, button.comprar,
.btn-primary, .btn-adicionar, .adicionar-carrinho,
a[hint="Ver detalhes do produto"] {
  background-color: #FBBE00 !important;
  color: #332D30 !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
  padding: 10px 18px !important;
}
.btn-comprar:hover, .comprar:hover, a.comprar:hover {
  background-color: #e0a800 !important;
  color: #332D30 !important;
  transform: translateY(-1px) !important;
}

/* ── TÍTULOS ── */
.titulo-secao, h2.titulo, .secao-titulo, .vitrine h2, .listagem h2, .destaque h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #332D30 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 16px !important;
  position: relative !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}
.titulo-secao::after, h2.titulo::after, .secao-titulo::after {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  background-color: #FBBE00 !important;
  margin-top: 8px !important;
  border-radius: 2px !important;
}

/* ── CARDS DE PRODUTO ── */
.produto, .item-produto, .produto-item {
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
}
.produto:hover, .item-produto:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
  transform: translateY(-3px) !important;
  border-color: #FBBE00 !important;
}
.produto .nome, .item-produto .nome, .nome-produto {
  color: #332D30 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.produto .preco, .item-produto .preco, .preco-produto, .preco {
  color: #FBBE00 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.preco-de, .preco-antigo, del {
  color: #999999 !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}
.frete-gratis, .badge-frete, [class*="frete"] {
  background-color: #FBBE00 !important;
  color: #332D30 !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
}

/* ── VITRINE ── */
.listagem-linha, .listagem, .vitrine {
  overflow: hidden !important;
  max-width: 100% !important;
}
.listagem-linha.flexslider { overflow: hidden !important; }

/* ── FOOTER ── */
footer, #rodape, .rodape, #footer {
  background-color: #332D30 !important;
  color: #cccccc !important;
  font-size: 13px !important;
  padding: 40px 0 20px !important;
}
footer a, #rodape a, .rodape a {
  color: #cccccc !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
footer a:hover, #rodape a:hover { color: #FBBE00 !important; }
footer h4, footer h3, #rodape h4 {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  margin-bottom: 15px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #FBBE00 !important;
}
.rodape-inferior, .copyright {
  background-color: #000000 !important;
  color: #888888 !important;
  font-size: 12px !important;
  padding: 15px 0 !important;
  text-align: center !important;
  border-top: 1px solid #FBBE00 !important;
}

/* ══════════════════════════════════════════════
   MENU MOBILE DRAWER — CORREÇÃO COMPLETA v2.1
   Problema: strong.titulo.fundo-principal recebe
   cor amarela como fundo, tornando texto invisível
   ══════════════════════════════════════════════ */

/* Container principal do drawer mobile */
.barra-categorias,
.barra-categorias .nivel-um,
.barra-categorias .nivel-dois,
.barra-categorias .nivel-tres {
  background-color: #111111 !important;
  color: #ffffff !important;
}

/* Itens de categoria */
.barra-categorias .nivel-um > li {
  background-color: #111111 !important;
  border-bottom: 1px solid rgba(251,190,0,0.2) !important;
}

/* Links */
.barra-categorias .nivel-um > li > a {
  color: #ffffff !important;
  background-color: transparent !important;
  display: block !important;
  padding: 14px 16px !important;
}

/* CORREÇÃO CENTRAL: strong.titulo.fundo-principal
   O tema aplica amarelo como fundo neste elemento,
   mas o texto precisa ser branco para ser legível */
.barra-categorias .nivel-um > li > a strong.titulo,
.barra-categorias .nivel-um > li > a strong.titulo.fundo-principal,
.nivel-um > li > a strong.titulo.fundo-principal {
  background-color: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  width: 100% !important;
}

/* Hover */
.barra-categorias .nivel-um > li:hover,
.barra-categorias .nivel-um > li > a:hover {
  background-color: rgba(251,190,0,0.15) !important;
}
.barra-categorias .nivel-um > li:hover > a strong,
.barra-categorias .nivel-um > li > a:hover strong {
  color: #FBBE00 !important;
}

/* Submenus no drawer */
.barra-categorias .nivel-dois {
  background-color: #1a1a1a !important;
  border-left: 3px solid #FBBE00 !important;
  padding-left: 8px !important;
}
.barra-categorias .nivel-dois li a {
  color: #cccccc !important;
  font-size: 12px !important;
  padding: 10px 16px !important;
  display: block !important;
}
.barra-categorias .nivel-dois li a:hover { color: #FBBE00 !important; }

/* Cabeçalho do drawer (fundo amarelo com X fechar) */
.barra-categorias .cabecalho-categorias,
.barra-categorias .header-mobile,
.barra-categorias > .titulo,
.barra-categorias > .cabecalho {
  background-color: #FBBE00 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
}

/* ── COBERTURA AMPLA MOBILE (max 992px) ──
   Garante que qualquer strong.fundo-principal
   dentro de menus mobile seja legível */
@media (max-width: 992px) {
  .nivel-um li a strong.fundo-principal,
  .nivel-um li a strong.titulo {
    background-color: transparent !important;
    color: #ffffff !important;
  }
  .nivel-um > li {
    background-color: #111111 !important;
    border-bottom: 1px solid rgba(251,190,0,0.15) !important;
  }
  .nivel-um > li > a {
    color: #ffffff !important;
    padding: 12px 16px !important;
    display: block !important;
  }
  .nivel-um > li > a:hover,
  .nivel-um > li > a:hover strong {
    color: #FBBE00 !important;
    background-color: rgba(251,190,0,0.10) !important;
  }
}

/* ── RESPONSIVIDADE MOBILE (max 768px) ── */
@media (max-width: 768px) {
  .menu.superior .nivel-dois,
  .menu.superior .nivel-tres {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 3px solid #FBBE00 !important;
  }
  .banner img, .banner-principal img {
    min-height: 160px !important;
    object-position: center !important;
  }
  .mini-banner, [class*="mini-banner"] { margin-bottom: 8px !important; }
  .produto, .item-produto { margin-bottom: 12px !important; }

  /* strong.fundo-principal no mobile */
  .fundo-principal strong,
  li a strong.fundo-principal,
  li a strong.titulo.fundo-principal {
    background-color: transparent !important;
    color: #ffffff !important;
  }

  /* Atalhos mobile (barra inferior fixa) */
  .atalhos-mobile.fundo-secundario { background-color: #000000 !important; }
  .atalhos-mobile li a { color: #ffffff !important; }
  .atalhos-mobile li.fundo-principal { background-color: #FBBE00 !important; }
  .atalhos-mobile li.fundo-principal a { color: #000000 !important; }
}