/*
 * TradeZone — REVAMP design system (Task #73)
 * Re-tunes the --tz-* tokens to a modern, premium trading aesthetic and adds a
 * polished component layer. Loaded AFTER design-tokens.css so it overrides.
 * PREVIEW ONLY until linked in the live header.
 */

:root {
  /* ── Backgrounds: aligned to the logo shell (#0C1520) ── */
  --tz-bg-page:       #0a0f17;
  --tz-bg-card:       #121925;
  --tz-bg-card-inner: #18212f;
  --tz-bg-deep:       #0c1520;   /* logo shell */
  --tz-bg-input:      #161f2c;
  --tz-bg-hover:      #1b2533;

  /* ── Borders ── */
  --tz-border:        #20293a;
  --tz-border-light:  #161e2a;
  --tz-border-input:  #2c3850;

  /* ── Brand: GOLD primary (logo Z #D4A017), teal secondary ── */
  --tz-accent:        #d4a017;
  --tz-accent-hover:  #e6b52a;
  --tz-accent-muted:  rgba(212,160,23,.15);
  --tz-secondary:     #23c99d;
  --tz-secondary-muted: rgba(35,201,157,.14);
  --tz-purple:        #7c6cff;
  --tz-purple-muted:  rgba(124,108,255,.14);
  --tz-gold:          #d4a017;

  /* ── Semantic: crisper buy/sell ── */
  --tz-success:       #1fc77b;
  --tz-success-muted: rgba(31,199,123,.14);
  --tz-danger:        #f6465d;
  --tz-danger-muted:  rgba(246,70,93,.14);
  --tz-warning:       #f0b90b;
  --tz-info:          #16a3fe;

  /* ── Text: higher contrast ── */
  --tz-text-primary:  #f5f7fb;
  --tz-text-body:     #c4cce0;
  --tz-text-muted:    #7d8aa6;
  --tz-text-faint:    #4a5570;

  /* ── Type scale: a touch larger/cleaner ── */
  --tz-font-sans:     'Inter','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --tz-font-size-base:14px;
  --tz-line-height:   1.55;

  /* ── Radii: softer, modern ── */
  --tz-radius-md:  8px;
  --tz-radius-lg:  12px;
  --tz-radius-xl:  16px;

  /* ── Shadows: soft depth + a brand glow ── */
  --tz-shadow-sm:  0 1px 3px rgba(0,0,0,.35);
  --tz-shadow-md:  0 6px 18px rgba(0,0,0,.45);
  --tz-shadow-lg:  0 16px 40px rgba(0,0,0,.55);
  --tz-glow:       0 0 0 3px rgba(212,160,23,.20);
}

/* ─────────────────────────── Component layer (.tzr-*) ─────────────────────── */

.tzr-card {
  background: var(--tz-bg-card);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-lg);
  box-shadow: var(--tz-shadow-sm);
  padding: var(--tz-space-5);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tzr-card:hover { border-color: var(--tz-border-input); box-shadow: var(--tz-shadow-md); }

.tzr-stat {
  background: linear-gradient(180deg, var(--tz-bg-card) 0%, var(--tz-bg-deep) 100%);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-lg);
  padding: var(--tz-space-5);
}
.tzr-stat .lbl { color: var(--tz-text-muted); font-size: var(--tz-font-size-xs); text-transform: uppercase; letter-spacing: .06em; }
.tzr-stat .val { color: var(--tz-text-primary); font-size: var(--tz-font-size-3xl); font-weight: 800; margin-top: 6px; }

.tzr-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border: none; cursor: pointer; font-weight: 700; font-size: var(--tz-font-size-base);
  padding: 11px 20px; border-radius: var(--tz-radius-md); color: #0c1520;
  background: linear-gradient(180deg, var(--tz-accent-hover) 0%, var(--tz-accent) 100%);
  box-shadow: 0 4px 14px rgba(212,160,23,.28); transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.tzr-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,160,23,.40); }
.tzr-btn:active { transform: translateY(0); }
.tzr-btn--ghost { background: transparent; color: var(--tz-accent); border: 1px solid var(--tz-border-input); box-shadow: none; }
.tzr-btn--ghost:hover { background: var(--tz-accent-muted); }
.tzr-btn--buy  { color:#fff; background: linear-gradient(180deg,var(--tz-success),#19a767); box-shadow: 0 4px 14px rgba(31,199,123,.3); }
.tzr-btn--sell { color:#fff; background: linear-gradient(180deg,var(--tz-danger),#d3344b);  box-shadow: 0 4px 14px rgba(246,70,93,.3); }

.tzr-input {
  width: 100%; background: var(--tz-bg-input); border: 1px solid var(--tz-border-input);
  border-radius: var(--tz-radius-md); padding: 12px 14px; color: var(--tz-text-primary);
  font-size: var(--tz-font-size-base); outline: none; transition: border-color .15s, box-shadow .15s;
}
.tzr-input:focus { border-color: var(--tz-accent); box-shadow: var(--tz-glow); }

.tzr-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--tz-radius-pill);
  font-size: var(--tz-font-size-xs); font-weight: 700;
  background: var(--tz-accent-muted); color: var(--tz-accent);
}
.tzr-badge--up { background: var(--tz-success-muted); color: var(--tz-success); }
.tzr-badge--down { background: var(--tz-danger-muted); color: var(--tz-danger); }

.tzr-table { width: 100%; border-collapse: collapse; }
.tzr-table th { text-align: left; color: var(--tz-text-muted); font-size: var(--tz-font-size-xs);
  text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--tz-border); font-weight: 600; }
.tzr-table td { padding: 13px 14px; border-bottom: 1px solid var(--tz-border-light); color: var(--tz-text-body); font-size: var(--tz-font-size-md); }
.tzr-table tr:hover td { background: var(--tz-bg-hover); }

.tzr-num { font-family: var(--tz-font-mono); }

/* ───────────────────────── Top nav (#75) → gold ──────────────────────────── */
/* Login/Register button: blue theme-bg → gold gradient w/ dark text */
.navbar .login-menu .btn.theme-bg,
.navbar .login-menu .btn,
.navbar .btn.theme-bg {
  background: linear-gradient(180deg, var(--tz-accent-hover), var(--tz-accent)) !important;
  color: #0c1520 !important; border: 0 !important; font-weight: 700 !important;
  border-radius: 8px !important; padding: 8px 20px !important;
  box-shadow: 0 3px 12px rgba(212,160,23,.28) !important; transition: transform .12s ease;
}
.navbar .login-menu .btn:hover, .navbar .btn.theme-bg:hover { transform: translateY(-1px); }
/* Nav links + dropdown items: gold on hover/active */
.navbar .nav-link:hover,
.navbar .dropdown-item:hover,
.navbar .nav-item.dropdown:hover > .nav-link,
.navbar .theme-color:hover { color: var(--tz-accent) !important; }
.navbar .dropdown-menu .dropdown-item:hover { background: var(--tz-accent-muted) !important; color: var(--tz-accent) !important; }
/* Featured "NEW/HOT" pill → gold (was red) */
.navbar sup.featured, .navbar sup.bg-featured { background: var(--tz-accent) !important; color: #0c1520 !important; }

/* ── Full nav redesign (#75): slim glass bar matching the landing preview ── */
header.dark-bb, header.light-bb, .navbar { position: sticky; top: 0; z-index: 1000; }
.navbar {
  background: var(--tz-bg-deep) !important;
  border-bottom: 1px solid var(--tz-border) !important;
  min-height: 64px; padding: 6px 24px !important; gap: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.navbar-brand img { max-height: 30px; width: auto; }
.navbar-nav .nav-link {
  color: var(--tz-text-muted) !important; font-weight: 600; font-size: 14px;
  padding: 8px 13px !important; border-radius: 9px;
  transition: color .15s ease, background .15s ease;
  display: inline-flex; align-items: center; gap: 7px;
}
.navbar-nav .nav-link:hover { color: var(--tz-text-primary) !important; background: var(--tz-bg-hover); }
.navbar-nav .nav-icon, .navbar-nav .icon-size { color: inherit !important; }
/* dropdown menus → clean token cards */
.navbar .dropdown-menu {
  background: var(--tz-bg-card) !important; border: 1px solid var(--tz-border) !important;
  border-radius: 13px !important; box-shadow: var(--tz-shadow-lg) !important;
  padding: 8px !important; margin-top: 10px !important;
}
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-body a, .navbar .dropdown-body .dropdown-item {
  color: var(--tz-text-body) !important; border-radius: 9px !important; padding: 10px 12px !important;
}
.navbar .dropdown-body .content .subtext { color: var(--tz-text-muted) !important; }
.navbar .dropdown-header, .navbar .dropdown-header p { color: var(--tz-text-muted) !important; background: transparent !important; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-body a:hover { background: var(--tz-accent-muted) !important; color: var(--tz-accent) !important; }
/* right-side icon controls (theme toggle, app download, language, user) */
.navbar .header-custom-icon > a, .navbar .nav-icon.changeThemeLight, .navbar .userMenu .nav-link {
  color: var(--tz-text-muted) !important;
}
.navbar .header-custom-icon > a:hover, .navbar .userMenu .nav-link:hover { color: var(--tz-accent) !important; }
.navbar .userMenu .nav-link { color: var(--tz-text-body) !important; font-weight: 600; }
/* mobile flyout nav → token surfaces */
.nav-mobile, .nav-mobile.show { background: var(--tz-bg-deep) !important; }
.nav-mobile .nav__label, .nav-mobile .nav__item a, .nav-mobile .nav__item { color: var(--tz-text-body) !important; }
.nav-mobile .nav__item a:hover { color: var(--tz-accent) !important; }

/* ═══════════ Landing section components (#74, match redesign_landing preview) ═══════════ */
.rd-sec{padding:54px 0}
.rd-sec .container,.rd-sec .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.rd-sec h2,.rd-h2{font-size:1.9rem;font-weight:800;color:var(--tz-text-primary);text-align:center;margin:0 0 8px;letter-spacing:-.01em}
.rd-sub{text-align:center;color:var(--tz-text-muted);max-width:560px;margin:0 auto 36px}
/* feature/product grid */
.rd-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rd-fcard{background:var(--tz-bg-card);border:1px solid var(--tz-border);border-radius:16px;padding:24px;transition:.2s;display:block;color:inherit;text-decoration:none}
.rd-fcard:hover{border-color:rgba(212,160,23,.4);transform:translateY(-3px);box-shadow:var(--tz-shadow-md);text-decoration:none}
.rd-fcard .fi{width:48px;height:48px;border-radius:13px;background:var(--tz-accent-muted);color:var(--tz-accent);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.rd-fcard h3{font-size:1.1rem;font-weight:700;color:var(--tz-text-primary);margin:0 0 6px}
.rd-fcard p{color:var(--tz-text-muted);font-size:.9rem;margin:0}
.rd-fcard .go{display:inline-block;margin-top:12px;color:var(--tz-accent);font-weight:700;font-size:.85rem}
/* steps */
.rd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rd-step{background:var(--tz-bg-card);border:1px solid var(--tz-border);border-radius:16px;padding:26px}
.rd-step .num{width:38px;height:38px;border-radius:11px;background:var(--tz-accent-muted);color:var(--tz-accent);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.rd-step h3{margin:0 0 6px;color:var(--tz-text-primary);font-size:1.05rem}
.rd-step p{margin:0;color:var(--tz-text-muted);font-size:.9rem}
/* band */
.rd-band{background:linear-gradient(120deg,var(--tz-bg-card),var(--tz-bg-deep));border:1px solid var(--tz-border);border-radius:22px;padding:36px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}
.rd-band h2{margin:0 0 8px;text-align:left}
.rd-band p{color:var(--tz-text-muted);margin:0 0 16px}
.rd-bstats{display:flex;gap:26px;flex-wrap:wrap}
.rd-bstat .n{font-size:1.5rem;font-weight:800;color:var(--tz-accent);font-family:var(--tz-font-mono)} .rd-bstat .l{font-size:.78rem;color:var(--tz-text-muted)}
/* plans */
.rd-prgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rd-plan{background:var(--tz-bg-card);border:1px solid var(--tz-border);border-radius:16px;padding:26px;text-align:center}
.rd-plan.feat{border-color:var(--tz-accent);box-shadow:0 0 0 1px var(--tz-accent),var(--tz-shadow-md)}
.rd-plan .pn{font-weight:700;color:var(--tz-text-primary);font-size:1.05rem}
.rd-plan .pp{font-size:2rem;font-weight:800;color:var(--tz-accent);font-family:var(--tz-font-mono);margin:10px 0}
.rd-plan ul{list-style:none;padding:0;margin:0 0 18px;text-align:left}
.rd-plan li{padding:6px 0;color:var(--tz-text-muted);font-size:.88rem}.rd-plan li::before{content:'✓ ';color:var(--tz-success);font-weight:800}
/* markets table */
.rd-mktwrap{background:var(--tz-bg-card);border:1px solid var(--tz-border);border-radius:18px;overflow:hidden}
.rd-mkttabs{display:flex;gap:4px;padding:14px 18px;border-bottom:1px solid var(--tz-border);flex-wrap:wrap}
.rd-mkttab{padding:7px 14px;border-radius:8px;font-size:.83rem;font-weight:700;color:var(--tz-text-muted);cursor:pointer}
.rd-mkttab.on{color:#0c1520;background:linear-gradient(180deg,var(--tz-accent-hover),var(--tz-accent))}
table.rd-mkt{width:100%;border-collapse:collapse}
table.rd-mkt th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tz-text-muted);padding:12px 18px;border-bottom:1px solid var(--tz-border)}
table.rd-mkt td{padding:14px 18px;border-bottom:1px solid var(--tz-border-light);font-family:var(--tz-font-mono)}
table.rd-mkt tr:hover td{background:var(--tz-accent-muted)}
table.rd-mkt .nm{font-family:var(--tz-font-sans);font-weight:700;color:var(--tz-text-primary);display:flex;align-items:center;gap:10px}
table.rd-mkt .ci{width:30px;height:30px;border-radius:50%;background:var(--tz-accent-muted);overflow:hidden;display:flex;align-items:center;justify-content:center}
table.rd-mkt .ci img{width:30px;height:30px;border-radius:50%}
.rd-tbtn{font-family:var(--tz-font-sans);padding:6px 14px;border-radius:8px;background:var(--tz-accent-muted);color:var(--tz-accent);font-weight:700;font-size:.8rem;text-decoration:none}
/* two-col panels */
.rd-twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rd-panel{background:var(--tz-bg-card);border:1px solid var(--tz-border);border-radius:16px;padding:24px}
.rd-panel h3{margin:0 0 14px;color:var(--tz-text-primary)}
.rd-newsitem{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--tz-border-light)}
.rd-newsitem:last-child{border:0}.rd-newsitem .tag{flex:0 0 auto;font-size:.68rem;font-weight:700;color:var(--tz-accent);background:var(--tz-accent-muted);padding:2px 8px;border-radius:20px;height:fit-content}
.rd-newsitem .nt{color:var(--tz-text-body);font-size:.9rem}.rd-newsitem .nd{color:var(--tz-text-faint);font-size:.75rem}
.rd-social{display:flex;gap:10px;flex-wrap:wrap}
.rd-social a{width:44px;height:44px;border-radius:12px;border:1px solid var(--tz-border);display:flex;align-items:center;justify-content:center;color:var(--tz-text-muted);font-size:18px}
.rd-social a:hover{border-color:var(--tz-accent);color:var(--tz-accent)}
/* CTA band */
.rd-cta{background:linear-gradient(135deg,var(--tz-bg-card),var(--tz-bg-deep));border:1px solid var(--tz-border);border-radius:22px;padding:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rd-cta h2{margin:0 0 6px;font-size:1.6rem;color:var(--tz-text-primary);text-align:left}
.rd-cta p{margin:0;color:var(--tz-text-muted)}
.rd-btn-g{height:48px;display:inline-flex;align-items:center;padding:0 24px;border-radius:11px;font-weight:800;color:#0c1520;background:linear-gradient(180deg,var(--tz-accent-hover),var(--tz-accent));box-shadow:0 4px 16px rgba(212,160,23,.32);text-decoration:none}
.rd-btn-o{height:48px;display:inline-flex;align-items:center;padding:0 24px;border-radius:11px;font-weight:700;color:var(--tz-text-primary);border:1px solid var(--tz-border-input);text-decoration:none}
@media(max-width:920px){.rd-fgrid,.rd-steps,.rd-prgrid{grid-template-columns:1fr}.rd-band,.rd-twocol{grid-template-columns:1fr}}

/* Typography: use the preview font (Inter) across the redesigned chrome + landing */
body, .rdnav, .rdfoot, .rd-hero, .rd-sec, .rd-cta,
[class^="rd-"], [class*=" rd-"] { font-family: var(--tz-font-sans); }

/* ── Make .tz-btn-* self-contained (they're used WITHOUT the base .tz-btn class
      in home_ai_bots / home_marketplace / home_blog_box → were rendering unstyled) ── */
.tz-btn-primary, .tz-btn-ghost, .tz-btn-secondary, .tz-btn-purple, .tz-btn-success, .tz-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: .92rem; line-height: 1;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
}
.tz-btn-primary, .tz-btn-secondary {
  background: linear-gradient(180deg, var(--tz-accent-hover), var(--tz-accent)); color: #0c1520;
  box-shadow: 0 3px 12px rgba(212,160,23,.28);
}
.tz-btn-primary:hover, .tz-btn-secondary:hover { transform: translateY(-1px); color: #0c1520; box-shadow: 0 6px 18px rgba(212,160,23,.4); }
.tz-btn-ghost { background: transparent; color: var(--tz-text-primary); border-color: var(--tz-border-input); }
.tz-btn-ghost:hover { border-color: var(--tz-accent); background: var(--tz-accent-muted); color: var(--tz-text-primary); }
.tz-btn-primary i, .tz-btn-ghost i, .tz-btn-secondary i { font-size: .9em; }

/* ── Bootstrap brand classes → gold (inner pages use .btn-primary/.btn-info etc.) ── */
.btn-primary {
  background-color: var(--tz-accent) !important; border-color: var(--tz-accent) !important;
  color: #0c1520 !important; font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--tz-accent-hover) !important; border-color: var(--tz-accent-hover) !important; color: #0c1520 !important;
}
/* info = softer secondary so hierarchy stays readable */
.btn-info {
  background-color: var(--tz-accent-muted) !important; border-color: var(--tz-border-input) !important;
  color: var(--tz-accent) !important; font-weight: 600;
}
.btn-info:hover, .btn-info:focus {
  background-color: var(--tz-accent) !important; border-color: var(--tz-accent) !important; color: #0c1520 !important;
}
.btn-outline-primary, .btn-outline-info { color: var(--tz-accent) !important; border-color: var(--tz-accent) !important; }
.btn-outline-primary:hover, .btn-outline-info:hover { background-color: var(--tz-accent) !important; color: #0c1520 !important; }
.bg-primary, .badge.bg-primary, .badge.bg-info { background-color: var(--tz-accent) !important; color: #0c1520 !important; }
.text-primary, a.text-primary { color: var(--tz-accent) !important; }
/* progress/step indicators + nav-pills using primary */
.nav-pills .nav-link.active, .page-item.active .page-link { background-color: var(--tz-accent) !important; border-color: var(--tz-accent) !important; color: #0c1520 !important; }

/* ── Unify restored sections with the rd- look (radius + section headings) ── */
.mod-card, .bot-card, .tz-blog-card, .mkt-preview-card, .tz-fee-card, .fee-table-wrap { border-radius: 16px !important; }
.section-title { font-size: 1.9rem !important; font-weight: 800 !important; color: var(--tz-text-primary) !important; letter-spacing: -.01em; }
.section-sub { color: var(--tz-text-muted) !important; }
.section-eyebrow { color: var(--tz-accent) !important; }

/* ── #79 Mobile sweep: fix Bootstrap .row negative-margin bleed on trade pages ──
   .page-container has no padding, so a .row placed as its DIRECT child bleeds
   ~15px each side -> 14px horizontal overflow on Futures/Forex/Margin. Neutralise
   the margin only for rows that are direct children of .page-container (the exact
   offenders); nested rows keep their gutters. */
.page-container > .row { margin-left: 0 !important; margin-right: 0 !important; }

/* ── #83/#84 Trade gold pass: ionRangeSlider (buy/sell % slider) -> brand gold ── */
.irs-bar,.irs--flat .irs-bar,.irs--big .irs-bar,.irs--round .irs-bar,.irs--sharp .irs-bar,.irs--square .irs-bar{background:var(--tz-accent,#d4a017)!important;border-color:var(--tz-accent,#d4a017)!important}
.irs-from,.irs-to,.irs-single,.irs--flat .irs-from,.irs--flat .irs-to,.irs--flat .irs-single,.irs--big .irs-from,.irs--big .irs-to,.irs--big .irs-single{background:var(--tz-accent,#d4a017)!important;color:#1a1205!important}
.irs-from:before,.irs-to:before,.irs-single:before,.irs--flat .irs-from:before,.irs--flat .irs-to:before,.irs--flat .irs-single:before{border-top-color:var(--tz-accent,#d4a017)!important}
.irs-handle,.irs-handle>i:first-child,.irs--flat .irs-handle>i:first-child,.irs--big .irs-handle{background:var(--tz-accent,#d4a017)!important;border-color:var(--tz-accent,#d4a017)!important}
.irs-handle:hover,.irs-handle.state_hover{background:var(--tz-accent-hover,#e6b52a)!important}

/* ── #79 Mobile sweep: safety-net against residual sub-5px Bootstrap row bleeds ──
   (Earn/P2P .container>.row bleed ~4px). overflow-x:clip prevents the horizontal
   scroll WITHOUT establishing a scroll container, so position:sticky/fixed (nav,
   dashboard drawer) and the ticker marquee are unaffected. Mobile only. */
@media(max-width:980px){ html, body { overflow-x: clip; } }