<div id="{{ instance_id }}" class="rc-promo-toast" aria-live="polite" aria-label="{{ text_offer }}">
  <button type="button" class="rc-promo-close" aria-label="Close">×</button>
  <div class="rc-promo-topline"><span class="rc-promo-dot"></span>{{ text_offer }}</div>

  {% for promo in promotions %}
    <div class="rc-promo-product">
      <div class="rc-promo-chip">{{ promo.chip_name }}</div>

      {% if promo.special %}
        <div class="rc-promo-offer rc-promo-special">
          <div class="rc-promo-badge">-{{ promo.special.percent }}%</div>
          <div class="rc-promo-offer-main">
            <div class="rc-promo-label">{{ text_special }}</div>
            <div class="rc-promo-price"><del>{{ promo.special.base_formatted }}</del><strong>{{ promo.special.final_formatted }}</strong></div>
            {% if promo.special.date_end %}
              <div class="rc-countdown-wrap">
                <span>{{ text_ends_in }}</span>
                <div class="rc-countdown" data-end-timestamp="{{ promo.special.date_end_timestamp }}">
                  <b data-unit="days">0</b><small>{{ text_days }}</small>
                  <b data-unit="hours">00</b><small>{{ text_hours }}</small>
                  <b data-unit="minutes">00</b><small>{{ text_minutes }}</small>
                  <b data-unit="seconds">00</b><small>{{ text_seconds }}</small>
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      {% endif %}

      {% for coupon in promo.coupons %}
        <div class="rc-promo-offer rc-promo-coupon">
          <div class="rc-promo-badge rc-promo-badge-dark">{% if coupon.percent %}-{{ coupon.percent }}%{% else %}{{ coupon.value_formatted }}{% endif %}</div>
          <div class="rc-promo-offer-main">
            <div class="rc-promo-label">{{ text_coupon }}</div>
            <div class="rc-coupon-line">
              <code>{{ coupon.code }}</code>
              <button type="button" class="rc-copy-code" data-code="{{ coupon.code }}">{{ text_copy }}</button>
            </div>
            <div class="rc-promo-hint">{{ text_coupon_hint }}</div>
            {% if coupon.date_end %}
              <div class="rc-countdown-wrap">
                <span>{{ text_ends_in }}</span>
                <div class="rc-countdown" data-end-timestamp="{{ coupon.date_end_timestamp }}">
                  <b data-unit="days">0</b><small>{{ text_days }}</small>
                  <b data-unit="hours">00</b><small>{{ text_hours }}</small>
                  <b data-unit="minutes">00</b><small>{{ text_minutes }}</small>
                  <b data-unit="seconds">00</b><small>{{ text_seconds }}</small>
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  {% endfor %}
</div>

<style>
.rc-promo-toast{position:fixed;right:22px;bottom:calc(22px + var(--rc-summary-dock-height, 0px));z-index:99990;width:390px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #e7e7e7;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.24);padding:18px;max-height:78vh;overflow-y:auto;transform:translateY(28px);opacity:0;pointer-events:none;transition:transform .35s ease,opacity .35s ease;font-family:inherit}.rc-promo-toast.rc-promo-visible{transform:translateY(0);opacity:1;pointer-events:auto}.rc-promo-close{position:absolute;right:11px;top:8px;border:0;background:transparent;color:#777;font-size:25px;line-height:1;padding:4px 8px;cursor:pointer}.rc-promo-topline{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:1.25px;text-transform:uppercase;color:#5e6368;margin:0 32px 12px 0}.rc-promo-dot{width:9px;height:9px;border-radius:50%;background:#e30613;box-shadow:0 0 0 5px rgba(227,6,19,.09)}.rc-promo-product+.rc-promo-product{border-top:1px solid #eceff1;margin-top:14px;padding-top:14px}.rc-promo-chip{font-size:16px;font-weight:900;color:#111;margin-bottom:10px}.rc-promo-offer{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:12px}.rc-promo-offer+.rc-promo-offer{margin-top:8px}.rc-promo-special{background:linear-gradient(135deg,#fff3f3,#fff)}.rc-promo-coupon{background:#f5f7f9}.rc-promo-badge{min-width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e30613;color:#fff;font-weight:900;font-size:16px;box-shadow:0 7px 18px rgba(227,6,19,.25)}.rc-promo-badge-dark{background:#141414;box-shadow:0 7px 18px rgba(0,0,0,.18)}.rc-promo-offer-main{flex:1;min-width:0}.rc-promo-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#777}.rc-promo-price{display:flex;align-items:baseline;gap:8px;margin-top:2px}.rc-promo-price del{font-size:12px;color:#999}.rc-promo-price strong{font-size:21px;color:#111}.rc-coupon-line{display:flex;align-items:center;gap:8px;margin-top:5px}.rc-coupon-line code{font-size:18px;font-weight:900;letter-spacing:1px;color:#111;background:#fff;border:1px dashed #bbb;border-radius:7px;padding:5px 9px}.rc-copy-code{border:0;background:#111;color:#fff;border-radius:7px;padding:7px 9px;font-size:11px;font-weight:700;cursor:pointer}.rc-promo-hint{font-size:11px;color:#777;margin-top:5px}.rc-countdown-wrap{margin-top:8px;font-size:10px;color:#777;text-transform:uppercase;letter-spacing:.35px}.rc-countdown{display:flex;align-items:baseline;gap:4px;margin-top:3px;color:#111}.rc-countdown b{font-size:14px}.rc-countdown small{font-size:9px;color:#777;margin-right:3px}@media(max-width:600px){.rc-promo-toast{right:12px;left:12px;bottom:calc(12px + var(--rc-summary-dock-height, 0px));width:auto;max-width:none;border-radius:15px;padding:15px}.rc-promo-badge{min-width:50px;height:50px;font-size:14px}.rc-promo-price strong{font-size:19px}}
</style>

<script>
(function(){
  var root=document.getElementById('{{ instance_id }}');
  if(!root)return;
  var close=root.querySelector('.rc-promo-close');
  if(close)close.addEventListener('click',function(){root.classList.remove('rc-promo-visible');});
  function pad(v){return v<10?'0'+v:String(v);}
  function tick(el){
    var raw=parseInt(el.getAttribute('data-end-timestamp')||'0',10);
    if(!raw)return;
    var diff=raw-Date.now();
    if(diff<0)diff=0;
    var days=Math.floor(diff/86400000);diff-=days*86400000;
    var hours=Math.floor(diff/3600000);diff-=hours*3600000;
    var minutes=Math.floor(diff/60000);diff-=minutes*60000;
    var seconds=Math.floor(diff/1000);
    var map={days:String(days),hours:pad(hours),minutes:pad(minutes),seconds:pad(seconds)};
    Object.keys(map).forEach(function(k){var n=el.querySelector('[data-unit="'+k+'"]');if(n)n.textContent=map[k];});
  }
  var countdowns=root.querySelectorAll('.rc-countdown');
  function tickAll(){for(var i=0;i<countdowns.length;i++)tick(countdowns[i]);}
  tickAll();if(countdowns.length)setInterval(tickAll,1000);
  var copies=root.querySelectorAll('.rc-copy-code');
  for(var i=0;i<copies.length;i++)copies[i].addEventListener('click',function(){
    var btn=this,code=btn.getAttribute('data-code')||'';
    if(!code)return;
    if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(code).then(function(){btn.textContent='{{ text_copied|e('js') }}';setTimeout(function(){btn.textContent='{{ text_copy|e('js') }}';},1500);});}
  });
  setTimeout(function(){root.classList.add('rc-promo-visible');},650);
})();
</script>
