/* ============================================================
   KUBIGA STORE — store-cyber.css  (TEMA CYBER NEON)
   Palette: Deep Navy (#0a0d16) · Soft Cyan (#42a5c8) · Indigo (#3d5a8f) · Steel Blue (#7b8fcc)
   Font: Space Grotesk (tech, geometric)
   Character: Cyber Warrior — hooded figure + circuit elements
   Background: Cyberpunk City Night — circuit grid + glow lines
   ============================================================ */

@import url('./store.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Cyber Neon Palette */
  --cyber-navy:    #0a0d16;
  --cyber-dark:    #0f1421;
  --cyber-mid:     #141b2d;
  --cyber-cyan:    #42a5c8;
  --cyber-cyan-2:  #2d8fab;
  --cyber-indigo:  #3d5a8f;
  --cyber-steel:   #7b8fcc;
  --cyber-glow:    rgba(66,165,200,0.18);

  --bg:        #0a0d16;
  --surface:   #0f1421;
  --surface-2: #141b2d;
  --border:    #1a2538;
  --text:      #c0d0e0;
  --text-2:    #90a8c0;
  --text-muted:#607888;
  --text-faint:#3d5060;

  --primary:       var(--cyber-cyan);
  --primary-2:     var(--cyber-cyan-2);
  --primary-grad:  linear-gradient(135deg, #1e5a78 0%, #2d8fab 100%);
  --hero-grad:     linear-gradient(160deg, #060b16 0%, #0c1428 50%, #0e1c3e 100%);
  --primary-soft:  rgba(66,165,200,0.10);
  --primary-soft-2:rgba(45,143,171,0.08);

  --success:      #2a7a4a;
  --success-soft: rgba(42,122,74,0.14);
  --warn:         #b07820;
  --warn-soft:    rgba(176,120,32,0.14);
  --danger:       #8a2028;
  --danger-soft:  rgba(138,32,40,0.14);

  --radius:    14px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --shadow:       0 2px 14px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(66,165,200,0.06);
  --shadow-hover: 0 12px 36px rgba(0,0,0,0.6), 0 0 0 1px rgba(66,165,200,0.12);

  --font:         'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Orbitron', sans-serif;
  --mono:         'JetBrains Mono', 'Fira Mono', monospace;
}

/* ── Base dark background ── */
body { background: var(--cyber-navy); color: var(--text); }

/* ── Ticker ── */
.ticker-wrap { background: linear-gradient(90deg, #061018, #0e2030, #061018); border-bottom: 1px solid rgba(66,165,200,0.2); }

/* ── Navbar ── */
.navbar {
  background: rgba(10,13,22,0.95) !important;
  border-top: 2px solid rgba(66,165,200,0.5) !important;
  border-image: none !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(66,165,200,0.08);
}
.brand-logo { color: var(--cyber-cyan); letter-spacing: 0.08em; }
.brand-icon {
  background: linear-gradient(135deg, #0e2538 0%, #1a3a5a 100%);
  border: 1.5px solid rgba(66,165,200,0.4);
  box-shadow: 0 0 10px rgba(66,165,200,0.15);
}
.cart-count { color: var(--cyber-cyan); }
.ops-dot { background: var(--cyber-cyan); box-shadow: 0 0 8px rgba(66,165,200,0.5); }
.nav-cart-btn { background: linear-gradient(135deg, #1e5a78 0%, #2d8fab 100%); }

/* ── 24/7 text ── */
#navOpsText { font-size: 0 !important; }
#navOpsText::after { content: '24 Jam / 7 Hari'; font-size: 12px; color: var(--cyber-cyan); white-space: nowrap; opacity: 0.8; }

/* ── Search ── */
.search-box { background: var(--surface-2); border-color: var(--border); }
.search-box:focus-within { border-color: var(--cyber-cyan); box-shadow: 0 0 0 3px rgba(66,165,200,0.12); }
.search-results { background: var(--surface); border-color: var(--border); }
.sr-item:hover { background: var(--surface-2); }

/* ── Hero — Circuit Grid + Cyber Warrior ── */
.hero {
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(66,165,200,0.06) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(66,165,200,0.04) 39px 40px),
    linear-gradient(160deg, #060a14 0%, #0a1020 50%, #0c1630 100%);
  border-bottom: 1px solid rgba(66,165,200,0.25);
  min-height: 360px;
}
/* Bottom glow line */
.hero::after {
  content: "";
  position: absolute; left: 0; bottom: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(66,165,200,0.6), rgba(61,90,143,0.4), transparent);
  top: auto; width: auto;
}
/* Cyber Warrior silhouette */
.hero::before {
  content: "";
  position: absolute; right: 3%; bottom: 0;
  width: 240px; height: 340px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 220'%3E%3Cpolygon points='70,10 30,80 110,80' fill='none' stroke='%2342a5c8' stroke-width='2' opacity='0.9'/%3E%3Cline x1='70' y1='35' x2='70' y2='60' stroke='%2342a5c8' stroke-width='1.5' opacity='0.7'/%3E%3Ccircle cx='70' cy='55' r='6' fill='none' stroke='%2342a5c8' stroke-width='1.5' opacity='0.8'/%3E%3Crect x='36' y='80' width='68' height='72' rx='4' fill='none' stroke='%2342a5c8' stroke-width='2' opacity='0.9'/%3E%3Cline x1='36' y1='100' x2='104' y2='100' stroke='%2342a5c8' stroke-width='0.8' opacity='0.4'/%3E%3Cline x1='36' y1='120' x2='104' y2='120' stroke='%2342a5c8' stroke-width='0.8' opacity='0.4'/%3E%3Cline x1='36' y1='140' x2='104' y2='140' stroke='%2342a5c8' stroke-width='0.8' opacity='0.4'/%3E%3Crect x='44' y='88' width='18' height='8' rx='2' fill='%2342a5c8' opacity='0.25'/%3E%3Crect x='78' y='88' width='18' height='8' rx='2' fill='%2342a5c8' opacity='0.25'/%3E%3Crect x='14' y='80' width='20' height='50' rx='4' fill='none' stroke='%2342a5c8' stroke-width='1.5' opacity='0.7'/%3E%3Crect x='106' y='80' width='20' height='50' rx='4' fill='none' stroke='%2342a5c8' stroke-width='1.5' opacity='0.7'/%3E%3Cline x1='6' y1='92' x2='14' y2='92' stroke='%2342a5c8' stroke-width='1' opacity='0.6'/%3E%3Cline x1='6' y1='102' x2='14' y2='102' stroke='%2342a5c8' stroke-width='1' opacity='0.6'/%3E%3Cline x1='6' y1='112' x2='14' y2='112' stroke='%2342a5c8' stroke-width='1' opacity='0.6'/%3E%3Cline x1='126' y1='92' x2='134' y2='92' stroke='%2342a5c8' stroke-width='1' opacity='0.6'/%3E%3Cline x1='126' y1='102' x2='134' y2='102' stroke='%2342a5c8' stroke-width='1' opacity='0.6'/%3E%3Cline x1='126' y1='112' x2='134' y2='112' stroke='%2342a5c8' stroke-width='1' opacity='0.6'/%3E%3Crect x='42' y='154' width='24' height='52' rx='5' fill='none' stroke='%2342a5c8' stroke-width='1.5' opacity='0.8'/%3E%3Crect x='74' y='154' width='24' height='52' rx='5' fill='none' stroke='%2342a5c8' stroke-width='1.5' opacity='0.8'/%3E%3Crect x='38' y='200' width='32' height='8' rx='3' fill='none' stroke='%2342a5c8' stroke-width='1.5' opacity='0.6'/%3E%3Crect x='70' y='200' width='32' height='8' rx='3' fill='none' stroke='%2342a5c8' stroke-width='1.5' opacity='0.6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  opacity: 0.28;
  pointer-events: none; z-index: 0;
}
@media (max-width: 768px) { .hero::before { opacity: 0.12; width: 140px; } }

/* ── Hero content ── */
.hero-badge { background: rgba(66,165,200,0.10); color: var(--cyber-cyan); border-color: rgba(66,165,200,0.22); }
.hero-title { color: var(--text); }
.hero-gradient {
  background: linear-gradient(135deg, var(--cyber-cyan) 0%, var(--cyber-steel) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { color: var(--text-2); }
.stat-num { color: var(--cyber-cyan); }
.btn-hero-primary { box-shadow: 0 4px 20px rgba(66,165,200,0.20); }
.btn-hero-primary:hover { box-shadow: 0 8px 32px rgba(66,165,200,0.30); }

/* ── Section ── */
.section-title { color: var(--text); }
.section-title::before { background: linear-gradient(180deg, var(--cyber-cyan) 0%, var(--cyber-indigo) 100%); }

/* ── Category cards ── */
.cat-card { background: var(--surface); border-color: var(--border); }
.cat-card:hover, .cat-card.active { border-color: var(--cyber-cyan); box-shadow: 0 4px 16px rgba(66,165,200,0.14); background: rgba(66,165,200,0.05); }
.cat-name { color: var(--text); }

/* ── Products ── */
.prod-card { background: var(--surface); border-color: var(--border); }
.prod-card:hover { border-color: var(--cyber-cyan); }
.prod-thumb { background: linear-gradient(135deg, #0e1828, #141e30); }
.md-thumb   { background: linear-gradient(135deg, #0e1828, #141e30); }
.ci-thumb   { background: rgba(66,165,200,0.08); }
.sr-item .sr-thumb { background: rgba(66,165,200,0.08); }
.prod-cat { color: var(--cyber-cyan); }
.prod-name { color: var(--text); }
.prod-price { color: var(--cyber-cyan); }
.pb-flash { background: rgba(66,165,200,0.85); }
.pb-new   { background: rgba(61,90,143,0.90); }
.pb-low   { background: rgba(176,120,32,0.85); }

/* ── Skeleton shimmer — dark version ── */
.prod-skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
}

/* ── Buttons ── */
.btn-cart-add { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.btn-cart-add:hover:not(:disabled) { background: rgba(66,165,200,0.10); border-color: var(--cyber-cyan); }
.btn-order { background: var(--primary-grad); }
.btn-pay { box-shadow: 0 4px 20px rgba(66,165,200,0.22); }
.filter-pill { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
.filter-pill:hover, .filter-pill.active { background: var(--cyber-cyan); border-color: var(--cyber-cyan); color: #000; }
#sortSelect { background: var(--surface); border-color: var(--border); color: var(--text); }

/* ── Pagination ── */
.page-btn { background: var(--surface); border-color: var(--border); color: var(--text); }
.page-btn:hover:not(:disabled):not(.active) { border-color: var(--cyber-cyan); color: var(--cyber-cyan); }
.page-btn.active { background: var(--primary-grad); border-color: var(--cyber-cyan-2); }

/* ── Modal ── */
.modal-bg { background: rgba(4,6,12,0.70); }
.modal-box { background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(66,165,200,0.1); }
.modal-head { background: var(--surface); border-color: var(--border); }
.modal-close { background: var(--surface-2); color: var(--text-muted); }
.modal-close:hover { background: var(--border); }
.md-cat { color: var(--cyber-cyan); }
.md-name { color: var(--text); }
.md-price { color: var(--cyber-cyan); }
.md-flash-badge { background: rgba(66,165,200,0.12); color: var(--cyber-cyan); }
.md-desc { color: var(--text-2); }

/* ── Form inputs ── */
.form-input { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.form-input:focus { border-color: var(--cyber-cyan); box-shadow: 0 0 0 3px rgba(66,165,200,0.10); background: var(--surface); }
.form-hint { color: var(--text-faint); }
.form-label { color: var(--text-muted); }
.btn-apply { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
.btn-apply:hover { border-color: var(--cyber-cyan); color: var(--cyber-cyan); }

/* ── Qty controls ── */
.qty-ctrl { border-color: var(--border); }
.qty-ctrl button { background: var(--surface-2); color: var(--text); }
.qty-ctrl button:hover { background: rgba(66,165,200,0.10); color: var(--cyber-cyan); }
.qty-total { color: var(--cyber-cyan); }

/* ── Order summary ── */
.order-summary { background: var(--surface-2); }
.os-row.total { border-color: var(--border); }

/* ── Order detail (dark box) ── */
.order-detail-box { background: var(--surface-2); color: var(--cyber-cyan); border: 1px solid var(--border); }

/* ── QRIS ── */
.qris-amount { color: var(--cyber-cyan); }
#qrisImg { border-color: var(--border); }
.qris-steps { background: var(--surface-2); }
.qris-steps li { color: var(--text-2); }

/* ── Cart drawer ── */
.cart-overlay { background: rgba(4,6,12,0.65); }
.cart-drawer { background: var(--surface); box-shadow: -8px 0 40px rgba(0,0,0,0.6); }
.cart-head { border-color: var(--border); }
.cart-foot { border-color: var(--border); }
.cart-title { color: var(--text); }
.cart-item { border-color: var(--border); }
.ci-name { color: var(--text); }
.ci-price { color: var(--cyber-cyan); }
.ci-ctrl { border-color: var(--border); }
.ci-btn { background: var(--surface-2); color: var(--text); }
.ci-btn:hover { background: rgba(66,165,200,0.10); }
.ci-qty-input { background: var(--surface-2); color: var(--text); }
.ci-qty-input:focus { background: rgba(66,165,200,0.08); }
.btn-cart-buy { background: rgba(66,165,200,0.08); border-color: var(--cyber-cyan); color: var(--cyber-cyan); }
.btn-cart-buy:hover { background: var(--cyber-cyan); color: #000; }
.cart-total-val { color: var(--cyber-cyan); }
.btn-cart-clear { border-color: var(--border); color: var(--text-muted); }

/* ── Footer ── */
.footer { background: var(--surface); border-color: var(--border); }
.footer-brand { color: var(--text); }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--cyber-cyan); }
.footer-copy { color: var(--text-faint); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyber-cyan); }