/* ==========================================================================
   BuddyBoss Child Theme – Header/Menu (Dark Purple Modern)
   Approach: override BuddyBoss CSS variables in the header scope + minimal,
   targeted selectors for menu/dropdowns (avoids broad !important overrides).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Palette (local custom properties)
   -------------------------------------------------------------------------- */

   :root {
    --premium-header-bg: #0d0612;
    --premium-surface: #1a0b2e;
    --premium-border: rgba(236, 72, 153, 0.22);
    --premium-pink: #ec4899;
    --premium-purple: #a855f7;
    --premium-text: #ffffff;
    --premium-text-muted: rgba(255, 255, 255, 0.78);
    --premium-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    --premium-gradient: linear-gradient(135deg, var(--premium-pink), var(--premium-purple));
  }
  
  /* --------------------------------------------------------------------------
     2) Header variables (scoped to header only)
     BuddyBoss generates theme variables globally; we override them *inside*
     the header so the rest of the site keeps using Theme Options as normal.
     
     APPLIED GLOBALLY (Desktop & Mobile) so the top header bar is always dark.
     -------------------------------------------------------------------------- */
  
  body.bb-ha-theme:not(.wp-admin) .site-header {
    /* BuddyBoss header/menu variables used throughout `theme.css`/`template-v2.css` */
    --bb-header-background: rgba(13, 6, 18, 0.95);
    --bb-header-alternate-background: rgba(168, 85, 247, 0.12);
    --bb-header-links: var(--premium-text);
    --bb-header-links-hover: var(--premium-pink);
  
    /* Dropdown surfaces (used by menu wrappers inside the header) */
    --bb-content-background-color: var(--premium-surface);
    --bb-content-alternate-background-color: rgba(236, 72, 153, 0.14);
    --bb-content-border-color: var(--premium-border);
    --bb-body-text-color: var(--premium-text-muted);
  
    background-color: var(--bb-header-background);
    border-bottom: 1px solid var(--premium-border);
  }
  
  /* --------------------------------------------------------------------------
     2b) Mobile Panel Overrides (The Slide-out Menu)
     Set to Dark Theme to match Desktop, with readable white text.
     -------------------------------------------------------------------------- */
  .bb-mobile-panel-wrapper {
      /* 1. Backgrounds & Borders */
      --bb-header-background: #0d0612;
      --bb-content-background-color: #1a0b2e;
      --bb-content-alternate-background-color: rgba(236, 72, 153, 0.14);
      --bb-content-border-color: rgba(236, 72, 153, 0.22);
      
      /* 2. Text Colors (Crucial for readability) */
      --bb-header-links: #ffffff;
      --bb-body-text-color: rgba(255, 255, 255, 0.78);
      --bb-headings-color: #ffffff;
      --bb-alternate-text-color: rgba(255, 255, 255, 0.78);
      
      /* 3. Interaction Colors */
      --bb-header-links-hover: #ec4899;
      --bb-primary-color: #ec4899;

      /* 4. Template-v2 side-panel variables (prevents white submenu blocks) */
      --bb-sidenav-menu-background-color-regular: var(--bb-content-background-color);
      --bb-sidenav-text-regular: var(--bb-header-links);
      --bb-sidenav-menu-background-color-hover: var(--bb-content-alternate-background-color);
      --bb-sidenav-menu-background-color-active: rgba(168, 85, 247, 0.18);
      --bb-sidenav-text-hover: var(--bb-header-links);
      --bb-sidenav-text-active: var(--bb-header-links);
      --bb-sidenav-alt-background: var(--bb-content-alternate-background-color);
      --bb-sidenav-links: var(--bb-header-links-hover);
      --bb-sidenav-count-background-color-active: rgba(255, 255, 255, 0.14);
      --bb-sidenav-count-text-color-active: var(--bb-header-links);
  }
  
  /* Force the panel background to Dark */
  .bb-mobile-panel-inner {
      background-color: var(--bb-header-background) !important;
  }
  
  /* Active State: Subtle purple tint instead of pink/white */
  .bb-mobile-panel-inner .main-navigation .menu-item.current-menu-item > a,
  .bb-mobile-panel-inner .main-navigation .menu-item.current-menu-ancestor > a {
      background-color: rgba(168, 85, 247, 0.12) !important;
      color: #ffffff !important;
  }
  
  /* SHOW MENU ICONS ON MOBILE (override any desktop rules that might leak) */
  .bb-mobile-panel-inner .main-navigation .menu-item > a > i.bb-icon-l,
  .bb-mobile-panel-inner .main-navigation .menu-item > a > i.bb-icon-r,
  .bb-mobile-panel-inner .main-navigation .menu-item > a > i.fa,
  .bb-mobile-panel-inner .main-navigation .menu-item > a > i.fas,
  .bb-mobile-panel-inner .main-navigation .menu-item > a > i.far {
      display: inline-block !important;
  }
  
  /* --------------------------------------------------------------------------
     3) Desktop-Only Rules ( > 800px )
     -------------------------------------------------------------------------- */
  
  @media screen and (min-width: 800px) {
  
      /* HIDE MENU ICONS ON DESKTOP */
      /* This allows you to select icons in WP Admin for mobile, but hides them here */
      .site-header .main-navigation .menu-item > a > i.bb-icon-l,
      .site-header .main-navigation .menu-item > a > i.bb-icon-r,
      .site-header .main-navigation .menu-item > a > i.fa,
      .site-header .main-navigation .menu-item > a > i.fas,
      .site-header .main-navigation .menu-item > a > i.far {
          display: none !important;
      }
  
  /* --------------------------------------------------------------------------
     2b) Header typography + harmony states (menus + dropdowns)
     -------------------------------------------------------------------------- */
  
  body.bb-ha-theme:not(.wp-admin) .site-header,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown,
  body.bb-ha-theme:not(.wp-admin) .site-header .sub-menu,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu,
  body.bb-ha-theme:not(.wp-admin) .site-header .bb-sub-menu,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-list {
    font-family: 'Sora', sans-serif;
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .main-navigation .primary-menu > li > a,
  body.bb-ha-theme:not(.wp-admin) .site-header .user-link,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown a,
  body.bb-ha-theme:not(.wp-admin) .site-header .sub-menu a,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu a,
  body.bb-ha-theme:not(.wp-admin) .site-header .bb-sub-menu a {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--premium-text-muted);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-header .title,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-header h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-content .notification-users a {
    font-size: 14px;
    font-weight: 500;
    color: var(--premium-text);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-content .posted,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-content .typing-indicator {
    font-size: 13px;
    color: var(--premium-text-muted);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .sub-menu a:hover,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu a:hover,
  body.bb-ha-theme:not(.wp-admin) .site-header .bb-sub-menu a:hover,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown a:hover,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-item:hover {
    color: var(--premium-text);
    background-color: var(--bb-content-alternate-background-color);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .sub-menu .current-menu-ancestor > a,
  body.bb-ha-theme:not(.wp-admin) .site-header .sub-menu .current-menu-item > a,
  body.bb-ha-theme:not(.wp-admin) .site-header .sub-menu .current-menu-parent > a,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu .current-menu-ancestor > a,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu .current-menu-item > a,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu .current-menu-parent > a {
    color: var(--premium-text);
    background-color: var(--bb-header-alternate-background);
  }
  
  /* Progressive enhancement: blur only when supported */
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.bb-ha-theme:not(.wp-admin) .site-header {
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
  }
  
  /* Accent line */
  body.bb-ha-theme:not(.wp-admin) .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--premium-gradient);
    opacity: 0.75;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.55);
    pointer-events: none;
  }
  
  /* Ensure the header’s icon/text colors follow the variables (don’t blanket-span override) */
  body.bb-ha-theme:not(.wp-admin) .site-header a,
  body.bb-ha-theme:not(.wp-admin) .site-header i {
    color: var(--bb-header-links);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header a:hover,
  body.bb-ha-theme:not(.wp-admin) .site-header a:hover i {
    color: var(--bb-header-links-hover);
  }
  
  /* Keyboard focus visibility */
  body.bb-ha-theme:not(.wp-admin) .site-header a:focus-visible {
    outline: 2px solid rgba(236, 72, 153, 0.65);
    outline-offset: 3px;
    border-radius: 6px;
  }
  
  /* --------------------------------------------------------------------------
     3) Primary menu (top level)
     Template v2 already uses `--bb-header-links` / `--bb-header-alternate-background`.
     This adds a subtle glow on hover without overriding layout styles.
     -------------------------------------------------------------------------- */
  
  body.bb-ha-theme:not(.wp-admin) .site-header .main-navigation .primary-menu > li:hover > a span,
  body.bb-ha-theme:not(.wp-admin) .site-header .main-navigation .primary-menu > li > a:hover span {
    text-shadow: 0 0 12px rgba(236, 72, 153, 0.45);
  }
  
  /* --------------------------------------------------------------------------
     4) Dropdowns inside the header (menus + profile + notifications/cart)
     BuddyBoss uses multiple wrappers:
     - `.sub-menu` (profile dropdown container)
     - `.wrapper.ab-submenu` and `.ab-submenu` (nav walker output)
     - `.bb-sub-menu` (the inner UL inside `.ab-submenu`)
     -------------------------------------------------------------------------- */
  
  body.bb-ha-theme:not(.wp-admin) .site-header .sub-menu,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown,
  body.bb-ha-theme:not(.wp-admin) .site-header .wrapper.ab-submenu,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu,
  body.bb-ha-theme:not(.wp-admin) .site-header .bb_more_dropdown,
  body.bb-ha-theme:not(.wp-admin) .site-header .bs-dropdown-wrap-inner {
    background-color: var(--bb-content-background-color);
    border: 1px solid var(--bb-content-border-color);
    box-shadow: var(--premium-shadow);
  }
  
  /* Fix for Mobile Dropdowns (Messages/Notifications) - Glassmorphic Purple Theme */
  @media screen and (max-width: 800px) {
  
      /* 1. The Main Dropdown Container */
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown {
          background-color: rgba(26, 11, 46, 0.95) !important; /* Deep Purple Glass */
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(236, 72, 153, 0.22) !important; /* Premium Border */
          box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
          border-radius: 12px !important;
          overflow: hidden; /* Keeps corners rounded */
      }
  
      /* 2. The Header (e.g. "Messages") */
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-header {
          background-color: rgba(255, 255, 255, 0.03) !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
          padding: 15px 20px !important;
      }
  
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-header h2.title,
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-header .title {
          font-family: 'Sora', sans-serif !important;
          font-size: 16px !important;
          font-weight: 600 !important;
          color: #ffffff !important; /* Force White Text */
          text-transform: capitalize;
          letter-spacing: 0.5px;
          margin: 0 !important;
      }
  
      /* 3. The List Items (Individual Messages/Notifications) */
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-list li {
          background-color: transparent !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
          padding: 15px 20px !important;
          transition: background-color 0.2s ease;
      }
  
      /* Hover State for Items */
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-list li:hover {
          background-color: rgba(236, 72, 153, 0.1) !important; /* Subtle Pink Hover */
      }
  
      /* Unread Item State */
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-list li.unread {
          background-color: rgba(168, 85, 247, 0.15) !important; /* Subtle Purple for Unread */
      }
  
      /* 4. User Names */
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-content .notification-users a {
          font-family: 'Sora', sans-serif !important;
          font-size: 14px !important;
          font-weight: 600 !important;
          color: #ffffff !important; /* Force White */
      }
  
      /* 5. Message Snippet / Notification Text */
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-content .posted,
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-content .typing-indicator {
          font-family: 'Sora', sans-serif !important;
          font-size: 13px !important;
          font-weight: 400 !important;
          color: rgba(255, 255, 255, 0.7) !important; /* Muted White */
          line-height: 1.4 !important;
          margin-top: 4px !important;
          display: block;
      }
  
      /* 6. Date / Time Stamp */
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-list .bb-message-date,
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-list .time-since {
          font-family: 'Instrument Serif', serif !important; /* Stylish Serif for dates */
          font-size: 12px !important;
          font-style: italic;
          color: rgba(236, 72, 153, 0.8) !important; /* Premium Pink */
      }
  
      /* 7. Footer ("View Inbox") */
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-footer {
          background-color: rgba(26, 11, 46, 0.98) !important;
          border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
      }
  
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-footer a {
          font-family: 'Sora', sans-serif !important;
          font-size: 13px !important;
          font-weight: 600 !important;
          color: #ec4899 !important; /* Pink Link */
          text-transform: uppercase;
          letter-spacing: 1px;
      }
      
      body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-footer a:hover {
          color: #ffffff !important;
      }
  }
  
  /* Inner UL inside `.ab-submenu` should not add a second border/shadow */
  body.bb-ha-theme:not(.wp-admin) .site-header .bb-sub-menu {
    background-color: var(--bb-content-background-color);
  }
  
  /* Dropdown arrow/triangle for non-template-v2 dropdowns */
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu:before {
    border-color: var(--bb-content-background-color) var(--bb-content-background-color) transparent transparent;
  }
  
  /* Links inside header dropdowns */
  body.bb-ha-theme:not(.wp-admin) .site-header .sub-menu a,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown a,
  body.bb-ha-theme:not(.wp-admin) .site-header .bb-sub-menu a,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu a,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-item {
    color: var(--bb-body-text-color);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .sub-menu li:hover > a,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown a:hover,
  body.bb-ha-theme:not(.wp-admin) .site-header .bb-sub-menu li:hover > a,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-submenu a:hover,
  body.bb-ha-theme:not(.wp-admin) .site-header .ab-item:hover {
    background-color: var(--bb-content-alternate-background-color);
    color: var(--bb-header-links-hover);
  }
  
  /* Notification count chips: keep readable contrast */
  body.bb-ha-theme:not(.wp-admin) .site-header .count {
    color: var(--premium-text);
  }
  
  /* Make BuddyBoss separators fit the dark header */
  body.bb-ha-theme:not(.wp-admin) .site-header .bb-separator {
    background: rgba(255, 255, 255, 0.22);
  }
  
  /* --------------------------------------------------------------------------
     5a) Messages dropdown scrollbar (match dark purple theme)
     -------------------------------------------------------------------------- */
  
  body.bb-ha-theme:not(.wp-admin) #header-messages-dropdown-elem .notification-list {
    scrollbar-color: rgba(168, 85, 247, 0.32) var(--premium-surface);
  }
  
  body.bb-ha-theme:not(.wp-admin) #header-messages-dropdown-elem .notification-list::-webkit-scrollbar {
    width: 6px;
  }
  
  body.bb-ha-theme:not(.wp-admin) #header-messages-dropdown-elem .notification-list::-webkit-scrollbar-track {
    background: var(--premium-surface);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  body.bb-ha-theme:not(.wp-admin) #header-messages-dropdown-elem .notification-list::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.3);
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.14);
  }
  
  body.bb-ha-theme:not(.wp-admin) #header-messages-dropdown-elem .notification-list::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 85, 247, 0.42);
  }
  
  /* --------------------------------------------------------------------------
     5b) Messages dropdown date (right aligned)
     -------------------------------------------------------------------------- */
  
  body.bb-ha-theme:not(.wp-admin) #header-messages-dropdown-elem .notification-list li {
    position: relative;
    padding-right: 64px;
  }
  
  body.bb-ha-theme:not(.wp-admin) #header-messages-dropdown-elem .notification-list .bb-message-date {
    position: absolute;
    top: 17px;
    right: 14px;
    font-size: 12px;
    line-height: 1;
    color: var(--premium-text-muted);
    letter-spacing: 0.02em;
    font-weight: 500;
  }
  
  body.bb-ha-theme:not(.wp-admin) #header-messages-dropdown-elem .notification-list li:hover .bb-message-date {
    color: var(--premium-text-muted);
  }
  
  /* --------------------------------------------------------------------------
     5) Main nav submenu (BuddyBoss walker output)
     BuddyBoss core CSS targets these with very high specificity and hardcoded
     `background: #fff;`, so we must match that specificity to apply dark mode.
     -------------------------------------------------------------------------- */
  
  body.bb-ha-theme:not(.wp-admin) .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu,
  body.bb-ha-theme:not(.wp-admin) .site-header #primary-navbar #navbar-collapse .sub-menu .wrapper .sub-menu-inner .menu-item .ab-submenu {
    background: var(--bb-content-background-color);
    border: 1px solid var(--bb-content-border-color);
    box-shadow: var(--premium-shadow);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu .bb-sub-menu,
  body.bb-ha-theme:not(.wp-admin) .site-header #primary-navbar #navbar-collapse .sub-menu .wrapper .sub-menu-inner .menu-item .ab-submenu .bb-sub-menu {
    background: var(--bb-content-background-color);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu:before,
  body.bb-ha-theme:not(.wp-admin) .site-header #primary-navbar #navbar-collapse .sub-menu .wrapper .sub-menu-inner .menu-item .ab-submenu:before {
    border-color: var(--bb-content-background-color) var(--bb-content-background-color) transparent transparent;
    box-shadow: 2px -3px 3px 0 rgba(0, 0, 0, 0.18);
  }
  
  /* Beat BuddyBoss core `a:hover { background: #f5f5f5; }` in header submenus */
  body.bb-ha-theme:not(.wp-admin) .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu .bb-sub-menu .menu-item a:hover,
  body.bb-ha-theme:not(.wp-admin) .site-header #primary-navbar #navbar-collapse .sub-menu .wrapper .sub-menu-inner .menu-item .ab-submenu .bb-sub-menu .menu-item a:hover {
    background: var(--bb-content-alternate-background-color);
    color: var(--bb-header-links-hover);
  }
  
  /* Notifications/Messages dropdown header title (inherits dark heading color otherwise) */
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-header .title,
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-header h2 {
    color: var(--bb-header-links);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-header a {
    color: var(--bb-body-text-color);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .notification-dropdown .notification-header a:hover {
    color: var(--bb-header-links-hover);
  }
  
  /* User dropdown: avoid hover flicker by deriving hover color from `li:hover > a` only */
  body.bb-ha-theme:not(.wp-admin) .site-header .user-wrap.menu-item-has-children ul#header-my-account-menu li:hover > a {
    color: var(--bb-body-text-color);
    background: var(--bb-content-alternate-background-color);
  }
  
  body.bb-ha-theme:not(.wp-admin) .site-header .user-wrap.menu-item-has-children ul#header-my-account-menu a:hover {
    color: inherit;
    background: inherit;
  }
  
  /* Beat BuddyBoss core: `#header-my-account-menu .bb-sub-menu a:hover { background-color: #fff; }` */
  body.bb-ha-theme:not(.wp-admin) .site-header .user-wrap.menu-item-has-children #header-my-account-menu .bb-sub-menu a:hover {
    background-color: inherit;
  }
  
  } /* End of @media (min-width: 800px) */
  
  /* (Section 6 removed – profile stats positioning is handled in the plugin) */
  
  /* --------------------------------------------------------------------------
     7) Custom Profile Header Badges (Filters the existing meta)
     -------------------------------------------------------------------------- */
  
  /* Hide the default separator bullet between meta items (BuddyBoss cover header uses `.single-headers .item-meta`) */
  #buddypress .single-headers .item-meta .separator {
    display: none !important;
  }
  
  /* Ensure the meta container handles badges */
  #buddypress .single-headers .item-meta {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
  }
  
  /* ---- Profile stats: anchor to the responsive cover image ----
     The Profile View Counter plugin outputs via `bp_before_member_header_meta`.
     We move that hook into `#header-cover-image` in the child template override,
     and force positioning relative to the cover element so it tracks responsively.
  */
  #buddypress #header-cover-image {
    position: relative;
  }
  
  #buddypress #header-cover-image .profile-stats-container {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 999;
  }
  
  /* Hide the original (hook-rendered) stats if they appear inside the header content area.
     We render stats in the cover via `[user_stats]` in the cover template. */
  #buddypress #cover-image-container #item-header-content .profile-stats-container {
    display: none !important;
  }
  
  @media (max-width: 768px) {
    /* Mobile: modern "status banner" on right side of cover.
       Keep it deliberately sized (not tiny), and avoid the avatar overlap. */
    #buddypress #header-cover-image .profile-stats-container {
      left: auto !important;
      right: 12px !important;
      top: 58% !important; /* slightly below mid-cover */
      bottom: auto !important;
      transform: translateY(-50%);
      width: auto !important;
      max-width: min(380px, calc(100vw - 24px));
    }
  
    /* Banner sizing + spacing (intentional, not "thrown there") */
    #buddypress #header-cover-image .profile-stats-wrapper {
      padding: 12px 16px !important;
      gap: 18px !important;
      max-width: none !important;
      justify-content: center !important;
      border-radius: 10px !important;
    }
  
    /* Typography: prevent “too small” on mobile */
    #buddypress #header-cover-image .stat-number {
      font-size: 18px !important;
      line-height: 1.15 !important;
    }
  
    #buddypress #header-cover-image .stat-label {
      font-size: 9px !important;
      letter-spacing: 0.08em !important;
    }
  }
  
  @media (max-width: 420px) {
    #buddypress #header-cover-image .profile-stats-wrapper {
      padding: 11px 14px !important;
      gap: 14px !important;
    }
  }
  
  /* Base Badge Style - Luxury Chip (2026) */
  .bb-badge {
    /* Component tokens */
    /* Match `demo.html` chip tokens */
    --bb-badge-surface: rgba(15, 23, 42, 0.04);
    --bb-badge-border: rgba(15, 23, 42, 0.12);
    --bb-badge-text: rgba(15, 23, 42, 0.92);
    --bb-badge-accent: rgba(168, 85, 247, 0.95); /* overridden per variant */
  
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0 14px 0 14px;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    
    /* Typography */
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 650;
    text-transform: none;
    letter-spacing: 0.012em;
    line-height: 1;
    
    /* Luxury surface (crisp, not glowy) */
    background: var(--bb-badge-surface);
    border: 1px solid var(--bb-badge-border);
    /* Match `demo.html`: top highlight + subtle lower edge */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(2, 6, 23, 0.04);
    
    cursor: default;
    color: var(--bb-badge-text);
  }
  
  /* Beat BuddyBoss meta color rules (scope: profile header meta only) */
  .header-meta-wrap .item-meta .bb-badge {
    /* Force chip “ink” text (BuddyBoss meta styles shouldn’t override) */
    color: var(--bb-badge-text) !important;
  }
  
  /* BuddyBoss sets grey text via `#buddypress .single-headers .item-meta span { ... }`.
     Override at the same (or higher) specificity so badge text is never grey. */
  #buddypress .single-headers .item-meta span.bb-badge {
    color: var(--bb-badge-text) !important;
  }
  
  /* Icons in badges */
  .bb-badge i {
    font-size: 12px;
    opacity: 0.75;
    transform: translateY(-0.5px); /* optical alignment */
  }
  
  /* Accent rail (shared): “luxury hardware” detail */
  .bb-badge::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--bb-badge-accent);
    opacity: 0.95;
  }
  
  /* --- Joined Date Badge (Brand Accent) --- */
  .bb-badge-joined {
    --bb-badge-accent: rgba(168, 85, 247, 0.95);
    --bb-badge-surface: rgba(168, 85, 247, 0.07);
    --bb-badge-border: rgba(168, 85, 247, 0.22);
    --bb-badge-text: rgba(88, 28, 135, 0.95);
  }
  
  .bb-badge-joined i {
    color: rgba(168, 85, 247, 0.95);
    opacity: 0.9;
  }
  
  /* --- Online Status Badge (Semantic, Harmonized) --- */
  .bb-badge-status.online {
    --bb-badge-accent: rgba(22, 163, 74, 0.9); /* calmer green */
    --bb-badge-surface: rgba(22, 163, 74, 0.06);
    --bb-badge-border: rgba(22, 163, 74, 0.20);
    --bb-badge-text: rgba(20, 83, 45, 0.95);
  }
  
  /* --- Offline Status Badge (Neutral) --- */
  .bb-badge-status.offline {
    /* “Last seen” should read as informative, not dull grey */
    --bb-badge-accent: rgba(99, 102, 241, 0.92); /* indigo */
    --bb-badge-surface: rgba(99, 102, 241, 0.06);
    --bb-badge-border: rgba(99, 102, 241, 0.22);
    --bb-badge-text: rgba(49, 46, 129, 0.92); /* deep indigo ink */
  }
  
  /* --- Status Dot (Luxury: crisp, minimal) --- */
  .status-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--bb-badge-accent);
    position: relative;
    flex: 0 0 auto;
  }
  
  .bb-badge-status.online .status-dot {
    background-color: var(--bb-badge-accent);
  }
  
  .bb-badge-status.online .status-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: inherit;
    transform: translate(-50%, -50%);
    opacity: 0.18;
    animation: pulse-ring 2.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
  
  @keyframes pulse-ring {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.18; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .bb-badge-status.online .status-dot::after {
      animation: none;
    }
  }
  
  /* --------------------------------------------------------------------------
     Mobile side panel: prevent nested scroll containers trapping menu
     (fixes the “tiny scrollbar” + clipped menu in BuddyBoss mobile panel)
     -------------------------------------------------------------------------- */
  @media (max-width: 800px) {
    body.bb-ha-theme:not(.wp-admin) .side-panel-inner {
      height: auto !important;
      overflow: visible !important;
    }
  
    body.bb-ha-theme:not(.wp-admin) .touch-only .side-panel-menu {
      height: auto !important;
      overflow: visible !important;
    }
  
    body.bb-ha-theme:not(.wp-admin) .bb-mobile-panel-wrapper {
      overflow-y: visible !important;
    }
  }

/* ==========================================================================
   GF User Registration – Activation page
   URL shape: /?gfur_activation=...
   Targeted styling ONLY for the activation success screen.
   ========================================================================== */

body.bb-gfur-activation {
  /* Dark, premium backdrop */
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(236, 72, 153, 0.14), transparent 60%),
    radial-gradient(1000px 640px at 82% 12%, rgba(168, 85, 247, 0.18), transparent 62%),
    radial-gradient(900px 520px at 70% 86%, rgba(99, 102, 241, 0.12), transparent 58%),
    #07040c;
}

/* Hide the regular footer – keeps the page focused and \"modal\" */
body.bb-gfur-activation .footer-widget-area,
body.bb-gfur-activation footer,
body.bb-gfur-activation #colophon {
  display: none !important;
}

/* Vertically center the card, allow for sticky header height */
body.bb-gfur-activation #content.site-content {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px clamp(16px, 4vw, 32px) clamp(32px, 5vw, 64px);
}

/* The card container itself */
body.bb-gfur-activation #content.widecolumn {
  max-width: 640px;
  width: min(640px, 100%);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 48px);
  border-radius: 20px;
  background: rgba(26, 11, 46, 0.96);
  border: 1px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 0.96);
  text-align: center;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.bb-gfur-activation #content.widecolumn {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgba(26, 11, 46, 0.88);
  }
}

/* Heading + success icon */
body.bb-gfur-activation #content.widecolumn > h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.98);
  font-weight: 700;
}

body.bb-gfur-activation #content.widecolumn > h2::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.15));
  border: 2px solid rgba(34, 197, 94, 0.55);
  font-size: 32px;
  font-weight: 700;
  color: rgba(34, 197, 94, 0.96);
  line-height: 1;
  box-shadow: 0 0 22px rgba(34, 197, 94, 0.35);
}

/* When the JS has built the custom block: .activation-info */
body.bb-gfur-activation #content.widecolumn .activation-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.bb-gfur-activation #content.widecolumn .activation-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-radius: 12px;
}

body.bb-gfur-activation #content.widecolumn .activation-detail-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Sora', sans-serif;
}

body.bb-gfur-activation #content.widecolumn .activation-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100px;
  text-align: right;
  flex-shrink: 0;
  padding-right: 8px;
  box-sizing: border-box;
}

body.bb-gfur-activation #content.widecolumn .activation-value {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.97);
  word-break: break-word;
}

/* Instructions text (used by JS and as fallback when we only have .view) */
body.bb-gfur-activation #content.widecolumn .activation-instructions,
body.bb-gfur-activation #content.widecolumn p.view {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Actions area */
body.bb-gfur-activation #content.widecolumn .activation-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  align-items: center;
}

/* Primary login button */
body.bb-gfur-activation #content.widecolumn .activation-btn-primary {
  display: block;
  width: 100%;
  max-width: 280px;
  padding: 16px 32px;
  border-radius: 12px;
  background: var(--premium-gradient);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  font-family: 'Sora', sans-serif;
  text-align: center;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.bb-gfur-activation #content.widecolumn .activation-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.4);
}

body.bb-gfur-activation #content.widecolumn .activation-btn-primary:focus-visible {
  outline: 3px solid rgba(236, 72, 153, 0.55);
  outline-offset: 3px;
}

/* Secondary link (homepage / reset) */
body.bb-gfur-activation #content.widecolumn .activation-btn-secondary {
  display: block;
  padding: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  font-size: 14px;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

body.bb-gfur-activation #content.widecolumn .activation-btn-secondary:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

/* Mobile tweaks */
@media (max-width: 520px) {
  body.bb-gfur-activation #content.site-content {
    min-height: 100vh;
    padding: 60px 12px 24px;
  }
  body.bb-gfur-activation #content.widecolumn {
    border-radius: 18px;
    padding: clamp(24px, 5vw, 32px);
  }
  body.bb-gfur-activation #content.widecolumn > h2 {
    font-size: 24px;
  }
  body.bb-gfur-activation #content.widecolumn .activation-details {
    padding: 16px;
    gap: 12px;
  }
  body.bb-gfur-activation #content.widecolumn .activation-label {
    width: 92px;
    font-size: 13px;
  }
  body.bb-gfur-activation #content.widecolumn .activation-value {
    font-size: 15px;
  }
  body.bb-gfur-activation #content.widecolumn .activation-instructions,
  body.bb-gfur-activation #content.widecolumn p.view {
    font-size: 14px;
  }
}

/* ==========================================================================
   Profile view – show empty field labels
   Applies to the profile tab tables rendered by our override.
   Only adds placeholder for empty values; spacing handled by parent theme.
   ========================================================================== */


/* Show a subtle placeholder for empty values so rows don’t collapse visually */
#buddypress table.profile-fields td.data:empty::after {
  content: "—";
  color: #9ca3af;
}

/* ==========================================================================
   Permanent Exposure Sales Page – Modern Glassmorphic Hot Pink Theme (2025-2026)
   ========================================================================== */

body.bb-permanent-exposure-page {
  /* Animated gradient background with hot pink accents */
  background:
    radial-gradient(1200px 600px at 20% 15%, rgba(236, 72, 153, 0.25), transparent 55%),
    radial-gradient(1000px 500px at 80% 20%, rgba(219, 39, 119, 0.18), transparent 60%),
    radial-gradient(900px 450px at 50% 85%, rgba(168, 85, 247, 0.15), transparent 58%),
    linear-gradient(180deg, #0a0410 0%, #1a0b1f 35%, #2d0f2e 100%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}

/* Animated background particles effect */
body.bb-permanent-exposure-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(236, 72, 153, 0.3), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(219, 39, 119, 0.25), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(168, 85, 247, 0.2), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(236, 72, 153, 0.2), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(219, 39, 119, 0.15), transparent);
  background-size: 200% 200%;
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* Main content area */
body.bb-permanent-exposure-page #content.site-content {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px);
  max-width: 1200px;
  margin: 0 auto;
}

/* Glassmorphic hero section */
body.bb-permanent-exposure-page .entry-content,
body.bb-permanent-exposure-page .site-main article .entry-content {
  background: rgba(26, 11, 46, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 24px;
  padding: clamp(40px, 5vw, 60px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(236, 72, 153, 0.1) inset,
    0 0 60px rgba(236, 72, 153, 0.15);
  position: relative;
  overflow: hidden;
}

/* Subtle inner glow */
body.bb-permanent-exposure-page .entry-content::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
  pointer-events: none;
  animation: pulse-glow 8s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* Typography hierarchy */
body.bb-permanent-exposure-page .entry-content p {
  font-family: 'Sora', sans-serif;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 24px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* First paragraph - larger, more prominent */
body.bb-permanent-exposure-page .entry-content p:first-of-type {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(236, 72, 153, 0.2);
  position: relative;
}

body.bb-permanent-exposure-page .entry-content p:first-of-type::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, var(--premium-pink), var(--premium-purple));
  border-radius: 2px;
}

/* Highlight key phrases */
body.bb-permanent-exposure-page .entry-content p strong,
body.bb-permanent-exposure-page .entry-content p b {
  color: var(--premium-pink);
  font-weight: 600;
  text-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
}

/* Pricing section - make it stand out */
body.bb-permanent-exposure-page .entry-content p:nth-of-type(3) {
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 32px 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.2);
  position: relative;
}

/* Legal assurance badge */
body.bb-permanent-exposure-page .entry-content p:nth-of-type(4) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 24px 0;
}

body.bb-permanent-exposure-page .entry-content p:nth-of-type(4)::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(168, 85, 247, 0.3);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  color: var(--premium-purple);
  flex-shrink: 0;
}

/* CTA Link - Modern button style */
body.bb-permanent-exposure-page .entry-content a {
  display: inline-block;
  margin: 32px auto;
  padding: 18px 40px;
  background: linear-gradient(135deg, var(--premium-pink), var(--premium-purple));
  color: #ffffff !important;
  text-decoration: none;
  font-family: 'Sora', sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(236, 72, 153, 0.4),
    0 0 0 0 rgba(236, 72, 153, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  border: none;
}

body.bb-permanent-exposure-page .entry-content a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

body.bb-permanent-exposure-page .entry-content a:hover::before {
  left: 100%;
}

body.bb-permanent-exposure-page .entry-content a:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 32px rgba(236, 72, 153, 0.5),
    0 0 0 4px rgba(236, 72, 153, 0.2);
}

body.bb-permanent-exposure-page .entry-content a:active {
  transform: translateY(-1px);
}

/* Contact info styling */
body.bb-permanent-exposure-page .entry-content p:last-of-type {
  text-align: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(236, 72, 153, 0.2);
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255, 255, 255, 0.85);
}

body.bb-permanent-exposure-page .entry-content p:last-of-type a {
  display: inline;
  padding: 0;
  background: none;
  color: var(--premium-pink) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(236, 72, 153, 0.5);
  font-size: inherit;
  font-weight: 600;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
  transition: all 0.2s ease;
}

body.bb-permanent-exposure-page .entry-content p:last-of-type a:hover {
  color: #ffffff !important;
  text-decoration-color: var(--premium-pink);
  transform: none;
  box-shadow: none;
}

/* Hide default page title if needed, or style it */
body.bb-permanent-exposure-page .entry-header,
body.bb-permanent-exposure-page .entry-title {
  text-align: center;
  margin-bottom: 40px;
}

body.bb-permanent-exposure-page .entry-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  background: linear-gradient(135deg, var(--premium-pink), var(--premium-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(236, 72, 153, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body.bb-permanent-exposure-page .entry-content,
  body.bb-permanent-exposure-page .site-main article .entry-content {
    padding: clamp(32px, 5vw, 40px);
    border-radius: 20px;
  }

  body.bb-permanent-exposure-page .entry-content a {
    display: block;
    width: 100%;
    padding: 16px 24px;
  }
}

/* Ensure content is above background effects */
body.bb-permanent-exposure-page .entry-content > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Modern Editorial Sales Page - Complete Redesign
   Based on 2025-2026 conversion optimization principles
   ========================================================================== */

/* Main attention-grabbing header */
body.bb-permanent-exposure-page .bb-main-header {
  font-family: 'Sora', sans-serif;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0 0 60px 0;
  background: linear-gradient(135deg, var(--premium-pink) 0%, #ff006e 50%, var(--premium-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 80px rgba(236, 72, 153, 0.4);
  position: relative;
  padding-bottom: 30px;
}

body.bb-permanent-exposure-page .bb-main-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, var(--premium-pink), var(--premium-purple));
  border-radius: 2px;
}

/* Opening section */
body.bb-permanent-exposure-page .bb-opening-section {
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

body.bb-permanent-exposure-page .bb-opening-text {
  font-family: 'Sora', sans-serif;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  margin: 0;
  text-align: center;
}

body.bb-permanent-exposure-page .bb-opening-text strong {
  color: var(--premium-pink);
  font-weight: 700;
  font-size: 1.1em;
}

/* Transition section */
body.bb-permanent-exposure-page .bb-transition-section {
  margin: 60px 0 40px;
  text-align: center;
}

body.bb-permanent-exposure-page .bb-transition-heading {
  font-family: 'Sora', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
}

/* Offer section */
body.bb-permanent-exposure-page .bb-offer-section {
  margin-bottom: 50px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

body.bb-permanent-exposure-page .bb-offer-intro {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  margin: 0;
  text-align: center;
}

body.bb-permanent-exposure-page .bb-offer-intro strong {
  color: var(--premium-pink);
  font-weight: 700;
  font-size: 1.15em;
}


/* Closing section */
body.bb-permanent-exposure-page .bb-closing-section {
  margin: 60px 0 40px;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

body.bb-permanent-exposure-page .bb-closing-text {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  font-style: italic;
  margin: 0;
}

body.bb-permanent-exposure-page .bb-closing-text strong {
  color: var(--premium-pink);
  font-weight: 700;
  font-style: normal;
}

/* Fine print section */
body.bb-permanent-exposure-page .bb-fineprint-section {
  margin: 50px 0 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(236, 72, 153, 0.2);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

body.bb-permanent-exposure-page .bb-fineprint-text {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  margin: 0;
  text-align: center;
  font-style: italic;
}

/* CTA Wrapper */
body.bb-permanent-exposure-page .bb-cta-wrapper {
  text-align: center;
  margin: 48px 0 32px;
}

body.bb-permanent-exposure-page .bb-cta-button {
  display: inline-block;
  padding: 20px 48px;
  background: linear-gradient(135deg, var(--premium-pink), var(--premium-purple));
  color: #ffffff !important;
  text-decoration: none;
  font-family: 'Sora', sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(236, 72, 153, 0.4),
    0 0 0 0 rgba(236, 72, 153, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  border: none;
}

body.bb-permanent-exposure-page .bb-cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

body.bb-permanent-exposure-page .bb-cta-button:hover::before {
  left: 100%;
}

body.bb-permanent-exposure-page .bb-cta-button:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 32px rgba(236, 72, 153, 0.5),
    0 0 0 4px rgba(236, 72, 153, 0.2);
}

body.bb-permanent-exposure-page .bb-cta-button:active {
  transform: translateY(-1px);
}

/* Contact section */
body.bb-permanent-exposure-page .bb-contact-section {
  text-align: center;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(236, 72, 153, 0.2);
}

body.bb-permanent-exposure-page .bb-contact-text {
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

body.bb-permanent-exposure-page .bb-contact-link {
  color: var(--premium-pink) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(236, 72, 153, 0.5);
  font-weight: 600;
  transition: all 0.2s ease;
}

body.bb-permanent-exposure-page .bb-contact-link:hover {
  color: #ffffff !important;
  text-decoration-color: var(--premium-pink);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body.bb-permanent-exposure-page .bb-main-header {
    font-size: clamp(36px, 10vw, 64px);
    margin-bottom: 40px;
  }

  body.bb-permanent-exposure-page .bb-features-ul > li {
    padding-left: 40px;
    font-size: clamp(16px, 4vw, 20px);
  }

  body.bb-permanent-exposure-page .bb-features-ul > li::before {
    left: 12px;
    font-size: 20px;
  }

  body.bb-permanent-exposure-page .bb-sub-list {
    padding-left: 20px;
  }

  body.bb-permanent-exposure-page .bb-cta-button {
    display: block;
    width: 100%;
    padding: 18px 24px;
  }

  body.bb-permanent-exposure-page .bb-transition-heading {
    font-size: 28px;
  }
}