/* Mnory 2026 navbar system — pairs with cards-modern.css tokens */

/* ---------- Promo bar ---------- */
.promo-banner {
  background: linear-gradient(135deg, var(--footer-bg-start, #0a1220) 0%, var(--footer-bg-end, #000) 100%) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
body.dark-mode .promo-banner { background: linear-gradient(135deg, var(--footer-bg-start, #0a1220) 0%, var(--footer-bg-end, #000) 100%) !important; }

.promo-item { border-radius: 10px !important; }
.promo-item:hover { background: rgba(255, 255, 255, .1) !important; transform: none !important; }
.promo-item .dropdown-toggle,
.promo-item .dropdown-toggle span,
.promo-item .material-icons { font-size: 20px; }

.promo-banner .dropdown-menu {
  background: var(--mn-surface) !important;
  border: 1px solid var(--mn-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 38px rgba(20, 32, 58, .18) !important;
  padding: 6px !important;
}
.promo-banner .dropdown-item { border-radius: 8px !important; color: var(--mn-ink) !important; font-size: .85rem; }
.promo-banner .dropdown-item:hover { background: var(--mn-soft) !important; color: var(--mn-ink) !important; }
.promo-banner .dropdown-item.active { background: var(--mn-brand) !important; color: #fff !important; }
body.dark-mode .promo-banner .dropdown-menu { background: #171d29 !important; border-color: #303846 !important; }
body.dark-mode .promo-banner .dropdown-item { color: #e2e8f0 !important; }
body.dark-mode .promo-banner .dropdown-item:hover { background: #242b37 !important; }

.promo-banner .user-dropdown .dropdown-menu {
  background: var(--mn-ink) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  min-width: 230px;
}
.promo-banner .user-dropdown .dropdown-item { color: rgba(255, 255, 255, .88) !important; }
.promo-banner .user-dropdown .dropdown-item:hover { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }

/* Auth pill group */
.promo-auth-group {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
}
.promo-auth-register {
  background: linear-gradient(135deg, #4f8bff, var(--mn-brand) 75%) !important;
  border-radius: 0 999px 999px 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.promo-auth-register:hover { filter: brightness(1.08); }
.promo-register-menu { border-radius: 16px !important; }
.promo-reg-icon { border-radius: 10px !important; }
.promo-reg-item:hover { background: var(--mn-soft) !important; }

/* ---------- Main header ---------- */
/* Same background + text color as the site footer, in both themes */
.header {
  background: linear-gradient(135deg, var(--footer-bg-start, #0a1220) 0%, var(--footer-bg-end, #000) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25) !important;
  color: #f8fafc !important;
}

.header .logo,
.header .dropdown-toggle,
.header .dropdown-item,
.header .search-box .form-control,
.header .search-box .btn-theme .material-icons {
  color: #f8fafc !important;
}

body.dark-mode .header,
body.dark-mode .header .logo,
body.dark-mode .header .dropdown-toggle,
body.dark-mode .header .dropdown-item,
body.dark-mode .header .search-box .form-control,
body.dark-mode .header .search-box .btn-theme .material-icons {
  color: #f8fafc !important;
}
.header.scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important; }
body.dark-mode .header {
  background: linear-gradient(135deg, var(--footer-bg-start, #0a1220) 0%, var(--footer-bg-end, #000) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
body.dark-mode .header.scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important; }

/* Header is always dark now, so always show the white logo mark */
.logo-img { filter: none !important; }
.logo-img--light { display: none !important; }
.logo-img--dark { display: inline-block !important; }

/* Icon buttons: translucent white housing on the dark bar */
.header .icon-btn,
.header .hamburger-btn,
.header .pages-menu-btn,
.header .categories-btn {
  background: rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  transition: background .2s ease, transform .2s ease !important;
}
body.dark-mode .header .icon-btn,
body.dark-mode .header .hamburger-btn,
body.dark-mode .header .pages-menu-btn,
body.dark-mode .header .categories-btn { background: rgba(255, 255, 255, .08) !important; }

.header .icon-btn .material-icons,
.header .hamburger-btn .material-icons,
.header .pages-menu-btn .material-icons,
.header .categories-btn .material-icons {
  color: #f8fafc !important;
  font-size: 21px !important;
}
body.dark-mode .header .icon-btn .material-icons,
body.dark-mode .header .hamburger-btn .material-icons,
body.dark-mode .header .pages-menu-btn .material-icons,
body.dark-mode .header .categories-btn .material-icons { color: #f8fafc !important; }

.header .icon-btn:hover,
.header .hamburger-btn:hover,
.header .pages-menu-btn:hover,
.header .categories-btn:hover {
  background: var(--mn-brand) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}
.header .icon-btn:hover .material-icons,
.header .hamburger-btn:hover .material-icons,
.header .pages-menu-btn:hover .material-icons,
.header .categories-btn:hover .material-icons { color: #fff !important; }

/* Search box */
.header .search-box .form-control {
  background: rgba(255, 255, 255, .08) !important;
  border: 1.5px solid rgba(255, 255, 255, .18) !important;
  color: #f8fafc !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.header .search-box .form-control::placeholder { color: rgba(248, 250, 252, .55) !important; }
.header .search-box .form-control:focus {
  background: rgba(255, 255, 255, .12) !important;
  border-color: var(--mn-brand) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .25) !important;
  transform: none !important;
}
body.dark-mode .header .search-box .form-control,
body.dark-mode .header .mobile-search-container .form-control {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #f8fafc !important;
}
body.dark-mode .header .search-box .form-control::placeholder { color: rgba(248, 250, 252, .55) !important; }
body.dark-mode .header .search-box .form-control:focus,
body.dark-mode .header .mobile-search-container .form-control:focus { background: rgba(255, 255, 255, .12) !important; }

.header .search-box .btn-theme,
.header .mobile-search-container .btn-theme {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #4f8bff, var(--mn-brand) 75%) !important;
  display: grid !important;
  place-items: center !important;
  right: 6px !important;
}
.header .search-box .btn-theme .material-icons,
.header .mobile-search-container .btn-theme .material-icons { font-size: 17px !important; color: #fff !important; }
.header .search-box .btn-theme:hover,
.header .mobile-search-container .btn-theme:hover { transform: translateY(-50%) scale(1.08) !important; }
.header .search-box .btn-theme:hover .material-icons,
.header .mobile-search-container .btn-theme:hover .material-icons { color: #fff !important; }

.header .mobile-search-container .form-control {
  background: rgba(255, 255, 255, .08) !important;
  border: 1.5px solid rgba(255, 255, 255, .18) !important;
  color: #f8fafc !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* Wishlist / cart / notification counters */
#wishlist-count, #cart-count, #headerNotificationBadge {
  background: #89CFF0 !important;
  color: #0a1220 !important;
  border: 2px solid var(--footer-bg-start, #0a1220) !important;
  box-shadow: 0 2px 8px rgba(137, 207, 240, .45) !important;
  font-weight: 750 !important;
}
body.dark-mode #wishlist-count, body.dark-mode #cart-count, body.dark-mode #headerNotificationBadge {
  border-color: var(--footer-bg-start, #0a1220) !important;
}

.notification-dropdown {
  border-radius: 16px !important;
  border: 1px solid var(--mn-line) !important;
  box-shadow: 0 14px 38px rgba(20, 32, 58, .16) !important;
}
body.dark-mode .notification-dropdown { background: #171d29 !important; border-color: #303846 !important; }
body.dark-mode .notification-dropdown .dropdown-item { color: #e2e8f0 !important; }

@media (max-width: 768px) {
  .header .icon-btn, .header .hamburger-btn, .header .pages-menu-btn, .header .categories-btn { border-radius: 10px !important; }
}