/* ===== Arabic RTL delivery overrides ===== */

/* Keep the runner confined to the banner and above no text overlap */
html[lang="ar"] .delivery-banner {
  overflow: hidden !important;
}

/* Ensure text/buttons sit above just in case */
html[lang="ar"] .delivery-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Flip runner, anchor to the right, and animate right->left within the banner */
html[lang="ar"] .delivery-img {
  position: absolute !important;
  top: 0 !important;
  left: auto !important;
  right: -40% !important;            /* start off-screen on the right */
  width: 100% !important;
  transform: scaleX(-1) !important;  /* flip horizontally */
  transform-origin: center;
  z-index: 1 !important;
  animation: running-cycle-rtl 20s linear infinite !important;
}

/* RTL desktop animation: move from right (off) to fully left across the banner */
@keyframes running-cycle-rtl {
  0%   { right: -40%; left: auto; }
  100% { right: 100%; left: auto; }
}

/* ---------- Mobile behavior ---------- */
/* On small screens, put the image below the buttons and stop animation */
@media (max-width: 991px) {
  html[lang="ar"] .delivery-banner {
    position: static !important;
    aspect-ratio: auto !important;
  }

  html[lang="ar"] .delivery-img {
    position: static !important;
    display: block !important;
    margin: 20px auto 0 !important;
    width: 100% !important;
    max-width: 520px !important;
    transform: scaleX(-1) !important;
    animation: none !important;
  }
}