﻿/* ============================================================
   Theme V7 â€” PLAYON BLUE (Igual V6, cores da V1)
   Layout PLAYON â€¢ Cores azuis da V1 â€¢ Moderno
   ============================================================ */
:root {
  --bg-primary: #05060f;
  --bg-secondary: #080a1a;
  --bg-card: rgba(8,12,30,0.92);
  --blue: #dc2626;
  --blue-light: #ef4444;
  --accent: #dc2626;
  --accent-light: #ef4444;
  --lime: #ffffff;
  --lime-light: #e8f0ff;
  --cyan: #f87171;
  --white: #ffffff;
  --text: #ffffff;
  --text-muted: #8b9ab0;
  --text-dim: #4a5568;
  --border: rgba(220,38,38,0.18);
  --border-glow: rgba(220,38,38,0.4);
  --shadow: 0 8px 40px rgba(220,38,38,0.1);
  --gradient: linear-gradient(135deg, #dc2626, #f87171, #ef4444);
  --gradient-accent: linear-gradient(135deg, #dc2626, #f87171);
  --gradient-text: linear-gradient(135deg, #dc2626, #f87171);
  --glow: rgba(220,38,38,0.25);
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --navbar-bg: rgba(5,6,15,0.94);
  --hero-bg: linear-gradient(160deg, #05060f 0%, #080a1a 50%, #05060f 100%);
  --card-border-hover: rgba(220,38,38,0.4);
  --badge-sale: linear-gradient(135deg, #dc2626, #ef4444);
  --badge-promo: linear-gradient(135deg, #f59e0b, #f97316);
  --gradient-blue: var(--gradient);
  --gradient-lime: linear-gradient(135deg, #ef4444, #dc2626);
  --shadow-blue: 0 8px 40px rgba(220,38,38,0.12);
  --shadow-card: 0 8px 40px rgba(0,0,0,0.5);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* â”€â”€ Body â”€â”€ */
.theme-v7 body {
  background-image: radial-gradient(ellipse at 50% 0%, rgba(220,38,38,0.04) 0%, transparent 60%) !important;
}

/* â”€â”€ Navbar â”€â”€ */
.theme-v7 .navbar {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px) !important;
}
/* Esconde navbar padrÃ£o apenas quando V7 Ã© a homepage (tem .v6-topbar) */
.theme-v7:has(.v6-topbar) .navbar { display: none !important; }
.theme-v7 .navbar-nav a {
  font-weight: 500 !important;
  transition: 0.2s !important;
}
.theme-v7 .navbar-nav a:hover {
  color: var(--accent-light) !important;
}
.theme-v7 .navbar-nav a.active {
  color: var(--accent-light) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

/* â”€â”€ Cards â”€â”€ */
.theme-v7 .product-card {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-card) !important;
  transition: all 0.3s !important;
  overflow: hidden !important;
}
.theme-v7 .product-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 30px var(--glow) !important;
  transform: translateY(-4px) !important;
}
.theme-v7 .product-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 2px !important;
  background: var(--gradient) !important;
  opacity: 0;
  transition: opacity 0.3s !important;
}
.theme-v7 .product-card:hover::after {
  opacity: 1 !important;
}
.theme-v7 .product-card-title { font-weight: 600 !important; }
.theme-v7 .product-price-new { color: var(--accent-light) !important; font-weight: 800 !important; }

/* â”€â”€ BotÃµes â”€â”€ */
.theme-v7 .btn-primary {
  background: var(--gradient) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--glow) !important;
  border: none !important;
  font-weight: 700 !important;
}
.theme-v7 .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 28px var(--glow) !important;
}
.theme-v7 .btn-outline {
  border-color: var(--border) !important;
  color: var(--accent-light) !important;
}
.theme-v7 .btn-outline:hover {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}

/* â”€â”€ Badges â”€â”€ */
.theme-v7 .badge-blue {
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  border-color: var(--border) !important;
  color: var(--accent-light) !important;
}
.theme-v7 .badge-success {
  background: color-mix(in srgb, #22c55e 12%, transparent) !important;
  color: #22c55e !important;
}
.theme-v7 .badge-lime {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--accent-light) !important;
  border-color: var(--border) !important;
}

/* â”€â”€ Category â”€â”€ */
.theme-v7 .category-title {
  background: var(--gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.theme-v7 .category-line {
  background: var(--gradient) !important;
  height: 2px !important;
}

/* â”€â”€ Hero â”€â”€ */
.theme-v7 .hero-section { padding: 40px 0 24px !important; }
.theme-v7 .hero-title { font-size: clamp(1.6rem,4vw,2.8rem) !important; font-weight: 900 !important; }

/* â”€â”€ Tabelas â”€â”€ */
.theme-v7 .table th { color: var(--accent-light) !important; font-size: 0.68rem !important; font-weight: 700 !important; }
.theme-v7 .table td { border-bottom-color: color-mix(in srgb, var(--accent) 6%, transparent) !important; }
.theme-v7 .table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent) !important; }

/* â”€â”€ Stat cards â”€â”€ */
.theme-v7 .stat-card { border: 1px solid var(--border) !important; border-radius: 14px !important; }
.theme-v7 .stat-card::before { background: var(--gradient) !important; }

/* â”€â”€ Autocomplete dropdown (V7 blue) â”€â”€ */
.theme-v7 .ac-dropdown {
  background: #0a0a1a !important;
  border-color: rgba(220,38,38,0.2) !important;
}
.theme-v7 .ac-item:hover,
.theme-v7 .ac-item.ac-active {
  background: rgba(220,38,38,0.1) !important;
}
.theme-v7 .ac-price {
  color: #f87171 !important;
}

/* ============================================================
   V7 EFEITOS â€” Azul suave (V6 style + V1 colors)
   ============================================================ */
@keyframes v7Pulse {
  0% { opacity: 0.015; }
  50% { opacity: 0.05; }
  100% { opacity: 0.015; }
}
.theme-v7 body::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: radial-gradient(ellipse at 25% 15%, rgba(220,38,38,0.06) 0%, transparent 45%),
              radial-gradient(ellipse at 75% 85%, rgba(0,212,255,0.04) 0%, transparent 45%),
              radial-gradient(ellipse at 50% 50%, rgba(61,143,255,0.02) 0%, transparent 50%) !important;
  animation: v7Pulse 8s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* PartÃ­culas azuis subindo */
@keyframes v7Particle {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  8% { opacity: 0.4; }
  92% { opacity: 0.15; }
  100% { transform: translateY(-55vh) translateX(120px) scale(0.25); opacity: 0; }
}
.theme-v7 body::before {
  content: '' !important;
  position: fixed !important;
  bottom: -15px !important;
  left: 10% !important;
  width: 5px !important;
  height: 5px !important;
  background: var(--accent-light) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 10px 4px rgba(220,38,38,0.25),
    80px -25px 0 -1px rgba(220,38,38,0.4),
    -180px -45px 0 -1px rgba(0,212,255,0.3),
    300px -15px 0 -1px rgba(220,38,38,0.25),
    -100px -90px 0 -1px rgba(61,143,255,0.2),
    220px -75px 0 -1px rgba(220,38,38,0.3),
    -260px -120px 0 0px rgba(0,212,255,0.25),
    160px -160px 0 0px rgba(220,38,38,0.2),
    -50px -210px 0 0px rgba(61,143,255,0.2),
    340px -55px 0 0px rgba(220,38,38,0.25),
    -140px -250px 0 0px rgba(0,212,255,0.2),
    280px -180px 0 0px rgba(220,38,38,0.2),
    -320px -80px 0 0px rgba(61,143,255,0.15) !important;
  animation: v7Particle 18s linear infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Cards com entrada suave */
@keyframes v7CardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.theme-v7 .v6-card {
  animation: v7CardIn 0.45s ease both !important;
}
.theme-v7 .v6-card:nth-child(2) { animation-delay: 0.05s !important; }
.theme-v7 .v6-card:nth-child(3) { animation-delay: 0.1s !important; }
.theme-v7 .v6-card:nth-child(4) { animation-delay: 0.15s !important; }
.theme-v7 .v6-card:nth-child(5) { animation-delay: 0.2s !important; }
.theme-v7 .v6-card:nth-child(6) { animation-delay: 0.25s !important; }
.theme-v7 .v6-card:nth-child(7) { animation-delay: 0.3s !important; }
.theme-v7 .v6-card:nth-child(8) { animation-delay: 0.35s !important; }
.theme-v7 .v6-card:nth-child(9) { animation-delay: 0.4s !important; }

/* Brilho sutil no spotlight */
@keyframes v7SpotGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(220,38,38,0.04); }
  50% { box-shadow: 0 0 45px rgba(220,38,38,0.09); }
}
.theme-v7 .v6-spotlight {
  animation: v7SpotGlow 5s ease-in-out infinite !important;
}

/* Hover suave nos cards da sidebar */
.theme-v7 .v6-sidebar-item {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.theme-v7 .v6-sidebar-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #dc2626, #f87171);
  transform: scaleY(0); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 3px 3px 0;
}
.theme-v7 .v6-sidebar-item:hover::before { transform: scaleY(1); }
.theme-v7 .v6-sidebar-item.active::before { transform: scaleY(1); }

/* BotÃ£o spotlight com gradiente azul */
.theme-v7 .v6-spotlight-btn {
  background: linear-gradient(135deg, #dc2626, #f87171) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.theme-v7 .v6-spotlight-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(220,38,38,0.25) !important;
}

/* Logo span azul */
.theme-v7 .v6-logo span { color: #dc2626 !important; }
/* PreÃ§o cards azul */
.theme-v7 .v6-card-price { color: #dc2626 !important; }
.theme-v7 .v6-card-btn { border-color: #dc2626 !important; color: #fff !important; background: #dc2626 !important; font-weight: 700 !important; }
.theme-v7 .v6-card-btn:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
.theme-v7 .v6-card-btn.sold { color: rgba(255,255,255,0.5) !important; border-color: rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.04) !important; }
/* Sidebar active azul */
.theme-v7 .v6-sidebar-item.active { color: #dc2626 !important; background: rgba(220,38,38,0.08) !important; }
.theme-v7 .v6-sidebar-item:hover { color: #dc2626 !important; }
/* Badge azul */
.theme-v7 .v6-badge-disc { background: var(--badge-sale) !important; }
/* Search focus azul */
.theme-v7 .v6-search:focus { border-color: rgba(220,38,38,0.4) !important; }
/* Tag hover azul */
.theme-v7 .v6-feat:hover { border-color: rgba(220,38,38,0.15) !important; }

/* ============================================================
   V7 MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .theme-v7 .hero-section { padding: 28px 0 16px !important; }
}

