/**
 * Global chrome aligned to xtremetrade.org:
 * light page, white navbar, navy top bar / footer, gold + cyan accents.
 * Page stylesheets own section layout; this file unifies shared chrome.
 */
/* Page backgrounds come from each stylesheet (public light / user dark / admin navy). */
html {
  color-scheme: light;
}

::selection {
  background: rgba(255, 215, 0, 0.28);
  color: var(--vm-ink);
}

:focus-visible {
  outline: 1px solid var(--color-focus);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #e2e8f0;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 43, 70, 0.28);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--vm-gold);
}

a {
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--vm-graphite);
}

.top-bar {
  background: #0f2b46 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.12);
}
.top-bar a {
  color: inherit;
}
.top-bar i {
  color: #ffd700 !important;
}
.top-bar select {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.top-bar select option {
  background: #0f2b46;
  color: #ffffff;
}

.navbar {
  background: #ffffff !important;
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: none;
}
.navbar.scrolled,
.navbar.sticky {
  background: rgba(10, 25, 45, 0.95) !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.navbar nav a {
  color: #1e293b !important;
}
.navbar nav a:hover,
.navbar nav a.active {
  color: #0f2b46 !important;
}
.navbar.scrolled nav a,
.navbar.sticky nav a {
  color: #ffffff !important;
}
.navbar.scrolled nav a:hover,
.navbar.scrolled nav a.active,
.navbar.sticky nav a.active {
  color: #ffd700 !important;
}
.navbar .menu-toggle {
  color: #0f2b46 !important;
}
.navbar.scrolled .menu-toggle {
  color: #ffd700 !important;
}
.navbar nav a.cta-link {
  background: linear-gradient(145deg, #ffd700, #ffb800) !important;
  color: #0f2b46 !important;
  border: 2px solid transparent !important;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
}
.navbar nav a.cta-link:hover {
  background: linear-gradient(145deg, #ffb800, #ffd700) !important;
  border-color: #00ffff !important;
  color: #0f2b46 !important;
}
.navbar.scrolled nav a.cta-link {
  background: linear-gradient(145deg, #ffd700, #ffaa00) !important;
  color: #0a1a2f !important;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3) !important;
}

@media (max-width: 992px) {
  .navbar nav,
  #nav-menu {
    background: #0a1a2f !important;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
  }
  .navbar nav a,
  .navbar.scrolled nav a {
    color: #ffffff !important;
  }
  .navbar nav a:hover,
  .navbar nav a.active {
    background: #ffd700 !important;
    color: #0a1a2f !important;
  }
}

.hero h1,
.hero .line {
  color: #ffffff !important;
}
.hero-badges span,
.hero p,
.hero-content p {
  color: rgba(255, 255, 255, 0.9);
}

.cta-btn,
.btn-primary,
.btn-reset,
button[type="submit"]:not(.whatsapp-float-btn):not(.btn-sell):not(.btn-buy):not(.auth-link-btn):not(.pw-toggle) {
  background: #ffd700;
  color: #0f2b46 !important;
  border: 1px solid #ffb800;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}
.cta-btn:hover,
.btn-primary:hover,
.btn-reset:hover {
  background: #ffb800;
  color: #0f2b46;
}

.btn-secondary,
.cta-btn-secondary,
.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover,
.cta-btn-secondary:hover,
.btn-outline:hover {
  border-color: #ffd700;
  color: #0f2b46;
}

.btn-buy,
.btn-deposit,
.btn-invest {
  background: #4caf50 !important;
  color: #ffffff !important;
  border-color: #4caf50 !important;
}
.btn-buy:hover,
.btn-deposit:hover,
.btn-invest:hover {
  background: #43a047 !important;
}
.btn-sell {
  background: #c45c5c !important;
  color: #ffffff !important;
}

.badge-success,
.status-success,
.status-active,
.change-positive {
  color: #4caf50 !important;
}
.badge-premium,
.status-premium {
  color: #ffd700 !important;
}
.badge-pending,
.status-pending {
  color: #ffaa00 !important;
}
.badge-error,
.status-error,
.change-negative {
  color: #c45c5c !important;
}

/* Logo stays natural on light and dark chrome */
.navbar .logo img,
.navbar.scrolled .logo img,
.footer-logo img {
  filter: none !important;
}

.footer-logo video,
.footer-logo .site-logo-video,
.footer-logo .site-logo-video--footer,
.footer-logo img {
  display: block;
  width: 148px !important;
  height: auto !important;
  max-width: 148px;
  max-height: 148px;
  margin-bottom: 20px;
  object-fit: contain !important;
  object-position: center center;
  aspect-ratio: auto;
  border-radius: 50% !important;
  clip-path: none;
  filter: none !important;
  background: #000;
}

.footer {
  background: #0a1a2f !important;
  color: #94a3b8 !important;
  border-top-color: rgba(255, 215, 0, 0.12);
  position: relative;
  overflow: hidden;
}
.footer-bottom,
.risk-disclaimer {
  background: transparent !important;
  color: #94a3b8 !important;
  border-top-color: rgba(255, 255, 255, 0.1);
}
.footer-watermark {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
.footer-watermark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.footer-watermark text {
  fill: rgba(255, 215, 0, 0.18);
  font-weight: 800;
  font-size: 128px;
  font-family: Inter, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
}
.footer-grid,
.footer-bottom,
.footer .risk-disclaimer {
  position: relative;
  z-index: 1;
}
.footer h4 {
  color: #ffffff !important;
}
.footer a {
  color: #94a3b8 !important;
}
.footer a:hover {
  color: #ffd700 !important;
}

.sidebar {
  background: #0f2b46 !important;
  border-right: 1px solid rgba(255, 215, 0, 0.18) !important;
  color: #ffffff;
}

.modal,
.modal-content,
.logout-confirm-modal {
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}