/* ================================================================
   PcKonfiguratorius — ARGB RGB GAMING THEME v7.0
   ⚡ Animated RGB lighting — synced colors, always readable
   Fonas: visada juodas. Tekstas: visada baltas.
   Tik accent/border/glow animuojasi kartu per JS.
   ================================================================ */

html.argb {
  /* ── Bazė — NIEKADA nekeičiasi ───────────────────────────── */
  --bg-base:        #020202;
  --bg-surface:     #060606;
  --bg-card:        #0a0a0a;
  --bg-card-hover:  #0f0f0f;
  --bg-elevated:    #141414;
  --bg-input:       #080808;
  --bg-glass:       rgba(6,6,6,.88);
  --bg-modal:       rgba(2,2,2,.97);

  /* ── Tekstas — VISADA matomas ────────────────────────────── */
  --text-primary:   #f0f0f0;
  --text-secondary: #b0b0b0;
  --text-muted:     #505050;
  --text-disabled:  #2a2a2a;

  /* ── RGB kintamieji — JS atnaujina --argb-h kas frame ───── */
  --argb-h:   0;        /* hue 0-360, JS keičia */
  --argb-s:   100%;     /* saturation — visada pilna */
  --argb-l:   58%;      /* lightness — pakankamai šviesu skaitymui */
  --argb-la:  45%;      /* lightness alpha variantui */
  --argb-dim: 18%;      /* tamsus fonas elementams */

  /* ── Dinaminiai akcentai (skaičiuojami iš --argb-h) ─────── */
  --text-accent:    hsl(var(--argb-h), var(--argb-s), var(--argb-l));
  --accent-indigo:  hsl(var(--argb-h), var(--argb-s), var(--argb-l));
  --accent-blue:    hsl(calc(var(--argb-h) + 30), var(--argb-s), var(--argb-l));
  --accent-cyan:    hsl(calc(var(--argb-h) + 60), var(--argb-s), var(--argb-l));
  --accent-purple:  hsl(calc(var(--argb-h) - 30), var(--argb-s), var(--argb-l));
  --accent-green:   hsl(calc(var(--argb-h) + 120), var(--argb-s), var(--argb-l));
  --accent-emerald: hsl(calc(var(--argb-h) + 140), var(--argb-s), 50%);
  --accent-red:     hsl(calc(var(--argb-h) + 180), var(--argb-s), var(--argb-l));
  --accent-amber:   hsl(calc(var(--argb-h) + 45), var(--argb-s), var(--argb-l));
  --accent-pink:    hsl(calc(var(--argb-h) - 20), var(--argb-s), var(--argb-l));
  --accent-yellow:  hsl(calc(var(--argb-h) + 55), var(--argb-s), var(--argb-l));

  /* ── Borderiai — animuojasi kartu ───────────────────────── */
  --border-subtle:  hsla(var(--argb-h), var(--argb-s), var(--argb-l), .07);
  --border-default: hsla(var(--argb-h), var(--argb-s), var(--argb-l), .18);
  --border-strong:  hsla(var(--argb-h), var(--argb-s), var(--argb-l), .35);
  --border-focus:   hsla(var(--argb-h), var(--argb-s), var(--argb-l), .80);
  --border-hover:   hsla(var(--argb-h), var(--argb-s), var(--argb-l), .45);

  /* ── Glow efektai ────────────────────────────────────────── */
  --glow-indigo:  0 0 30px hsla(var(--argb-h), var(--argb-s), var(--argb-l), .4);
  --glow-blue:    0 0 30px hsla(calc(var(--argb-h) + 30), var(--argb-s), var(--argb-l), .35);
  --glow-green:   0 0 28px hsla(calc(var(--argb-h) + 120), var(--argb-s), var(--argb-l), .35);
  --glow-red:     0 0 24px hsla(calc(var(--argb-h) + 180), var(--argb-s), var(--argb-l), .3);
  --glow-amber:   0 0 20px hsla(calc(var(--argb-h) + 45), var(--argb-s), var(--argb-l), .28);

  /* ── Šešėliai ────────────────────────────────────────────── */
  --shadow-card:  0 1px 3px rgba(0,0,0,.9), 0 0 0 1px hsla(var(--argb-h), var(--argb-s), var(--argb-l), .08);
  --shadow-hover: 0 8px 32px rgba(0,0,0,.8), 0 0 0 1px hsla(var(--argb-h), var(--argb-s), var(--argb-l), .4), 0 0 32px hsla(var(--argb-h), var(--argb-s), var(--argb-l), .2);
  --shadow-panel: 0 2px 16px rgba(0,0,0,.8), 0 0 0 1px hsla(var(--argb-h), var(--argb-s), var(--argb-l), .12);
  --shadow-float: 0 16px 48px rgba(0,0,0,.85), 0 0 0 1px hsla(var(--argb-h), var(--argb-s), var(--argb-l), .15);

  color-scheme: dark;
}

/* ================================================================
   ARGB — AMBIENT BACKGROUND
   Lėtai besisukantis RGB radial gradient
   ================================================================ */
html.argb body::before {
  background-image:
    radial-gradient(ellipse 900px 450px at 50% -100px,
      hsla(var(--argb-h), 100%, 55%, .10), transparent),
    radial-gradient(ellipse 600px 300px at 90% 80%,
      hsla(calc(var(--argb-h) + 120), 100%, 55%, .07), transparent),
    radial-gradient(ellipse 400px 200px at 5% 70%,
      hsla(calc(var(--argb-h) + 240), 100%, 55%, .06), transparent);
}

/* ================================================================
   ARGB — GRID OVERLAY (kaip cyberpunk, bet RGB)
   ================================================================ */
html.argb body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(hsla(var(--argb-h), 100%, 60%, .018) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--argb-h), 100%, 60%, .018) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ================================================================
   ARGB — NAV
   ================================================================ */
html.argb .nav {
  background: rgba(2,2,2,.94);
  border-bottom: 1px solid hsla(var(--argb-h), 100%, 60%, .2);
  box-shadow:
    0 1px 0 hsla(var(--argb-h), 100%, 60%, .1),
    0 4px 24px rgba(0,0,0,.7);
}
html.argb .nav-logo {
  color: hsl(var(--argb-h), 100%, 80%);
  text-shadow: 0 0 20px hsla(var(--argb-h), 100%, 60%, .6);
}
html.argb .nav-logo .dot {
  background: hsl(var(--argb-h), 100%, 60%);
  box-shadow:
    0 0 8px  hsl(var(--argb-h), 100%, 60%),
    0 0 16px hsla(var(--argb-h), 100%, 60%, .6),
    0 0 32px hsla(var(--argb-h), 100%, 60%, .3);
  animation: argb-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes argb-dot-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.6); opacity: .6; }
}

/* ================================================================
   ARGB — PROGRESS BAR (RGB gradient)
   ================================================================ */
html.argb .progress-fill {
  background: linear-gradient(90deg,
    hsl(var(--argb-h), 100%, 60%),
    hsl(calc(var(--argb-h) + 60), 100%, 60%),
    hsl(calc(var(--argb-h) + 120), 100%, 60%));
  box-shadow: 0 0 12px hsla(var(--argb-h), 100%, 60%, .5);
}
html.argb .progress-fill::after {
  background: #fff;
  box-shadow:
    0 0 8px  hsl(var(--argb-h), 100%, 60%),
    0 0 20px hsla(var(--argb-h), 100%, 60%, .7);
}

/* ================================================================
   ARGB — PRODUCT CARDS
   ================================================================ */
html.argb .product-card {
  border-color: hsla(var(--argb-h), 100%, 60%, .1);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
html.argb .product-card:hover {
  border-color: hsla(var(--argb-h), 100%, 60%, .5);
  box-shadow:
    0 0 20px hsla(var(--argb-h), 100%, 60%, .2),
    0 8px 32px rgba(0,0,0,.8);
  transform: translateY(-3px) scale(1.01);
}
html.argb .product-card.selected {
  border-color: hsla(var(--argb-h), 100%, 60%, .7);
  background: hsla(var(--argb-h), 100%, 60%, .06);
  box-shadow:
    0 0 0 1px hsla(var(--argb-h), 100%, 60%, .4),
    0 0 28px hsla(var(--argb-h), 100%, 60%, .2);
}

/* ================================================================
   ARGB — CARD STRIPE (animuota RGB juosta)
   ================================================================ */
html.argb .card-stripe {
  background: linear-gradient(90deg,
    hsl(var(--argb-h), 100%, 60%),
    hsl(calc(var(--argb-h) + 60), 100%, 60%),
    hsl(calc(var(--argb-h) + 120), 100%, 60%));
  height: 2px;
}
html.argb .product-card:hover .card-stripe { height: 3px; }

/* ================================================================
   ARGB — ACCORDION
   ================================================================ */
html.argb .accordion-section {
  border-color: hsla(var(--argb-h), 100%, 60%, .1);
}
html.argb .accordion-section:hover {
  border-color: hsla(var(--argb-h), 100%, 60%, .22);
}
html.argb .accordion-header[aria-expanded="true"] {
  background: hsla(var(--argb-h), 100%, 60%, .06);
}
html.argb .accordion-header.has-selection {
  background: hsla(var(--argb-h), 100%, 60%, .04);
}

/* ================================================================
   ARGB — MODE TABS & SORT BTNS
   ================================================================ */
html.argb .mode-tab.active {
  background: linear-gradient(135deg,
    hsl(var(--argb-h), 100%, 45%),
    hsl(calc(var(--argb-h) + 40), 100%, 45%));
  color: #fff;
  box-shadow: 0 0 20px hsla(var(--argb-h), 100%, 60%, .45);
}
html.argb .sort-btn.active {
  color: hsl(var(--argb-h), 100%, 70%);
  background: hsla(var(--argb-h), 100%, 60%, .12);
  border-color: hsla(var(--argb-h), 100%, 60%, .35);
}

/* ================================================================
   ARGB — CTA BUTTON
   ================================================================ */
html.argb .cta-btn.active {
  background: linear-gradient(135deg,
    hsl(var(--argb-h), 100%, 45%),
    hsl(calc(var(--argb-h) + 40), 100%, 45%));
  color: #fff;
  box-shadow: 0 4px 24px hsla(var(--argb-h), 100%, 55%, .5);
}
html.argb .cta-btn.active:hover {
  box-shadow: 0 8px 32px hsla(var(--argb-h), 100%, 55%, .65);
}

/* ================================================================
   ARGB — STICKY BAR
   ================================================================ */
html.argb .build-sticky-bar {
  background: rgba(2,2,2,.95);
  border-top: 1px solid hsla(var(--argb-h), 100%, 60%, .2);
  box-shadow: 0 -4px 24px rgba(0,0,0,.6), 0 -1px 0 hsla(var(--argb-h), 100%, 60%, .1);
}
html.argb .build-sticky-bar-cta {
  background: linear-gradient(135deg,
    hsl(var(--argb-h), 100%, 45%),
    hsl(calc(var(--argb-h) + 40), 100%, 45%));
  color: #fff;
  box-shadow: 0 4px 20px hsla(var(--argb-h), 100%, 55%, .45);
}

/* ================================================================
   ARGB — PANEL & SIDEBAR
   ================================================================ */
html.argb .panel {
  border-color: hsla(var(--argb-h), 100%, 60%, .14);
  box-shadow: 0 2px 16px rgba(0,0,0,.7), 0 0 0 1px hsla(var(--argb-h), 100%, 60%, .1);
}
html.argb .panel-header {
  border-bottom-color: hsla(var(--argb-h), 100%, 60%, .1);
}

/* ================================================================
   ARGB — INPUTS & FORMS
   ================================================================ */
html.argb .cat-search-input:focus,
html.argb .terminal-search-input:focus,
html.argb .upgrade-model-input:focus {
  border-color: hsla(var(--argb-h), 100%, 60%, .6);
  box-shadow: 0 0 0 3px hsla(var(--argb-h), 100%, 60%, .12),
              0 0 12px hsla(var(--argb-h), 100%, 60%, .1);
}

/* ================================================================
   ARGB — BADGES
   ================================================================ */
html.argb .badge-blue   { background: hsla(var(--argb-h), 100%, 60%, .12); color: hsl(var(--argb-h), 100%, 75%); border-color: hsla(var(--argb-h), 100%, 60%, .25); }
html.argb .badge-green  { background: hsla(calc(var(--argb-h)+120), 100%, 60%, .12); color: hsl(calc(var(--argb-h)+120), 100%, 75%); border-color: hsla(calc(var(--argb-h)+120), 100%, 60%, .25); }
html.argb .badge-purple { background: hsla(calc(var(--argb-h)-30), 100%, 60%, .12); color: hsl(calc(var(--argb-h)-30), 100%, 75%); border-color: hsla(calc(var(--argb-h)-30), 100%, 60%, .25); }

/* ================================================================
   ARGB — SHIPPING & TERMINALS
   ================================================================ */
html.argb .ship-method-card.active {
  border-color: hsla(var(--argb-h), 100%, 60%, .45);
  background: hsla(var(--argb-h), 100%, 60%, .07);
}
html.argb .terminal-item:hover {
  background: hsla(var(--argb-h), 100%, 60%, .07);
  border-color: hsla(var(--argb-h), 100%, 60%, .28);
  color: hsl(var(--argb-h), 100%, 80%);
  transform: translateX(2px);
}
html.argb .terminal-item.selected-terminal {
  background: hsla(var(--argb-h), 100%, 60%, .12);
  border-color: hsla(var(--argb-h), 100%, 60%, .5);
  color: hsl(var(--argb-h), 100%, 75%);
}

/* ================================================================
   ARGB — THEME TOGGLE
   ================================================================ */
html.argb .theme-toggle-btn:hover,
html.argb .theme-toggle-btn.active {
  color: hsl(var(--argb-h), 100%, 75%);
  background: hsla(var(--argb-h), 100%, 60%, .12);
  border-color: hsla(var(--argb-h), 100%, 60%, .35);
}
html.argb .theme-tab.active {
  background: hsla(var(--argb-h), 100%, 60%, .15);
  border-color: hsla(var(--argb-h), 100%, 60%, .45);
  color: hsl(var(--argb-h), 100%, 75%);
}

/* ================================================================
   ARGB — GAME BUILD WIZARD
   ================================================================ */
html.argb .gbh {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%,
      hsla(var(--argb-h), 100%, 55%, .12) 0%, transparent 70%),
    var(--bg-card);
  border-color: hsla(var(--argb-h), 100%, 60%, .22);
  box-shadow: 0 8px 40px rgba(0,0,0,.4),
    inset 0 1px 0 hsla(var(--argb-h), 100%, 60%, .08);
}
html.argb .gbh-body { background: rgba(0,0,0,.1); }
html.argb .gbh-game:hover {
  border-color: hsla(var(--argb-h), 100%, 60%, .5);
  box-shadow: 0 0 0 1px hsla(var(--argb-h), 100%, 60%, .3),
              0 8px 24px rgba(0,0,0,.3);
}
html.argb .gbh-game.active {
  border-color: hsl(var(--argb-h), 100%, 60%);
  box-shadow: 0 0 0 2px hsla(var(--argb-h), 100%, 60%, .4),
              0 0 20px hsla(var(--argb-h), 100%, 60%, .2),
              0 8px 30px rgba(0,0,0,.3);
}
html.argb .gbh-tier.active,
html.argb .game-tier-btn.active {
  background: hsla(var(--argb-h), 100%, 60%, .1);
  border-color: hsla(var(--argb-h), 100%, 60%, .5);
  box-shadow: 0 0 0 1px hsla(var(--argb-h), 100%, 60%, .2);
}
html.argb .gbh-apply,
html.argb .game-apply-btn {
  background: linear-gradient(135deg,
    hsl(var(--argb-h), 100%, 45%),
    hsl(calc(var(--argb-h) + 40), 100%, 45%));
  color: #fff;
  box-shadow: 0 4px 20px hsla(var(--argb-h), 100%, 55%, .4);
}
html.argb .gbh-apply:hover,
html.argb .game-apply-btn:hover {
  box-shadow: 0 8px 28px hsla(var(--argb-h), 100%, 55%, .55);
}

/* ================================================================
   ARGB — TIER BADGES
   ================================================================ */
html.argb .tier-badge-low    { color: hsl(120, 80%, 70%); }
html.argb .tier-badge-medium { color: hsl(45,  90%, 70%); }
html.argb .tier-badge-high   { color: hsl(var(--argb-h), 100%, 75%); }
html.argb .tier-badge-ultra  { color: hsl(calc(var(--argb-h) + 60), 100%, 75%); }

/* ================================================================
   ARGB — SCORE GAUGES (RGB ring)
   ================================================================ */
html.argb .score-gauge-val {
  color: hsl(var(--argb-h), 100%, 70%);
  text-shadow: 0 0 10px hsla(var(--argb-h), 100%, 60%, .5);
}

/* ================================================================
   ARGB — SCROLLBAR
   ================================================================ */
html.argb ::-webkit-scrollbar-thumb {
  background: hsla(var(--argb-h), 100%, 55%, .25);
}
html.argb ::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--argb-h), 100%, 55%, .45);
}

/* ================================================================
   ARGB — TOAST & TOOLTIP
   ================================================================ */
html.argb .toast {
  border-color: hsla(var(--argb-h), 100%, 60%, .25);
  box-shadow: 0 8px 32px rgba(0,0,0,.7),
              0 0 16px hsla(var(--argb-h), 100%, 60%, .1);
}
html.argb .toast-success { border-color: hsla(120, 80%, 55%, .35); color: hsl(120, 80%, 70%); }
html.argb .toast-error   { border-color: hsla(0, 90%, 60%, .35);   color: hsl(0, 90%, 72%); }
html.argb .toast-info    { border-color: hsla(var(--argb-h), 100%, 60%, .35); color: hsl(var(--argb-h), 100%, 75%); }

/* ================================================================
   ARGB — UPGRADE WIZARD
   ================================================================ */
html.argb .upgrade-wizard-header {
  background: linear-gradient(135deg,
    hsla(var(--argb-h), 100%, 55%, .07),
    hsla(calc(var(--argb-h)+60), 100%, 55%, .04));
  border-color: hsla(var(--argb-h), 100%, 60%, .2);
}
html.argb .upgrade-proceed-btn {
  background: linear-gradient(135deg,
    hsl(var(--argb-h), 100%, 45%),
    hsl(calc(var(--argb-h)+40), 100%, 45%));
  box-shadow: 0 4px 16px hsla(var(--argb-h), 100%, 55%, .35);
}

/* ================================================================
   ARGB — PRICE TIP TOOLTIP
   ================================================================ */
html.argb .price-tip-row.best {
  background: hsla(var(--argb-h), 100%, 55%, .1);
}
html.argb .price-tip-row.best .price-tip-shop,
html.argb .price-tip-row.best .price-tip-price {
  color: hsl(var(--argb-h), 100%, 70%);
}

/* ================================================================
   ARGB — FOOTER
   ================================================================ */
html.argb .footer {
  background: var(--bg-surface);
  border-top-color: hsla(var(--argb-h), 100%, 60%, .12);
}
html.argb .footer-link:hover { color: hsl(var(--argb-h), 100%, 70%); }

/* ================================================================
   ARGB — SPECIAL: RGB border animation on selected cards
   Kai kortelė selected — border "eina" per spalvas
   ================================================================ */
@keyframes argb-border-spin {
  0%   { --argb-card-h: 0;   }
  100% { --argb-card-h: 360; }
}

/* ================================================================
   ARGB — LOADING SPINNER (RGB)
   ================================================================ */
html.argb .loading-spinner {
  border-color: hsla(var(--argb-h), 100%, 60%, .25);
  border-top-color: hsl(var(--argb-h), 100%, 60%);
  box-shadow: 0 0 12px hsla(var(--argb-h), 100%, 60%, .3);
}

/* ================================================================
   ARGB — SORT BAR
   ================================================================ */
html.argb .sort-bar {
  border-color: hsla(var(--argb-h), 100%, 60%, .1);
}

/* ================================================================
   ARGB — BUILD ITEMS (sidebar list)
   ================================================================ */
html.argb .build-item-qty {
  color: hsl(var(--argb-h), 100%, 70%);
  background: hsla(var(--argb-h), 100%, 60%, .12);
}
html.argb .build-item-price { color: hsl(var(--argb-h), 100%, 80%); }

/* ================================================================
   ARGB — PSU REC
   ================================================================ */
html.argb .psu-rec {
  background: hsla(var(--argb-h), 100%, 60%, .06);
  border-color: hsla(var(--argb-h), 100%, 60%, .2);
}
html.argb .psu-rec-label { color: hsl(var(--argb-h), 100%, 70%); }
html.argb .psu-rec-val   { color: hsl(var(--argb-h), 100%, 75%); }

/* ================================================================
   ARGB — UPGRADE MODE BANNER
   ================================================================ */
html.argb .upgrade-mode-banner {
  background: linear-gradient(135deg,
    hsla(var(--argb-h), 100%, 55%, .07),
    hsla(calc(var(--argb-h)+60), 100%, 55%, .04));
  border-color: hsla(var(--argb-h), 100%, 60%, .22);
  color: hsl(var(--argb-h), 100%, 78%);
}

/* ================================================================
   ARGB — HAVE OWN / UPGRADE TOGGLE BTNS
   ================================================================ */
html.argb .have-own-btn.owned {
  background: hsla(var(--argb-h), 100%, 55%, .12);
  border-color: hsla(var(--argb-h), 100%, 55%, .35);
  color: hsl(var(--argb-h), 100%, 75%);
}
html.argb .upgrade-toggle[data-status="upgrade"] {
  background: hsla(var(--argb-h), 100%, 55%, .1);
  border-color: hsla(var(--argb-h), 100%, 55%, .32);
  color: hsl(var(--argb-h), 100%, 75%);
}