/* ============================================================
   Next Level PC — Theme System
   Dark mode é o padrão (definido em theme.js antes do paint).
   Inspirado no redesign "Next Level PC - Redesign.html"
   ============================================================ */

html[data-theme="dark"] {
  --primary:     #2563eb;
  --primary-h:   #1d4ed8;
  --accent:      #00d4ff;
  --dark:        #0c1120;
  --dark2:       #111827;
  --text:        #f0f4ff;
  --muted:       #94a3b8;
  --muted2:      #64748b;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.12);
  --bg:          #07090f;
  --surface:     #0c1120;
  --surface2:    #111827;
  --card:        #0f1929;
  --card-hover:  #131e30;
  --shadow:      0 12px 40px rgba(0,0,0,.5);
  color-scheme:  dark;
}
html[data-theme="light"]{ color-scheme: light; }

/* ── Base ─────────────────────────────────────────────────── */
html[data-theme="dark"] body{
  background:var(--bg) !important;
  color:var(--text) !important;
}

/* Tipografia "gamer" do redesign — aplicada em destaques no modo escuro */
html[data-theme="dark"] .logo-text,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero h2,
html[data-theme="dark"] .sim-banner-text h2,
html[data-theme="dark"] .section-title{
  font-family:'Barlow Condensed','Segoe UI',system-ui,sans-serif;
  letter-spacing:.02em;
}
html[data-theme="dark"] .sim-banner-text h2 span,
html[data-theme="dark"] .hero h1 .hi{
  color:var(--accent) !important;
}

/* Scrollbar dark */
html[data-theme="dark"] ::-webkit-scrollbar{width:8px;height:8px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--bg)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}

/* ── Header / Nav ────────────────────────────────────────── */
html[data-theme="dark"] header,
html[data-theme="dark"] header.header,
html[data-theme="dark"] .site-header{
  background:rgba(7,9,15,.95) !important;
  border-bottom:1px solid var(--border) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:none !important;
}
html[data-theme="dark"] nav{
  background:var(--surface) !important;
  border-bottom:1px solid var(--border) !important;
}
html[data-theme="dark"] nav .nav-inner a,
html[data-theme="dark"] nav a{ color:var(--muted); }
html[data-theme="dark"] nav .nav-inner a:hover,
html[data-theme="dark"] nav a:hover{ color:#fff; }
html[data-theme="dark"] nav .nav-inner a.active,
html[data-theme="dark"] nav a.active{ color:var(--accent); }

/* Logo subtitle */
html[data-theme="dark"] .logo-text{ color:#fff; }
html[data-theme="dark"] .logo-text small{ color:var(--muted); }
html[data-theme="dark"] .logo img,
html[data-theme="dark"] .logo-img{ filter:drop-shadow(0 0 12px rgba(37,99,235,.45)); }

/* ── Search ──────────────────────────────────────────────── */
html[data-theme="dark"] .search-bar input[type="text"],
html[data-theme="dark"] .search-bar input{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border2) !important;
}
html[data-theme="dark"] .search-bar input::placeholder{ color:var(--muted2); }
html[data-theme="dark"] .search-bar input:focus{
  border-color:var(--primary) !important;
  background:var(--surface) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.2);
}
html[data-theme="dark"] .search-bar button{
  background:var(--primary);
  color:#fff;
}
html[data-theme="dark"] .search-dropdown{
  background:var(--surface) !important;
  border-color:var(--border2) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.6) !important;
  color:var(--text);
}
html[data-theme="dark"] .search-suggestion{
  border-bottom:1px solid var(--border) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .search-suggestion:hover,
html[data-theme="dark"] .search-suggestion:focus{
  background:rgba(37,99,235,.10) !important;
}
html[data-theme="dark"] .sugg-img,
html[data-theme="dark"] .sugg-img-placeholder{
  background:var(--surface2) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .sugg-name{ color:var(--text); }
html[data-theme="dark"] .sugg-name strong{ color:var(--accent); }
html[data-theme="dark"] .sugg-desc,
html[data-theme="dark"] .sugg-empty,
html[data-theme="dark"] .sugg-loading{ color:var(--muted); }
html[data-theme="dark"] .sugg-price{ color:var(--accent); }

/* Header buttons */
html[data-theme="dark"] .icon-btn{
  background:transparent !important;
  border:1px solid var(--border2) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .icon-btn:hover{ background:var(--surface) !important; }
html[data-theme="dark"] .btn-user{
  background:var(--surface) !important;
  border-color:var(--border2) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .btn-user:hover{ background:var(--surface2) !important; }
html[data-theme="dark"] .btn-orcamento{
  background:linear-gradient(135deg,var(--primary-h),var(--primary)) !important;
  color:#fff !important;
}
html[data-theme="dark"] .cart-count{ border-color:var(--surface) !important; }

/* ── Hero ────────────────────────────────────────────────── */
html[data-theme="dark"] .hero{
  background:linear-gradient(135deg,#070914 0%,#0b1a3d 55%,#1e1b4b 100%) !important;
}

/* ── Categories ──────────────────────────────────────────── */
html[data-theme="dark"] .categories-section{
  background:var(--surface) !important;
  border-bottom:1px solid var(--border) !important;
}
html[data-theme="dark"] .section-title{ color:var(--muted); }
html[data-theme="dark"] .cat-arrow{
  background:var(--surface2) !important;
  border-color:var(--border2) !important;
  color:var(--text) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.5) !important;
}
html[data-theme="dark"] .cat-arrow:hover{
  background:var(--primary) !important;
  border-color:var(--primary) !important;
  color:#fff !important;
}
html[data-theme="dark"] .cat-label{ color:var(--text); }
html[data-theme="dark"] .cat-icon-wrap{
  background:var(--surface2);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
html[data-theme="dark"] .cat-item:hover .cat-icon-wrap,
html[data-theme="dark"] .cat-item.active .cat-icon-wrap{
  background:var(--primary);
  box-shadow:0 6px 18px rgba(37,99,235,.4);
}

/* ── Product cards ───────────────────────────────────────── */
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .p-card{
  background:var(--card) !important;
  border:1.5px solid var(--border) !important;
  color:var(--text);
}
html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .p-card:hover{
  border-color:rgba(37,99,235,.4) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(37,99,235,.15) !important;
}
html[data-theme="dark"] .product-img,
html[data-theme="dark"] .p-img{ background:var(--surface2) !important; }
html[data-theme="dark"] .product-name,
html[data-theme="dark"] .p-name{ color:var(--text) !important; }
html[data-theme="dark"] .product-name:hover,
html[data-theme="dark"] .p-name:hover{ color:var(--accent) !important; }
html[data-theme="dark"] .product-cat,
html[data-theme="dark"] .p-cat{
  background:rgba(59,130,246,.12) !important;
  color:#7dd3fc !important;
}
html[data-theme="dark"] .price-old{ color:var(--muted2) !important; }
html[data-theme="dark"] .price-new{ color:var(--text) !important; }
html[data-theme="dark"] .stock-badge{
  background:rgba(34,197,94,.14) !important;
  color:#4ade80 !important;
}
html[data-theme="dark"] .stock-badge.out{
  background:rgba(239,68,68,.14) !important;
  color:#f87171 !important;
}
html[data-theme="dark"] .wishlist-btn{
  background:rgba(7,9,15,.7) !important;
  color:var(--muted) !important;
}
html[data-theme="dark"] .wishlist-btn:hover,
html[data-theme="dark"] .wishlist-btn.ativo{
  background:rgba(239,68,68,.15) !important;
  color:#ef4444 !important;
}
html[data-theme="dark"] .btn-cart{
  background:linear-gradient(135deg,var(--primary-h),var(--primary)) !important;
  color:#fff !important;
}
html[data-theme="dark"] .btn-cart:hover{
  background:linear-gradient(135deg,var(--primary),#3b82f6) !important;
}

/* ── Generic surfaces / sections ─────────────────────────── */
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box{
  background:var(--card) !important;
  border-color:var(--border) !important;
  color:var(--text);
}
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .sort-select{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border2) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color:var(--muted2) !important; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus{ border-color:var(--primary) !important; }

html[data-theme="dark"] table{ color:var(--text); }
html[data-theme="dark"] table th{
  background:var(--surface2) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--border) !important;
}
html[data-theme="dark"] table td{
  border-bottom:1px solid var(--border) !important;
}
html[data-theme="dark"] table tr:hover td{ background:rgba(255,255,255,.03) !important; }

/* Pagination */
html[data-theme="dark"] .page-btn{
  background:var(--surface2) !important;
  color:var(--text) !important;
  border-color:var(--border2) !important;
}
html[data-theme="dark"] .page-btn:hover{
  border-color:rgba(37,99,235,.5) !important;
  color:var(--accent) !important;
}
html[data-theme="dark"] .page-btn.active{
  background:var(--primary) !important;
  border-color:var(--primary) !important;
  color:#fff !important;
}
html[data-theme="dark"] .pagination-info,
html[data-theme="dark"] .results-count{ color:var(--muted) !important; }

/* Footer */
html[data-theme="dark"] footer{
  background:var(--surface) !important;
  color:var(--muted) !important;
  border-top:1px solid var(--border);
}
html[data-theme="dark"] footer .footer-col h4{ color:var(--text) !important; }
html[data-theme="dark"] footer a:hover{ color:var(--accent) !important; }

/* Cookie bar */
html[data-theme="dark"] .cookie-bar{
  background:var(--surface2) !important;
  color:var(--text) !important;
  border-top:1px solid var(--border);
}

/* Modal / Toast */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dialog{
  background:var(--card) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}
html[data-theme="dark"] .wish-toast{
  background:var(--surface2) !important;
  color:var(--text) !important;
  border:1px solid var(--border);
}

/* ── Página de produto (produto.php) ─────────────────────
   Vários textos usam color:var(--dark) — no light é quase preto,
   no dark vira fundo, ficando invisível. Forçar text/muted aqui. */
html[data-theme="dark"] .product-title,
html[data-theme="dark"] .price-value,
html[data-theme="dark"] .section-heading,
html[data-theme="dark"] .product-card .price,
html[data-theme="dark"] .info-mini strong{
  color: var(--text) !important;
}
html[data-theme="dark"] .sku,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb span.sep,
html[data-theme="dark"] .price-de-label,
html[data-theme="dark"] .price-por-label,
html[data-theme="dark"] .price-label,
html[data-theme="dark"] .info-mini span,
html[data-theme="dark"] .note,
html[data-theme="dark"] .product-card .price-orig{
  color: var(--muted) !important;
}
html[data-theme="dark"] .description{ color: var(--text) !important; }
html[data-theme="dark"] .badge-cat{
  background: rgba(59,130,246,.12) !important;
  color: #7dd3fc !important;
}
html[data-theme="dark"] .badge-stock{
  background: rgba(34,197,94,.14) !important;
  color: #4ade80 !important;
}
html[data-theme="dark"] .badge-stock.out{
  background: rgba(239,68,68,.14) !important;
  color: #f87171 !important;
}
html[data-theme="dark"] .promo-banner a{
  background: var(--surface2) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .thumb{
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .btn-top{
  background: transparent !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .btn-wish{
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
  color: var(--muted) !important;
}
html[data-theme="dark"] .btn-wish:hover,
html[data-theme="dark"] .btn-wish.ativo{
  background: rgba(244,63,94,.12) !important;
  border-color: rgba(244,63,94,.4) !important;
  color: #fb7185 !important;
}
html[data-theme="dark"] .product-card{
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* ── Theme toggle button (injetado pelo JS) ─────────────── */
.theme-toggle{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  border:1px solid var(--border, #e2e8f0);
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s, border-color .15s, color .15s, transform .2s;
  position:relative;
  flex-shrink:0;
  padding:0;
}
.theme-toggle:hover{ transform:translateY(-1px); }
.theme-toggle svg{ width:18px;height:18px; transition:transform .35s ease; }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
html[data-theme="dark"] .theme-toggle{
  border-color:var(--border2);
  color:var(--accent);
  background:rgba(0,212,255,.06);
}
html[data-theme="dark"] .theme-toggle:hover{
  background:rgba(0,212,255,.14);
  border-color:rgba(0,212,255,.4);
}
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

/* Versão flutuante (fallback quando não há header detectável) */
.theme-toggle.theme-toggle--floating{
  position:fixed;
  top:14px;
  right:14px;
  z-index:9999;
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(7,9,15,.85);
  border:1px solid var(--border2, rgba(255,255,255,.12));
  color:var(--accent,#00d4ff);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  backdrop-filter:blur(10px);
}
html[data-theme="light"] .theme-toggle.theme-toggle--floating{
  background:rgba(255,255,255,.95);
  color:#0f172a;
  border-color:#e2e8f0;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}