/* === v41 — Stability + Polish pass ===
   Focus: theme toggle animation, social icon containment, video section,
   theme flash prevention, newsletter input alignment. */

/* ---------- 1. Theme flash prevention ---------- */
html{ background:#fff; color-scheme:light; }
html[data-theme="dark"]{ background:#0a0a14; color-scheme:dark; }
html[data-theme="dark"] body{ background:#0a0a14; }
/* Hide body until theme attribute applied to prevent flicker */
html:not([data-theme]) body{ visibility:hidden; }

/* ---------- 2. Theme toggle — smoother animation ---------- */
.theme-toggle{
  position:relative;
  width:42px !important; height:42px !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  border-radius:50% !important;
  background:var(--surface, rgba(255,255,255,.05));
  border:1px solid var(--border, rgba(255,255,255,.12));
  cursor:pointer;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .25s, border-color .25s, box-shadow .25s;
}
.theme-toggle i{
  font-size:1rem;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s, color .25s;
}
.theme-toggle:hover{
  transform:rotate(0) scale(1.08);
  background:var(--grad, linear-gradient(135deg,var(--primary),var(--accent)));
  border-color:transparent;
  box-shadow:0 0 20px -4px var(--primary, #7c3aed);
}
.theme-toggle:hover i{ color:#fff; transform:rotate(360deg) scale(1.12); }
.theme-toggle:active{ transform:scale(.92); }
html[data-theme="dark"] .theme-toggle i{ color:#fbbf24; }
html[data-theme="light"] .theme-toggle i{ color:#f59e0b; }

/* ---------- 3. Social icons — fixed boxes, no overflow ---------- */
.socials{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  align-items:center;
}
.socials a{
  flex:0 0 auto !important;
  width:42px !important;
  height:42px !important;
  min-width:42px;
  min-height:42px;
  max-width:42px;
  max-height:42px;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--surface, rgba(255,255,255,.05));
  border:1px solid var(--border, rgba(255,255,255,.1));
  color:var(--text, #cbd5e1);
  font-size:1.05rem;
  line-height:1;
  padding:0 !important;
  overflow:hidden;
  text-decoration:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.socials a i{
  font-size:1.05rem;
  line-height:1;
  display:inline-block;
  pointer-events:none;
}
.socials a:hover{
  transform:translateY(-3px) scale(1.06);
  background:var(--grad, linear-gradient(135deg,var(--primary,#7c3aed),var(--secondary,#ec4899)));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 20px -6px var(--primary, #7c3aed);
}

/* ---------- 4. Video section — gallery polish ---------- */
.video-card{
  background:var(--surface, #fff);
  border:1px solid var(--border, rgba(255,255,255,.08));
  border-radius:20px !important;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .25s;
  position:relative;
}
.video-card:hover{
  transform:translateY(-6px);
  border-color:var(--primary);
  box-shadow:0 24px 50px -20px var(--primary, #7c3aed);
}
.video-card .vc-thumb{
  position:relative;
  aspect-ratio:16/9;
  background:#0b0b14 center/cover;
  overflow:hidden;
}
.video-card .vc-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7));
  transition:background .3s;
}
.video-card:hover .vc-thumb::after{
  background:linear-gradient(180deg, rgba(124,58,237,.2) 0%, rgba(0,0,0,.8));
}
.video-card .vc-play{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  pointer-events:none;
}
.video-card .vc-play span{
  width:62px; height:62px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  display:grid; place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s;
}
.video-card:hover .vc-play span{
  transform:scale(1.15);
  background:var(--grad, linear-gradient(135deg,var(--primary),var(--secondary)));
}
.video-card:hover .vc-play span i{ color:#fff !important; }
.video-card .vc-play i{ color:#111; font-size:1.4rem; margin-left:4px; transition:color .25s; }
.video-card .vc-duration{
  position:absolute; right:10px; bottom:10px; z-index:3;
  background:rgba(0,0,0,.85); color:#fff;
  padding:4px 9px; border-radius:6px; font-size:.78rem;
  font-variant-numeric:tabular-nums;
}
.video-card .vc-body{ padding:16px 18px; }
.video-card .vc-body h3{
  font-size:1.02rem; margin:0 0 8px;
  line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.video-card .vc-meta{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  font-size:.82rem; color:var(--muted);
}
/* Suppress the "View →" hover chip from neon-v37 on video cards (looks wrong on video tiles) */
.video-card::after{ display:none !important; content:none !important; }

.video-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:24px;
}
.video-filters a, .video-filters button{
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:.85rem;
  text-decoration:none;
  transition:.2s;
}
.video-filters a:hover, .video-filters .active{
  background:var(--grad); color:#fff; border-color:transparent;
}

/* ---------- 5. Newsletter footer input — extra polish ---------- */
footer .newsletter{
  background:var(--surface, rgba(255,255,255,.06)) !important;
  border:1px solid var(--border, rgba(255,255,255,.12)) !important;
}
footer .newsletter input[type=email]::placeholder{ color:var(--muted, #94a3b8); }

/* ---------- 6. Card "clickability" — exclude video/non-product cards ---------- */
.card.video-card::after, .video-featured::after{
  display:none !important; content:none !important;
}

/* ---------- 7. Reading progress bar (blog/posts) ---------- */
.vp-reading-bar{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:var(--grad, linear-gradient(90deg,var(--primary),var(--secondary),var(--accent)));
  z-index:9999; transition:width .1s linear;
  box-shadow:0 0 12px var(--primary);
}

/* ---------- 8. Better focus visibility (accessibility) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--primary, #7c3aed) !important;
  outline-offset:2px;
  border-radius:8px;
}

/* ---------- 9. Mobile tweaks ---------- */
@media (max-width:640px){
  .socials a{ width:38px !important; height:38px !important; min-width:38px; min-height:38px; max-width:38px; max-height:38px; border-radius:10px !important; }
  .theme-toggle{ width:40px !important; height:40px !important; }
  .video-card .vc-play span{ width:52px; height:52px; }
}