.alert-bar {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 56vw);
  height: var(--alertbar-height);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none; 
  z-index: var(--z-header);
}

.alert-bar__inner {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.alert-bar__track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation-duration: 300s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.alert-bar__track span {
  white-space: nowrap;
  font-weight: 800;
  color: var(--color-text);
  font-size: 0.9rem;
  padding: 0 12px;
}


html[lang="ar"] .alert-bar__track {
  animation-name: marquee-loop-ltr;
}

html[lang="en"] .alert-bar__track {
  animation-name: marquee-loop-rtl;
}

@keyframes marquee-loop-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@keyframes marquee-loop-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}