/* =========================================
   News Ticker (by Licgez)
   BASE STRIP STYLES (shared)
   ========================================= */
.news-ticker {
  --ntl-speed: 30s; /* overridden inline per-instance via speed="" attribute */
  width: 100%;
  overflow: hidden;
  padding: 6px 0;
  background: #004D70; /* same color for both strips */
}
.news-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation-duration: var(--ntl-speed);
}
.news-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 40px;
  white-space: nowrap;
}
.news-title {
  color: #fff !important;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.news-author {
  color: #cfdce3;
  font-size: 13px;
}
.news-category {
  color: #cfdce3;
  font-size: 12px;
  font-style: italic;
  margin-left: 4px;
}
.news-pub-date {
  color: #cfdce3;
  font-size: 12px;
  font-style: italic;
  margin-left: 4px;
}
.news-meta {
  color: #cfdce3;
  font-size: 13px;
}
.news-sep {
  color: #ffffff;
  opacity: 0.6;
  margin-left: 20px;
}

/* Pause on hover (desktop only) */
.news-ticker:hover .news-track {
  animation-play-state: paused;
}
@media (hover: none) and (pointer: coarse) {
  .news-ticker:hover .news-track {
    animation-play-state: running;
  }
}

/* Stack spacing between strips */
.news-ticker + .news-ticker {
  margin-top: 2px;
}

/* =========================================
   DIRECTION (driven by news-dir-left / news-dir-right,
   set automatically from the "direction" or "class"
   shortcode attribute — no need to hardcode by class name)
   ========================================= */
.news-dir-left .news-track {
  animation-name: ticker-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes ticker-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.news-dir-right .news-track {
  animation-name: ticker-right;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes ticker-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
  .news-title { font-size: 14px; }
  .news-author { font-size: 11px; }
  .news-category { font-size: 10px; }
  .news-pub-date { font-size: 10px; }
  .news-sep { margin-left: 12px; }
  .news-item { margin-right: 25px; }
}

/* =========================================
   RTL VERSION (Arabic)
   ========================================= */
html[dir="rtl"] .news-ticker {
  direction: rtl;
}
html[dir="rtl"] .news-item {
  margin-left: 40px;
  margin-right: 0;
}
html[dir="rtl"] .news-category {
  margin-left: 0;
  margin-right: 4px;
}
html[dir="rtl"] .news-pub-date {
  margin-left: 0;
  margin-right: 4px;
}
html[dir="rtl"] .news-sep {
  margin-right: 20px;
  margin-left: 0;
}
html[dir="rtl"] .news-dir-left .news-track {
  animation-name: ticker-right-rtl;
}
html[dir="rtl"] .news-dir-right .news-track {
  animation-name: ticker-left-rtl;
}
@keyframes ticker-right-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
@keyframes ticker-left-rtl {
  0%   { transform: translateX(50%); }
  100% { transform: translateX(0); }
}
html[dir="rtl"] .news-ticker,
html[dir="rtl"] .news-ticker * {
  font-family: 'Cairo', sans-serif !important;
}