/*
 * GAMERSX Header CSS
 * BuddyBoss Child Theme
 * Version: 1.0.0
 */

/* ================================================================
   Site Header Container
   ================================================================ */
#masthead.site-header,
.site-header {
  background-color: var(--gx-header-bg) !important;
  border-bottom: 1px solid var(--gx-header-border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

/* Inner flex container — full width, no max-width constraint */
.site-header-container {
  min-height: var(--gx-header-height) !important;
  padding: 0 !important;
  align-items: center !important;
  gap: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ================================================================
   Toggle / Hamburger Button — 3 horizontal lines
   ================================================================ */
.site-header-container > .bb-toggle-panel,
.site-header .bb-toggle-panel,
.gx-hamburger {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-header-toggle-color) !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  margin-right: 12px !important;
  transition: var(--gx-transition) !important;
  background-color: transparent !important;
  cursor: pointer !important;
  border: none !important;
  padding: 0 !important;
}

/* Hide any icon element inside toggle — we use CSS spans now */
.gx-hamburger i {
  display: none !important;
}

/* The 3 horizontal bars */
.gx-hamburger span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background-color: var(--gx-header-toggle-color) !important;
  border-radius: 2px !important;
  transition: var(--gx-transition) !important;
}

.site-header-container > .bb-toggle-panel:hover,
.site-header .bb-toggle-panel:hover,
.gx-hamburger:hover {
  background-color: var(--gx-primary-light) !important;
  color: var(--gx-primary) !important;
}

.gx-hamburger:hover span {
  background-color: var(--gx-primary) !important;
}

/* ================================================================
   Mobile Logo (visible only on mobile via responsive CSS)
   ================================================================ */
.gx-mobile-logo {
  display: none !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.gx-mobile-logo .site-title a,
.gx-mobile-logo .custom-logo-link {
  color: var(--gx-text-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.gx-mobile-logo img.custom-logo {
  max-height: 34px !important;
  width: auto !important;
}

/* ================================================================
   Page Title (added via header-3.php)
   ================================================================ */
.gx-header-page-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.gx-header-page-title .gx-page-title-text {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gx-text-primary) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
}

/* LMS brand logo inside page title area */
.gx-header-page-title .ld-focus-custom-logo {
  display: flex !important;
  align-items: center !important;
}

.gx-header-page-title .ld-focus-custom-logo img {
  max-height: 32px !important;
  width: auto !important;
}

/* ================================================================
   Hide elements that belong in the sidebar, not the header
   ================================================================ */

/* Site logo — only visible in sidebar (buddypanel) */
.header-3 .site-header-container #site-logo,
.header-3 .site-header-container .site-branding,
.header-3 .site-header-container .bb-logo-wrap {
  display: none !important;
}

/* Primary navigation — lives in sidebar, not header for this layout */
.header-3 .site-header-container .main-navigation,
.header-3 .site-header-container #site-navigation {
  display: none !important;
}

/* ================================================================
   Header Aside (#header-aside)
   ================================================================ */
#header-aside {
  margin-left: auto !important;
  margin-right: 0 !important;  /* reset nexus.css margin-right: 30px */
  flex-shrink: 0 !important;
}

.header-aside-inner {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ================================================================
   Icon Buttons (search, dark-mode, generic)
   ================================================================ */
.header-aside-inner .header-search-link,
.header-aside-inner #bb-toggle-theme {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-header-icon) !important;
  text-decoration: none !important;
  transition: var(--gx-transition) !important;
  flex-shrink: 0 !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-aside-inner .header-search-link:hover,
.header-aside-inner #bb-toggle-theme:hover {
  background-color: #F1F5F9 !important;
  color: var(--gx-header-icon-hover) !important;
}

.header-aside-inner .header-search-link i,
.header-aside-inner #bb-toggle-theme i {
  font-size: 18px !important;
}

/* Separator bar */
.header-aside-inner .bb-separator {
  width: 1px !important;
  height: 22px !important;
  background-color: var(--gx-header-border) !important;
  margin: 0 6px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* ================================================================
   Messages Dropdown Trigger
   ================================================================ */
.header-aside-inner .messages-dropdown > a,
.header-aside-inner .header-messages-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-header-icon) !important;
  text-decoration: none !important;
  transition: var(--gx-transition) !important;
  position: relative !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-aside-inner .messages-dropdown > a:hover {
  background-color: #F1F5F9 !important;
  color: var(--gx-header-icon-hover) !important;
}

/* ================================================================
   Notification Dropdown Trigger
   ================================================================ */
.header-aside-inner .notification-dropdown > a,
.header-aside-inner .header-notifications-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-header-icon) !important;
  text-decoration: none !important;
  transition: var(--gx-transition) !important;
  position: relative !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-aside-inner .notification-dropdown > a:hover {
  background-color: #F1F5F9 !important;
  color: var(--gx-header-icon-hover) !important;
}

/* Notification badge — orange/red for urgency */
.header-aside-inner .notification-dropdown > a .notification-count,
.header-aside-inner .notification-dropdown > a .count,
.header-aside-inner sup {
  background-color: #EF4444 !important;
  color: #FFFFFF !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: var(--gx-radius-full) !important;
  position: absolute !important;
  top: 0px !important;
  right: 0px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border: 2px solid var(--gx-header-bg) !important;
}

/* Messages badge — primary brand colour */
.header-aside-inner .messages-dropdown > a .messages-count,
.header-aside-inner .messages-dropdown > a .count {
  background-color: var(--gx-primary) !important;
  color: #FFFFFF !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: var(--gx-radius-full) !important;
  position: absolute !important;
  top: 0px !important;
  right: 0px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border: 2px solid var(--gx-header-bg) !important;
}

/* Generic icon size in header dropdowns */
.header-aside-inner .notification-dropdown i,
.header-aside-inner .messages-dropdown i {
  font-size: 20px !important;
}

/* ================================================================
   Notification / Messages Popup Dropdown
   ================================================================ */
.header-aside-inner .notification-dropdown .bb-dropdown-wrap,
.header-aside-inner .messages-dropdown .bb-dropdown-wrap {
  background-color: var(--gx-card-bg) !important;
  border: 1px solid var(--gx-card-border) !important;
  border-radius: var(--gx-radius-lg) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
  min-width: 320px !important;
}

/* ================================================================
   User Profile Dropdown (right-most element)
   ================================================================ */
.header-aside-inner .user-wrap,
.header-aside-inner .user-wrap-container {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: var(--gx-radius-lg) !important;
  cursor: pointer !important;
  transition: var(--gx-transition) !important;
  position: relative !important;
  margin-left: 4px !important;
}

/* User trigger link — visible pill/card at rest */
.header-aside-inner .user-wrap > .user-link,
.header-aside-inner .user-wrap-container > .user-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 14px 5px 5px !important;
  /* border-radius: var(--gx-radius-lg) !important;
  border: 1px solid var(--gx-header-border) !important;
  background-color: #FAFBFC !important; */
  text-decoration: none !important;
  transition: var(--gx-transition) !important;
}

.header-aside-inner .user-wrap > .user-link:hover,
.header-aside-inner .user-wrap-container > .user-link:hover {
  /* background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important; */
}

/* Avatar inside user link */
.header-aside-inner .user-wrap .user-link img.avatar,
.header-aside-inner .user-wrap .user-link img {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #E2E8F0 !important;
  display: block !important;
}

/* User info block (name + role) */
.gx-header-user-info {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
  text-align: left !important;
}

.gx-header-user-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gx-text-primary) !important;
  white-space: nowrap !important;
  display: block !important;
  line-height: 1.25 !important;
}

.gx-header-user-role {
  font-size: 12px !important;
  color: var(--gx-text-muted) !important;
  white-space: nowrap !important;
  display: block !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}

/* Chevron next to user name */
.header-aside-inner .user-wrap .user-link .bb-icon-angle-down,
.header-aside-inner .user-wrap .user-link .bb-icon-angle-up,
.header-aside-inner .user-wrap .user-link .gx-user-chevron {
  /* font-size: 12px !important;
  color: var(--gx-text-muted) !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important; */
}

/* ================================================================
   User Sub-menu Dropdown
   ================================================================ */
.header-aside-inner .user-wrap .sub-menu {
  background-color: var(--gx-card-bg) !important;
  border: 1px solid var(--gx-card-border) !important;
  border-radius: var(--gx-radius-lg) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
  min-width: 230px !important;
  padding: 8px !important;
  top: calc(100% + 0px) !important;
  right: 0 !important;
  z-index: 999 !important;
}

.header-aside-inner .user-wrap .sub-menu .wrapper {
  padding: 0 !important;
}

.header-aside-inner .user-wrap .sub-menu-inner {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Dropdown header (avatar + name card) */
.header-aside-inner .user-wrap .sub-menu-inner > li:first-child a {
  /* display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: var(--gx-radius-md) !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid var(--gx-card-border) !important;
  margin-bottom: 8px !important;
  padding-bottom: 12px !important;
  text-decoration: none !important; */
}

.header-aside-inner .user-wrap .sub-menu-inner > li:first-child img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}

.header-aside-inner .user-wrap .sub-menu-inner > li:first-child .user-name {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--gx-text-primary) !important;
}

.header-aside-inner .user-wrap .sub-menu-inner > li:first-child .user-mention {
  font-size: 12px !important;
  color: var(--gx-text-muted) !important;
}

/* Dropdown nav items */
.header-aside-inner .user-wrap .sub-menu .bb-my-account-menu .menu-item > a,
.header-aside-inner .user-wrap .sub-menu li > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: var(--gx-transition) !important;
}

.header-aside-inner .user-wrap .sub-menu .bb-my-account-menu .menu-item > a:hover,
.header-aside-inner .user-wrap .sub-menu li > a:hover {
  background-color: var(--gx-primary-light) !important;
  color: var(--gx-primary) !important;
}

/* ================================================================
   Sign In / Sign Up Buttons (logged-out state)
   ================================================================ */
.header-aside-inner .bb-header-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.header-aside-inner .bb-header-buttons .signin-button {
  padding: 8px 18px !important;
  border: 1px solid var(--gx-header-border) !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: var(--gx-transition) !important;
}

.header-aside-inner .bb-header-buttons .signin-button:hover {
  border-color: var(--gx-primary) !important;
  color: var(--gx-primary) !important;
}

.header-aside-inner .bb-header-buttons .signup {
  padding: 8px 18px !important;
  background-color: var(--gx-primary) !important;
  border: 1px solid var(--gx-primary) !important;
  border-radius: var(--gx-radius-md) !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: var(--gx-transition) !important;
}

.header-aside-inner .bb-header-buttons .signup:hover {
  background-color: var(--gx-primary-hover) !important;
  border-color: var(--gx-primary-hover) !important;
}

/* ================================================================
   Cart Dropdown
   ================================================================ */
.header-aside-inner .cart-dropdown > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-header-icon) !important;
  text-decoration: none !important;
  transition: var(--gx-transition) !important;
  position: relative !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-aside-inner .cart-dropdown > a:hover {
  background-color: #F1F5F9 !important;
  color: var(--gx-header-icon-hover) !important;
}

/* ================================================================
   LMS Course Header Controls (maximize/minimize)
   ================================================================ */
.header-aside-inner .header-maximize-link,
.lms-side-panel-close .header-aside-inner .header-minimize-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-header-icon) !important;
  text-decoration: none !important;
  transition: var(--gx-transition) !important;
}

.header-aside-inner .header-minimize-link {
  display: none !important;
}

.lms-side-panel-close .header-aside-inner .header-maximize-link {
  display: none !important;
}

.header-aside-inner .header-maximize-link:hover,
.header-aside-inner .header-minimize-link:hover {
  background-color: #F1F5F9 !important;
  color: var(--gx-primary) !important;
}

/* ================================================================
   Header Search Wrap (expanded search bar)
   ================================================================ */
.header-search-wrap {
  background-color: var(--gx-header-bg) !important;
  border-top: 1px solid var(--gx-header-border) !important;
  padding: 12px 0 !important;
}


.header-search-wrap .search-form input[type="search"] {
  border: 1px solid var(--gx-header-border) !important;
  border-radius: var(--gx-radius-md) !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  color: var(--gx-text-primary) !important;
  background: #F8FAFC !important;
}

.header-search-wrap .search-form input[type="search"]:focus {
  border-color: var(--gx-primary) !important;
  background: #FFFFFF !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--gx-primary-light) !important;
}

.bb-template-v2 .site-header .user-wrap.menu-item-has-children .user-link .bb-icon-angle-down,
.bb-template-v2 .site-header .user-wrap.menu-item-has-children .user-link .bb-icon-angle-up {
    display: block !important;
}

@media screen and (min-width: 800px) {
    .bb-buddypanel.sticky-header:not(.bb-sfwd-aside) .site-header {
        width: 100%;
    }
}

/* ================================================================
   Onboarding Header Brand (pending users only)
   Shows [Logo] in the header.
   ================================================================ */
.gx-onboarding-header-brand {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 0 !important;
}

.gx-onboarding-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.gx-onboarding-logo-img {
  max-height: 32px !important;
  width: auto !important;
  display: block !important;
}

@media (max-width: 480px) {
  .gx-onboarding-logo-img {
    max-height: 26px !important;
  }
}