/* === NinjaX header icon buttons: vivid purple?blue hover, white icon === */

/* Base (no border, soft logo gradient) */
.nx-iconbtn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;

  /* Theme colors */
  --nx-purple-600: #5b21b6;   /* base purple */
  --nx-purple-700: #4c1d95;   /* darker purple */
  --nx-blue-500:  #3b82f6;    /* blue (idle tail) */
  --nx-blue-700:  #1d4ed8;    /* stronger blue (hover) */

  color: #fff;                /* text/icon color */
  background-image: linear-gradient(135deg, var(--nx-purple-600) 0%, var(--nx-blue-500) 100%);
  background-size: 200% 200%;                 /* enables subtle shift */
  background-position: 0% 50%;

  box-shadow:
    0 8px 18px rgba(59, 130, 246, 0.25),
    0 2px 6px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.15);

  text-decoration: none;
  line-height: 1;
  transition:
    background-position 220ms ease,
    transform 140ms ease,
    box-shadow 220ms ease,
    filter 160ms ease,
    color 160ms ease;
}

/* Keep icons white always */
.nx-iconbtn > i,
.nx-iconbtn > .fa,
.nx-iconbtn > .fas,
.nx-iconbtn > .fa-solid { 
  font-size: 16px; 
  color: #fff !important;
}

/* HOVER: deeper purple ? electric blue + slight animated sweep */
.nx-iconbtn:hover {
  /* push gradient to the vibrant end without changing layout */
  background-image: linear-gradient(135deg, var(--nx-purple-600) 0%, var(--nx-blue-500) 100%);
  background-size: 200% 200%;                 /* enables subtle shift */
  background-position: 0% 50%;

  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(29, 78, 216, 0.38),
    0 3px 10px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.22);
  filter: saturate(1.06) brightness(1.03);
}

/* Active + keyboard focus (no borders) */
.nx-iconbtn:active { transform: translateY(0); }

.nx-iconbtn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(76, 29, 149, 0.5),   /* purple ring */
    0 0 0 6px rgba(29, 78, 216, 0.35),  /* blue halo */
    0 10px 24px rgba(29, 78, 216, 0.30);
}

/* Badge stays punchy on light headers */
.nx-badge {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0b0b0b;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Small headers */
@media (max-width: 420px) {
  .nx-iconbtn { width: 36px; height: 36px; border-radius: 10px; }
  .nx-iconbtn > i,
  .nx-iconbtn > .fa,
  .nx-iconbtn > .fas,
  .nx-iconbtn > .fa-solid { font-size: 15px; }
}