/* MENU DESKTOP - CONTROLE COMPLETO */
.d-none.d-lg-block {
  position: absolute !important;
  left: 65% !important; /* 35% da direita */
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 40px !important;
  z-index: 999 !important;
}

/* DESTRÓI OS ESTILOS DO BOOTSTRAP */
.d-none.d-lg-block .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: 100% !important;
}

/* DESTRÓI OS ITEMS DO BOOTSTRAP */
.d-none.d-lg-block .navbar-nav .nav-item {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* DESTRÓI OS LINKS DO BOOTSTRAP */
.d-none.d-lg-block .navbar-nav .nav-link {
  color: white !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  transition: color 0.3s ease !important;
}

/* LINHA DE SUBLINHADO PARA TODOS OS LINKS */
.d-none.d-lg-block .navbar-nav .nav-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: -5px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: #0a5cff !important;
  transition: width 0.3s ease !important;
  border-radius: 1px !important;
}

/* HOVER - APARECE LINHA */
.d-none.d-lg-block .navbar-nav .nav-link:hover::after {
  width: 100% !important;
}

/* PÁGINA ATIVA - LINHA PERMANENTE */
.d-none.d-lg-block .navbar-nav .nav-link.active::after {
  width: 100% !important;
  background: #0a5cff !important;
}

/* COR DA PÁGINA ATIVA */
.d-none.d-lg-block .navbar-nav .nav-link.active {
  color: #0a5cff !important;
  font-weight: 600 !important;
}

/* CARRINHO COM ÍCONE */
.cart-icon-header {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 100% !important;
}

.cart-icon-header i {
  font-size: 18px !important;
  color: inherit !important;
}

/* BADGE DO CARRINHO */
.badge-carrinho {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  background: #ff4757 !important;
  color: white !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #111 !important;
  animation: pulse 2s infinite !important;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* MENU DROPDOWN (3 BARRAS) - POSICIONAMENTO */
.d-flex.align-items-center {
  position: relative !important;
  right: 200px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1001 !important;
}

/* BOTÃO DO MENU DROPDOWN */
.dropdown .btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
}

.dropdown .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.05) !important;
}

/* ============================================
   SISTEMA DE PÁGINA ATIVA SEM JAVASCRIPT
============================================ */

/* DETECTA PÁGINA ATUAL PELO ARQUIVO HTML */
body[data-page="index"] .nav-link[href="index.html"],
body[data-page="produtos"] .nav-link[href="produtos.html"],
body[data-page="carrinho"] .nav-link[href="carrinho.html"],
body[data-page="contactos"] .nav-link[href="contactos.html"],
body[data-page="sobre"] .nav-link[href="sobre.html"],
body[data-page="wholesale"] .nav-link[href="wholesale.html"],
body[data-page="partners"] .nav-link[href="partners.html"],
body[data-page="faq"] .nav-link[href="faq.html"] {
  color: #0a5cff !important;
  font-weight: 600 !important;
}

body[data-page="index"] .nav-link[href="index.html"]::after,
body[data-page="produtos"] .nav-link[href="produtos.html"]::after,
body[data-page="carrinho"] .nav-link[href="carrinho.html"]::after,
body[data-page="contactos"] .nav-link[href="contactos.html"]::after,
body[data-page="sobre"] .nav-link[href="sobre.html"]::after,
body[data-page="wholesale"] .nav-link[href="wholesale.html"]::after,
body[data-page="partners"] .nav-link[href="partners.html"]::after,
body[data-page="faq"] .nav-link[href="faq.html"]::after {
  width: 100% !important;
  background: #0a5cff !important;
}

/* ============================================
   MENU MÓVEL - MANTÉM BOOTSTRAP
============================================ */

/* Menu móvel fica como Bootstrap controla */
.navbar-toggler {
  position: relative !important;
  z-index: 1002 !important;
}

/* ============================================
   AJUSTES FINAIS DE POSIÇÃO
============================================ */

/* Para visualizar posições (remover depois de ajustar) */
/*
.d-none.d-lg-block {
    border: 2px solid red !important;
}

.d-none.d-lg-block .navbar-nav {
    border: 2px solid blue !important;
}

.logo-nome {
    border: 2px solid green !important;
}

.d-flex.align-items-center {
    border: 2px solid yellow !important;
}
*/

/* ============================================
   RESPONSIVIDADE - MANTÉM BOOTSTRAP
============================================ */

@media (max-width: 992px) {
  .d-none.d-lg-block {
    display: none !important;
  }

  .logo-nome {
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }

  .d-flex.align-items-center {
    position: relative !important;
    right: auto !important;
    transform: none !important;
  }
}
