/* Add custom Js styles below */ 
document.addEventListener("DOMContentLoaded", function () {
  const bar = document.createElement("div");
  bar.innerHTML = `
    <div class="lovora-marquee">
      <div class="lovora-marquee__inner">
        🎉 افتتاح متجر لوفورا | 💳 تابي وتمارا قريبًا 🤍
        &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;
        🎉 افتتاح متجر لوفورا | 💳 تابي وتمارا قريبًا 🤍
      </div>
    </div>
    <style>
      .lovora-marquee {
        background: #000;
        color: #fff;
        overflow: hidden;
        white-space: nowrap;
        padding: 10px 0;
        font-size: 17px;
        font-weight: 600;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
      }

      .lovora-marquee__inner {
        display: inline-block;
        padding-left: 100%;
        animation: lovoraMove 20s linear infinite;
      }

      @keyframes lovoraMove {
        from { transform: translateX(0); }
        to { transform: translateX(-100%); }
      }

      body {
        padding-top: 48px;
      }
    </style>
  `;
  document.body.prepend(bar);
});