/* ══════════════════════════════════════════════════════════════════════════
 *  icons.css — Icon system base styles
 *  VERSION: 2.0.0 (Phase 3.3 — Brands support — 2026-04-20)
 * ══════════════════════════════════════════════════════════════════════════
 *
 *  Philosophy:
 *    - الأيقونات بترث اللون والحجم من الـ parent (زي FA بالظبط)
 *    - currentColor → بتاخد color الـ parent تلقائياً
 *    - em-based sizing → بتكبر وتصغر مع الـ font-size
 *    - vertical alignment → نفس الـ FA (middle baseline)
 *
 *  Usage:
 *    Outline icons (Lucide):
 *      <svg class="icon"><use href="/assets/icons/sprite.svg?v=4#bell"/></svg>
 *
 *    Brand icons (filled — Simple Icons):
 *      <svg class="icon icon-brand"><use href="/assets/icons/sprite.svg?v=4#brand-whatsapp"/></svg>
 *
 *  Size variants (optional):
 *    .icon-sm    → 0.875em (مثل fa-sm)
 *    .icon-lg    → 1.25em  (مثل fa-lg)
 *    .icon-xl    → 1.5em   (مثل fa-xl)
 *    .icon-2x    → 2em     (مثل fa-2x)
 *
 *  Color:
 *    بتتحدد من CSS color property للـ parent
 *    Outline: stroke="currentColor" fill="none" (من الـ symbol)
 *    Brand:   fill="currentColor" (من الـ symbol)
 * ══════════════════════════════════════════════════════════════════════════ */

.icon {
    /* Inherit color & size from parent */
    width: 1em;
    height: 1em;
    color: inherit;

    /* Alignment: نفس behavior الـ FA icons */
    display: inline-block;
    vertical-align: -0.125em;

    /* Outline icons (Lucide style) — default */
    stroke: currentColor;
    fill: none;

    /* منع الـ icons من تتسحب في الـ flex containers */
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
 *  Brand icons (filled — Simple Icons style)
 *  استخدم .icon-brand مع الأيقونات اللي filled (social media, payment, etc)
 * ────────────────────────────────────────────────────────────────────────── */

.icon-brand {
    /* Brand icons (Simple Icons) are filled, not outlined */
    stroke: none;
    fill: currentColor;
}

/* ──────────────────────────────────────────────────────────────────────────
 *  Size variants
 * ────────────────────────────────────────────────────────────────────────── */

.icon-sm { width: 0.875em; height: 0.875em; }
.icon-lg { width: 1.25em;  height: 1.25em;  }
.icon-xl { width: 1.5em;   height: 1.5em;   }
.icon-2x { width: 2em;     height: 2em;     }

/* ──────────────────────────────────────────────────────────────────────────
 *  Spin animation (for loaders — replaces fa-spin)
 *  Usage: <svg class="icon icon-spin">...</svg>
 * ────────────────────────────────────────────────────────────────────────── */

.icon-spin {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────────────────────────
 *  Respect prefers-reduced-motion
 * ────────────────────────────────────────────────────────────────────────── */

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