/* ============================================================
   VickyExpress v37 — Premium Neon polish
   Activates with [data-theme="dark"] (existing dark mode toggle)
   plus universal "stunning & colorful" enhancements that apply
   in both light and dark mode without breaking anything.
   ============================================================ */

/* --- Universal: subtle, modern enhancements (light + dark) --- */
:root{
  --neon-cyan:#00e5ff;
  --neon-magenta:#ff2bd6;
  --neon-purple:#8b5cf6;
  --neon-glow: 0 0 18px rgba(0,229,255,.35), 0 0 38px rgba(255,43,214,.18);
  --card-elev: 0 10px 30px -12px rgba(15,15,40,.18);
}
.card, .product-card, .video-card, .post-card{
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s;
  cursor: default;
}
.product-card:hover, .video-card:hover, .post-card:hover, .card.clickable:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -18px rgba(99,102,241,.35);
}
/* Full-body click affordance for product/website cards */
a.product-card, a.video-card, a.post-card, a.card.clickable{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
}
.btn-cta, .btn-primary{
  background-image: linear-gradient(135deg, var(--primary), var(--secondary, var(--accent)) 60%, var(--accent));
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position .5s ease, transform .2s, box-shadow .25s;
  box-shadow: 0 10px 24px -10px var(--primary);
}
.btn-cta:hover, .btn-primary:hover{
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px var(--primary);
}

/* --- DARK NEON theme polish --- */
html[data-theme="dark"], body[data-theme="dark"]{
  --background:#070713;
  --surface:#0d0d22;
  --surface-2:#15163a;
  --border:rgba(139,92,246,.18);
  --text:#e8e9ff;
  --muted-text:#9ca0c5;
  background:
     radial-gradient(1200px 600px at 10% -10%, rgba(139,92,246,.18), transparent 60%),
     radial-gradient(900px 500px at 110% 10%, rgba(0,229,255,.14), transparent 60%),
     radial-gradient(800px 600px at 50% 110%, rgba(255,43,214,.12), transparent 60%),
     #070713;
  background-attachment: fixed;
  color: var(--text);
}
body[data-theme="dark"] .navbar{
  background: rgba(8,8,24,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(139,92,246,.18);
}
body[data-theme="dark"] .card,
body[data-theme="dark"] .product-card,
body[data-theme="dark"] .video-card,
body[data-theme="dark"] .post-card,
body[data-theme="dark"] .panel{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(139,92,246,.22);
  color: var(--text);
}
body[data-theme="dark"] .card:hover,
body[data-theme="dark"] .product-card:hover,
body[data-theme="dark"] .video-card:hover{
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 1px rgba(0,229,255,.35), 0 30px 60px -25px rgba(0,229,255,.45);
}
body[data-theme="dark"] h1, body[data-theme="dark"] h2{
  background: linear-gradient(110deg,#fff 0%, var(--neon-cyan) 40%, var(--neon-magenta) 80%);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
body[data-theme="dark"] .btn-cta, body[data-theme="dark"] .btn-primary{
  background-image: linear-gradient(135deg, var(--neon-magenta), var(--neon-purple) 55%, var(--neon-cyan));
  box-shadow: 0 0 24px -4px var(--neon-magenta), 0 0 50px -10px var(--neon-cyan);
  color:#fff;
}
body[data-theme="dark"] .chip{
  background: rgba(0,229,255,.1); border:1px solid rgba(0,229,255,.3); color: var(--neon-cyan);
}
body[data-theme="dark"] .chip.ok{
  background: rgba(0,255,170,.12); border-color: rgba(0,255,170,.4); color:#7cffd0;
}
body[data-theme="dark"] input, body[data-theme="dark"] textarea, body[data-theme="dark"] select{
  background: rgba(255,255,255,.04); color: var(--text);
  border:1px solid rgba(139,92,246,.25);
}
body[data-theme="dark"] input:focus, body[data-theme="dark"] textarea:focus, body[data-theme="dark"] select:focus{
  border-color: var(--neon-cyan); outline:none;
  box-shadow: 0 0 0 3px rgba(0,229,255,.18);
}
body[data-theme="dark"] a{ color: var(--neon-cyan); }
body[data-theme="dark"] a:hover{ color: var(--neon-magenta); text-shadow: 0 0 12px rgba(255,43,214,.5); }
body[data-theme="dark"] footer{
  background: linear-gradient(180deg, transparent, rgba(139,92,246,.08));
  border-top:1px solid rgba(139,92,246,.2);
}
body[data-theme="dark"] .price, body[data-theme="dark"] .product-price{
  background: linear-gradient(110deg, var(--neon-cyan), var(--neon-magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800;
}

/* Animated subtle hero glow */
body[data-theme="dark"] .hero, body[data-theme="dark"] .hero-mini{
  position:relative; overflow:hidden;
}
body[data-theme="dark"] .hero::before, body[data-theme="dark"] .hero-mini::before{
  content:""; position:absolute; inset:-20%;
  background: conic-gradient(from 0deg, transparent, rgba(0,229,255,.12), transparent 30%, rgba(255,43,214,.12), transparent 60%);
  animation: vp-neon-spin 18s linear infinite;
  z-index:0; pointer-events:none;
}
body[data-theme="dark"] .hero > *, body[data-theme="dark"] .hero-mini > *{ position:relative; z-index:1; }
@keyframes vp-neon-spin{ to{ transform: rotate(360deg);} }

/* Make product/website cards on the storefront feel "clickable" */
.product-card, .website-card, .video-card{ position:relative; }
.product-card::after, .website-card::after{
  content:"View →"; position:absolute; right:14px; bottom:14px;
  background: var(--grad, linear-gradient(135deg,var(--primary),var(--accent)));
  color:#fff; padding:6px 12px; border-radius:999px; font-size:.78rem;
  opacity:0; transform: translateY(6px); transition:.25s;
}
.product-card:hover::after, .website-card:hover::after{ opacity:1; transform: translateY(0); }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  body[data-theme="dark"] .hero::before, body[data-theme="dark"] .hero-mini::before{ animation:none; }
  .card, .product-card, .video-card, .post-card{ transition:none; }
}