cookie-consent-gdpr 1.0.0

package/dist/cookie-consent-gdpr.cjs.js

@@ -0,0 +1,2365 @@
+/*! cookie-consent-gdpr v1.0.0 | MIT License | github.com/alexgarbacea/cookie-consent-gdpr */
+'use strict';
+
+/**
+ * Default configuration for the cookie consent banner.
+ * Every value here can be overridden by the user.
+ */
+var DEFAULTS = {
+  /**
+   * Where to mount the banner. Accepts a CSS selector or DOM element.
+   * If null, the banner appends to document.body.
+   */
+  container: null,
+
+  /**
+   * Selector or element for the "open preferences" button.
+   * Any element matching this selector will open the preferences modal on click.
+   * Elements with [data-cc-open-preferences] are also auto-bound.
+   */
+  preferencesButton: null,
+
+  /**
+   * Banner layout mode: 'bar' | 'modal' | 'popup'
+   *  - bar:   full-width bar at bottom (or top) of viewport
+   *  - modal: centered overlay demanding attention
+   *  - popup: small card at bottom-right (or configurable corner)
+   */
+  layout: 'bar',
+
+  /**
+   * Position for the banner.
+   *  - bar:   'bottom' | 'top'
+   *  - popup: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+   *  - modal: ignored (always centered)
+   */
+  position: 'bottom',
+
+  /**
+   * Whether clicking the overlay backdrop closes the banner (modal/popup modes).
+   * For strict GDPR, this should be false so users must make an explicit choice.
+   */
+  closeOnBackdrop: false,
+
+  /**
+   * Whether to show the banner immediately on page load if no consent exists.
+   */
+  autoShow: true,
+
+  /**
+   * Whether to re-show the banner when config version changes (new cookies added, etc.).
+   */
+  reconsentOnChange: true,
+
+  /**
+   * Force a modal/overlay that blocks interaction until consent is given.
+   * When true, a semi-transparent overlay covers the page.
+   */
+  forceOverlay: false,
+
+  // ─── Cookie Storage ──────────────────────────────────────────────────
+
+  cookie: {
+    /** Name of the consent cookie. */
+    name: 'cc_consent',
+    /** Cookie domain. Set to '.example.com' to share across subdomains. */
+    domain: '',
+    /** Cookie path. */
+    path: '/',
+    /** Consent expiry in days. GDPR recommends re-consent at least every 12 months. */
+    expiryDays: 365,
+    /** SameSite attribute: 'Lax' | 'Strict' | 'None' */
+    sameSite: 'Lax',
+    /** Secure flag. Should be true in production (HTTPS). */
+    secure: typeof window !== 'undefined' && window.location.protocol === 'https:',
+  },
+
+  // ─── Consent Webhook ─────────────────────────────────────────────────
+
+  webhook: {
+    /** URL to POST consent records to. Null disables the webhook. */
+    url: null,
+    /** Additional headers for the webhook request. */
+    headers: {},
+  },
+
+  // ─── Cookie Categories ───────────────────────────────────────────────
+
+  categories: {
+    necessary: {
+      enabled: true,
+      readOnly: true,
+      title: 'Strictly Necessary',
+      description:
+        'These cookies are essential for the website to function and cannot be switched off. They are usually set in response to actions you take such as setting your privacy preferences, logging in, or filling in forms.',
+      cookies: [],
+    },
+    functional: {
+      enabled: false,
+      readOnly: false,
+      title: 'Functional',
+      description:
+        'These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third-party providers whose services we have added to our pages.',
+      cookies: [],
+    },
+    analytics: {
+      enabled: false,
+      readOnly: false,
+      title: 'Analytics',
+      description:
+        'These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site.',
+      cookies: [],
+    },
+    marketing: {
+      enabled: false,
+      readOnly: false,
+      title: 'Marketing',
+      description:
+        'These cookies may be set through our site by our advertising partners. They may be used to build a profile of your interests and show you relevant adverts on other sites.',
+      cookies: [],
+    },
+  },
+
+  /**
+   * Each cookie entry in a category should have:
+   * {
+   *   name:        'cookie_name',       // Cookie name or pattern
+   *   provider:    'example.com',        // Who sets this cookie
+   *   purpose:     'Stores user...',     // What it does
+   *   expiry:      '1 year',            // How long it lasts
+   *   type:        'HTTP Cookie',       // HTTP Cookie | localStorage | sessionStorage | Pixel
+   * }
+   */
+
+  // ─── Texts (fully customizable for i18n) ─────────────────────────────
+
+  texts: {
+    bannerTitle: 'We use cookies',
+    bannerDescription:
+      'We use cookies and similar technologies to help personalise content, tailor and measure ads, and provide a better experience. By clicking "Accept All", you consent to the use of ALL cookies. You may visit "Cookie Settings" to provide controlled consent.',
+    acceptAll: 'Accept All',
+    rejectAll: 'Reject All',
+    settings: 'Cookie Settings',
+    preferencesTitle: 'Cookie Preferences',
+    preferencesDescription:
+      'When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences, or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalised web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies.',
+    save: 'Save Preferences',
+    acceptAllPreferences: 'Accept All',
+    rejectAllPreferences: 'Reject All',
+    alwaysActive: 'Always Active',
+    cookieNameLabel: 'Name',
+    cookieProviderLabel: 'Provider',
+    cookiePurposeLabel: 'Purpose',
+    cookieExpiryLabel: 'Expiry',
+    cookieTypeLabel: 'Type',
+    noCookies: 'No cookies to display.',
+    privacyPolicyLabel: 'Privacy Policy',
+    poweredBy: '',
+  },
+
+  /**
+   * Link to the site's privacy policy. Displayed in the banner if set.
+   */
+  privacyPolicyUrl: '',
+
+  // ─── Theme / Appearance ──────────────────────────────────────────────
+
+  theme: {
+    primary: '#0e6b4e',
+    primaryHover: '#0a5a40',
+    primaryText: '#ffffff',
+    background: '#ffffff',
+    text: '#333333',
+    textSecondary: '#666666',
+    border: '#e0e0e0',
+    overlay: 'rgba(0, 0, 0, 0.55)',
+    toggleOn: '#0e6b4e',
+    toggleOff: '#cccccc',
+    toggleKnob: '#ffffff',
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    fontSize: '14px',
+    borderRadius: '8px',
+    zIndex: 2147483645,
+    /** Max width for bar and popup layouts */
+    maxWidth: '1140px',
+    /** Width for popup layout */
+    popupWidth: '400px',
+  },
+
+  // ─── Callbacks ───────────────────────────────────────────────────────
+
+  /** Called when consent is first given or updated. */
+  onConsent: null,
+  /** Called when consent is revoked. */
+  onRevoke: null,
+  /** Called when a specific category is accepted. Receives category key. */
+  onAccept: null,
+  /** Called when a specific category is rejected. Receives category key. */
+  onReject: null,
+};
+
+/**
+ * Cookie detail schema for reference (used in documentation, not enforced at runtime):
+ * @typedef {Object} CookieDetail
+ * @property {string} name       - Cookie name or pattern
+ * @property {string} provider   - Domain/company that sets this cookie
+ * @property {string} purpose    - Human-readable purpose
+ * @property {string} expiry     - Duration string (e.g. '1 year', 'Session')
+ * @property {string} type       - 'HTTP Cookie' | 'localStorage' | 'sessionStorage' | 'Pixel'
+ */
+
+/**
+ * Lightweight event emitter for consent lifecycle events.
+ */
+function EventEmitter() {
+  this._listeners = {};
+}
+
+EventEmitter.prototype.on = function (event, fn) {
+  if (!this._listeners[event]) this._listeners[event] = [];
+  this._listeners[event].push(fn);
+  return this;
+};
+
+EventEmitter.prototype.off = function (event, fn) {
+  if (!this._listeners[event]) return this;
+  if (!fn) {
+    delete this._listeners[event];
+  } else {
+    this._listeners[event] = this._listeners[event].filter(function (f) {
+      return f !== fn;
+    });
+  }
+  return this;
+};
+
+EventEmitter.prototype.emit = function (event, data) {
+  if (!this._listeners[event]) return this;
+  var listeners = this._listeners[event].slice();
+  for (var i = 0; i < listeners.length; i++) {
+    try {
+      listeners[i](data);
+    } catch (e) {
+      console.error('[CookieConsent] Event handler error:', e);
+    }
+  }
+  return this;
+};
+
+/**
+ * Low-level cookie read/write/delete operations.
+ */
+
+/**
+ * Set a cookie with the given options.
+ */
+function setCookie(name, value, options) {
+  options = options || {};
+  var str = encodeURIComponent(name) + '=' + encodeURIComponent(value);
+
+  if (options.expiryDays) {
+    var date = new Date();
+    date.setTime(date.getTime() + options.expiryDays * 86400000);
+    str += '; expires=' + date.toUTCString();
+  }
+
+  str += '; path=' + (options.path || '/');
+
+  if (options.domain) {
+    str += '; domain=' + options.domain;
+  }
+
+  if (options.sameSite) {
+    str += '; SameSite=' + options.sameSite;
+  }
+
+  if (options.secure || options.sameSite === 'None') {
+    str += '; Secure';
+  }
+
+  document.cookie = str;
+}
+
+/**
+ * Read a cookie by name. Returns null if not found.
+ */
+function getCookie(name) {
+  var nameEq = encodeURIComponent(name) + '=';
+  var cookies = document.cookie.split(';');
+  for (var i = 0; i < cookies.length; i++) {
+    var c = cookies[i].trim();
+    if (c.indexOf(nameEq) === 0) {
+      return decodeURIComponent(c.substring(nameEq.length));
+    }
+  }
+  return null;
+}
+
+/**
+ * Delete a cookie by name. Domain and path must match the original cookie.
+ */
+function deleteCookie(name, options) {
+  options = options || {};
+  var str = encodeURIComponent(name) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+  str += '; path=' + (options.path || '/');
+  if (options.domain) {
+    str += '; domain=' + options.domain;
+  }
+  document.cookie = str;
+}
+
+/**
+ * Parse the consent data stored in the consent cookie.
+ * Returns null if the cookie doesn't exist or is malformed.
+ */
+function readConsentCookie(cookieName) {
+  var raw = getCookie(cookieName);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Write consent data to the consent cookie.
+ */
+function writeConsentCookie(cookieName, data, options) {
+  setCookie(cookieName, JSON.stringify(data), options);
+}
+
+/**
+ * Generate a UUID v4 string for consent record identification.
+ */
+function generateId() {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0;
+    var v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * Generate a simple hash of a string (for config versioning).
+ */
+function hashString(str) {
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    var char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash + char) | 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+
+/**
+ * Deep merge two objects. Source values overwrite target values.
+ * Arrays are replaced, not merged.
+ */
+function deepMerge(target, source) {
+  var result = Object.assign({}, target);
+  for (var key in source) {
+    if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+    if (
+      source[key] &&
+      typeof source[key] === 'object' &&
+      !Array.isArray(source[key]) &&
+      target[key] &&
+      typeof target[key] === 'object' &&
+      !Array.isArray(target[key])
+    ) {
+      result[key] = deepMerge(target[key], source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+
+/**
+ * Query a DOM element safely.
+ */
+function $(selector, parent) {
+  return (document).querySelector(selector);
+}
+
+/**
+ * Query all DOM elements safely.
+ */
+function $$(selector, parent) {
+  return Array.prototype.slice.call((document).querySelectorAll(selector));
+}
+
+/**
+ * Create a DOM element with attributes and children.
+ */
+function createElement(tag, attrs, children) {
+  var el = document.createElement(tag);
+  if (attrs) {
+    for (var key in attrs) {
+      if (key === 'className') {
+        el.className = attrs[key];
+      } else if (key === 'innerHTML') {
+        el.innerHTML = attrs[key];
+      } else if (key === 'textContent') {
+        el.textContent = attrs[key];
+      } else if (key.indexOf('on') === 0) {
+        el.addEventListener(key.substring(2).toLowerCase(), attrs[key]);
+      } else {
+        el.setAttribute(key, attrs[key]);
+      }
+    }
+  }
+  if (children) {
+    if (typeof children === 'string') {
+      el.textContent = children;
+    } else if (Array.isArray(children)) {
+      children.forEach(function (child) {
+        if (child) el.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+      });
+    } else {
+      el.appendChild(children);
+    }
+  }
+  return el;
+}
+
+/**
+ * Escape HTML special characters to prevent XSS.
+ */
+function escapeHtml(str) {
+  if (!str) return '';
+  var div = document.createElement('div');
+  div.appendChild(document.createTextNode(str));
+  return div.innerHTML;
+}
+
+/**
+ * Trap focus within a container element (for modal accessibility).
+ * Returns a cleanup function.
+ */
+function trapFocus(container) {
+  var focusable = container.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  var first = focusable[0];
+  var last = focusable[focusable.length - 1];
+
+  function handler(e) {
+    if (e.key !== 'Tab') return;
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  }
+
+  container.addEventListener('keydown', handler);
+  if (first) first.focus();
+
+  return function () {
+    container.removeEventListener('keydown', handler);
+  };
+}
+
+/**
+ * ConsentManager handles all consent state: loading, saving, validating,
+ * expiry checking, config versioning, and webhook dispatch.
+ */
+function ConsentManager(config, emitter) {
+  this.config = config;
+  this.emitter = emitter;
+  this.consent = null;
+  this._configHash = this._computeConfigHash();
+}
+
+/**
+ * Compute a hash of the cookie categories config.
+ * Used to detect when the site owner changes their cookie configuration,
+ * which requires re-consent under GDPR.
+ */
+ConsentManager.prototype._computeConfigHash = function () {
+  var cats = this.config.categories;
+  var keys = Object.keys(cats).sort();
+  var repr = keys
+    .map(function (k) {
+      var c = cats[k];
+      var cookieNames = (c.cookies || []).map(function (ck) { return ck.name; }).sort().join(',');
+      return k + ':' + cookieNames;
+    })
+    .join('|');
+  return hashString(repr);
+};
+
+/**
+ * Load existing consent from the cookie. Returns the consent object or null.
+ */
+ConsentManager.prototype.load = function () {
+  this.consent = readConsentCookie(this.config.cookie.name);
+  return this.consent;
+};
+
+/**
+ * Check if the user has a valid (non-expired, current-version) consent.
+ */
+ConsentManager.prototype.hasValid = function () {
+  if (!this.consent) return false;
+
+  // Check expiry
+  if (this.consent.expires) {
+    if (new Date(this.consent.expires) <= new Date()) {
+      return false;
+    }
+  }
+
+  // Check config version change
+  if (this.config.reconsentOnChange && this.consent.configHash !== this._configHash) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * Save consent for the given categories map.
+ * @param {Object} categories - e.g. { necessary: true, analytics: false, ... }
+ */
+ConsentManager.prototype.save = function (categories) {
+  var now = new Date();
+  var expires = new Date(now.getTime() + this.config.cookie.expiryDays * 86400000);
+
+  // Necessary is always true
+  categories.necessary = true;
+
+  this.consent = {
+    id: generateId(),
+    timestamp: now.toISOString(),
+    categories: categories,
+    configHash: this._configHash,
+    expires: expires.toISOString(),
+    url: window.location.href,
+    userAgent: navigator.userAgent,
+  };
+
+  writeConsentCookie(this.config.cookie.name, this.consent, {
+    expiryDays: this.config.cookie.expiryDays,
+    domain: this.config.cookie.domain,
+    path: this.config.cookie.path,
+    sameSite: this.config.cookie.sameSite,
+    secure: this.config.cookie.secure,
+  });
+
+  this.emitter.emit('consent:given', this.consent);
+
+  // Fire per-category events
+  var cfg = this.config.categories;
+  for (var key in categories) {
+    if (!Object.prototype.hasOwnProperty.call(categories, key)) continue;
+    if (cfg[key] && cfg[key].readOnly) continue;
+    if (categories[key]) {
+      this.emitter.emit('category:accepted', key);
+      if (typeof this.config.onAccept === 'function') this.config.onAccept(key);
+    } else {
+      this.emitter.emit('category:rejected', key);
+      if (typeof this.config.onReject === 'function') this.config.onReject(key);
+    }
+  }
+
+  if (typeof this.config.onConsent === 'function') {
+    this.config.onConsent(this.consent);
+  }
+
+  // Send webhook
+  this._sendWebhook(this.consent);
+
+  return this.consent;
+};
+
+/**
+ * Revoke all consent and delete the consent cookie.
+ */
+ConsentManager.prototype.revoke = function () {
+  var prev = this.consent;
+  this.consent = null;
+  deleteCookie(this.config.cookie.name, {
+    domain: this.config.cookie.domain,
+    path: this.config.cookie.path,
+  });
+  this.emitter.emit('consent:revoked', prev);
+  if (typeof this.config.onRevoke === 'function') {
+    this.config.onRevoke(prev);
+  }
+};
+
+/**
+ * Get the current consent state. Returns null if no consent.
+ */
+ConsentManager.prototype.get = function () {
+  return this.consent;
+};
+
+/**
+ * Check if a specific category is consented.
+ */
+ConsentManager.prototype.hasCategory = function (category) {
+  if (!this.consent || !this.consent.categories) return false;
+  return !!this.consent.categories[category];
+};
+
+/**
+ * Build an "accept all" categories map.
+ */
+ConsentManager.prototype.acceptAllMap = function () {
+  var map = {};
+  for (var key in this.config.categories) {
+    if (Object.prototype.hasOwnProperty.call(this.config.categories, key)) {
+      map[key] = true;
+    }
+  }
+  return map;
+};
+
+/**
+ * Build a "reject all" categories map (only necessary = true).
+ */
+ConsentManager.prototype.rejectAllMap = function () {
+  var map = {};
+  for (var key in this.config.categories) {
+    if (Object.prototype.hasOwnProperty.call(this.config.categories, key)) {
+      map[key] = !!this.config.categories[key].readOnly;
+    }
+  }
+  return map;
+};
+
+/**
+ * Send consent record to the configured webhook endpoint.
+ */
+ConsentManager.prototype._sendWebhook = function (record) {
+  if (!this.config.webhook || !this.config.webhook.url) return;
+
+  var payload = {
+    consentId: record.id,
+    timestamp: record.timestamp,
+    categories: record.categories,
+    url: record.url,
+    userAgent: record.userAgent,
+    configHash: record.configHash,
+  };
+
+  var headers = Object.assign({ 'Content-Type': 'application/json' }, this.config.webhook.headers || {});
+
+  try {
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', this.config.webhook.url, true);
+    for (var h in headers) {
+      if (Object.prototype.hasOwnProperty.call(headers, h)) {
+        xhr.setRequestHeader(h, headers[h]);
+      }
+    }
+    xhr.send(JSON.stringify(payload));
+  } catch (e) {
+    console.warn('[CookieConsent] Webhook failed:', e);
+  }
+};
+
+/**
+ * ScriptBlocker manages the activation and deactivation of page elements
+ * (scripts, iframes, images, etc.) based on consent categories.
+ *
+ * Usage in HTML:
+ *   <script type="text/plain" data-cookiecategory="analytics" src="..."></script>
+ *   <iframe data-cookiecategory="marketing" data-src="https://..." src="about:blank"></iframe>
+ *   <img data-cookiecategory="analytics" data-src="https://pixel.example.com/t.gif" />
+ */
+function ScriptBlocker(emitter) {
+  this.emitter = emitter;
+  this._activated = {};
+  this._observer = null;
+}
+
+/**
+ * Activate all elements belonging to the given categories.
+ * @param {Object} categories - e.g. { analytics: true, marketing: false }
+ */
+ScriptBlocker.prototype.activate = function (categories) {
+  for (var cat in categories) {
+    if (!Object.prototype.hasOwnProperty.call(categories, cat)) continue;
+    if (categories[cat] && !this._activated[cat]) {
+      this._activateCategory(cat);
+      this._activated[cat] = true;
+    }
+  }
+};
+
+/**
+ * Activate all blocked elements for a specific category.
+ */
+ScriptBlocker.prototype._activateCategory = function (category) {
+  var selector = '[data-cookiecategory="' + category + '"]';
+  var elements = $$(selector);
+
+  for (var i = 0; i < elements.length; i++) {
+    this._activateElement(elements[i]);
+  }
+};
+
+/**
+ * Activate a single blocked element.
+ */
+ScriptBlocker.prototype._activateElement = function (el) {
+  var tag = el.tagName.toLowerCase();
+
+  if (tag === 'script') {
+    this._activateScript(el);
+  } else if (el.hasAttribute('data-src')) {
+    // For iframes, images, and any element with data-src
+    el.setAttribute('src', el.getAttribute('data-src'));
+    el.removeAttribute('data-src');
+  }
+};
+
+/**
+ * Activate a blocked script element.
+ * Scripts with type="text/plain" need to be cloned because browsers
+ * won't execute them even if you change the type back.
+ */
+ScriptBlocker.prototype._activateScript = function (el) {
+  var clone = document.createElement('script');
+
+  // Copy all attributes
+  for (var i = 0; i < el.attributes.length; i++) {
+    var attr = el.attributes[i];
+    if (attr.name === 'type') {
+      clone.setAttribute('type', 'text/javascript');
+    } else {
+      clone.setAttribute(attr.name, attr.value);
+    }
+  }
+
+  // If no type was set on original (shouldn't happen in normal flow)
+  if (!clone.hasAttribute('type')) {
+    clone.setAttribute('type', 'text/javascript');
+  }
+
+  // Copy inline script content
+  if (el.textContent) {
+    clone.textContent = el.textContent;
+  }
+
+  // Replace original with clone
+  if (el.parentNode) {
+    el.parentNode.replaceChild(clone, el);
+  }
+};
+
+/**
+ * Observe DOM for dynamically added elements with data-cookiecategory.
+ * Only activates elements whose categories have already been consented to.
+ * @param {Object} categories - current consent categories
+ */
+ScriptBlocker.prototype.observe = function (categories) {
+  var self = this;
+
+  if (this._observer) this._observer.disconnect();
+
+  if (typeof MutationObserver === 'undefined') return;
+
+  this._observer = new MutationObserver(function (mutations) {
+    for (var i = 0; i < mutations.length; i++) {
+      var nodes = mutations[i].addedNodes;
+      for (var j = 0; j < nodes.length; j++) {
+        var node = nodes[j];
+        if (node.nodeType !== 1) continue;
+        var cat = node.getAttribute && node.getAttribute('data-cookiecategory');
+        if (cat && categories[cat]) {
+          self._activateElement(node);
+        }
+      }
+    }
+  });
+
+  this._observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+  });
+};
+
+/**
+ * Stop observing DOM mutations.
+ */
+ScriptBlocker.prototype.destroy = function () {
+  if (this._observer) {
+    this._observer.disconnect();
+    this._observer = null;
+  }
+  this._activated = {};
+};
+
+/**
+ * SVG chevron icon for accessibility-friendly dropdowns.
+ */
+var CHEVRON_SVG =
+  '<svg class="cc-category__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
+
+/**
+ * Banner handles the initial consent banner UI.
+ * Supports three layout modes: bar, modal, popup.
+ */
+function Banner(config, emitter) {
+  this.config = config;
+  this.emitter = emitter;
+  this.el = null;
+  this.overlayEl = null;
+  this._visible = false;
+}
+
+/**
+ * Build and inject the banner DOM.
+ */
+Banner.prototype.render = function (container) {
+  var cfg = this.config;
+  var texts = cfg.texts;
+  var layout = cfg.layout;
+  var position = cfg.position || 'bottom';
+
+  // Create overlay (for modal/popup or when forceOverlay)
+  this.overlayEl = createElement('div', { className: 'cc-overlay', role: 'presentation' });
+
+  // Build layout classes
+  var bannerClass = 'cc-banner';
+  if (layout === 'bar') {
+    bannerClass += ' cc-banner--bar cc-banner--bar-' + position;
+  } else if (layout === 'modal') {
+    bannerClass += ' cc-banner--modal';
+  } else if (layout === 'popup') {
+    bannerClass += ' cc-banner--popup cc-banner--popup-' + position;
+  }
+
+  // Build banner
+  this.el = createElement('div', {
+    className: bannerClass,
+    role: 'dialog',
+    'aria-modal': layout === 'modal' ? 'true' : 'false',
+    'aria-label': texts.bannerTitle,
+  });
+
+  var inner = createElement('div', { className: 'cc-banner__inner' });
+
+  // Title
+  inner.appendChild(createElement('div', { className: 'cc-banner__title' }, texts.bannerTitle));
+
+  // Description with optional privacy policy link
+  var descText = escapeHtml(texts.bannerDescription);
+  if (cfg.privacyPolicyUrl) {
+    descText +=
+      ' <a href="' +
+      escapeHtml(cfg.privacyPolicyUrl) +
+      '" target="_blank" rel="noopener noreferrer">' +
+      escapeHtml(texts.privacyPolicyLabel) +
+      '</a>';
+  }
+  inner.appendChild(createElement('div', { className: 'cc-banner__text', innerHTML: descText }));
+
+  // Action buttons
+  var actions = createElement('div', { className: 'cc-banner__actions' });
+  var self = this;
+
+  // Accept All button
+  var acceptBtn = createElement(
+    'button',
+    {
+      className: 'cc-btn cc-btn--primary',
+      type: 'button',
+      'aria-label': texts.acceptAll,
+      onClick: function () {
+        self.emitter.emit('banner:acceptAll');
+      },
+    },
+    texts.acceptAll
+  );
+
+  // Reject All button (GDPR requires equal prominence)
+  var rejectBtn = createElement(
+    'button',
+    {
+      className: 'cc-btn cc-btn--secondary',
+      type: 'button',
+      'aria-label': texts.rejectAll,
+      onClick: function () {
+        self.emitter.emit('banner:rejectAll');
+      },
+    },
+    texts.rejectAll
+  );
+
+  // Settings button
+  var settingsBtn = createElement(
+    'button',
+    {
+      className: 'cc-btn cc-btn--link',
+      type: 'button',
+      'aria-label': texts.settings,
+      onClick: function () {
+        self.emitter.emit('banner:settings');
+      },
+    },
+    texts.settings
+  );
+
+  actions.appendChild(acceptBtn);
+  actions.appendChild(rejectBtn);
+  actions.appendChild(settingsBtn);
+  inner.appendChild(actions);
+  this.el.appendChild(inner);
+
+  // Powered by (optional)
+  if (texts.poweredBy) {
+    var powered = createElement('div', {
+      className: 'cc-banner__powered',
+      innerHTML: escapeHtml(texts.poweredBy),
+    });
+    powered.style.cssText =
+      'text-align:center;font-size:0.75em;padding:0 24px 12px;opacity:0.5;';
+    this.el.appendChild(powered);
+  }
+
+  container.appendChild(this.overlayEl);
+  container.appendChild(this.el);
+};
+
+/**
+ * Show the banner with animation.
+ */
+Banner.prototype.show = function () {
+  if (!this.el || this._visible) return;
+  this._visible = true;
+  var self = this;
+  // Force reflow for animation
+  void this.el.offsetHeight;
+  requestAnimationFrame(function () {
+    self.el.classList.add('cc-banner--visible');
+    if (
+      self.config.layout === 'modal' ||
+      self.config.layout === 'popup' ||
+      self.config.forceOverlay
+    ) {
+      self.overlayEl.classList.add('cc-overlay--visible');
+    }
+  });
+  this.emitter.emit('banner:shown');
+};
+
+/**
+ * Hide the banner with animation.
+ */
+Banner.prototype.hide = function () {
+  if (!this.el || !this._visible) return;
+  this._visible = false;
+  this.el.classList.remove('cc-banner--visible');
+  this.overlayEl.classList.remove('cc-overlay--visible');
+  this.emitter.emit('banner:hidden');
+};
+
+/**
+ * Check if the banner is currently visible.
+ */
+Banner.prototype.isVisible = function () {
+  return this._visible;
+};
+
+/**
+ * Remove banner from DOM and clean up.
+ */
+Banner.prototype.destroy = function () {
+  if (this.el && this.el.parentNode) this.el.parentNode.removeChild(this.el);
+  if (this.overlayEl && this.overlayEl.parentNode)
+    this.overlayEl.parentNode.removeChild(this.overlayEl);
+  this.el = null;
+  this.overlayEl = null;
+  this._visible = false;
+};
+
+/**
+ * Preferences modal with category accordions and per-cookie detail tables.
+ */
+function Preferences(config, emitter) {
+  this.config = config;
+  this.emitter = emitter;
+  this.el = null;
+  this._visible = false;
+  this._releaseFocus = null;
+  this._toggles = {};
+  this._previousFocus = null;
+}
+
+/**
+ * Build and inject the preferences modal DOM.
+ */
+Preferences.prototype.render = function (container, currentConsent) {
+  var cfg = this.config;
+  var texts = cfg.texts;
+  var self = this;
+
+  // Root wrapper
+  this.el = createElement('div', {
+    className: 'cc-preferences',
+    role: 'dialog',
+    'aria-modal': 'true',
+    'aria-label': texts.preferencesTitle,
+  });
+
+  // Overlay backdrop
+  var overlay = createElement('div', { className: 'cc-preferences__overlay' });
+  this.el.appendChild(overlay);
+
+  // Dialog container
+  var dialog = createElement('div', { className: 'cc-preferences__dialog' });
+
+  // Header
+  var header = createElement('div', { className: 'cc-preferences__header' });
+  header.appendChild(createElement('div', { className: 'cc-preferences__title' }, texts.preferencesTitle));
+  header.appendChild(
+    createElement('div', { className: 'cc-preferences__description' }, texts.preferencesDescription)
+  );
+  dialog.appendChild(header);
+
+  // Body (scrollable)
+  var body = createElement('div', { className: 'cc-preferences__body' });
+  this._renderCategories(body, currentConsent);
+  dialog.appendChild(body);
+
+  // Footer with actions
+  var footer = createElement('div', { className: 'cc-preferences__footer' });
+
+  var rejectAllBtn = createElement(
+    'button',
+    {
+      className: 'cc-btn cc-btn--secondary',
+      type: 'button',
+      onClick: function () {
+        self.emitter.emit('preferences:rejectAll');
+      },
+    },
+    texts.rejectAllPreferences
+  );
+
+  var acceptAllBtn = createElement(
+    'button',
+    {
+      className: 'cc-btn cc-btn--secondary',
+      type: 'button',
+      onClick: function () {
+        self.emitter.emit('preferences:acceptAll');
+      },
+    },
+    texts.acceptAllPreferences
+  );
+
+  var saveBtn = createElement(
+    'button',
+    {
+      className: 'cc-btn cc-btn--primary',
+      type: 'button',
+      onClick: function () {
+        self.emitter.emit('preferences:save', self.getSelected());
+      },
+    },
+    texts.save
+  );
+
+  footer.appendChild(rejectAllBtn);
+  footer.appendChild(acceptAllBtn);
+  footer.appendChild(saveBtn);
+  dialog.appendChild(footer);
+
+  this.el.appendChild(dialog);
+  container.appendChild(this.el);
+
+  // Close on Escape
+  this._escHandler = function (e) {
+    if (e.key === 'Escape' && self._visible) {
+      self.emitter.emit('preferences:close');
+    }
+  };
+  document.addEventListener('keydown', this._escHandler);
+};
+
+/**
+ * Render each cookie category as an accordion section.
+ */
+Preferences.prototype._renderCategories = function (body, currentConsent) {
+  var cats = this.config.categories;
+  var texts = this.config.texts;
+  var consentCats = (currentConsent && currentConsent.categories) || {};
+
+  for (var key in cats) {
+    if (!Object.prototype.hasOwnProperty.call(cats, key)) continue;
+    var cat = cats[key];
+
+    // Determine initial toggle state:
+    // If readOnly → always true
+    // If user has existing consent → use that
+    // Otherwise → use default `enabled` value (which should be false for non-necessary per GDPR)
+    var isChecked = cat.readOnly ? true : consentCats[key] != null ? !!consentCats[key] : !!cat.enabled;
+
+    var section = createElement('div', { className: 'cc-category' });
+
+    // Header (clickable for expand/collapse)
+    var headerBtn = createElement('button', {
+      className: 'cc-category__header',
+      type: 'button',
+      'aria-expanded': 'false',
+    });
+
+    var headerLeft = createElement('div', { className: 'cc-category__header-left' });
+    headerLeft.appendChild(createElement('span', { innerHTML: CHEVRON_SVG }));
+    headerLeft.appendChild(createElement('span', { className: 'cc-category__title' }, escapeHtml(cat.title)));
+
+    var cookieCount = (cat.cookies || []).length;
+    if (cookieCount > 0) {
+      headerLeft.appendChild(
+        createElement('span', { className: 'cc-category__count' }, '(' + cookieCount + ')')
+      );
+    }
+
+    headerBtn.appendChild(headerLeft);
+
+    // Toggle or "Always Active" label
+    if (cat.readOnly) {
+      headerBtn.appendChild(
+        createElement('span', { className: 'cc-category__always-active' }, texts.alwaysActive)
+      );
+    } else {
+      var toggle = this._createToggle(key, isChecked);
+      headerBtn.appendChild(toggle);
+    }
+
+    section.appendChild(headerBtn);
+
+    // Body (collapsible)
+    var catBody = createElement('div', { className: 'cc-category__body' });
+    catBody.appendChild(
+      createElement('div', { className: 'cc-category__description' }, escapeHtml(cat.description))
+    );
+
+    // Cookie details
+    this._renderCookieTable(catBody, cat.cookies || [], texts);
+
+    section.appendChild(catBody);
+
+    // Wire up accordion toggle
+    (function (sec, btn) {
+      btn.addEventListener('click', function (e) {
+        // Don't toggle accordion if clicking the toggle switch itself
+        if (e.target.closest('.cc-toggle')) return;
+        var expanded = sec.classList.toggle('cc-category--expanded');
+        btn.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+      });
+    })(section, headerBtn);
+
+    body.appendChild(section);
+  }
+};
+
+/**
+ * Create a toggle switch element.
+ */
+Preferences.prototype._createToggle = function (categoryKey, checked) {
+  var toggle = createElement('label', { className: 'cc-toggle' });
+  var input = createElement('input', {
+    className: 'cc-toggle__input',
+    type: 'checkbox',
+    'aria-label': this.config.categories[categoryKey].title,
+  });
+  input.checked = checked;
+  toggle.appendChild(input);
+  toggle.appendChild(createElement('span', { className: 'cc-toggle__slider' }));
+
+  // Prevent click on toggle from bubbling to accordion header
+  toggle.addEventListener('click', function (e) {
+    e.stopPropagation();
+  });
+
+  this._toggles[categoryKey] = input;
+  return toggle;
+};
+
+/**
+ * Render the cookie detail rows for a category.
+ */
+Preferences.prototype._renderCookieTable = function (parent, cookies, texts) {
+  var wrapper = createElement('div', { className: 'cc-cookies' });
+
+  if (!cookies || cookies.length === 0) {
+    wrapper.appendChild(createElement('div', { className: 'cc-cookies__empty' }, texts.noCookies));
+    parent.appendChild(wrapper);
+    return;
+  }
+
+  for (var i = 0; i < cookies.length; i++) {
+    var ck = cookies[i];
+    var item = createElement('div', { className: 'cc-cookie-item' });
+
+    var fields = [
+      { label: texts.cookieNameLabel, value: ck.name },
+      { label: texts.cookieProviderLabel, value: ck.provider },
+      { label: texts.cookiePurposeLabel, value: ck.purpose },
+      { label: texts.cookieExpiryLabel, value: ck.expiry },
+      { label: texts.cookieTypeLabel, value: ck.type },
+    ];
+
+    for (var j = 0; j < fields.length; j++) {
+      if (!fields[j].value) continue;
+      var row = createElement('div', { className: 'cc-cookie-item__row' });
+      row.appendChild(createElement('div', { className: 'cc-cookie-item__label' }, escapeHtml(fields[j].label)));
+      row.appendChild(
+        createElement('div', { className: 'cc-cookie-item__value' }, escapeHtml(fields[j].value))
+      );
+      item.appendChild(row);
+    }
+
+    wrapper.appendChild(item);
+  }
+
+  parent.appendChild(wrapper);
+};
+
+/**
+ * Get the currently selected categories from the toggle switches.
+ */
+Preferences.prototype.getSelected = function () {
+  var result = {};
+  var cats = this.config.categories;
+  for (var key in cats) {
+    if (!Object.prototype.hasOwnProperty.call(cats, key)) continue;
+    if (cats[key].readOnly) {
+      result[key] = true;
+    } else if (this._toggles[key]) {
+      result[key] = this._toggles[key].checked;
+    } else {
+      result[key] = false;
+    }
+  }
+  return result;
+};
+
+/**
+ * Update toggle states (used when acceptAll/rejectAll is clicked from preferences).
+ */
+Preferences.prototype.setAll = function (value) {
+  var cats = this.config.categories;
+  for (var key in this._toggles) {
+    if (Object.prototype.hasOwnProperty.call(this._toggles, key)) {
+      if (cats[key] && !cats[key].readOnly) {
+        this._toggles[key].checked = value;
+      }
+    }
+  }
+};
+
+/**
+ * Show the preferences modal.
+ */
+Preferences.prototype.show = function () {
+  if (!this.el || this._visible) return;
+  this._visible = true;
+  this._previousFocus = document.activeElement;
+  var self = this;
+  void this.el.offsetHeight;
+  requestAnimationFrame(function () {
+    self.el.classList.add('cc-preferences--visible');
+    // Trap focus for accessibility
+    var dialog = self.el.querySelector('.cc-preferences__dialog');
+    if (dialog) self._releaseFocus = trapFocus(dialog);
+  });
+  this.emitter.emit('preferences:shown');
+};
+
+/**
+ * Hide the preferences modal.
+ */
+Preferences.prototype.hide = function () {
+  if (!this.el || !this._visible) return;
+  this._visible = false;
+  this.el.classList.remove('cc-preferences--visible');
+  if (this._releaseFocus) {
+    this._releaseFocus();
+    this._releaseFocus = null;
+  }
+  // Restore focus to previous element
+  if (this._previousFocus && this._previousFocus.focus) {
+    this._previousFocus.focus();
+  }
+  this.emitter.emit('preferences:hidden');
+};
+
+/**
+ * Check if visible.
+ */
+Preferences.prototype.isVisible = function () {
+  return this._visible;
+};
+
+/**
+ * Remove from DOM and clean up.
+ */
+Preferences.prototype.destroy = function () {
+  if (this._escHandler) document.removeEventListener('keydown', this._escHandler);
+  if (this._releaseFocus) this._releaseFocus();
+  if (this.el && this.el.parentNode) this.el.parentNode.removeChild(this.el);
+  this.el = null;
+  this._visible = false;
+  this._toggles = {};
+};
+
+var CSS = /* css */ `
+/* ═══════════════════════════════════════════════════════════════════════════
+   GDPR Cookie Consent — Styles
+   All rules are scoped under .cc-container to avoid global conflicts.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.cc-container,
+.cc-container *,
+.cc-container *::before,
+.cc-container *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.cc-container {
+  font-family: var(--cc-font);
+  font-size: var(--cc-font-size);
+  line-height: 1.5;
+  color: var(--cc-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ─── Overlay ──────────────────────────────────────────────────────────── */
+
+.cc-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--cc-overlay);
+  z-index: var(--cc-z-index);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.cc-overlay--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* ─── Banner (shared) ──────────────────────────────────────────────────── */
+
+.cc-banner {
+  position: fixed;
+  z-index: calc(var(--cc-z-index) + 1);
+  background: var(--cc-bg);
+  color: var(--cc-text);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
+}
+
+.cc-banner--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.cc-banner__inner {
+  max-width: var(--cc-max-width);
+  margin: 0 auto;
+  padding: 20px 24px;
+}
+
+.cc-banner__title {
+  font-size: 1.1em;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: var(--cc-text);
+}
+
+.cc-banner__text {
+  color: var(--cc-text-secondary);
+  margin-bottom: 16px;
+  font-size: 0.93em;
+}
+
+.cc-banner__text a {
+  color: var(--cc-primary);
+  text-decoration: underline;
+}
+
+.cc-banner__text a:hover {
+  color: var(--cc-primary-hover);
+}
+
+.cc-banner__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+/* ─── Banner: Bar layout ───────────────────────────────────────────────── */
+
+.cc-banner--bar {
+  left: 0;
+  right: 0;
+  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
+}
+
+.cc-banner--bar-bottom {
+  bottom: 0;
+  transform: translateY(100%);
+}
+
+.cc-banner--bar-bottom.cc-banner--visible {
+  transform: translateY(0);
+}
+
+.cc-banner--bar-top {
+  top: 0;
+  transform: translateY(-100%);
+}
+
+.cc-banner--bar-top.cc-banner--visible {
+  transform: translateY(0);
+}
+
+/* ─── Banner: Modal layout ─────────────────────────────────────────────── */
+
+.cc-banner--modal {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.95);
+  max-width: 560px;
+  width: calc(100% - 32px);
+  border-radius: var(--cc-radius);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
+}
+
+.cc-banner--modal.cc-banner--visible {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* ─── Banner: Popup layout ─────────────────────────────────────────────── */
+
+.cc-banner--popup {
+  border-radius: var(--cc-radius);
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
+  width: var(--cc-popup-width);
+  max-width: calc(100% - 24px);
+}
+
+.cc-banner--popup-bottom-right {
+  bottom: 16px;
+  right: 16px;
+  transform: translateY(20px);
+}
+
+.cc-banner--popup-bottom-right.cc-banner--visible {
+  transform: translateY(0);
+}
+
+.cc-banner--popup-bottom-left {
+  bottom: 16px;
+  left: 16px;
+  transform: translateY(20px);
+}
+
+.cc-banner--popup-bottom-left.cc-banner--visible {
+  transform: translateY(0);
+}
+
+.cc-banner--popup-top-right {
+  top: 16px;
+  right: 16px;
+  transform: translateY(-20px);
+}
+
+.cc-banner--popup-top-right.cc-banner--visible {
+  transform: translateY(0);
+}
+
+.cc-banner--popup-top-left {
+  top: 16px;
+  left: 16px;
+  transform: translateY(-20px);
+}
+
+.cc-banner--popup-top-left.cc-banner--visible {
+  transform: translateY(0);
+}
+
+/* ─── Buttons ──────────────────────────────────────────────────────────── */
+
+.cc-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  border: none;
+  border-radius: calc(var(--cc-radius) - 2px);
+  font-family: var(--cc-font);
+  font-size: 0.9em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+.cc-btn:focus-visible {
+  outline: 2px solid var(--cc-primary);
+  outline-offset: 2px;
+}
+
+.cc-btn:active {
+  transform: scale(0.98);
+}
+
+.cc-btn--primary {
+  background: var(--cc-primary);
+  color: var(--cc-primary-text);
+}
+
+.cc-btn--primary:hover {
+  background: var(--cc-primary-hover);
+}
+
+.cc-btn--secondary {
+  background: transparent;
+  color: var(--cc-text);
+  border: 1.5px solid var(--cc-border);
+}
+
+.cc-btn--secondary:hover {
+  background: var(--cc-border);
+}
+
+.cc-btn--link {
+  background: transparent;
+  color: var(--cc-primary);
+  padding: 10px 12px;
+  text-decoration: underline;
+}
+
+.cc-btn--link:hover {
+  color: var(--cc-primary-hover);
+}
+
+/* ─── Preferences Modal ────────────────────────────────────────────────── */
+
+.cc-preferences {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: calc(var(--cc-z-index) + 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.cc-preferences--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.cc-preferences__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--cc-overlay);
+}
+
+.cc-preferences__dialog {
+  position: relative;
+  background: var(--cc-bg);
+  border-radius: var(--cc-radius);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
+  max-width: 640px;
+  width: calc(100% - 32px);
+  max-height: calc(100vh - 48px);
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.95);
+  transition: transform 0.3s ease;
+}
+
+.cc-preferences--visible .cc-preferences__dialog {
+  transform: scale(1);
+}
+
+.cc-preferences__header {
+  padding: 24px 24px 0;
+  flex-shrink: 0;
+}
+
+.cc-preferences__title {
+  font-size: 1.2em;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: var(--cc-text);
+}
+
+.cc-preferences__description {
+  font-size: 0.9em;
+  color: var(--cc-text-secondary);
+  margin-bottom: 16px;
+  line-height: 1.6;
+}
+
+.cc-preferences__body {
+  padding: 8px 24px;
+  overflow-y: auto;
+  flex: 1;
+  -webkit-overflow-scrolling: touch;
+}
+
+.cc-preferences__footer {
+  padding: 16px 24px;
+  border-top: 1px solid var(--cc-border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+/* ─── Category Accordion ───────────────────────────────────────────────── */
+
+.cc-category {
+  border: 1px solid var(--cc-border);
+  border-radius: calc(var(--cc-radius) - 2px);
+  margin-bottom: 10px;
+  overflow: hidden;
+}
+
+.cc-category__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  width: 100%;
+  font-family: var(--cc-font);
+  font-size: 0.95em;
+  color: var(--cc-text);
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+
+.cc-category__header:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.cc-category__header:focus-visible {
+  outline: 2px solid var(--cc-primary);
+  outline-offset: -2px;
+}
+
+.cc-category__header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+
+.cc-category__chevron {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+  color: var(--cc-text-secondary);
+}
+
+.cc-category--expanded .cc-category__chevron {
+  transform: rotate(180deg);
+}
+
+.cc-category__title {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cc-category__count {
+  font-size: 0.8em;
+  color: var(--cc-text-secondary);
+  font-weight: 400;
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+
+.cc-category__body {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.cc-category--expanded .cc-category__body {
+  max-height: 800px;
+}
+
+.cc-category__description {
+  padding: 0 16px 12px;
+  font-size: 0.88em;
+  color: var(--cc-text-secondary);
+  line-height: 1.6;
+}
+
+/* ─── Cookie Table ─────────────────────────────────────────────────────── */
+
+.cc-cookies {
+  padding: 0 16px 14px;
+}
+
+.cc-cookies__empty {
+  font-size: 0.85em;
+  color: var(--cc-text-secondary);
+  font-style: italic;
+  padding: 4px 0;
+}
+
+.cc-cookie-item {
+  border: 1px solid var(--cc-border);
+  border-radius: calc(var(--cc-radius) - 4px);
+  margin-bottom: 8px;
+  font-size: 0.85em;
+}
+
+.cc-cookie-item:last-child {
+  margin-bottom: 0;
+}
+
+.cc-cookie-item__row {
+  display: flex;
+  border-bottom: 1px solid var(--cc-border);
+  min-height: 32px;
+}
+
+.cc-cookie-item__row:last-child {
+  border-bottom: none;
+}
+
+.cc-cookie-item__label {
+  flex: 0 0 90px;
+  padding: 6px 10px;
+  font-weight: 600;
+  color: var(--cc-text);
+  background: rgba(0, 0, 0, 0.015);
+  display: flex;
+  align-items: center;
+}
+
+.cc-cookie-item__value {
+  flex: 1;
+  padding: 6px 10px;
+  color: var(--cc-text-secondary);
+  word-break: break-word;
+  display: flex;
+  align-items: center;
+}
+
+/* ─── Toggle Switch ────────────────────────────────────────────────────── */
+
+.cc-toggle {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.cc-toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.cc-toggle__slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--cc-toggle-off);
+  border-radius: 24px;
+  transition: background-color 0.2s ease;
+}
+
+.cc-toggle__slider::before {
+  content: '';
+  position: absolute;
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: var(--cc-toggle-knob);
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.cc-toggle__input:checked + .cc-toggle__slider {
+  background-color: var(--cc-toggle-on);
+}
+
+.cc-toggle__input:checked + .cc-toggle__slider::before {
+  transform: translateX(20px);
+}
+
+.cc-toggle__input:focus-visible + .cc-toggle__slider {
+  outline: 2px solid var(--cc-primary);
+  outline-offset: 2px;
+}
+
+.cc-toggle__input:disabled + .cc-toggle__slider {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.cc-category__always-active {
+  font-size: 0.8em;
+  font-weight: 600;
+  color: var(--cc-primary);
+  white-space: nowrap;
+  padding: 0 4px;
+}
+
+/* ─── Responsive ───────────────────────────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .cc-banner__inner {
+    padding: 16px;
+  }
+
+  .cc-banner__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .cc-banner__actions .cc-btn {
+    width: 100%;
+  }
+
+  .cc-banner--popup {
+    width: calc(100% - 24px);
+    left: 12px !important;
+    right: 12px !important;
+    bottom: 12px !important;
+    top: auto !important;
+  }
+
+  .cc-preferences__dialog {
+    max-height: calc(100vh - 24px);
+    width: calc(100% - 16px);
+    border-radius: calc(var(--cc-radius) - 2px);
+  }
+
+  .cc-preferences__header,
+  .cc-preferences__body {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .cc-preferences__footer {
+    padding: 12px 16px;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .cc-preferences__footer .cc-btn {
+    width: 100%;
+  }
+
+  .cc-cookie-item__label {
+    flex: 0 0 75px;
+    font-size: 0.9em;
+  }
+}
+
+/* ─── Accessibility: reduced motion ────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .cc-banner,
+  .cc-overlay,
+  .cc-preferences,
+  .cc-preferences__dialog,
+  .cc-category__body,
+  .cc-category__chevron,
+  .cc-toggle__slider,
+  .cc-toggle__slider::before {
+    transition: none !important;
+  }
+}
+
+/* ─── Print: hide everything ───────────────────────────────────────────── */
+
+@media print {
+  .cc-container {
+    display: none !important;
+  }
+}
+`;
+
+var injected = false;
+
+/**
+ * Inject the stylesheet into the document head.
+ * Idempotent — only injects once.
+ */
+function injectStyles() {
+  if (injected || typeof document === 'undefined') return;
+  var style = document.createElement('style');
+  style.setAttribute('data-cc-styles', '');
+  style.textContent = CSS;
+  (document.head || document.documentElement).appendChild(style);
+  injected = true;
+}
+
+/**
+ * Set CSS custom properties on the container element based on theme config.
+ */
+function applyTheme(container, theme) {
+  if (!container || !theme) return;
+  var map = {
+    '--cc-primary': theme.primary,
+    '--cc-primary-hover': theme.primaryHover,
+    '--cc-primary-text': theme.primaryText,
+    '--cc-bg': theme.background,
+    '--cc-text': theme.text,
+    '--cc-text-secondary': theme.textSecondary,
+    '--cc-border': theme.border,
+    '--cc-overlay': theme.overlay,
+    '--cc-toggle-on': theme.toggleOn,
+    '--cc-toggle-off': theme.toggleOff,
+    '--cc-toggle-knob': theme.toggleKnob,
+    '--cc-font': theme.fontFamily,
+    '--cc-font-size': theme.fontSize,
+    '--cc-radius': theme.borderRadius,
+    '--cc-z-index': theme.zIndex,
+    '--cc-max-width': theme.maxWidth,
+    '--cc-popup-width': theme.popupWidth,
+  };
+  for (var prop in map) {
+    if (map[prop] != null) {
+      container.style.setProperty(prop, String(map[prop]));
+    }
+  }
+}
+
+/**
+ * CookieConsent — GDPR-compliant cookie consent manager.
+ *
+ * Usage (script tag):
+ *   <script src="cookie-consent-gdpr.min.js"></script>
+ *   <script>CookieConsent.init({ ... });</script>
+ *
+ * Usage (npm):
+ *   import CookieConsent from 'cookie-consent-gdpr';
+ *   CookieConsent.init({ ... });
+ *
+ * Usage (zero-config HTML):
+ *   <div id="cc-banner"></div>
+ *   <script src="cookie-consent-gdpr.min.js" data-cc-auto></script>
+ */
+
+var instance = {
+  _initialized: false,
+  _config: null,
+  _emitter: null,
+  _consent: null,
+  _blocker: null,
+  _banner: null,
+  _preferences: null,
+  _container: null,
+  _prefBtnListeners: [],
+};
+
+// ─── Public API ─────────────────────────────────────────────────────────
+
+var CookieConsent = {
+  /**
+   * Initialize the cookie consent system.
+   * @param {Object} userConfig - Configuration overrides.
+   */
+  init: function (userConfig) {
+    if (instance._initialized) {
+      console.warn('[CookieConsent] Already initialized. Call destroy() first to reinitialize.');
+      return CookieConsent;
+    }
+
+    var config = deepMerge(DEFAULTS, userConfig || {});
+    instance._config = config;
+    instance._emitter = new EventEmitter();
+    instance._consent = new ConsentManager(config, instance._emitter);
+    instance._blocker = new ScriptBlocker(instance._emitter);
+    instance._initialized = true;
+
+    // Inject styles
+    injectStyles();
+
+    // Determine container element
+    var containerEl;
+    if (config.container) {
+      containerEl =
+        typeof config.container === 'string' ? $(config.container) : config.container;
+    }
+    if (!containerEl) {
+      containerEl = document.createElement('div');
+      document.body.appendChild(containerEl);
+    }
+    containerEl.classList.add('cc-container');
+    instance._container = containerEl;
+
+    // Apply theme CSS variables
+    applyTheme(containerEl, config.theme);
+
+    // Create UI components
+    instance._banner = new Banner(config, instance._emitter);
+    instance._preferences = new Preferences(config, instance._emitter);
+
+    // Load existing consent
+    var existing = instance._consent.load();
+
+    // Render banner (always, but only show if needed)
+    instance._banner.render(containerEl);
+
+    // Wire up internal event handlers
+    _bindEvents();
+
+    // Bind external preferences buttons
+    _bindPreferencesButtons(config);
+
+    if (existing && instance._consent.hasValid()) {
+      // Valid consent exists — activate scripts and observe
+      instance._blocker.activate(existing.categories);
+      instance._blocker.observe(existing.categories);
+    } else {
+      // No valid consent — show banner
+      if (config.autoShow) {
+        // Small delay to allow page to render first
+        setTimeout(function () {
+          instance._banner.show();
+        }, 100);
+      }
+    }
+
+    return CookieConsent;
+  },
+
+  /** Show the consent banner. */
+  show: function () {
+    if (instance._banner) instance._banner.show();
+    return CookieConsent;
+  },
+
+  /** Hide the consent banner. */
+  hide: function () {
+    if (instance._banner) instance._banner.hide();
+    return CookieConsent;
+  },
+
+  /** Open the preferences/settings modal. */
+  showPreferences: function () {
+    _ensurePreferencesRendered();
+    if (instance._preferences) instance._preferences.show();
+    return CookieConsent;
+  },
+
+  /** Close the preferences modal. */
+  hidePreferences: function () {
+    if (instance._preferences) instance._preferences.hide();
+    return CookieConsent;
+  },
+
+  /** Accept all cookie categories. */
+  acceptAll: function () {
+    if (!instance._consent) return CookieConsent;
+    var cats = instance._consent.acceptAllMap();
+    _applyConsent(cats);
+    return CookieConsent;
+  },
+
+  /** Reject all non-essential cookies. */
+  rejectAll: function () {
+    if (!instance._consent) return CookieConsent;
+    var cats = instance._consent.rejectAllMap();
+    _applyConsent(cats);
+    return CookieConsent;
+  },
+
+  /** Accept a specific category by key. */
+  acceptCategory: function (category) {
+    if (!instance._consent) return CookieConsent;
+    var current = instance._consent.get();
+    var cats = current ? Object.assign({}, current.categories) : instance._consent.rejectAllMap();
+    cats[category] = true;
+    _applyConsent(cats);
+    return CookieConsent;
+  },
+
+  /** Get the full consent record. Returns null if no consent given. */
+  getConsent: function () {
+    return instance._consent ? instance._consent.get() : null;
+  },
+
+  /** Check if the user has given any consent (made a choice). */
+  hasConsented: function () {
+    return !!(instance._consent && instance._consent.get());
+  },
+
+  /** Check if a specific category has been consented to. */
+  hasCategory: function (category) {
+    return instance._consent ? instance._consent.hasCategory(category) : false;
+  },
+
+  /** Revoke all consent and re-show the banner. */
+  revokeConsent: function () {
+    if (instance._consent) instance._consent.revoke();
+    if (instance._blocker) instance._blocker.destroy();
+    // Destroy preferences so it re-renders with fresh toggle states
+    if (instance._preferences) {
+      instance._preferences.destroy();
+      instance._preferences = new Preferences(instance._config, instance._emitter);
+    }
+    if (instance._banner) instance._banner.show();
+    return CookieConsent;
+  },
+
+  /** Register an event listener. */
+  on: function (event, fn) {
+    if (instance._emitter) instance._emitter.on(event, fn);
+    return CookieConsent;
+  },
+
+  /** Remove an event listener. */
+  off: function (event, fn) {
+    if (instance._emitter) instance._emitter.off(event, fn);
+    return CookieConsent;
+  },
+
+  /** Destroy the entire consent UI and clean up. */
+  destroy: function () {
+    if (instance._banner) instance._banner.destroy();
+    if (instance._preferences) instance._preferences.destroy();
+    if (instance._blocker) instance._blocker.destroy();
+
+    // Clean up preferences button listeners
+    instance._prefBtnListeners.forEach(function (item) {
+      item.el.removeEventListener('click', item.fn);
+    });
+    instance._prefBtnListeners = [];
+
+    // Remove container if we created it
+    if (
+      instance._container &&
+      instance._container.parentNode &&
+      !instance._config.container
+    ) {
+      instance._container.parentNode.removeChild(instance._container);
+    }
+
+    instance._initialized = false;
+    instance._config = null;
+    instance._emitter = null;
+    instance._consent = null;
+    instance._blocker = null;
+    instance._banner = null;
+    instance._preferences = null;
+    instance._container = null;
+
+    return CookieConsent;
+  },
+
+  /** Get the current configuration (read-only copy). */
+  getConfig: function () {
+    return instance._config ? JSON.parse(JSON.stringify(instance._config)) : null;
+  },
+};
+
+// ─── Internal Helpers ───────────────────────────────────────────────────
+
+/**
+ * Ensure the preferences modal is rendered (lazy render on first open).
+ */
+function _ensurePreferencesRendered() {
+  if (instance._preferences && !instance._preferences.el) {
+    var current = instance._consent ? instance._consent.get() : null;
+    instance._preferences.render(instance._container, current);
+  }
+}
+
+/**
+ * Apply a consent decision: save, hide banner, activate scripts.
+ */
+function _applyConsent(categories) {
+  instance._consent.save(categories);
+  if (instance._banner) instance._banner.hide();
+  if (instance._preferences) instance._preferences.hide();
+  instance._blocker.activate(categories);
+  instance._blocker.observe(categories);
+}
+
+/**
+ * Bind internal UI event listeners.
+ */
+function _bindEvents() {
+  var emitter = instance._emitter;
+
+  // Banner actions
+  emitter.on('banner:acceptAll', function () {
+    _applyConsent(instance._consent.acceptAllMap());
+  });
+
+  emitter.on('banner:rejectAll', function () {
+    _applyConsent(instance._consent.rejectAllMap());
+  });
+
+  emitter.on('banner:settings', function () {
+    if (instance._banner) instance._banner.hide();
+    CookieConsent.showPreferences();
+  });
+
+  // Preferences actions
+  emitter.on('preferences:save', function (categories) {
+    _applyConsent(categories);
+  });
+
+  emitter.on('preferences:acceptAll', function () {
+    if (instance._preferences) instance._preferences.setAll(true);
+    _applyConsent(instance._consent.acceptAllMap());
+  });
+
+  emitter.on('preferences:rejectAll', function () {
+    if (instance._preferences) instance._preferences.setAll(false);
+    _applyConsent(instance._consent.rejectAllMap());
+  });
+
+  emitter.on('preferences:close', function () {
+    CookieConsent.hidePreferences();
+  });
+}
+
+/**
+ * Bind click handlers to preference button elements.
+ */
+function _bindPreferencesButtons(config) {
+  var handler = function (e) {
+    e.preventDefault();
+    CookieConsent.showPreferences();
+  };
+
+  // Bind to configured selector
+  if (config.preferencesButton) {
+    var btns =
+      typeof config.preferencesButton === 'string'
+        ? $$(config.preferencesButton)
+        : [config.preferencesButton];
+    btns.forEach(function (btn) {
+      btn.addEventListener('click', handler);
+      instance._prefBtnListeners.push({ el: btn, fn: handler });
+    });
+  }
+
+  // Auto-bind any element with data-cc-open-preferences
+  var autoButtons = $$('[data-cc-open-preferences]');
+  autoButtons.forEach(function (btn) {
+    btn.addEventListener('click', handler);
+    instance._prefBtnListeners.push({ el: btn, fn: handler });
+  });
+}
+
+// ─── Auto-initialization ────────────────────────────────────────────────
+
+/**
+ * Auto-init when:
+ * 1. Script tag has `data-cc-auto` attribute, OR
+ * 2. An element with id="cc-banner" exists in the page
+ *
+ * For auto-init, config can be provided via data-cc-config attribute (JSON string).
+ */
+function _autoInit() {
+  if (instance._initialized) return;
+
+  // Check for script tag with data-cc-auto
+  var scripts = document.querySelectorAll('script[data-cc-auto]');
+  if (scripts.length > 0) {
+    var script = scripts[scripts.length - 1];
+    var configStr = script.getAttribute('data-cc-config');
+    var autoConfig = {};
+    if (configStr) {
+      try {
+        autoConfig = JSON.parse(configStr);
+      } catch (e) {
+        console.error('[CookieConsent] Invalid data-cc-config JSON:', e);
+      }
+    }
+    // Check for an explicit container element
+    var containerEl = $('#cc-banner');
+    if (containerEl) {
+      autoConfig.container = containerEl;
+    }
+    CookieConsent.init(autoConfig);
+    return;
+  }
+
+  // Check for container element with id
+  var container = $('#cc-banner');
+  if (container && container.hasAttribute('data-cc-auto')) {
+    var cfgStr = container.getAttribute('data-cc-config');
+    var cfg = {};
+    if (cfgStr) {
+      try {
+        cfg = JSON.parse(cfgStr);
+      } catch (e) {
+        console.error('[CookieConsent] Invalid data-cc-config JSON:', e);
+      }
+    }
+    cfg.container = container;
+    CookieConsent.init(cfg);
+  }
+}
+
+// Run auto-init when DOM is ready
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', _autoInit);
+  } else {
+    _autoInit();
+  }
+}
+
+module.exports = CookieConsent;