/**
 * BOUTIQUE GOLD THEME — Luxury Dark / Gold / Deep Emerald
 * Activated by: body.theme-gold
 */

/* ═══ Google Fonts Import ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600&display=swap');

/* ═══ CSS Variables ═════════════════════════════════════════════════════════ */
body.theme-gold {
  --gold-100: #fffbeb;
  --gold-200: #fef3c7;
  --gold-300: #fde68a;
  --gold-400: #fcd34d;
  --gold-500: #d4a843;
  --gold-600: #b8922e;
  --gold-700: #92700f;
  --gold-accent: #e8c96d;
  --gold-bright: #f5d87e;
  --gold-deep: #8a6212;

  --emerald-900: #022c16;
  --emerald-800: #064e28;
  --emerald-700: #065f32;
  --emerald-600: #0a7a40;
  --emerald-500: #0e9450;
  --emerald-accent: #16a55a;

  --black-pure: #000000;
  --black-950: #050a07;
  --black-900: #080f0a;
  --black-800: #0e1a12;
  --black-700: #131f16;
  --black-600: #1a2b1e;
  --black-500: #243429;
  --black-400: #2e4234;

  --luxury-bg: #05090a;
  --luxury-surface: #0c1410;
  --luxury-card: #0f1a14;
  --luxury-border: #2a3d2e;
  --luxury-border-gold: #6b5019;
  --luxury-text: #e8dfc8;
  --luxury-text-dim: #8a7d60;
  --luxury-text-muted: #4a4235;
  --luxury-highlight: rgba(212,168,67,.08);

  /* Typography */
  --font-display: 'Cinzel', 'Trajan Pro', serif;
  --font-body: 'Cormorant Garamond', 'Garamond', serif;
  --font-ui: 'Montserrat', 'Helvetica Neue', sans-serif;
}

/* ═══ Base overrides ════════════════════════════════════════════════════════ */
body.theme-gold {
  background: var(--luxury-bg);
  color: var(--luxury-text);
  font-family: var(--font-body);
  font-size: 16px;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(10,122,64,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(184,146,46,.04) 0%, transparent 50%);
}

body.theme-gold a { color: var(--gold-accent); }
body.theme-gold a:hover { color: var(--gold-bright); text-decoration: none; border-bottom: 1px solid var(--gold-accent); }

/* ═══ Header ═══════════════════════════════════════════════════════════════ */
body.theme-gold header {
  background: var(--black-900);
  border-bottom: 1px solid var(--luxury-border-gold);
  box-shadow: 0 1px 30px rgba(212,168,67,.08);
  backdrop-filter: blur(8px);
}

body.theme-gold .logo {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--gold-accent);
  text-shadow: 0 0 20px rgba(212,168,67,.3);
  font-size: 17px;
}

body.theme-gold nav a,
body.theme-gold .nav-link {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--luxury-text-dim);
  border: none !important;
}

body.theme-gold nav a:hover,
body.theme-gold .nav-link:hover {
  color: var(--gold-accent);
  border: none !important;
}

/* Sidebar */
body.theme-gold #sidebar,
body.theme-gold .sidebar {
  background: var(--black-900);
  border-right: 1px solid var(--luxury-border-gold);
}

body.theme-gold .sb-title {
  font-family: var(--font-display);
  letter-spacing: .14em;
  color: var(--gold-accent);
  font-size: 11px;
  font-weight: 600;
}

/* ═══ Main content wrapper ══════════════════════════════════════════════════ */
body.theme-gold .main,
body.theme-gold .mkt-content {
  background: transparent;
}

/* ═══ Pair Table — BOUTIQUE SHOWCASE ════════════════════════════════════════ */
body.theme-gold #tBody tr.data-row {
  border-bottom: 1px solid var(--luxury-border);
  transition: background .2s ease, transform .15s ease;
}

body.theme-gold #tBody tr.data-row:hover {
  background: var(--luxury-highlight);
  transform: translateX(2px);
}

body.theme-gold table thead th {
  background: var(--black-800);
  color: var(--luxury-text-dim);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--luxury-border-gold);
}

body.theme-gold .pair-name,
body.theme-gold .pair-label {
  font-family: var(--font-display);
  letter-spacing: .08em;
  color: var(--gold-accent);
  font-size: 13px;
}

body.theme-gold .rate-val,
body.theme-gold [class*="rate"] {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--gold-bright);
}

/* ═══ Currency Icons — Large boutique showcase ══════════════════════════════ */
body.theme-gold .cur-icon,
body.theme-gold .currency-icon,
body.theme-gold img[class*="icon"],
body.theme-gold .coin-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(212,168,67,.25), 0 2px 8px rgba(0,0,0,.6);
  border: 1px solid var(--luxury-border-gold);
}

body.theme-gold .pair-icon-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.theme-gold .pair-icon-wrap .cur-icon:last-child {
  margin-left: -10px;
  z-index: 1;
}

/* ═══ Best Rate badge ════════════════════════════════════════════════════════ */
body.theme-gold .rank-1,
body.theme-gold .best-badge {
  background: linear-gradient(135deg, var(--gold-700), var(--gold-500));
  color: var(--black-900);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .08em;
  box-shadow: 0 0 10px rgba(212,168,67,.3);
}

/* ═══ Cards ═════════════════════════════════════════════════════════════════ */
body.theme-gold .card,
body.theme-gold .stat-card,
body.theme-gold .feature-card {
  background: var(--luxury-card);
  border: 1px solid var(--luxury-border);
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(212,168,67,.05);
}

body.theme-gold .card:hover {
  border-color: var(--luxury-border-gold);
  box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(212,168,67,.1);
}

/* ═══ Buttons ═══════════════════════════════════════════════════════════════ */
body.theme-gold .btn-primary,
body.theme-gold .go-btn,
body.theme-gold button[class*="primary"] {
  background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-500) 50%, var(--gold-600) 100%);
  color: var(--black-900);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: none;
  box-shadow: 0 2px 12px rgba(184,146,46,.3);
  transition: all .2s ease;
}

body.theme-gold .btn-primary:hover,
body.theme-gold .go-btn:hover {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400), var(--gold-500));
  box-shadow: 0 4px 20px rgba(212,168,67,.4);
  transform: translateY(-1px);
}

body.theme-gold .visit-btn,
body.theme-gold .ex-link,
body.theme-gold a.go-link {
  background: transparent;
  border: 1px solid var(--luxury-border-gold);
  color: var(--gold-accent);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .08em;
  transition: all .2s ease;
}

body.theme-gold .visit-btn:hover,
body.theme-gold .ex-link:hover {
  background: var(--luxury-border-gold);
  color: var(--black-900);
}

/* ═══ Promo / Hero ══════════════════════════════════════════════════════════ */
body.theme-gold .hero-title,
body.theme-gold h1 {
  font-family: var(--font-display);
  letter-spacing: .1em;
  color: var(--gold-accent);
  font-weight: 600;
}

body.theme-gold h2, body.theme-gold h3 {
  font-family: var(--font-display);
  letter-spacing: .08em;
  color: var(--luxury-text);
}

body.theme-gold .hero-sub,
body.theme-gold .subtitle {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--luxury-text-dim);
  text-transform: uppercase;
}

/* Decorative gold divider */
body.theme-gold .hero-section::after,
body.theme-gold hr {
  border: none;
  border-top: 1px solid var(--luxury-border-gold);
  background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
  height: 1px;
}

/* ═══ Exchange table header area ════════════════════════════════════════════ */
body.theme-gold .filter-bar,
body.theme-gold .pair-header {
  background: var(--luxury-surface);
  border-bottom: 1px solid var(--luxury-border-gold);
}

body.theme-gold .filter-pill {
  background: var(--black-700);
  border: 1px solid var(--luxury-border);
  color: var(--luxury-text-dim);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.theme-gold .filter-pill.active,
body.theme-gold .filter-pill:hover {
  background: var(--luxury-border-gold);
  border-color: var(--gold-accent);
  color: var(--gold-bright);
}

/* ═══ Promobox overlay ══════════════════════════════════════════════════════ */
body.theme-gold .lb-overlay {
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
}

body.theme-gold .lb-box {
  background: var(--black-900) !important;
  border: 1px solid var(--luxury-border-gold) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(212,168,67,.15);
}

body.theme-gold .lb-title {
  font-family: var(--font-display);
  letter-spacing: .12em;
  color: var(--gold-accent);
}

/* ═══ Stat tabs ═════════════════════════════════════════════════════════════ */
body.theme-gold .stat-tab {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--luxury-text-dim);
  border-bottom: 2px solid transparent;
}

body.theme-gold .stat-tab.active {
  color: var(--gold-accent);
  border-bottom-color: var(--gold-accent);
}

/* ═══ Footer ════════════════════════════════════════════════════════════════ */
body.theme-gold .site-footer,
body.theme-gold footer {
  background: var(--black-900);
  border-top: 1px solid var(--luxury-border-gold);
  color: var(--luxury-text-muted);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .08em;
}

/* ═══ Exchanger thumbnails — larger boutique display ════════════════════════ */
body.theme-gold .ex-thumb {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--luxury-border-gold);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

body.theme-gold .exchanger-thumb {
  width: 26px;
  height: 26px;
  border-radius: 3px;
  border: 1px solid var(--luxury-border-gold);
}

/* ═══ Nav dropdown ══════════════════════════════════════════════════════════ */
body.theme-gold .nav-dropdown {
  background: var(--black-900);
  border: 1px solid var(--luxury-border-gold);
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}

body.theme-gold .nav-dropdown a {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--luxury-text-dim);
  border: none !important;
}

body.theme-gold .nav-dropdown a:hover {
  background: var(--luxury-highlight);
  color: var(--gold-accent);
}

/* ═══ Scrollbar ══════════════════════════════════════════════════════════════ */
body.theme-gold ::-webkit-scrollbar { width: 6px; height: 6px; }
body.theme-gold ::-webkit-scrollbar-track { background: var(--black-900); }
body.theme-gold ::-webkit-scrollbar-thumb { background: var(--luxury-border-gold); border-radius: 3px; }
body.theme-gold ::-webkit-scrollbar-thumb:hover { background: var(--gold-accent); }

/* ═══ Selection highlight ═══════════════════════════════════════════════════ */
body.theme-gold ::selection {
  background: rgba(212,168,67,.25);
  color: var(--gold-bright);
}

/* ═══ Input / Select fields ══════════════════════════════════════════════════ */
body.theme-gold input[type="text"],
body.theme-gold input[type="number"],
body.theme-gold select {
  background: var(--black-800);
  border: 1px solid var(--luxury-border);
  color: var(--luxury-text);
  font-family: var(--font-ui);
}

body.theme-gold input:focus,
body.theme-gold select:focus {
  border-color: var(--gold-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(212,168,67,.15);
}

/* ═══ Transition animation for theme toggle ═════════════════════════════════ */
body.theme-transitioning * {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease !important;
}

/* ═══ Gold panel (fixed right) ══════════════════════════════════════════════ */
#goldPanel {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(100%);
  width: 280px;
  background: var(--black-900);
  border: 1px solid var(--luxury-border-gold);
  border-right: none;
  border-radius: 8px 0 0 8px;
  box-shadow: -8px 0 30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(212,168,67,.05);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  z-index: 900;
  overflow: hidden;
}

#goldPanel.open {
  transform: translateY(-50%) translateX(0);
}

#goldPanel .gp-header {
  background: linear-gradient(135deg, var(--black-800), var(--emerald-900));
  border-bottom: 1px solid var(--luxury-border-gold);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#goldPanel .gp-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold-accent);
  text-transform: uppercase;
}

#goldPanel .gp-close {
  background: none;
  border: 1px solid var(--luxury-border);
  color: var(--luxury-text-dim);
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

#goldPanel .gp-close:hover {
  border-color: var(--gold-accent);
  color: var(--gold-accent);
}

#goldPanel .gp-body {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}

#goldPanel .gp-section {
  margin-bottom: 18px;
}

#goldPanel .gp-section-title {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--luxury-text-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--luxury-border);
}

#goldPanel .gp-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  background: var(--luxury-card);
  border: 1px solid var(--luxury-border);
  border-radius: 4px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}

#goldPanel .gp-pair:hover {
  background: var(--luxury-highlight);
  border-color: var(--luxury-border-gold);
  transform: translateX(-2px);
}

#goldPanel .gp-pair-name {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .07em;
  color: var(--gold-accent);
}

#goldPanel .gp-pair-rate {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--luxury-text);
}

/* ═══ Theme toggle button ════════════════════════════════════════════════════ */
#themeToggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--luxury-border-gold, #2a3d2e);
  color: var(--gold-accent, #e8c96d);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .2s ease;
}

#themeToggle:hover,
#themeToggle.active {
  background: linear-gradient(135deg, #8a6212, #d4a843);
  color: #050a07;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(212,168,67,.35);
}

#themeToggle .tg-gem { font-size: 13px; }

/* Gold panel trigger tab */
#goldPanelTab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 899;
  writing-mode: vertical-rl;
  background: linear-gradient(180deg, #8a6212, #d4a843);
  color: #050a07;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  padding: 16px 7px;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  box-shadow: -4px 0 16px rgba(212,168,67,.3);
  transition: all .25s ease;
  display: none;
}

body.theme-gold #goldPanelTab {
  display: flex;
}

#goldPanelTab:hover {
  background: linear-gradient(180deg, #d4a843, #f5d87e);
  padding-right: 9px;
}