/* ============================================================================
   CogSOUL — icomoon enhancement layer  (OPTIONAL)
   For the Limitless DEFAULT icomoon set: @font-face family "icomoon", prefix
   ".icon-". Load AFTER your icons.min.css AND after cogsoul-theme-*.css.

   None of this is required — your icomoon glyphs already inherit theme color
   through `currentColor`. This file just adds tasteful steampunk sugar:
   slow-turning cogs, brass loaders, and a geared section-header bullet.
   ========================================================================== */

/* 1) Opt-in slow-turning cog. Drop `cs-cog-spin` onto any cog glyph.
      <i class="icon-cog3 cs-cog-spin"></i>      add `cs-rev` to reverse,
      <i class="icon-cog cs-cog-spin cs-slow"></i> for a 12s turn.            */
@keyframes cs-cog-rotate { to { transform: rotate(360deg); } }
.cs-cog-spin {
  display: inline-block;
  animation: cs-cog-rotate 6s linear infinite;
  transform-origin: 50% 50%;
}
.cs-cog-spin.cs-rev  { animation-direction: reverse; }
.cs-cog-spin.cs-slow { animation-duration: 12s; }
@media (prefers-reduced-motion: reduce) { .cs-cog-spin { animation: none; } }

/* 2) SPINNING-COG LOADER — the house busy-state.
      (a) AUTOMATIC: every existing icomoon spinner (icon-spinner … icon-spinner11,
          and your .fm-ai-spin which sits on icon-spinner3) is converted to a
          brass turning cog with NO markup change. */
[class*="icon-spinner"] {
  color: var(--cs-brass);
  display: inline-block;
  animation: cs-cog-rotate 2s linear infinite;
  transform-origin: 50% 50%;
}
[class*="icon-spinner"]::before { content: "\eb75" !important; }  /* icon-cog2 */
@media (prefers-reduced-motion: reduce) { [class*="icon-spinner"] { animation: none; } }

/*    (b) EXPLICIT: a ready loader to drop anywhere —
          <span class="cs-loader"></span>  Loading…                          */
.cs-loader::before {
  font-family: 'icomoon';
  content: "\eb75";            /* icon-cog2 */
  display: inline-block;
  color: var(--cs-brass);
  transform-origin: 50% 50%;
  animation: cs-cog-rotate 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .cs-loader::before { animation: none; } }

/* 3) Sidebar active / hover icon = brass. icomoon inherits currentColor, so
      this is belt-and-braces against any page that hardcodes an icon color. */
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active [class*="icon-"] { color: var(--cs-brass-soft) !important; }
.sidebar-dark .nav-sidebar > .nav-item > .nav-link:hover  [class*="icon-"] { color: var(--cs-ink) !important; }

/* 4) Optional gear bullet before a nav section header. Add `cs-geared`:
      <li class="nav-item-header cs-geared"><div class="...">Products</div></li> */
.nav-item-header.cs-geared > div::before {
  font-family: 'icomoon';
  content: "\eb73";        /* icon-cog */
  margin-right: 7px;
  font-size: 11px;
  opacity: 0.55;
  vertical-align: -1px;
}

/* 5) Brand cog, if you use the font glyph instead of cogsoul-mark.svg:
      <span class="navbar-brand"><i class="icon-cogs cs-brand-cog"></i> Cog…</span> */
.cs-brand-cog {
  color: var(--cs-brass);
  font-size: 1.4rem;
  vertical-align: -3px;
  margin-right: 0.4rem;
}

/* 6) + 7) The .icon-cogsoul and .icon-cogtasks brand icons moved to
      ../admin-brand-icons.css, which is always loaded: they are sidebar app
      icons and must not vanish when this optional overlay is off.          */