/* ==========================================================================
   ZYNLUME — Continuous Vector Stroke Drawing Engine v2
   All SVG vectors smoothly flow their outline continuously
   ========================================================================== */

@keyframes zmStrokeDraw {
  0%   { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}

@keyframes zmSpinWheel {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Base icon sizing & display */
.zm-anim-icon,
.cab-ico,
.mono-icon,
.btn-ico,
.user-nav-ico,
.mp-ic,
.ch-ic,
.dl-ic,
.feature-icon,
.support-icon,
.cta-icon,
[class*="zm-ico-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: none !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

.cab-ico svg,
.zm-anim-icon svg,
.mono-icon svg,
.btn-ico svg,
.user-nav-ico svg,
.mp-ic svg,
.ch-ic svg,
.dl-ic svg,
.feature-icon svg,
.dash-rail nav button svg,
.dash-actions svg,
.gift-form svg,
.gift-row svg,
.panel svg,
.field-label svg,
.btn svg,
#dash svg {
  display: block !important;
  overflow: visible !important;
  filter: none !important;
}

/* ===========================================================================
   Universal animated stroke — applies to icon wrappers' SVG children only.
   Uses large dasharray so animation is visible on all path lengths.
   =========================================================================== */
.zm-anim-icon svg *,
.cab-ico svg *,
.mono-icon svg *,
.btn-ico svg *,
.brand-symbol svg *,
.user-nav-ico svg *,
.user-nav-btn svg *,
#userNavPill svg *,
.mp-ic svg *,
.ch-ic svg *,
.dl-ic svg *,
.feature-icon svg *,
.support-icon svg *,
.cta-icon svg *,
.panel svg *,
.gift-form svg *,
.gift-row svg *,
.field-label svg *,
.panel-head svg *,
.profile-menu-actions svg *,
.desktop-auth svg *,
.mobile-auth-block svg *,
[class*="zm-ico-"] svg *,
.dash-rail nav button svg *,
.dash-actions svg *,
.danger-zone svg *,
.status-pill svg *,
.lang-trigger svg *,
.btn-sm svg *,
.btn svg *,
#dash svg *,
#site .btn svg *,
#site .feature-icon svg *,
#site .plan-icon svg *,
#site .support-icon svg * {
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 100 50 !important;
  stroke-dashoffset: 200 !important;
  animation: zmStrokeDraw 2.4s ease-in-out infinite !important;
  animation-play-state: running !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  will-change: stroke-dashoffset !important;
}

/* Faster animation for small nav/button icons */
.btn svg *,
.btn-sm svg *,
#userNavPill svg *,
.user-nav-btn svg *,
.dash-actions svg *,
.lang-trigger svg * {
  stroke-dasharray: 60 30 !important;
  stroke-dashoffset: 120 !important;
  animation-duration: 1.8s !important;
}

/* Force animation running state */
@media (prefers-reduced-motion: reduce), (prefers-reduced-motion: no-preference) {
  svg:not(.no-anim) *,
  .zm-anim-icon svg *,
  .cab-ico svg *,
  .mono-icon svg *,
  .btn-ico svg *,
  .brand-symbol svg *,
  .mp-ic svg *,
  .ch-ic svg *,
  .dl-ic svg *,
  .search-ic svg *,
  .dash-actions svg *,
  .preset-pill svg *,
  .style-pill svg *,
  .gift-row svg *,
  .danger-zone svg *,
  .status-pill svg *,
  .lang-trigger svg *,
  .btn-sm svg *,
  .btn svg *,
  #dash svg *,
  #site svg * {
    animation-play-state: running !important;
    animation-iteration-count: infinite !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Preserve filled shapes (dots, crowns, filled decorative elements) */
.cab-ico svg [fill="currentColor"],
.mono-icon svg [fill="currentColor"],
.zm-anim-icon svg [fill="currentColor"],
svg circle.zm-dot,
.admin-live-pill .live-dot,
.status-pill i,
.rail-status i {
  fill: currentColor !important;
  stroke: none !important;
  animation: none !important;
}

/* Strict Red stroke for Trash / Delete buttons */
.zm-ico-trash svg path,
.zm-ico-trash svg polyline,
.zm-ico-trash svg line,
[data-cab-icon="trash"] svg path,
[data-cab-icon="trash"] svg polyline,
[data-cab-icon="trash"] svg line,
[data-action="deleteAccount"] svg path,
[data-action="deleteAccount"] svg polyline,
[data-action="deleteAccount"] svg line,
#delAccountBtn svg path,
#delAccountBtn svg polyline,
#delAccountBtn svg line,
.btn-danger svg path,
.btn-danger svg polyline,
.btn-danger svg line,
.btn-danger-ghost svg path,
.btn-danger-ghost svg polyline,
.btn-danger-ghost svg line,
.danger-zone svg path,
.danger-zone svg polyline,
.danger-zone svg line {
  stroke: #ef4444 !important;
}

/* Strict Red Styling for Delete Account button */
[data-action="deleteAccount"],
#delAccountBtn,
.btn-danger,
.danger-zone button,
.btn-danger-ghost {
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

[data-action="deleteAccount"]:hover,
#delAccountBtn:hover,
.btn-danger:hover,
.danger-zone button:hover,
.btn-danger-ghost:hover {
  color: #ffffff !important;
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.35) !important;
}

/* Spin animation for wheels/orbits */
[data-spin],
svg [data-spin],
.zm-anim-icon svg [data-spin],
.cab-ico svg [data-spin],
.mono-icon svg [data-spin] {
  animation: zmSpinWheel 6s linear infinite !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  transform-origin: center center !important;
  transform-box: fill-box !important;
  will-change: transform !important;
}