Discount Banner and Discount Applicator

<!-- Special Deal Banner -->
<div id="dealBanner" class="deal-banner">
  <img src="https://cdn-icons-png.flaticon.com/512/1170/1170627.png" alt="deal">
  <div class="deal-text">
    <h3>Special Discounts <span>UNLOCKED</span></h3>
    <p>Apply your discount codes.</p>
    <div class="add-btn" onclick="addToCart(this)">Apply</div>
  </div>
</div>

body {
      margin: 0;
      padding: 16px;
      font-family: 'Segoe UI', sans-serif;
      background-color: #f9f9f9;
      position: relative;
    }
    /* Cart Counter (Floating Top Right) */
    .cart-counter {
      position: fixed;
      top: 16px;
      right: 16px;
      background: #ff0066;
      color: white;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      z-index: 999;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .deal-banner {
      display:none;
      background: linear-gradient(to right, #f0f2ff, #f7f4ff);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .deal-banner img {
      width: 40px;
      height: 40px;
    }
    .deal-text h3 {
      margin: 0;
      font-size: 16px;
      color: #1e1e2f;
    }
    .deal-text h3 span {
      color: #6b46c1;
    }
    .deal-text p {
      margin: 4px 0 0;
      font-size: 13px;
      color: #555;
    }
    .scroll-container {
      display: flex;
      overflow-x: auto;
      gap: 12px;
      padding-bottom: 8px;
    }
    .product-card {
      min-width: 180px;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 6px rgba(0,0,0,0.08);
      padding: 12px;
      flex-shrink: 0;
    }
    .product-img {
      width: 100%;
      height: 120px;
      border-radius: 10px;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .rating {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background: white;
      font-size: 13px;
      padding: 2px 6px;
      border-radius: 10px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .product-info {
      margin-top: 10px;
    }
    .product-info h4 {
      font-size: 14px;
      margin: 0 0 4px;
      font-weight: 600;
    }
    .price-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }
    .price-row .price {
      color: green;
      font-weight: 600;
    }
    .price-row .old-price {
      text-decoration: line-through;
      color: #999;
    }
    .tag {
      display: inline-block;
      background-color: #10b981;
      color: white;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 6px;
      margin-top: 4px;
    }
    .add-btn {
      margin-top: 10px;
      display: inline-block;
      width: 100%;
      text-align: center;
      padding: 6px 0;
      border: 1.5px solid #ff0066;
      color: #ff0066;
      font-weight: 600;
      border-radius: 8px;
      background-color: white;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .add-btn.added {
      background-color: #ff0066;
      color: white;
      pointer-events: none;
    }

//Listen cart 
VajroSDK.listeners.onCartUpdated(() => {
  console.log('Cart updated:', VajroSDK.variable.cart);
  clearDiscounts();
});
// ✅ Globally define the addToCart function
function addToCart(button) {
  VajroSDK.actions.applyDiscount(["TESTCODE"])
    .then(() => {
      console.log("Discount Applied");
      button.classList.add("added");
      button.textContent = "Applied";
    })
    .catch((err) => {
      VajroSDK.actions.showToast({
        title: "No active Discount",
        message: "Please check if the discount is valid",
      });
    });
}
//Clearing Discounts
function clearDiscounts()
{
    VajroSDK.actions.applyDiscount([]);
}
// ✅ Show the deal banner if subtotal > 0
if (VajroSDK.variables.cart.subtotal > 0) {
  const banner = document.getElementById("dealBanner");
  if (banner) {
    banner.style.display = "flex";
  } else {
    console.warn("⚠️ dealBanner element not found.");
  }
}