/* ===================================
   Icons System - Qatar Seen Jeem
   استبدال الإيموجي بالصور
   =================================== */

/* Icon Base Style */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: 8px;
}

.icon-large {
    width: 48px;
    height: 48px;
}

.icon-medium {
    width: 32px;
    height: 32px;
}

.icon-small {
    width: 20px;
    height: 20px;
}

/* Mode Icons */
.icon-wheel {
    background-image: url('/images/wheel.png');
}

.icon-team {
    background-image: url('/images/team.png');
}

.icon-settings {
    background-image: url('/images/settings.png');
}

/* Action Icons */
.icon-add {
    background-image: url('/images/add.png');
}

.icon-delete {
    background-image: url('/images/delete.png');
}

.icon-play {
    background-image: url('/images/play.png');
}

.icon-reset {
    background-image: url('/images/reset.png');
}

.icon-home {
    background-image: url('/images/home.png');
}

.icon-spin {
    background-image: url('/images/spin.png');
}

.icon-auto {
    background-image: url('/images/auto.png');
}

.icon-edit {
    background-image: url('/images/edit.png');
}

.icon-target {
    background-image: url('/images/target.png');
}

.icon-back {
    background-image: url('/images/back.png');
}

/* Help Tools Icons */
.icon-audience {
    background-image: url('/images/audience.png');
}

.icon-phone {
    background-image: url('/images/phone.png');
}

.icon-fifty {
    background-image: url('/images/fifty.png');
}

/* Fallback: إذا لم تكن الصورة موجودة، استخدم الإيموجي */
.icon-wheel::before { content: '🎡'; }
.icon-team::before { content: '👥'; }
.icon-settings::before { content: '⚙️'; }
.icon-add::before { content: '➕'; }
.icon-delete::before { content: '🗑️'; }
.icon-play::before { content: '🎮'; }
.icon-reset::before { content: '🔄'; }
.icon-home::before { content: '🏠'; }
.icon-spin::before { content: '🎡'; }
.icon-auto::before { content: '⚡'; }
.icon-edit::before { content: '📝'; }
.icon-target::before { content: '🎯'; }
.icon-back::before { content: '◀️'; }
.icon-audience::before { content: '👥'; }
.icon-phone::before { content: '📞'; }
.icon-fifty::before { content: '✂️'; }

/* Hide ::before when image loads */
.icon[style*="background-image"]::before {
    content: '';
}