/* RTMone — أنماط أيقونات الواجهة الموحّدة (ui_icons.py)
   تُحمَّل في كل صفحة تستخدم {{ icon('...') }} */

/* 🛡️ الروابط التي لم تكن تُحدّد لوناً كانت تتكفّل الإيموجي بألوانه الخاصة،
   أما الأيقونة فترث currentColor فتظهر بأزرق المتصفح الافتراضي. نضمن لوناً
   صريحاً لأي رابط يحوي أيقونة ولم يُعرّف لونه. */
a:not([class*="btn"]):has(> .ico) { color: inherit; }
.cart-link, .cart-link:visited { color: #fff; }

.ico {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.15em;
    display: inline-block;
    /* الأيقونة ترث لون النص تلقائياً فتتناغم مع كل سياق */
    color: inherit;
    transition: transform .22s ease, opacity .22s ease;
}

/* مقاسات إضافية عند الحاجة */
.ico-sm { width: .9em;  height: .9em;  }
.ico-lg { width: 1.35em; height: 1.35em; }
.ico-xl { width: 1.8em;  height: 1.8em; }

/* تفاعل: الأيقونة داخل زر/رابط تستجيب لمرور المؤشر مع العنصر الحاوي */
button:hover > .ico,
a:hover > .ico,
.tab-btn:hover > .ico,
summary:hover > .ico { transform: scale(1.12); }

button:active > .ico,
a:active > .ico { transform: scale(.94); }

/* الأيقونة داخل عنوان لا تتحرّك (ليست عنصر تفاعل) */
h1 > .ico, h2 > .ico, h3 > .ico, h4 > .ico, label > .ico { transition: none; }

/* التبويب النشط: أيقونته أوضح قليلاً */
.tab-btn.active > .ico,
.nav-btn.active > .ico { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .ico { transition: none; }
    button:hover > .ico, a:hover > .ico,
    .tab-btn:hover > .ico, summary:hover > .ico { transform: none; }
}