/**
 * Crypto Charts — Styles
 * Dark theme matching site aesthetic.
 * Colors hardcoded (not Tailwind tokens) to avoid build dependency.
 */

/* ── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #0a0a0a;
  color: #e5e5e5;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Price flash animation ──────────────────────────────── */
@keyframes flashGreen {
  0%   { color: #10b981; text-shadow: 0 0 20px rgba(16,185,129,0.4); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes flashRed {
  0%   { color: #ef4444; text-shadow: 0 0 20px rgba(239,68,68,0.4); }
  100% { color: inherit; text-shadow: none; }
}

.price-flash-up   { animation: flashGreen 0.6s ease-out; }
.price-flash-down { animation: flashRed   0.6s ease-out; }

/* ── Loading skeleton ───────────────────────────────────── */
.loading-skeleton {
  transition: opacity 0.3s;
}

.skeleton-line {
  border-radius: 6px;
  background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Chart containers ───────────────────────────────────── */
.chart-wrapper { position: relative; }

.chart-container {
  width: 100%;
  height: 380px;
  overflow: hidden;
}

.vol-chart-container {
  width: 100%;
  height: 90px;
  overflow: hidden;
  border-top: 1px solid #1a1a1a;
}

.chart-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #888;
  font-size: 14px;
  background: #111;
}

/* ── Coin panel ─────────────────────────────────────────── */
.coin-panel {
  position: relative;
  transition: border-color 0.3s;
}
.coin-panel:hover { border-color: #333 !important; }

/* ── Coin panel icon circles ────────────────────────────── */
.coin-icon-sol {
  background: linear-gradient(135deg, #9945FF, #14F195);
}
.coin-icon-eth {
  background: linear-gradient(135deg, #627EEA, #2C3E50);
}

/* ── Timeframe buttons ──────────────────────────────────── */
.tf-btn {
  color: #888;
  cursor: pointer;
  border: none;
  background: transparent;
}
.tf-btn:hover {
  color: #e5e5e5;
  background: rgba(255,255,255,0.05);
}

/* ── Price display ──────────────────────────────────────── */
.price-display {
  letter-spacing: -0.02em;
  transition: color 0.3s;
}

/* ── Badge colors (inline styles used in JS, but fallback here) */
.bg-crypto-up\/15 { background: rgba(16,185,129,0.15); }
.text-crypto-up   { color: #10b981; }
.bg-crypto-down\/15 { background: rgba(239,68,68,0.15); }
.text-crypto-down   { color: #ef4444; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .chart-container   { height: 300px; }
  .vol-chart-container { height: 70px; }
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track  { background: #0a0a0a; }
::-webkit-scrollbar-thumb  { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* Header sticky */
header.sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ── Revolut Referral Banner ────────────────────────────── */
.revolut-banner {
  text-decoration: none;
}
.revolut-banner:focus-visible {
  outline: 2px solid #0075EB;
  outline-offset: 2px;
}