/* =========================================================
   BAZ DMA — FULL CYAN BLUE PRO THEME
   Complete override for SellAuth — all components
   Primary: #00d2ff | Secondary: #0066ff | Dark: #030a12
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  --c1: #00d2ff;
  --c2: #0066ff;
  --c3: #00fff0;
  --c4: #0099cc;
  --bg:  #030a12;
  --bg2: #08121e;
  --bg3: #0d1a28;
  --border: rgba(0, 210, 255, 0.15);
  --border2: rgba(0, 210, 255, 0.30);
  --glow: rgba(0, 210, 255, 0.25);
  --glow2: rgba(0, 102, 255, 0.20);
  --text: rgba(200, 235, 255, 0.92);
  --text-muted: rgba(120, 180, 220, 0.70);
}

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes cyanFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes cyanPulse {
  0%, 100% { box-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow2); }
  50%       { box-shadow: 0 0 20px var(--glow), 0 0 40px var(--glow2); }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); opacity: 0.03; }
  100% { transform: translateY(100vh); opacity: 0.03; }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(0,210,255,0.15); }
  50%       { border-color: rgba(0,210,255,0.40); }
}

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

html, body {
  background-color: var(--bg) !important;
  font-family: 'Exo 2', 'Rajdhani', sans-serif !important;
  color: var(--text) !important;
}

body {
  background-image:
    linear-gradient(rgba(0,210,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,210,255,0.035) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
}

/* ── Glow blob ─────────────────────────────────────────── */
.glow-inner {
  background: #002a4a !important;
  opacity: 0.55 !important;
  filter: blur(200px) !important;
}

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.hero h1, .hero h2, .hero h3,
.hero-title, .section-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c1));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow:
    0 0 20px rgba(0,210,255,0.30),
    0 0 40px rgba(0,102,255,0.15) !important;
  animation: cyanFlow 3s linear infinite;
}

p, span, li, small, label {
  color: var(--text) !important;
}

.text-muted, [class*="muted"] {
  color: var(--text-muted) !important;
}

a, a:visited {
  color: var(--c1) !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

a:hover {
  color: var(--c3) !important;
  text-shadow: 0 0 8px var(--glow) !important;
}

/* ── Navbar ────────────────────────────────────────────── */
.navbar, nav, header, [class*="navbar"], [class*="header"] {
  background: rgba(3, 10, 18, 0.95) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.navbar-brand, .logo, [class*="logo"], [class*="brand"] {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: var(--c1) !important;
  text-transform: uppercase !important;
}

.nav-link, .navbar a {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  transition: color 0.2s !important;
}

.nav-link:hover, .navbar a:hover {
  color: var(--c1) !important;
}

/* ── Hero Section ──────────────────────────────────────── */
.hero, [class*="hero"], section.nexus-hero {
  background: var(--bg) !important;
  position: relative !important;
  overflow: hidden !important;
}

.nexus-background {
  background-color: var(--bg) !important;
}

.nexus-grid {
  background-image:
    linear-gradient(rgba(0,210,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,210,255,0.06) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

.nexus-glow {
  background: radial-gradient(ellipse, rgba(0,210,255,0.08) 0%, rgba(0,210,255,0.03) 40%, transparent 70%) !important;
}

.nexus-hex-pattern {
  background: radial-gradient(ellipse, rgba(0,80,255,0.04) 0%, transparent 60%) !important;
}

.nexus-scanline {
  background: linear-gradient(transparent, rgba(0,210,255,0.03), transparent) !important;
  animation: scanline 4s linear infinite !important;
}

.nexus-corner {
  border-color: rgba(0,210,255,0.50) !important;
}

.nexus-corner-tl { border-top-color: rgba(0,210,255,0.5) !important; border-left-color: rgba(0,210,255,0.5) !important; }
.nexus-corner-tr { border-top-color: rgba(0,180,230,0.45) !important; border-right-color: rgba(0,180,230,0.45) !important; }
.nexus-corner-bl { border-bottom-color: rgba(0,210,255,0.5) !important; border-right-color: rgba(0,210,255,0.5) !important; }
.nexus-corner-br { border-bottom-color: rgba(0,180,230,0.45) !important; border-left-color: rgba(0,180,230,0.45) !important; }

.nexus-border-line {
  background: linear-gradient(90deg, transparent, var(--c1), transparent) !important;
  opacity: 0.3 !important;
}

.nexus-badge {
  background: rgba(0,210,255,0.08) !important;
  border: 1px solid rgba(0,210,255,0.25) !important;
  color: var(--c1) !important;
}

.nexus-badge-dot {
  background: var(--c1) !important;
  box-shadow: 0 0 6px var(--c1) !important;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn, button, [class*="btn"] {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  border-radius: 6px !important;
  transition: all 0.25s ease !important;
}

.btn-primary, [class*="btn-primary"],
.nexus-btn-primary, .buy-now, [class*="buy"] {
  background: linear-gradient(135deg, var(--c2), var(--c1)) !important;
  border: none !important;
  color: #000 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 15px rgba(0,210,255,0.35) !important;
}

.btn-primary:hover, [class*="btn-primary"]:hover,
.nexus-btn-primary:hover {
  background: linear-gradient(135deg, var(--c1), var(--c3)) !important;
  box-shadow: 0 0 30px rgba(0,210,255,0.55), 0 4px 20px rgba(0,102,255,0.30) !important;
  transform: translateY(-2px) !important;
  color: #000 !important;
}

.btn-outline-primary, .nexus-btn-outline, [class*="btn-outline"] {
  background: transparent !important;
  border: 1px solid var(--c1) !important;
  color: var(--c1) !important;
}

.btn-outline-primary:hover, .nexus-btn-outline:hover {
  background: rgba(0,210,255,0.10) !important;
  box-shadow: 0 0 15px rgba(0,210,255,0.25) !important;
  color: var(--c1) !important;
}

/* ── Product Cards ─────────────────────────────────────── */
.card, [class*="card"], [class*="product-card"] {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.card:hover, [class*="card"]:hover, [class*="product-card"]:hover {
  border-color: var(--border2) !important;
  box-shadow:
    0 0 20px rgba(0,210,255,0.10),
    0 8px 32px rgba(0,102,255,0.10) !important;
  transform: translateY(-4px) !important;
}

/* ── Price ─────────────────────────────────────────────── */
.price, [class*="price"], [class*="amount"], [class*="total"] {
  background: linear-gradient(90deg, var(--c3), var(--c1), var(--c2));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  animation: cyanFlow 2.5s linear infinite;
}

/* ── Badges ────────────────────────────────────────────── */
.badge, [class*="badge"] {
  background: rgba(0,210,255,0.12) !important;
  border: 1px solid rgba(0,210,255,0.30) !important;
  color: var(--c1) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
}

/* ── Inputs & Forms ────────────────────────────────────── */
input, textarea, select, .form-control, .form-select {
  background: rgba(0, 20, 40, 0.7) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-family: 'Exo 2', sans-serif !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input:focus, textarea:focus, select:focus,
.form-control:focus, .form-select:focus {
  border-color: var(--c1) !important;
  box-shadow: 0 0 0 3px rgba(0,210,255,0.15) !important;
  background: rgba(0, 25, 50, 0.8) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: rgba(0,210,255,0.35) !important;
}

/* ── Searchbar ─────────────────────────────────────────── */
.nexus-searchbar, .fake-searchbar {
  background: rgba(0,210,255,0.04) !important;
  border: 1px solid var(--border) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.nexus-searchbar:hover, .fake-searchbar:hover {
  border-color: var(--border2) !important;
  box-shadow: 0 0 10px rgba(0,210,255,0.10) !important;
}

.nexus-searchbar svg, .fake-searchbar svg {
  fill: var(--c1) !important;
  color: var(--c1) !important;
}

/* ── Navbar Icons & Arrows ─────────────────────────────── */
.arrow-icon path, svg path[stroke="#39ff14"] {
  stroke: var(--c1) !important;
}

svg[fill="#39ff14"], [fill="#39ff14"] {
  fill: var(--c1) !important;
}

/* ── Sections / Containers ─────────────────────────────── */
section, .section, main, .main {
  background: transparent !important;
}

.bg-gray, [class*="bg-gray"], [class*="bg-secondary"] {
  background: var(--bg2) !important;
}

/* ── Dividers ──────────────────────────────────────────── */
hr, .divider, [class*="divider"] {
  border-color: var(--border) !important;
  opacity: 1 !important;
}

/* ── Tables ────────────────────────────────────────────── */
table { border-color: var(--border) !important; }
thead, th { background: var(--bg2) !important; color: var(--c1) !important; border-color: var(--border) !important; }
td { border-color: var(--border) !important; color: var(--text) !important; }
tr:hover td { background: rgba(0,210,255,0.03) !important; }

/* ── Footer ────────────────────────────────────────────── */
footer, .footer, [class*="footer"] {
  background: rgba(3,10,18,0.98) !important;
  border-top: 1px solid var(--border) !important;
}

/* ── Checkout / Cart ───────────────────────────────────── */
[class*="checkout"], [class*="cart"], [class*="order"] {
  background: var(--bg) !important;
}

[class*="order-summary"], [class*="checkout-box"] {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

/* ── Modals ────────────────────────────────────────────── */
.modal-content, [class*="modal"] .content {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

/* ── Dropdowns ─────────────────────────────────────────── */
.dropdown-menu, [class*="dropdown-menu"] {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
}

.dropdown-item:hover {
  background: rgba(0,210,255,0.08) !important;
  color: var(--c1) !important;
}

/* ── Pagination ────────────────────────────────────────── */
.page-link {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

.page-item.active .page-link {
  background: linear-gradient(135deg, var(--c2), var(--c1)) !important;
  border-color: var(--c1) !important;
  color: #000 !important;
}

/* ── Alerts ────────────────────────────────────────────── */
.alert, [class*="alert"] {
  background: rgba(0,210,255,0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
}

/* ── Progress bars ─────────────────────────────────────── */
.progress-bar {
  background: linear-gradient(90deg, var(--c2), var(--c1)) !important;
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c2), var(--c1));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c1); }

/* ── Selection ─────────────────────────────────────────── */
::selection {
  background: rgba(0,210,255,0.20) !important;
  color: var(--c1) !important;
}

/* ── Product placeholder icons ─────────────────────────── */
.product-img-placeholder {
  color: var(--c1) !important;
  border-color: var(--border) !important;
}

/* ── Hulk/animated elements ─────────────────────────────── */
.hulk-monitor, .hulk-smash, .hulk-gamma, .hulk-crack, .hulk-tag, .hulk-fist, .hulk-rage-bar {
  border-color: rgba(0,210,255,0.20) !important;
  background: rgba(0,210,255,0.03) !important;
  color: rgba(0,210,255,0.30) !important;
}

/* ── Announcement bar ──────────────────────────────────── */
[class*="announcement"] {
  background: rgba(0,210,255,0.06) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--c1) !important;
}

/* ── Status page ───────────────────────────────────────── */
[class*="status"] .online, .status-online { color: var(--c1) !important; }

/* ── Product form ──────────────────────────────────────── */
.quantity-btn, [class*="quantity"] button {
  background: rgba(0,210,255,0.08) !important;
  border: 1px solid var(--border) !important;
  color: var(--c1) !important;
}

.quantity-btn:hover {
  background: rgba(0,210,255,0.16) !important;
}

/* ── Feedback / Reviews ────────────────────────────────── */
.star, [class*="star"] { color: var(--c1) !important; }

/* ── Feature boxes ─────────────────────────────────────── */
[class*="feature"] .icon, [class*="feature-icon"] {
  color: var(--c1) !important;
  background: rgba(0,210,255,0.08) !important;
  border: 1px solid var(--border) !important;
}

/* ── Scroll to top ─────────────────────────────────────── */
[class*="scroll-to-top"], [id*="scroll-to-top"] {
  background: linear-gradient(135deg, var(--c2), var(--c1)) !important;
  border: none !important;
  box-shadow: 0 0 15px rgba(0,210,255,0.35) !important;
}

/* ══════════════════════════════════════════════════════════
   END — BAZ DMA CYAN BLUE THEME
══════════════════════════════════════════════════════════ */