/**
 * gothic.at 2.0 — Dark Modern Theme for BuddyBoss
 * Pure BuddyBoss standard selectors (no redundant custom classes)
 */
:root {
  /* Elementor Design-Tokens direkte Anbindung (keine redundanten Variablen im BuddyBoss CSS) */
  --gat-bg: var(--bg-global, #09090b);
  --gat-surface: var(--bg-surface, #121216);
  --gat-surface-card: var(--bg-surface, #121216);
  --gat-surface-hover: var(--bg-surface-hover, #1f222b);
  --gat-border: rgba(255, 255, 255, 0.08);
  --gat-border-strong: rgba(255, 255, 255, 0.16);
  --gat-text-main: var(--text-heading, #e4e4e7);
  --gat-text-muted: var(--text-body, #a1a1aa);
  --gat-text-dim: var(--text-muted, #6a6b6e);
  --gat-accent: var(--accent, #8b0000);
  --gat-radius: 8px;
  --gat-radius-lg: 12px;
}

/* ==========================================================================
   Global Dark Reset for BuddyBoss Single Member Pages & Directories
   ========================================================================== */
#buddypress,
.buddypress-wrap,
.bp-wrap,
.users-header.single-headers,
#item-body,
.members-directory-wrapper,
.members-directory-container {
  /*background-color: var(--gat-bg) !important;*/
  color: var(--text-body, #a1a1aa) !important;
  font-family: "Plus Jakarta Sans", sans-serif;
}
#buddypress h1,
#buddypress h2,
#buddypress h3,
#buddypress h4,
#buddypress h5,
#buddypress h6,
.buddypress-wrap h1,
.buddypress-wrap h2,
.buddypress-wrap h3,
.buddypress-wrap h4,
.buddypress-wrap h5,
.buddypress-wrap h6 {
  color: var(--text-heading, #e4e4e7) !important;
}

/* ==========================================================================
   Members Directory Container Constraint (Max-Width: 80rem / 1280px)
   ========================================================================== */
/* Hauptinhalt zentrieren und auf maximale Breite begrenzen */
body.buddypress #buddypress {
    max-width: var(--content-max-width) !important;
    margin: 0px auto !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   Members Directory Navigation & Title (Screenshot 3 Reference)
   ========================================================================== */
.members-directory-container .bp-navs,
.members-directory-container .directory-type-navs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
}
.members-directory-container .bp-navs ul,
.members-directory-container .directory-type-navs ul {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
}
.members-directory-container .bp-navs li,
.members-directory-container .directory-type-navs li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.members-directory-container .bp-navs li a,
.members-directory-container .directory-type-navs li a {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: -0.01em !important;
}
.members-directory-container .bp-navs li a .gat-count,
.members-directory-container .bp-navs li a span.count,
.members-directory-container .bp-navs li a span:not(.bb-icon-l) {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-left: 2px !important;
}
.members-directory-container .bb-item-count {
  display: none !important;
}

/* ==========================================================================
   Members Directory Search & Filters Toolbar (Screenshots 1 & 2 Reference)
   ========================================================================== */
.members-directory-container .bb-subnav-filters-container,
.bb-subnav-filters-search {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
}
.members-directory-container .subnav-filters.filters,
.members-directory-container #subnav-filters {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  box-shadow: none !important;
}

/* Left: Search input */
.members-directory-container .subnav-search,
.members-directory-container .bp-search {
  position: relative !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 320px !important;
}
.members-directory-container .bp-dir-search-form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.members-directory-container .bp-dir-search-form input[type="search"],
.members-directory-container .bp-dir-search-form input[type="text"] {
  width: 100% !important;
  height: 40px !important;
  line-height: 40px !important;
  background-color: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  padding: 0 34px 0 38px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
.members-directory-container .bp-dir-search-form input[type="search"]::placeholder {
  color: #71717a !important;
  opacity: 1 !important;
}
.members-directory-container .bp-dir-search-form input[type="search"]:focus {
  background-color: #212121 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.members-directory-container .bp-dir-search-form .search-form_submit {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #9ca3af !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
  width: auto !important;
  height: auto !important;
}
.members-directory-container .bp-dir-search-form .search-form_submit .bb-icon-search {
  color: #9ca3af !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
.members-directory-container .bp-dir-search-form .search-form_reset {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #71717a !important;
  font-size: 14px !important;
  cursor: pointer !important;
  z-index: 2 !important;
  width: auto !important;
  height: auto !important;
  transition: color 0.15s ease !important;
}
.members-directory-container .bp-dir-search-form .search-form_reset:hover {
  color: #ffffff !important;
}

/* Right: Filters container */
.subnav-filters-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-left: auto !important;
}

/* Grid & List View Toggles (Screenshot 1) */
body #buddypress .grid-filters,
body.buddypress .grid-filters,
.buddypress-wrap .grid-filters,
.buddypress-wrap .subnav-filters .grid-filters,
.subnav-filters .grid-filters,
.subnav-filters-right .grid-filters,
.members-directory-container .grid-filters,
#buddypress .grid-filters,
div.grid-filters,
.grid-filters {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  height: auto !important;
}
body #buddypress .grid-filters a,
body.buddypress .grid-filters a,
.buddypress-wrap .grid-filters a,
.buddypress-wrap .grid-filters a.layout-grid-view,
.buddypress-wrap .grid-filters a.layout-list-view,
.subnav-filters-right .grid-filters a,
.members-directory-container .grid-filters a,
.members-directory-container .grid-filters .layout-view,
.grid-filters a,
.grid-filters .layout-view {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  color: #71717a !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}
.members-directory-container .grid-filters .layout-view i {
  font-size: 20px !important;
  color: #71717a !important;
  line-height: 1 !important;
  transition: color 0.15s ease !important;
}
.members-directory-container .grid-filters .layout-view:hover i {
  color: #d4d4d8 !important;
}
.members-directory-container .grid-filters .layout-view.active i {
  color: #ffffff !important;
}
.members-directory-container .grid-filters .gat-grid-divider {
  display: inline-block !important;
  width: 1px !important;
  height: 20px !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  margin: 0 4px 0 10px !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   Universal Filter Bar & Dropdowns (Members, Notifications, Friends, Groups)
   Styled identically to Activities Filter Bar with custom dark dropdowns
   ========================================================================== */
.subnav-filters,
.buddypress-wrap .subnav-filters,
.notifications .subnav-filters,
.friends .subnav-filters,
.members-directory-container .subnav-filters {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: transparent !important;
  border: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}
.subnav-filters-right,
.buddypress-wrap .subnav-filters-right {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin: 0 0 0 auto !important;
}
.component-filters,
.buddypress-wrap .component-filters,
.members-directory-container .component-filters {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
}
.component-filters .filter,
.buddypress-wrap .component-filters .filter {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
}

/* Filter container ("Sort by [ ... ]") */
.bb-subnav-filters-container-main,
.component-filters .bb-subnav-filters-container-main,
.members-directory-container .component-filters .bb-subnav-filters-container-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
.bb-subnav-filters-label,
.component-filters .bb-subnav-filters-label,
.members-directory-container .component-filters .bb-subnav-filters-label {
  color: var(--gat-text-dim, #71717a) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Hide any leaked screen-reader labels (e.g. "members") */
.component-filters .bp-screen-reader-text,
.bb-subnav-filters-container-main .bp-screen-reader-text,
.subnav-filters-right .bp-screen-reader-text,
#dir-filters label.bp-screen-reader-text,
.component-filters label.bp-screen-reader-text,
#dir-filters label,
.component-filters label {
  display: none !important;
}

/* Custom Dropdown Filter Wrap */
.bb-subnav-filters-container.bb-subnav-filters-filtering,
.gat-custom-filter-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Opener Pill Button — exact 36px pill matching Aktivitäten */
.bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-opener,
.gat-custom-filter-wrap .subnav-filters-opener {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  height: 36px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  outline: none !important;
  box-shadow: none !important;
}
.bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-opener:hover,
.gat-custom-filter-wrap .subnav-filters-opener:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-opener span.selected,
.gat-custom-filter-wrap .subnav-filters-opener span.selected {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-opener i.bb-icon-angle-down,
.gat-custom-filter-wrap .subnav-filters-opener i.bb-icon-angle-down {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: transform 0.2s ease !important;
}
.bb-subnav-filters-container.bb-subnav-filters-filtering.active .subnav-filters-opener i.bb-icon-angle-down,
.gat-custom-filter-wrap.active .subnav-filters-opener i.bb-icon-angle-down {
  transform: rotate(180deg) !important;
}

/* Custom Dropdown Popup Modal — HIDDEN WHEN NOT ACTIVE */
.bb-subnav-filters-filtering:not(.active) .subnav-filters-modal,
.gat-custom-filter-wrap:not(.active) .subnav-filters-modal,
.bb-subnav-filters-container:not(.active) #bb-subnav-filter-show,
.bb-subnav-filters-container:not(.active) #bb-subnav-filter-by {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Base Dropdown Styling */
.bb-subnav-filters-filtering .subnav-filters-modal,
.gat-custom-filter-wrap .subnav-filters-modal,
#bb-subnav-filter-show,
#bb-subnav-filter-by {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  background: var(--gat-surface, #121216) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8) !important;
  padding: 6px 0 !important;
  min-width: 190px !important;
  z-index: 1000 !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  transform: translateY(-4px) !important;
  list-style: none !important;
  margin: 0 !important;
}

/* Custom Dropdown Popup Modal — DISPLAYED WHEN ACTIVE */
.bb-subnav-filters-filtering.active .subnav-filters-modal,
.gat-custom-filter-wrap.active .subnav-filters-modal,
.activity-head-bar .bb-subnav-filters-filtering.active .subnav-filters-modal,
.bb-subnav-filters-container.active #bb-subnav-filter-show,
.bb-subnav-filters-container.active #bb-subnav-filter-by,
.active > #bb-subnav-filter-show,
.active > #bb-subnav-filter-by {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.bb-subnav-filters-filtering .subnav-filters-modal ul,
.gat-custom-filter-wrap .subnav-filters-modal ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bb-subnav-filters-filtering .subnav-filters-modal ul li,
.gat-custom-filter-wrap .subnav-filters-modal ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.bb-subnav-filters-filtering .subnav-filters-modal ul li a,
.gat-custom-filter-wrap .subnav-filters-modal ul li a {
  display: block !important;
  position: relative !important;
  padding: 9px 36px 9px 16px !important;
  color: var(--gat-text-muted, #a1a1aa) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}
.bb-subnav-filters-filtering .subnav-filters-modal ul li a:hover,
.bb-subnav-filters-filtering .subnav-filters-modal ul li.selected a,
.gat-custom-filter-wrap .subnav-filters-modal ul li a:hover,
.gat-custom-filter-wrap .subnav-filters-modal ul li.selected a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Checkmark on active item matching activities */
.bb-subnav-filters-filtering .subnav-filters-modal ul li.selected a::after,
.gat-custom-filter-wrap .subnav-filters-modal ul li.selected a::after,
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-modal li.selected a::after {
  content: "\e876" !important;
  font-family: "bb-icons" !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
}

/* Hidden native select & removal of legacy borders/arrows */
.gat-hidden-filter-select {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
  z-index: -1 !important;
}
.buddypress-wrap .select-wrap,
.buddypress-wrap .component-filters .select-wrap,
.buddypress-wrap .subnav-filters .select-wrap {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.buddypress-wrap .select-wrap span.select-arrow,
.buddypress-wrap .select-wrap .select-arrow {
  display: none !important;
}

/* ==========================================================================
   Member Directory Cards — Grid View ("User Kärtchen")
   ========================================================================== */
#members-list.grid,
#members-list:not(.list),
.buddypress-wrap .members-list.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  list-style: none !important;
}
#members-list.grid li.item-entry,
#members-list:not(.list) li.item-entry,
#members-list.grid li,
#members-list:not(.list) li,
.members-list.grid li {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 330px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
#members-list.grid li .list-wrap,
#members-list:not(.list) li .list-wrap,
.members-list.grid li .list-wrap {
  background-color: #212121 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 28px 20px 20px 20px !important;
  position: relative !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
#members-list.grid li .list-wrap:hover,
#members-list:not(.list) li .list-wrap:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
#members-list.grid li .list-wrap-inner,
#members-list:not(.list) li .list-wrap-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Avatar in Grid View — Fixed at the Top */
#members-list.grid .item-avatar,
#members-list:not(.list) .item-avatar,
.members-list.grid li .item-avatar {
  margin: 0 auto 12px auto !important;
  padding: 0 !important;
  top: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  order: 1 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}
#members-list.grid .item-avatar a,
#members-list:not(.list) .item-avatar a {
  position: relative !important;
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#members-list.grid .item-avatar img.avatar,
#members-list:not(.list) .item-avatar img.avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  background-color: var(--gat-surface) !important;
  object-fit: cover !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  display: block !important;
  margin: 0 auto !important;
  transition: border-color 0.25s ease !important;
}
#members-list.grid li .list-wrap:hover .item-avatar img.avatar,
#members-list:not(.list) li .list-wrap:hover .item-avatar img.avatar {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Presence Dot in Grid View */
#members-list.grid .presence-badge,
#members-list.grid .user-presence,
#members-list.grid .member-status,
#members-list:not(.list) .presence-badge,
#members-list:not(.list) .user-presence,
#members-list:not(.list) .member-status {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid #212121 !important;
}

/* Grid Text & Entity container */
#members-list.grid .item,
#members-list:not(.list) .item {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  order: 2 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
#members-list.grid .item-block,
#members-list:not(.list) .item-block {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
#members-list.grid .member-title-wrap,
#members-list:not(.list) .member-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Grid Member type (Pill badge directly below avatar) */
#members-list.grid .item-meta.member-type.member-type-top,
#members-list.grid .item-block .item-meta.member-type,
#members-list:not(.list) .item-meta.member-type.member-type-top,
#members-list:not(.list) .item-block .item-meta.member-type {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #d4d4d8 !important;
  margin: 0 auto 10px auto !important;
  line-height: 1.4 !important;
  order: 1 !important;
}

/* Grid Username */
#members-list.grid .member-name,
#members-list.grid h2.list-title,
#members-list:not(.list) .member-name,
#members-list:not(.list) h2.list-title {
  margin: 0 0 6px 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  width: 100% !important;
  order: 2 !important;
}
#members-list.grid .member-name a,
#members-list.grid h2.list-title a,
#members-list:not(.list) .member-name a,
#members-list:not(.list) h2.list-title a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
#members-list.grid .member-name a:hover,
#members-list:not(.list) .member-name a:hover {
  color: #d4d4d8 !important;
}

/* Grid Last activity */
#members-list.grid .item-meta.last-activity,
#members-list:not(.list) .item-meta.last-activity {
  color: #9ca3af !important;
  font-size: 13px !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  width: 100% !important;
  order: 3 !important;
}
#members-list.grid .item-meta.last-activity .separator,
#members-list:not(.list) .item-meta.last-activity .separator {
  margin: 0 4px !important;
  color: #71717a !important;
}

/* Grid Action Buttons — Pinned at bottom & Centered */
#members-list.grid .member-buttons-wrap,
#members-list.grid .member-card-buttons,
#members-list:not(.list) .member-buttons-wrap,
#members-list:not(.list) .member-card-buttons {
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 16px !important;
  min-height: 38px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  order: 3 !important;
  flex: 0 0 auto !important;
}

/* ==========================================================================
   Member Directory Cards — List View (Screenshot Reference media_1793644439036)
   ========================================================================== */
#members-list.list,
.buddypress-wrap .members-list.list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  list-style: none !important;
  width: 100% !important;
}
#members-list.list li.item-entry,
#members-list.list li,
.members-list.list li {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
  box-sizing: border-box !important;
}
#members-list.list li .list-wrap,
.members-list.list li .list-wrap {
  background-color: #212121 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  position: relative !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: auto !important;
  min-height: 88px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
#members-list.list li .list-wrap:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
#members-list.list li .list-wrap-inner,
.members-list.list li .list-wrap-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Avatar in List View */
#members-list.list .item-avatar,
.members-list.list li .item-avatar {
  margin: 0 20px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  position: relative !important;
}
#members-list.list .item-avatar a {
  display: block !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#members-list.list .item-avatar img.avatar {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  background-color: var(--gat-surface) !important;
  object-fit: cover !important;
  display: block !important;
}
#members-list.list .presence-badge,
#members-list.list .user-presence,
#members-list.list .member-status {
  position: absolute !important;
  top: 2px !important;
  right: 4px !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  border: 2px solid #212121 !important;
}

/* Text Container in List View */
#members-list.list .item,
.members-list.list li .item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
#members-list.list .item-block,
.members-list.list li .item-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Horizontal Name + Badge Row in List View */
#members-list.list .member-title-wrap,
.members-list.list li .member-title-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  width: auto !important;
}
#members-list.list .member-name,
#members-list.list h2.list-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  order: 1 !important;
}
#members-list.list .item-meta.member-type.member-type-top {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #d4d4d8 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  order: 2 !important;
}
#members-list.list .item-meta.last-activity {
  color: #9ca3af !important;
  font-size: 13px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* Action Buttons in List View — Positioned on the Right */
#members-list.list .member-buttons-wrap,
#members-list.list .member-card-buttons {
  margin: 0 0 0 auto !important;
  padding: 0 16px 0 0 !important;
  width: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}
#members-list.list .member-button-wrap,
#members-list.list .footer-button-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Three dots options menu in List View — top right */
#members-list.list li .bb_more_options,
#members-list.list .bp-members-list-hook {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  margin: 0 !important;
}
#members-list .member-button-wrap,
#members-list .footer-button-wrap,
#members-list .member-card-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
#members-list .member-button-wrap .generic-button,
#members-list .member-card-buttons .generic-button,
#members-list .footer-button-wrap .generic-button,
#members-list .generic-button {
  display: inline-flex !important;
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  float: none !important;
}
#members-list .member-button-wrap a,
#members-list .member-button-wrap button,
#members-list .member-card-buttons a,
#members-list .member-card-buttons button,
#members-list .footer-button-wrap a,
#members-list .generic-button a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important; /* Conceal text label, leave only clean icon */
  line-height: 1 !important;
  color: #9ca3af !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}
#members-list .member-button-wrap a:hover,
#members-list .member-button-wrap button:hover,
#members-list .member-card-buttons a:hover,
#members-list .member-card-buttons button:hover,
#members-list .footer-button-wrap a:hover,
#members-list .generic-button a:hover {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  transform: none !important;
}
#members-list .member-button-wrap a i,
.member-card-buttons a i,
.member-card-buttons button i,
#members-list .generic-button a i,
#members-list .member-button-wrap button i {
  font-size: 21px !important;
  color: #9ca3af !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}
#members-list .member-button-wrap a:hover i,
.member-card-buttons a:hover i,
.member-card-buttons button:hover i,
#members-list .generic-button a:hover i,
#members-list .member-button-wrap button:hover i {
  color: #ffffff !important;
  transform: scale(1.15) !important;
}

/* Action Icons for Member Cards */
.member-buttons-wrap a i,
.member-buttons-wrap button i,
#members-list .member-button-wrap a i,
#members-list .member-button-wrap button i,
#members-list .generic-button a i,
#members-list .generic-button button i {
  font-family: 'bb-icons-rl' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
.member-buttons-wrap a i::before,
.member-buttons-wrap button i::before,
#members-list .member-button-wrap a i::before,
#members-list .member-button-wrap button i::before,
#members-list .generic-button a i::before,
#members-list .generic-button button i::before {
  font-family: 'bb-icons-rl' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* 1. Freundschaft anfragen: \e4d0 */
.member-buttons-wrap a.add i::before,
.member-buttons-wrap button.add i::before,
.member-buttons-wrap .not_friends a i::before,
.member-buttons-wrap .not_friends button i::before,
#members-list a.add i::before,
#members-list button.add i::before,
#members-list .not_friends a i::before,
#members-list .not_friends button i::before,
#members-list [data-bp-btn-action="not_friends"] i::before {
  content: "\e4d0" !important;
}

/* 2. Freundschaft angefragt / Pending: \eafa */
.member-buttons-wrap a.requested i::before,
.member-buttons-wrap button.requested i::before,
.member-buttons-wrap a.pending i::before,
.member-buttons-wrap button.pending i::before,
.member-buttons-wrap .pending_friend a i::before,
.member-buttons-wrap .pending_friend button i::before,
#members-list a.requested i::before,
#members-list button.requested i::before,
#members-list a.pending i::before,
#members-list button.pending i::before,
#members-list .pending_friend a i::before,
#members-list .pending_friend button i::before,
#members-list [data-bp-btn-action="pending"] i::before,
.member-buttons-wrap a.is_friend i::before,
.member-buttons-wrap button.is_friend i::before,
#members-list a.is_friend i::before,
#members-list button.is_friend i::before,
#members-list .is_friend a i::before,
#members-list .is_friend button i::before {
  content: "\eafa" !important;
}

/* 3. Folgen: \e324 */
.member-buttons-wrap a.follow i::before,
.member-buttons-wrap button.follow i::before,
.member-buttons-wrap .not-following a i::before,
.member-buttons-wrap .not-following button i::before,
#members-list a.follow i::before,
#members-list button.follow i::before,
#members-list .not-following a i::before,
#members-list .not-following button i::before,
#members-list [data-bp-btn-action="follow"] i::before {
  content: "\e324" !important;
}

/* 4. Un-Follow: \e324 */
.member-buttons-wrap a.unfollow i::before,
.member-buttons-wrap button.unfollow i::before,
.member-buttons-wrap a.following i::before,
.member-buttons-wrap button.following i::before,
.member-buttons-wrap .following a i::before,
.member-buttons-wrap .following button i::before,
#members-list a.unfollow i::before,
#members-list button.unfollow i::before,
#members-list a.following i::before,
#members-list button.following i::before,
#members-list .following a i::before,
#members-list .following button i::before,
#members-list [data-bp-btn-action="unfollow"] i::before {
  content: "\e324" !important;
}

/* Active Following State highlight */
.member-buttons-wrap .following i,
.member-buttons-wrap a.following i,
.member-buttons-wrap a.unfollow i,
#members-list .following a i,
#members-list a.following i,
#members-list a.unfollow i {
  color: #ffffff !important;
}

/* 5. Nachricht senden: \e16e */
.member-buttons-wrap a.send-message i::before,
.member-buttons-wrap button.send-message i::before,
.member-buttons-wrap .send-message a i::before,
.member-buttons-wrap .send-message button i::before,
#members-list a.send-message i::before,
#members-list button.send-message i::before,
#members-list #send-private-message a i::before,
#members-list .send-message a i::before,
#members-list .message-button a i::before,
#members-list [data-bp-btn-action="send-message"] i::before {
  content: "\e16e" !important;
}

/* 6. Loading state for Member Card Action Buttons */
.member-buttons-wrap .loading i::before,
#members-list .loading i::before {
  content: "" !important;
  display: inline-block !important;
  height: 16px !important;
  width: 16px !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: bbSpin 0.8s linear infinite !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Red hover accent for cancel/remove action on hover */
#members-list a.requested:hover i,
#members-list .pending_friend a:hover i {
  color: #ef4444 !important;
}

/* Three dots options menu on top-right of user cards */
#buddypress #members-list .bb_more_options,
#members-list .bb_more_options,
#members-list li .bb_more_options,
.members-list.grid li .bb_more_options,
.list-wrap .bb_more_options {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10 !important;
  order: 9999 !important;
  flex: 0 0 auto !important;
}
#members-list .bp-members-list-hook,
.members-list.grid li .bp-members-list-hook {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10 !important;
  order: 9999 !important;
}

/* Black Bold Tooltip matching Screenshot 2 */
#members-list [data-bp-tooltip]:after,
#members-list [data-balloon]:after,
.bp-tooltip:after {
  background: #000000 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8) !important;
  z-index: 99999 !important;
}
#members-list [data-bp-tooltip]:before,
#members-list [data-balloon]:before,
.bp-tooltip:before {
  border-top-color: #000000 !important;
  z-index: 99999 !important;
}
#members-list [data-bp-tooltip][data-bp-tooltip-pos="left"]:before,
#members-list [data-balloon][data-balloon-pos="left"]:before {
  border-left-color: #000000 !important;
}
#members-list .bb_more_options .bb_more_options_action {
  color: var(--gat-text-dim) !important;
  font-size: 16px !important;
  padding: 4px !important;
  border-radius: 6px !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
}
#members-list .bb_more_options .bb_more_options_action:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}
#members-list .bb_more_dropdown {
  background: var(--gat-surface) !important;
  border: 1px solid var(--gat-border-strong) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
  padding: 6px 0 !important;
  overflow: hidden !important;
}
#members-list .bb_more_dropdown a {
  color: var(--gat-text-main) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  display: block !important;
  text-decoration: none !important;
}
#members-list .bb_more_dropdown a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Cover Image & Header Card
   ========================================================================== */
#cover-image-container.bb-cover-image-container {
  background: var(--gat-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  /*box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;*/
  /*box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;*/
  margin-bottom: 24px !important;
}
#item-header-cover-image #header-cover-image,
#header-cover-image {
  position: relative !important;
  border: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 180px !important;
}

@media (min-width: 768px) {
#header-cover-image {
    height: 220px; /* Auf großen Bildschirmen etwas großzügiger, aber nie zu mächtig */
  }
}

/* Leichter Verlauf am unteren Rand des Cover-Bildes */
#header-cover-image::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 140px !important;
  background: linear-gradient(to bottom, rgba(16, 16, 16, 0) 0%, rgba(16, 16, 16, 0.45) 45%, rgba(16, 16, 16, 0.98) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
#item-header-cover-image #header-cover-image:empty {
  display: none !important;
}

/* Cover Photo Buttons */
.link-change-cover-image,
.position-change-cover-image {
  z-index: 4 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}
.link-change-cover-image i,
.position-change-cover-image i {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}
.link-change-cover-image:hover,
.position-change-cover-image:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  /*transform: scale(1.05) !important;*/
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}
.link-change-cover-image:hover i,
.position-change-cover-image:hover i,
.link-change-cover-image:hover i:before,
.position-change-cover-image:hover i:before {
  color: #000000 !important;
}

/* Reposition Cover Wrap controls */
.header-cover-reposition-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 25 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.header-cover-reposition-wrap .guillotine-window {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  pointer-events: auto !important;
}
.header-cover-reposition-actions {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 125 !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fallback if actions wrapper is not present in DOM */
.header-cover-reposition-wrap > .button {
  top: 14px !important;
  margin-top: 0 !important;
}
.header-cover-reposition-wrap a.cover-image-cancel,
.header-cover-reposition-wrap a.cover-image-save,
.header-cover-reposition-wrap .button.cover-image-cancel,
.header-cover-reposition-wrap .button.cover-image-save,
.header-cover-reposition-actions a.cover-image-cancel,
.header-cover-reposition-actions a.cover-image-save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* Cancel Button */
.header-cover-reposition-wrap a.cover-image-cancel,
.header-cover-reposition-wrap .button.cover-image-cancel,
.header-cover-reposition-actions a.cover-image-cancel {
  background: rgba(0, 0, 0, 0.75) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.header-cover-reposition-wrap a.cover-image-cancel:hover,
.header-cover-reposition-wrap .button.cover-image-cancel:hover,
.header-cover-reposition-actions a.cover-image-cancel:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

/* Save Button */
.header-cover-reposition-wrap a.cover-image-save,
.header-cover-reposition-wrap .button.cover-image-save,
.header-cover-reposition-actions a.cover-image-save {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  font-weight: 600 !important;
}
.header-cover-reposition-wrap a.cover-image-save:hover,
.header-cover-reposition-wrap .button.cover-image-save:hover,
.header-cover-reposition-actions a.cover-image-save:hover {
  background: #e4e4e7 !important;
  border-color: #e4e4e7 !important;
  color: #000000 !important;
}

/* Save Button Loading State: Locked in place without layout jumps */
#item-header .header-cover-reposition-wrap a.cover-image-save.loading,
#item-header .header-cover-reposition-actions a.cover-image-save.loading,
.header-cover-reposition-wrap a.cover-image-save.loading,
.header-cover-reposition-actions a.cover-image-save.loading {
  position: static !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  margin: 0 !important;
  transform: none !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
  cursor: wait !important;
}
#item-header .header-cover-reposition-wrap a.cover-image-save.loading::after,
#item-header .header-cover-reposition-actions a.cover-image-save.loading::after,
.header-cover-reposition-wrap a.cover-image-save.loading::after,
.header-cover-reposition-actions a.cover-image-save.loading::after {
  content: "" !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  height: 12px !important;
  width: 12px !important;
  border: 2px solid rgba(0, 0, 0, 0.25) !important;
  border-top-color: #000000 !important;
  border-radius: 50% !important;
  animation: bbSpin 0.8s linear infinite !important;
  margin-left: 6px !important;
  margin-right: 0 !important;
  vertical-align: middle !important;
}

/* Drag to move helper box */
.header-cover-reposition-wrap .drag-element-helper {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
}

/* Member Header Content Layout — Clean Gothic Card with Integrated Nav */
#item-header-cover-image {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  position: relative !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Geometrisches Netz-Overlay unter dem Avatar (Rund & endet exakt an der Tab-Linie) */
.profile-avatar-geometric-overlay {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 280px !important;
  max-width: 90vw !important;
  height: 220px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.18 !important;
  overflow: visible !important;
  display: none !important;
}
.profile-avatar-geometric-overlay svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Profile Banner Pattern & Profilzeile */
.profile-banner-pattern,
.item-header-profile-row {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 22px 36px 18px 36px !important;
  min-height: 125px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: var(--gat-surface) !important;
  background-image: none !important;
}
.item-header-nav-row {
  display: block !important;
  width: 100% !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 28px 14px 28px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
.item-header-nav-row #object-nav {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Hide duplicate primary navigation placed outside the header box */
.bp-wrap > #object-nav,
.bp-wrap > .bp-navs#object-nav {
  display: none !important;
}
#buddypress div#item-header {
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
  border: 0 !important;
}

/* ==========================================================================
   Avatar — Clean Circle Inside Card (No Negative Margin) - 144px Profile Size
   ========================================================================== */
#buddypress #item-header-avatar,
#buddypress #item-header-cover-image #item-header-avatar,
#item-header-avatar {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  flex: 0 0 140px !important;
  width: 140px !important;
  height: 140px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 10 !important;
  cursor: default !important;
}

/* Avatar Cursor Control: Hand cursor ONLY when avatar is editable (own profile) */
#item-header-avatar,
#item-header-avatar a,
#item-header-avatar img,
#item-header-avatar.not-my-avatar,
#item-header-avatar.not-my-avatar a,
#item-header-avatar.not-my-avatar img,
#cover-image-container:not(.my_profile) #item-header-avatar,
#cover-image-container:not(.my_profile) #item-header-avatar a,
#cover-image-container:not(.my_profile) #item-header-avatar img {
  cursor: default !important;
}
#item-header-avatar.not-my-avatar a,
#cover-image-container:not(.my_profile) #item-header-avatar a {
  pointer-events: none !important;
}
#cover-image-container.my_profile #item-header-avatar,
#cover-image-container.my_profile #item-header-avatar a,
#cover-image-container.my_profile #item-header-avatar img,
#cover-image-container.my_profile #item-header-avatar .link-change-overlay,
#cover-image-container.my_profile #item-header-avatar .link-change-profile-image,
#item-header-avatar.my-avatar,
#item-header-avatar.my-avatar a,
#item-header-avatar.my-avatar img,
#item-header-avatar.my-avatar .link-change-overlay,
#item-header-avatar.my-avatar .link-change-profile-image,
#item-header-avatar.can-edit-avatar,
#item-header-avatar.can-edit-avatar a,
#item-header-avatar.can-edit-avatar img {
  cursor: pointer !important;
  pointer-events: auto !important;
}
#buddypress #item-header-avatar > a:not(.link-change-profile-image),
#buddypress #item-header-avatar .avatar-wrap,
#item-header-avatar > a:not(.link-change-profile-image),
#item-header-avatar .avatar-wrap {
  display: block !important;
  width: 140px !important;
  height: 140px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  position: relative !important;
}

/* Circular avatar image mit dickem dunklen Ring und Tiefenschatten */
#buddypress #item-header-avatar img.avatar,
#buddypress #item-header-cover-image #item-header-avatar img.avatar,
#item-header-avatar img.avatar {
  display: block !important;
  width: 140px !important;
  height: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 4px solid #1a1a1a !important;
  background-color: var(--gat-surface) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
  margin: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
#item-header-avatar:hover img.avatar {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Online Presence Dot - Dynamic Status Indicator */
#item-header-avatar .presence-badge,
#item-header-avatar .user-presence,
#item-header-avatar .member-status,
#item-header-avatar span.presence-badge,
#item-header-avatar span.member-status {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 20 !important;
  width: 18px !important;
  height: 18px !important;
  border: 3.5px solid var(--gat-surface) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

/* Status-dependent colors (supporting BuddyBoss presence classes) */
.member-status.online,
.user-presence.online,
.presence-badge.online,
#item-header-avatar .member-status.online,
#members-list .member-status.online {
  background-color: #22c55e !important; /* Green for online */
}
.member-status.away,
.member-status.idle,
.user-presence.away,
.user-presence.idle,
.presence-badge.away,
#item-header-avatar .member-status.away,
#members-list .member-status.away {
  background-color: #eab308 !important; /* Amber for away/idle */
}
.member-status.busy,
.member-status.dnd,
.user-presence.busy,
.presence-badge.busy,
#item-header-avatar .member-status.busy,
#members-list .member-status.busy {
  background-color: #ef4444 !important; /* Red for busy/dnd */
}
.member-status.offline,
.user-presence.offline,
.presence-badge.offline,
#item-header-avatar .member-status.offline,
#members-list .member-status.offline {
  display: none !important;
}

/* Avatar Hover Overlay (Dark Tint) */
#buddypress #cover-image-container #item-header-cover-image #item-header-avatar .link-change-overlay,
#buddypress #item-header-avatar .link-change-overlay,
#item-header-avatar .link-change-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 144px !important;
  height: 144px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 15 !important;
  pointer-events: none !important;
}
#buddypress #cover-image-container #item-header-cover-image #item-header-avatar:hover .link-change-overlay,
#buddypress #item-header-avatar:hover .link-change-overlay,
#item-header-avatar:hover .link-change-overlay,
#item-header-avatar:focus-within .link-change-overlay {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Avatar Hover Camera Action Button - Base State */
#buddypress #cover-image-container #item-header-cover-image #item-header-avatar a.link-change-profile-image,
#buddypress #cover-image-container #item-header-cover-image #item-header-avatar .link-change-profile-image,
#buddypress #item-header-avatar a.link-change-profile-image,
#buddypress #item-header-avatar .link-change-profile-image,
#item-header-avatar a.link-change-profile-image,
#item-header-avatar .link-change-profile-image {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  z-index: 25 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

/* Avatar Hover Camera Action Button - Hover State (Maximum Specificity to Overrule BuddyBoss Defaults) */
#buddypress #cover-image-container #item-header-cover-image #item-header-avatar:hover a.link-change-profile-image,
#buddypress #cover-image-container #item-header-cover-image #item-header-avatar:hover .link-change-profile-image,
#buddypress #item-header-cover-image #item-header-avatar:hover a.link-change-profile-image,
#buddypress #item-header-cover-image #item-header-avatar:hover .link-change-profile-image,
#buddypress #item-header-avatar:hover a.link-change-profile-image,
#buddypress #item-header-avatar:hover .link-change-profile-image,
#item-header-avatar:hover a.link-change-profile-image,
#item-header-avatar:hover .link-change-profile-image,
#item-header-avatar:focus-within a.link-change-profile-image,
#item-header-avatar:focus-within .link-change-profile-image,
#item-header-avatar a.link-change-profile-image:hover,
#item-header-avatar .link-change-profile-image:hover {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
}
#item-header-avatar .link-change-profile-image:hover,
#item-header-avatar a.link-change-profile-image:hover,
#buddypress #cover-image-container #item-header-cover-image #item-header-avatar .link-change-profile-image:hover,
#buddypress #cover-image-container #item-header-cover-image #item-header-avatar a.link-change-profile-image:hover {
  background: rgba(0, 0, 0, 0.95) !important;
  border-color: #ffffff !important;
  transform: translate(-50%, -50%) scale(1.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}
#item-header-avatar .link-change-profile-image i,
#item-header-avatar a.link-change-profile-image i,
.link-change-profile-image i {
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.15s ease !important;
}
#item-header-avatar .link-change-profile-image:hover i,
#item-header-avatar a.link-change-profile-image:hover i,
#item-header-avatar .link-change-profile-image:hover i:before,
#item-header-avatar a.link-change-profile-image:hover i:before,
.link-change-profile-image:hover i,
.link-change-profile-image:hover i:before {
  color: #ffffff !important;
}

/* User Content Wrap & Spacing */
#item-header-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
#item-header-content {
  width: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
}
#item-header-content .flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 85px !important;
}
.bb-user-content-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  gap: 3px !important;
  max-width: calc(50% - 85px) !important;
  min-width: 0 !important;
}
.bb-user-actions-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  text-align: right !important;
  max-width: calc(50% - 85px) !important;
  min-width: 0 !important;
  align-self: stretch !important;
  padding: 2px 0 !important;
}
.bb-user-actions-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
}
.bb-user-actions-top .member-header-actions-wrap {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bb-user-actions-top .member-header-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bb-user-actions-top .member-header-actions .generic-button {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Switch User / "Zeigen als" Icon Button: Height, radius and alignment match action buttons exactly */
.member-switch-user-btn,
.bb-user-actions-top .member-switch-user-btn,
a.member-switch-user-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
.member-switch-user-btn:hover,
.bb-user-actions-top .member-switch-user-btn:hover,
a.member-switch-user-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}
.member-switch-user-btn:active,
a.member-switch-user-btn:active {
  background: rgba(255, 255, 255, 0.22) !important;
}
.member-switch-user-btn svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  pointer-events: none !important;
}

/* Universal Header Action Buttons in .bb-user-actions-top (Request Sent, Cancel, Send Message, etc.) */
#item-header .member-header-actions button,
#item-header .member-header-actions a,
.bb-user-actions-top .member-header-actions-wrap button,
.bb-user-actions-top .member-header-actions-wrap a,
.bb-user-actions-top .member-header-actions button,
.bb-user-actions-top .member-header-actions a,
.bb-user-actions-top button.friendship-button,
.bb-user-actions-top a.send-message {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
#item-header .member-header-actions button:hover,
#item-header .member-header-actions a:hover,
.bb-user-actions-top .member-header-actions-wrap button:hover,
.bb-user-actions-top .member-header-actions-wrap a:hover,
.bb-user-actions-top .member-header-actions button:hover,
.bb-user-actions-top .member-header-actions a:hover,
.bb-user-actions-top button.friendship-button:hover,
.bb-user-actions-top a.send-message:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  padding: 0 12px !important;
  height: 30px !important;
}

/* Ensure Pending Friend / Request Sent / Cancel has exact same height and padding at all times */
#item-header .friendship-button.pending_friend,
#item-header .friendship-button.requested,
#item-header [data-bp-btn-action="pending"],
.bb-user-actions-top .friendship-button.pending_friend,
.bb-user-actions-top .friendship-button.requested {
  background: #444446 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  height: 30px !important;
}
#item-header .friendship-button.pending_friend:hover,
#item-header .friendship-button.requested:hover,
#item-header [data-bp-btn-action="pending"]:hover,
.bb-user-actions-top .friendship-button.pending_friend:hover,
.bb-user-actions-top .friendship-button.requested:hover {
  background: #565658 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  height: 30px !important;
}

/* Friendship button hover switch (Pure CSS, bulletproof) */
.bb-user-actions-top button.friendship-button .btn-text-hover,
.bb-user-actions-top a.friendship-button .btn-text-hover,
#item-header .friendship-button .btn-text-hover {
  display: none !important;
}
.bb-user-actions-top button.friendship-button .btn-text-default,
.bb-user-actions-top a.friendship-button .btn-text-default,
#item-header .friendship-button .btn-text-default {
  display: inline !important;
}
.bb-user-actions-top button.friendship-button:hover .btn-text-default,
.bb-user-actions-top a.friendship-button:hover .btn-text-default,
#item-header .friendship-button:hover .btn-text-default {
  display: none !important;
}
.bb-user-actions-top button.friendship-button:hover .btn-text-hover,
.bb-user-actions-top a.friendship-button:hover .btn-text-hover,
#item-header .friendship-button:hover .btn-text-hover {
  display: inline !important;
}

/* Ensure span and icon inside buttons don't introduce spacing anomalies */
.bb-user-actions-top button span,
.bb-user-actions-top a span {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}
.bb-user-actions-top button i,
.bb-user-actions-top a i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
}

/* Hide ReadyLaunch duplicate hover tooltip balloons */


/* Line 1: Member type pill badge (Grünes Badge wie im Screenshot) */
#item-header-content .member-type,
.member-title-wrap .member-type {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 9999px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #4ade80 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.4 !important;
}
#item-header-content .member-type::before {
  content: "" !important;
  display: inline-block !important;
  width: 11px !important;
  height: 11px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234ade80'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* Line 2: User Nicename */
#item-header-content .user-nicename,
.member-title-wrap .user-nicename {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 0 4px 0 !important;
  text-align: left !important;
}

/* Line 3: Meta Line */
#item-header-content .item-meta {
  color: #9ca3af !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#item-header-content .item-meta .separator {
  color: #71717a !important;
}
#item-header-content .member-social,
#item-header-content .member-social a,
.bb-user-content-wrap .member-social,
.bb-user-content-wrap .member-social *,
.member-social-left {
  display: none !important;
}
.member-social-counts,
.member-social-counts a {
  color: #9ca3af !important;
  font-size: 13px !important;
  margin: 0 !important;
  text-decoration: none !important;
}
#item-header-content .member-social a:hover,
.member-social-left a:hover,
.member-social-counts a:hover {
  color: #ffffff !important;
}
.member-social-counts {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 0 !important;
}
.member-social-counts .flex,
.member-social-counts > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 28px !important;
  margin: 0 !important;
}
.member-social-counts .flex > * + *,
.member-social-counts > div > * + * {
  margin-left: 28px !important;
}
.member-social-counts span,
.member-social-counts a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}
.member-header-more-actions .bb_more_options_action {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  color: #a1a1aa !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.member-header-more-actions .bb_more_options_action:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Line 4: Action Buttons Row (Unified Minimalist Design — No border, No box-shadow, No translateY) */
body:not(.logged-in) .member-header-actions-wrap,
body:not(.logged-in) .member-header-actions {
  display: none !important;
}
.member-header-actions-wrap {
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.member-header-actions-wrap:empty {
  display: none !important;
}
.member-header-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.member-header-actions .generic-button,
.member-header-actions .generic-button.pending_friend,
.member-header-actions div.generic-button {
  display: inline-flex !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  float: none !important;
}

/* Unified Button: No border, No box-shadow, No translateY, Height: 32px */
.member-header-actions .generic-button a,
.member-header-actions .generic-button button,
.member-header-actions button,
.member-header-actions .button,
.member-header-actions a,
.member-header-actions .friendship-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Hover: Slightly brighter background, NO border, NO box-shadow, NO translateY */
.member-header-actions .generic-button a:hover,
.member-header-actions button:hover,
.member-header-actions .button:hover,
.member-header-actions a:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border: none !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Active Press: NO translateY, NO box-shadow */
.member-header-actions .generic-button a:active,
.member-header-actions button:active,
.member-header-actions .button:active,
.member-header-actions a:active {
  background: rgba(255, 255, 255, 0.12) !important;
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Font face definition for ReadyLaunch Icons */
@font-face {
  font-family: 'bb-icons-rl';
  src: url('/wp-content/plugins/buddyboss-platform/bp-templates/bp-nouveau/readylaunch/icons/fonts/bb-icons.woff2') format('woff2'),
       url('/wp-content/plugins/buddyboss-platform/bp-templates/bp-nouveau/readylaunch/icons/fonts/bb-icons.woff') format('woff'),
       url('/wp-content/plugins/buddyboss-platform/bp-templates/bp-nouveau/readylaunch/icons/fonts/bb-icons.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Status: Request Sent / Pending / Following (Subtle Active Tint - No border, No box-shadow, No translateY) */
.member-header-actions .generic-button > button.pending_friend,
.member-header-actions .generic-button > a.pending_friend,
.member-header-actions .generic-button a.requested,
.member-header-actions .generic-button button.requested,
.member-header-actions .generic-button a.pending,
.member-header-actions .generic-button button.pending,
.member-header-actions button.pending_friend,
.member-header-actions a.pending_friend,
.member-header-actions a.requested,
.member-header-actions button.requested,
.member-header-actions a.pending,
.member-header-actions button.pending,
.member-header-actions .friendship-button.requested,
.member-header-actions .friendship-button.pending,
.member-header-actions .following a,
.member-header-actions .following button,
.member-header-actions a.following,
.member-header-actions button.following,
.member-header-actions [data-bp-btn-action="pending"],
#item-header .friendship-button.pending_friend,
#item-header .friendship-button.requested,
#item-header [data-bp-btn-action="pending"] {
  background: #444446 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.member-header-actions .generic-button > button.pending_friend:hover,
.member-header-actions .generic-button > a.pending_friend:hover,
.member-header-actions .generic-button a.requested:hover,
.member-header-actions .generic-button button.requested:hover,
.member-header-actions button.pending_friend:hover,
.member-header-actions a.pending_friend:hover,
.member-header-actions a.requested:hover,
.member-header-actions button.requested:hover,
.member-header-actions a.pending:hover,
.member-header-actions button.pending:hover,
.member-header-actions .friendship-button.requested:hover,
.member-header-actions .following a:hover,
.member-header-actions .following button:hover,
.member-header-actions a.following:hover,
.member-header-actions button.following:hover,
#item-header .friendship-button.pending_friend:hover,
#item-header .friendship-button.requested:hover,
#item-header [data-bp-btn-action="pending"]:hover {
  background: #565658 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ReadyLaunch Icon definitions for Member Header Actions */
.member-header-actions .generic-button a i,
.member-header-actions button i,
.member-header-actions .button i,
.member-header-actions a i,
.member-header-actions i,
#item-header .member-header-actions i,
#item-header .generic-button i {
  font-family: 'bb-icons-rl', bb-icons-rl !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  font-size: 15px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  transition: none !important;
  transform: none !important;
}
.member-header-actions .generic-button a i::before,
.member-header-actions button i::before,
.member-header-actions .button i::before,
.member-header-actions a i::before,
.member-header-actions i::before,
#item-header .member-header-actions i::before,
#item-header .generic-button i::before {
  font-family: 'bb-icons-rl', bb-icons-rl !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1 !important;
  display: inline-block !important;
}


/* ==========================================================================
   Camera & Media Icons (Profile Avatar & Cover Image Upload)
   Explicitly map to ReadyLaunch Camera glyph (\e10e) to prevent palm tree (\e91a)
   ========================================================================== */
.link-change-profile-image i,
.link-change-cover-image i,
.position-change-cover-image i {
  font-family: 'bb-icons-rl', bb-icons-rl !important;
}
.link-change-profile-image i::before,
#item-header-avatar .link-change-profile-image i::before,
#item-header-avatar a.link-change-profile-image i::before,
.link-change-cover-image i::before,
#item-header-cover-image .link-change-cover-image i::before,
#item-header .link-change-profile-image i::before,
#item-header .link-change-cover-image i::before,
#buddypress .link-change-profile-image i::before,
#buddypress .link-change-cover-image i::before,
#item-header .bb-icon-camera::before,
#item-header i.bb-icon-camera::before,
#buddypress #item-header .bb-icon-camera::before,
.bb-icon-camera::before,
i.bb-icon-camera::before {
  font-family: 'bb-icons-rl', bb-icons-rl !important;
  content: "\e10e" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  display: inline-block !important;
}

/* Reposition Cover Photo Action Icon (\e0a4 = 4-way arrows) */
.position-change-cover-image i::before,
#item-header-cover-image .position-change-cover-image i::before,
#item-header .position-change-cover-image i::before,
#buddypress .position-change-cover-image i::before,
#item-header .bb-icon-arrows::before,
#item-header i.bb-icon-arrows::before,
#buddypress #item-header .bb-icon-arrows::before,
.bb-icon-arrows::before,
i.bb-icon-arrows::before {
  font-family: 'bb-icons-rl', bb-icons-rl !important;
  content: "\e0a4" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  display: inline-block !important;
}

/* 1. Not Friend (normal): \e3d4 */
.member-header-actions .friendship-button.not_friends i::before,
.member-header-actions button.not_friends i::before,
.member-header-actions .not_friends i::before,
#item-header .friendship-button.not_friends i::before,
#item-header button.not_friends i::before,
#item-header [data-bp-btn-action="not_friends"] i::before {
  content: "\e3d4" !important;
}

/* 2. Request Sent / Pending: \eafa */
.member-header-actions .friendship-button.pending_friend i::before,
.member-header-actions button.pending_friend i::before,
.member-header-actions .pending_friend i::before,
.member-header-actions .friendship-button.requested i::before,
.member-header-actions [data-bp-btn-action="pending"] i::before,
#item-header .friendship-button.pending_friend i::before,
#item-header button.pending_friend i::before,
#item-header .friendship-button.requested i::before,
#item-header [data-bp-btn-action="pending"] i::before {
  content: "\eafa" !important;
}

/* 3. Is Friend: \eafa */
.member-header-actions .friendship-button.is_friend i::before,
.member-header-actions button.is_friend i::before,
.member-header-actions .is_friend i::before,
#item-header .friendship-button.is_friend i::before,
#item-header [data-bp-btn-action="is_friend"] i::before {
  content: "\eafa" !important;
}

/* 4. Send Message: \e16e */
.member-header-actions .send-message i::before,
.member-header-actions .message-button i::before,
.member-header-actions a.send-message i::before,
.member-header-actions button.send-message i::before,
#item-header .send-message i::before,
#item-header a.send-message i::before,
#item-header [data-bp-btn-action="send-message"] i::before {
  content: "\e16e" !important;
}

/* 5. Loading State & Spinner during cancel / action */
.member-header-actions button.loading,
.member-header-actions a.loading,
.member-header-actions .generic-button button.loading,
.member-header-actions .generic-button a.loading,
#item-header .member-header-actions .loading {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 32px !important;
  height: 32px !important;
  max-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  background: #444446 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.member-header-actions button.loading i::before,
.member-header-actions a.loading i::before,
.member-header-actions .loading i::before,
#item-header .member-header-actions .loading i::before {
  content: "" !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  height: 14px !important;
  width: 14px !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: bbSpin 0.8s linear infinite !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* More Options (Three dots at top-right) - right: 0 !important */
.member-header-more-actions,
#item-header-cover-image .bb_more_options,
.item-header-profile-row .member-header-more-actions,
#buddypress #cover-image-container .member-header-more-actions {
  position: absolute !important;
  top: 16px !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 30 !important;
}
.member-header-more-actions .bb_more_dropdown,
.member-header-more-actions .bb_more_options_list {
  right: 0 !important;
  left: auto !important;
}
#item-header-cover-image .bb_more_options .bb_more_options_action {
  color: #71717a !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
#item-header-cover-image .bb_more_options .bb_more_options_action:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   Primary Navigation (#object-nav) — Native BuddyBoss Selectors
   ========================================================================== */
#object-nav {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
#object-nav ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
}
#object-nav ul li,
#object-nav ul li.current,
#object-nav ul li.selected,
#object-nav ul li.loading {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}
#object-nav ul li::before,
#object-nav ul li::after,
#object-nav ul li.loading::before,
#object-nav ul li.loading::after {
  display: none !important;
}
#object-nav ul li a {
  color: #a1a1aa !important;
  background: transparent !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 7px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  box-shadow: none !important;
}
#object-nav ul li a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: none !important;
}
#object-nav ul li.current a,
#object-nav ul li.selected a {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Counts / badges */
#object-nav .count,
#subnav .count {
  background: var(--gat-surface-hover) !important;
  color: #d4d4d8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  margin-left: 6px !important;
}

/* ==========================================================================
   Secondary Navigation (#subnav) — NO GLOW! Clean Dark Matte
   ========================================================================== */
#subnav,
.item-list-tabs#subnav,
nav#subnav {
  background-color: var(--gat-surface) !important;
  border: 1px solid var(--gat-border) !important;
  border-radius: var(--gat-radius) !important;
  padding: 6px 8px !important;
  margin: 16px 0 24px 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}
#subnav:empty,
.item-list-tabs#subnav:empty,
nav#subnav:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
#subnav ul,
#subnav ul.subnav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
  box-shadow: none !important;
}
#subnav ul.subnav li {
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
#subnav ul.subnav li a {
  color: var(--gat-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
  outline: none !important;
}
#subnav ul.subnav li a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: none !important;
}

/* Active tab: etwas heller, runder, kein Rahmen */
#subnav ul.subnav li.current a,
#subnav ul.subnav li.selected a {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Submenu Dropdowns (if present) */
#object-nav ul li ul,
#object-nav ul.sub-menu,
.item-header-nav-row .sub-menu {
  background: #1c1c1e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
#object-nav ul li ul li a,
#object-nav ul.sub-menu li a,
.item-header-nav-row .sub-menu li a {
  border: none !important;
  border-radius: 20px !important;
  padding: 7px 16px !important;
}
#object-nav ul li ul li a:hover,
#object-nav ul.sub-menu li a:hover,
.item-header-nav-row .sub-menu li a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border: none !important;
  color: #ffffff !important;
}
#object-nav ul li ul li.current a,
#object-nav ul li ul li.selected a,
#object-nav ul.sub-menu li.current a,
#object-nav ul.sub-menu li.selected a {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Profile Details Table & Widgets (Fixed White Bleed & Generous Spacing)
   ========================================================================== */

/* Section title ("Profilansicht") */
.screen-heading.view-profile-screen {
  color: var(--gat-text-dim) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 36px 0 14px 4px !important;
  display: block !important;
}

/* Card Container */
.bp-widget {
  background-color: var(--gat-surface) !important;
  border: 1px solid var(--gat-border) !important;
  border-radius: var(--gat-radius-lg) !important;
  padding: 0 !important;
  overflow: hidden !important;
  margin-bottom: 32px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Group header ("Details") */
.bp-widget .profile-widget-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--gat-border) !important;
  padding: 14px 24px !important;
}
.bp-widget h3.profile-group-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
.bp-widget h3.profile-group-title i {
  color: var(--gat-text-dim) !important;
  font-size: 16px !important;
}
.gat-edit-profile-trigger {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--gat-text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.gat-edit-profile-trigger:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

/* Modern Profile Field Cards (No Ugly Tables!) */
.gat-profile-fields-list {
  padding: 6px 24px 16px 24px !important;
  display: flex !important;
  flex-direction: column !important;
}
.gat-field-card {
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}
.gat-field-card:last-child {
  border-bottom: none !important;
}
.gat-field-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}
.gat-field-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gat-text-dim) !important;
}
.gat-field-edit-btn {
  background: transparent !important;
  border: none !important;
  color: var(--gat-text-dim) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  opacity: 0.4 !important;
  transition: all 0.15s ease !important;
}
.gat-field-card:hover .gat-field-edit-btn {
  opacity: 1 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.gat-field-content {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  line-height: 1.6 !important;
  word-break: break-word !important;
}
.gat-field-content p {
  margin: 0 0 6px 0 !important;
  color: #e4e4e7 !important;
}
.gat-field-content p:last-child {
  margin-bottom: 0 !important;
}

/* Inline In-Place Edit Mode */
.gat-profile-edit-wrap {
  padding: 24px !important;
  background: var(--bg-surface, #121216) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.gat-edit-fields-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.gat-edit-field-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.gat-edit-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gat-text-dim) !important;
}
.gat-edit-label .required {
  color: #ef4444 !important;
  margin-left: 4px !important;
}
.gat-edit-input-wrap input[type="text"],
.gat-edit-input-wrap input[type="email"],
.gat-edit-input-wrap input[type="url"],
.gat-edit-input-wrap textarea,
.gat-edit-input-wrap select {
  background: #D0D4E04D !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}
.gat-edit-input-wrap textarea {
  min-height: 100px !important;
  line-height: 1.5 !important;
}
.gat-edit-input-wrap input:focus,
.gat-edit-input-wrap textarea:focus,
.gat-edit-input-wrap select:focus {
  border-color: #FFFFFF66 !important;
  outline: none !important;
  background: #D0D4E04D !important;
  color: #F0F2F5 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}
.gat-edit-actions-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.gat-edit-actions-bar button.primary {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 9px 22px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.gat-edit-actions-bar button.primary:hover {
  background: #e4e4e7 !important;
}
.gat-edit-actions-bar button.outline {
  background: transparent !important;
  color: var(--gat-text-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 9px 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.gat-edit-actions-bar button.outline:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Hide legacy subnav links */
#subnav li#public-personal-li,
#subnav li#edit-personal-li,
#subnav li#change-avatar-personal-li,
#subnav li#change-cover-image-personal-li {
  display: none !important;
}


/* ==========================================================================
   Dark In-Place Modal (Strictly Hidden by Default!)
   ========================================================================== */
.bb-custom-modal.bb-action-popup {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}
.bb-custom-modal.bb-action-popup.is-active {
  display: flex !important;
}

/* Safety: Never display navigation bars inside any modal */
.bb-custom-modal #object-nav,
.bb-custom-modal #subnav,
.bb-custom-modal .item-list-tabs,
.bb-custom-modal .screen-heading,
.bb-custom-modal nav {
  display: none !important;
}
.bb-custom-modal .modal-mask,
.bbm-model-wrap.modal-mask,
.modal-mask {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bb-custom-modal .modal-wrapper {
  width: 100% !important;
  max-width: 680px !important;
  padding: 16px !important;
  position: relative !important;
  z-index: 10 !important;
}
.bb-custom-modal .modal-container {
  background: var(--gat-surface-card) !important;
  border: 1px solid var(--gat-border-strong) !important;
  border-radius: var(--gat-radius-lg) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9) !important;
  overflow: hidden !important;
  color: var(--gat-text-main) !important;
  padding: 0 !important;
}
.bb-custom-modal .bb-model-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px 14px 0 0 !important;
  width: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.bb-custom-modal .bb-model-header h4 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}
/* Modal close button: consolidated globally in Section 35 */
.bb-custom-modal .bb-action-popup-content {
  background-color: var(--gat-surface);
  /*padding: 16px 20px 20px 20px !important;*/
  padding: 20px 0 20px 0 !important;
  max-height: 88vh !important;
  overflow-y: hidden !important;
  margin: 0 !important;
}

/* Modal Iframe Styles */
.bb-modal-iframe {
  width: 100% !important;
  min-height: 440px !important;
  height: 440px !important;
  border: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  display: block;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.bp-avatar-nav ul {
  width: 100% !important;
  margin-bottom: 0 !important;
}
#drag-drop-area {
  display: flex; 
  align-items: center;
  justify-content: center;
}
.drag-drop-inside p.drag-drop-buttons {
  margin: 0 !important;
}
#bp-delete-cover-image-container p,
#bp-delete-avatar-container p {
  font-size: 0.875rem !important;
}
.bb-modal-iframe.is-loading,
.bb-modal-iframe[style*="display: none"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.buddypress-wrap .profile,
.bb-custom-modal #item-body .profile {
  margin-top: 0 !important;
}

/* Info Icon Banner & Feedback */
.bp-feedback,
.bp-feedback.info,
p.info.bp-feedback {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px 0 !important;
}
.bp-feedback.info .bp-icon,
p.info.bp-feedback .bp-icon,
.bp-feedback .bp-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  color: #a1a1aa !important;
  font-size: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.bp-feedback.info .bp-icon:before,
p.info.bp-feedback .bp-icon:before {
  color: #a1a1aa !important;
  font-size: 16px !important;
}
.bp-feedback .bp-help-text {
  color: #d4d4d8 !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* Error Feedback & Validation Messages (.error, .bp-feedback.error) */
/* Reset outer field wrappers so they don't create a nested box */
.field_error,
.field-error,
.editfield.error,
#register-page .editfield.error,
#register-page .field_error,
#register-page .field-error,
#register-page div.field_error,
#register-page div.field-error,
.standard-form .field_error,
.standard-form .field-error,
.standard-form .editfield.error,
.editfield:has(.bp-feedback),
.field_error:has(.bp-feedback) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  display: block !important;
}
.bp-feedback.error,
#message.error,
.bp-messages.error,
.standard-form .bp-feedback.error,
.buddypress-wrap .bp-feedback.error,
#register-page .bp-feedback.error,
#register-page .field_error .bp-feedback,
#register-page .field-error .bp-feedback {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  border-radius: 8px !important;
  color: #fca5a5 !important;
  padding: 4px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 0 14px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.bp-feedback.error p,
div.error p,
.standard-form div.error p,
#register-page .error p,
#register-page .bp-feedback.error p {
  color: #fca5a5 !important;
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.4 !important;
}
.bp-feedback.error .bp-icon,
.bp-feedback.error .bp-icon:before,
.bp-feedback.error > [class*="bb-icons"],
.bp-feedback.error > [class*="bb-icons"]:before,
div.error .bp-icon,
div.error .bp-icon:before,
#register-page .error .bp-icon,
#register-page .error .bp-icon:before {
  color: #f87171 !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Warning / Dimensions Box — Sleek Dark (NO YELLOW BOX!) */
.bp-cover-image-status {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 10px 0 0 0 !important;
  box-shadow: none !important;
}
.bp-cover-image-status .warning,
.bp-cover-image-status .bp-feedback,
.bp-feedback.warning,
div.warning {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #a1a1aa !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  margin: 0 !important;
  text-align: center !important;
  box-shadow: none !important;
}
.bp-cover-image-status .warning p,
.bp-cover-image-status .bp-feedback p,
.bp-feedback.warning p {
  color: #a1a1aa !important;
  margin: 0 !important;
  font-size: 12px !important;
}
.bp-cover-image-status .warning .bp-icon,
.bp-cover-image-status .bp-feedback .bp-icon,
.bp-feedback.warning .bp-icon {
  display: none !important;
}

/* Dropzone Area — Only applied to the actual drop area */
#drag-drop-area,
.drag-drop-area,
.bb-custom-modal .drag-drop-area {
  background: var(--gat-bg) !important;
  border: 2px dashed rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  padding: 24px 16px !important;
  margin: 8px 0 !important;
  text-align: center !important;
  color: var(--gat-text-muted) !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  box-sizing: border-box !important;
}

/* Suppress phantom empty containers and dashed boxes */
.bp-avatar:empty,
.bp-avatar-status:empty,
.bp-cover-image-status:empty,
.drag-drop-area:empty,
#drag-drop-area:empty,
.bp-feedback:empty,
.bp-avatar-uploader:empty,
.bb-custom-modal .bp-avatar:empty,
.bb-custom-modal .bp-avatar-status:empty {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Hide legacy upload form in favor of modern plupload uploader */
#avatar-upload-form,
.bb-custom-modal #avatar-upload-form {
  display: none !important;
}
#drag-drop-area:hover,
.drag-drop-area:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: var(--gat-surface-hover) !important;
}
.drag-drop-info {
  color: #e4e4e7 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}
.bb-custom-modal input[type="file"] {
  color: var(--gat-text-muted) !important;
  margin: 12px 0 !important;
}
.drag-drop-buttons input.button,
.drag-drop-buttons .button,
.bb-custom-modal input[type="submit"],
.bb-custom-modal .button,
.bb-custom-modal button.button {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.drag-drop-buttons input.button:hover,
.drag-drop-buttons .button:hover,
.bb-custom-modal input[type="submit"]:hover {
  background: #e4e4e7 !important;
}
.bb-custom-modal a.button.edit,
.bb-custom-modal button#bp-delete-avatar,
.bb-custom-modal button#bp-delete-cover-image {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  margin-top: 10px !important;
}
.bb-custom-modal a.button.edit:hover,
.bb-custom-modal button#bp-delete-avatar:hover,
.bb-custom-modal button#bp-delete-cover-image:hover {
  background: rgba(239, 68, 68, 0.25) !important;
}

/* Modal Loader */
.bb-modal-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  gap: 12px;
  color: var(--gat-text-muted);
}
.bb-loader-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: bbSpin 0.8s linear infinite;
}

@keyframes bbSpin {
to { transform: rotate(360deg); }
}

/* ==========================================================================
   Activity Stream & Feed — Gothic 2.0 Dark Aesthetics
   ========================================================================== */

/* Main Activity Stream Container */
#activity-stream,
.activity-list,
ul.activity-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.bp-list {
  margin: 0 !important;
}

@media screen and (min-width: 32em) {
#activity-stream {
    padding-top: 0 !important;
  }
}

@media screen and (min-width: 46.8em) {
.activity-list.bp-list,
.activity-list {
    padding: 0 !important;
  }
.bp-list {
    margin: 0 !important;
  }
.activity-list .activity-item.mini .activity-avatar,
.activity-list .activity-item div.item-avatar {
    width: 10% !important;
  }
.activity-list .activity-item.mini .activity-avatar {
    margin-left: 0 !important;
  }
.bp-list li .action div.generic-button {
    margin: 0 !important;
  }
}

/* Activity Post Form / Placeholder ("Share what's on your mind...") */
#bp-nouveau-activity-form-placeholder {
  display: none !important;
}
#bp-nouveau-activity-form-placeholder:has(~ #bp-nouveau-activity-form.modal-popup) {
  display: block !important;
  height: 78px !important;
  margin: 0 0 24px 0 !important;
  visibility: hidden !important;
}

/* In-page Activity Form Card (when NOT modal-popup) */
#bp-nouveau-activity-form:not(.modal-popup),
.activity-update-form:not(.modal-popup) {
  display: block !important;
  background: var(--gat-surface, #121216) !important;
  border: 1px solid var(--gat-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--gat-text-main) !important;
  padding: 16px 20px !important;
  margin: 0 0 24px 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: none !important;
}

/* Remove nested duplicate cards / borders / paddings inside in-page form */
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-form,
.activity-update-form:not(.modal-popup) #whats-new-form,
.activity-update-form:not(.modal-popup) #whats-new-form-placeholder {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Flex Row Header: Avatar on left, input box on right — STATIC, NEVER MOVES ON FOCUS/CLICK */
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-form-header,
.activity-update-form:not(.modal-popup) .whats-new-form-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
}

/* User Status & Avatar in in-page form */
#bp-nouveau-activity-form:not(.modal-popup) #user-status-huddle,
.activity-update-form:not(.modal-popup) #user-status-huddle {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
#bp-nouveau-activity-form:not(.modal-popup) .avatar,
.activity-update-form:not(.modal-popup) .avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  object-fit: cover !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Hide username, privacy, and extra meta in the resting in-page state */
#bp-nouveau-activity-form:not(.modal-popup) .user-name,
.activity-update-form:not(.modal-popup) .user-name,
#bp-nouveau-activity-form:not(.modal-popup) #bp-activity-privacy,
.activity-update-form:not(.modal-popup) #bp-activity-privacy,
#bp-nouveau-activity-form:not(.modal-popup) #bp-activity-privacy-point,
.activity-update-form:not(.modal-popup) #bp-activity-privacy-point {
  display: none !important;
}

/* Input Area Container in in-page form */
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-content,
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-textarea,
.activity-update-form:not(.modal-popup) #whats-new-content,
.activity-update-form:not(.modal-popup) #whats-new-textarea {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* The sleek single input field / placeholder — FROZEN AT 44PX REGARDLESS OF FOCUS/HOVER/CLICK */
#bp-nouveau-activity-form:not(.modal-popup) #whats-new,
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-placeholder,
.activity-update-form:not(.modal-popup) #whats-new,
.activity-update-form:not(.modal-popup) .whats-new-placeholder {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  color: var(--gat-text-muted, #a1a1aa) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  outline: none !important;
  resize: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
#bp-nouveau-activity-form:not(.modal-popup) #whats-new:hover,
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-placeholder:hover,
.activity-update-form:not(.modal-popup) #whats-new:hover,
.activity-update-form:not(.modal-popup) .whats-new-placeholder:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}
#bp-nouveau-activity-form:not(.modal-popup) #whats-new::placeholder,
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-placeholder::placeholder,
.activity-update-form:not(.modal-popup) #whats-new::placeholder,
.activity-update-form:not(.modal-popup) .whats-new-placeholder::placeholder {
  color: var(--gat-text-dim, #71717a) !important;
}

/* Permanently hide all modal elements (Header, "Create a post", "X" close button, Title, Toolbars, Footer) on the resting in-page form */
#bp-nouveau-activity-form:not(.modal-popup) .bb-model-header,
.activity-update-form:not(.modal-popup) .bb-model-header,
#bp-nouveau-activity-form:not(.modal-popup) .bb-model-close-button,
.activity-update-form:not(.modal-popup) .bb-model-close-button,
#bp-nouveau-activity-form:not(.modal-popup) .bb-icon-close,
.activity-update-form:not(.modal-popup) .bb-icon-close,
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-title,
.activity-update-form:not(.modal-popup) .whats-new-title,
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-toolbar,
.activity-update-form:not(.modal-popup) #whats-new-toolbar,
#bp-nouveau-activity-form:not(.modal-popup) #editor-toolbar,
.activity-update-form:not(.modal-popup) #editor-toolbar,
#bp-nouveau-activity-form:not(.modal-popup) #whats-new-attachments,
.activity-update-form:not(.modal-popup) #whats-new-attachments,
#bp-nouveau-activity-form:not(.modal-popup) .whats-new-form-footer,
.activity-update-form:not(.modal-popup) .whats-new-form-footer,
#bp-nouveau-activity-form:not(.modal-popup) #activity-form-submit-wrapper,
.activity-update-form:not(.modal-popup) #activity-form-submit-wrapper,
#bp-nouveau-activity-form:not(.modal-popup) .medium-editor-toolbar,
.activity-update-form:not(.modal-popup) .medium-editor-toolbar,
#bp-nouveau-activity-form-placeholder .bb-model-header,
#bp-nouveau-activity-form-placeholder .bb-model-close-button,
#bp-nouveau-activity-form-placeholder .bb-icon-close,
#bp-nouveau-activity-form-placeholder .whats-new-title,
#bp-nouveau-activity-form-placeholder #whats-new-toolbar,
#bp-nouveau-activity-form-placeholder #editor-toolbar,
#bp-nouveau-activity-form-placeholder .whats-new-form-footer {
  display: none !important;
}

/* ==========================================================================
   Activity Post Form — Modal Dialog ("Create a post" popup)
   Gothic 2.0 Dark Aesthetics: Compact centered card (NOT full-screen)
   ========================================================================== */

/* Outer Backdrop Overlay */
.activity-update-form.modal-popup,
#bp-nouveau-activity-form.modal-popup,
#bp-nouveau-activity-form-placeholder.modal-popup,
.bp-nouveau-activity-form-placeholder.modal-popup,
.bp-nouveau-activity-form-placeholder-.modal-popup,
.modal-popup {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

/* Modal Window Card: Clean ~580px width, NOT full screen! */
.activity-update-form.modal-popup #whats-new-form,
#bp-nouveau-activity-form.modal-popup #whats-new-form,
#bp-nouveau-activity-form-placeholder.modal-popup #whats-new-form,
.bp-nouveau-activity-form-placeholder.modal-popup #whats-new-form,
.bp-nouveau-activity-form-placeholder-.modal-popup #whats-new-form,
.modal-popup #whats-new-form {
  position: relative !important;
  width: 580px !important;
  max-width: min(580px, 94vw) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: 90vh !important;
  background: #1c1c1f !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.95) !important;
  padding: 0 !important;
  margin: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Modal Header: Clean bar with "Create a post" and close button */
.modal-popup .bb-model-header,
.activity-update-form.modal-popup .bb-model-header,
#bp-nouveau-activity-form.modal-popup .bb-model-header,
.modal-popup #whats-new-form .bb-model-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
}
.modal-popup .bb-model-header h3,
.modal-popup .bb-model-header h4,
.modal-popup .bb-model-header .activity-header-data {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  display: block !important;
}
.modal-popup .bb-model-header .bb-modal-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
}
/* Modal close button: consolidated globally in Section 35 */

/* User Status & Avatar Header in Modal */
.modal-popup .whats-new-form-header,
.activity-update-form.modal-popup .whats-new-form-header,
#bp-nouveau-activity-form.modal-popup .whats-new-form-header,
.modal-popup #whats-new-form .whats-new-form-header {
  display: block !important;
  padding: 14px 20px 14px 20px !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* User Status Huddle (Avatar on left, Username and Privacy Pill stacked on right) */
.modal-popup #user-status-huddle,
.activity-update-form.modal-popup #user-status-huddle,
#bp-nouveau-activity-form.modal-popup #user-status-huddle {
  display: grid !important;
  grid-template-columns: 42px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 3px !important;
  align-items: center !important;
  padding: 0 !important;
  padding-bottom: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.modal-popup #user-status-huddle .activity-post-name-status,
.activity-update-form.modal-popup .activity-post-name-status {
  display: contents !important;
}

/* Col 1: Avatar Container (Spans both rows next to name and pill) */
.modal-popup #whats-new-avatar,
.modal-popup .activity-post-avatar-container,
.modal-popup #user-status-huddle > .activity-post-avatar,
.activity-update-form.modal-popup #user-status-huddle > .activity-post-avatar {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.modal-popup #whats-new-avatar a,
.modal-popup .activity-post-avatar-container a,
.modal-popup #whats-new-avatar img,
.modal-popup .activity-post-avatar-container img,
.modal-popup #user-status-huddle .activity-post-avatar img,
.modal-popup .whats-new-form-header .avatar,
.activity-update-form.modal-popup .avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Col 2, Row 1: Username */
.modal-popup #whats-new-heading,
.modal-popup .activity-post-user-name-container,
.activity-update-form.modal-popup .activity-post-user-name-container {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: auto !important;
}
.modal-popup #user-status-huddle .user-name,
.modal-popup .activity-post-user-name,
.activity-update-form.modal-popup .user-name {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Col 2, Row 2: Visibility / Privacy Pill button directly under name */
.modal-popup #whats-new-status,
.modal-popup #bp-activity-privacy,
.activity-update-form.modal-popup #whats-new-status,
.activity-update-form.modal-popup #bp-activity-privacy {
  grid-column: 2 !important;
  grid-row: 2 !important;
  order: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  width: fit-content !important;
  position: relative !important;
}
.modal-popup #bp-activity-privacy-point,
.modal-popup .privacy-toggle,
.modal-popup .activity-privacy a,
.activity-update-form.modal-popup #bp-activity-privacy-point {
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  color: #f4f4f5 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  outline: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}
.modal-popup #bp-activity-privacy-point:hover,
.modal-popup .privacy-toggle:hover,
.modal-popup .activity-privacy a:hover,
.activity-update-form.modal-popup #bp-activity-privacy-point:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.modal-popup #bp-activity-privacy-point .privacy-point-icon:before {
  color: #ffffff !important;
  font-size: 13px !important;
  margin-right: 2px !important;
}
.modal-popup #bp-activity-privacy-point .bp-activity-privacy-status {
  color: #f4f4f5 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.modal-popup #bp-activity-privacy-point .bb-icon-caret-down,
.modal-popup #bp-activity-privacy-point i {
  color: #a1a1aa !important;
  font-size: 11px !important;
  margin-left: 2px !important;
}

/* Content (Title + Textarea) Full Width */
.modal-popup #whats-new-content,
.activity-update-form.modal-popup #whats-new-content {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Post Title Input (optional title) — Clean line-separated row matching reference screenshot */
.modal-popup .whats-new-title,
.modal-popup input.whats-new-title,
.modal-popup #whats-new-title,
.activity-update-form.modal-popup .whats-new-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 12px 20px 12px 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease !important;
}
.modal-popup .whats-new-title:focus,
.modal-popup input.whats-new-title:focus,
.modal-popup #whats-new-title:focus {
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.modal-popup .whats-new-title::placeholder,
.modal-popup input.whats-new-title::placeholder,
.modal-popup #whats-new-title::placeholder {
  color: #71717a !important;
  font-weight: 400 !important;
}

/* Scroll View in Modal — clean seamless wrapper */
.modal-popup .whats-new-scroll-view,
.activity-update-form.modal-popup .whats-new-scroll-view {
  padding: 0 !important;
  max-height: 480px !important;
  min-height: auto !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
}
.modal-popup #whats-new-content,
.modal-popup #whats-new-textarea,
.activity-update-form.modal-popup #whats-new-content,
.activity-update-form.modal-popup #whats-new-textarea {
  width: 100% !important;
  min-height: 120px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* The clearly visible input area container — seamless, borderless on dark card */
.modal-popup #whats-new,
.modal-popup .medium-editor-element,
.activity-update-form.modal-popup #whats-new {
  display: block !important;
  width: 100% !important;
  min-height: 130px !important;
  max-height: 280px !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 20px 16px 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
  color: #f4f4f5 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  position: relative !important;
  cursor: text !important;
  resize: vertical !important;
  white-space: normal !important;
  text-overflow: unset !important;
}
.modal-popup #whats-new:focus,
.modal-popup .medium-editor-element:focus,
.activity-update-form.modal-popup #whats-new:focus {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Placeholder for MediumEditor & contenteditable in modal */
.modal-popup .medium-editor-placeholder:after,
.modal-popup .medium-editor-element[data-placeholder]:empty:before,
.modal-popup #whats-new:empty:before,
.modal-popup #whats-new[placeholder]:empty:before,
.activity-update-form.modal-popup #whats-new:empty:before {
  content: attr(data-placeholder) !important;
  color: #71717a !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  pointer-events: none !important;
}
.modal-popup #whats-new:not([data-placeholder]):empty:before,
.activity-update-form.modal-popup #whats-new:not([data-placeholder]):empty:before {
  content: "Worüber möchtest du sprechen?" !important;
  color: #8e8e93 !important;
}

/* Toolbar & Icons — hide default media buttons in post modal */
.modal-popup #whats-new-toolbar,
.activity-update-form.modal-popup #whats-new-toolbar {
  display: none !important;
}

/* Editor Toolbar Container (holds formatting strip and Aa button) */
.modal-popup #editor-toolbar,
.activity-update-form.modal-popup #editor-toolbar {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  position: static !important;
  box-sizing: border-box !important;
}

/* Aa Button (Show/Hide formatting): Hidden per user request — formatting is permanently visible */
.modal-popup #editor-toolbar .show-toolbar,
.modal-popup .show-toolbar,
.activity-update-form.modal-popup #editor-toolbar .show-toolbar,
.modal-popup #show-toolbar-button,
.activity-update-form.modal-popup #show-toolbar-button,
.modal-popup .show-toolbar a,
#editor-toolbar .show-toolbar,
#show-toolbar-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tooltip for Aa Button ("Hide formatting" / "Show formatting") */
.modal-popup .show-toolbar[data-bp-tooltip]:after,
.modal-popup #show-toolbar-button[data-bp-tooltip]:after {
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  white-space: nowrap !important;
}
.modal-popup .show-toolbar[data-bp-tooltip]:before,
.modal-popup #show-toolbar-button[data-bp-tooltip]:before {
  border-top-color: #000000 !important;
}

/* Mention item (@ button) inside toolbar - REMOVED */
.modal-popup #editor-toolbar .post-mention,
.modal-popup .post-mention,
#editor-toolbar .post-mention,
.post-elements-buttons-item.post-mention {
  display: none !important;
}
.modal-popup #editor-toolbar .post-emoji {
  display: none !important;
}

/* ==========================================================================
   MediumEditor Formatting Toolbar (B, I, U, Lists, Quote, Code, Headings)
   ========================================================================== */

/* The Toolbar Container */
.medium-editor-toolbar,
.medium-editor-toolbar-1,
#medium-editor-toolbar-1,
div[id^="medium-editor-toolbar-"],
.activity-update-form .medium-editor-toolbar,
#editor-toolbar .medium-editor-toolbar,
.modal-popup .medium-editor-toolbar,
.modal-popup .medium-editor-toolbar-1,
.modal-popup #medium-editor-toolbar-1,
.modal-popup div[id^="medium-editor-toolbar-"] {
  max-width: 100% !important;
  border-radius: 0 !important;
  background: var(--bg-surface) !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  position: static !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Explicit rule requested for .medium-editor-toolbar-1 */
.medium-editor-toolbar-1,
#medium-editor-toolbar-1,
.modal-popup .medium-editor-toolbar-1,
.modal-popup #medium-editor-toolbar-1 {
  max-width: 100% !important;
  border-radius: 0 !important;
  background: var(--bg-surface) !important;
}

/* Hidden ONLY when outside of modal (resting in-page state) */
#bp-nouveau-activity-form:not(.modal-popup) .medium-editor-toolbar,
.activity-update-form:not(.modal-popup) .medium-editor-toolbar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Formatting Toolbar is PERMANENTLY visible in Create Post Modal */
.modal-popup .medium-editor-toolbar,
.modal-popup .medium-editor-toolbar-1,
.modal-popup #medium-editor-toolbar-1,
.modal-popup [id^="medium-editor-toolbar-"],
.activity-update-form.modal-popup .medium-editor-toolbar,
.activity-update-form.modal-popup .medium-editor-toolbar-1,
#whats-new-form.modal-popup .medium-editor-toolbar,
#whats-new-form.modal-popup .medium-editor-toolbar-1,
#bp-nouveau-activity-form.modal-popup .medium-editor-toolbar,
#bp-nouveau-activity-form.modal-popup .medium-editor-toolbar-1,
.modal-popup #editor-toolbar .medium-editor-toolbar,
.modal-popup #editor-toolbar .medium-editor-toolbar-1,
.medium-editor-toolbar.active,
.medium-editor-toolbar.medium-editor-toolbar-active,
.medium-editor-toolbar-1.active,
#editor-toolbar .medium-editor-toolbar.active {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 8px 20px 10px 20px !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: static !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Actions list wrapper — clean inline items without outer bubble */
.medium-editor-toolbar .medium-editor-toolbar-actions,
.activity-update-form .medium-editor-toolbar .medium-editor-toolbar-actions,
#editor-toolbar .medium-editor-toolbar .medium-editor-toolbar-actions,
.modal-popup .medium-editor-toolbar .medium-editor-toolbar-actions {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  background: #1c1c22 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  margin: 0 !important;
  list-style: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* List items (li) — MUST be clickable and visible */
.medium-editor-toolbar .medium-editor-toolbar-actions li,
.activity-update-form .medium-editor-toolbar .medium-editor-toolbar-actions li,
#editor-toolbar .medium-editor-toolbar .medium-editor-toolbar-actions li,
.modal-popup .medium-editor-toolbar .medium-editor-toolbar-actions li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  list-style: none !important;
}

/* Formatting action buttons — hide raw text, keep fixed size */
.medium-editor-toolbar .medium-editor-toolbar-actions button,
.medium-editor-toolbar .medium-editor-action,
.activity-update-form .medium-editor-toolbar .medium-editor-toolbar-actions button,
#editor-toolbar .medium-editor-toolbar .medium-editor-toolbar-actions button,
.modal-popup .medium-editor-toolbar .medium-editor-toolbar-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: all 0.12s ease !important;
  outline: none !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Hover effect */
.medium-editor-toolbar .medium-editor-toolbar-actions button:hover,
.medium-editor-toolbar .medium-editor-action:hover,
.activity-update-form .medium-editor-toolbar .medium-editor-toolbar-actions button:hover,
#editor-toolbar .medium-editor-toolbar .medium-editor-toolbar-actions button:hover,
.modal-popup .medium-editor-toolbar .medium-editor-toolbar-actions button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: none !important;
}

/* Active / Toggled button (e.g. bold active) */
.medium-editor-toolbar .medium-editor-toolbar-actions button.medium-editor-button-active,
.medium-editor-toolbar .medium-editor-toolbar-actions button:active,
.medium-editor-toolbar .medium-editor-action.active,
.activity-update-form .medium-editor-toolbar .medium-editor-toolbar-actions button.medium-editor-button-active {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Inner <b> tag: font-size 0 to completely eliminate duplicate raw text */
.medium-editor-toolbar .medium-editor-action b,
.medium-editor-toolbar .medium-editor-toolbar-actions button b {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Crisp clean icon from :before */
.medium-editor-toolbar .medium-editor-action b:before,
.medium-editor-toolbar .medium-editor-toolbar-actions button b:before {
  color: #d4d4d8 !important;
  font-family: bb-icons !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  font-style: normal !important;
  font-weight: normal !important;
}
.medium-editor-toolbar .medium-editor-toolbar-actions button:hover b:before,
.medium-editor-toolbar .medium-editor-toolbar-actions button.medium-editor-button-active b:before {
  color: #ffffff !important;
}

/* Heading H3 and H4 indicators */
.medium-editor-toolbar .medium-editor-action-h3:after,
.medium-editor-toolbar .medium-editor-action-h4:after {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #d4d4d8 !important;
  position: absolute !important;
  right: 4px !important;
  top: 6px !important;
  visibility: visible !important;
  display: inline-block !important;
}
.medium-editor-toolbar .medium-editor-action-h3:hover:after,
.medium-editor-toolbar .medium-editor-action-h4:hover:after,
.medium-editor-toolbar .medium-editor-action-h3.medium-editor-button-active:after,
.medium-editor-toolbar .medium-editor-action-h4.medium-editor-button-active:after {
  color: #ffffff !important;
}

/* Show formatting (Aa) button when active */
.modal-popup #editor-toolbar #show-toolbar-button.active,
.activity-update-form.modal-popup #editor-toolbar #show-toolbar-button.active,
#editor-toolbar .post-elements-buttons-item.show-toolbar a.active {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

/* More Actions Dropdown (H3 / H4 submenu) */
.activity-update-form .medium-editor-toolbar .medium-editor-action-more>ul,
.medium-editor-toolbar .medium-editor-action-more>ul {
  background: #1c1c22 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  padding: 4px !important;
  gap: 4px !important;
}
.activity-update-form .medium-editor-toolbar .medium-editor-action-more>ul:after,
.medium-editor-toolbar .medium-editor-action-more>ul:after {
  border-color: transparent transparent #1c1c22 #1c1c22 !important;
}

/* Link input form popup inside medium editor — ONLY shown when actively inserting link */
.medium-editor-toolbar-form:not(.medium-editor-toolbar-form-active),
.activity-update-form .medium-editor-toolbar .medium-editor-toolbar-form:not(.medium-editor-toolbar-form-active),
.modal-popup .medium-editor-toolbar .medium-editor-toolbar-form:not(.medium-editor-toolbar-form-active) {
  display: none !important;
}
.medium-editor-toolbar-form.medium-editor-toolbar-form-active,
.medium-editor-toolbar-form .medium-editor-toolbar-form-active,
.medium-editor-toolbar-form-active,
.activity-update-form .medium-editor-toolbar .medium-editor-toolbar-form.medium-editor-toolbar-form-active,
.modal-popup .medium-editor-toolbar .medium-editor-toolbar-form.medium-editor-toolbar-form-active {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  box-shadow: none !important;
  background: #242427 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  padding: 4px 6px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}
.medium-editor-toolbar-form .medium-editor-toolbar-input,
.activity-update-form .medium-editor-toolbar .medium-editor-toolbar-form .medium-editor-toolbar-input {
  background: #141418 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  outline: none !important;
  height: 28px !important;
  box-sizing: border-box !important;
  min-width: 170px !important;
}
.medium-editor-toolbar-form a,
.activity-update-form .medium-editor-toolbar .medium-editor-toolbar-form a,
.medium-editor-toolbar-form a.medium-editor-toolbar-save,
.medium-editor-toolbar-form a.medium-editor-toolbar-close,
.medium-editor-toolbar-form a[data-action="save"],
.medium-editor-toolbar-form a[data-action="close"],
.medium-editor-toolbar-save,
.medium-editor-toolbar-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: all 0.12s ease !important;
}
.medium-editor-toolbar-form a.medium-editor-toolbar-save,
.medium-editor-toolbar-form a[data-action="save"],
.medium-editor-toolbar-save {
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}
.medium-editor-toolbar-form a.medium-editor-toolbar-save:hover,
.medium-editor-toolbar-form a[data-action="save"]:hover,
.medium-editor-toolbar-save:hover {
  background: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
  transform: none !important;
  -webkit-transform: none !important;
}
.medium-editor-toolbar-form a.medium-editor-toolbar-close,
.medium-editor-toolbar-form a[data-action="close"],
.medium-editor-toolbar-close {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #a1a1aa !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}
.medium-editor-toolbar-form a.medium-editor-toolbar-close:hover,
.medium-editor-toolbar-form a[data-action="close"]:hover,
.medium-editor-toolbar-close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Modal Footer — Clean inline layout matching modern post creator */
.modal-popup .whats-new-form-footer,
.activity-update-form.modal-popup .whats-new-form-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: none !important;
  padding: 12px 20px 16px 20px !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 62px !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.modal-popup #activity-form-submit-wrapper,
.activity-update-form.modal-popup #activity-form-submit-wrapper,
.modal-popup #whats-new-submit,
.modal-popup div#whats-new-submit,
.activity-update-form.modal-popup #whats-new-submit,
.modal-popup .whats-new-form-footer-right,
.modal-popup .whats-new-form-footer-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
}
.modal-popup #discard-draft-activity,
.activity-update-form.modal-popup #discard-draft-activity {
  color: #a1a1aa !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-right: 4px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  padding: 6px 10px !important;
  transition: color 0.15s ease !important;
}
.modal-popup #discard-draft-activity:hover {
  color: #ffffff !important;
}
.modal-popup #whats-new-post-in-box,
.modal-popup .whats-new-topic-selector,
.activity-update-form.modal-popup #whats-new-post-in-box {
  display: flex !important;
  align-items: center !important;
}
.modal-popup #whats-new-post-in-box select,
.activity-update-form.modal-popup #whats-new-post-in-box select {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  color: #f4f4f5 !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
  outline: none !important;
  cursor: pointer !important;
}

/* "abbrechen" Button */
.modal-popup #aw-whats-new-reset,
.activity-update-form.modal-popup #aw-whats-new-reset,
.modal-popup .bb-activity-cancel,
.modal-popup a.bb-cancel-post {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  margin: 0 !important;
}
.modal-popup #aw-whats-new-reset:hover,
.activity-update-form.modal-popup #aw-whats-new-reset:hover,
.modal-popup .bb-activity-cancel:hover,
.modal-popup a.bb-cancel-post:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

/* "veröffentlichen" Button */
.modal-popup #aw-whats-new-submit,
.activity-update-form.modal-popup input[type="submit"],
.activity-update-form.modal-popup button[type="submit"],
.activity-update-form.modal-popup #aw-whats-new-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #71717a !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin: 0 0 0 12px !important;
  opacity: 1 !important;
}
.modal-popup #aw-whats-new-submit:hover,
.activity-update-form.modal-popup input[type="submit"]:hover,
.activity-update-form.modal-popup button[type="submit"]:hover {
  background: #8e8e93 !important;
  color: #ffffff !important;
}
.modal-popup .focus-in--empty #aw-whats-new-submit,
.modal-popup #aw-whats-new-submit[disabled],
.modal-popup input[type="submit"][disabled],
.modal-popup button[type="submit"][disabled],
.activity-update-form.modal-popup .focus-in--empty #aw-whats-new-submit,
.activity-update-form.modal-popup #aw-whats-new-submit[disabled] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #71717a !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* ==========================================================================
   Activity Post Form — @ Mentions Autocomplete Popover (At.js / .atwho-view)
   Gothic 2.0 Dark Aesthetics: Compact floating popover with smaller font
   ========================================================================== */

/* Zero-Space Container Fix — ensures no extra space or scrollbar under footer */
.atwho-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.atwho-container .atwho-view {
  pointer-events: auto !important;
}
.atwho-container .atwho-view,
.atwho-view,
div[id*="atwho-ground"] {
  background: var(--gat-surface, #141418) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9) !important;
  z-index: 9999999 !important;
  padding: 4px !important;
  min-width: 200px !important;
  max-width: 320px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.atwho-view ul,
.atwho-view-ul,
.atwho-container .atwho-view ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}
.atwho-view ul li,
.atwho-view-ul li,
.atwho-container .atwho-view ul li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  margin: 1px 0 !important;
  border-radius: 6px !important;
  color: #e4e4e7 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  line-height: 1.35 !important;
  text-align: left !important;
  transition: background 0.12s ease, color 0.12s ease !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Hover & Active / Keyboard Selection */
.atwho-view ul li:hover,
.atwho-view ul li.cur,
.atwho-view ul .cur,
.atwho-view-ul li:hover,
.atwho-view-ul li.cur,
.atwho-container .atwho-view ul li:hover,
.atwho-container .atwho-view ul li.cur {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Avatar / Silhouette inside Mention item */
.atwho-view ul li img,
.atwho-view ul li .avatar,
.atwho-container .atwho-view ul li img {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  flex-shrink: 0 !important;
}
.atwho-view ul li i,
.atwho-view ul li [class*="icon"],
.atwho-view ul li .bb-icon {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  font-size: 14px !important;
  line-height: 22px !important;
  text-align: center !important;
  color: #a1a1aa !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Username */
.atwho-view ul li .username,
.atwho-view ul li strong,
.atwho-container .atwho-view ul li .username {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Handle (@user) — smaller & muted */
.atwho-view ul li small,
.atwho-container .atwho-view ul li small {
  color: #71717a !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  margin: 0 0 0 2px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.atwho-view ul li:hover small,
.atwho-view ul li.cur small,
.atwho-view ul .cur small {
  color: #a1a1aa !important;
}

/* Inserted mention pill / link */
span.atwho-inserted,
.medium-editor-element span.atwho-inserted,
#whats-new span.atwho-inserted,
a.bp-suggestions-mention {
  color: #818cf8 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

/* Privacy Stage ("Who can see your post?") — Floating Popover Dropdown matching Screenshot */
#whats-new-form:not(.focus-in--privacy) #whats-new-privacy-stage {
  display: none !important;
}
#whats-new-form.focus-in--privacy #whats-new-privacy-stage,
.modal-popup #whats-new-form.focus-in--privacy #whats-new-privacy-stage {
  display: block !important;
  position: absolute !important;
  top: 114px !important;
  left: 74px !important;
  width: 310px !important;
  max-width: 90vw !important;
  background: #27272a !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85) !important;
  z-index: 9999 !important;
  padding: 4px 0 !important;
  box-sizing: border-box !important;
}

/* Ensure editor, avatar, and footer remain visible when privacy dropdown is open */
#whats-new-form.focus-in--privacy #whats-new-avatar,
#whats-new-form.focus-in--privacy .activity-post-avatar-container,
#whats-new-form.focus-in--privacy #user-status-huddle,
#whats-new-form.focus-in--privacy #whats-new-heading,
#whats-new-form.focus-in--privacy .activity-post-user-name-container,
#whats-new-form.focus-in--privacy #bp-activity-privacy,
#whats-new-form.focus-in--privacy #whats-new-content,
#whats-new-form.focus-in--privacy .whats-new-title,
#whats-new-form.focus-in--privacy #whats-new-textarea,
#whats-new-form.focus-in--privacy #whats-new,
#whats-new-form.focus-in--privacy #editor-toolbar,
#whats-new-form.focus-in--privacy .whats-new-form-footer {
  display: block !important;
}
#whats-new-form.focus-in--privacy #user-status-huddle {
  display: grid !important;
}
#whats-new-form.focus-in--privacy .whats-new-form-footer {
  display: flex !important;
}
.privacy-status-form-body {
  padding: 0 !important;
  margin: 0 !important;
}
.bp-activity-privacy__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.bp-activity-privacy__list .bp-activity-privacy__label:last-child {
  margin-bottom: 0 !important;
}
#whats-new-privacy-stage .bp-activity-privacy__label,
.bp-activity-privacy__label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease !important;
  width: 100% !important;
}
#whats-new-privacy-stage .bp-activity-privacy__label:hover,
.bp-activity-privacy__label:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
#whats-new-privacy-stage .bp-activity-privacy__label:has(input:checked),
.bp-activity-privacy__label:has(input:checked) {
  background: rgba(255, 255, 255, 0.06) !important;
}
.bp-activity-privacy__label .privacy-tag-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
}
.bp-activity-privacy__label .privacy-figure {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #a1a1aa !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.bp-activity-privacy__label:hover .privacy-figure,
.bp-activity-privacy__label:has(input:checked) .privacy-figure {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
}
.bp-activity-privacy__label .privacy-figure:before {
  color: inherit !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.bp-activity-privacy__label .privacy-tag {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.bp-activity-privacy__label .privacy-label {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.25 !important;
}
.bp-activity-privacy__label .privacy-sub-label,
.bp-activity-privacy__label .privacy-desc,
.bp-activity-privacy__label p {
  color: #a1a1aa !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

/* Hide Radio Buttons and Footer Actions in Floating Dropdown completely */
.bp-activity-privacy__label .privacy-radio {
  display: none !important;
}
#whats-new-privacy-stage-footer,
.privacy-status-form-footer,
.privacy-status-actions {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* ==========================================================================
   Avatar Hover Info Popup (Profile & Group Card Popups)
   ========================================================================== */
#profile-card,
#group-card,
.bb-profile-card,
.bb-group-card,
.bb-popup-card,
#buddypress #profile-card,
#buddypress #group-card,
#page #profile-card,
#page #group-card,
body #profile-card,
body #group-card {
  background: #18181b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  color: #f4f4f5 !important;
  box-sizing: border-box !important;
}

/* Skeleton Loading State */
.bb-popup-card.loading {
  background: #18181b !important;
}
.bb-popup-card .bb-loading-bg,
.bb-popup-card .skeleton-card-avatar,
.bb-popup-card .skeleton-card-entity > div,
.bb-popup-card .skeleton-card-button {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
}

/* Avatar & Status indicator */
.bb-card-avatar img {
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
}
.bb-group-card .bb-card-avatar img {
  border-radius: 8px !important;
}
.bb-card-avatar .card-profile-status {
  background-color: #22c55e !important;
  border: 2px solid #18181b !important;
}

/* Heading / Username */
.bb-card-heading {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
}
.bb-card-heading a {
  color: #ffffff !important;
  text-decoration: none !important;
}
.bb-card-heading a:hover {
  color: #e4e4e7 !important;
}

/* Profile type badge */
.bb-card-profile-type {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #a1a1aa !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
}

/* Meta Information (Joined, Active, Followers, etc.) */
.bb-card-meta {
  color: #a1a1aa !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.bb-card-meta span,
.bb-card-meta .card-meta-item {
  color: #a1a1aa !important;
}
.bb-card-meta .card-meta-item::after {
  content: "•" !important;
  color: rgba(255, 255, 255, 0.25) !important;
  display: inline-block !important;
  margin-left: 6px !important;
  margin-right: 2px !important;
}
.bb-card-meta .card-meta-item:last-of-type::after {
  display: none !important;
}
.card-group-members,
.bs-group-members {
  color: #a1a1aa !important;
  font-size: 12.5px !important;
}

/* Footer & Buttons */
.bb-card-footer {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 18px 0 0 0 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.bb-card-footer .bb-card-action {
  flex: 1 1 auto !important;
}

/* Primary Button (Message, Connect, Join) */
.bb-card-action-primary .card-button,
.bb-card-action-primary a.card-button,
.bb-card-action-primary a.friendship-button,
.bb-card-action-primary .send-message,
.bb-card-action-primary .join-group,
.bb-card-action-primary a.group-button,
#buddypress .bb-card-action-primary .card-button,
body .buddypress-wrap .bb-card-action-primary .card-button {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  height: 32px !important;
  line-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}
.bb-card-action-primary .card-button:hover,
.bb-card-action-primary a.card-button:hover,
.bb-card-action-primary a.friendship-button:hover,
.bb-card-action-primary .send-message:hover,
.bb-card-action-primary .join-group:hover,
#buddypress .bb-card-action-primary .card-button:hover,
body .buddypress-wrap .bb-card-action-primary .card-button:hover {
  background: #e4e4e7 !important;
  color: #000000 !important;
}

/* Secondary Button (Follow, etc.) */
.bb-card-action-secondary .card-button,
.bb-card-action-secondary a.follow-button,
.bb-card-action-secondary button.follow-button,
#buddypress .bb-card-action-secondary .card-button,
body .buddypress-wrap .bb-card-action-secondary .card-button {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f4f4f5 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  height: 32px !important;
  line-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}
.bb-card-action-secondary .card-button:hover,
.bb-card-action-secondary a.follow-button:hover,
.bb-card-action-secondary button.follow-button:hover,
#buddypress .bb-card-action-secondary .card-button:hover,
body .buddypress-wrap .bb-card-action-secondary .card-button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Outline / View Profile Button (Profilansicht) */
.bb-card-action-outline {
  width: 100% !important;
}
.bb-card-action-outline .card-button,
.bb-card-action-outline a.card-button-profile,
.bb-card-action-outline a.card-button-group,
.card-button.card-button-profile,
.card-button.card-button-group,
#buddypress .bb-card-action-outline .card-button,
body .buddypress-wrap .bb-card-action-outline .card-button {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #e4e4e7 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
  height: 32px !important;
  line-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}
.bb-card-action-outline .card-button:hover,
.bb-card-action-outline a.card-button-profile:hover,
.bb-card-action-outline a.card-button-group:hover,
.card-button.card-button-profile:hover,
.card-button.card-button-group:hover,
#buddypress .bb-card-action-outline .card-button:hover,
body .buddypress-wrap .bb-card-action-outline .card-button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.bb-card-footer .card-button i {
  color: inherit !important;
  font-size: 14px !important;
  margin-right: 4px !important;
}

/* ==========================================================================
   Activity Head Bar (Search & Filter dropdowns)
   ========================================================================== */
.activity-head-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin: 20px 0 24px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Search trigger button (Lens icon) */
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-search {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  margin: 0 !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-search .subnav-filters-opener {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: var(--gat-text-muted, #a1a1aa) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-search .subnav-filters-opener:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-search .subnav-filters-opener i {
  font-size: 14px !important;
  color: inherit !important;
}

/* Search Dropdown / Input Modal — HIDDEN BY DEFAULT, ONLY DISPLAYED WHEN ACTIVE */
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-search:not(.active) .subnav-filters-modal,
.bb-subnav-filters-container.bb-subnav-filters-search:not(.active) .subnav-filters-modal {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-search .subnav-filters-modal,
.bb-subnav-filters-container.bb-subnav-filters-search .subnav-filters-modal {
  position: absolute !important;
  top: 44px !important;
  left: 0 !important;
  z-index: 1000 !important;
  background: var(--gat-surface, #121216) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
  padding: 8px 12px !important;
  min-width: 260px !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-search.active .subnav-filters-modal,
.bb-subnav-filters-container.bb-subnav-filters-search.active .subnav-filters-modal {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-search .subnav-filters-modal form.bp-dir-search-form input[type="search"] {
  background: var(--bg-global, #09090b) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Filter Item Container ("Show...", "by...") */
.activity-head-bar .bb-subnav-filters-container-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
.activity-head-bar .bb-subnav-filters-label {
  color: var(--gat-text-dim, #71717a) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Filter Dropdown Pill Button */
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering {
  position: relative !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-opener {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  height: 36px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-opener:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-opener span.selected {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-filtering .subnav-filters-opener i.bb-icon-angle-down {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Filter Dropdown Popups (Show & by menus) */
.activity-head-bar .bb-subnav-filters-filtering .subnav-filters-modal,
#bb-subnav-filter-show.subnav-filters-modal,
#bb-subnav-filter-by.subnav-filters-modal {
  background: var(--gat-surface, #121216) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8) !important;
  padding: 6px 0 !important;
  min-width: 190px !important;
  z-index: 1000 !important;
}
.activity-head-bar .bb-subnav-filters-filtering .subnav-filters-modal ul,
#bb-subnav-filter-show ul,
#bb-subnav-filter-by ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.activity-head-bar .bb-subnav-filters-filtering .subnav-filters-modal ul li,
#bb-subnav-filter-show ul li,
#bb-subnav-filter-by ul li {
  margin: 0 !important;
  padding: 0 !important;
}
.activity-head-bar .bb-subnav-filters-filtering .subnav-filters-modal ul li a,
#bb-subnav-filter-show ul li a,
#bb-subnav-filter-by ul li a {
  display: block !important;
  padding: 9px 16px !important;
  color: var(--gat-text-muted, #a1a1aa) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}
.activity-head-bar .bb-subnav-filters-filtering .subnav-filters-modal ul li a:hover,
.activity-head-bar .bb-subnav-filters-filtering .subnav-filters-modal ul li.selected a,
#bb-subnav-filter-show ul li.selected a,
#bb-subnav-filter-by ul li.selected a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Spinner — Positioned at the end (order: 99) so appearing/disappearing causes ZERO layout shift */
.activity-head-bar .bb-icon-loader {
  display: none !important;
  order: 99 !important;
  margin: 0 0 0 8px !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  color: var(--gat-text-muted, #a1a1aa) !important;
  line-height: 1 !important;
  align-self: center !important;
  animation: bbSpin 0.8s linear infinite !important;
  -webkit-animation: bbSpin 0.8s linear infinite !important;
}
.activity-head-bar .bb-icon-loader:before {
  font-family: 'bb-icons-rl', bb-icons-rl !important;
  content: "\e66c" !important;
  font-size: 24px !important;
  line-height: 1 !important;
  display: block !important;
}
.activity-head-bar:has(li.loading) .bb-icon-loader,
.activity-head-bar.loading .bb-icon-loader,
.activity-head-bar .loading .bb-icon-loader {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.subnav-search input[type="search"],
.subnav-search input[type="text"] {
  background: var(--gat-bg) !important;
  border: 1px solid var(--gat-border) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}

/* ==========================================================================
   Activity Feed Items — Pure Dark Gothic Cards (NO WHITE)
   ========================================================================== */
#activity-stream ul.activity-list > li.activity-item,
.activity-list > li.activity-item,
ul.activity-list > li.activity-item,
li.activity-item {
  background-color: var(--gat-surface) !important; /* #0e0e0e */
  border: 1px solid var(--gat-border) !important;
  border-radius: var(--gat-radius) !important; /* 12px */
  padding: 24px !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
  color: var(--gat-text-main) !important;
  transition: border-color 0.2s ease !important;
  position: relative !important;
}
#activity-stream ul.activity-list > li.activity-item:hover,
.activity-list > li.activity-item:hover,
li.activity-item:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Avatars in Activity — Pure Clean Circles */
.activity-list .activity-avatar img.avatar,
.activity-list .author-avatar img.avatar,
.activity-list .group-avatar img.avatar,
.activity-list .item-avatar img.avatar,
.activity-item .activity-avatar img.avatar,
.activity-avatar img.avatar {
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background-color: var(--gat-surface) !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Activity Header Layout — Name on Line 1, Date/Edited/Privacy on Line 2 (Matching Reference Design) */
.activity-list .activity-header,
.activity-header,
.activity-list .activity-group-post-meta,
.activity-group-post-meta {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  row-gap: 2px !important;
  column-gap: 0 !important;
  overflow: visible !important;
  position: relative !important;
  color: var(--gat-text-dim, #71717a) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Line 1: Action text / Username */
.activity-list .activity-header > p:first-child,
.activity-header > p:first-child,
.activity-list .activity-header .activity-head,
.activity-list .activity-group-post-meta > p:first-child {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--gat-text-muted, #a1a1aa) !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
}
.activity-list .activity-header > p:first-child a,
.activity-header > p:first-child a {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Line 2: Date + Edited + Privacy Row */
.activity-list .activity-header .activity-date,
.activity-header .activity-date {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  column-gap: 4px !important;
  margin: 0 !important;
  width: auto !important;
  color: var(--gat-text-dim, #71717a) !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}
.activity-list .activity-header .activity-date a,
.activity-header .activity-date a {
  color: var(--gat-text-dim, #71717a) !important;
  text-decoration: none !important;
}
.activity-list .activity-header .activity-date a:hover {
  color: #a1a1aa !important;
}

/* Activity Edited Indicator */
.activity-list .activity-header .bb-activity-edited-text,
.activity-list .activity-header .activity-is-edited,
.activity-list .activity-header [class*="activity-edited"],
.activity-header .bb-activity-edited-text,
.activity-header .activity-is-edited,
.bb-activity-edited-text,
.activity-is-edited,
.activity-list .activity-group-post-meta .bb-activity-edited-text,
.activity-list .activity-group-post-meta .activity-is-edited,
.activity-list .activity-group-post-meta [class*="activity-edited"] {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12.5px !important;
  color: var(--gat-text-dim, #71717a) !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Activity Meta Row (Line 2 container: Date + Edited + Privacy Icon) */
.activity-list .activity-header .activity-meta-row,
.activity-header .activity-meta-row,
.activity-meta-row {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--gat-text-dim, #71717a) !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}

/* Activity Privacy Icon / Wrap with Bullet Dot Separator */
.activity-list .activity-header .bb-media-privacy-wrap,
.activity-list .activity-header .bp-activity-privacy-info,
.activity-list .activity-header [class*="privacy-wrap"],
.activity-header .bb-media-privacy-wrap,
.bb-media-privacy-wrap,
.activity-list .activity-group-post-meta .bb-media-privacy-wrap,
.activity-list .activity-group-post-meta .bp-activity-privacy-info,
.activity-list .activity-group-post-meta [class*="privacy-wrap"] {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.activity-list .activity-header .bb-media-privacy-wrap:before,
.activity-header .bb-media-privacy-wrap:before,
.bb-media-privacy-wrap:before {
  content: "•" !important;
  color: var(--gat-text-dim, #71717a) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  margin: 0 6px 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}
.activity-list .activity-header .privacy,
.activity-list .activity-header .privacy-wrap,
.activity-list .activity-header [class*="privacy-icon"],
.activity-list .activity-header .bb-icon-lock,
.activity-list .activity-header .bb-icon-globe,
.activity-header .bb-icon-lock,
.activity-list .activity-group-post-meta .privacy,
.activity-list .activity-group-post-meta .privacy-wrap,
.activity-list .activity-group-post-meta [class*="privacy-icon"],
.activity-list .activity-group-post-meta .bb-icon-lock,
.activity-list .activity-group-post-meta .bb-icon-globe,
.bb-media-privacy-wrap .privacy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gat-text-dim, #71717a) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 20 !important;
  transition: color 0.15s ease !important;
}
.activity-list .activity-header .privacy:hover,
.activity-list .activity-header [class*="privacy-icon"]:hover,
.activity-list .activity-header .bb-icon-lock:hover,
.activity-list .activity-header .bb-icon-globe:hover,
.activity-list .activity-group-post-meta .privacy:hover,
.activity-list .activity-group-post-meta [class*="privacy-icon"]:hover,
.bb-media-privacy-wrap .privacy:hover {
  color: #ffffff !important;
}

/* Tooltip for Privacy Icon matching screenshot (Black capsule with downward beak) */
.bb-media-privacy-wrap [data-balloon]:after,
.bb-media-privacy-wrap [data-bp-tooltip]:after,
.bb-media-privacy-wrap .privacy[data-balloon]:after,
.bb-media-privacy-wrap .privacy[data-bp-tooltip]:after {
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.bb-media-privacy-wrap [data-balloon]:before,
.bb-media-privacy-wrap [data-bp-tooltip]:before,
.bb-media-privacy-wrap .privacy[data-balloon]:before,
.bb-media-privacy-wrap .privacy[data-bp-tooltip]:before {
  border-top-color: #000000 !important;
  color: #000000 !important;
}

/* Privacy Dropdown Menu in Activity Feed - HIDE BY DEFAULT */
ul.activity-privacy:not(.bb-open):not(.open),
.bb-media-privacy-wrap ul.activity-privacy:not(.bb-open):not(.open),
.bb-media-privacy-wrap .activity-privacy:not(.bb-open):not(.open),
.activity-list ul.activity-privacy:not(.bb-open):not(.open),
.activity-list .activity-header ul.activity-privacy:not(.bb-open):not(.open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Privacy Dropdown Menu in Activity Feed - SHOW VERTICALLY WHEN OPEN */
ul.activity-privacy.bb-open,
ul.activity-privacy.open,
.activity-list ul.activity-privacy.bb-open,
.activity-list ul.activity-privacy.open,
.activity-list .activity-header ul.activity-privacy.bb-open,
.activity-list .activity-header ul.activity-privacy.open,
.activity-list .activity-group-post-meta ul.activity-privacy.bb-open,
.activity-list .activity-group-post-meta ul.activity-privacy.open,
.bb-media-privacy-wrap ul.activity-privacy.bb-open,
.bb-media-privacy-wrap ul.activity-privacy.open {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: -20px !important;
  right: auto !important;
  width: 220px !important;
  min-width: 220px !important;
  background: #242427 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  z-index: 99999 !important;
  white-space: normal !important;
}

/* Upward Beak Arrow — Perfectly centered under the Privacy Icon (Lock/Globe) and matching dark theme */
ul.activity-privacy:before,
.activity-list ul.activity-privacy:before,
.activity-list .activity-header ul.activity-privacy:before,
.activity-list .activity-group-post-meta ul.activity-privacy:before,
.bb-media-privacy-wrap ul.activity-privacy:before,
.bb-media-privacy-wrap .activity-privacy:before,
.activity-privacy:before {
  content: "" !important;
  position: absolute !important;
  top: -5px !important;
  left: 36px !important;
  width: 9px !important;
  height: 9px !important;
  background: #242427 !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: none !important;
  border-bottom: none !important;
  transform: rotate(45deg) !important;
  -webkit-transform: rotate(45deg) !important;
  transform-origin: center center !important;
  -webkit-transform-origin: center center !important;
  box-shadow: none !important;
  z-index: 2 !important;
}
ul.activity-privacy:after,
.activity-list ul.activity-privacy:after,
.activity-list .activity-header ul.activity-privacy:after,
.activity-list .activity-group-post-meta ul.activity-privacy:after,
.bb-media-privacy-wrap ul.activity-privacy:after,
.bb-media-privacy-wrap .activity-privacy:after,
.activity-privacy:after {
  display: none !important;
}
ul.activity-privacy.bb-open li,
ul.activity-privacy.open li,
.activity-list .activity-header ul.activity-privacy.bb-open li,
.activity-list .activity-header ul.activity-privacy.open li,
.activity-list .activity-group-post-meta ul.activity-privacy.bb-open li,
.activity-list .activity-group-post-meta ul.activity-privacy.open li,
.bb-media-privacy-wrap ul.activity-privacy.bb-open li,
.bb-media-privacy-wrap ul.activity-privacy.open li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  line-height: 1.3 !important;
  border: none !important;
}
ul.activity-privacy.bb-open li:hover,
ul.activity-privacy.open li:hover,
.activity-list .activity-header ul.activity-privacy.bb-open li:hover,
.activity-list .activity-header ul.activity-privacy.open li:hover,
.activity-list .activity-group-post-meta ul.activity-privacy.bb-open li:hover,
.activity-list .activity-group-post-meta ul.activity-privacy.open li:hover,
.bb-media-privacy-wrap ul.activity-privacy.bb-open li:hover,
.bb-media-privacy-wrap ul.activity-privacy.open li:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
ul.activity-privacy.bb-open li.selected,
ul.activity-privacy.open li.selected,
.activity-list .activity-header ul.activity-privacy.bb-open li.selected,
.activity-list .activity-header ul.activity-privacy.open li.selected,
.activity-list .activity-group-post-meta ul.activity-privacy.bb-open li.selected,
.activity-list .activity-group-post-meta ul.activity-privacy.open li.selected,
.bb-media-privacy-wrap ul.activity-privacy.bb-open li.selected,
.bb-media-privacy-wrap ul.activity-privacy.open li.selected {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}
ul.activity-privacy.bb-open li a,
ul.activity-privacy.open li a,
.activity-list .activity-header ul.activity-privacy.bb-open li a,
.activity-list .activity-header ul.activity-privacy.open li a,
.bb-media-privacy-wrap ul.activity-privacy.bb-open li a,
.bb-media-privacy-wrap ul.activity-privacy.open li a {
  color: inherit !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
ul.activity-privacy.bb-open li:before,
ul.activity-privacy.open li:before,
.activity-list .activity-header ul.activity-privacy.bb-open li:before,
.activity-list .activity-header ul.activity-privacy.open li:before,
.bb-media-privacy-wrap ul.activity-privacy.bb-open li:before,
.bb-media-privacy-wrap ul.activity-privacy.open li:before {
  font-family: bb-icons-rl !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  margin-right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  line-height: 1 !important;
}
ul.activity-privacy.bb-open li.public:before,
ul.activity-privacy.open li.public:before,
.activity-list .activity-header ul.activity-privacy.bb-open li.public:before,
.bb-media-privacy-wrap ul.activity-privacy.bb-open li.public:before {
  content: "\e288" !important;
}
ul.activity-privacy.bb-open li.loggedin:before,
ul.activity-privacy.open li.loggedin:before,
.activity-list .activity-header ul.activity-privacy.bb-open li.loggedin:before,
.bb-media-privacy-wrap ul.activity-privacy.bb-open li.loggedin:before {
  content: "\e68c" !important;
}
ul.activity-privacy.bb-open li.friends:before,
ul.activity-privacy.open li.friends:before,
.activity-list .activity-header ul.activity-privacy.bb-open li.friends:before,
.bb-media-privacy-wrap ul.activity-privacy.bb-open li.friends:before {
  content: "\e4d6" !important;
}
ul.activity-privacy.bb-open li.onlyme:before,
ul.activity-privacy.open li.onlyme:before,
.activity-list .activity-header ul.activity-privacy.bb-open li.onlyme:before,
.bb-media-privacy-wrap ul.activity-privacy.bb-open li.onlyme:before {
  content: "\e2fa" !important;
}

/* Activity Topics: Break to a new line cleanly */
.activity-list .activity-header .activity-topic,
.activity-list .activity-group-post-meta .activity-topic {
  flex-basis: 100% !important;
  width: 100% !important;
  margin: 4px 0 0 0 !important;
}

/* User Name, Topic and Target Links — Pure Crisp White */
.activity-list .activity-header a,
.activity-list .activity-group-heading a,
.activity-list .activity-post-author a,
.activity-list .activity-header .activity-topic a,
.activity-list .activity-title h2,
.activity-list .activity-title a {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.activity-list .activity-header a:hover,
.activity-list .activity-group-heading a:hover,
.activity-list .activity-post-author a:hover,
.activity-list .activity-header .activity-topic a:hover,
.activity-list .activity-title a:hover {
  color: #d4d4d8 !important;
}
.activity-list .time-since,
.activity-list a.time-since,
.activity-list span.time-since {
  color: var(--gat-text-dim) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Activity Inner Content */
.activity-list .activity-content {
  margin-top: 14px !important;
}
.activity-list .activity-inner {
  color: #e4e4e7 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.activity-list .activity-inner p {
  color: #e4e4e7 !important;
  margin: 0 0 10px 0 !important;
}
.activity-list .activity-inner a {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.activity-list .activity-inner blockquote {
  background: #141414 !important;
  border-left: 3px solid rgba(255, 255, 255, 0.3) !important;
  padding: 10px 16px !important;
  color: #d4d4d8 !important;
  margin: 12px 0 !important;
  border-radius: 0 6px 6px 0 !important;
}

/* Activity State Bar (Reactions & Comments count) */
.activity-list .activity-state,
.activity-state {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  border-top: none !important;
}

/* ==========================================================================
   Activity Reactions & Like Pill Design
   ========================================================================== */
.activity-state-reactions,
.activity-item .activity-state-reactions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}
.activity-state-reactions * {
  cursor: pointer !important;
  pointer-events: auto !important;
}
.activity-state-reactions:hover,
.activity-item .activity-state-reactions:hover {
  background: transparent !important;
  border: none !important;
}

/* White round icon badge matching Card 1 in reference */
.activity-state-reactions .reactions_item {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #0c0c0d !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
}
.activity-state-reactions .reactions_item:not(:first-child) {
  margin-left: -5px !important;
  box-shadow: none !important;
}
.activity-state-reactions .reactions_item img {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.activity-state-reactions .reactions_item i {
  color: #0c0c0d !important;
  font-size: 11px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Like Button in Action Footer (Unclipped, No round bounds) */
.like-count,
.like-count.reactions_item,
.activity-actions .reactions_item,
.activity-actions .like-count,
.bp-generic-meta .reactions_item,
.bp-activity-like .like-count,
a.like .like-count,
a.bp-activity-like .like-count,
a.button.like .reactions_item {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.like-count i,
.like-count img,
.activity-actions a.like i,
.activity-actions a.like img,
a.bp-activity-like .reactions_item i,
a.bp-activity-like .reactions_item img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Reaction Count Text */
.activity-state-reactions .activity-reactions_count,
.activity-state-reactions a,
.activity-state-reactions span,
.activity-reactions_count {
  color: #a1a1aa !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.activity-state-reactions:hover .activity-reactions_count,
.activity-state-reactions:hover a,
.activity-state-reactions:hover span {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Reaction User Names & Count */
.activity-state-reactions .activity-reactions_count,
.activity-state-reactions a,
.activity-state-reactions span,
.activity-reactions_count {
  color: #e4e4e7 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.activity-state-reactions:hover .activity-reactions_count,
.activity-state-reactions:hover a,
.activity-state-reactions:hover span {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Comments count in activity state */
.activity-state-reactions ~ .activity-state-comments:before {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.activity-state .comments-count {
  color: #a1a1aa !important;
  font-size: 13px !important;
}
.activity-state .comments-count:hover {
  color: #ffffff !important;
}

/* Reactions Modal Popup (Who reacted) */
.activity-state-popup,
.activity-list .activity-state-popup {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 999999 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Hidden by default (when not active/open, or when inline display: none is set) */
.activity-state-popup:not(.active):not(.open):not(.bb-open):not([style*="display: block"]):not([style*="display: flex"]),
.activity-state-popup[style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Shown/Active Modal Popup */
.activity-state-popup.active,
.activity-state-popup.open,
.activity-state-popup.bb-open,
.activity-state-popup[style*="display: block"]:not([style*="display: none"]),
.activity-state-popup[style*="display: flex"]:not([style*="display: none"]),
.activity-list .activity-state-popup.active,
.activity-list .activity-state-popup[style*="display: block"]:not([style*="display: none"]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.activity-state-popup .activity-state-popup_overlay,
.activity-list .activity-state-popup .activity-state-popup_overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  background: transparent !important;
  cursor: pointer !important;
}
.activity-state-popup .activity-state-popup_inner,
.activity-list .activity-state-popup .activity-state-popup_inner {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  background: #1c1c1f !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  color: #f4f4f5 !important;
  padding: 0 !important;
  max-width: 480px !important;
  width: 90% !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.activity-state-popup .activity-state-popup_tab_item.active,
.activity-list .activity-state-popup .activity-state-popup_tab_item.active {
  display: block !important;
}

/* Modal Title Bar: 20px left padding and 20px right padding for equal spacing */
.activity-state-popup .activity-state-popup_title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  box-sizing: border-box !important;
}
.activity-state-popup .activity-state-popup_title h4 {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Close button in modal: size identical to Create Post Modal close icon */
/* Modal close button: consolidated globally in Section 35 */

/* Reaction Tabs (if emotions active) */
.activity-state-popup .activity-state-popup_tab_panel ul {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  list-style: none !important;
}
.activity-state-popup .activity-state-popup_tab_panel ul li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #a1a1aa !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}
.activity-state-popup .activity-state-popup_tab_panel ul li a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.activity-state-popup .activity-state-popup_tab_panel ul li a.active {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

/* Likes / Reactions Modal Loading Indicator (24px Spinner-Gap Icon) */
.activity-state-popup .reaction-loader,
.activity-state-popup .reactions_loader,
.activity-state-popup [class*="reaction-loader"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px !important;
  margin: 0 !important;
  padding: 40px 0 !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.activity-state-popup .activity-state_users.loading ~ .reaction-loader {
  min-height: 60px !important;
  padding: 16px 0 !important;
}

.activity-state-popup .reaction-loader i,
.activity-state-popup .reaction-loader i.bb-rl-loader,
.activity-state-popup .reaction-loader [class*="loader"],
.activity-state-popup .reactions_loader i,
.activity-state-popup .reaction-loader span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: bbSpin 0.8s linear infinite !important;
  -webkit-animation: bbSpin 0.8s linear infinite !important;
  position: relative !important;
  vertical-align: middle !important;
}

.activity-state-popup .reaction-loader i::before,
.activity-state-popup .reaction-loader i.bb-rl-loader::before,
.activity-state-popup .reaction-loader [class*="loader"]::before,
.activity-state-popup .reactions_loader i::before,
.activity-state-popup .reaction-loader span::before {
  font-family: 'bb-icons-rl', bb-icons-rl !important;
  content: "\e66c" !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: block !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* Users List */
.activity-state-popup .activity-state_users {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 12px 14px 12px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}
.activity-state-popup .activity-state_user,
.activity-state_user {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  margin: 2px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: background 0.15s ease !important;
}
.activity-state-popup .activity-state_user:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.activity-state-popup .activity-state_user:last-child {
  border-bottom: none !important;
}

/* Avatar inside Modal User Item — clean circle without white box */
.activity-state-popup .activity-state_user__avatar,
.activity-state_user__avatar,
.activity-state_user__avatar a {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.activity-state-popup .activity-state_user__avatar img,
.activity-state-popup .activity-state_user__avatar img.avatar,
.activity-state_user__avatar img.avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: transparent !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reaction Badge overlaid on Avatar */
.activity-state-popup .activity-state_user__reaction,
.activity-state_user__reaction {
  position: absolute !important;
  right: -3px !important;
  bottom: -2px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #18181b !important;
  border: 2px solid #18181b !important;
  box-sizing: content-box !important;
  padding: 0 !important;
  margin: 0 !important;
}
.activity-state-popup .activity-state_user__reaction > i,
.activity-state-popup .activity-state_user__reaction > img,
.activity-state_user__reaction > i,
.activity-state_user__reaction > img {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Username & Profile link (Strictly transparent background to fix solid white box) */
.activity-state-popup,
.activity-state-popup .activity-state-popup_inner {
  background: #18181b !important;
}
.activity-state-popup .activity-state_user,
.activity-state-popup .activity-state_user *,
.activity-state-popup .activity-state_user__name,
.activity-state-popup .activity-state_user__name *,
.activity-state-popup .activity-state_user__info,
.activity-state-popup .activity-state_user__info *,
.activity-state-popup .activity-state_user__data,
.activity-state-popup .activity-state_user__data *,
.activity-state_user,
.activity-state_user *,
.activity-state_user__name,
.activity-state_user__name *,
.activity-state_user__info,
.activity-state_user__info *,
.activity-state_user__data,
.activity-state_user__data * {
  background: transparent !important;
  box-shadow: none !important;
}
.activity-state-popup .activity-state_user__name,
.activity-state_user__name {
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  flex: 1 !important;
}
.activity-state-popup .activity-state_user__name a,
.activity-state_user__name a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.activity-state-popup .activity-state_user__name a:hover,
.activity-state_user__name a:hover {
  color: #e4e4e7 !important;
}

/* Role / Member type badge (Override any inline or theme white background) */
.activity-state-popup .activity-state_user__role,
.activity-state_user__role,
.activity-state_user [class*="role"] {
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #d4d4d8 !important;
  box-shadow: none !important;
}

/* Followers count */
.activity-state-popup .followers-count,
.activity-state_user .followers-count {
  color: var(--gat-text-dim) !important;
  font-size: 12px !important;
  background: transparent !important;
}

/* ==========================================================================
   Activity Footer Actions — Left: "gefällt mir", Right: Reaction Count
   Matches Reference Design (Card 1):
   - Left: "gefällt mir" button
   - Right: "👍 1 reaction" count
   - Top: 1px divider line above both
   ========================================================================== */
.activity-footer-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 10px !important;
  margin-top: 14px !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}

/* Left side: Action Buttons ("gefällt mir", Comment) */
.activity-footer-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.activity-footer-buttons .activity-meta,
.activity-footer-buttons .action,
.activity-footer-buttons .bp-generic-meta,
.activity-footer-buttons .activity-actions {
  display: flex !important;
  align-items: center !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.activity-footer-buttons div.generic-button,
.activity-footer-buttons .generic-button,
.bp-generic-meta div.generic-button {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Right side: Reactions Count */
.activity-footer-state {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
}
.activity-footer-state .activity-state {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
}

/* Action button links ("gefällt mir" button) */
.activity-footer-buttons .generic-button a,
.activity-footer-buttons a.button,
.activity-footer-buttons a.bp-like-button,
.activity-footer-buttons a.like,
.bp-generic-meta .generic-button a,
.activity-list .activity-actions a,
.activity-list a.bp-like-button,
.activity-list a.button.like {
  color: var(--gat-text-muted, #a1a1aa) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
}
.activity-footer-buttons .generic-button a:hover,
.activity-footer-buttons a.button:hover,
.activity-footer-buttons a.bp-like-button:hover,
.activity-footer-buttons a.like:hover,
.bp-generic-meta .generic-button a:hover,
.activity-list .activity-actions a:hover,
.activity-list a.bp-like-button:hover,
.activity-list a.button.like:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Liked state (Capsule button like in Card 1) */
.activity-footer-buttons a.button.like.liked,
.activity-footer-buttons a.button.like.has-reaction,
.activity-footer-buttons a.bp-like-button.has-reaction,
.activity-footer-buttons a.bp-like-button.liked,
.activity-footer-buttons .generic-button:has(.has-reaction) a,
.activity-footer-buttons a.button:has(.has-reaction),
.bp-generic-meta .generic-button a.has-reaction,
.activity-list a.bp-like-button.has-reaction,
.activity-list a.button.like.liked {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  color: #ffffff !important;
}
.activity-footer-buttons .generic-button a i,
.activity-footer-buttons a.button i,
.bp-generic-meta .generic-button a i,
.activity-list a.bp-like-button i,
.activity-list a.button.like i,
.activity-list a.bp-activity-comment i,
.activity-list a.button i {
  color: inherit !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* Fallback for un-customized loops: CSS Grid */
.activity-content:not(:has(.activity-footer-actions)) {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 10px !important;
}
.activity-content:not(:has(.activity-footer-actions)) .activity-inner {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 0 14px 0 !important;
}
.activity-content:not(:has(.activity-footer-actions))::before {
  content: "" !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin: 0 0 10px 0 !important;
  display: block !important;
}
.activity-content:not(:has(.activity-footer-actions)) .activity-meta,
.activity-content:not(:has(.activity-footer-actions)) .action {
  grid-column: 1 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.activity-content:not(:has(.activity-footer-actions)) .activity-state {
  grid-column: 2 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   3-Dots Dropdown Menu ("...") & Actions (Notifications, Activity, Comments)
   ========================================================================== */

/* 3-Dot Trigger */
.activity-item .bb_more_options_action,
.activity-item a.bb_more_options_action,
.bb_more_options .bb_more_options_action {
  color: var(--gat-text-dim, #71717a) !important;
  background: transparent !important;
  border: none !important;
  font-size: 18px !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.activity-item .bb_more_options_action:hover,
.bb_more_options .bb_more_options_action:hover {
  color: #ffffff !important;
}

/* Remove bright white arrow / tooltip triangle above popover */
.bb_more_dropdown:before,
.bb_more_dropdown:after,
div:has(> .bb_more_dropdown.open) > [data-balloon]:before,
div:has(> .bb_more_dropdown.open) > [data-balloon]:after {
  display: none !important;
  border: none !important;
  background: transparent !important;
}

/* Dropdown Menu Container (Pure Dark Surface, NO WHITE) */
.bb_more_options_list,
.bb_more_dropdown,
.activity-item .bb_more_options_list,
.activity-item .bb_more_dropdown,
.activity-item .action-dropdown,
.activity-list .bb-activity-more-options-wrap .bb-activity-more-options,
.bb-activity-more-options,
.bb_more_dropdown__list,
.bb-activity-more-actions-list,
.activity-item-options,
div.bb_more_options_list {
  background: var(--gat-surface, #121216) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
  padding: 6px 0 !important;
  z-index: 9999 !important;
  min-width: 200px !important;
  box-sizing: border-box !important;
}

/* Items inside dropdown ("löschen", "Turn off notifications") - Perfectly Aligned Rows */
.activity-list .bb-activity-more-options .generic-button a,
.bb-activity-more-options .generic-button a,
.bb-activity-more-options a,
#buddypress .activity-list .bb-activity-more-options-wrap .bb-activity-more-options .generic-button a,
.bb_more_options_list a,
.bb_more_dropdown a,
.bb_more_dropdown button,
.bb_more_options_list button,
.bb_more_options_list li a,
.bb_more_dropdown li a,
.bb_more_dropdown__list li a,
.notification-list .actions a,
.notifications.dir-list .notification-list .actions a {
  color: #e4e4e7 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  text-align: left !important;
  white-space: nowrap !important;
}
.activity-list .bb-activity-more-options .generic-button a:hover,
.bb-activity-more-options .generic-button a:hover,
.bb-activity-more-options a:hover,
#buddypress .activity-list .bb-activity-more-options-wrap .bb-activity-more-options .generic-button a:hover,
.bb_more_options_list a:hover,
.bb_more_dropdown a:hover,
.bb_more_dropdown button:hover,
.bb_more_options_list button:hover,
.bb_more_options_list li a:hover,
.bb_more_dropdown li a:hover,
.notification-list .actions a:hover,
.notifications.dir-list .notification-list .actions a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Icons inside dropdown items - Uniform 20px box for pixel-perfect vertical & horizontal alignment */
.activity-list .bb-activity-more-options .generic-button a:before,
.activity-list .bb-activity-more-options .generic-button a i,
.activity-list .bb-activity-more-options .generic-button a [class*="bb-icon"],
.bb-activity-more-options .generic-button a:before,
.bb-activity-more-options .generic-button a i,
.bb-activity-more-options .generic-button a [class*="bb-icon"],
#buddypress .activity-list .bb-activity-more-options-wrap .bb-activity-more-options .generic-button a:before,
#buddypress .activity-list .bb-activity-more-options-wrap .bb-activity-more-options .generic-button a i,
#buddypress .activity-list .bb-activity-more-options-wrap .bb-activity-more-options .generic-button a [class*="bb-icon"],
.bb_more_options_list a i,
.bb_more_dropdown a i,
.bb_more_dropdown button i,
.bb_more_options_list li a i,
.notification-list .actions a i,
.notification-list .actions a span[class*="icon"],
.notification-list .actions a .dashicons,
.notification-list .actions a [class*="bb-icons-"],
.notifications.dir-list .notification-list .actions a [class*="bb-icons-rl-"],
.notifications.dir-list .notification-list .actions a .dashicons,
.bb_more_dropdown a .dashicons,
.bb_more_dropdown a [class*="bb-icon-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  color: var(--gat-text-dim, #71717a) !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  border: none !important;
  vertical-align: middle !important;
}

/* If a link already contains an <i> or icon element (e.g. Turn off notifications), suppress any ghost :before pseudo-element */
.activity-list .bb-activity-more-options .generic-button a:has(i):before,
.activity-list .bb-activity-more-options .generic-button a:has([class*="bb-icon"]):before,
.bb-activity-more-options .generic-button a:has(i):before,
.bb-activity-more-options .generic-button a:has([class*="bb-icon"]):before,
#buddypress .activity-list .bb-activity-more-options-wrap .bb-activity-more-options .generic-button a:has(i):before,
#buddypress .activity-list .bb-activity-more-options-wrap .bb-activity-more-options .generic-button a:has([class*="bb-icon"]):before {
  display: none !important;
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.activity-list .bb-activity-more-options .generic-button a:hover:before,
.activity-list .bb-activity-more-options .generic-button a:hover i,
.activity-list .bb-activity-more-options .generic-button a:hover [class*="bb-icon"],
.bb-activity-more-options .generic-button a:hover:before,
.bb-activity-more-options .generic-button a:hover i,
.bb_more_options_list a:hover i,
.bb_more_dropdown a:hover i,
.bb_more_dropdown button:hover i,
.notification-list .actions a:hover i,
.notification-list .actions a:hover .dashicons,
.notifications.dir-list .notification-list .actions a:hover [class*="bb-icons-rl-"] {
  color: #ffffff !important;
}
.bb_more_dropdown__title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 8px 16px !important;
  color: var(--gat-text-muted) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: transparent !important;
}
.bb_more_dropdown__title .generic-button,
.bb_more_dropdown__title .generic-button a,
.bb_more_dropdown__title .generic-button button {
  margin: 0 !important;
}
.bb_more_dropdown_overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   Activity Comments Thread
   ========================================================================== */
.activity-comments {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
}
.activity-comments ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.activity-comments li[id^="acomment-"] {
  background: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
}
.acomment-avatar img.avatar,
.activity-comments .avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Universal Circular Avatars Across BuddyBoss */
#buddypress img.avatar,
.activity-list img.avatar,
.activity-avatar img.avatar,
.author-avatar img.avatar,
.group-avatar img.avatar,
.item-avatar img.avatar,
.acomment-avatar img.avatar,
#bp-nouveau-activity-form-placeholder .avatar,
#whats-new-form .avatar,
.activity-update-form .avatar,
.bb-activity-placeholder .avatar,
.activity-comments .avatar,
.activity-comments form .avatar,
.bb-media-model-avatar img.avatar {
  border-radius: 50% !important;
}
.acomment-meta a {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.acomment-meta .time-since {
  color: var(--gat-text-dim) !important;
  font-size: 12px !important;
}
.acomment-content {
  color: #e4e4e7 !important;
  margin-top: 6px !important;
  font-size: 14px !important;
}

/* Comment Reply Form */
.activity-comments form.ac-form,
.activity-comments .ac-reply-content,
form.ac-form {
  background: #141414 !important;
  border: 1px solid var(--gat-border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-top: 12px !important;
}
.ac-textarea textarea,
form.ac-form textarea {
  background: var(--gat-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
form.ac-form input[type="submit"],
form.ac-form button {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
form.ac-form a.ac-reply-cancel {
  color: var(--gat-text-muted) !important;
  margin-left: 8px !important;
}

/* Load More Button */
li.load-more {
  text-align: center !important;
  margin: 24px 0 !important;
  list-style: none !important;
}
li.load-more a.button,
li.load-more a {
  display: inline-block !important;
  background: #141414 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
li.load-more a.button:hover,
li.load-more a:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* Shimmer / Placeholder Animation */
.bb-loading-bg,
.bb-bg-animation {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Activity Modal / Theatre Mode */
.bb-activity-model-wrapper,
#activity-modal,
.activity-modal {
  background: var(--bg-surface, #121216) !important;
  color: var(--text-heading, #ffffff) !important;
}
.bb-modal-activity-header {
  border-bottom: 1px solid var(--gat-border) !important;
}
.bb-modal-activity-footer {
  border-top: 1px solid var(--gat-border) !important;
  background: #111111 !important;
}


/* Responsive Header adjustment for mobile screens */
@media screen and (max-width: 768px) {
.item-header-profile-row,
.profile-banner-pattern {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 76px 20px 20px 20px !important;
    gap: 14px !important;
  }
.bb-user-content-wrap,
.bb-user-actions-wrap {
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
.bb-user-actions-top {
    justify-content: center !important;
  }
.member-social-counts,
.member-social-counts .flex,
.member-social-counts > div {
    justify-content: center !important;
  }
#item-header-content .flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
#item-header-content .item-meta {
    justify-content: center !important;
  }
}

/* ==========================================================================
   Registration Page - Matching Elementor Login Form Styling
   ========================================================================== */
#register-page.elementor-element {
  max-width: 40rem !important;
  display: block;
  margin: 0 auto;
  padding: 3.5rem 0rem;
}


/* Form Layout & Fields */
#register-page .standard-form,
#register-page #signup-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  width: 100% !important;
}
#register-page .standard-form label:not(.radio):not(.checkbox):not(.bp-radio-wrap label):not(.bp-checkbox-wrap label):not(:has(input[type="radio"])):not(:has(input[type="checkbox"])),
#register-page .standard-form .editfield:not(.field_type_radio):not(.field_type_checkbox) > label,
#register-page label:not(.radio):not(.checkbox):not(.bp-radio-wrap label):not(.bp-checkbox-wrap label):not(:has(input[type="radio"])):not(:has(input[type="checkbox"])),
.register-page label:not(.radio):not(.checkbox):not(.bp-radio-wrap label):not(.bp-checkbox-wrap label):not(:has(input[type="radio"])):not(:has(input[type="checkbox"])) {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  display: block !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
}

/* Inputs & Textareas layout */
#register-page .standard-form input[type="text"],
#register-page .standard-form input[type="password"],
#register-page .standard-form input[type="email"],
#register-page .standard-form select {
  height: 48px !important;
  line-height: 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 5px;
}
#register-page .standard-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Password Field Wrapper & Eye Toggle */
#register-page .bb-password-wrap,
#register-page .password-toggle,
#register-page .wp-pwd {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#register-page .bb-password-wrap input,
#register-page .password-toggle input,
#register-page .signup_password input {
  padding-right: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#register-page .bb-toggle-password,
#register-page .bb-hide-pw,
#register-page button.bb-toggle-password,
#register-page button.bb-hide-pw,
#register-page .button.wp-hide-pw,
#register-page .signup_password button,
#register-page .bb-password-wrap button,
#register-page .signup_password a.bb-toggle-password,
#register-page .signup_password span.bb-toggle-password {
  position: absolute !important;
  right: 12px !important;
  top: 24px !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  left: auto !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 0 !important;
  max-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}
#register-page .bb-toggle-password:hover,
#register-page .bb-hide-pw:hover,
#register-page button.bb-toggle-password:hover,
#register-page .signup_password button:hover {
  color: #ffffff !important;
  background: transparent !important;
}
#register-page .bb-toggle-password:focus,
#register-page .bb-toggle-password:active,
#register-page .bb-toggle-password:focus-visible,
#register-page .bb-toggle-password.bb-show-pass,
#register-page .bb-hide-pw:focus,
#register-page .bb-hide-pw:active,
#register-page .bb-hide-pw:focus-visible,
#register-page button.bb-toggle-password:focus,
#register-page button.bb-toggle-password:active,
#register-page button.bb-toggle-password:focus-visible,
#register-page .signup_password button:focus,
#register-page .signup_password button:active,
#register-page .signup_password button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  top: 24px !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  height: 32px !important;
  min-height: 0 !important;
}
#register-page .bb-toggle-password i,
#register-page .bb-toggle-password span,
#register-page .bb-hide-pw i,
#register-page .bb-hide-pw span,
#register-page .signup_password button i,
#register-page .signup_password button span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   Password Strength Indicators (Passwort-Stärke)
   ========================================================================== */
/* Hide completely when empty, unrated, or closed */
#pass-strength-result:empty,
#pass-strength-result.empty,
.password-strength-result:empty,
.password-strength-result.empty,
#pass-strength-result[style*="none"],
.password-strength-result[style*="none"] {
  display: none !important;
  background: transparent !important;
  border: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#pass-strength-result.short,
#pass-strength-result.bad,
#pass-strength-result.good,
#pass-strength-result.strong,
#pass-strength-result.mismatch,
.password-strength-result.short,
.password-strength-result.bad,
.password-strength-result.good,
.password-strength-result.strong,
.password-strength-result.mismatch,
#register-page #pass-strength-result.short,
#register-page #pass-strength-result.bad,
#register-page #pass-strength-result.good,
#register-page #pass-strength-result.strong,
#register-page #pass-strength-result.mismatch {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
  border-width: 1px !important;
  border-style: solid !important;
  transition: all 0.2s ease !important;
}

/* Zu kurz / Sehr schwach */
#pass-strength-result.short,
.password-strength-result.short,
#register-page #pass-strength-result.short {
  background-color: #7f1d1d !important; /* Dunkles Weinrot */
  border-color: #dc2626 !important;     /* Roter Rand */
  color: #fef2f2 !important;            /* Helles klares Weiß/Rosa */
}

/* Schwach */
#pass-strength-result.bad,
.password-strength-result.bad,
#register-page #pass-strength-result.bad,
.show.bad {
  background-color: #9a3412 !important; /* Dunkles Rost-Orange */
  border-color: #ea580c !important;     /* Kräftiges Orange */
  color: #fff7ed !important;            /* Gut lesbarer heller Text */
}

/* Mittel */
#pass-strength-result.good,
.password-strength-result.good,
#register-page #pass-strength-result.good {
  background-color: #854d0e !important; /* Dunkles Gelb/Ocker */
  border-color: #ca8a04 !important;     /* Gelber Rand */
  color: #fefce8 !important;            /* Heller lesbarer Text */
}

/* Stark */
#pass-strength-result.strong,
.password-strength-result.strong,
#register-page #pass-strength-result.strong {
  background-color: #14532d !important; /* Dunkles Waldgrün */
  border-color: #16a34a !important;     /* Kräftiges Grün */
  color: #f0fdf4 !important;            /* Klar lesbares Weiß/Grün */
}

/* Keine Übereinstimmung */
#pass-strength-result.mismatch,
.password-strength-result.mismatch,
#register-page #pass-strength-result.mismatch,
.show.mismatch {
  background-color: #7f1d1d !important;
  border-color: #dc2626 !important;
  color: #fef2f2 !important;
}

/* Submit Button */
#register-page .submit,
#register-page .submit-wrap {
  width: 100% !important;
}
#register-page .submit input[type="submit"],
#register-page button[type="submit"],
#register-page #signup_submit,
#register-page input#register {
  width: 100% !important;
  background-color: #FFFFFF0D !important;
  color: #E2E2E8 !important;
  border: 1px solid #FFFFFF33 !important;
  border-radius: 6px !important;
  padding: 14px 28px !important;
  font-size: 1rem !important;
  text-align: center !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  display: block !important;
}
#register-page .submit input[type="submit"]:hover,
#register-page button[type="submit"]:hover,
#register-page #signup_submit:hover,
#register-page input#register:hover {
  background-color: #FFFFFF26 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF66 !important;
}

/* ==========================================================================
   Profile Form Fields & Layout (Matching Register Page Designs Globally)
   ========================================================================== */

/* Form Layout & Field Container */
.profile-edit,
#profile-edit-form,
.gat-inline-edit-form,
.standard-form.profile-edit {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.profile-edit .editfield,
#profile-edit-form .editfield,
.gat-inline-edit-form .editfield,
.gat-edit-fields-list .editfield,
.standard-form.profile-edit .editfield {
  margin-bottom: 1.25rem !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Global Form Labels (matching #register-page: color, font size, weight, spacing) */
.profile-edit .editfield > label,
#profile-edit-form .editfield > label,
.gat-inline-edit-form .editfield > label,
.standard-form.profile-edit .editfield > label,
.editfield > label,
.gat-edit-label {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  display: block !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  text-transform: none !important;
}

/* Field Legends (radio/checkbox group headings) styled like standard form labels */
.field_type_radio legend,
.field_type_checkbox legend,
.editfield.field_type_radio legend,
.editfield.field_type_checkbox legend,
.profile-edit legend,
#profile-edit-form legend,
.gat-inline-edit-form legend,
.gat-edit-field-item legend,
#register-page legend,
.register-page legend,
#register-page .standard-form legend,
#register-page .register-section legend {
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  flex-basis: 100% !important;
}

/* Required field indicator (*) */
.profile-edit .bp-required-field-label,
.profile-edit span.required,
.editfield .bp-required-field-label,
.editfield span.required,
.gat-inline-edit-form .bp-required-field-label,
.gat-inline-edit-form span.required,
.gat-edit-label .required {
  color: #ef4444 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  margin-left: 4px !important;
}

/* Text Inputs, Passwords, Emails, URLs, Numbers, Selects (matching #register-page & Elementor) */
.profile-edit input[type="text"],
.profile-edit input[type="email"],
.profile-edit input[type="url"],
.profile-edit input[type="password"],
.profile-edit input[type="number"],
.profile-edit input[type="date"],
.profile-edit select,
#profile-edit-form input[type="text"],
#profile-edit-form input[type="email"],
#profile-edit-form input[type="url"],
#profile-edit-form input[type="password"],
#profile-edit-form input[type="number"],
#profile-edit-form input[type="date"],
#profile-edit-form select,
.gat-inline-edit-form input[type="text"],
.gat-inline-edit-form input[type="email"],
.gat-inline-edit-form input[type="url"],
.gat-inline-edit-form input[type="password"],
.gat-inline-edit-form input[type="number"],
.gat-inline-edit-form input[type="date"],
.gat-inline-edit-form select,
.editfield input[type="text"],
.editfield input[type="email"],
.editfield input[type="url"],
.editfield input[type="password"],
.editfield select,
.gat-edit-field-item input[type="text"],
.gat-edit-field-item input[type="email"],
.gat-edit-field-item input[type="url"],
.gat-edit-field-item input[type="password"],
.gat-edit-field-item select,
.gat-edit-input-wrap input[type="text"],
.gat-edit-input-wrap input[type="email"],
.gat-edit-input-wrap input[type="url"],
.gat-edit-input-wrap select {
  height: 48px !important;
  line-height: 22px !important;
  background-color: #D0D4E04D !important;
  border: 1px solid #3A4150 !important;
  border-radius: 8px !important;
  color: #F0F2F5 !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.profile-edit input[type="text"]:focus,
.profile-edit input[type="email"]:focus,
.profile-edit input[type="url"]:focus,
.profile-edit input[type="password"]:focus,
.profile-edit select:focus,
#profile-edit-form input[type="text"]:focus,
#profile-edit-form input[type="email"]:focus,
#profile-edit-form select:focus,
.gat-inline-edit-form input[type="text"]:focus,
.gat-inline-edit-form input[type="email"]:focus,
.gat-inline-edit-form select:focus,
.editfield input:focus,
.editfield select:focus,
.gat-edit-field-item input:focus,
.gat-edit-field-item select:focus,
.gat-edit-input-wrap input:focus,
.gat-edit-input-wrap select:focus,
.buddypress-wrap .standard-form.profile-edit input:focus,
.buddypress-wrap .standard-form.profile-edit select:focus,
.buddypress-wrap .standard-form input:focus,
.buddypress-wrap .standard-form select:focus,
.buddypress-wrap input:focus,
.buddypress-wrap select:focus,
#buddypress .standard-form.profile-edit input:focus,
#buddypress .standard-form.profile-edit select:focus,
#buddypress .standard-form input:focus,
#buddypress .standard-form select:focus,
#buddypress input:focus,
#buddypress select:focus {
  background: #D0D4E04D !important;
  color: #F0F2F5 !important;
  border-color: #FFFFFF66 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

/* Textareas (matching #register-page & Elementor) */
.profile-edit textarea,
#profile-edit-form textarea,
.gat-inline-edit-form textarea,
.editfield textarea,
.gat-edit-field-item textarea,
.gat-edit-input-wrap textarea {
  background-color: #D0D4E04D !important;
  border: 1px solid #3A4150 !important;
  border-radius: 8px !important;
  color: #F0F2F5 !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 120px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.profile-edit textarea:focus,
#profile-edit-form textarea:focus,
.gat-inline-edit-form textarea:focus,
.editfield textarea:focus,
.gat-edit-field-item textarea:focus,
.gat-edit-input-wrap textarea:focus,
.buddypress-wrap .standard-form.profile-edit textarea:focus,
.buddypress-wrap .standard-form textarea:focus,
.buddypress-wrap textarea:focus,
#buddypress .standard-form.profile-edit textarea:focus,
#buddypress .standard-form textarea:focus,
#buddypress textarea:focus {
  background: #D0D4E04D !important;
  color: #F0F2F5 !important;
  border-color: #FFFFFF66 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

/* Description / Help text */
.profile-edit .description,
#profile-edit-form .description,
.gat-inline-edit-form .description,
.editfield .description,
.editfield p.description {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.8rem !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

/* General fieldset inside edit forms: vertical column, 0 gap so visibility indicator sits tightly beneath input */
#buddypress .gat-edit-field-item fieldset,
#buddypress .profile-edit .editfield fieldset,
#buddypress #profile-edit-form .editfield fieldset,
#buddypress .standard-form .editfield fieldset,
.gat-edit-field-item fieldset,
.profile-edit .editfield fieldset,
#profile-edit-form .editfield fieldset,
.standard-form .editfield fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure any pseudo-elements on label sit inline */
div.radio label::before,
.radio label::before,
div.radio label::after,
.radio label::after,
#register-page label::before,
#register-page label::after {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 8px 0 0 !important;
  float: none !important;
}

/* ==========================================================================
   Profile Field Visibility Settings Popover / Box & Eye Indicator
   ========================================================================== */

/* Completely hide visibility indicator when visibility is locked / cannot be changed */
#buddypress .field-visibility-settings-notoggle,
#buddypress p.field-visibility-settings-notoggle,
.field-visibility-settings-notoggle,
p.field-visibility-settings-notoggle,
#buddypress .field-visibility-settings-header:not(:has(.visibility-toggle-link)),
#buddypress p.field-visibility-settings-toggle:not(:has(.visibility-toggle-link)),
.field-visibility-settings-header:not(:has(.visibility-toggle-link)),
p.field-visibility-settings-toggle:not(:has(.visibility-toggle-link)) {
  display: none !important;
}

/* Visibility Header & Toggle Badge ("Sichtbarkeit") with Privacy/Eye Symbol */
#buddypress .field-visibility-settings-header,
#buddypress p.field-visibility-settings-toggle,
.field-visibility-settings-header,
p.field-visibility-settings-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 0 2px 0 !important; /* Reduced top gap directly under input field */
  padding: 4px 12px 4px 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  width: fit-content !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}
#buddypress .field-visibility-settings-header:hover,
#buddypress p.field-visibility-settings-toggle:hover,
.field-visibility-settings-header:hover,
p.field-visibility-settings-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Eye / Privacy Icon */
#buddypress .field-visibility-settings-header:before,
#buddypress p.field-visibility-settings-toggle:before,
.field-visibility-settings-header:before,
p.field-visibility-settings-toggle:before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
}

/* Status Text: clean white text, strictly WITHOUT any box or button appearance */
.field-visibility-settings-header .current-visibility-level,
p.field-visibility-settings-toggle .current-visibility-level,
.current-visibility-level,
.bp-wrap .current-visibility-level,
body.buddyboss-theme .current-visibility-level,
#buddypress .current-visibility-level {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  background: transparent !important;
  padding: 0 4px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Action button "ändern" - clearly distinct clickable pill button */
.field-visibility-settings-header .visibility-toggle-link,
p.field-visibility-settings-toggle .visibility-toggle-link,
button.visibility-toggle-link,
.visibility-toggle-link,
.bp-wrap .visibility-toggle-link,
body.buddyboss-theme .visibility-toggle-link,
#buddypress .visibility-toggle-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 3px 12px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 1.4 !important;
  margin-left: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.field-visibility-settings-header .visibility-toggle-link:hover,
p.field-visibility-settings-toggle .visibility-toggle-link:hover,
button.visibility-toggle-link:hover,
.visibility-toggle-link:hover,
.bp-wrap .visibility-toggle-link:hover,
body.buddyboss-theme .visibility-toggle-link:hover,
#buddypress .visibility-toggle-link:hover {
  background: #ffffff !important;
  color: #09090b !important;
  border-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.25) !important;
}

/* Initially hidden: toggled via JavaScript slideDown / slideUp */
.field-visibility-settings,
div.field-visibility-settings,
#profile-edit-form .field-visibility-settings,
.profile-edit .field-visibility-settings,
.bp-wrap .field-visibility-settings,
#buddypress .field-visibility-settings {
  display: none;
  background: var(--bg-surface, #121216) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--gat-radius-md, 10px) !important;
  padding: 16px 18px !important;
  margin: 10px 0 16px 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 650px !important;
}
.field-visibility-settings fieldset,
div.field-visibility-settings fieldset,
#profile-edit-form .field-visibility-settings fieldset,
.profile-edit .field-visibility-settings fieldset,
.bp-wrap .field-visibility-settings fieldset,
#buddypress .field-visibility-settings fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
}
.field-visibility-settings legend,
div.field-visibility-settings legend,
#profile-edit-form .field-visibility-settings legend,
.profile-edit .field-visibility-settings legend,
.bp-wrap .field-visibility-settings legend,
#buddypress .field-visibility-settings legend {
  font-family: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--gat-text-dim, #71717a) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}

/* Icon inside Visibility popover title */
.field-visibility-settings legend:before,
div.field-visibility-settings legend:before,
#buddypress .field-visibility-settings legend:before {
  content: '' !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

/* Container for visibility options: horizontal row with comfortable gap */
.field-visibility-settings div.radio,
.field-visibility-settings .radio,
.field-visibility-settings ul.radio,
.bp-wrap .field-visibility-settings div.radio,
.bp-wrap .field-visibility-settings .radio,
body.buddyboss-theme .field-visibility-settings div.radio,
body.buddyboss-theme .field-visibility-settings .radio,
#buddypress .field-visibility-settings div.radio,
#buddypress .field-visibility-settings .radio {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 3px 0 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 20px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  float: none !important;
}

/* Each option label: circle strictly on left, label strictly on right (NO WRAPPING) */
.field-visibility-settings div.radio label,
.field-visibility-settings .radio label,
.field-visibility-settings label,
.bp-wrap .field-visibility-settings div.radio label,
.bp-wrap .field-visibility-settings .radio label,
.bp-wrap .field-visibility-settings label,
body.buddyboss-theme .field-visibility-settings label,
#buddypress .field-visibility-settings label {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 8px !important;
  color: #f4f4f5 !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  float: none !important;
}
.field-visibility-settings div.radio input[type="radio"],
.field-visibility-settings .radio input[type="radio"],
.field-visibility-settings input[type="radio"],
.bp-wrap .field-visibility-settings input[type="radio"],
body.buddyboss-theme .field-visibility-settings input[type="radio"],
#buddypress .field-visibility-settings input[type="radio"] {
  display: inline-block !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  flex: 0 0 18px !important;
  accent-color: #ffffff !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  float: none !important;
}
.field-visibility-settings label::before,
.field-visibility-settings label::after {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 8px 0 0 !important;
  float: none !important;
}

/* Close button inside visibility settings */
#buddypress .field-visibility-settings .field-visibility-settings-close,
.field-visibility-settings .field-visibility-settings-close,
button.field-visibility-settings-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 18px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 8px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}
#buddypress .field-visibility-settings .field-visibility-settings-close:hover,
.field-visibility-settings .field-visibility-settings-close:hover,
button.field-visibility-settings-close:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Force Profile Header visible on Settings / Konto, Notifications & Account
   ========================================================================== */
body.settings #buddypress #item-header,
body.settings #item-header,
body.settings #cover-image-container,
body.settings #item-header-cover-image,
body.settings .users-header,
body.my-account #buddypress #item-header,
body.my-account #item-header,
body.my-account #cover-image-container,
body.my-account #item-header-cover-image,
body.my-account .users-header,
body.notifications #buddypress #item-header,
body.notifications #item-header,
body.notifications #cover-image-container,
body.notifications #item-header-cover-image,
body.notifications .users-header,
body.bp-user.settings #item-header,
body.bp-user.settings #cover-image-container,
body.bp-user.notifications #item-header,
body.bp-user.notifications #cover-image-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.settings #item-body,
body.notifications #item-body,
body.my-account #item-body {
  width: 100% !important;
  /*margin-top: 24px !important;*/
}

/* Hide "Über" (Bio / Textarea) & "Geburtsdatum" (Date / Birthdate) fields on registration page */
#register-page .editfield.field_type_textarea,
.register-page .editfield.field_type_textarea,
#register-page .editfield.field_ueber,
#register-page .editfield.field_uber,
#register-page .editfield.field_about-me,
#register-page .editfield.field_uber-mich,
#register-page .editfield.field_about,
#register-page .editfield.field_bio,
.register-page .editfield.field_ueber,
.register-page .editfield.field_uber,
.register-page .editfield.field_about-me,
.register-page .editfield.field_uber-mich,
.register-page .editfield.field_about,
.register-page .editfield.field_bio,
#register-page .editfield.field_type_datebox,
.register-page .editfield.field_type_datebox,
#register-page .editfield.field_type_birthdate,
.register-page .editfield.field_type_birthdate,
#register-page .editfield.field_type_date,
.register-page .editfield.field_type_date,
#register-page .editfield.datebox,
.register-page .editfield.datebox,
#register-page .editfield.birthdate,
.register-page .editfield.birthdate,
#register-page .editfield.field_geburtsdatum,
.register-page .editfield.field_geburtsdatum,
#register-page .editfield.field_geburtstag,
.register-page .editfield.field_geburtstag,
#register-page .editfield.field_birthdate,
.register-page .editfield.field_birthdate,
#register-page .editfield.field_birthday,
.register-page .editfield.field_birthday {
  display: none !important;
}

/* Footer Link ("Bereits einen Account? Anmelden") */
.gat-register-footer-links {
  text-align: center !important;
  margin-top: 1.5rem !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
.gat-register-footer-links a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  margin-left: 4px !important;
}
.gat-register-footer-links a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Sub-sections inside registration */
#register-page .register-section h2 {
  font-family: var(--font-1, Anton, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--text-heading, #e4e4e7) !important;
  margin: 1.5rem 0 1rem 0 !important;
  border: none !important;
  padding: 0 !important;
}
.buddypress-wrap .standard-form p.description {
  font-size: 0.85rem;
  line-height: 1.3rem;
  margin: 0 0 5px 0;
}

/* ==========================================================================
   Modern Save Success Notification Toast / Banner
   ========================================================================== */
.gat-toast-container {
  width: 100%;
  margin: 12px 0 20px 0;
}
.gat-save-toast {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(18, 22, 20, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  border-left: 4px solid #22c55e !important;
  border-radius: var(--gat-radius-md, 10px) !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 15px rgba(34, 197, 94, 0.12) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  animation: gatFadeSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes gatFadeSlideDown {
from {
    opacity: 0;
    transform: translateY(-8px);
  }
to {
    opacity: 1;
    transform: translateY(0);
  }
}
.gat-save-toast-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(34, 197, 94, 0.15) !important;
  flex-shrink: 0 !important;
}
.gat-save-toast-text {
  flex: 1 1 auto !important;
  color: #f4f4f5 !important;
  line-height: 1.4 !important;
}
.gat-save-toast-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  padding: 0 4px !important;
  margin-left: auto !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}
.gat-save-toast-close:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   Hide Nickname field completely (Display & Edit) - Only "Anzeigename" editable
   ========================================================================== */
.gat-field-card.field_nickname,
.gat-field-card.field-nickname,
.editfield.field_nickname,
.editfield.field-nickname,
.gat-edit-field-item.field_nickname,
.gat-edit-field-item.field-nickname,
.bp-wrap .editfield.field_nickname,
.bp-wrap .editfield.field-nickname,
.bp-wrap .gat-edit-field-item.field_nickname,
.bp-wrap .gat-edit-field-item.field-nickname,
.bp-wrap .gat-field-card.field_nickname,
.bp-wrap .gat-field-card.field-nickname,
[data-field-id="2"],
div[class*="nickname"],
div[class*="field_nickname"],
div[class*="spitzname"],
.field-id-nickname {
  display: none !important;
}

/* ==========================================================================
   Konto / Settings Page Styles (Matching Profile Edit & Register design)
   ========================================================================== */
.gat-settings-widget {
  margin-bottom: 2rem !important;
}
#settings-form {
  width: 100% !important;
  max-width: 100% !important;
  gap: 0 !important;
}
#settings-form .editfield,
#settings-form .bb-field-wrap,
#settings-form .gat-edit-field-item,
.gat-settings-widget .editfield,
.gat-settings-widget .gat-edit-field-item {
  max-width: 640px !important;
  width: 100% !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
}
#settings-form fieldset,
.gat-settings-widget fieldset {
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#settings-form label.gat-edit-label,
.gat-settings-widget label.gat-edit-label {
  margin-bottom: 6px !important;
}
#settings-form .settings-input {
  background-color: #D0D4E04D !important;
  border: 1px solid #3A4150 !important;
  border-radius: var(--gat-radius-md, 8px) !important;
  color: #F0F2F5 !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}
#settings-form .settings-input:focus {
  border-color: #FFFFFF66 !important;
  background: #D0D4E04D !important;
  color: #F0F2F5 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08) !important;
}
#settings-form .gat-settings-hint,
#settings-form #pass-strength-result {
  max-width: 640px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Password Toggle Eye Button with crisp SVG */
.gat-password-field-wrap,
.bb-password-wrap {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}
.gat-password-field-wrap input,
.bb-password-wrap input {
  width: 100% !important;
  padding-right: 44px !important;
}
.gat-password-field-wrap .gat-toggle-password,
.bb-password-wrap .gat-toggle-password,
.gat-password-field-wrap .bb-toggle-password,
.bb-password-wrap .bb-toggle-password {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  transition: color 0.15s ease !important;
  text-decoration: none !important;
}
.gat-password-field-wrap .gat-toggle-password:hover,
.bb-password-wrap .gat-toggle-password:hover,
.gat-password-field-wrap .bb-toggle-password:hover,
.bb-password-wrap .bb-toggle-password:hover {
  color: #ffffff !important;
}
.gat-password-field-wrap .gat-toggle-password svg,
.bb-password-wrap .gat-toggle-password svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Default: Eye open is visible, Eye slashed is hidden */
.gat-password-field-wrap .gat-toggle-password .gat-icon-eye,
.bb-password-wrap .gat-toggle-password .gat-icon-eye {
  display: block !important;
}
.gat-password-field-wrap .gat-toggle-password .gat-icon-eye-off,
.bb-password-wrap .gat-toggle-password .gat-icon-eye-off {
  display: none !important;
}

/* Revealed state (.is-active): Eye open is hidden, Eye slashed is visible */
.gat-password-field-wrap .gat-toggle-password.is-active .gat-icon-eye,
.bb-password-wrap .gat-toggle-password.is-active .gat-icon-eye {
  display: none !important;
}
.gat-password-field-wrap .gat-toggle-password.is-active .gat-icon-eye-off,
.bb-password-wrap .gat-toggle-password.is-active .gat-icon-eye-off {
  display: block !important;
}

/* Password strength meter */
#pass-strength-result {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  text-align: center !important;
}

/* Full-width Divider Line above "Änderungen speichern" Button */
.gat-settings-widget .gat-edit-actions-bar,
.gat-profile-widget .gat-edit-actions-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: calc(100% + 48px) !important;
  margin: 24px -24px 0 -24px !important;
  padding: 20px 24px 0 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   GLOBAL BUDDYBOSS RADIO BUTTON & CHECKBOX HORIZONTAL ALIGNMENT OVERRIDE
   Guarantees that on EVERY BuddyBoss screen (Register, Profile Edit, Settings, Popovers):
   1. The Radio circle (or checkbox) and its text label ALWAYS sit horizontally side-by-side:
      (o) Label Text
      They NEVER stack vertically (circle above, text underneath)!
   2. Radio options within a group (e.g. Männlich, Weiblich, Divers, Keine Angabe) sit horizontally
      in a row with comfortable spacing!
   ========================================================================== */

/* 1. Global fieldset & options wrapper layout: options side-by-side in horizontal row */
#register-page .field_type_radio fieldset,
#register-page .field_type_checkbox fieldset,
#register-page .field_type_radio .field-wrapper,
#register-page .field_type_checkbox .field-wrapper,
#register-page .field_type_checkbox .input-options,
.register-page .field_type_radio fieldset,
.register-page .field_type_checkbox fieldset,
.editfield.field_type_radio fieldset,
.editfield.field_type_checkbox fieldset,
.editfield.field_type_radio .field-wrapper,
.editfield.field_type_checkbox .field-wrapper,
.editfield.field_type_radio .input-options,
.editfield.field_type_checkbox .input-options,
.field_type_radio fieldset,
.field_type_checkbox fieldset,
.field_type_radio .field-wrapper,
.field_type_checkbox .field-wrapper,
.field_type_radio .input-options,
.field_type_checkbox .input-options,
.profile-edit .field_type_radio fieldset,
.profile-edit .field_type_checkbox fieldset,
.gat-inline-edit-form .field_type_radio fieldset,
.gat-inline-edit-form .field_type_checkbox fieldset,
.standard-form .field_type_radio fieldset,
.standard-form .field_type_checkbox fieldset,
.field-visibility-settings .radio,
.field-visibility-settings div.radio {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

/* Remove gap on registration page in .input-options.radio-button-options */
#register-page .input-options.radio-button-options,
#register-page .input-options .radio-button-options,
#register-page .input-options,
#register-page .radio-button-options,
#register-page .field_type_radio .input-options,
#register-page .field_type_radio .radio-button-options,
#register-page .field_type_radio fieldset,
.register-page .input-options.radio-button-options,
.register-page .input-options .radio-button-options,
.register-page .input-options,
.register-page .radio-button-options,
.register-page .field_type_radio .input-options,
.register-page .field_type_radio .radio-button-options,
.register-page .field_type_radio fieldset {
  gap: 0 !important;
}

/* 2. Group Title / Legend sits on its own row */
#register-page .field_type_radio legend,
#register-page .field_type_checkbox legend,
.field_type_radio legend,
.field_type_checkbox legend,
.editfield.field_type_radio legend,
.editfield.field_type_checkbox legend {
  display: block !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  margin-bottom: 8px !important;
}

/* 3. Each individual Radio option container: STRICTLY inline-flex row, nowrap */
#register-page .standard-form div.radio,
#register-page .standard-form .radio,
#register-page .standard-form .bp-radio-wrap,
#register-page .standard-form .bp-checkbox-wrap,
#register-page .bp-radio-wrap,
#register-page .bp-checkbox-wrap,
#register-page .editfield div.radio,
#register-page .editfield .radio,
#register-page .editfield .bp-radio-wrap,
#register-page .editfield .bp-checkbox-wrap,
#register-page .field_type_radio div.radio,
#register-page .field_type_radio .radio,
#register-page .field_type_radio .bp-radio-wrap,
#register-page .field_type_checkbox .bp-checkbox-wrap,
#register-page div.radio,
#register-page .radio,
.register-page div.radio,
.register-page .radio,
.register-page .bp-radio-wrap,
.register-page .bp-checkbox-wrap,
.profile-edit div.radio,
.profile-edit .radio,
.profile-edit .bp-radio-wrap,
.profile-edit .bp-checkbox-wrap,
.gat-inline-edit-form div.radio,
.gat-inline-edit-form .radio,
.gat-inline-edit-form .bp-radio-wrap,
.gat-inline-edit-form .bp-checkbox-wrap,
.editfield div.radio,
.editfield .radio,
.editfield .bp-radio-wrap,
.editfield .bp-checkbox-wrap,
.gat-edit-field-item div.radio,
.gat-edit-field-item .radio,
.field_type_radio div.radio,
.field_type_radio .radio,
.field_type_radio .bp-radio-wrap,
.field_type_checkbox .bp-checkbox-wrap,
.field-visibility-settings div.radio,
.field-visibility-settings .radio,
.bp-wrap div.radio,
.bp-wrap .radio,
body.buddyboss-theme div.radio,
body.buddyboss-theme .radio,
#buddypress div.radio,
#buddypress .radio,
div.radio,
.radio,
.bp-radio-wrap,
.bp-checkbox-wrap,
li.radio {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 8px !important;
  margin: 4px 1.5rem 4px 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  cursor: pointer !important;
  float: none !important;
  clear: none !important;
}

/* 4. Each Radio Label: Circle strictly on the left, label strictly on the right (NO VERTICAL STACKING) */
#register-page .standard-form div.radio label,
#register-page .standard-form .radio label,
#register-page .standard-form .bp-radio-wrap label,
#register-page .standard-form .bp-checkbox-wrap label,
#register-page .bp-radio-wrap label,
#register-page .bp-checkbox-wrap label,
#register-page .editfield.field_type_radio div.radio label,
#register-page .editfield.field_type_radio .radio label,
#register-page .editfield.field_type_radio .bp-radio-wrap label,
#register-page .editfield.field_type_radio label,
#register-page .field_type_radio div.radio label,
#register-page .field_type_radio .radio label,
#register-page .field_type_radio .bp-radio-wrap label,
#register-page .field_type_checkbox .bp-checkbox-wrap label,
#register-page .field_type_radio label,
#register-page div.radio label,
#register-page .radio label,
#register-page label:has(input[type="radio"]),
#register-page input[type="radio"] + label,
.register-page div.radio label,
.register-page .radio label,
.register-page .bp-radio-wrap label,
.register-page .bp-checkbox-wrap label,
.profile-edit div.radio label,
.profile-edit .radio label,
.profile-edit .bp-radio-wrap label,
.profile-edit .bp-checkbox-wrap label,
.gat-inline-edit-form div.radio label,
.gat-inline-edit-form .radio label,
.gat-inline-edit-form .bp-radio-wrap label,
.gat-inline-edit-form .bp-checkbox-wrap label,
.editfield div.radio label,
.editfield .radio label,
.editfield .bp-radio-wrap label,
.editfield .bp-checkbox-wrap label,
.gat-edit-field-item div.radio label,
.gat-edit-field-item .radio label,
.field_type_radio div.radio label,
.field_type_radio .radio label,
.field_type_radio .bp-radio-wrap label,
.field_type_checkbox .bp-checkbox-wrap label,
.field_type_radio label,
.field-visibility-settings div.radio label,
.field-visibility-settings .radio label,
.field-visibility-settings label,
.bp-wrap div.radio label,
.bp-wrap .radio label,
body.buddyboss-theme div.radio label,
body.buddyboss-theme .radio label,
#buddypress div.radio label,
#buddypress .radio label,
div.radio label,
.radio label,
.bp-radio-wrap label,
.bp-checkbox-wrap label,
li.radio label,
label:has(input[type="radio"]),
input[type="radio"] + label {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  float: none !important;
  clear: none !important;
}

/* Ensure inner spans/text within radio & checkbox labels stay strictly inline */
#register-page .field_type_radio label *,
#register-page .field_type_radio .radio label *,
#register-page .field_type_radio .bp-radio-wrap label *,
#register-page .field_type_checkbox label *,
#register-page .field_type_checkbox .checkbox label *,
#register-page .field_type_checkbox .bp-checkbox-wrap label *,
#register-page .bp-radio-wrap *,
#register-page .bp-checkbox-wrap *,
.field_type_radio label *,
.field_type_radio .radio label *,
.field_type_radio .bp-radio-wrap label *,
.field_type_checkbox label *,
.field_type_checkbox .checkbox label *,
.field_type_checkbox .bp-checkbox-wrap label *,
.bp-radio-wrap *,
.bp-checkbox-wrap * {
  display: inline-block !important;
  vertical-align: middle !important;
  text-align: left !important;
  width: auto !important;
  margin: 0 !important;
}

/* 5. Radio Circle Input: crisp sizing, always left of text */
#register-page input[type="radio"],
#register-page div.radio input[type="radio"],
#register-page .radio input[type="radio"],
#register-page .bp-radio-wrap input[type="radio"],
.standard-form div.radio input[type="radio"],
.standard-form .radio input[type="radio"],
.standard-form .bp-radio-wrap input[type="radio"],
.profile-edit div.radio input[type="radio"],
.profile-edit .radio input[type="radio"],
.profile-edit .bp-radio-wrap input[type="radio"],
.gat-inline-edit-form div.radio input[type="radio"],
.gat-inline-edit-form .radio input[type="radio"],
.gat-inline-edit-form .bp-radio-wrap input[type="radio"],
.field_type_radio input[type="radio"],
.field_type_radio .bp-radio-wrap input[type="radio"],
.editfield input[type="radio"],
.editfield .bp-radio-wrap input[type="radio"],
.field-visibility-settings input[type="radio"],
.bp-wrap input[type="radio"],
body.buddyboss-theme input[type="radio"],
#buddypress input[type="radio"],
div.radio input[type="radio"],
.radio input[type="radio"],
.bp-radio-wrap input[type="radio"],
li.radio input[type="radio"],
input[type="radio"] {
  display: inline-block !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  flex: 0 0 18px !important;
  accent-color: #ffffff !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  float: none !important;
  clear: none !important;
}

/* ==========================================================================
   Global Modal Close Buttons — Enlarged & Aligned Flush Right Without Padding
   Applies to all modal types:
   - Post update modal (.modal-popup)
   - Likes / Reactions modal (.activity-state-popup)
   - Media / Album / Folder / Document modals (.bb-custom-modal, .modal-container, .bbm-model-wrap)
   - Activity Theatre / Single Activity modal (.activity-theatre, #activity-modal)
   - Magnific Popup modals (.mfp-content, .mfp-close)
   - Standard BuddyBoss modals (.modal-popup, .bb-model-header)
   ========================================================================== */

/* 1. Actions wrapper inside modal header */
.bb-model-header .bb-modal-header-actions,
.modal-popup .bb-model-header .bb-modal-header-actions,
.bb-modal-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* 3. Close button: uniform 24px matching all modals, positioned symmetrically */
.bb-model-close-button,
.activity-state-popup [class*="state-popup-close"],
.activity-state-popup .activity-state-popup_title a,
.bb-custom-modal .bb-model-close-button,
.bb-close-action-popup.bb-model-close-button,
.bb-modal-activity-header .bb-model-close-button,
.modal-popup .bb-model-header .bb-model-close-button,
.modal-popup .bb-model-header .bb-icon-times,
.modal-popup .bb-model-header .bb-icon-close,
.modal-container .bb-model-close-button,
.bb_more_dropdown__close_button,
.bp-close-compose-form,
.modal-header .close,
button.mfp-close,
.mfp-close {
  color: #a1a1aa !important;
  font-size: 24px !important;
  line-height: 1 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

/* 4. Hover state: clean bright white with subtle scale */
.bb-model-close-button:hover,
.activity-state-popup [class*="state-popup-close"]:hover,
.activity-state-popup .activity-state-popup_title a:hover,
.bb-custom-modal .bb-model-close-button:hover,
.bb-close-action-popup.bb-model-close-button:hover,
.bb-modal-activity-header .bb-model-close-button:hover,
.modal-popup .bb-model-header .bb-model-close-button:hover,
.modal-popup .bb-model-header .bb-icon-close:hover,
.modal-container .bb-model-close-button:hover,
.modal-header .close:hover,
button.mfp-close:hover,
.mfp-close:hover {
  color: #ffffff !important;
  transform: scale(1.1) !important;
  background: transparent !important;
}

/* 5. Inner icons: 24px crisp font size and zero padding matching Create Post */
.bb-model-close-button [class*="bb-icon"],
.bb-model-close-button .bb-icon-l,
.activity-state-popup [class*="state-popup-close"] [class*="bb-icon"],
.activity-state-popup [class*="state-popup-close"] span,
.activity-state-popup .bb-model-close-button [class*="bb-icon"],
.activity-state-popup .bb-model-close-button span,
.modal-popup .bb-model-header .bb-model-close-button [class*="bb-icon"],
.modal-popup .bb-model-header .bb-model-close-button .bb-icon-l,
button.mfp-close [class*="bb-icon"],
.mfp-close [class*="bb-icon"] {
  font-size: 24px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   Global Modal Backdrop & Window Card Uniformity
   Ensures ALL modals share the exact same backdrop transparency (rgba(0,0,0,0.42)),
   subtle blur(4px) allowing the background feed to remain comfortably visible,
   and matching #1c1c1f card surface aesthetics.
   ========================================================================== */

/* 1. Backdrop Overlay for all modals */
.activity-update-form.modal-popup,
#bp-nouveau-activity-form.modal-popup,
#bp-nouveau-activity-form-placeholder.modal-popup,
.bp-nouveau-activity-form-placeholder.modal-popup,
.modal-popup,
.activity-state-popup,
.bb-custom-modal .modal-mask,
.bbm-model-wrap.modal-mask,
.modal-mask,
.bb-activity-model-wrapper,
.activity-theatre,
.mfp-bg {
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 1 !important;
}

/* 2. Window Card Surface for all modals */
.activity-update-form.modal-popup #whats-new-form,
#bp-nouveau-activity-form.modal-popup #whats-new-form,
.modal-popup #whats-new-form,
.activity-state-popup .activity-state-popup_inner,
.bb-custom-modal .modal-container,
.modal-wrapper .modal-container,
#activity-modal.activity-modal {
  background: #1c1c1f !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Global Modal Header / Title Bar Uniformity (matching .activity-state-popup_title) */
.bb-model-header,
.modal-popup .bb-model-header,
.activity-update-form.modal-popup .bb-model-header,
#bp-nouveau-activity-form.modal-popup .bb-model-header,
.modal-popup #whats-new-form .bb-model-header,
.bb-modal-activity-header,
.activity-state-popup .activity-state-popup_title,
.bb-custom-modal .bb-model-header,
.modal-container .bb-model-header,
.modal-header,
.bbm-model-wrap .bb-model-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 14px 14px 0 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
}

.bb-model-header h3,
.bb-model-header h4,
.bb-model-header .activity-header-data,
.bb-modal-activity-header h3,
.bb-modal-activity-header h4,
.activity-state-popup .activity-state-popup_title h4,
.activity-state-popup .activity-state-popup_title h3,
.bb-custom-modal .bb-model-header h4,
.bb-custom-modal .bb-model-header h3,
.modal-container .bb-model-header h4,
.modal-container .bb-model-header h3,
.modal-header .modal-title,
.modal-header h4,
.modal-header h3 {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Datebox / Birthdate Profile Field on Profile Edit */
.profile-edit .editfield.field_type_datebox fieldset,
.profile-edit .editfield.datebox fieldset,
.profile-edit .editfield.field_type_birthdate fieldset,
.profile-edit .editfield.birthdate fieldset,
.gat-inline-edit-form .editfield.field_type_datebox fieldset,
.gat-inline-edit-form .editfield.datebox fieldset,
.gat-inline-edit-form .editfield.field_type_birthdate fieldset,
.gat-inline-edit-form .editfield.birthdate fieldset {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.profile-edit .editfield.field_type_datebox legend,
.profile-edit .editfield.datebox legend,
.profile-edit .editfield.field_type_birthdate legend,
.profile-edit .editfield.birthdate legend,
.gat-inline-edit-form .editfield.field_type_datebox legend,
.gat-inline-edit-form .editfield.datebox legend,
.gat-inline-edit-form .editfield.field_type_birthdate legend,
.gat-inline-edit-form .editfield.birthdate legend {
  width: 100% !important;
  flex-basis: 100% !important;
  margin-bottom: 8px !important;
}

.profile-edit .editfield.field_type_datebox .datebox-selects,
.profile-edit .editfield.datebox .datebox-selects,
.profile-edit .editfield.field_type_datebox .input-options,
.profile-edit .editfield.datebox .input-options,
.gat-inline-edit-form .editfield.field_type_datebox .datebox-selects,
.gat-inline-edit-form .editfield.datebox .datebox-selects,
.gat-inline-edit-form .editfield.field_type_datebox .input-options,
.gat-inline-edit-form .editfield.datebox .input-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
}

.profile-edit .editfield.field_type_datebox select,
.profile-edit .editfield.datebox select,
.profile-edit .editfield.field_type_birthdate select,
.profile-edit .editfield.birthdate select,
.gat-inline-edit-form .editfield.field_type_datebox select,
.gat-inline-edit-form .editfield.datebox select,
.gat-inline-edit-form .editfield.field_type_birthdate select,
.gat-inline-edit-form .editfield.birthdate select {
  flex: 1 1 calc(33.333% - 10px) !important;
  width: auto !important;
  min-width: 90px !important;
  height: 48px !important;
  line-height: 22px !important;
  margin-bottom: 0 !important;
  background-color: var(--input-background, #1a1a1a) !important;
  color: var(--text-color, #ffffff) !important;
  border: 1px solid var(--border-color, #333333) !important;
  border-radius: var(--input-border-radius, 6px) !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}

.profile-edit .editfield.field_type_datebox p.description,
.profile-edit .editfield.datebox p.description,
.profile-edit .editfield.field_type_birthdate p.description,
.profile-edit .editfield.birthdate p.description,
.gat-inline-edit-form .editfield.field_type_datebox p.description,
.gat-inline-edit-form .editfield.datebox p.description,
.gat-inline-edit-form .editfield.field_type_birthdate p.description,
.gat-inline-edit-form .editfield.birthdate p.description {
  width: 100% !important;
  flex-basis: 100% !important;
  margin-top: 6px !important;
  font-size: 0.8rem !important;
  color: var(--gat-text-dim, #71717a) !important;
}