/**
 * ملصقات المنتجات/الخدمات — تُستخدم في الرئيسية والمتجر وصفحة الخدمات
 */

.store-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.22rem;
    max-width: 100%;
}

.store-badge {
    display: inline-block;
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

/* جديد → أزرق */
.store-badge--new {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(37, 99, 235, 0.28));
    border: 1px solid rgba(96, 165, 250, 0.55);
    color: #dbeafe;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.22);
}

/* خصم → أحمر */
.store-badge--discount {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(185, 28, 28, 0.35));
    border: 1px solid rgba(248, 113, 113, 0.55);
    color: #fecaca;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.22);
}

/* الأكثر مبيعًا → بنفسجي */
.store-badge--bestseller {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.42), rgba(91, 33, 182, 0.38));
    border: 1px solid rgba(167, 139, 250, 0.55);
    color: #ede9fe;
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.28);
}

/* مفضل → ذهبي */
.store-badge--featured {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.38), rgba(217, 119, 6, 0.32));
    border: 1px solid rgba(251, 191, 36, 0.55);
    color: #fef3c7;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.22);
}

/* الأفضل تقييمًا — ذهبي نيون */
.store-badge--best_rated {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.42), rgba(217, 119, 6, 0.38));
    border: 1px solid rgba(253, 224, 71, 0.65);
    color: #fffbeb;
    box-shadow:
        0 0 18px rgba(251, 191, 36, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* هيكل تحميل للبطاقات (اختياري عبر class على الحاوية) */
.sp-card--skeleton .sp-card__media,
.sp-card--skeleton .sp-card__title,
.sp-card--skeleton .sp-card__desc,
.sp-card--skeleton .sp-card__foot {
    animation: store-badge-skeleton 1.1s ease-in-out infinite;
    border-radius: 10px;
}

@keyframes store-badge-skeleton {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-card--skeleton .sp-card__media,
    .sp-card--skeleton .sp-card__title,
    .sp-card--skeleton .sp-card__desc,
    .sp-card--skeleton .sp-card__foot {
        animation: none;
        opacity: 0.65;
    }
}