Cookie Consent Modal

<div class="flex min-h-64 items-center justify-center">
  <button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg bg-[var(--ws-cookie-consent-action-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-cookie-consent-action-text)] shadow transition hover:opacity-90">Cookie Settings</button>
  <div class="ws-cookie-consent fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" hidden>
    <div class="mx-4 w-full max-w-lg rounded-2xl bg-[var(--ws-cookie-consent-bg)] p-6 shadow-xl">
      <h2 class="text-lg font-semibold text-[var(--ws-cookie-consent-text)]">Cookie Preferences</h2>
      <p class="mt-2 text-sm text-[var(--ws-cookie-consent-text-soft)]">Manage your cookie settings. You can enable or disable different types of cookies below.</p>
      <div class="mt-5 space-y-4">
        <div class="flex items-center justify-between rounded-lg bg-black/5 px-4 py-3">
          <div>
            <p class="text-sm font-medium text-[var(--ws-cookie-consent-text)]">Necessary</p>
            <p class="text-xs text-[var(--ws-cookie-consent-text-soft)]">Required for the website to function properly.</p>
          </div>
          <div class="relative inline-flex h-6 w-11 cursor-not-allowed items-center rounded-full bg-indigo-600">
            <span class="inline-block h-4 w-4 translate-x-6 rounded-full bg-[var(--ws-cookie-consent-bg)] transition"></span>
          </div>
        </div>
        <div class="flex items-center justify-between rounded-lg bg-black/5 px-4 py-3">
          <div>
            <p class="text-sm font-medium text-[var(--ws-cookie-consent-text)]">Analytics</p>
            <p class="text-xs text-[var(--ws-cookie-consent-text-soft)]">Help us understand how visitors interact with our site.</p>
          </div>
          <button type="button" role="switch" aria-checked="false" class="relative inline-flex h-6 w-11 items-center rounded-full bg-[var(--ws-cookie-consent-border)] transition">
            <span class="inline-block h-4 w-4 translate-x-1 rounded-full bg-[var(--ws-cookie-consent-bg)] transition"></span>
          </button>
        </div>
        <div class="flex items-center justify-between rounded-lg bg-black/5 px-4 py-3">
          <div>
            <p class="text-sm font-medium text-[var(--ws-cookie-consent-text)]">Marketing</p>
            <p class="text-xs text-[var(--ws-cookie-consent-text-soft)]">Used to deliver personalized advertisements.</p>
          </div>
          <button type="button" role="switch" aria-checked="false" class="relative inline-flex h-6 w-11 items-center rounded-full bg-[var(--ws-cookie-consent-border)] transition">
            <span class="inline-block h-4 w-4 translate-x-1 rounded-full bg-[var(--ws-cookie-consent-bg)] transition"></span>
          </button>
        </div>
      </div>
      <div class="mt-6 flex justify-end gap-3">
        <button type="button" onclick="this.closest('.ws-cookie-consent').hidden=true" class="rounded-lg border border-[var(--ws-cookie-consent-border)] px-4 py-2 text-sm font-medium text-[var(--ws-cookie-consent-text-soft)] transition hover:opacity-80">Reject All</button>
        <button type="button" onclick="this.closest('.ws-cookie-consent').hidden=true" class="rounded-lg bg-[var(--ws-cookie-consent-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-cookie-consent-action-text)] transition hover:opacity-90">Save Preferences</button>
      </div>
    </div>
  </div>
</div>