/* ═══════════════════════════════════════════════════
   SCARS — components.css
   All reusable UI components shared across every page.
   Loaded after global.css.
═══════════════════════════════════════════════════ */

/* ── NAV ICONS  (search · bell · profile) ── */
.nav-icons { display:flex; align-items:center; gap:8px; }
.ni-btn {
  width:36px; height:36px; border-radius:50%;
  background:transparent; border:1px solid var(--border);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .3s,border-color .3s,transform .2s;
  position:relative; flex-shrink:0;
}
.ni-btn:hover           { background:rgba(255,255,255,.06); transform:scale(1.08); }
.ni-btn svg             { width:15px; height:15px; stroke:var(--dim2); fill:none; stroke-width:1.5; stroke-linecap:round; transition:stroke .3s; }
.ni-btn:hover svg       { stroke:var(--text); }
.ni-btn.accent:hover    { border-color:rgba(201,165,92,.4); }
.ni-btn.accent:hover svg{ stroke:var(--amber,var(--gold)); }

.notif-dot {
  position:absolute; top:6px; right:6px;
  width:6px; height:6px; border-radius:50%;
  background:#e05a5a; border:1.5px solid var(--bg);
  animation:ndot 2s ease-in-out infinite;
}

/* ── SEARCH OVERLAY ── */
#search-overlay {
  position:fixed; inset:0; z-index:3000;
  background:rgba(7,7,10,.96); backdrop-filter:blur(12px);
  display:flex; flex-direction:column; align-items:center; padding-top:18vh;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s,visibility .35s;
}
body.light #search-overlay { background:rgba(244,240,232,.96); }
#search-overlay.open { opacity:1; visibility:visible; pointer-events:all; }

.so-label      { font-size:8px; letter-spacing:6px; color:var(--dim2); text-transform:uppercase; margin-bottom:32px; }
.so-label span { color:var(--amber,var(--gold)); margin-left:4px; }
.so-input-wrap { position:relative; width:min(680px,88vw); }

#search-input {
  width:100%; background:transparent; border:none;
  border-bottom:1.5px solid var(--border);
  padding:16px 48px 16px 0;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(28px,5vw,52px); font-weight:300;
  color:var(--text); outline:none;
  transition:border-color .3s; caret-color:var(--amber,var(--gold));
}
#search-input:focus        { border-bottom-color:var(--amber,var(--gold)); }
#search-input::placeholder { color:var(--dim); }

.so-close { position:absolute; right:0; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:9px; letter-spacing:3px; color:var(--dim2); transition:color .3s; }
.so-close:hover { color:var(--text); }

.so-results { width:min(680px,88vw); margin-top:40px; display:flex; flex-direction:column; gap:2px; max-height:40vh; overflow-y:auto; }
.so-result  { padding:16px 20px; border:1px solid var(--border); cursor:pointer; text-decoration:none; display:block; transition:background .25s,border-color .25s; }
.so-result:hover          { background:rgba(255,255,255,.04); border-color:rgba(201,165,92,.2); }
body.light .so-result:hover { background:rgba(0,0,0,.04); }

.sr-tag   { font-size:8px; letter-spacing:4px; color:var(--amber,var(--gold)); text-transform:uppercase; margin-bottom:5px; }
.sr-title { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:400; color:var(--text); line-height:1.3; }
.sr-desc  { font-size:10px; letter-spacing:1px; color:var(--dim2); margin-top:4px; line-height:1.5; }
.so-empty { font-family:'Cormorant Garamond',serif; font-size:20px; font-style:italic; color:var(--dim); margin-top:24px; }
.so-hint  { font-size:8px; letter-spacing:3px; color:var(--dim); margin-top:20px; }

/* ── NOTIFICATION DROPDOWN ── */
#notif-menu {
  position:fixed; top:72px; right:96px; z-index:2000;
  background:#111113; border:1px solid var(--border); width:320px;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
  transition:opacity .3s,transform .3s,visibility .3s;
  box-shadow:0 24px 48px rgba(0,0,0,.5);
}
#notif-menu.open       { opacity:1; visibility:visible; pointer-events:all; transform:translateY(0); }
body.light #notif-menu { background:#eee9df; }

.nm-hdr   { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.nm-hdr-l { font-size:9px; letter-spacing:4px; color:var(--text); text-transform:uppercase; }
.nm-hdr-r { font-size:8px; letter-spacing:2px; color:var(--amber,var(--gold)); cursor:pointer; }
.nm-item  { padding:14px 20px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .25s; }
.nm-item:hover            { background:rgba(255,255,255,.03); }
body.light .nm-item:hover { background:rgba(0,0,0,.03); }
.nm-item:last-child { border-bottom:none; }
.nm-title { font-size:11px; letter-spacing:1px; color:var(--text); margin-bottom:4px; }
.nm-desc  { font-size:9px; letter-spacing:1px; color:var(--dim2); line-height:1.5; }
.nm-time  { font-size:8px; letter-spacing:2px; color:var(--dim); margin-top:5px; }
.nm-empty { padding:28px 20px; text-align:center; font-family:'Cormorant Garamond',serif; font-size:16px; font-style:italic; color:var(--dim2); }

/* ── PROFILE MENU ── */
#profile-menu {
  position:fixed; top:80px; right:100px; z-index:500;
  background:#111113; border:1px solid var(--border); min-width:220px;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
  transition:opacity .3s,transform .3s,visibility .3s;
  box-shadow:0 24px 48px rgba(0,0,0,.5);
}
#profile-menu.open       { opacity:1; visibility:visible; pointer-events:all; transform:translateY(0); }
body.light #profile-menu { background:#ede8db; box-shadow:0 24px 48px rgba(0,0,0,.15); }

.pm-user   { padding:20px 22px 16px; border-bottom:1px solid var(--border); }
.pm-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--amber),#a07020);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#0c0c0e;
  margin-bottom:10px; font-family:'Barlow Condensed',sans-serif; letter-spacing:1px;
}
.pm-name  { font-size:13px; font-weight:600; letter-spacing:1px; color:var(--text); margin-bottom:2px; }
.pm-email { font-size:9px; letter-spacing:2px; color:var(--dim2); }

.pm-section            { padding:8px 0; border-bottom:1px solid var(--border); }
.pm-section:last-child { border-bottom:none; }
.pm-item {
  display:flex; align-items:center; gap:12px; padding:10px 22px;
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--dim2); cursor:pointer; text-decoration:none;
  transition:color .25s,background .25s;
}
.pm-item:hover        { color:var(--text); background:rgba(255,255,255,.03); }
.pm-item.danger:hover { color:#e05555; background:rgba(224,85,85,.05); }
.pm-item svg          { width:14px; height:14px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; }
body.light .pm-item:hover { background:rgba(0,0,0,.04); }

/* ── PAGE LOADER ── */
#page-loader {
  position:fixed; inset:0; z-index:8000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .65s ease;
}
#page-loader.done { opacity:0; pointer-events:none; }
.pl-label { font-size:8px; letter-spacing:8px; color:var(--dim2); text-transform:uppercase; }
.pl-bar   { width:100px; height:1px; background:var(--border); position:relative; overflow:hidden; }
.pl-bar::after {
  content:''; position:absolute; left:-100%; top:0; height:100%; width:100%;
  background:var(--accent,var(--gold));
  animation:plsweep 1.3s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── MOBILE NAV ── */
#mob-btn {
  display:none; position:fixed; top:26px; right:20px; z-index:600;
  width:38px; height:38px; background:transparent;
  border:1px solid var(--border); cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  transition:border-color .3s;
}
#mob-btn:hover { border-color:rgba(201,165,92,.4); }
#mob-btn span  { display:block; width:18px; height:1.5px; background:var(--text); transition:transform .32s,opacity .32s; }
#mob-btn.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
#mob-btn.open span:nth-child(2) { opacity:0; }
#mob-btn.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

#mob-menu {
  position:fixed; inset:0; z-index:399; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:0; pointer-events:none; transform:translateY(-10px);
  transition:opacity .38s,transform .38s;
}
#mob-menu.open { opacity:1; pointer-events:all; transform:translateY(0); }
body.light #mob-menu { background:#f4f0e8; }

.mob-lnk {
  font-family:'Cormorant Garamond',serif; font-size:44px; font-weight:700;
  color:var(--dim); text-decoration:none; letter-spacing:1px;
  transition:color .3s; display:flex; align-items:center; gap:14px;
}
.mob-lnk:hover,.mob-lnk.live { color:var(--text); }
.mob-lnk .mob-live-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); animation:blink 2s ease-in-out infinite; }
.mob-divider { width:1px; height:40px; background:var(--border); }
.mob-close   { margin-top:12px; font-size:8px; letter-spacing:6px; color:var(--dim2); background:none; border:none; cursor:pointer; text-transform:uppercase; transition:color .3s; }
.mob-close:hover { color:var(--gold); }
@media(max-width:860px) { #mob-btn { display:flex; } }

/* ── COMING SOON EMAIL CAPTURE ── */
.cs-capture {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(7,7,10,.97); border-top:1px solid var(--border);
  padding:20px 28px; transform:translateY(100%);
  transition:transform .45s cubic-bezier(.16,1,.3,1); z-index:5;
}
body.light .cs-capture             { background:rgba(244,240,232,.97); }
.blk:not(.live):hover .cs-capture  { transform:translateY(0); }
.cs-label { font-size:8px; letter-spacing:4px; color:var(--dim2); text-transform:uppercase; margin-bottom:10px; }
.cs-row   { display:flex; gap:8px; }
.cs-input {
  flex:1; background:transparent; border:1px solid var(--border);
  padding:8px 12px; font-family:'Barlow Condensed',sans-serif;
  font-size:12px; color:var(--text); outline:none; transition:border-color .3s;
}
.cs-input:focus        { border-color:rgba(201,165,92,.4); }
.cs-input::placeholder { color:var(--dim); }
.cs-btn {
  background:rgba(201,165,92,.1); border:1px solid rgba(201,165,92,.3);
  padding:8px 16px; font-family:'Barlow Condensed',sans-serif;
  font-size:9px; letter-spacing:3px; color:var(--amber,var(--gold));
  cursor:pointer; transition:background .3s; white-space:nowrap;
}
.cs-btn:hover { background:rgba(201,165,92,.2); }

/* ── FOOTER (shared base) ── */
footer       { border-top:1px solid var(--border); background:var(--bg); }
.f-logo      { font-size:12px; font-weight:700; letter-spacing:8px; color:var(--dim2); }
.f-logo .a   { color:var(--amber); }
.f-copy      { font-size:8px; letter-spacing:3px; color:var(--dim); }
.f-l         { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:8px; color:var(--text); }
.f-l .a      { color:var(--amber); }
.f-sub       { font-size:9px; letter-spacing:6px; color:var(--dim2); margin-left:16px; text-transform:uppercase; }
.f-r         { font-size:9px; letter-spacing:2px; color:var(--dim); }

/* ── PERFORMANCE ── */
.blocks-section,.sec,.con-panels,#connect,#videos,.how-strip {
  content-visibility:auto; contain-intrinsic-size:0 600px;
}

/* ═══════════════════════════════════════════════
   GLOBAL LIGHT THEME — comprehensive overrides
   Applied here (loaded on every page) so no page
   needs its own body.light nav rules.
═══════════════════════════════════════════════ */

/* Fixed top nav — all pages */
body.light nav:not(.settings-nav) {
  background: linear-gradient(to bottom, rgba(248,244,238,.98) 60%, transparent) !important;
}

/* Sticky section nav (education, investments, stocks) */
body.light .snav,
body.light .s-nav {
  background: rgba(248,244,238,.97) !important;
  border-bottom-color: rgba(28,24,20,.1) !important;
}

/* Settings sidebar nav — should be transparent on light */
body.light .settings-nav { background: transparent !important; }

/* Nav icon hover on light */
body.light .ni-btn:hover { background: rgba(0,0,0,.05) !important; }

/* Page loaders on light */
body.light #page-loader { background: var(--bg) !important; }

/* Mobile nav */
body.light #mob-btn span { background: var(--text); }

/* Hover effects context — buttons on light */
body.light .h-pill,
body.light .chip,
body.light .ap,
body.light .asset-pill { background: rgba(0,0,0,.05); }

/* Curtain on light */
body.light #curtain { background: var(--bg) !important; }

/* Snav active/hover on light */
body.light .snav-link:hover,
body.light .snav-link.on { color: var(--text) !important; border-color: var(--gold) !important; }

/* Block hover on light */
body.light .blk { background: var(--bg) !important; }
body.light .blk:hover { filter: brightness(.97); }

/* Cards on light */
body.light .nc,
body.light .b-card,
body.light .vis-card,
body.light .stat-item { background: var(--bg2) !important; }

/* Forms and inputs on light */
body.light input,
body.light textarea,
body.light select { background: var(--bg2) !important; color: var(--text) !important; border-color: var(--border) !important; }
body.light ::placeholder { color: var(--dim) !important; }

/* sf-policy-item on light */
body.light .sf-policy-item { background: var(--bg2) !important; }

/* ── NAV GRADIENT (shared across all pages) ── */
/* Pages that define their own nav CSS override this */
nav:not(.settings-nav) {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(to bottom,rgba(7,7,10,.98) 60%,transparent);
}
.n-back {
  display:flex; align-items:center; gap:10px; font-size:9px;
  letter-spacing:5px; color:var(--dim2); text-decoration:none;
  transition:color .3s; text-transform:uppercase;
}
.n-back:hover { color:var(--amber); }
.n-back svg { transition:transform .3s; }
.n-back:hover svg { transform:translateX(-4px); }
.n-logo { font-size:14px; font-weight:700; letter-spacing:8px; color:var(--text); text-decoration:none; }
.n-logo .a { color:var(--amber); font-style:italic; }