/* تصغير حجم المؤشرات (Badges) على الموبايل */

@media (max-width: 768px) {
    /* تصغير badge الخدمة */
    .service-badge,
    .service-card .service-badge,
    article.service-card .service-badge {
        font-size: 0.5rem !important;
        padding: 0.15rem 0.4rem !important;
        border-radius: 6px !important;
        max-width: 65% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        z-index: 5 !important;
        line-height: 1.1 !important;
    }
    
    /* تصغير أيقونة badge */
    .service-badge i,
    .service-badge .fas,
    .service-badge .far {
        font-size: 0.7rem !important;
        margin-left: 4px !important;
    }
    
    [dir="ltr"] .service-badge i,
    [dir="ltr"] .service-badge .fas {
        margin-left: 0 !important;
        margin-right: 4px !important;
    }
    
    /* تصغير trust badges */
    .trust-badge,
    .trust-indicators .trust-badge {
        font-size: 0.6rem !important;
        padding: 0.25rem 0.6rem !important;
        gap: 4px !important;
    }
    
    .trust-badge i {
        font-size: 0.65rem !important;
    }
    
    /* تصغير header badge */
    .header-badge,
    .professional-header .header-badge,
    .menu-header .header-badge {
        font-size: 0.65rem !important;
        padding: 0.35rem 0.8rem !important;
        border-radius: 15px !important;
    }
    
    /* تصغير featured badge */
    .service-badge.featured,
    .service-badge.new,
    .service-badge.urgent {
        font-size: 0.5rem !important;
        padding: 0.2rem 0.45rem !important;
        top: 6px !important;
        left: 6px !important;
        border-radius: 6px !important;
    }
    
    [dir="ltr"] .service-badge.featured,
    [dir="ltr"] .service-badge.new,
    [dir="ltr"] .service-badge.urgent {
        left: 6px !important;
        right: auto !important;
    }
    
    [dir="rtl"] .service-badge.featured,
    [dir="rtl"] .service-badge.new,
    [dir="rtl"] .service-badge.urgent {
        right: 6px !important;
        left: auto !important;
    }
}

/* للشاشات الصغيرة جداً */
@media (max-width: 480px) {
    .service-badge,
    .service-card .service-badge,
    article.service-card .service-badge {
        font-size: 0.45rem !important;
        padding: 0.15rem 0.35rem !important;
        border-radius: 5px !important;
        top: 4px !important;
        left: 4px !important;
    }
    
    .service-badge i {
        font-size: 0.5rem !important;
        margin-left: 2px !important;
    }
    
    .service-badge.featured,
    .service-badge.new,
    .service-badge.urgent {
        font-size: 0.48rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    
    .trust-badge {
        font-size: 0.55rem !important;
        padding: 0.2rem 0.5rem !important;
    }
    
    .trust-badge i {
        font-size: 0.6rem !important;
    }
    
    .header-badge {
        font-size: 0.6rem !important;
        padding: 0.3rem 0.7rem !important;
    }
}

/* تحسين المسافات بعد تصغير البادج */
@media (max-width: 768px) {
    .service-card-content {
        padding-top: 0.8rem !important;
    }
    
    /* تقليل المسافة بين البادج والعنوان */
    .service-badge + .service-title,
    .service-badge ~ .service-title {
        margin-top: 0.6rem !important;
    }
}


/* التأكد من أن الأيقونة دائماً فوق البادج */
@media (max-width: 768px) {
    .service-card .icon-container,
    .service-card-content .icon-container {
        z-index: 10 !important;
        position: relative !important;
    }
    
    .service-badge {
        z-index: 5 !important;
    }
    
    /* منع تداخل البادج مع الأيقونة */
    .service-card {
        position: relative !important;
    }
    
    .service-card-content {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* للشاشات الصغيرة للغاية */
@media (max-width: 360px) {
    .service-badge,
    .service-card .service-badge {
        font-size: 0.45rem !important;
        padding: 0.15rem 0.35rem !important;
        border-radius: 5px !important;
        top: 4px !important;
        left: 4px !important;
    }
    
    .service-badge i {
        font-size: 0.5rem !important;
        margin-left: 2px !important;
    }
}