.ssr-explore { font-family: Tahoma, "Segoe UI", Arial, sans-serif; background: var(--bg); padding: 55px 0 65px; }
.ssr-explore .head { max-width: 1100px; margin: 0 auto 28px; padding: 0 24px; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.ssr-explore h2 { font-size: 26px; font-weight: 800; color: #1B1B2F; margin: 0 0 6px; }
.ssr-explore .head p { color: #6E6E85; font-size: 14.5px; margin: 0; }
.ssr-nav-btns { display: flex; gap: 8px; }
.ssr-nav-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--secondary); background: #fff; color: var(--primary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; }
.ssr-nav-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.ssr-track-wrap { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.ssr-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ssr-track::-webkit-scrollbar { display: none; }
.ssr-card { flex: 0 0 250px; scroll-snap-align: start; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #EDEBFB; box-shadow: 0 6px 18px rgba(140,82,255,.07); transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; }
.ssr-card:hover { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(140,82,255,.15); }
.ssr-card-cover { height: 120px; background: linear-gradient(135deg, var(--primary), #6C3CE0); display: flex; align-items: center; justify-content: center; font-size: 34px; position: relative; overflow: hidden; }
/* الخلفية المتدرجة أعلاه تظهر فقط خلف الأيقونة النصية عند عدم وجود صورة، أو خلف الأجزاء الشفافة من صورة PNG - لا تُضاف أي خلفية بيضاء فوقها */
.ssr-card-cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center center; transform: translate(0px, 0px) scale(1); }
.ssr-card-cover .grade-badge { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.92); color: var(--primary); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; z-index: 2; }
.ssr-card-body { padding: 14px 16px 16px; }
.ssr-card-title { font-size: 14.5px; font-weight: 800; color: #1B1B2F; line-height: 1.5; min-height: 44px; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssr-card-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #6E6E85; margin-bottom: 14px; flex-wrap: wrap; }
.ssr-card-cta { display: block; text-align: center; background: var(--secondary); color: #3B2E8C; font-weight: 700; font-size: 13px; padding: 9px; border-radius: 10px; text-decoration: none; transition: .2s; }
.ssr-card-cta:hover { background: var(--primary); color: #fff; }
@media (max-width: 768px) { .ssr-card { flex: 0 0 220px; } .ssr-explore .head h2 { font-size: 20px; } .ssr-card-title { font-size: 13px; min-height: 36px; } }

/* تنسيقات الفلتر */
.ssr-filters { 
    display: flex; gap: 10px; margin: -10px auto 25px; 
    max-width: 1100px; padding: 0 24px; 
    overflow-x: auto; scrollbar-width: none; 
}
.ssr-filters::-webkit-scrollbar { display: none; }

.ssr-filter-btn { 
    background: transparent; border: 1.5px solid var(--secondary); 
    color: var(--text); padding: 7px 18px; border-radius: 20px; 
    font-size: 13.5px; font-weight: 700; cursor: pointer; 
    transition: 0.2s ease; white-space: nowrap; 
    font-family: inherit;
}

.ssr-filter-btn:hover, .ssr-filter-btn.active { 
    background: var(--primary); color: #fff; border-color: var(--primary); 
}

/* حالة التحميل أثناء الـ AJAX */
.ssr-track.ssr-loading { 
    opacity: 0.5; pointer-events: none; transition: opacity 0.3s; 
}