<style>
  #shipping-notice-bar{
    width:100%;
    overflow:hidden;
    background:#000c7a;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.18);
    font:600 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }

  #shipping-notice-bar .ship-track{
    overflow:hidden;
    white-space:nowrap;
    width:100%;
    padding:10px 24px;
  }

  #shipping-notice-bar .ship-content{
    display:inline-flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:48px;
    will-change:transform;
    transform:translate3d(0,0,0);
    animation: shipScroll var(--ship-duration, 20s) linear infinite;
  }

  #shipping-notice-bar .ship-item{
    display:inline-block;
    white-space:nowrap;
  }

  @keyframes shipScroll{
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(calc(-1 * var(--ship-shift, 300px)),0,0); }
  }

  @media (min-width: 992px){
    #shipping-notice-bar .ship-content{
      gap:0;
      display:flex;
    }
    #shipping-notice-bar .ship-item{
      flex:0 0 100vw;
      min-width:100vw;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
    }
  }

  @media (prefers-reduced-motion: reduce){
    #shipping-notice-bar .ship-content{ animation:none; }
  }
</style>

<script>
(function(){
  if (window.__shippingNoticeInitTop) return;
  window.__shippingNoticeInitTop = true;

  if (document.getElementById('shipping-notice-bar')) return;

  const header = document.querySelector('#brx-header');
  if (!header) return;

  const text = 'Usled velikog broja porudžbina, može doći do manjeg kašnjenja u isporuci. Hvala na razumevanju!';

  // UBACUJE IZNAD HEADERA
  header.insertAdjacentHTML('beforebegin', `
    <div id="shipping-notice-bar" aria-label="Obavijest o isporuci">
      <div class="ship-track">
        <div class="ship-content" id="shipContent">
          <span class="ship-item">${text}</span>
        </div>
      </div>
    </div>
  `);

  const content = document.getElementById('shipContent');
  const bar = document.getElementById('shipping-notice-bar');
  if (!content || !bar) return;

  const speedPxPerSec = 50;

  function recalc(){
    const track = bar.querySelector('.ship-track');
    if (!track) return;

    const desktop = window.matchMedia('(min-width: 992px)').matches;
    const original = content.querySelector('.ship-item');
    if (!original) return;

    content.innerHTML = '';
    content.appendChild(original.cloneNode(true));

    const trackWidth = track.getBoundingClientRect().width;

    if (desktop){
      const second = original.cloneNode(true);
      second.setAttribute('aria-hidden', 'true');
      content.appendChild(second);

      content.style.setProperty('--ship-shift', trackWidth + 'px');
      content.style.setProperty('--ship-duration', '26s');
      return;
    }

    const gap = parseFloat(getComputedStyle(content).gap) || 0;

    const probe = original.cloneNode(true);
    content.appendChild(probe);
    const itemsNow = content.querySelectorAll('.ship-item');
    const segmentWidth = itemsNow[0].getBoundingClientRect().width + gap;

    content.removeChild(itemsNow[1]);

    const minTotal = trackWidth * 2;
    let safety = 0;

    while (content.getBoundingClientRect().width < minTotal && safety < 50){
      const clone = original.cloneNode(true);
      clone.setAttribute('aria-hidden','true');
      content.appendChild(clone);
      safety++;
    }

    content.style.setProperty('--ship-shift', segmentWidth + 'px');
    const duration = Math.max(8, segmentWidth / speedPxPerSec);
    content.style.setProperty('--ship-duration', duration + 's');
  }

  window.addEventListener('load', recalc);
  window.addEventListener('resize', recalc);
  recalc();
})();
</script>