/* ========================================
   components.css
   المكونات المشتركة الصغيرة (بدون تكرار)
   ======================================== */

/* روابط التنظيف */
.clear-link {
    color: var(--blue);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* الشارات */
.badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

.badge-green {
    background: #e5f7ec;
    color: #17864a;
}

.badge-blue {
    background: #eaf2ff;
    color: #0d54e8;
}

.badge-purple {
    background: #f1eaff;
    color: #6236c9;
}

.badge-orange {
    background: #fff0df;
    color: #df6b00;
}

.badge-pink {
    background: #ffe7f0;
    color: #df1e63;
}

.badge-soft {
    background: #eef2f8;
    color: #42526f;
}

/* الأزرار المصغرة */
.mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
}

.mini-btn.view {
    background: #edf4ff;
    color: #0e58f1;
}

.mini-btn.apply {
    background: #2ca564;
    color: #fff;
}

/* شارة ساخنة */
.hot-chip {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    background: #fff;
    color: var(--blue);
    border-radius: 999px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 900;
}

.hot-chip i {
    color: #e8344c;
}

/* الحالة الفارغة */
.empty-state {
    text-align: center;
    padding: 34px;
    color: #8090ad;
}

/* ترقيم الصفحات */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px;
}

.page-link {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    text-decoration: none;
    color: #284070;
    font-weight: 800;
    background: #fff;
}

.page-link.active {
    background: var(--blue);
    color: #fff;
}
/* ========== شبكة الجامعات ========== */

/* الشاشات المتوسطة (تابلت) */
@media (max-width: 1024px) {
    .universities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* الشاشات الصغيرة (جوال) */
@media (max-width: 640px) {
    .universities-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}