/* =====================================================================================
   NAVBAR CUSTOM (OficialSoft) - CSS exclusivo da barra do topo
   Motivo: isolar a navbar do Bootstrap e evitar “misturar” estilos com outras páginas.
   ===================================================================================== */

/* Container principal da navbar */
.navbar-custom { /* Classe exclusiva da navbar para evitar conflito com Bootstrap */
  display: flex; /* Alinha itens horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  justify-content: space-between; /* Espaça esquerda/centro/direita */
  width: 100%; /* Ocupa a largura disponível */
  position: relative; /* Base para posicionamentos internos */
  z-index: 1000; /* Mantém acima do conteúdo padrão */
  box-sizing: border-box; /* Evita “crescer” com padding */
  min-height: 56px; /* Garante altura mínima confortável */
}

/* Wrapper interno (limita conteúdo e centraliza) */
.navbar-custom-wrapper { /* Mantém o conteúdo alinhado e com largura máxima */
  display: flex; /* Layout em linha */
  align-items: center; /* Centraliza verticalmente */
  justify-content: space-between; /* Espaçamento entre blocos */
  gap: 14px; /* Espaço entre blocos */
  width: 100%; /* Ocupa a navbar toda */
  max-width: 1320px; /* Largura padrão de container “wide” */
  margin: 0 auto; /* Centraliza */
  padding: 0 15px; /* Respiro nas laterais */
  box-sizing: border-box; /* Mantém cálculo previsível */
}

/* Blocos: esquerda / centro / direita */
.navbar-custom-left,
.navbar-custom-center,
.navbar-custom-right { /* Padroniza alinhamento dos blocos */
  display: flex; /* Itens lado a lado */
  align-items: center; /* Centraliza verticalmente */
}

.navbar-custom-left { /* Logo + título */
  flex: 0 0 auto; /* Não estica */
  gap: 10px; /* Espaço entre logo e texto */
}

.navbar-custom-center { /* Busca */
  flex: 1 1 auto; /* Pode crescer */
  justify-content: center; /* Centraliza a busca */
}

.navbar-custom-right { /* Ações: carrinho, avatar, hambúrguer */
  flex: 0 0 auto; /* Não estica */
  justify-content: flex-end; /* Joga para direita */
  gap: 10px; /* Espaço entre ações */
}

/* Brand (logo + título) */
.navbar-custom-brand { /* Link do brand */
  display: flex; /* Logo e texto lado a lado */
  align-items: center; /* Centraliza verticalmente */
  gap: 10px; /* Espaço */
  text-decoration: none; /* Remove sublinhado */
  color: inherit; /* Herda cor configurada */
}

.navbar-custom-logo { /* Imagem da logo */
  display: block; /* Evita espaços do inline */
  max-height: 60px; /* Default (ajustado via inline CSS dinâmico) */
  width: auto; /* Mantém proporção */
  object-fit: contain; /* Evita distorção */
}

.navbar-custom-title { /* Texto do nome da loja */
  font-weight: 800; /* Destaque */
  font-size: 1.1rem; /* Legível */
  line-height: 1.1; /* Compacto */
  white-space: nowrap; /* Não quebra o nome */
}

/* Busca */
.navbar-custom-search { /* Container da busca */
  position: relative; /* Base para dropdown */
  width: min(600px, 100%); /* Limita em desktop, ocupa em telas menores */
}

.navbar-custom-search-input { /* Input da busca */
  width: 100%; /* Ocupa a largura do container */
  padding: 10px 44px 10px 14px; /* Espaço para o botão/ícone */
  border: 1px solid rgba(0,0,0,.12); /* Borda sutil */
  border-radius: 10px; /* Visual moderno */
  background: rgba(255,255,255,.92); /* Fundo levemente translúcido */
  outline: none; /* Remove outline padrão */
  box-sizing: border-box; /* Cálculo previsível */
}

.navbar-custom-search-input:focus { /* Feedback de foco */
  border-color: rgba(0,0,0,.28); /* Mais contraste */
  background: #fff; /* Fica sólido no foco */
  box-shadow: 0 6px 18px rgba(0,0,0,.10); /* Elevação */
}

.navbar-custom-search-btn { /* Botão/ícone da busca */
  position: absolute; /* Fica dentro do input */
  right: 8px; /* Encosta no lado direito */
  top: 50%; /* Centraliza */
  transform: translateY(-50%); /* Centraliza */
  border: 0; /* Sem borda */
  background: transparent; /* Sem fundo */
  color: inherit; /* Herda cor da navbar */
  opacity: .75; /* Sutil */
  cursor: pointer; /* Cursor clicável */
  padding: 6px 8px; /* Área de clique */
}

.navbar-custom-search-btn:hover { /* Hover do botão de busca */
  opacity: 1; /* Destaca */
}

.navbar-custom-search-results { /* Dropdown de resultados */
  position: absolute; /* Flutua abaixo do input */
  top: calc(100% + 8px); /* Espaço abaixo */
  left: 0; /* Alinha à esquerda */
  right: 0; /* Ocupa toda largura */
  background: #fff; /* Fundo sólido */
  border: 1px solid rgba(0,0,0,.10); /* Borda */
  border-radius: 12px; /* Cantos arredondados */
  box-shadow: 0 10px 28px rgba(0,0,0,.12); /* Elevação */
  max-height: 360px; /* Limita altura */
  overflow-y: auto; /* Scroll interno */
  z-index: 1100; /* Acima da navbar */
  display: none; /* Controlado por JS */
}

.navbar-custom-search-results.active { /* Estado visível */
  display: block; /* Mostra */
}

/* Carrinho */
.navbar-custom-cart { /* Botão/link do carrinho */
  position: relative; /* Base para badge */
  display: inline-flex; /* Alinha ícone e texto */
  align-items: center; /* Centraliza verticalmente */
  gap: 8px; /* Espaço entre ícone e texto */
  padding: 10px 14px; /* Área de clique */
  border-radius: 12px; /* Cantos */
  text-decoration: none; /* Remove sublinhado */
  color: inherit; /* Herda cor */
  background: rgba(0,0,0,.06); /* Fundo sutil */
  transition: transform .18s ease, background-color .18s ease; /* Suaviza */
}

.navbar-custom-cart:hover { /* Hover do carrinho */
  background: rgba(0,0,0,.10); /* Mais contraste */
  transform: translateY(-1px); /* Leve elevação */
}

.navbar-custom-cart-badge { /* Badge de quantidade */
  position: absolute; /* Flutua no canto */
  top: -6px; /* Sobe */
  right: -6px; /* Vai para o canto */
  min-width: 20px; /* Tamanho mínimo */
  height: 20px; /* Altura */
  padding: 0 6px; /* Espaço interno */
  border-radius: 999px; /* “Pílula” */
  display: inline-flex; /* Centraliza */
  align-items: center; /* Centraliza */
  justify-content: center; /* Centraliza */
  background: #dc3545; /* Vermelho (alerta) */
  color: #fff; /* Texto branco */
  font-size: .72rem; /* Pequeno */
  font-weight: 800; /* Legível */
  box-shadow: 0 6px 14px rgba(0,0,0,.18); /* Destaque */
}

/* Avatar + dropdown (hover) */
.navbar-custom-avatar { /* Container do avatar */
  position: relative; /* Base do dropdown */
}

.navbar-custom-avatar-circle { /* Bolinha com iniciais */
  width: 40px; /* Tamanho */
  height: 40px; /* Tamanho */
  border-radius: 50%; /* Círculo */
  display: flex; /* Centraliza */
  align-items: center; /* Centraliza */
  justify-content: center; /* Centraliza */
  font-weight: 800; /* Destaque */
  font-size: .95rem; /* Legível */
  color: #fff; /* Texto branco */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Visual moderno */
  box-shadow: 0 10px 18px rgba(0,0,0,.15); /* Elevação */
  cursor: pointer; /* Indica interação */
}

.navbar-custom-dropdown { /* Menu dropdown */
  position: absolute; /* Flutua */
  top: calc(100% + 10px); /* Abaixo do avatar */
  right: 0; /* Alinha na direita */
  min-width: 240px; /* Largura mínima */
  background: #fff; /* Fundo sólido */
  border: 1px solid rgba(0,0,0,.10); /* Borda */
  border-radius: 14px; /* Cantos */
  box-shadow: 0 14px 34px rgba(0,0,0,.18); /* Elevação */
  padding: 8px 0; /* Espaço interno */
  opacity: 0; /* Invisível */
  visibility: hidden; /* Não clicável */
  transform: translateY(-8px); /* Animação */
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease; /* Suaviza */
  z-index: 1200; /* Acima de tudo na navbar */
}

.navbar-custom-avatar:hover .navbar-custom-dropdown { /* Abre no hover */
  opacity: 1; /* Visível */
  visibility: visible; /* Clicável */
  transform: translateY(0); /* Final */
}

.navbar-custom-dropdown-item { /* Itens do dropdown */
  display: flex; /* Ícone + texto */
  align-items: center; /* Alinha */
  gap: 10px; /* Espaço */
  padding: 10px 14px; /* Área de clique */
  color: #1f2937; /* Texto neutro */
  text-decoration: none; /* Sem sublinhado */
  transition: background-color .15s ease; /* Suaviza */
}

.navbar-custom-dropdown-item:hover { /* Hover do item */
  background: rgba(0,0,0,.06); /* Destaque */
}

.navbar-custom-dropdown-item.danger { /* Item de sair */
  color: #dc3545; /* Vermelho */
  font-weight: 700; /* Destaque */
}

/* Botão “Entrar” */
.navbar-custom-login { /* Link/botão login */
  display: inline-flex; /* Ícone + texto */
  align-items: center; /* Alinha */
  gap: 8px; /* Espaço */
  padding: 10px 14px; /* Área */
  border-radius: 12px; /* Cantos */
  text-decoration: none; /* Sem sublinhado */
  color: #fff; /* Texto branco */
  background: #0d6efd; /* Azul padrão */
  font-weight: 700; /* Destaque */
  transition: transform .18s ease, filter .18s ease; /* Suaviza */
}

.navbar-custom-login:hover { /* Hover do login */
  transform: translateY(-1px); /* Elevação */
  filter: brightness(0.95); /* Leve escurecimento */
}

/* Toggle mobile */
.navbar-custom-toggle { /* Botão hambúrguer */
  display: none; /* Some em desktop */
  border: 0; /* Sem borda */
  background: transparent; /* Sem fundo */
  padding: 8px; /* Área de toque */
  cursor: pointer; /* Indica clique */
  color: inherit; /* Herda cor */
}

.navbar-custom-toggle-icon { /* Ícone SVG */
  width: 26px; /* Tamanho */
  height: 26px; /* Tamanho */
  display: block; /* Evita espaços */
}

/* Menu mobile */
.navbar-custom-mobile { /* Drawer abaixo da navbar */
  display: none !important; /* Começa escondido */
  position: absolute; /* Abaixo da navbar */
  top: 100%; /* Logo após */
  left: 0; /* Alinha */
  right: 0; /* Alinha */
  background: #fff !important; /* Fundo sólido para não “misturar” */
  border-top: 2px solid rgba(0,0,0,.12) !important; /* Separação */
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important; /* Elevação */
  padding: 18px; /* Espaço interno */
  z-index: 1030 !important; /* Acima da navbar */
  max-height: calc(100vh - 72px); /* Evita passar do viewport */
  overflow-y: auto; /* Scroll interno */
  box-sizing: border-box; /* Cálculo previsível */
}

.navbar-custom-mobile.active { /* Estado ativo (aberto) */
  display: block !important; /* Mostra */
}

/* Posições (classes geradas no HTML) */
.navbar-custom-position-sticky { /* Sticky */
  position: sticky; /* Fixa ao rolar */
  top: 0; /* Colado no topo */
}

.navbar-custom-position-fixed { /* Fixed */
  position: fixed; /* Sempre no topo */
  top: 0; /* Topo */
  left: 0; /* Esquerda */
  right: 0; /* Direita */
}

.navbar-custom-position-none { /* Relative */
  position: relative; /* Parte do fluxo */
}

/* Responsivo */
@media (max-width: 991px) { /* Breakpoint padrão (tablet/mobile) */
  .navbar-custom-center { /* Esconde busca no meio em telas menores */
    display: none !important; /* Evita quebrar */
  }
  .navbar-custom-toggle { /* Mostra botão hambúrguer */
    display: inline-flex; /* Exibe */
    align-items: center; /* Alinha */
    justify-content: center; /* Alinha */
  }
  .navbar-custom-cart span, /* Esconde texto (mantém ícone) */
  .navbar-custom-login span { /* Esconde texto */
    display: none; /* Compacta */
  }
}