/* ==========================================================================
   qubic.id - Theme: Qubic Cyan (Cyber Web3)
   File: assets/css/theme-cyan.css
   ========================================================================== */

:root {
  --qubic-primary: #00e5ff;
  --qubic-primary-rgb: 0, 229, 255;
  --qubic-primary-hover: #33ebff;
  --qubic-secondary: #0d2b45;
  --qubic-dark-bg: #080c15;
  --qubic-surface-bg: #0f1626;
  --qubic-card-bg: rgba(18, 25, 41, 0.85);
  --qubic-card-border: rgba(0, 229, 255, 0.16);
  --qubic-card-hover-border: rgba(0, 229, 255, 0.45);
  --qubic-card-glow: 0 8px 32px 0 rgba(0, 229, 255, 0.08);
  --qubic-badge-bg: rgba(168, 85, 247, 0.16);
  --qubic-badge-color: #d8b4fe;
  --qubic-badge-border: rgba(192, 132, 252, 0.45);
  --qubic-btn-gradient: linear-gradient(135deg, #00e5ff, #3b82f6);
}

/* Widget Card Background & Borders */
.qubic-widget-card {
  background: var(--qubic-card-bg) !important;
  border-color: var(--qubic-card-border) !important;
  box-shadow: var(--qubic-card-glow) !important;
}

.qubic-widget-card:hover {
  border-color: var(--qubic-card-hover-border) !important;
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.18) !important;
}

/* Badges & Tags (Distinct Purple Tone) */
.rich-text-badge,
.widget-min-span-badge,
.qubic-badge,
.wallet-badge,
.verified-badge {
  background: var(--qubic-badge-bg) !important;
  color: var(--qubic-badge-color) !important;
  border-color: var(--qubic-badge-border) !important;
}

/* Buttons & Interactive Elements (Action-Oriented Contrast) */
.rich-text-cta {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(59, 130, 246, 0.28)) !important;
  color: #ffffff !important;
  border-color: rgba(0, 229, 255, 0.6) !important;
  box-shadow: 0 4px 14px rgba(0, 229, 255, 0.2) !important;
}

.rich-text-cta:hover {
  background: linear-gradient(135deg, #00e5ff, #2563eb) !important;
  color: #050b14 !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.45) !important;
}

.widget-btn-item {
  border-color: rgba(0, 229, 255, 0.18) !important;
}

.widget-btn-item:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.28), rgba(37, 99, 235, 0.28)) !important;
  border-color: var(--qubic-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0, 229, 255, 0.35) !important;
}

.widget-btn-item:hover .widget-btn-fallback-icon {
  color: #fff !important;
}

.social-pill-btn:hover {
  background: rgba(0, 229, 255, 0.15) !important;
  border-color: var(--qubic-primary) !important;
  color: #fff !important;
}

.wallet-copy-icon-btn:hover,
.wallet-explorer-icon-btn:hover {
  background: var(--qubic-primary) !important;
  color: #050a15 !important;
  border-color: var(--qubic-primary) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4) !important;
}

.portfolio-item-qubic {
  border-color: rgba(0, 229, 255, 0.35) !important;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(37, 99, 235, 0.05)) !important;
}


/* Column Dropzone Highlights */
.column-dropzone {
  border-color: rgba(0, 229, 255, 0.2) !important;
}

.column-dropzone.drag-active {
  border-color: var(--qubic-primary) !important;
  background: rgba(0, 229, 255, 0.08) !important;
  box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.18) !important;
}

/* Horizontal NFT Row Scrollbar */
.qbay-nfts-horizontal {
  scrollbar-color: rgba(0, 229, 255, 0.45) rgba(0, 0, 0, 0.25);
}

.qbay-nfts-horizontal::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.4);
}

.qbay-nfts-horizontal::-webkit-scrollbar-thumb:hover {
  background: var(--qubic-primary);
}