/**
 * EasyCart SME — Icon System
 * ============================================================
 * Provides a lightweight, reusable SVG icon system.
 * Icons use currentColor so they inherit CSS text color,
 * making them theme-aware (light / dark mode) automatically.
 *
 * Usage (inline via JS helper):
 *   ec.icon('cart', { size: 20, className: 'my-class' })
 *
 * Usage (CSS background-image):
 *   background-image: url('../assets/icons/cart.svg');
 * ============================================================
 */

/* ── Icon element base ────────────────────────────────────── */
.ec-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 1;
}

.ec-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Preset sizes ─────────────────────────────────────────── */
.ec-icon-xs  { width: 14px; height: 14px; }
.ec-icon-sm  { width: 16px; height: 16px; }
.ec-icon-md  { width: 20px; height: 20px; }
.ec-icon-lg  { width: 24px; height: 24px; }
.ec-icon-xl  { width: 32px; height: 32px; }
.ec-icon-2xl { width: 48px; height: 48px; }
.ec-icon-3xl { width: 64px; height: 64px; }

/* ── Color variants (use with brand palette) ──────────────── */
.ec-icon-primary { color: var(--primary, #1a2d72); }
.ec-icon-accent  { color: var(--accent,  #f4c430); }
.ec-icon-muted   { color: var(--text-muted, #64748b); }
.ec-icon-success { color: var(--success, #22c55e); }
.ec-icon-danger  { color: var(--danger,  #ef4444); }
.ec-icon-warning { color: var(--warning, #f59e0b); }
.ec-icon-white   { color: #ffffff; }

/* ── Theme-toggle button (replaces emoji) ─────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.theme-toggle .ec-icon {
  pointer-events: none;
}

/* ── Cart button icon alignment ───────────────────────────── */
.cart-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Whatsapp floating button icon ───────────────────────── */
.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-btn .ec-icon {
  width: 28px;
  height: 28px;
}

/* ── Section title icons ─────────────────────────────────── */
.section-title-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ── Value card icon ─────────────────────────────────────── */
.value-icon .ec-icon {
  width: 36px;
  height: 36px;
}

/* ── Instruction step icons ─────────────────────────────── */
.instruction-step-icon .ec-icon {
  width: 28px;
  height: 28px;
}

/* ── Notification page icon ──────────────────────────────── */
.notif-page-icon .ec-icon,
.notif-page-icon svg {
  width: 22px;
  height: 22px;
}

/* ── Empty state icon ────────────────────────────────────── */
.empty-state-icon .ec-icon {
  width: 48px;
  height: 48px;
}

/* ── Sidebar back/report icons ───────────────────────────── */
.sidebar-link .ec-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

/* ── Category title icons ────────────────────────────────── */
.category-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Pulse animation for USSD wait icon ─────────────────── */
.pulse-ussd-icon .ec-icon {
  width: 48px;
  height: 48px;
  animation: bounce 1.5s infinite alternate;
}

/* ── Button icon + text pairs ───────────────────────────── */
.btn .ec-icon {
  flex-shrink: 0;
}

.btn-icon-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Dark Mode: All SVG Icons change to Yellow (#F4C430) ──── */
[data-theme="dark"] .ec-icon,
[data-theme="dark"] .ec-icon svg,
[data-theme="dark"] svg.ec-icon {
  color: var(--accent, #F4C430) !important;
}

[data-theme="dark"] .ec-icon-primary,
[data-theme="dark"] .ec-icon-muted,
[data-theme="dark"] .ec-icon-white {
  color: var(--accent, #F4C430) !important;
}

/* Inline SVGs: turn stroke to yellow (preserving fill:none) */
[data-theme="dark"] .ec-icon svg,
[data-theme="dark"] svg {
  color: var(--accent, #F4C430) !important;
}

[data-theme="dark"] .ec-icon svg [stroke]:not([stroke="none"]),
[data-theme="dark"] svg.ec-icon [stroke]:not([stroke="none"]),
[data-theme="dark"] svg [stroke]:not([stroke="none"]) {
  stroke: var(--accent, #F4C430) !important;
}

[data-theme="dark"] .ec-icon svg [fill]:not([fill="none"]):not([fill="transparent"]),
[data-theme="dark"] svg.ec-icon [fill]:not([fill="none"]):not([fill="transparent"]),
[data-theme="dark"] svg [fill]:not([fill="none"]):not([fill="transparent"]) {
  fill: var(--accent, #F4C430) !important;
}

/* <img> tags embedding SVG icons */
[data-theme="dark"] .ec-icon img,
[data-theme="dark"] img[src*="assets/icons/"],
[data-theme="dark"] img[src$=".svg"],
[data-theme="dark"] img[src*=".svg"],
[data-theme="dark"] .notif-bell-icon img,
[data-theme="dark"] .theme-toggle img,
[data-theme="dark"] .value-icon img,
[data-theme="dark"] .section-title-icon img,
[data-theme="dark"] .instruction-step-icon img,
[data-theme="dark"] .empty-state-icon img,
[data-theme="dark"] .sidebar-link img,
[data-theme="dark"] .category-icon img,
[data-theme="dark"] .logo-icon img,
[data-theme="dark"] .pulse-ussd-icon img,
[data-theme="dark"] .btn img[src*=".svg"],
[data-theme="dark"] .badge img[src*=".svg"] {
  filter: brightness(0) saturate(100%) invert(80%) sepia(85%) saturate(850%) hue-rotate(352deg) brightness(102%) contrast(96%) !important;
  transition: filter var(--transition, 0.3s ease);
}

/* Keep floating WhatsApp round button white on green */
[data-theme="dark"] .whatsapp-btn .ec-icon img,
[data-theme="dark"] .whatsapp-btn img {
  filter: brightness(0) invert(1) !important;
}

/* Any icon fonts / FontAwesome icons */
[data-theme="dark"] i.fa,
[data-theme="dark"] i.fas,
[data-theme="dark"] i.far,
[data-theme="dark"] i.fab {
  color: var(--accent, #F4C430) !important;
}