/* ============================================================
   SMMZOLO — style.css v4.0
   Layout: Hidden top nav → Left sidebar + Clean topbar
   Deep Matte Black × Champagne Gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Syne:wght@500;600;700;800&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg-base:          #0A0A0C;
  --bg-surface:       #111113;
  --bg-card:          #141416;
  --bg-card-hover:    #1A1A1D;
  --bg-input:         #0D0D0F;
  --bg-espresso:      #1E1A12;
  --bg-espresso-2:    #2A2118;

  --gold:             #D6C28A;
  --gold-hi:          #E8D9A8;
  --gold-lo:          #CBB67A;
  --gold-dim:         #8A7A52;
  --gold-border:      rgba(214,194,138,0.18);
  --gold-border-soft: rgba(214,194,138,0.07);
  --gold-glow:        rgba(214,194,138,0.055);
  --gold-glow2:       rgba(214,194,138,0.10);

  --text-1:           #F2F2F2;
  --text-2:           #B9B9B9;
  --text-3:           #6E6E6E;

  --green:            #4CAF7D;
  --red:              #E07070;
  --blue:             #64B5F6;

  --sidebar-w:        220px;
  --topbar-h:         56px;

  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill:999px;

  --ease:   0.2s cubic-bezier(0.4,0,0.2,1);
  --ease-f: 0.13s ease;

  --font-d: 'Syne', sans-serif;
  --font-b: 'DM Sans', sans-serif;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body {
  background: var(--bg-base) !important;
  color: var(--text-1) !important;
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  min-height: 100vh !important;
}

/* Force all Bootstrap containers/rows/cols to be transparent so body bg shows */
.container, .container-fluid, .row, [class*="col-"] {
  background: transparent !important;
  color: inherit !important;
}

a { color: var(--gold); transition: color var(--ease-f); text-decoration: none !important; }
a:hover { color: var(--gold-hi); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-lo); }

/* ============================================================
   STEP 1 — HIDE THE ORIGINAL HORIZONTAL TOP NAV COMPLETELY
   ============================================================ */
nav,
.navbar,
.nav-bar,
header > nav,
body > nav,
.top-nav,
#navbar,
[class*="navbar"]:not(#zolo-topbar):not(#zolo-sidebar) {
  display: none !important;
}

/* ============================================================
   STEP 2 — TOPBAR — offset by sidebar on desktop
   ============================================================ */
#zolo-topbar {
  position: fixed !important;
  top: 0 !important;
  left: var(--sidebar-w) !important;
  right: 0 !important;
  height: var(--topbar-h) !important;
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--gold-border-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  z-index: 900 !important;
  transition: left var(--ease) !important;
}

/* Hide hamburger on desktop */
#zolo-topbar .topbar-hamburger { display: none !important; }

@media (max-width: 992px) {
  #zolo-topbar { left: 0 !important; }
  #zolo-topbar .topbar-hamburger { display: flex !important; }
}

#zolo-topbar .topbar-logo {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

#zolo-topbar .topbar-logo span {
  color: var(--text-3);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-left: 10px;
  border-left: 1px solid var(--gold-border-soft);
}

#zolo-topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Add Funds button in topbar */
#zolo-topbar .topbar-addfunds {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--gold);
  color: var(--bg-base);
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
}
#zolo-topbar .topbar-addfunds:hover {
  background: var(--gold-hi);
  color: var(--bg-base);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(214,194,138,0.22);
}

/* Balance display */
#zolo-topbar .topbar-balance {
  background: var(--bg-espresso);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

/* Account dropdown trigger */
#zolo-topbar .topbar-account {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-espresso-2);
  border: 1.5px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--ease-f);
  position: relative;
}
#zolo-topbar .topbar-account:hover { border-color: var(--gold); }

/* Hamburger — mobile only, hidden on desktop */
#zolo-topbar .topbar-hamburger {
  display: none !important;
}

@media (max-width: 992px) {
  #zolo-topbar .topbar-hamburger {
    display: flex !important;
    background: none;
    border: 1px solid var(--gold-border-soft);
    border-radius: var(--r-sm);
    color: var(--text-2);
    padding: 7px 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all var(--ease-f);
  }
  #zolo-topbar .topbar-hamburger:hover { border-color: var(--gold-border); color: var(--gold); }
  #zolo-topbar .topbar-hamburger svg { width: 18px; height: 18px; }
}

/* ============================================================
   STEP 3 — LEFT SIDEBAR — always visible on desktop
   ============================================================ */
#zolo-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--sidebar-w) !important;
  height: 100vh !important;
  background: var(--bg-surface) !important;
  border-right: 1px solid var(--gold-border-soft) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: 0 !important;
  transform: translateX(0) !important;
  transition: transform var(--ease) !important;
}

@media (max-width: 992px) {
  #zolo-sidebar { 
    transform: translateX(-100%) !important;
    pointer-events: none !important;
  }
  #zolo-sidebar.open { 
    transform: translateX(0) !important; 
    box-shadow: 4px 0 32px rgba(0,0,0,0.5) !important;
    pointer-events: all !important;
  }
}

#zolo-sidebar::-webkit-scrollbar { display: none; }
#zolo-sidebar .sidebar-brand { display: none !important; }

#zolo-sidebar svg,
#zolo-sidebar a svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-shrink: 0 !important;
}


/* New Order button at top of sidebar */
#zolo-sidebar .sidebar-new-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 14px 6px;
  padding: 11px 14px;
  background: var(--gold);
  color: var(--bg-base);
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all var(--ease);
  flex-shrink: 0;
}
#zolo-sidebar .sidebar-new-order:hover {
  background: var(--gold-hi);
  color: var(--bg-base);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(214,194,138,0.22);
}
#zolo-sidebar .sidebar-new-order svg { width: 15px; height: 15px; color: var(--bg-base); }

/* Nav links */
#zolo-sidebar .sidebar-nav {
  flex: 1;
  padding: 8px 0;
}

#zolo-sidebar .sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: all var(--ease-f);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
#zolo-sidebar .sidebar-nav a:hover {
  color: var(--text-1);
  background: var(--gold-glow);
  border-left-color: var(--gold-dim);
}
#zolo-sidebar .sidebar-nav a.active {
  color: var(--gold);
  background: var(--gold-glow2);
  border-left-color: var(--gold);
  font-weight: 600;
}
#zolo-sidebar .sidebar-nav a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.65;
}
#zolo-sidebar .sidebar-nav a.active svg { opacity: 1; color: var(--gold); }

/* Section label */
#zolo-sidebar .sidebar-section {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 18px 5px;
}

/* Sidebar footer — balance */
#zolo-sidebar .sidebar-footer {
  padding: 14px;
  border-top: 1px solid var(--gold-border-soft);
  flex-shrink: 0;
}

#zolo-sidebar .sidebar-balance-wrap {
  background: var(--bg-espresso);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-md);
  padding: 14px;
}
#zolo-sidebar .sidebar-balance-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}
#zolo-sidebar .sidebar-balance-amount {
  font-family: var(--font-d);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 12px;
}
#zolo-sidebar .sidebar-add-funds {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  background: transparent;
  border: 1px solid var(--gold-border);
  border-radius: var(--r-sm);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--ease);
  cursor: pointer;
  font-family: var(--font-b);
}
#zolo-sidebar .sidebar-add-funds:hover {
  background: var(--gold-glow2);
  border-color: var(--gold);
  color: var(--gold-hi);
}

/* ============================================================
   STEP 4 — MAIN CONTENT — push everything right of sidebar
   ============================================================ */
body > *:not(#zolo-sidebar):not(#zolo-topbar):not(#zolo-overlay):not(#zolo-bottom-nav):not(script):not(style):not(link) {
  margin-left: var(--sidebar-w) !important;
  padding-top: calc(var(--topbar-h) + 24px) !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  padding-bottom: 40px !important;
  box-sizing: border-box !important;
}

@media (max-width: 992px) {
  body > *:not(#zolo-sidebar):not(#zolo-topbar):not(#zolo-overlay):not(#zolo-bottom-nav):not(script):not(style):not(link) {
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: calc(var(--topbar-h) + 16px) !important;
    padding-bottom: 80px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: unset !important;
    position: static !important;
    z-index: auto !important;
  }
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }
}
.container-fluid, .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  float: none !important;
  width: 100% !important;
}
.col-md-offset-2, [class*="offset"] {
  margin-left: 0 !important;
}



/* ============================================================
   SIDEBAR OVERLAY (mobile only)
   ============================================================ */
#zolo-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 850;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#zolo-overlay.active { display: block; }

/* ============================================================
   RESPONSIVE — mobile collapses sidebar
   ============================================================ */
@media (max-width: 992px) {
  #zolo-sidebar {
    transform: translateX(-100%);
  }
  #zolo-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,0.5);
  }
  #zolo-topbar {
    left: 0 !important;
  }
  #zolo-topbar .topbar-hamburger {
    display: flex !important;
  }
  /* Content has no left margin on mobile */
  body > *:not(#zolo-sidebar):not(#zolo-topbar):not(#zolo-overlay):not(#zolo-bottom-nav):not(script):not(style):not(link) {
    margin-left: 0 !important;
  }
}

/* Bottom nav — mobile only */
#zolo-bottom-nav {
  display: none;
}
@media (max-width: 992px) {
  #zolo-bottom-nav {
    display: flex !important;
  }
  /* Safe area for phones with home indicator */
  #zolo-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 600px) {
  #zolo-topbar .topbar-logo span { display: none !important; }
  #zolo-topbar .topbar-logo { font-size: 16px !important; }
  #zolo-topbar .topbar-balance { display: none !important; }
  #zolo-topbar .topbar-addfunds { padding: 7px 11px !important; font-size: 12px !important; }
  #zolo-topbar { padding: 0 12px !important; }
  .card-body { padding: 14px !important; }
  .modal-body { padding: 18px !important; }
}


/* ============================================================
   SIDEBAR OVERLAY (mobile)
   ============================================================ */
#zolo-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 850;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#zolo-overlay.active { display: block; }

/* ============================================================
   CARDS — force dark everywhere
   ============================================================ */
.card,
div.card,
.well,
.panel,
.panel-body,
.panel-default,
.box,
.box-body,
.content-box,
.form-box,
.form-container {
  background: var(--bg-card) !important;
  border: 1px solid var(--gold-border-soft) !important;
  border-radius: var(--r-lg) !important;
  color: var(--text-1) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.25) !important;
  transition: border-color var(--ease) !important;
}
.card:hover { border-color: var(--gold-border) !important; }

.card-header,
.panel-heading,
.panel-default > .panel-heading {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--gold-border-soft) !important;
  padding: 13px 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  font-family: var(--font-b) !important;
}

.card-body,
.panel-body { padding: 20px !important; }

.card-footer {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--gold-border-soft) !important;
  padding: 12px 20px !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
}

/* Kill all white/light backgrounds panel-wide */
.bg-white, .bg-light,
*[style*="background:#fff"],
*[style*="background: #fff"],
*[style*="background:#ffffff"],
*[style*="background: #ffffff"],
*[style*="background:white"],
*[style*="background: white"],
*[style*="background-color:#fff"],
*[style*="background-color: #fff"],
*[style*="background-color:#ffffff"],
*[style*="background-color: #ffffff"],
*[style*="background-color:white"],
*[style*="background-color: white"],
*[style*="background-color:#f8f8f8"],
*[style*="background-color: #f8f8f8"],
*[style*="background-color:#f9f9f9"],
*[style*="background-color: #f9f9f9"],
*[style*="background-color:#fafafa"],
*[style*="background-color: #fafafa"],
*[style*="background-color: rgb(255, 255, 255)"] {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
}
body.bg-white, body.bg-light { background: var(--bg-base) !important; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-d) !important; color: var(--text-1) !important; }
p { color: var(--text-2); }
.text-muted   { color: var(--text-3) !important; }
.text-primary { color: var(--gold)   !important; }
.text-success { color: var(--green)  !important; }
.text-danger  { color: var(--red)    !important; }
.text-warning { color: var(--gold)   !important; }
.text-info    { color: var(--blue)   !important; }
.text-white   { color: var(--text-1) !important; }
.text-dark    { color: var(--text-1) !important; }
.text-gold    { color: var(--gold)   !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-b) !important;
  font-weight: 600 !important;
  border-radius: var(--r-md) !important;
  transition: all var(--ease) !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.btn-primary {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--bg-base) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--gold-hi) !important;
  border-color: var(--gold-hi) !important;
  color: var(--bg-base) !important;
  box-shadow: 0 4px 16px rgba(214,194,138,0.22) !important;
  transform: translateY(-1px) !important;
}
.btn-secondary {
  background: var(--bg-card) !important;
  border-color: var(--gold-border) !important;
  color: var(--text-2) !important;
}
.btn-secondary:hover {
  background: var(--bg-card-hover) !important;
  color: var(--text-1) !important;
}
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--gold-border) !important;
  color: var(--gold) !important;
}
.btn-outline-primary:hover {
  background: var(--gold-glow2) !important;
  border-color: var(--gold) !important;
  color: var(--gold-hi) !important;
}
.btn-success { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.btn-danger  { background: var(--red)   !important; border-color: var(--red)   !important; color: #fff !important; }
.btn-light, .btn-white {
  background: var(--bg-card) !important;
  border-color: var(--gold-border-soft) !important;
  color: var(--text-2) !important;
}
.btn-sm { padding: 6px 13px !important; font-size: 12px !important; border-radius: var(--r-sm) !important; }
.btn-lg { padding: 12px 28px !important; font-size: 15px !important; }

button[type="submit"], input[type="submit"] {
  background: var(--gold) !important;
  border: none !important;
  color: var(--bg-base) !important;
  font-family: var(--font-b) !important;
  font-weight: 700 !important;
  border-radius: var(--r-md) !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: all var(--ease) !important;
  font-size: 13.5px !important;
}
button[type="submit"]:hover, input[type="submit"]:hover {
  background: var(--gold-hi) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(214,194,138,0.22) !important;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select,
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=url], input[type=search],
input[type=tel], textarea, select {
  background: var(--bg-input) !important;
  border: 1px solid var(--gold-border-soft) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-1) !important;
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: border-color var(--ease), box-shadow var(--ease) !important;
  width: 100% !important;
}
.form-control:focus, .form-select:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--gold-lo) !important;
  box-shadow: 0 0 0 3px rgba(214,194,138,0.08) !important;
  outline: none !important;
  background: var(--bg-input) !important;
  color: var(--text-1) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--text-3) !important;
}
.form-label, label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.input-group-text {
  background: var(--bg-card) !important;
  border-color: var(--gold-border-soft) !important;
  color: var(--text-3) !important;
}
option, select option { background: var(--bg-card) !important; color: var(--text-1) !important; }
.form-check-input {
  background-color: var(--bg-input) !important;
  border-color: var(--gold-border) !important;
}
.form-check-input:checked {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* ============================================================
   TABLES
   ============================================================ */
.table, table { color: var(--text-1) !important; border-color: var(--gold-border-soft) !important; width: 100% !important; }
.table thead th, table thead th, thead tr th {
  background: var(--bg-surface) !important;
  color: var(--text-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--gold-border-soft) !important;
  padding: 13px 16px !important;
  white-space: nowrap !important;
}
.table tbody td, table tbody td, tbody tr td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--gold-border-soft) !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
  border-color: var(--gold-border-soft) !important;
  color: var(--text-1) !important;
}
.table tbody tr:hover, tbody tr:hover { background: var(--gold-glow) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255,255,255,0.015) !important;
  color: var(--text-1) !important;
}
.table-bordered, .table-bordered td, .table-bordered th {
  border-color: var(--gold-border-soft) !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge, span.badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  border-radius: var(--r-pill) !important;
}
.badge.bg-primary, .badge.bg-warning, .badge-warning {
  background: rgba(214,194,138,0.14) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(214,194,138,0.22) !important;
}
.badge.bg-success, .badge-success {
  background: rgba(76,175,125,0.12) !important;
  color: var(--green) !important;
  border: 1px solid rgba(76,175,125,0.22) !important;
}
.badge.bg-danger, .badge-danger {
  background: rgba(224,112,112,0.12) !important;
  color: var(--red) !important;
  border: 1px solid rgba(224,112,112,0.22) !important;
}
.badge.bg-info, .badge-info {
  background: rgba(100,181,246,0.12) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(100,181,246,0.22) !important;
}
.badge.bg-secondary, .badge-secondary {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--gold-border-soft) !important;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert { border-radius: var(--r-md) !important; font-size: 13.5px !important; border-width: 1px !important; }
.alert-success { background: rgba(76,175,125,0.08) !important; border-color: rgba(76,175,125,0.25) !important; color: var(--green) !important; }
.alert-warning { background: rgba(214,194,138,0.08) !important; border-color: rgba(214,194,138,0.25) !important; color: var(--gold) !important; }
.alert-danger  { background: rgba(224,112,112,0.08) !important; border-color: rgba(224,112,112,0.25) !important; color: var(--red) !important; }
.alert-info    { background: rgba(100,181,246,0.08) !important; border-color: rgba(100,181,246,0.25) !important; color: var(--blue) !important; }

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: var(--r-md) !important;
  padding: 6px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}
.dropdown-item {
  color: var(--text-2) !important;
  font-size: 13.5px !important;
  padding: 9px 14px !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--ease-f) !important;
}
.dropdown-item:hover { background: var(--gold-glow) !important; color: var(--gold) !important; }
.dropdown-divider { border-color: var(--gold-border-soft) !important; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important;
  color: var(--text-1) !important;
}
.modal-header { border-bottom: 1px solid var(--gold-border-soft) !important; padding: 18px 24px !important; }
.modal-title  { font-family: var(--font-d) !important; font-weight: 700 !important; color: var(--text-1) !important; }
.modal-body   { padding: 24px !important; }
.modal-footer { border-top: 1px solid var(--gold-border-soft) !important; padding: 14px 24px !important; }
.btn-close    { filter: invert(80%) sepia(10%) saturate(300%) hue-rotate(5deg) !important; opacity: 0.6 !important; }
.btn-close:hover { opacity: 1 !important; }
.modal-backdrop { background: rgba(0,0,0,0.75) !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination .page-link {
  background: var(--bg-card) !important;
  border: 1px solid var(--gold-border-soft) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
  margin: 0 2px !important;
  transition: all var(--ease-f) !important;
}
.pagination .page-link:hover { background: var(--gold-glow) !important; border-color: var(--gold-border) !important; color: var(--gold) !important; }
.pagination .page-item.active .page-link { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--bg-base) !important; font-weight: 700 !important; }
.pagination .page-item.disabled .page-link { background: var(--bg-surface) !important; color: var(--text-3) !important; }

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs { border-bottom: 1px solid var(--gold-border-soft) !important; }
.nav-tabs .nav-link {
  color: var(--text-3) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: all var(--ease-f) !important;
}
.nav-tabs .nav-link:hover { color: var(--text-2) !important; border-bottom-color: var(--gold-dim) !important; }
.nav-tabs .nav-link.active { color: var(--gold) !important; border-bottom-color: var(--gold) !important; }
.tab-content { padding-top: 20px !important; }

/* ============================================================
   PROGRESS / LIST / MISC
   ============================================================ */
.progress { background: var(--bg-surface) !important; border-radius: var(--r-pill) !important; height: 5px !important; }
.progress-bar { background: var(--gold) !important; border-radius: var(--r-pill) !important; }

.list-group-item { background: var(--bg-card) !important; border-color: var(--gold-border-soft) !important; color: var(--text-1) !important; transition: background var(--ease-f) !important; }
.list-group-item:hover { background: var(--bg-card-hover) !important; }
.list-group-item.active { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--bg-base) !important; }

hr { border-color: var(--gold-border-soft) !important; opacity: 1 !important; }
code, pre { background: var(--bg-input) !important; color: var(--gold-lo) !important; border: 1px solid var(--gold-border-soft) !important; border-radius: var(--r-sm) !important; }
pre { padding: 14px !important; }
code { padding: 2px 6px !important; font-size: 12px !important; }
.spinner-border, .spinner-grow { color: var(--gold) !important; }
.border, .border-top, .border-bottom { border-color: var(--gold-border-soft) !important; }

/* Chart period buttons */
.btn-group .btn, .btn-group .btn-outline-secondary {
  background: var(--bg-surface) !important;
  border: 1px solid var(--gold-border-soft) !important;
  color: var(--text-3) !important;
  border-radius: var(--r-pill) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  margin: 0 2px !important;
  transition: all var(--ease-f) !important;
}
.btn-group .btn:hover { background: var(--gold-glow) !important; border-color: var(--gold-border) !important; color: var(--text-2) !important; }
.btn-group .btn.active, .btn-group .btn-primary { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--bg-base) !important; font-weight: 700 !important; }

/* Inline dark text fix */
*[style*="color:#000"], *[style*="color: #000"],
*[style*="color:black"], *[style*="color: black"],
*[style*="color:#111"], *[style*="color:#222"], *[style*="color:#333"] {
  color: var(--text-1) !important;
}


/* ============================================================
   AUTH PAGES — restore layout, hide injected UI
   ============================================================ */
body.auth-page #zolo-topbar,
body.auth-page #zolo-sidebar,
body.auth-page #zolo-overlay {
  display: none !important;
}

body.auth-page > .container,
body.auth-page > .container-fluid,
body.auth-page > main {
  margin-left: 0 !important;
  padding-top: 0 !important;
}

/* Auth card centering */
body.auth-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 24px !important;
}

.login-box, .auth-box, .register-box,
.login-card, .auth-card, .register-card,
body.auth-page .card {
  background: var(--bg-card) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: var(--r-xl) !important;
  padding: 36px !important;
  width: 100% !important;
  max-width: 420px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp 0.3s ease both; }

/* ============================================================
   AUTH PAGES
   ============================================================ */
body.login, body.auth, body.register,
.login-page, .auth-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 24px !important;
}

/* Center new order form */
.order-page-wrap { width: 100% !important; }
.order-page {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Cap select inputs on new order page */
#orderform-category,
#orderform-service,
#template-searchbyid {
  max-width: 800px !important;
  width: 100% !important;
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-gold { color: var(--gold) !important; }
.bg-dark   { background: var(--bg-card) !important; }
.rounded   { border-radius: var(--r-md) !important; }
.shadow    { box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; }

/* ============================================================
   MOBILE — Fix select dropdowns being unresponsive
   ============================================================ */
@media (max-width: 992px) {
  select.form-control,
  #orderform-category,
  #orderform-service,
  #method {
    pointer-events: auto !important;
    touch-action: auto !important;
    font-size: 16px !important;
    position: relative !important;
    z-index: 10 !important;
  }
}
.search-dropdown .dropdowntheme,
.search-dropdown .themeulli,
#new-order-search .dropdowntheme,
#new-order-search .themeulli {
  background: var(--bg-card) !important;
  border: 1px solid var(--gold-border-soft) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  margin-top: 4px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  z-index: 999 !important;
}

.search-dropdown .dropdowntheme li,
.search-dropdown .themeulli li,
#new-order-search .dropdowntheme li,
#new-order-search .themeulli li {
  background: transparent !important;
  color: var(--text-1) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(214,194,138,0.05) !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: background 0.1s ease !important;
}

.search-dropdown .dropdowntheme li:hover,
.search-dropdown .themeulli li:hover,
#new-order-search .dropdowntheme li:hover,
#new-order-search .themeulli li:hover {
  background: rgba(214,194,138,0.07) !important;
  color: #D6C28A !important;
}

.search-dropdown .dropdowntheme li:last-child,
.search-dropdown .themeulli li:last-child {
  border-bottom: none !important;
}

/* Search input in dark mode */
#template-searchbyid {
  background: var(--bg-input) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--gold-border-soft) !important;
  border-radius: 10px !important;
}
#template-searchbyid:focus {
  border-color: var(--gold-lo) !important;
  box-shadow: 0 0 0 3px rgba(214,194,138,0.08) !important;
  outline: none !important;
}
#template-searchbyid::placeholder {
  color: var(--text-3) !important;
}

/* ============================================================
   NEW ORDER — Search dropdown nuclear override
   ============================================================ */
.dropdowntheme *,
.themeulli *,
#new-order-search *,
.search-dropdown * {
  color: var(--text-1) !important;
  background: transparent !important;
}

.dropdowntheme,
.themeulli {
  background: #141416 !important;
  border: 1px solid rgba(214,194,138,0.15) !important;
}

.dropdowntheme li,
.themeulli li,
.dropdowntheme div,
.themeulli div,
.dropdowntheme span,
.themeulli span,
.dropdowntheme a,
.themeulli a {
  color: #F2F2F2 !important;
  background: transparent !important;
}

.dropdowntheme li:hover,
.themeulli li:hover,
.dropdowntheme div:hover,
.themeulli div:hover {
  background: rgba(214,194,138,0.1) !important;
  color: #D6C28A !important;
}

/* ============================================================
   DROPDOWN FIX — force dark background on container only
   ============================================================ */
.dropdowntheme,
.themeulli {
  background-color: #141416 !important;
  background: #141416 !important;
}

.dropdowntheme *,
.themeulli * {
  color: #F2F2F2 !important;
  background-color: transparent !important;
  background: transparent !important;
}

.dropdowntheme li:hover,
.themeulli li:hover,
.dropdowntheme div[onclick]:hover,
.themeulli div[onclick]:hover {
  background-color: rgba(214,194,138,0.1) !important;
  background: rgba(214,194,138,0.1) !important;
  color: #D6C28A !important;
}

/* ============================================================
   BOTTOM NAV — always tappable
   ============================================================ */
#zolo-bottom-nav {
  pointer-events: all !important;
  touch-action: auto !important;
  z-index: 1100 !important;
}
#zolo-bottom-nav a {
  pointer-events: all !important;
  touch-action: auto !important;
  -webkit-tap-highlight-color: rgba(214,194,138,0.1);
  cursor: pointer !important;
}

/* ============================================================
   MOBILE TOPBAR — hide elements that don't fit
   ============================================================ */
@media (max-width: 992px) {
  #zolo-topbar .topbar-balance { display: none !important; }
  #zolo-topbar { padding: 0 10px !important; }
  #zolo-topbar .topbar-right { gap: 6px !important; }
}

/* ============================================================
   AUTH PAGES — full reset, no panel layout interference
   ============================================================ */
body.auth-page > *,
body:has(.auth-wrap) > * {
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
body:has(.auth-wrap) {
  padding: 0 !important;
  margin: 0 !important;
}
.auth-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   HIDE TELEGRAM BUBBLE ON AUTH PAGES ONLY
   ============================================================ */
body.auth-page a[href*="t.me"],
body.auth-page a[href*="telegram"],
body.auth-page [class*="telegram"],
body.auth-page [id*="telegram"],
body.auth-page a[style*="position:fixed"],
body.auth-page a[style*="position: fixed"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   AUTH PAGES — center the form, remove sidebar offset
   ============================================================ */
body.auth-page > *:not(script):not(style):not(link) {
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
  
  /* ── Page fade-in ── */
body {
  animation: zoloFadeIn 0.4s ease forwards;
}
@keyframes zoloFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Card slide up ── */
.zolo-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.zolo-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Gold shimmer on logo ── */
@keyframes zoloShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
#zoloTopLogo div,
#zolo-sidebar .navbar-brand div,
#zolo-sidebar > a > div:first-child {
  background: linear-gradient(90deg, #D6C28A 0%, #fff8dc 40%, #D6C28A 60%, #b8a470 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: zoloShimmer 3s linear infinite;
}
  
/* ── Search dropdown position fix ── */
#new-order-search {
  position: relative !important;
  z-index: 999 !important;
}

#new-order-search .themeulli,
#new-order-search .dropdowntheme {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
}
  /* ── Select2 dropdown fix ── */
.select2-dropdown {
  background: #141416 !important;
  border: 1px solid rgba(214,194,138,0.2) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8) !important;
  z-index: 999999 !important;
}

.select2-results__option {
  background: #141416 !important;
  color: #F2F2F2 !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.select2-results__option--highlighted {
  background: rgba(214,194,138,0.1) !important;
  color: #D6C28A !important;
}

.select2-results__option[aria-selected=true] {
  background: rgba(214,194,138,0.08) !important;
  color: #D6C28A !important;
}

.select2-search--dropdown .select2-search__field {
  background: #0D0D0F !important;
  border: 1px solid rgba(214,194,138,0.1) !important;
  border-radius: 8px !important;
  color: #F2F2F2 !important;
  padding: 8px 12px !important;
}

.select2-container--open .select2-dropdown {
  z-index: 999999 !important;
}
  
  /* ── Topbar mobile squeeze fix ── */
@media (max-width: 992px) {
  #zolo-topbar .topbar-balance { display: none !important; }
  #zolo-topbar .topbar-addfunds span { display: none; }
  #zolo-topbar .topbar-addfunds { padding: 6px 10px !important; min-width: unset !important; }
  #zolo-help-btn span { display: none; }
  #zolo-help-btn { padding: 6px 8px !important; }
}
/* ============================================================
   ADD FUNDS — nuclear full width fix
   ============================================================ */
body > *:not(#zolo-sidebar):not(#zolo-topbar):not(#zolo-overlay):not(#zolo-bottom-nav) .col-md-8,
body > *:not(#zolo-sidebar):not(#zolo-topbar):not(#zolo-overlay):not(#zolo-bottom-nav) .col-md-10,
body > *:not(#zolo-sidebar):not(#zolo-topbar):not(#zolo-overlay):not(#zolo-bottom-nav) .col-sm-8,
body > *:not(#zolo-sidebar):not(#zolo-topbar):not(#zolo-overlay):not(#zolo-bottom-nav) [class*="offset"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  flex: 0 0 100% !important;
}