/* تنسيق الحاوية الرئيسية */
.news-circle-list {
  border-top:7px solid #0056b3;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  list-style: none;
  counter-reset: circle-counter; 
  max-width: 75%;
  width:100%;
  padding: 20px;                 /* مسافة داخلية لحماية النص من الأطراف */
  margin: 0 auto;
  direction: rtl;
  font-family: 'Cairo', sans-serif;
  background-color: #ffffff;     /* خلفية بيضاء نقية */
}

/* تنسيق عنصر الخبر والخط الفاصل */
.news-circle-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0; /* خط فاصل ناعم جداً يناسب الخلفية البيضاء */
  background-color: #ffffff;     /* التأكيد على بياض خلفية العنصر */
}

/* إزالة الخط الفاصل من الخبر الأخير */
.news-circle-item:last-child {
  border-bottom: none;
}

/* تصميم الدائرة الرقمية المحترفة */
.news-circle-item::before {
  counter-increment: circle-counter;
  content: counter(circle-counter);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;                  
  background-color: #0056b3;       /* لون الدائرة الأزرق الاحترافي يبرز بقوة على الأبيض */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;                 
  height: 28px;                    
  border-radius: 50%;              
  margin-left: 16px;               
  flex-shrink: 0;                  
}

/* حاوية النص (العنوان والمصدر) */
.news-circle-content {
  display: flex;
  flex-direction: column;
  gap: 6px;                        
  margin-top: 2px;                 
}

/* تنسيق عنوان الخبر (الرابط) */
.news-circle-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a0dab;                /* اللون الأزرق التقليدي للروابط */
  text-decoration: none;
  text-align:right;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.news-circle-title:hover {
  color: #10086b;
  text-decoration: underline;
}

/* تنسيق مصدر الخبر */
.news-circle-source {
  font-size: 15px;
  font-weight: 400;
  color: #6c757d;                /* رمادي متناسق ومريح للعين على الخلفية البيضاء */
}