/* ============================================================
   IPMCKart Icon System — premium inline-SVG replacements.
   Use:
     <svg class="ipmc-icon" width="20" height="20" aria-hidden="true">
       <use href="/assets/icons/sprite.svg#cart"/>
     </svg>
   See admin.html, product.html, etc. The sprite must be referenced via
   absolute /assets/icons/sprite.svg path because it is static-mounted in Nginx.
   ============================================================ */

.ipmc-icon {
  display: inline-block;
  vertical-align: -0.15em;
  width: 1em;
  height: 1em;
  color: currentColor;
  fill: currentColor;
  flex-shrink: 0;
  /* stroke icons use currentColor — gradient/colour cycle so simple ink */
}

/* Stroke styling lives INLINE on every <path> in the sprite (see sprite.svg).
   We deliberately do NOT force stroke: currentColor here because that
   overrides stroke="none" on fill-mode icons (whatsapp, facebook, etc.)
   and produces a 1px hairline artifact. */
.ipmc-icon use { pointer-events: none; }

/* Sizes */
.ipmc-icon.is-xs { width: 12px; height: 12px; }
.ipmc-icon.is-sm { width: 14px; height: 14px; }
.ipmc-icon.is-md { width: 18px; height: 18px; }
.ipmc-icon.is-lg { width: 24px; height: 24px; }
.ipmc-icon.is-xl { width: 32px; height: 32px; }
.ipmc-icon.is-2xl { width: 44px; height: 44px; }

/* Brand coloring helpers */
.has-text-red { color: var(--pdp-red, #e5101a); }
.has-text-green { color: var(--pdp-green, #2ea063); }
.has-text-muted { color: var(--pdp-text-3, #94888e); }
.has-text-white { color: #fff; }

/* Animations */
.ipmc-icon.is-spin {
  animation: ipmc-spin 1.2s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes ipmc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pulse micro-interaction for active notification dots */
.ipmc-icon.is-pulse {
  animation: ipmc-pulse 1.6s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes ipmc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.08); }
}

/* Icon-in-button alignment */
button > .ipmc-icon,
a > .ipmc-icon {
  margin-right: 6px;
}
button > .ipmc-icon:last-child,
a > .ipmc-icon:last-child {
  margin-right: 0;
  margin-left: 6px;
}

/* Centered stack when used as the only child */
.icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Sprite injection safety — if the sprite fails to load, hide broken refs */
.ipmc-icon[href="#"],
.ipmc-icon use[href="#"] { display: none; }

/* Responsive sizing — slightly larger on touch */
@media (max-width: 768px) {
  button .ipmc-icon.is-md,
  a.btn .ipmc-icon.is-md { width: 20px; height: 20px; }
}

/* Reduced-motion: kill spin/pulse */
@media (prefers-reduced-motion: reduce) {
  .ipmc-icon.is-spin,
  .ipmc-icon.is-pulse {
    animation: none;
  }
}

/* Make emoji-like inline marks (drawn as <svg>) integrate with text */
.emoji-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  color: currentColor;
}