/* إعدادات عامة */
body {
  font-family: 'Cairo', 'Markazi Text', sans-serif;
  background-color: #eeeeee;
  color: #222;
  margin: 0;
  padding: 0;
  direction: rtl;
  line-height: 1.6;
}
body h2 { padding: 30px; }
#latestNews { padding: 30px; }

/* أحجام العناوين */
h1 { font-size: 2rem; }
@media (max-width: 600px) { h1 { font-size: 1.5rem; } }
@media (max-width: 400px) { h1 { font-size: 1rem; } }



/*_______________شريط العاجل__________________*/


body {
  margin: 0;
  font-family: Tahoma, sans-serif;
}

.breaking-news {
  background: #000;          /*    */
  border-bottom: 4px solid #ffcc00;
  border-top: 4px solid #ffcc00;   /* إضافة إطار علوي */
  color: #ffcc00;
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* يبدأ من أقصى اليمين */
  direction: rtl;               /* لأن النص عربي */
  margin: 0;
  padding: 0;                   /* نلغي الحشوة الداخلية */
  height: 40px;                 /* ارتفاع ثابت للشريط */
}

.breaking-news .label {
  background-color: #000;       /* خلفية سوداء */
  color: #fff;                  /* نص أبيض */
  width: 60px;                 /* عرض ثابت */
  height: 100%;                 /* يملأ كامل ارتفاع الشريط */
  display: flex;
  align-items: center;          /* توسيط عمودي */
  justify-content: center;      /* توسيط أفقي */
  font-weight: bold;
  font-size: 1em;
  margin: 0;                    /* بدون فراغ خارجي */
}

/* وميض الرمز */
.blink {
  animation: blinkAnim 1s infinite;
}

@keyframes blinkAnim {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.news-ticker {
  font-weight: bold;
  flex: 1;
    width: 60px;                 /* عرض ثابت */

  overflow: hidden;
  position: relative;
  height: 30px; /* ارتفاع ثابت للشريط */
}

.news-ticker ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.news-ticker li {
  position: absolute;
  opacity: 0;
  transform: translateY(100%); /* يبدأ من الأسفل */
  transition: all 0.8s ease-in-out;
  width: 100%;
  line-height: 30px;
}

.news-ticker li.active {
  opacity: 1;
  transform: translateY(0); /* يظهر في مكانه */
}

.news-ticker li.exit {
  opacity: 0;
  transform: translateY(-100%); /* يخرج للأعلى */
}