offer card

<style>
  .main-product__block+.main-product__block {
    margin-top: 30px;
  }

  .offer-cards12 {
    max-width: 520px;
    /* margin: 18px auto 0; */
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .offer-cards12__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }

  .offer-card12 {
    position: relative;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px #0000000f;
    transition: all .25s ease;
    overflow: hidden;
    min-height: 120px;
    cursor: pointer;
  }

  .offer-card12.active {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px #0000001f;
  }

  .offer-card12--prepaid12 {
    background: linear-gradient(135deg, #e8fff1, #dffbeb);
    border: 2px solid #00a651;
  }

  .offer-card12--cod {
    background: #ffffff;
    border: 1px solid #e5e7eb;
  }

  .offer-flag12 {
    position: absolute;
    left: 95px;
    top: 10px;
    background: #00a651;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 5px;
    border-radius: 6px;
  }

  .offer-badge12 {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
  }

  .offer-card12--prepaid12 .offer-badge12 {
    background: #00a651;
  }

  .offer-card12--cod .offer-badge12 {
    background: #111827;
  }

  .offer-card12__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #374151;
    text-transform: uppercase;
  }

  .offer-card12__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
  }

  .offer-card12__price .now {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
  }

  .offer-card12__price .was {
    font-size: 14px;
    color: #6b7280;
    text-decoration: line-through;
  }

  .offer-card12__sub {
    font-size: 12px;
    color: #374151;
  }

  @media (max-width: 540px) {
    .offer-cards12 {
      max-width: 100%;
      /* padding: 0 8px; */
    }

    .offer-cards12__grid {
      grid-template-columns: 1fr;
    }

    .offer-card12 {
      min-height: auto;
    }
  }

  @media screen and (max-width: 767px) {
    .main-product__block+.main-product__block {
      margin-top: 20px;
    }
  }
</style>

<div class="main-product__block main-product__block-custom_liquid">
  <div class="offer-cards12">
    <div class="offer-cards12__grid">

      <!-- Prepaid -->
      <div class="offer-card12 offer-card12--prepaid12 active" data-offer="prepaid">
        <div class="offer-flag12">Best value</div>
        <div class="offer-badge12">10% OFF</div>
        <div class="offer-card12__head">
          💳 <span>Prepaid</span>
        </div>
        <div class="offer-card12__price">
          <span class="now" id="prepaid-price"></span>
          <span class="was" id="prepaid-compare"></span>
        </div>
        <div class="offer-card12__sub">10% sitewide on dresses</div>
      </div>

      <!-- COD -->
      <div class="offer-card12 offer-card12--cod" data-offer="cod">
        <div class="offer-badge12"></div>
        <div class="offer-card12__head">
          📦 <span>Cash on Delivery</span>
        </div>
        <div class="offer-card12__price">
          <span class="now" id="cod-price"></span>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {

  const prepaidCard = document.querySelector('[data-offer="prepaid"]');
  const codCard = document.querySelector('[data-offer="cod"]');

  const prepaidPriceEl = document.getElementById("prepaid-price");
  const prepaidCompareEl = document.getElementById("prepaid-compare");
  const codPriceEl = document.getElementById("cod-price");

  function formatINR(cents) {
    return new Intl.NumberFormat('en-IN', {
      style: 'currency',
      currency: 'INR',
      maximumFractionDigits: 0
    }).format(cents / 100);
  }

  function updatePrices(priceCents) {
    const prepaidPrice = Math.round(priceCents * 0.9); // 10% OFF
    prepaidPriceEl.textContent = formatINR(prepaidPrice);
    prepaidCompareEl.textContent = formatINR(priceCents);
    codPriceEl.textContent = formatINR(priceCents);
  }

  // Initial product price from Shopify
  const basePrice = {{ product.selected_or_first_available_variant.price }};
  updatePrices(basePrice);

  // Toggle Active
  prepaidCard.addEventListener("click", function () {
    prepaidCard.classList.add("active");
    codCard.classList.remove("active");
  });

  codCard.addEventListener("click", function () {
    codCard.classList.add("active");
    prepaidCard.classList.remove("active");
  });

  // Variant Change Listener
  document.addEventListener("variant:change", function (event) {
    if (event.detail.variant) {
      updatePrices(event.detail.variant.price);
    }
  });

});
</script>