/* ─────────────────────────────────────────────────────────────────────
   SIDE EXCHANGE — Design system inspired by side.cards
   Dark glassmorphism, neon yellow accent, premium fintech feel
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Surface hierarchy (darker → lighter as you go up in elevation) */
  --side-bg: #0a0a0f;
  --side-bg-elev-1: #0a0a1e;
  --side-bg-elev-2: #1a1a1e;
  --side-bg-elev-3: #1e1e22;
  --side-bg-elev-4: #1e1e32;
  --side-surface: #14141a;
  --side-surface-hover: #1c1c24;

  /* Borders */
  --side-border: rgba(255, 255, 255, 0.06);
  --side-border-strong: rgba(255, 255, 255, 0.12);
  --side-border-yellow: rgba(255, 233, 74, 0.2);

  /* Primary accent (yellow neon) */
  --side-yellow: #FFE94A;
  --side-yellow-hover: #ffec68;
  --side-yellow-soft: rgba(255, 233, 74, 0.1);
  --side-yellow-glow: rgba(255, 233, 74, 0.25);

  /* Secondary palette */
  --side-cyan: #06b6d4;
  --side-cyan-light: #22d3ee;
  --side-purple: #a855f7;
  --side-purple-light: #c084fc;
  --side-green: #22c55e;
  --side-green-light: #4ade80;
  --side-red: #ef4444;
  --side-amber: #fbbf24;

  /* Text */
  --side-text: #e2e8f0;
  --side-text-dim: #9ca3af;
  --side-text-muted: #6b7280;

  /* Shadows */
  --side-shadow-glow: 0 0 32px var(--side-yellow-glow);
  --side-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─── Reset/base ─────────────────────────────────────────────────────── */
html, body {
  background: var(--side-bg) !important;
  color: var(--side-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 233, 74, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(168, 85, 247, 0.05), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 70%, rgba(6, 182, 212, 0.04), transparent 70%),
    var(--side-bg) !important;
  min-height: 100vh;
}

code, pre, .font-mono, .mono,
input[inputmode="decimal"], input[type="number"], .amount-input, .balance, .price,
.tx-hash, .wallet-address {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-feature-settings: 'cv02', 'zero', 'ss01';
}

/* ─── Floating glow blobs (background ambient light) ─────────────────── */
.side-glow-blobs::before,
.side-glow-blobs::after,
body::before {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.5;
}

body::before {
  width: 600px;
  height: 600px;
  background: var(--side-yellow);
  top: -200px;
  left: -100px;
  opacity: 0.08;
  animation: side-float 14s ease-in-out infinite;
}

@keyframes side-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(80px, 40px); }
}

/* ─── Override MoneroSwapper card surfaces ───────────────────────────── */
.bg-gray-900, .bg-gray-950, .bg-black,
.bg-dark-100, .bg-dark-200, .bg-dark-300, .bg-dark-400 {
  background-color: var(--side-bg) !important;
}

.bg-gray-800, .bg-dark-500, .bg-dark-600 {
  background-color: var(--side-surface) !important;
}

/* Card-like surfaces — apply glassmorphism */
[class*="rounded-"][class*="bg-gray-8"],
[class*="rounded-"][class*="bg-dark"],
.card, .swap-card {
  background: rgba(26, 26, 30, 0.7) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--side-border) !important;
  box-shadow: var(--side-shadow-card);
}

/* ─── Color overrides: orange/yellow → SIDE yellow ───────────────────── */
.text-orange-300, .text-orange-400, .text-orange-500, .text-orange-600,
.text-yellow-200, .text-yellow-300, .text-yellow-400, .text-yellow-500 {
  color: var(--side-yellow) !important;
}

.bg-orange-500, .bg-orange-600, .bg-orange-400,
.bg-yellow-300, .bg-yellow-400, .bg-yellow-500 {
  background-color: var(--side-yellow) !important;
  color: #0a0a0f !important;
  font-weight: 600;
}

.bg-orange-500:hover, .bg-orange-600:hover, .bg-orange-400:hover,
.bg-yellow-300:hover, .bg-yellow-400:hover, .bg-yellow-500:hover,
.hover\:bg-orange-500:hover, .hover\:bg-orange-600:hover,
.hover\:bg-yellow-300:hover, .hover\:bg-yellow-400:hover {
  background-color: var(--side-yellow-hover) !important;
  box-shadow: 0 0 32px var(--side-yellow-glow);
}

.border-orange-500, .border-orange-400,
.border-yellow-300, .border-yellow-400 {
  border-color: var(--side-yellow) !important;
}

.from-orange-500, .from-orange-600, .from-yellow-300, .from-yellow-400 {
  --tw-gradient-from: var(--side-yellow) !important;
}

.to-orange-500, .to-orange-600, .to-yellow-300, .to-yellow-400 {
  --tw-gradient-to: var(--side-yellow) !important;
}

/* ─── Buttons — premium pill style ───────────────────────────────────── */
button.btn-primary, .swap-btn, .submit-btn,
button[type="submit"],
a.btn-primary {
  background: var(--side-yellow) !important;
  color: var(--side-bg) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 14px;
  padding: 14px 28px;
  border: none;
  transition: all 200ms ease;
  box-shadow: 0 0 0 1px rgba(255, 233, 74, 0.1);
}

button.btn-primary:hover, .swap-btn:hover, .submit-btn:hover,
button[type="submit"]:hover {
  background: var(--side-yellow-hover) !important;
  box-shadow: 0 0 32px var(--side-yellow-glow), 0 0 0 1px rgba(255, 233, 74, 0.3);
  transform: translateY(-1px);
}

/* ─── Inputs — clean dark with subtle border ─────────────────────────── */
input, select, textarea {
  background: rgba(20, 20, 26, 0.6) !important;
  border: 1px solid var(--side-border) !important;
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--side-text);
  transition: all 200ms ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--side-yellow) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(255, 233, 74, 0.1);
}

/* ─── Hero typography ─────────────────────────────────────────────────── */
.hero-title, h1.hero {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #d1d5db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-accent {
  color: var(--side-yellow) !important;
  -webkit-text-fill-color: var(--side-yellow);
  text-shadow: 0 0 32px var(--side-yellow-glow);
}

/* ─── Header / nav ───────────────────────────────────────────────────── */
header, nav.main-nav {
  background: rgba(10, 10, 15, 0.7) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--side-border);
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
footer {
  background: var(--side-bg) !important;
  border-top: 1px solid var(--side-border);
  color: var(--side-text-dim);
}

/* ─── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--side-bg); }
::-webkit-scrollbar-thumb { background: var(--side-surface); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--side-surface-hover); }

/* ─── Glass card utility ─────────────────────────────────────────────── */
.glass-card {
  background: rgba(20, 20, 26, 0.6);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--side-border);
  border-radius: 24px;
  box-shadow: var(--side-shadow-card);
}

/* ─── Feature pills row ─────────────────────────────────────────────── */
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--side-yellow-soft);
  border: 1px solid var(--side-border-yellow);
  color: var(--side-yellow);
  font-size: 13px;
  font-weight: 500;
}

/* ─── Z-index restoration for content ────────────────────────────────── */
main, header, footer, section { position: relative; z-index: 1; }

/* ─── Selection ─────────────────────────────────────────────────────── */
::selection {
  background: var(--side-yellow);
  color: var(--side-bg);
}

/* ─── Responsive tweaks ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .glass-card { border-radius: 16px; }
  body::before { width: 400px; height: 400px; filter: blur(100px); }
}