/* ===============================
   BASE RESET
================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, 
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #1a1b24;
  color: #949597;
  overflow-x: hidden;
}


/* ===============================
   COLOR PALETTE
================================= */
:root {
  --color-bg-dark: #1a1b24;
  --color-bg-sidebar: #111113;
  --color-bg-right: #20252e;
  --color-text-main: #b2b4ba;

  --color-accent-red: #b02e2e;
  --color-accent-gold: #c49f57;
  --color-accent-blue: #6a86a1;
  --color-accent-green: #4e715d;
  --color-accent-brown: #7d6244;
  --color-accent-teal: #3a6e65;

  --color-link: #6a86a1;
  --color-white: #ffffff;
}


/* ===============================
   TYPOGRAPHY
================================= */
a {
  color: var(--color-text-main);
  text-decoration: none !important;
}

p {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 24px;
}

h3 {
  margin: 25px 0 10px;
  padding-left: 5px;
  text-transform: uppercase;
  color: var(--color-accent-green);
}

ol {
  padding-left: 40px;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 24px;
}

ol li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}


/* ===============================
   LAYOUT STRUCTURE
================================= */
.sidebar {
  background: var(--color-bg-sidebar);
  width: 230px;
  padding: 20px;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  overflow-y: auto;
}

.aside_middle {
  margin-left: 230px;
  margin-right: 280px;
  width: calc(100% - 510px);
  min-height: 100vh;
  overflow-y: auto;
}

.aside_right {
  background-color: var(--color-bg-right);
  padding: 20px;
  width: 280px;
  min-height: 100vh;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.03);
  position: fixed;
  top: 0; right: 0; bottom: 0;
  overflow-y: auto;
}

.aside_middle_nr {
  margin-left: 230px;
  padding: 20px;
  min-height: 100vh;
  overflow-y: auto;
}


/* ===============================
   SIDEBAR MENU
================================= */
.sidebar .logo {
  width: 95%;
  text-align: left;
  margin-bottom: 20px;
}
.sidebar .logo img { max-width: 100%; height: auto; }

.sidebar .menu-heading {
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--color-text-main);
  font-weight: bold;
}

.sidebar .menu ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.sidebar .menu ul li { margin: 5px; }

.sidebar .menu ul li a {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 11px;
  padding: 2px;
  border-radius: 4px;
  transition: background 0.3s;
  color: var(--color-text-main);
}
.sidebar .menu ul li a:hover { background: rgba(255, 255, 255, 0.1); }

.menu-item { margin-right: 8px; }

.new-tag {
  background: var(--color-accent-red);
  color: var(--color-white);
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 5px;
  position: relative;
  top: -2px;
}

/* Menu item colors by order */
.sidebar .menu ul li:nth-child(1) .menu-item { color: var(--color-accent-blue); }
.sidebar .menu ul li:nth-child(2) .menu-item { color: var(--color-accent-gold); }
.sidebar .menu ul li:nth-child(3) .menu-item { color: var(--color-accent-brown); }
.sidebar .menu ul li:nth-child(4) .menu-item { color: var(--color-accent-teal); }
.sidebar .menu ul li:nth-child(5) .menu-item { color: var(--color-accent-green); }
.sidebar .menu ul li:nth-child(6) .menu-item { color: var(--color-accent-blue); }
.sidebar .menu ul li:nth-child(7) .menu-item { color: var(--color-accent-gold); }
.sidebar .menu ul li:nth-child(8) .menu-item { color: var(--color-accent-brown); }

.sidebar .social-icons {
  margin-top: 50px;
  text-align: left;
}
.sidebar .social-icons a { margin: 0 10px; transition: color 0.3s; }
.sidebar .social-icons a:hover { color: var(--color-white); }


/* ===============================
   COMMON FORM STYLES
================================= */

.custom_label {
  font-size: 12px;
  color: var(--color-text-main);
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
  color:#888;
}

.tb-input,
.tb-select,
.tb-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  background: #2c2d36;
  border: 1px solid #444;
  border-radius: 6px;
  color: var(--color-white);
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.tb-input:focus,
.tb-select:focus,
.tb-textarea:focus {
  border-color: var(--color-accent-gold);
  outline: none;
}

.tb-checkbox {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--color-text-main);
  margin: 10px 0;
}
.tb-checkbox input {
  margin-right: 8px;
  accent-color: var(--color-accent-gold);
}
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #2c2d36 inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===============================
   TABLE (TrustyBull Custom Style)
================================= */
.dark_table {
  overflow-x: auto; /* Enable horizontal scroll on mobile */
  margin: 5px 20px 20px 20px;
}

/* Apply styles directly to the table */
.dark_table table {
  width: 100%;
  background: #1a1a1a;
  font-size: 13px;
  text-transform: uppercase;
  border-collapse: collapse;
  min-width: 1000px;
  font-family: Arial, sans-serif;
}

/* Header */
.dark_table table th {
  background: black;
  padding: 10px;
  font-size: 10px;
  color: #949597;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dark_table table tr:hover {
  background-color: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.02);
}

/* ========== Locked Row ========== */
.dark_table table tr.locked-row {
  position: relative;
  pointer-events: none;
  user-select: none;
}

/* Blur only the cell content */
.dark_table table tr.locked-row td {
  filter: blur(3px) brightness(0.5);
  opacity: 0.5;
}

.dark_table table tr.locked-row::after {
  content: "🔒 Higher Level Required";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: rgba(180, 180, 180, 0.3);  /* subtle grey with transparency */
  letter-spacing: 1px;
  text-shadow: 
    1px 1px 0 rgba(0, 0, 0, 0.3),  /* light inner shadow for engraving */
   -1px -1px 0 rgba(255, 255, 255, 0.05);  /* soft bevel feel */
  background: transparent;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  z-index: 2;
}


/* Body cells */
.dark_table table td {
  border: 1px solid rgba(255, 255, 255, 0.04);  /* subtle & premium */
  padding: 10px;
  color: #949597;
  text-align: right;
  white-space: nowrap;
}

/* Left-aligned content override */
.dark_table table td.text-left,
.dark_table table th.text-left {
  text-align: left;
}

/* Actions column (first column) tight and left-aligned */
.dark_table table th:first-child,
.dark_table table td:first-child {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  padding: 4px 20px 4px 8px;
}

/* Flipped badge */
.dark_table .badge {
  background-color: #0a7400;
  color: #fff;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  margin-left: 6px;
  font-weight: 500;
}

/* Backgrounds for row columns */
.td_bg_1 { background-color: #1a1a1a; } /* Dark Grey / Actions */
.td_bg_2 { background-color: #161d26; } /* Bluish Grey / Equity */
.td_bg_3 { background-color: #1f1a26; } /* Purple Black / F&O */
.td_bg_4 { background-color: #1e2621; } /* Green Black / Summary */

/* ROI colors */
.dark_table .up {
  color: #00e676;
  font-weight: bold;
}
.dark_table .down {
  color: #ff5252;
  font-weight: bold;
}
.dark_table .bg-green {
  color: #00e676;
  font-weight: bold;
}
.dark_table .bg-red {
  color: #ff5252;
  font-weight: bold;
}

/* Chart button styling */
.dark_table table td a {
  display: inline-block;
  background-color: #333;
  color: #ffd700;
  padding: 4px 8px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  transition: background-color 0.2s ease;
}
.dark_table table td a:hover {
  background-color: #444;
  color: #fff;
}

/* Hover effect on row */
.dark_table table tbody tr:hover {
  background-color: #1e1e1e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .dark_table table {
    font-size: 13px;
  }
  .dark_table table th,
  .dark_table table td {
    padding: 10px;
  }
}

/* Custom Scrollbar */
.dark_table::-webkit-scrollbar {
  height: 12px;
}
.dark_table::-webkit-scrollbar-track {
  background: #1d232e;
}
.dark_table::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 6px;
}
.dark_table::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* ===============================
   FILTER & SORTING
================================= */

.stickytbull {
  --tb-bg: #161b22;       /* match GitHub-dark style base */
  --tb-panel: #1c222f;    /* slightly lighter panel */
  --tb-chip: #202837;
  --tb-chipb: #283347;
  --tb-line: #2a354a;
  --tb-muted: #9aa3b2;
  --tb-text: #e6edf3;
  --tb-red: #e74c3c;
  --tb-green: #1dd1a1;
  --tb-blue: #3b82f6;
  --tb-amber: #f1c40f;
  margin: 20px 23px 5px 21px;
  color: var(--tb-text);
  font: 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ---------- header: left (pills) + right (cron links) ---------- */
.stickytbull .header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.stickytbull .total-users {
    font-size:15px;
    text-transform: uppercase;
    color:#949597;
    font-weight: 600;
}

/* group containers */
.stickytbull .total-users,
.stickytbull .transaction-filter{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}

/* ---------- pill buttons (Missed / Overdue / Bullish / Bearish / Flipped) ---------- */
.stickytbull .total-users a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  background: var(--tb-chip);
  border: 1px solid rgba(255,255,255,.03);
  color:#949597;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:700;
  font-size:11px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  text-decoration:none;
  line-height:1;
}
.stickytbull .total-users a:hover{
  background: var(--tb-chipb);
  color: var(--tb-text);
  border-color:#2a3447;
}
.stickytbull .total-users a:active{ transform: translateY(1px); }

/* Active state – you toggle bg-red in PHP; make it look like an active pill */
.stickytbull .total-users a.bg-red{
  background: #2b1e22;
  color: #ffb4b4;
  border-color:#5b232b;
  box-shadow: inset 0 0 0 1px rgba(231,76,60,.25);
}

/* ---------- cron/utility links on the right ---------- */
.stickytbull .transaction-filter a{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  background: var(--tb-panel);
  border: 1px solid rgba(255,255,255,.03);
  color:#949597;
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-decoration:none;
  transition: background .15s ease,color .15s ease,border-color .15s ease,transform .05s ease;
  line-height:1;
}
.stickytbull .transaction-filter a:hover{
  background:#151b26;
  color:var(--tb-text);
  border-color:#2b3650;
}

.stickytbull .transaction-filter a.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff !important;       /* ensure override */
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 8px rgba(59,130,246,.5);
  transform: translateY(-1px);
}


/* ---------- KPI summary card (left grid) ---------- */
.stickytbull .trade-summary{
  display:block !important;
  width:100% !important;
  margin-top:12px;
  background:#0e1420;
  border:1px solid var(--tb-line);
  border-radius:10px;
  padding:12px;
}

/* grid: 6 → 4 → 2 → 1 columns responsively */
.stickytbull .trade-summary .columns-left{
  display:grid !important;
  width:100% !important;
  grid-template-columns: repeat(6, minmax(160px, 1fr)) !important;
  gap:12px !important;
}

/* KPI tiles */
.stickytbull .trade-summary .column{
  background:#121929;
  border:1px solid #1e2735;
  border-radius:10px;
  padding:10px 10px;
  text-align:left;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.stickytbull .trade-summary .label{
  display:block;
  font-size:10px;
  color:#8491a6;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.stickytbull .trade-summary .value{
  font-size:18px;
  font-weight:800;
  color:#b9c2cf;
  font-variant-numeric: tabular-nums;
}

/* Value color helpers (you already output bg-green / bg-red on value) */
.stickytbull .trade-summary .value.bg-green{ color: var(--tb-green) !important; }
.stickytbull .trade-summary .value.bg-red{   color: var(--tb-red)   !important; }

/* ---------- Responsive ---------- */
@media (max-width:1400px){
  .stickytbull .trade-summary .columns-left{
    grid-template-columns: repeat(4, minmax(160px,1fr)) !important;
  }
}
@media (max-width:900px){
  .stickytbull .trade-summary .columns-left{
    grid-template-columns: repeat(2, minmax(160px,1fr)) !important;
  }
}
@media (max-width:520px){
  .stickytbull .header{ justify-content:flex-start; }
  .stickytbull .trade-summary .columns-left{
    grid-template-columns: 1fr !important;
  }
}



.tbx-ribbon {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #211d28;
  border: 1px solid var(--line);
  display: flex;
  justify-content: space-between;   /* text left, links right */
  align-items: center;
}

.tbx-ribbon strong {
  color: #ffd479;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.tbx-ribbon .tbx-actions {
  display: flex;
  gap: 8px;   /* equal spacing between links */
}

.tbx-ribbon .tbx-switch {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffd479;
  background: #211d28;
  border: 1px solid #ffd47933;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.tbx-ribbon .tbx-switch:hover {
  background: #2a2333;
  border-color: #ffd47966;
  color: #ffe28a;
}

/* Win% filter pill bar */
.tbx-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: #0f141c;            /* subtle dark background */
  border: 1px solid #1f2735;
  border-radius: 8px;
  margin: 0 20px;
}

.tbx-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #9aa3b2;
  background: #1a2230;
  border: 1px solid #2a3242;
  transition: all 0.25s ease;
  text-decoration: none;
}

.tbx-pill:hover {
  background: #1f2a3c;
  color: #e6edf3;
  border-color: #3b4a60;
}

.tbx-pill--active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* ===============================
   ONBOARDING SCREEN
================================= */

.onboard-wrapper {
  background: url('bg-bull.png') no-repeat center center/cover;
  min-height: 100vh;
  padding: 100px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-text-main);
}

.intro-line {
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 30px;
  max-width: 800px;
  background: rgba(0, 0, 0, 0.75);
  padding: 16px 24px;
  border-radius: 12px;
  line-height: 1.6;
  animation: fadeInDrop 0.8s ease;
}
@keyframes fadeInDrop {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.onboard-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1080px;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.onboard-left,
.onboard-right {
  flex: 1 1 50%;
  padding: 40px;
  min-width: 300px;
  animation: fadeInUp 0.8s ease-in-out;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.onboard-left  { background: rgba(26, 27, 36, 0.9); }
.onboard-right { background: rgba(32, 37, 46, 0.9); }

.referrer-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.onboard-left img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--color-accent-gold);
  box-shadow: 0 0 10px rgba(196,159,87,0.4);
  flex-shrink: 0;
}

.initials-circle {
  width: 100px;
  height: 100px;
  background: var(--color-accent-gold);
  color: #000;
  border-radius: 50%;
  font-size: 36px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(196,159,87,0.4);
  flex-shrink: 0;
}
    
.onboard-left h2 {
  color: var(--color-text-main);
  font-size: 20px;
  margin-bottom:10px;
  padding-left:3px;
}

.onboard-container p {
  color: var(--color-text-main);
  font-size: 15px;
  margin: 0 0 6px;
}

.verified {
  font-size: 13px;
  color: var(--color-accent-blue);
}

.onboard-container .quote {
  font-style: italic;
  color: var(--color-accent-gold);
  margin: 20px 0 10px;
  font-size: 16px;
}

.onboard-container p {
  color: var(--color-text-main);
  font-size: 14px;
  margin-bottom: 4px;
}

.disclaimer-box {
  margin-top: 25px;
  font-size: 13px;
    line-height: 18px;
  background: rgba(255,255,255,0.03);
  padding: 12px;
  border-radius: 8px;
  color: var(--color-text-main);
}
.continue-btn {
  background: var(--color-accent-gold);
  color: #111;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  margin-top: 20px;
  transition: background 0.3s, transform 0.2s;
}

.continue-btn:hover {
  background: #dcb56a;
  transform: translateY(-2px);
} 

/* ===============================
   UTILITIES & ALERTS
================================= */
.mobile-menu, .header-bar { display: none; }

.alert-tb {
  color: var(--color-text-main);
  border: 1px solid #333;
  font-weight: bold;
  padding: 15px;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 10px;
  text-align: center;
}

.bg-green { background-color: #163418 !important; color: var(--color-accent-green) !important; }
.bg-red   { background-color: #491410 !important; color: var(--color-accent-red) !important; }
.text-uppercase { text-transform: uppercase; }


/* ===============================
   SECTION HEADER (Reusable Block)
================================= */
.tb-section-header {
  text-align: center;
  margin: 40px 0 30px;
  padding: 0 20px;
}
.tb-section-header h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-accent-gold, #ffb300);
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
}
.tb-section-header p {
  font-size: 16px;
  color: #aaa;
  margin-top: 10px;
  line-height: 1.5;
  max-width: 640px;
  margin: 10px auto 0;
}


/* ===============================
   FOOTER LINKS
================================= */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 20px 0;
  color: #4a3b3b;
}
.footer-links a {
  color: #4a3b3b;
  padding: 0 10px;
}
.footer-links a:hover { color: #cba31a; }
.footer-links i, .footer-links span { color: #3a3b3b; }


/* ===============================
   HERO SECTIONS
================================= */
.tb-hero {
  background-color: var(--color-bg-dark);
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.tb-hero-left { flex: 1 1 52%; max-width: 580px; }
.tb-hero-tagline {
  font-size: 14px !important;
  text-transform: uppercase;
  color: var(--color-accent-gold);
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.tb-hero-left h1 {
  font-size: 48px;
  color: var(--color-white);
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}
.tb-hero-left h1 .highlight { color: var(--color-accent-gold); }
.tb-hero-subproof {
  font-size: 14px;
  color: var(--color-text-main);
  font-style: italic;
  margin-bottom: 20px;
}
.tb-hero-left p {
  color: var(--color-text-main);
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* Hero Button */
.tb-hero-btn {
  display: inline-block;
  background: var(--color-accent-red);
  color: var(--color-white);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 36px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(255,0,0,0.4);
  transition: 0.3s ease;
  text-transform: uppercase;
}
.tb-hero-btn:hover {
  background: #922121;
  box-shadow: 0 0 15px rgba(255,0,0,0.6);
  transform: scale(1.03);
}
.tb-hero-btn-subtext {
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin-top: 6px;
  color: #ccc;
}

/* Hero Stats */
.tb-hero-stats {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-in-out;
}
.tb-hero-stats .stat {
  background: #2a2b36;
  padding: 10px 18px;
  border-radius: 8px;
  color: var(--color-white);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 0 5px rgba(255,255,255,0.05);
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}
.tb-hero-stats .stat:nth-child(1) { animation-delay: 0.2s; }
.tb-hero-stats .stat:nth-child(2) { animation-delay: 0.4s; }
.tb-hero-stats .stat:nth-child(3) { animation-delay: 0.6s; }
.tb-hero-stats .stat i {
  color: var(--color-accent-gold);
  font-size: 18px;
}
/* Hero Right Image */
.tb-hero-right {
  flex: 1 1 45%;
  text-align: center;
  position: relative;
  z-index: 1;
}

.tb-hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.4), rgba(0,0,0,0));
  z-index: 2;
  border-radius: 16px;
}

.tb-hero-right img {
  width: 100%;
  height: auto;
  max-height: 580px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  position: relative;
  z-index: 3;
}

/* Play Button Overlay */
.tb-hero-right.with-play .play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 4;
}

.tb-hero-right.with-play .play-button-overlay::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-left: 20px solid #000;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}


/* ===============================
   PAGE HERO (Reusable across pages)
================================= */
.tb-page-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 30px;
  text-align: center;
  overflow: hidden;
}

.tb-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.85));
  z-index: 0;
}

.tb-page-hero h1 {
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;    
}

.tb-page-hero h1 .highlight {
  color: var(--color-accent-gold);
}

.tb-page-hero p {
  font-size: 20px;
  color: #ddd;
  margin-bottom: 35px;
  line-height: 1.6;
  position: relative;
  z-index: 1;    
  padding: 0 200px;    
}

.tb-page-hero a {
  display: inline-block;
  padding: 16px 40px;
  background: var(--color-accent-red);
  color: #fff;
  border-radius: 10px;
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.3s;
  position: relative;
  z-index: 1;    
}

.tb-page-hero a:hover {
  background: #922121;
  transform: scale(1.05);
}


@media (max-width: 1024px) {
  .tb-page-hero {
    padding: 80px 20px;
  }

  .tb-page-hero h1 {
    font-size: 38px;
  }

  .tb-page-hero p {
    font-size: 18px;
    margin-bottom: 25px;
  }

  .tb-page-hero a {
    font-size: 16px;
    padding: 14px 32px;
  }
}

@media (max-width: 768px) {
  .tb-page-hero {
    padding: 60px 15px;
  }

  .tb-page-hero h1 {
    font-size: 32px;
    line-height: 1.3;
  }

  .tb-page-hero p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .tb-page-hero a {
    font-size: 15px;
    padding: 12px 28px;
  }
}

@media (max-width: 480px) {
  .tb-page-hero {
    padding: 50px 12px;
  }

  .tb-page-hero h1 {
    font-size: 26px;
  }

  .tb-page-hero p {
    font-size: 15px;
    margin-bottom: 18px;
  }

  .tb-page-hero a {
    font-size: 14px;
    padding: 10px 24px;
  }
}

/* ===============================
   ANIMATIONS
================================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===============================
   PROBLEM GRID SECTION
================================= */

.tb-problems {
  background: #111;
  padding: 70px 30px;
}

.tb-problems h2 {
  text-align: center;
  font-size: 32px;
  color: #fff;
  margin-bottom: 40px;
}
.tb-problems h2 .highlight { color: var(--color-accent-gold); }

.tb-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
}

.tb-problem-card {
  background: #1b1b1f;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  color: #ccc;
  transition: 0.3s;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
}
.tb-problem-card:hover { transform: translateY(-4px); }

.tb-problem-card i {
  font-size: 36px;
  color: var(--color-accent-red);
  margin-bottom: 15px;
}
.tb-problem-card h3 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 12px;
}
.tb-problem-card p {
  font-size: 14px;
  line-height: 1.6;
}

/* ===============================
   NO REFERRAL SECTION
================================= */

.tbclub-empty-referral {
  padding: 60px 20px;
  text-align: center;
  background: #121212;
  border-radius: 12px;
  margin: 40px auto;
  max-width: 500px;
  border: 1px dashed #444;
}

.tbclub-empty-box i {
  font-size: 50px;
  color: #888;
  margin-bottom: 15px;
}

.tbclub-empty-box h3 {
  font-size: 22px;
  margin-bottom: 8px;
  color: #ccc;
}

.tbclub-empty-box p {
  font-size: 14px;
  color: #888;
  line-height: 1.5;
}  


.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin: 20px 0;
}
.course-card {
  background:#1b1c22;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 18px rgba(0,0,0,0.35);
  transition:0.3s;
  display:flex;
  flex-direction:column;
  position:relative;
}
.course-card:hover { transform:translateY(-6px); }
.course-card.locked { opacity:0.85; }

.course-card .thumb {
  background-size:cover;
  background-position:center;
  height:180px;
  position:relative;
}
.course-card .lock-overlay {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lock-overlay i {
  font-size:48px;
  color:#ffb300;
}

/* ===============================
   COURSE SECTION
================================= */

.course-info { padding:18px; display:flex; flex-direction:column; gap:10px; }
.course-info h4 { font-size:20px; color:#ffb300; margin:0; }
.course-info p { font-size:14px; color:#ccc; line-height:1.5; margin:0; }
.course-info .meta { font-size:13px; color:#aaa; margin-top:5px; }

.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.btn {
  background:#222;
  color:#ccc;
  font-size:12px;        /* smaller font */
  padding:6px 10px;      /* compact padding */
  border-radius:5px;
  text-decoration:none;
  font-weight:500;
  border:1px solid #333;
  transition:0.2s;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.btn:hover {
  background:#333;
  color:#ffb300;
  border-color:#ffb300;
}

.btn.disabled {
  background:#1a1a1a !important;
  border-color:#2a2a2a !important;
  color:#666 !important;
  cursor:not-allowed !important;
  pointer-events:none;
  opacity:0.5;
}
.course-category {
  font-size: 11px;
  font-weight: 600;
  color: #4db6ac;        /* teal highlight */
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===============================
   TOOLS SECTION
================================= */
.tool-spotlight {
  display:grid; 
  grid-template-columns:repeat(3, 1fr);
  gap:40px; 
  padding:30px;
}
@media(max-width:1200px){
  .tool-spotlight { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .tool-spotlight { grid-template-columns:1fr; }
}

.tool-card {
  background:#1b1c22; border-radius:18px; overflow:hidden;
  box-shadow:0 0 25px rgba(0,0,0,0.4);
  transition:0.3s;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; padding:20px;
}
.tool-card:hover { transform:translateY(-6px); }
.tool-card.locked { opacity:0.7; cursor:default; }

.tool-icon {
  font-size:50px; color:#ffb300;
  text-align:center; margin:20px 0;
}
.tool-info h4 { font-size:22px; color:#ffb300; margin:0 0 10px; text-align:center; }
.tool-info p { font-size:15px; color:#ccc; line-height:1.4; text-align:center; }
.level-tag {
  font-size:13px; background:#333; padding:5px 12px;
  border-radius:14px; color:#aaa; display:inline-block;
  margin-top:10px;
}
.tool-btn {
  margin-top:15px; text-align:center; padding:12px 20px;
  background:#ffb300; color:#111; border-radius:10px;
  text-decoration:none; font-weight:bold; transition:0.2s;
}
.tool-btn:hover { background:#ffc533; }
.lock-overlay {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.6); color:#ffb300;
  padding:20px; border-radius:50%; font-size:26px;
}

/* ===============================
   STRATEGIES SECTION
================================= */

.strategy-spotlight {
  display:grid; 
  grid-template-columns:repeat(3, 1fr);
  gap:40px; 
  padding:30px;
}
@media(max-width:1200px){
  .strategy-spotlight { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .strategy-spotlight { grid-template-columns:1fr; }
}

.strategy-card {
  background:#1b1c22; border-radius:18px; overflow:hidden;
  box-shadow:0 0 25px rgba(0,0,0,0.4);
  transition:0.3s; display:flex; flex-direction:column;
  position:relative;
}
.strategy-card:hover { transform:translateY(-6px); }

.thumb {
  position:relative; height:220px; overflow:hidden;
}
.thumb-bg {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background-size:cover; background-position:center;
  z-index:1;
}
.strategy-card.locked .thumb-bg {
  filter: blur(4px) brightness(0.6);
}
.play-btn, .lock-overlay, .locked-ribbon, .duration {
  z-index:2;
}
.play-btn {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,179,0,0.9); color:#111;
  font-size:20px; padding:12px 20px;
  border-radius:50px; text-decoration:none; font-weight:bold;
}
.lock-overlay {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:#ffb300; font-size:28px; text-shadow:0 0 8px rgba(0,0,0,0.6);
}
.locked-ribbon {
  position:absolute; top:12px; left:-40px;
  background:#e50914; color:#fff; font-size:12px; font-weight:bold;
  padding:6px 50px; transform:rotate(-45deg);
  box-shadow:0 3px 6px rgba(0,0,0,0.4);
}
.strategy-info { padding:20px; }
.strategy-info h4 { font-size:20px; color:#ffb300; margin:0 0 8px; }
.strategy-info p { font-size:15px; color:#ccc; line-height:1.4; margin:0 0 12px; }
.level-tag { font-size:13px; background:#333; padding:5px 12px; border-radius:14px; color:#aaa; display:inline-block; }


/* ===============================
   DOWNLOADS SECTION
================================= */

.download-spotlight {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:40px; padding:30px;
}
@media(max-width:1200px){
  .download-spotlight { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .download-spotlight { grid-template-columns:1fr; }
}

.download-card {
  background:#1b1c22; border-radius:18px; overflow:hidden;
  box-shadow:0 0 25px rgba(0,0,0,0.4);
  transition:0.3s; padding:20px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
}
.download-card:hover { transform:translateY(-6px); }
.download-card.locked { opacity:0.7; cursor:default; }

.icon {
  font-size:50px; color:#ffb300; text-align:center; margin:15px 0;
}
.download-info { text-align:center; }
.download-info h4 { font-size:20px; color:#ffb300; margin-bottom:10px; }
.download-info p { font-size:14px; color:#ccc; margin-bottom:12px; }
.level-tag {
  font-size:13px; background:#333; color:#aaa;
  padding:5px 12px; border-radius:12px; display:inline-block;
}
.download-btn {
  margin-top:15px; text-align:center; padding:10px 18px;
  background:#ffb300; color:#111; border-radius:8px;
  text-decoration:none; font-weight:bold; transition:0.2s;
}
.download-btn:hover { background:#ffc533; }
.lock-overlay {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.6); color:#ffb300;
  padding:20px; border-radius:50%; font-size:24px;
}


/* ===============================
   EVENTS SECTION
================================= */

.event-spotlight {
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:30px; padding:30px;
}
@media(max-width:1000px){ .event-spotlight { grid-template-columns:1fr; } }

.event-card {
  background:#1b1c22; border-radius:18px; overflow:hidden;
  box-shadow:0 0 25px rgba(0,0,0,0.45);
  transition:0.3s; position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
}
.event-card:hover { transform:translateY(-6px); }

.thumb { position:relative; height:180px; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.lock-overlay {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.6); color:#ffb300;
  padding:18px; border-radius:50%; font-size:24px;
}
.locked-ribbon {
  position:absolute; top:12px; left:-40px;
  background:#e50914; color:#fff; font-size:12px; font-weight:bold;
  padding:6px 50px; transform:rotate(-45deg);
  box-shadow:0 3px 6px rgba(0,0,0,0.4);
}

.event-info { padding:20px; }
.event-info h4 { font-size:20px; color:#ffb300; margin-bottom:8px; }
.event-info p { font-size:15px; color:#ccc; margin-bottom:10px; line-height:1.4; }
.event-info .meta { font-size:13px; color:#aaa; margin-bottom:10px; display:flex; gap:15px; }
.level-tag { font-size:13px; background:#333; color:#aaa; padding:5px 12px; border-radius:14px; display:inline-block; }

.event-btn {
  margin:15px auto 20px; display:inline-block;
  padding:10px 20px; background:#ffb300; color:#111;
  font-weight:bold; border-radius:8px; text-decoration:none;
}
.event-btn:hover { background:#ffc533; }


/* ===============================
   CHATROOM SECTION
================================= */

.chatroom-spotlight {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:40px; padding:30px;
}
@media(max-width:1200px){ .chatroom-spotlight { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px){ .chatroom-spotlight { grid-template-columns:1fr; } }

.chatroom-card {
  background:#1b1c22; border-radius:18px; overflow:hidden;
  box-shadow:0 0 25px rgba(0,0,0,0.4);
  transition:0.3s; padding:20px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; text-align:center;
}
.chatroom-card:hover { transform:translateY(-6px); }
.chatroom-card.locked { opacity:0.7; cursor:default; }

.chatroom-icon { font-size:50px; color:#ffb300; margin:20px 0; }
.chatroom-info h4 { font-size:20px; color:#ffb300; margin-bottom:8px; }
.chatroom-info p { font-size:14px; color:#ccc; margin-bottom:12px; }
.level-tag { font-size:13px; background:#333; color:#aaa;
  padding:5px 12px; border-radius:12px; display:inline-block; }

.chatroom-btn {
  margin-top:15px; padding:10px 18px;
  background:#ffb300; color:#111; border-radius:8px;
  text-decoration:none; font-weight:bold; transition:0.2s;
}
.chatroom-btn:hover { background:#ffc533; }

.lock-overlay {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.6); color:#ffb300;
  padding:20px; border-radius:50%; font-size:24px;
}

/* ===============================
   MEMBER AREA DASHBOARD
================================= */


:root {
  --tbxcolor-bg-dark: #1a1b24;
  --tbxcolor-secondary-blue: #3FA9F5;
  --tbxcolor-success: #2ECC71;
  --tbxcolor-danger: #E74C3C;
  --tbxcolor-text-muted: #AAAAAA;
  --tbxcolor-card-bg: #1A1B22;
  --tbxcolor-btn-glow: rgba(255, 215, 0, 0.2);
}

.tbx-global-hero {
  background-color: var(--tbxcolor-bg-dark);
  padding: 40px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.tbx-global-hero-left {
  flex: 1 1 52%;
  max-width: 600px;
}

.tbx-global-hero-tagline {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-accent-gold);
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.tbx-global-hero-left h1 {
  font-size: 40px;
  color: #fff;
  font-weight: 800;
  margin-bottom: 18px;
  line-height: 1.3;
}
.tbx-global-hero-left h1 .highlight {
  color: var(--color-accent-gold);
}

.tbx-global-hero-left p {
  color: #ccc;
  font-size: 16px;
  margin-bottom: 28px;
  line-height: 1.6;
}

.tbx-global-hero-pillars {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.tbx-global-hero-pillars .pillar {
  flex: 1 1 140px;
  background: var(--tbxcolor-card-bg);
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #b2b4ba;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.05);
  transition: 0.3s ease;
}
.tbx-global-hero-pillars .pillar i {
  font-size: 20px;
  color: var(--color-accent-gold);
}
.tbx-global-hero-pillars .pillar:hover {
  transform: translateY(-3px);
  background: #2A2D3A;
}

.tbx-global-hero-btns {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.tbx-global-hero-btn {
  display: inline-block;
  background: var(--color-accent-gold);
  color: #111;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 8px;
  box-shadow: 0 0 10px var(--tbxcolor-btn-glow);
  transition: 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
}
.tbx-global-hero-btn:hover {
  background: var(--color-accent-gold);
  transform: scale(1.03);
}
.tbx-global-hero-btn.secondary {
  background: var(--tbxcolor-secondary-blue);
  border: 2px solid var(--tbxcolor-secondary-blue);
  color: #fff;
}
.tbx-global-hero-btn.secondary:hover {
  background: #1a6fff;
  border-color: #1a6fff;
}


.tbx-global-hero-right {
  flex: 1 1 45%;
  text-align: center;
  position: relative;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  background: radial-gradient(circle at center, #2b2b2b 0%, #131313 100%);
  overflow: hidden;
  box-shadow: 0 0 20px rgba(30, 30, 30, 0.5);
  transition: all 0.4s ease;
}

.tbx-global-hero-right:hover {
  box-shadow: 0 0 30px rgba(60, 60, 60, 0.6), 0 0 12px rgba(100, 100, 100, 0.3) inset;
  transform: scale(1.01);
  background: radial-gradient(circle at center, #333 0%, #181818 100%);
}

/* Spinning soft glow */
.tbx-global-hero-right::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(90, 90, 90, 0.2), transparent);
  animation: spinGlow 12s linear infinite;
  z-index: 1;
  pointer-events: none;
  filter: blur(6px);
  opacity: 0.6;
}

/* Subtle pulsing ring */
.tbx-global-hero-right::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
  animation: pulseFlicker 4s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes spinGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulseFlicker {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.03);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.07);
  }
}

.tbx-global-hero-right img {
  width: 100%;
  border-radius: 16px;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.tbx-global-hero-right i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 54px;
  color: #666;
  z-index: 3;
  opacity: 0.7;
}
    

/* TrustyBull Club Dashboard CSS */
.tbclub-dashboard {
  padding: 20px;
  max-width: 900px;
  background: var(--tbxcolor-bg-dark);
  margin: 0 auto;
  color: #f0f0f0;
  font-family: 'Segoe UI', sans-serif;
}
.tbclub-hero {
  text-align: center;
  margin-bottom: 30px;
}
.tbclub-hero-title {
  font-size: 28px;
  color: var(--color-accent-gold);
  margin-bottom: 10px;
}
.tbclub-hero-sub {
  font-size: 16px;
  color: #ccc;
}

.tbclub-level-box {
  background: var(--tbxcolor-card-bg);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}
.tbclub-level-badge {
  background: var(--color-accent-gold);
  color: #000;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
}
.tbclub-level-title {
  font-size: 20px;
  color: #fff;
}
.tbclub-level-desc {
  font-size: 14px;
  color: #bbb;
}
.tbclub-progress-bar {
  background: #2A2D3A;
  border-radius: 10px;
  height: 12px;
  width: 100%;
  overflow: hidden;
  margin: 5px 0;
}
.tbclub-progress-fill {
  background: var(--color-accent-gold);
  height: 100%;
  transition: width 0.4s;
}
.tbclub-progress-label {
  font-size: 12px;
  color: var(--tbxcolor-text-muted);
}

.tbclub-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}
.tbclub-stat {
  background: #15151C;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}
.tbclub-stat-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 5px;
}
.tbclub-stat-value {
  font-size: 20px;
  color: var(--color-accent-gold);
  font-weight: bold;
}

.tbclub-badges-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--color-accent-gold);
}
.tbclub-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.tbclub-badge {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #2C2C2C;
  color: #bbb;
  border: 1px solid #444;
}
.tbclub-badge.unlocked {
  background: var(--color-accent-gold);
  color: #000;
  border: none;
  font-weight: bold;
}
.tbclub-badge.locked {
  background: #1f1f1f;
  color: #666;
  border-style: dashed;
}

@media (max-width: 600px) {
  .tbclub-dashboard {
    padding: 15px;
  }
  .tbclub-hero-title {
    font-size: 22px;
  }
  .tbclub-level-title {
    font-size: 16px;
  }
  .tbclub-level-desc {
    font-size: 13px;
  }
  .tbclub-badges-title {
    font-size: 16px;
  }
}

/* ===============================
   LEVELS SECTION
================================= */

.club-path-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  padding: 30px;
  border-radius: 20px;
}
.club-level-card {
  background: #111;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  color: #fff;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 0 20px rgba(255,255,255,0.05);
  position: relative;
  transition: 0.3s ease;
  opacity: 1;
  grid-column: span 1;
}
.club-level-card:hover {
  transform: scale(1.03);
}
.club-level-card.status-current {
  grid-column: span 2;
}
.club-level-card.locked {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.club-level-card.locked:hover {
  transform: none;
}
.club-level-card .level-icon {
  font-size: 42px;
  margin-bottom: 15px;
  color: var(--color-accent-gold);
}
.club-level-card h4 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #fff;
}
.club-level-card p {
  font-size: 14px;
  color: #aaa;
  min-height: 36px;
}
.club-level-card .req-row {
  font-size: 13px;
  color: #ccc;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.club-level-card .req-row b {
  color: #fff;
}
.club-status-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 18px;
  padding: 5px 7px;
  border-radius: 50%;
  background: #1d1d1d;
}
.status-locked i {
  color: #e74c3c;
}
.status-current i {
  color: #3498db;
}
.status-passed i {
  color: #2ecc71;
}
.status-current {
  box-shadow: 0 0 12px #3498db99;
  border: 2px solid #3498db99;
}
.status-passed {
  box-shadow: 0 0 10px #2ecc7199;
  border: 2px solid #2ecc7199;
}

/* ===============================
   RESPONSIBILITY SECTION
================================= */

.tbx-responsibility {
  position: relative;
  background: #000;
  padding: 50px 30px;
  margin: 60px 0;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.03);
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  isolation: isolate;
}

/* GLOW EFFECT - animated lines around edge */
.tbx-responsibility::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(from 0deg, #ffc10711, transparent, #ffc10711);
  animation: spinGlow 6s linear infinite;
  z-index: 0;
  opacity: 0.12;
  filter: blur(50px);
}

/* BACKGROUND pulse */
.tbx-responsibility::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
  animation: pulseFlicker 5s ease-in-out infinite;
  z-index: 0;
}

@keyframes spinGlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulseFlicker {
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 0.1; }
}


.tbx-responsibility h2 {
  font-size: 28px;
  color: var(--color-accent-gold);
  margin-bottom: 25px;
  font-weight: 700;
}

.resp-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media(max-width:1200px){
  .resp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px){
  .resp-cards { grid-template-columns: 1fr; }
}

.resp-card {
  background: #222;
  border-radius: 16px;
  padding: 32px 22px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.35);
  transition: transform 0.3s, box-shadow 0.3s;
}
.resp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px rgba(255,179,0,0.25);
}

.resp-card i {
  font-size: 52px;
  margin-bottom: 18px;
  color: var(--color-accent-gold);
}

.resp-card h4 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 12px;
  font-weight: 600;
}

.resp-card p {
  font-size: 14px;
  color: #aaa;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 220px;
}

.resp-card.danger {
  border: 2px solid #e50914;
  background: #2a1b1b;
}
.resp-card.danger i {
  color: #e50914;
}
.resp-card.danger:hover {
  box-shadow: 0 0 25px rgba(229,9,20,0.4);
}

/* ===============================
   WHATSAPP BUBBLES
================================= */

.wa-chat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  background: #e5ddd5; /* WhatsApp-like light bg */
  padding: 20px;
  margin: 10px 20px 20px 20px;    
}

/* Bubbles */
.wa-bubble {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* push share button to bottom */
  min-height: 180px; /* same height for all */
  max-width: 100%;
  border-radius: 8px;
  padding: 14px;
  font-size: 14px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.wa-left {
  background: #fff;
  color: #222;
  justify-self: start;
}
.wa-right {
  background: #dcf8c6; /* WhatsApp green bubble */
  color: #111;
  justify-self: end;
}

.wa-text strong { font-weight: 700; }
.wa-text { white-space: pre-line; margin-bottom: 10px; flex-grow: 1; }

/* Share button */
.wa-share {
  align-self: flex-end;
  font-size: 13px;
  background: #25d366;
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.3s;
}
.wa-share i {
  font-size: 15px;
}
.wa-share:hover { background: #1ebe5b; }

/* Filter Tabs */
.filter-tabs {
  display: flex;
  gap: 10px;
  margin: 10px 20px 0 20px;
}
.filter-tabs a {
  padding: 6px 12px;
  border-radius: 6px;
  background: #ddd;
  color: #333;
  font-size: 13px;
  text-decoration: none;
  transition: 0.2s;
}
.filter-tabs a.active,
.filter-tabs a:hover {
  background: #25d366;
  color: #fff;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .wa-chat-grid {
    grid-template-columns: 1fr;
  }
  .wa-bubble {
    min-height: 160px; /* slightly smaller on mobile */
  }
}

/* ===============================
   REFERRAL GRID
================================= */

.referral-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin: 20px;
}

/* BOX STYLE (common for all 3) */
.referral-box, .brand-kit, .instructions {
  background:#1d1e27;
  border-radius:10px;
  padding:20px;
  text-align:center;
  color:#fff;
  box-shadow:0 0 12px rgba(0,0,0,0.3);
}
.referral-box h3, .brand-kit h3, .instructions h3 {
  color:var(--color-accent-gold);
  margin-bottom:12px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

/* Referral link inside box */
.referral-link {
  display:flex; justify-content:center; align-items:center;
  gap:10px; margin-bottom:15px;
}
.referral-link input {
  padding:10px; width:65%; border:none; border-radius:6px;
  background:#111; color:#fff; font-size:14px;
}
.referral-link button {
  padding:10px 18px; background:var(--color-accent-gold);
  color:#111; font-weight:600; border:none; border-radius:6px;
  cursor:pointer; transition:0.3s;
}
.referral-link button:hover { background:#d4af37; }

.share-buttons { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.share-buttons a {
  background:#333; padding:8px 12px; border-radius:6px;
  font-size:13px; color:#fff; display:flex; align-items:center; gap:6px;
  transition:0.3s;
}
.share-buttons a:hover { background:var(--color-accent-red); }

/* Brand kit */
.brand-kit p { color:#bbb; margin-bottom:12px; font-size:14px; }
.download-btn {
  display:inline-block; padding:10px 18px; background:var(--color-accent-red);
  color:#fff; border-radius:6px; font-size:13px; font-weight:600;
  transition:0.3s; text-transform:uppercase;
}
.download-btn:hover { background:#922121; transform:scale(1.05); }

/* Instructions */
.instructions ul { list-style:none; padding:0; margin:0 auto; max-width:460px; text-align: center; }
.instructions ul li { color:#bbb; font-size:14px; margin-bottom:8px; }
.instructions ul li strong { color:#fff; }

/* Responsive tweaks */
@media(max-width:768px){
  .referral-link input { width:100%; }
  .referral-link { flex-direction:column; }
}

/* ===============================
   MISSION TRIBE CTA
================================= */

.mission-tribe {
  background: linear-gradient(145deg,#111,#181818);
  padding: 100px 30px;
  text-align: center;
  position: relative;
}
.mission-tribe::before {
  content:"";
  position:absolute; inset:0;
  background:url('tribe-bg.png') center/cover no-repeat;
  opacity:0.1;
}
.mission-tribe h2 {
  font-size: 38px;
  font-weight: 900;
  color: var(--color-accent-gold);
  margin-bottom: 20px;
  text-transform: uppercase;
}
.mission-tribe p {
  font-size: 18px;
  color: #ddd;
  max-width: 700px;
  margin: 0 auto 30px;
  line-height: 1.8;
}
.mission-tribe a {
  display:inline-block;
  padding:14px 36px;
  background: var(--color-accent-red);
  color:#fff;
  border-radius:8px;
  font-weight:700;
  text-transform:uppercase;
  transition:0.3s;
}
.mission-tribe a:hover { background:#922121; transform:scale(1.05); }



/* ===============================
   REUSABLE GRID
================================= */
    
.tb-grid-section {
  background: linear-gradient(145deg, #121212, #181818);
  padding: 80px 30px;
  text-align: center;
}

.tb-grid-section h2 {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
}
.tb-grid-section h2 .highlight { color: var(--color-accent-gold); }

.tb-grid-section p.intro {
  font-size: 18px;
  color: #bbb;
  max-width: 700px;
  margin: 0 auto 50px;
  line-height: 1.6;
}

.tb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
}

.tb-grid-card {
  background: #1e1f25;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  color: #ddd;
  transition: 0.3s;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  position: relative;
}
.tb-grid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px rgba(196,159,87,0.15);
}

.tb-grid-card i {
  font-size: 42px;
  margin-bottom: 15px;
  color: var(--color-accent-gold);
}

.tb-grid-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: #fff;
}

.tb-grid-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #aaa;
  margin-bottom: 20px;
}

/* CTA Button inside cards */
.tb-grid-card a {
  display: inline-block;
  padding: 10px 22px;
  background: var(--color-accent-red);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: 0.3s;
}
.tb-grid-card a:hover {
  background: #922121;
  transform: scale(1.05);
}
   

/* ===============================
   RESPONSIVE ADJUSTMENTS
================================= */

/* Hide right sidebar on smaller screens */
@media (max-width: 991px) {
  .aside_right {
    display: none;
  }
  .aside_middle {
    margin-right: 0;             /* remove right space */
    width: calc(100% - 230px);   /* only account for left sidebar */
  }
}

/* Hide both sidebars on very small screens (mobile) */
@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
  .aside_middle {
    margin: 0;
    width: 100%;
  }
}

/* Tablet (≤ 991px) */
@media (max-width: 991px) {
  .tb-hero {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  .tb-hero-left {
    max-width: 100%;
    flex: 1 1 100%;
    margin-bottom: 20px;
  }

  .tb-hero-left h1 {
    font-size: 36px;
    line-height: 1.3;
  }

  .tb-hero-left p {
    font-size: 16px;
    line-height: 1.5;
  }

  .tb-hero-right {
    flex: 1 1 100%;
    width: 100%;
  }

  .tb-hero-right img {
    max-height: 400px;
    object-fit: cover;
    width: 100%;
  }
    
  .tb-hero-stats {
    justify-content: center;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .tb-hero {
    padding: 30px 15px;
  }

  .tb-hero-left h1 {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .tb-hero-tagline {
    font-size: 12px !important;
  }

  .tb-hero-left p {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .tb-hero-btn {
    padding: 12px 22px;
    font-size: 14px;
  }

  .tb-hero-stats {
    gap: 10px;
    margin-top: 20px;
  }

  .tb-hero-stats .stat {
    font-size: 13px;
    padding: 8px 14px;
  }

  .tb-hero-right img {
    max-height: 280px;
    border-radius: 12px;
  }
}


/* ===============================
   RESPONSIVE: PROBLEM GRID SECTION
================================= */

@media (max-width: 1024px) {
  .tb-problems {
    padding: 50px 20px;
  }
  .tb-problems h2 {
    font-size: 28px;
    margin-bottom: 30px;
  }
  .tb-problem-card {
    padding: 20px;
  }
  .tb-problem-card h3 {
    font-size: 18px;
  }
  .tb-problem-card p {
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  .tb-problems {
    padding: 40px 15px;
  }
  .tb-problems h2 {
    font-size: 26px;
  }
  .tb-problem-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .tb-problems {
    padding: 30px 12px;
  }
  .tb-problems h2 {
    font-size: 22px;
    margin-bottom: 25px;
  }
  .tb-problem-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .tb-problem-card {
    padding: 18px;
  }
  .tb-problem-card i {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .tb-problem-card h3 {
    font-size: 16px;
  }
  .tb-problem-card p {
    font-size: 12px;
    line-height: 1.4;
  }
}


/* ===============================
   RESPONSIVE: MISSION TRIBE CTA
================================= */

@media (max-width: 1024px) {
  .mission-tribe {
    padding: 80px 20px;
  }
  .mission-tribe h2 {
    font-size: 32px;
    margin-bottom: 18px;
  }
  .mission-tribe p {
    font-size: 16px;
    max-width: 600px;
  }
  .mission-tribe a {
    padding: 12px 30px;
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .mission-tribe {
    padding: 60px 18px;
  }
  .mission-tribe h2 {
    font-size: 28px;
    line-height: 1.3;
  }
  .mission-tribe p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
  }
  .mission-tribe a {
    padding: 12px 26px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mission-tribe {
    padding: 50px 15px;
  }
  .mission-tribe h2 {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .mission-tribe p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .mission-tribe a {
    padding: 10px 22px;
    font-size: 13px;
  }
}

/* ===============================
   MOBILE MENU
================================= */

@media (max-width: 768px) {
.mobile-menu {
display: flex;
justify-content: space-around;
align-items: center;
background: #000;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
border-top: 1px solid #333;
transition: background 0.3s ease; /* Background color transition for a smooth effect */
}

.mobile-menu a {
text-decoration: none;
font-size: 11px; /* Slightly larger for better readability on small screens */
text-transform: uppercase;
text-align: center;
flex: 1;
color: #949597;
transition: color 0.3s ease; /* Smooth color change on hover */
}

.mobile-menu a:hover {
color: #fff;
transform: translateY(-3px); /* Subtle lift effect on hover */
transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.mobile-menu a i {
font-size: 16px; /* Slightly larger icons */
display: block;
padding-bottom: 3px;
transition: transform 0.3s ease; /* Add scaling animation for icons */
}

.mobile-menu a:hover i {
transform: scale(1.2); /* Enlarge icon on hover */
}

.mobile-menu a span {
display: block;
}

/* Add a subtle shadow effect to create a floating feel */
.mobile-menu {
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.5);
}
}


/* ===============================
   RESPONSIVE: REUSABLE GRID
================================= */    
@media (max-width: 991px) {
  .tb-grid-section {
    padding: 60px 20px;
  }
  .tb-grid-section h2 {
    font-size: 28px;
  }
  .tb-grid-section p.intro {
    font-size: 16px;
    margin-bottom: 40px;
  }
  .tb-grid-card {
    padding: 25px 18px;
  }
  .tb-grid-card i {
    font-size: 36px;
  }
  .tb-grid-card h3 {
    font-size: 18px;
  }
  .tb-grid-card p {
    font-size: 14px;
  }
  .tb-grid-card a {
    font-size: 13px;
    padding: 8px 18px;
  }
}

/* Mobiles */
@media (max-width: 576px) {
  .tb-grid-section {
    padding: 40px 15px;
  }
  .tb-grid-section h2 {
    font-size: 24px;
    line-height: 1.3;
  }
  .tb-grid-section p.intro {
    font-size: 15px;
    margin-bottom: 30px;
    line-height: 1.5;
  }
  .tb-grid {
    grid-template-columns: 1fr; /* stack cards */
    gap: 20px;
  }
  .tb-grid-card {
    padding: 20px 16px;
  }
  .tb-grid-card i {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .tb-grid-card h3 {
    font-size: 16px;
  }
  .tb-grid-card p {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .tb-grid-card a {
    font-size: 12px;
    padding: 7px 16px;
  }
}