/*
 * Cosmic Theme — Gopnik Wallet 2026 Redesign
 *
 * FIXED BUGS in this version:
 *  - Removed invalid `darken()` calls (Sass-only, not valid CSS)
 *  - Added `.cosmic-theme` as a div-scoped class (not just body-scoped)
 *    so templates that wrap content in a div can still use it
 *  - Added GPU-accelerated animations and micro-interactions
 *  - Added proper glassmorphism with fallback for non-supporting browsers
 *  - Added scrollbar theming, custom selection colors
 *  - Added neon glow and rarity badge utilities
 */

/* ─── Root Variables ──────────────────────────────────────────────────────── */
:root {
  --cosmic-bg:               #080a2e;
  --cosmic-bg-secondary:     #0e1048;
  --cosmic-bg-card:          rgba(20, 22, 80, 0.70);
  --cosmic-fg-light:         #f0f1ff;
  --cosmic-fg-muted:         #8b89b8;
  --cosmic-accent:           #8b5cf6;        /* violet */
  --cosmic-accent-hover:     #7c3aed;
  --cosmic-accent-secondary: #f97316;        /* orange */
  --cosmic-accent-sec-hover: #ea6c0a;
  --cosmic-teal:             #22d3ee;
  --cosmic-green:            #34d399;
  --cosmic-red:              #f43f5e;
  --cosmic-yellow:           #fbbf24;
  --cosmic-glass-bg:         rgba(139, 92, 246, 0.07);
  --cosmic-glass-border:     rgba(139, 92, 246, 0.25);
  --cosmic-glass-bg-strong:  rgba(139, 92, 246, 0.15);
  --cosmic-shadow:           0 8px 32px rgba(0, 0, 0, 0.55);
  --cosmic-shadow-glow:      0 0 24px rgba(139, 92, 246, 0.35);
  --cosmic-radius:           14px;
  --cosmic-radius-sm:        8px;
  --cosmic-radius-lg:        20px;
  --cosmic-transition:       0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --cosmic-font:             'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Body & Global ───────────────────────────────────────────────────────── */
body.cosmic-bg,
.cosmic-theme {
  background-color: var(--cosmic-bg);
  color: var(--cosmic-fg-light);
  font-family: var(--cosmic-font);
}

/* Scoped theme so div-level usage works (templates use .cosmic-theme on div) */
.cosmic-theme {
  --bs-body-bg: var(--cosmic-bg);
  --bs-body-color: var(--cosmic-fg-light);
}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
.cosmic-theme ::-webkit-scrollbar        { width: 6px; height: 6px; }
.cosmic-theme ::-webkit-scrollbar-track  { background: var(--cosmic-bg-secondary); }
.cosmic-theme ::-webkit-scrollbar-thumb  { background: var(--cosmic-accent); border-radius: 3px; }
.cosmic-theme ::-webkit-scrollbar-thumb:hover { background: var(--cosmic-accent-hover); }

/* ─── Selection ───────────────────────────────────────────────────────────── */
.cosmic-theme ::selection {
  background: var(--cosmic-accent);
  color: #fff;
}

/* ─── Cards & Glass ───────────────────────────────────────────────────────── */
.cosmic-theme .card,
.cosmic-theme .glass-card {
  background: var(--cosmic-bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--cosmic-glass-border);
  border-radius: var(--cosmic-radius);
  color: var(--cosmic-fg-light);
  box-shadow: var(--cosmic-shadow);
  transition: transform var(--cosmic-transition),
              box-shadow var(--cosmic-transition),
              border-color var(--cosmic-transition);
}

.cosmic-theme .card:hover,
.cosmic-theme .glass-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cosmic-shadow), var(--cosmic-shadow-glow);
  border-color: rgba(139, 92, 246, 0.5);
}

.cosmic-theme .card-body { color: var(--cosmic-fg-light); }
.cosmic-theme .card-title { color: var(--cosmic-fg-light); font-weight: 600; }

/* Strong glass for hero elements */
.cosmic-theme .glass-card-strong {
  background: var(--cosmic-glass-bg-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--cosmic-radius-lg);
}

/* ─── Typography ──────────────────────────────────────────────────────────── */
.cosmic-theme .text-muted     { color: var(--cosmic-fg-muted) !important; }
.cosmic-theme .text-accent    { color: var(--cosmic-accent) !important; }
.cosmic-theme .text-orange    { color: var(--cosmic-accent-secondary) !important; }
.cosmic-theme .text-teal      { color: var(--cosmic-teal) !important; }
.cosmic-theme .text-green     { color: var(--cosmic-green) !important; }
.cosmic-theme h1, .cosmic-theme h2, .cosmic-theme h3,
.cosmic-theme h4, .cosmic-theme h5, .cosmic-theme h6 {
  color: var(--cosmic-fg-light);
  font-weight: 700;
}

/* Gradient headline utility */
.cosmic-theme .text-gradient {
  background: linear-gradient(135deg, var(--cosmic-accent) 0%, var(--cosmic-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.cosmic-theme .btn-primary {
  background: linear-gradient(135deg, var(--cosmic-accent) 0%, var(--cosmic-accent-hover) 100%);
  border: none;
  border-radius: var(--cosmic-radius-sm);
  color: #fff;
  font-weight: 600;
  transition: filter var(--cosmic-transition), transform var(--cosmic-transition), box-shadow var(--cosmic-transition);
}
.cosmic-theme .btn-primary:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.5);
  color: #fff;
}
.cosmic-theme .btn-primary:active { transform: translateY(0); filter: brightness(0.95); }

.cosmic-theme .btn-secondary {
  background: linear-gradient(135deg, var(--cosmic-accent-secondary) 0%, var(--cosmic-accent-sec-hover) 100%);
  border: none;
  border-radius: var(--cosmic-radius-sm);
  color: #fff;
  font-weight: 600;
  transition: filter var(--cosmic-transition), transform var(--cosmic-transition);
}
.cosmic-theme .btn-secondary:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  color: #fff;
}

.cosmic-theme .btn-ghost {
  background: transparent;
  border: 1px solid var(--cosmic-glass-border);
  color: var(--cosmic-fg-light);
  border-radius: var(--cosmic-radius-sm);
  transition: background var(--cosmic-transition), border-color var(--cosmic-transition);
}
.cosmic-theme .btn-ghost:hover {
  background: var(--cosmic-glass-bg);
  border-color: var(--cosmic-accent);
  color: var(--cosmic-accent);
}

.cosmic-theme .btn-outline-primary {
  border-color: var(--cosmic-accent);
  color: var(--cosmic-accent);
  border-radius: var(--cosmic-radius-sm);
}
.cosmic-theme .btn-outline-primary:hover {
  background: var(--cosmic-accent);
  color: #fff;
}

.cosmic-theme .btn-danger { background: var(--cosmic-red); border: none; color: #fff; }
.cosmic-theme .btn-success { background: var(--cosmic-green); border: none; color: #fff; }
.cosmic-theme .btn-warning { background: var(--cosmic-yellow); border: none; color: #000; }
.cosmic-theme .btn-info    { background: var(--cosmic-teal); border: none; color: #000; }

/* ─── Forms ───────────────────────────────────────────────────────────────── */
.cosmic-theme .form-control,
.cosmic-theme .form-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--cosmic-glass-border);
  color: var(--cosmic-fg-light);
  border-radius: var(--cosmic-radius-sm);
  transition: border-color var(--cosmic-transition), box-shadow var(--cosmic-transition);
}
.cosmic-theme .form-control:focus,
.cosmic-theme .form-select:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--cosmic-accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
  color: var(--cosmic-fg-light);
  outline: none;
}
.cosmic-theme .form-control::placeholder { color: var(--cosmic-fg-muted); }
.cosmic-theme .form-label { color: var(--cosmic-fg-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.cosmic-theme .form-check-input { background: rgba(255,255,255,0.1); border-color: var(--cosmic-glass-border); }
.cosmic-theme .form-check-input:checked { background: var(--cosmic-accent); border-color: var(--cosmic-accent); }

/* ─── Navigation & Tabs ───────────────────────────────────────────────────── */
.cosmic-theme .nav-pills .nav-link {
  color: var(--cosmic-fg-muted);
  border-radius: var(--cosmic-radius-sm);
  font-weight: 500;
  transition: color var(--cosmic-transition), background var(--cosmic-transition);
}
.cosmic-theme .nav-pills .nav-link:hover { color: var(--cosmic-fg-light); background: var(--cosmic-glass-bg); }
.cosmic-theme .nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--cosmic-accent), var(--cosmic-accent-hover));
  color: #fff;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
}

.cosmic-theme .nav-tabs { border-color: var(--cosmic-glass-border); }
.cosmic-theme .nav-tabs .nav-link { color: var(--cosmic-fg-muted); border: none; }
.cosmic-theme .nav-tabs .nav-link.active { color: var(--cosmic-accent); border-bottom: 2px solid var(--cosmic-accent); background: transparent; }

/* ─── Accordion ───────────────────────────────────────────────────────────── */
.cosmic-theme .accordion-item { background: transparent; border-color: var(--cosmic-glass-border); }
.cosmic-theme .accordion-button {
  background: var(--cosmic-glass-bg);
  color: var(--cosmic-fg-light);
  border-radius: var(--cosmic-radius-sm) !important;
}
.cosmic-theme .accordion-button:not(.collapsed) {
  background: var(--cosmic-glass-bg-strong);
  color: var(--cosmic-accent);
  box-shadow: none;
}
.cosmic-theme .accordion-button::after { filter: invert(1); }
.cosmic-theme .accordion-body { background: transparent; color: var(--cosmic-fg-light); }

/* ─── Badges & Rarity Pills ───────────────────────────────────────────────── */
.cosmic-theme .badge-rarity-common     { background: #6b7280; color: #fff; }
.cosmic-theme .badge-rarity-uncommon   { background: #22d3ee; color: #000; }
.cosmic-theme .badge-rarity-rare       { background: #3b82f6; color: #fff; }
.cosmic-theme .badge-rarity-epic       { background: #8b5cf6; color: #fff; }
.cosmic-theme .badge-rarity-legendary  { background: linear-gradient(135deg, #f97316, #eab308); color: #000; }
.cosmic-theme .badge-rarity-legendary  { animation: shimmer-badge 2s ease-in-out infinite; }

.cosmic-theme .badge { border-radius: 6px; font-size: 0.72rem; font-weight: 600; padding: 3px 8px; }

/* ─── NFT Card ────────────────────────────────────────────────────────────── */
.cosmic-theme .nft-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--cosmic-radius);
  background: var(--cosmic-bg-card);
  border: 1px solid var(--cosmic-glass-border);
  transition: transform var(--cosmic-transition), box-shadow var(--cosmic-transition), border-color var(--cosmic-transition);
}
.cosmic-theme .nft-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--cosmic-shadow), var(--cosmic-shadow-glow);
  border-color: var(--cosmic-accent);
}
.cosmic-theme .nft-card .nft-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cosmic-theme .nft-card:hover .nft-img { transform: scale(1.06); }

.cosmic-theme .nft-card .nft-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,10,46,0.95) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--cosmic-transition);
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.cosmic-theme .nft-card:hover .nft-overlay { opacity: 1; }

.cosmic-theme .nft-card .nft-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cosmic-theme .nft-card .nft-like-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cosmic-fg-muted);
  transition: background var(--cosmic-transition), color var(--cosmic-transition), transform var(--cosmic-transition);
  cursor: pointer;
}
.cosmic-theme .nft-card .nft-like-btn:hover,
.cosmic-theme .nft-card .nft-like-btn.liked {
  background: rgba(244, 63, 94, 0.8);
  color: #fff;
  transform: scale(1.15);
}

/* ─── Stat Cards (Portfolio KPIs) ─────────────────────────────────────────── */
.cosmic-theme .stat-card {
  background: var(--cosmic-bg-card);
  border: 1px solid var(--cosmic-glass-border);
  border-radius: var(--cosmic-radius);
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--cosmic-transition), box-shadow var(--cosmic-transition);
}
.cosmic-theme .stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cosmic-accent) 0%, transparent 70%);
  opacity: 0.05;
  border-radius: inherit;
}
.cosmic-theme .stat-card:hover { border-color: var(--cosmic-accent); box-shadow: var(--cosmic-shadow-glow); }
.cosmic-theme .stat-card .stat-value { font-size: 1.75rem; font-weight: 800; color: var(--cosmic-fg-light); line-height: 1.1; }
.cosmic-theme .stat-card .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cosmic-fg-muted); font-weight: 600; }
.cosmic-theme .stat-card .stat-icon { font-size: 1.6rem; opacity: 0.6; }

/* ─── Progress & Range Sliders ────────────────────────────────────────────── */
.cosmic-theme .progress { background: rgba(255,255,255,0.07); border-radius: 999px; height: 6px; }
.cosmic-theme .progress-bar { background: linear-gradient(90deg, var(--cosmic-accent), var(--cosmic-teal)); border-radius: 999px; }

.cosmic-theme input[type=range] { accent-color: var(--cosmic-accent); }

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.cosmic-theme .modal-content {
  background: var(--cosmic-bg-secondary);
  border: 1px solid var(--cosmic-glass-border);
  border-radius: var(--cosmic-radius-lg);
  color: var(--cosmic-fg-light);
  box-shadow: var(--cosmic-shadow), var(--cosmic-shadow-glow);
}
.cosmic-theme .modal-header { border-color: var(--cosmic-glass-border); }
.cosmic-theme .modal-footer { border-color: var(--cosmic-glass-border); }
.cosmic-theme .btn-close { filter: invert(1) brightness(0.7); }

/* ─── Tooltips ────────────────────────────────────────────────────────────── */
.cosmic-theme .tooltip-inner {
  background: var(--cosmic-bg-secondary);
  border: 1px solid var(--cosmic-glass-border);
  color: var(--cosmic-fg-light);
  border-radius: var(--cosmic-radius-sm);
}

/* ─── Activity Feed ───────────────────────────────────────────────────────── */
.cosmic-theme .activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cosmic-glass-border);
  transition: background var(--cosmic-transition);
  border-radius: var(--cosmic-radius-sm);
}
.cosmic-theme .activity-item:last-child { border-bottom: none; }
.cosmic-theme .activity-item:hover { background: var(--cosmic-glass-bg); padding-left: 8px; padding-right: 8px; }
.cosmic-theme .activity-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cosmic-accent), var(--cosmic-teal));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
}

/* ─── Price Range Slider ──────────────────────────────────────────────────── */
.cosmic-theme .price-slider-track {
  height: 4px;
  background: linear-gradient(90deg, var(--cosmic-accent), var(--cosmic-teal));
  border-radius: 2px;
}

/* ─── Animations ──────────────────────────────────────────────────────────── */
@keyframes cosmic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0); }
}
@keyframes shimmer-badge {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.35); }
}
@keyframes float-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes gradient-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.cosmic-theme .animate-float  { animation: float-up 0.5s ease forwards; }
.cosmic-theme .animate-pulse  { animation: cosmic-pulse 2s ease-in-out infinite; }
.cosmic-theme .animate-spin   { animation: spin-slow 3s linear infinite; }

/* Live / online indicator */
.cosmic-theme .live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--cosmic-green);
  border-radius: 50%;
  animation: cosmic-pulse 1.5s ease-in-out infinite;
}

/* Gradient hero banner */
.cosmic-theme .hero-gradient {
  background: linear-gradient(135deg,
    var(--cosmic-bg) 0%,
    rgba(139, 92, 246, 0.3) 40%,
    rgba(34, 211, 238, 0.15) 70%,
    var(--cosmic-bg) 100%);
  background-size: 200% 200%;
  animation: gradient-bg 8s ease infinite;
}

/* ─── Responsive Utilities ────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .cosmic-theme .stat-card .stat-value { font-size: 1.3rem; }
  .cosmic-theme .nft-card:hover { transform: translateY(-3px); }
}