/* =====================================================================
   VIBEX DESIGN SYSTEM — v2.0  «After Dark»
   Файл: /wp-content/themes/buddyboss-child/css/vibex-design-system.css
   Подключается ГЛОБАЛЬНО первым (mu-plugin loader, приоритет 5).

   ЦЕ ФУНДАМЕНТ. ЄДИНЕ ДЖЕРЕЛО CSS-ТОКЕНІВ.
   Інші CSS-файли НЕ ПЕРЕОБ'ЯВЛЯЮТЬ --vx-*. Тільки використовують.

   Палітра: #0a0612 / #ff2d7e / #a855f7 / #16e0ff
   ===================================================================== */

:root {
	/* ── ОСНОВНИЙ ФОН ── */
	--vx-bg:          #0a0612;   /* головний фон сайту */
	--vx-bg-2:        #120b1c;   /* приподнятий фон секцій */
	--vx-bg-3:        #1a1226;   /* картки */

	/* ── АКЦЕНТИ ── */
	--vx-pink:        #ff2d7e;   /* основний акцент */
	--vx-pink-2:      #ff6ad5;   /* світліший рожевий */
	--vx-purple:      #a855f7;   /* акцент 2 (фіолетовий) */
	--vx-violet:      #7c3aed;   /* акцент 3 (глибокий) */
	--vx-cyan:        #16e0ff;   /* акцент 4 (циан, hover/focus) */
	--vx-gold:        #ffd84d;   /* акцент 5 (золотий, premium) */
	--vx-green:       #2ecc71;   /* онлайн-статус */

	/* ── СВІЧЕННЯ АКЦЕНТІВ ── */
	--vx-pink-glow:   rgba(255,45,126,.55);
	--vx-cyan-glow:   rgba(22,224,255,.55);
	--vx-purple-glow: rgba(168,85,247,.45);

	/* ── ГРАДІЄНТИ ── */
	--vx-grad:        linear-gradient(135deg, #ff2d7e 0%, #a855f7 100%);
	--vx-grad-deep:   linear-gradient(135deg, #ff2d7e 0%, #a855f7 60%, #7c3aed 100%);
	--vx-grad-soft:   linear-gradient(135deg, rgba(255,45,126,.15), rgba(124,58,237,.15));
	--vx-grad-text:   linear-gradient(135deg, #ff2d7e, #a855f7);
	--vx-grad-cyan:   linear-gradient(135deg, #16e0ff, #ff2d7e);

	/* ── СКЛО (glassmorphism) ── */
	--vx-glass:       rgba(255,255,255,.045);
	--vx-glass-2:     rgba(255,255,255,.07);
	--vx-glass-3:     rgba(255,255,255,.10);

	/* ── ОБВОДКИ ── */
	--vx-line:        rgba(255,255,255,.09);
	--vx-line-soft:   rgba(255,255,255,.06);
	--vx-line-pink:   rgba(255,45,126,.25);
	--vx-line-pink-2: rgba(255,45,126,.45);

	/* ── ТЕКСТ ── */
	--vx-text:        #ffffff;
	--vx-text-2:      rgba(255,255,255,.72);
	--vx-text-3:      rgba(255,255,255,.45);
	--vx-text-4:      rgba(255,255,255,.25);

	/* ── СВІЧЕННЯ (тіні) ── */
	--vx-glow-pink:   0 0 32px rgba(255,45,126,.35);
	--vx-glow-purple: 0 0 32px rgba(168,85,247,.35);
	--vx-glow-cyan:   0 0 32px rgba(22,224,255,.35);
	--vx-glow-soft:   0 8px 40px rgba(0,0,0,.5);
	--vx-shadow-card: 0 12px 40px rgba(0,0,0,.5);

	/* ── РАДІУСИ ── */
	--vx-r-sm:   10px;
	--vx-r:      16px;
	--vx-r-lg:   22px;
	--vx-r-xl:   28px;
	--vx-r-pill: 50px;
	--vx-radius: 18px;             /* legacy alias для style.css/ui.css */

	/* ── ВІДСТУПИ (шкала) ── */
	--vx-sp-1: 4px;
	--vx-sp-2: 8px;
	--vx-sp-3: 12px;
	--vx-sp-4: 16px;
	--vx-sp-5: 24px;
	--vx-sp-6: 32px;
	--vx-sp-7: 48px;
	--vx-sp-8: 64px;

	/* ── ТИПОГРАФІКА ── */
	--vx-font-display: 'Clash Display','Space Grotesk','Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
	--vx-font-body:    'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

	/* Шкала розмірів (fluid) */
	--vx-h1: clamp(2.2rem, 5vw, 3.6rem);
	--vx-h2: clamp(1.7rem, 3.5vw, 2.6rem);
	--vx-h3: clamp(1.3rem, 2.5vw, 1.8rem);
	--vx-h4: clamp(1.05rem, 2vw, 1.3rem);
	--vx-body: 1rem;
	--vx-sm: 0.875rem;
	--vx-xs: 0.75rem;

	/* ── ПЕРЕХОДИ ── */
	--vx-ease:   cubic-bezier(.4, 0, .2, 1);
	--vx-spring: cubic-bezier(.34, 1.56, .64, 1);
	--vx-t:      .25s var(--vx-ease);
}

/* =====================================================================
   FONTS — з Google Fonts (Space Grotesk + Manrope)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* =====================================================================
   ГЛОБАЛЬНІ БАЗОВІ СТИЛІ
   ===================================================================== */
html { scroll-behavior: smooth; }

::selection {
	background: rgba(255,45,126,.30);
	color: #fff;
}

/* Брендовий скролбар (тільки WebKit/Blink — Firefox ігнорує) */
::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: var(--vx-bg); }
::-webkit-scrollbar-thumb   { background: var(--vx-pink); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--vx-cyan); }

/* =====================================================================
   v2.1 ПАТЧ — ПЕРЕОПРЕДІЛЕННЯ BUDDYBOSS CSS-ЗМІННИХ
   =====================================================================
   BuddyBoss Theme 2.x фарбує ВСЕ через свої --bb-* змінні (білий фон,
   сірий текст, синя кнопка). Цей блок підмінює їх на наші темні неон-кольори.
   Завдяки цьому БУДЬ-ЯКА сторінка BuddyBoss (профіль, активність, групи,
   повідомлення, налаштування) автоматично отримує темний неон-стиль без
   правки додаткових файлів.
   ===================================================================== */

:root {
	/* ── Фони ── */
	--bb-body-background-color:           var(--vx-bg);
	--bb-body-background-color-rgb:       10, 6, 18;
	--bb-content-background-color:        var(--vx-bg);
	--bb-content-alternate-background-color: var(--vx-bg-2);
	--bb-cover-image-background-color:    rgba(255,45,126,.18);

	/* ── Текст ── */
	--bb-headings-color:        #ffffff;
	--bb-headings-color-rgb:    255, 255, 255;
	--bb-body-text-color:       rgba(255,255,255,.85);
	--bb-body-text-color-rgb:   255, 255, 255;
	--bb-alternate-text-color:  rgba(255,255,255,.55);
	--bb-alternate-text-color-rgb: 255, 255, 255;

	/* ── Бордери ── */
	--bb-content-border-color:        var(--vx-line);
	--bb-content-border-color-rgb:    255, 255, 255;

	/* ── Primary колір (заміна синього на рожевий) ── */
	--bb-primary-color:                 var(--vx-pink);
	--bb-primary-color-rgb:             255, 45, 126;
	--bb-primary-button-background-regular:   var(--vx-pink);
	--bb-primary-button-background-hover:     #ff5fb5;
	--bb-primary-button-border-regular:       var(--vx-pink);
	--bb-primary-button-border-hover:         #ff5fb5;
	--bb-primary-button-text-regular:         #ffffff;
	--bb-primary-button-text-hover:           #ffffff;

	/* ── Secondary кнопка ── */
	--bb-secondary-button-background-regular: rgba(255,255,255,.06);
	--bb-secondary-button-background-hover:   var(--vx-pink);
	--bb-secondary-button-border-regular:     rgba(255,255,255,.10);
	--bb-secondary-button-border-hover:       var(--vx-pink);
	--bb-secondary-button-text-regular:       #ffffff;
	--bb-secondary-button-text-hover:         #ffffff;

	/* ── Лейбли (Member, Newbie, тощо) ── */
	--bb-label-background-color: rgba(255,45,126,.15);
	--bb-label-text-color:       var(--vx-pink);

	/* ── Хедер ── */
	--bb-header-background:           rgba(10,6,18,.85);
	--bb-header-alternate-background: var(--vx-bg-2);
	--bb-header-links:                #ffffff;
	--bb-header-links-hover:          var(--vx-pink);

	/* ── Бічна навігація (BuddyPanel) ── */
	--bb-sidenav-background:                          var(--vx-bg);
	--bb-sidenav-text-regular:                        rgba(255,255,255,.75);
	--bb-sidenav-text-hover:                          #ffffff;
	--bb-sidenav-text-active:                         #ffffff;
	--bb-sidenav-menu-background-color-regular:       transparent;
	--bb-sidenav-menu-background-color-hover:         rgba(255,255,255,.06);
	--bb-sidenav-menu-background-color-active:        var(--vx-pink);
	--bb-sidenav-count-text-color-regular:            rgba(255,255,255,.6);
	--bb-sidenav-count-text-color-hover:              #ffffff;
	--bb-sidenav-count-text-color-active:             var(--vx-pink);
	--bb-sidenav-count-background-color-regular:      rgba(255,255,255,.08);
	--bb-sidenav-count-background-color-hover:        var(--vx-pink);
	--bb-sidenav-count-background-color-active:       #ffffff;

	/* ── Підвал ── */
	--bb-footer-background:           var(--vx-bg);
	--bb-footer-widget-background:    var(--vx-bg);
	--bb-footer-text-color:           rgba(255,255,255,.65);
	--bb-footer-menu-link-color-regular: rgba(255,255,255,.75);
	--bb-footer-menu-link-color-hover:   var(--vx-pink);
	--bb-footer-menu-link-color-active:  var(--vx-pink);

	/* ── Логін/реєстрація (BB-secondary стилі) ── */
	--bb-login-register-link-color-regular:           var(--vx-pink);
	--bb-login-register-link-color-hover:             #ff5fb5;
	--bb-login-register-button-background-color-regular: var(--vx-pink);
	--bb-login-register-button-background-color-hover:   #ff5fb5;
	--bb-login-register-button-border-color-regular:     var(--vx-pink);
	--bb-login-register-button-border-color-hover:       #ff5fb5;
	--bb-login-register-button-text-color-regular:       #ffffff;
	--bb-login-register-button-text-color-hover:         #ffffff;

	/* ── Tooltip ── */
	--bb-tooltip-background:     rgba(15,8,28,.95);
	--bb-tooltip-background-rgb: 15, 8, 28;
	--bb-tooltip-color:          #ffffff;

	/* ── Системні стани ── */
	--bb-success-color:        #2ecc71;
	--bb-success-color-rgb:    46, 204, 113;
	--bb-warning-color:        #f5b800;
	--bb-warning-color-rgb:    245, 184, 0;
	--bb-danger-color:         #ff4d6d;
	--bb-danger-color-rgb:     255, 77, 109;
	--bb-default-notice-color:    var(--vx-cyan);
	--bb-default-notice-color-rgb: 22, 224, 255;
}

/* ─── Додаткові точкові виправлення для профілю ─── */

/* Чорний фон #page для всього сайту */
html, body, #page, .site, .site-content {
	background: var(--vx-bg) !important;
	color: var(--vx-text);
}

/* Шапка профілю: ім'я + бейдж Member видимі */
body.bp-user .user-nicename,
body.bp-user h2.user-nicename,
body.buddypress .user-nicename {
	color: #ffffff !important;
	text-shadow: 0 2px 14px rgba(255,45,126,.25);
}

body.bp-user .bp-member-type,
body.buddypress .bp-member-type {
	background: linear-gradient(135deg, rgba(255,45,126,.15), rgba(168,85,247,.15)) !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 1px solid rgba(255,45,126,.35) !important;
}

/* item-meta — @username • Joined • Active */
body.bp-user .item-meta,
body.buddypress .item-meta {
	color: rgba(255,255,255,.55) !important;
}
body.bp-user .item-meta .mention-name,
body.buddypress .item-meta .mention-name {
	color: var(--vx-pink) !important;
	font-weight: 600;
}

/* myCred / Newbie tag */
body.bp-user .mycred-bboss-tag,
body.buddypress .mycred-bboss-tag {
	background: rgba(255,255,255,.06) !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	color: #ffffff !important;
}

/* Адмін-бар коли не залогінений (показує "Log In Register" на жовтому) */
#wpadminbar {
	background: rgba(10,6,18,.95) !important;
}
#wpadminbar .ab-top-menu > li > a {
	color: rgba(255,255,255,.7) !important;
}

/* Sign in / Sign up кнопки у шапці на сторінках профілю — підмалювати */
.signup, .signin-button {
	background: var(--vx-grad) !important;
	color: #fff !important;
	border-color: transparent !important;
}