/* Icon system — pairs with App\Helpers\Icon (.nx-icon) */

.nx-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  shape-rendering: geometricPrecision;
  overflow: visible;
  box-sizing: content-box;
  transition: color 160ms ease, opacity 160ms ease;
}

/* Prefer explicit pixel size from width/height attributes (set by Icon::svg) */
.nx-icon[width="14"] { width: 14px !important; height: 14px !important; }
.nx-icon[width="16"] { width: 16px !important; height: 16px !important; }
.nx-icon[width="18"] { width: 18px !important; height: 18px !important; }
.nx-icon[width="20"] { width: 20px !important; height: 20px !important; }
.nx-icon[width="22"] { width: 22px !important; height: 22px !important; }
.nx-icon[width="24"] { width: 24px !important; height: 24px !important; }
.nx-icon[width="28"] { width: 28px !important; height: 28px !important; }
.nx-icon[width="32"] { width: 32px !important; height: 32px !important; }

button .nx-icon,
a .nx-icon,
.btn .nx-icon,
.icon-btn .nx-icon,
.admin-nav-link .nx-icon,
.quick .nx-icon {
  display: block;
  flex-shrink: 0;
}

.nx-icon--fill {
  stroke: none;
}

.trust-icon,
.how-icon,
.empty-icon {
  color: var(--primary);
}

.trust-icon .nx-icon,
.how-icon .nx-icon,
.empty-icon .nx-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.how-icon {
  background: linear-gradient(160deg, var(--primary-soft), #fff 70%);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-dark);
}

.trust-icon {
  background: linear-gradient(160deg, var(--primary-soft), #fff 65%);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
}

.empty-icon {
  background: linear-gradient(165deg, var(--primary-soft), #fff 62%);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}

.empty-icon .nx-icon {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

.star-row {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.star {
  color: #d5d0c4;
  display: inline-flex;
  line-height: 0;
}

.star.is-on {
  color: var(--accent, #b45309);
}

.star .nx-icon {
  vertical-align: 0;
}

.header-search-icon .nx-icon,
.btn-icon .nx-icon,
.icon-btn .nx-icon {
  display: block;
}

.input-action [data-icon-show],
.input-action [data-icon-hide] {
  display: inline-flex;
  line-height: 0;
}

.input-action [hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .nx-icon {
    transition: none;
  }
}