/* ==========================================================================
   icons.css - الاتحاد العربي للإعلام السياحي
   نظام الأيقونات الموحد - Phosphor Icons
   اللون الافتراضي: الأزرق الداكن #143488
   ممنوع استخدام أي Emojis - Phosphor Icons فقط
   ========================================================================== */

/* --------------------------------------------------------------------------
   اللون الافتراضي لجميع الأيقونات
   -------------------------------------------------------------------------- */
.ph,
[class*="ph-"] {
    color: var(--color-accent);
    font-size: 12px;
    line-height: 1;
    transition: color var(--transition-base);
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   أحجام الأيقونات
   -------------------------------------------------------------------------- */
.icon-xs {
    font-size: 14px;
}

.icon-sm {
    font-size: 16px;
}

.icon-md {
    font-size: 20px;
}

/* الافتراضي */
.icon-lg {
    font-size: 24px;
}

.icon-xl {
    font-size: 32px;
}

.icon-2xl {
    font-size: 48px;
}

/* --------------------------------------------------------------------------
   ألوان الأيقونات
   -------------------------------------------------------------------------- */

/* على خلفية داكنة */
.icon-light,
.icon-light .ph,
.icon-light [class*="ph-"] {
    color: #FFFFFF;
}

/* أيقونة نشطة أو hover */
.icon-active,
.icon-active .ph,
a:hover>.ph,
a:hover>[class*="ph-"],
button:hover>.ph,
button:hover>[class*="ph-"] {
    /*  color: var(--color-primary);*/
}

/* ألوان مباشرة */
.icon-primary {
    color: var(--color-primary);
}

.icon-secondary {
    color: var(--color-secondary);
}

.icon-accent {
    color: var(--color-accent);
}

.icon-muted {
    color: var(--color-text-secondary);
}

.icon-success {
    color: var(--color-success);
}

.icon-error {
    color: var(--color-error);
}

.icon-warning {
    color: var(--color-warning);
}

/* --------------------------------------------------------------------------
   أيقونة في دائرة (خلفية)
   -------------------------------------------------------------------------- */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-accent-light);
    transition: background-color var(--transition-base);
}

.icon-circle .ph,
.icon-circle [class*="ph-"] {
    font-size: 20px;
}

.icon-circle:hover {
    background-color: var(--color-accent);
}

.icon-circle:hover .ph,
.icon-circle:hover [class*="ph-"] {
    color: #FFFFFF;
}

/* أحجام الدوائر */
.icon-circle.icon-circle-sm {
    width: 32px;
    height: 32px;
}

.icon-circle.icon-circle-sm .ph {
    font-size: 16px;
}

.icon-circle.icon-circle-lg {
    width: 48px;
    height: 48px;
}

.icon-circle.icon-circle-lg .ph {
    font-size: 24px;
}

/* --------------------------------------------------------------------------
   أيقونة مع نص (inline)
   -------------------------------------------------------------------------- */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.icon-text .ph,
.icon-text [class*="ph-"] {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   أيقونة Loading (Spinner)
   -------------------------------------------------------------------------- */
.icon-spinner {
    animation: spin 1s linear infinite;
}