Popup Coupon

<style>
  /* CSS copy feedback trick using peer checkbox */
  #copy-trigger:checked ~ .copy-label-default { display: none; }
  #copy-trigger:checked ~ .copy-label-done    { display: inline; }
</style>

<!-- Modal overlay -->
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4" role="dialog" aria-modal="true" aria-labelledby="coupon-heading">
  <!-- Modal card -->
  <div class="ws-popup relative w-full max-w-sm overflow-hidden rounded-3xl bg-[var(--ws-popup-bg)] shadow-2xl">

    <!-- Close button -->
    <button
      class="absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/20 text-white transition hover:bg-black/40"
      aria-label="Close offer"
    >
      <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>

    <!-- Colored top banner -->
    <div class="bg-gradient-to-br from-violet-600 to-indigo-600 px-8 pt-10 pb-8 text-center text-white">
      <span class="inline-flex items-center gap-1.5 rounded-full bg-white/20 px-3 py-1 text-xs font-semibold uppercase tracking-wider">
        <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
        Limited offer
      </span>
      <h2 id="coupon-heading" class="mt-4 text-4xl font-extrabold tracking-tight">Get 30% OFF</h2>
      <p class="mt-2 text-sm text-white/80">Use this code at checkout before the offer expires.</p>
    </div>

    <!-- Card body -->
    <div class="px-8 py-6">
      <!-- Coupon code box with CSS copy feedback -->
      <div class="flex items-center gap-2 rounded-xl border-2 border-dashed border-[var(--ws-popup-border)] bg-[var(--ws-color-surface-alt)] px-4 py-3">
        <span class="flex-1 font-mono text-xl font-bold tracking-widest text-[var(--ws-popup-text)]">LAUNCH30</span>
        <label class="relative inline-flex cursor-pointer items-center" aria-label="Copy coupon code">
          <input id="copy-trigger" type="checkbox" class="peer sr-only">
          <span class="copy-label-default flex items-center gap-1.5 rounded-lg bg-[var(--ws-color-primary)] px-3 py-1.5 text-xs font-semibold text-white transition hover:opacity-90">
            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
            Copy
          </span>
          <span class="copy-label-done hidden items-center gap-1.5 rounded-lg bg-emerald-500 px-3 py-1.5 text-xs font-semibold text-white">
            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            Copied!
          </span>
        </label>
      </div>

      <!-- Countdown strip -->
      <div class="mt-4 flex items-center justify-center gap-2 rounded-xl bg-[var(--ws-color-surface-alt)] px-4 py-2.5">
        <svg class="h-4 w-4 text-red-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <span class="text-sm font-medium text-[var(--ws-popup-text)]">Expires in</span>
        <span class="font-mono text-sm font-bold text-red-500" aria-live="polite">02:14:38</span>
      </div>

      <!-- CTAs -->
      <div class="mt-6 space-y-3">
        <a href="#" class="block w-full rounded-xl bg-[var(--ws-color-primary)] px-4 py-3 text-center text-sm font-semibold text-white transition hover:opacity-90">
          Shop now
        </a>
        <button class="block w-full text-center text-xs text-[var(--ws-popup-text-soft)] transition hover:text-[var(--ws-popup-text)]">
          No thanks, I'll pay full price
        </button>
      </div>
    </div>

  </div>
</div>
<!-- Note: Add JS to wire up actual clipboard copy and a countdown timer.
     The copy button uses a CSS checkbox peer trick for the Copied! state visual. -->