/* ═══════════════════════════════════════════
   VOID PROTOCOL — Design Token System v1.0
   NEXUS Lifestyle Platform
   ═══════════════════════════════════════════ */

:root {
  --void:       #050508;
  --surface-0:  #080810;
  --surface-1:  #0D0D1A;
  --surface-2:  #111124;
  --surface-3:  #16163A;

  --border-dim:    rgba(167,139,250,0.08);
  --border-mid:    rgba(167,139,250,0.18);
  --border-bright: rgba(167,139,250,0.35);

  --violet:      #A78BFA;
  --violet-dim:  rgba(167,139,250,0.12);
  --violet-glow: rgba(167,139,250,0.25);

  --magenta:     #EC4899;
  --magenta-dim: rgba(236,72,153,0.12);

  --cyan:        #22D3EE;
  --cyan-dim:    rgba(34,211,238,0.10);

  --amber:     #F59E0B;
  --amber-dim: rgba(245,158,11,0.12);
  --green-ok:  #10B981;
  --red-alert: #EF4444;

  --ring-single-man:    #A78BFA;
  --ring-single-woman:  #EC4899;
  --ring-couple:        #F59E0B;
  --ring-polycule:      #22D3EE;
  --ring-kinkster:      #EF4444;
  --ring-club:          #10B981;
  --ring-creator:       #F97316;

  --text-primary:   rgba(255,255,255,0.92);
  --text-secondary: rgba(255,255,255,0.55);
  --text-muted:     rgba(255,255,255,0.28);

  --font-display: 'Rajdhani', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-body:    'DM Sans', sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --fast: 0.12s ease;
  --mid:  0.22s ease;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Body ── */
body {
  background-color: var(--void) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Dot-grid atmosphere — z-index: -1 keeps it BEHIND all content ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(167,139,250,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 3px
  );
  pointer-events: none;
  z-index: -1;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary) !important;
}
code, pre, kbd, .mono {
  font-family: var(--font-mono) !important;
  font-size: 11px;
  letter-spacing: 0.04em;
}
a { color: var(--violet); text-decoration: none; transition: color var(--fast); }
a:hover { color: #C4B5FD; }
p, span, div, li, td, th, label { color: inherit; }

/* ── WoWonder: Header ── */
/* NEXUS: DO NOT add backdrop-filter to .header-container.
   backdrop-filter creates a stacking context even without position. Without an
   explicit position+z-index, that stacking context sits at z-index:auto (DOM order,
   painted at step 6). The page columns (.leftcol/.rightcol) have position:relative +
   z-index 1-3, so they paint at step 7 — OVER everything inside .header-container,
   including all navbar dropdowns. Keep backdrop-filter ONLY on the navbar itself,
   which is position:fixed + z-index:1050 → stacking context at step 7 with z-index
   1050, above the columns. */
.header-container {
  background: rgba(8,8,16,0.96) !important;
  border-bottom: 1px solid var(--border-dim) !important;
  box-shadow: none !important;
}
.header-container .navbar,
.navbar.navbar-default.navbar-fixed-top {
  background: rgba(8,8,16,0.96) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 1050 !important;
}
/* Keep page columns below the navbar's stacking context (z-index 1050) */
.leftcol  { position: relative !important; z-index: 2 !important; }
.middlecol { position: relative !important; z-index: 1 !important; }
.rightcol { position: relative !important; z-index: 3 !important; }
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a svg {
  color: var(--text-secondary) !important;
  stroke: currentColor;
}
.navbar-default .navbar-nav > li > a:hover { color: var(--violet) !important; }
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover { color: var(--violet) !important; }

/* ── WoWonder: Page background / layout ── */
.content-container { background: transparent !important; }
.page-margin        { background: transparent !important; }

/* ── WoWonder: Main content area ── */
.wow_content,
.wow_content.order-by {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-dim) !important;
  box-shadow: none !important;
}

/* ── WoWonder: Posts / panels ── */
.post .panel,
.post .panel-white,
.panel.panel-white,
.panel-shadow {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-dim) !important;
  box-shadow: none !important;
}
.post .panel .panel-body { background: var(--surface-1) !important; }
.post .post-heading .meta .title a { color: var(--text-primary) !important; }
.post .post-heading .meta .title a:hover { color: var(--violet) !important; }
.post .post-heading .meta .time,
.post .post-heading .meta .time a { color: var(--text-muted) !important; }

.post .post-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--border-dim) !important;
}
.post .post-footer .btn,
.post .post-footer .like-btn,
.post .post-footer .comment-btn,
.post .post-footer .share-btn,
.post .post-footer .reaction-btn {
  color: var(--text-secondary) !important;
  background: transparent !important;
}
.post .post-footer .btn:hover { color: var(--violet) !important; }

/* Post comment area */
.post .post-footer .comments-list .comment .comment-heading {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-dim) !important;
}
.post .post-footer .comments-list .comment .comment-heading .user,
.post .post-footer .comments-list .comment .comment-heading .user a {
  color: var(--text-primary) !important;
}
.post .post-footer .comments-list .comment .comment-heading .time { color: var(--text-muted) !important; }
.post .post-footer .textarea { background: var(--surface-2) !important; color: var(--text-primary) !important; }
.post .post-footer .comments-list .reply .reply-heading .user { color: var(--text-primary) !important; }

/* ── WoWonder: Left sidebar ── */
.left-sidebar { background: transparent !important; }

/* ── WoWonder: Right sidebar widgets (actual WW class names) ── */
.wow_side_loggd_usr,
.wow_side_online,
.wow_side_invite_prnt,
.sidebar .list-group,
.featured-users {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
  overflow: visible !important;
}
.wow_side_loggd_usr_cvr {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  overflow: hidden !important;
}
.wow_side_invite { background: transparent !important; color: var(--text-secondary) !important; }
.wow_side_invite p { color: var(--text-secondary) !important; }
.wow_side_invite > svg { opacity: 0.4; filter: grayscale(1) brightness(3); }
.wow_side_online p { color: var(--text-primary) !important; font-family: var(--font-display) !important; letter-spacing: 0.04em; }
.wo_user_side_info li a { color: var(--text-secondary) !important; }
.wo_user_side_info li a b { color: var(--text-muted) !important; }
.wo_user_side_info li a span:last-child { color: var(--text-primary) !important; font-weight: 600; }

/* ── WoWonder: override hard-coded top:4px on account dropdown ── */
.navbar-default .open > .dropdown-menu.ani-acc-menu { top: 100% !important; }

/* ── WoWonder: Notification / dropdown lists ── */
.notification-list { background: transparent !important; }
.notification-list:hover { background: var(--violet-dim) !important; }
.dropdown-menu {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-mid) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7) !important;
}
.dropdown-menu > li > a,
.dropdown-menu > li > div { color: var(--text-secondary) !important; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background: var(--violet-dim) !important; color: var(--violet) !important; }
.show-message-link-container { background: var(--surface-2) !important; color: var(--text-muted) !important; }

/* ── WoWonder: List groups ── */
.list-group-item { background: var(--surface-1) !important; border-color: var(--border-dim) !important; color: var(--text-secondary) !important; }
.list-group-item:first-child,
.list-group-item:last-child { background: var(--surface-1) !important; color: var(--text-secondary) !important; }
.list-group-item:hover,
.list-group-item.active { background: var(--violet-dim) !important; color: var(--violet) !important; }

/* ── WoWonder: Ads / blog wrapper ── */
.blog-com-wrapper, .movies-com-wrapper { background: var(--surface-1) !important; }

/* ── WoWonder: Alerts ── */
.alert { border-radius: var(--radius-sm) !important; }
.alert-danger  { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.25) !important; color: #FCA5A5 !important; }
.alert-success { background: rgba(16,185,129,0.12) !important; border-color: rgba(16,185,129,0.25) !important; color: #6EE7B7 !important; }
.alert-info    { background: rgba(34,211,238,0.10) !important; border-color: rgba(34,211,238,0.20) !important; color: var(--cyan) !important; }
.alert-warning { background: var(--amber-dim) !important; border-color: rgba(245,158,11,0.25) !important; color: var(--amber) !important; }

/* ── Inputs ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea, select {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  transition: border-color var(--fast);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--border-mid) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--violet-dim) !important;
  background: var(--surface-2) !important;
}
::placeholder { color: var(--text-muted) !important; }
.search-container .search-input:focus { background: var(--surface-2) !important; color: var(--text-primary) !important; }

/* ── Buttons ── */
.btn-main, .btn-mat.btn-main,
button.btn-main,
button[type="submit"].btn-main {
  background: var(--violet) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.btn-main:hover, .btn-mat.btn-main:hover { opacity: 0.85 !important; }

.btn-default, .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--text-secondary) !important;
}
.btn-default:hover { border-color: var(--violet) !important; color: var(--violet) !important; }

/* ── WoWonder: Login / Welcome page ── */
/* Override WoWonder's login-page inline body style via higher specificity */
html body.login-page,
html body { background-color: var(--void) !important; }

.wrapper { background: var(--void) !important; }
.login { background: var(--void) !important; }

/* Hide the decorative left panel on login, show a clean single-column card */
.login_left_combo_parent { display: none !important; }

.col-md-6:has(.login_innre),
.login .col-md-6 { width: 100% !important; max-width: 440px !important; margin: 60px auto !important; padding: 0 !important; }

.login_innre {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--radius-lg) !important;
  padding: 40px !important;
}
.login_innre p.title { font-family: var(--font-display) !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: var(--violet) !important; }
.login_innre p.desc { color: var(--text-muted) !important; font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: 0.04em !important; }
.login_innre .errors { min-height: 0; }
.forgot_password a, .login_innre a { color: var(--text-muted) !important; font-size: 12px; }
.forgot_password a:hover, .login_innre a:hover { color: var(--violet) !important; }
.wow_form_fields label { color: var(--text-secondary) !important; font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }

/* Welcome header bar */
#welcomeheader { background: rgba(8,8,16,0.96) !important; border-bottom: 1px solid var(--border-dim) !important; }
#welcomeheader .mdbtn { background: var(--violet) !important; color: #fff !important; font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }

/* ── WoWonder: Modals ── */
.modal-content, .wow_mat_pops .modal-content {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--radius-lg) !important;
}
.modal-header { border-bottom: 1px solid var(--border-dim) !important; }
.modal-footer { border-top: 1px solid var(--border-dim) !important; }
.modal-title, .wow_pops_head { color: var(--text-primary) !important; }
.modal-backdrop { background: rgba(5,5,8,0.85) !important; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-mid); }

/* ── Keyframes ── */
@keyframes nexus-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nexus-pulse-ring {
  0%,100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.1; transform: scale(1.12); }
}
@keyframes nexus-status-blink {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
@keyframes nexus-bar-load { from { width: 0; } }

/* ── NEXUS utility classes ── */
.nexus-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; border: 1px solid;
}
.nexus-tag-violet  { background: var(--violet-dim);  color: var(--violet);  border-color: rgba(167,139,250,0.2); }
.nexus-tag-magenta { background: var(--magenta-dim); color: var(--magenta); border-color: rgba(236,72,153,0.2); }
.nexus-tag-cyan    { background: var(--cyan-dim);    color: var(--cyan);    border-color: rgba(34,211,238,0.2); }
.nexus-tag-amber   { background: var(--amber-dim);   color: var(--amber);   border-color: rgba(245,158,11,0.2); }

.nexus-display { font-family: var(--font-display) !important; font-weight: 700; letter-spacing: 0.05em; }
.nexus-mono    { font-family: var(--font-mono) !important; font-size: 10px; letter-spacing: 0.06em; }