/* Coin Dealer X — metal chart theme (dark / gold) */

body.cbd-site .cbd-metal-charts-page {
  position: relative;
  z-index: 1;
}

body.cbd-site .cbd-metal-charts-hero {
  position: relative;
  z-index: 1;
}

/* Ticker strip */
body.cbd-site .cbd-metal-ticker {
  position: relative;
  border: 1px solid var(--cbd-border);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: var(--cbd-shadow-sm);
  overflow: hidden;
}

body.cbd-site .cbd-metal-ticker::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}

body.cbd-site .cbd-metal-ticker--gold::before {
  background: linear-gradient(180deg, var(--cbd-gold), var(--cbd-gold-deep));
}

body.cbd-site .cbd-metal-ticker--silver::before {
  background: linear-gradient(180deg, #e2e8f0, #94a3b8);
}

body.cbd-site .cbd-metal-ticker--platinum::before {
  background: linear-gradient(180deg, #f3f4f6, #9ca3af);
}

body.cbd-site .cbd-metal-ticker--palladium::before {
  background: linear-gradient(180deg, #c7d8eb, #6b8cae);
}

body.cbd-site .cbd-metal-ticker-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cbd-text-muted);
  margin-bottom: 0.35rem;
}

body.cbd-site .cbd-metal-ticker--gold .cbd-metal-ticker-label {
  color: var(--cbd-gold);
}

body.cbd-site .cbd-metal-ticker-price {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--cbd-text);
}

body.cbd-site .cbd-metal-ticker--gold .cbd-metal-ticker-price {
  background: linear-gradient(135deg, #c9a227 0%, var(--cbd-gold) 55%, #fff3b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Chart cards */
body.cbd-site .cbd-metal-chart-card {
  border: 1px solid var(--cbd-border);
  background: linear-gradient(160deg, rgba(17, 24, 39, 0.92), rgba(3, 7, 18, 0.98));
  box-shadow: var(--cbd-shadow-sm);
  border-radius: var(--cbd-radius);
  overflow: hidden;
}

body.cbd-site .cbd-metal-chart-card .card-header,
body.cbd-site .cbd-metal-chart-card .card-body {
  background: transparent;
  border-color: var(--cbd-border);
}

body.cbd-site .cbd-metal-chart-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

body.cbd-site .cbd-metal-chart-title {
  color: var(--cbd-text);
  line-height: 1.35;
}

body.cbd-site .cbd-metal-refresh {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: var(--cbd-border-bright);
  color: var(--cbd-text-muted);
}

body.cbd-site .cbd-metal-refresh:hover {
  border-color: var(--cbd-gold);
  color: var(--cbd-gold);
  background: rgba(228, 198, 90, 0.08);
}

/* Dark chart body gradients */
body.cbd-site .spotpro-metal-chart--gold .card-body {
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(228, 198, 90, 0.14) 0%, transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.4) 100%);
}

body.cbd-site .spotpro-metal-chart--silver .card-body {
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(148, 163, 184, 0.12) 0%, transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.4) 100%);
}

body.cbd-site .spotpro-metal-chart--platinum .card-body {
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(156, 163, 175, 0.1) 0%, transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.4) 100%);
}

body.cbd-site .spotpro-metal-chart--palladium .card-body {
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(107, 140, 174, 0.12) 0%, transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.4) 100%);
}

body.cbd-site .spotpro-metal-hero-price {
  color: var(--cbd-text);
}

body.cbd-site .spotpro-metal-chart--gold .spotpro-metal-hero-price {
  background: linear-gradient(135deg, #8b6914 0%, var(--cbd-gold) 42%, #fff3b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.cbd-site .spotpro-metal-chart--silver .spotpro-metal-hero-price {
  background: linear-gradient(135deg, #64748b 0%, #cbd5e1 45%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.cbd-site .spotpro-metal-chart--platinum .spotpro-metal-hero-price {
  background: linear-gradient(135deg, #6b7280 0%, #d1d5db 45%, #f9fafb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.cbd-site .spotpro-metal-chart--palladium .spotpro-metal-hero-price {
  background: linear-gradient(135deg, #4a6278 0%, #a8bfd4 45%, #e8f0f8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.cbd-site .spotpro-metal-hero-change {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--cbd-border);
  color: var(--cbd-text-muted);
}

body.cbd-site .spotpro-metal-hero-change.is-up {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.28);
}

body.cbd-site .spotpro-metal-hero-change.is-down {
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(248, 113, 113, 0.28);
}

body.cbd-site .spotpro-metal-hero-period {
  color: var(--cbd-text-dim);
}

body.cbd-site .spotpro-metal-range-group {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--cbd-border);
}

body.cbd-site .spotpro-metal-range-btn {
  color: var(--cbd-text-muted);
}

body.cbd-site .spotpro-metal-range-btn:hover {
  color: var(--cbd-text);
  background: rgba(255, 255, 255, 0.08);
}

body.cbd-site .spotpro-metal-range-btn.active {
  color: var(--cbd-bg);
  background: var(--cbd-gold);
  box-shadow: 0 4px 14px var(--cbd-gold-glow);
}

body.cbd-site .spotpro-metal-chart--silver .spotpro-metal-range-btn.active {
  color: #0f172a;
  background: #e2e8f0;
  box-shadow: 0 4px 14px rgba(148, 163, 184, 0.25);
}

body.cbd-site .spotpro-metal-chart--platinum .spotpro-metal-range-btn.active {
  color: #111827;
  background: #d1d5db;
}

body.cbd-site .spotpro-metal-chart--palladium .spotpro-metal-range-btn.active {
  color: #0f172a;
  background: #a8bfd4;
}

body.cbd-site .spotpro-metal-stat {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--cbd-border);
}

body.cbd-site .spotpro-metal-stat-label {
  color: var(--cbd-text-dim);
}

body.cbd-site .spotpro-metal-stat-value {
  color: var(--cbd-text);
}

body.cbd-site .spotpro-metal-stat-value.is-up {
  color: #34d399;
}

body.cbd-site .spotpro-metal-stat-value.is-down {
  color: #f87171;
}

body.cbd-site .spotpro-metal-hover-inspect {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--cbd-border);
  color: var(--cbd-text-muted);
}

body.cbd-site .spotpro-metal-hover-inspect.is-active {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--cbd-border-bright);
  color: var(--cbd-text);
}

body.cbd-site .spotpro-metal-chart--gold .spotpro-metal-hover-inspect.is-active {
  border-color: rgba(228, 198, 90, 0.35);
  background: rgba(228, 198, 90, 0.08);
}

body.cbd-site .spotpro-metal-chart--silver .spotpro-metal-hover-inspect.is-active {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
}

body.cbd-site .spotpro-metal-chart--platinum .spotpro-metal-hover-inspect.is-active {
  border-color: rgba(156, 163, 175, 0.35);
  background: rgba(156, 163, 175, 0.08);
}

body.cbd-site .spotpro-metal-chart--palladium .spotpro-metal-hover-inspect.is-active {
  border-color: rgba(107, 140, 174, 0.35);
  background: rgba(107, 140, 174, 0.08);
}

body.cbd-site .spotpro-metal-hover-date {
  color: var(--cbd-text-muted);
}

body.cbd-site .spotpro-metal-hover-price {
  color: var(--cbd-text);
}

body.cbd-site .spotpro-metal-hover-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--cbd-border);
  color: var(--cbd-text-muted);
}

body.cbd-site .spotpro-metal-hover-chip.is-up {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.25);
}

body.cbd-site .spotpro-metal-hover-chip.is-down {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.25);
}

body.cbd-site .spotpro-metal-chart-wrap.is-loading::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.01), rgba(228, 198, 90, 0.12), rgba(255, 255, 255, 0.01));
}

/* Crosshair float panel */
body.cbd-site .spotpro-metal-crosshair-float {
  background: rgba(17, 24, 39, 0.96) !important;
  border-color: var(--cbd-border-bright) !important;
  box-shadow: var(--cbd-shadow-sm);
  color: var(--cbd-text);
}

body.cbd-site .spotpro-metal-chart--gold .spotpro-metal-crosshair-float {
  border-color: rgba(228, 198, 90, 0.4) !important;
}

body.cbd-site .spotpro-metal-crosshair-float-price {
  color: var(--cbd-text);
}

body.cbd-site .spotpro-metal-crosshair-float-date,
body.cbd-site .spotpro-metal-crosshair-float-row,
body.cbd-site .spotpro-metal-crosshair-float-sub {
  color: var(--cbd-text-muted);
}

body.cbd-site .spotpro-metal-crosshair-float-row strong {
  color: var(--cbd-text);
}

body.cbd-site .spotpro-metal-crosshair-float-row.is-up strong {
  color: #34d399;
}

body.cbd-site .spotpro-metal-crosshair-float-row.is-down strong {
  color: #f87171;
}

body.cbd-site .spotpro-metal-crosshair-tag {
  background: rgba(17, 24, 39, 0.92);
  border-color: var(--cbd-border-bright);
  color: var(--cbd-text-muted);
}

body.cbd-site .spotpro-metal-chart-canvas .text-muted {
  color: var(--cbd-text-muted) !important;
}

body.cbd-site .cbd-metal-charts-footnote {
  border-color: var(--cbd-border);
  background: rgba(255, 255, 255, 0.03);
}

/* Apex toolbar on dark */
body.cbd-site .spotpro-metal-chart-canvas .apexcharts-toolbar svg {
  fill: var(--cbd-text-muted);
}

body.cbd-site .spotpro-metal-chart-canvas .apexcharts-toolbar svg:hover {
  fill: var(--cbd-gold);
}

@media (max-width: 767.98px) {
  body.cbd-site .spotpro-metal-range-group {
    width: 100%;
    justify-content: center;
  }

  body.cbd-site .spotpro-metal-chart-toolbar {
    justify-content: center;
  }
}