<section class="ba-cok" aria-label="Cookie consent banner demo">
  <span class="bg-text" aria-hidden="true">Privacy</span>
  <div class="page-center">
    <span class="ornament">⬥ ◇ ⬥</span>
    <p>The consent banner appears from the bottom of the demo on load. Use Accept All or Decline Non-Essential to dismiss.</p>
  </div>

  <div class="consent-banner" data-ba-cok-banner role="dialog" aria-label="Cookie consent">
    <div class="consent-frame">
      <div class="consent-inner">
        <div class="consent-left">
          <div class="consent-eyebrow">
            <span class="consent-eyebrow-line" aria-hidden="true"></span>
            <span class="consent-eyebrow-text">Privacy &amp; Cookies</span>
            <span class="consent-eyebrow-line" aria-hidden="true"></span>
          </div>
          <div class="consent-title">We value your privacy.</div>
          <div class="consent-body">
            We use cookies to personalise content, measure audience, and improve your experience. By accepting, you consent to our use of cookies as described in our <a href="#">Cookie Policy</a> and <a href="#">Privacy Notice</a>. You may withdraw consent at any time.
          </div>
          <div class="consent-tabs">
            <label class="consent-tab required"><input type="checkbox" checked disabled> Essential</label>
            <label class="consent-tab"><input type="checkbox" data-ba-cok-pref="analytics"> Analytics</label>
            <label class="consent-tab"><input type="checkbox" data-ba-cok-pref="marketing"> Marketing</label>
            <label class="consent-tab"><input type="checkbox" data-ba-cok-pref="personal"> Personalisation</label>
          </div>
        </div>
        <div class="consent-right">
          <button class="btn-accept" type="button" data-ba-cok-accept>Accept All</button>
          <button class="btn-decline" type="button" data-ba-cok-decline>Decline Non-Essential</button>
        </div>
      </div>
      <div class="consent-divider" aria-hidden="true"></div>
      <div class="consent-footer">
        <span class="consent-footer-text">GDPR · CCPA · ePrivacy Directive compliant</span>
        <span class="consent-deco">Preference Centre</span>
      </div>
    </div>
  </div>
</section>

/* ─── 04 Cookie Consent Banner — luxury Art Deco ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Jost:wght@300;400;500;600&display=swap');

.ba-cok {
  --ba-cok-obsidian: #0a0a0a;
  --ba-cok-onyx: #141414;
  --ba-cok-gold: #c9a84c;
  --ba-cok-gold-lite: #e2c880;
  --ba-cok-gold-dim: #8a6e30;
  --ba-cok-ivory: #f5f0e8;
  --ba-cok-ivory-dim: rgba(245,240,232,0.55);
  --ba-cok-rule: rgba(201,168,76,0.25);

  position: relative;
  width: 100%;
  min-height: 720px;
  background: var(--ba-cok-obsidian);
  background-image: radial-gradient(ellipse 60% 35% at 50% 0%, rgba(201,168,76,0.06) 0%, transparent 60%), repeating-linear-gradient(45deg, transparent 0px, transparent 24px, rgba(255,255,255,0.008) 24px, rgba(255,255,255,0.008) 25px);
  font-family: 'Jost', sans-serif;
  color: var(--ba-cok-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.ba-cok *, .ba-cok *::before, .ba-cok *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-cok .bg-text { position: absolute; font-family: 'Libre Baskerville', serif; font-size: clamp(80px, 14vw, 160px); font-style: italic; color: rgba(201,168,76,0.04); letter-spacing: -0.02em; white-space: nowrap; user-select: none; pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ba-cok .page-center { text-align: center; z-index: 1; padding: 40px 20px 200px; }
.ba-cok .page-center p { font-family: 'Libre Baskerville', serif; font-size: clamp(13px, 2vw, 15px); font-style: italic; color: var(--ba-cok-ivory-dim); line-height: 1.8; max-width: 380px; margin: 0 auto; }
.ba-cok .ornament { display: block; text-align: center; color: var(--ba-cok-gold); font-size: 24px; letter-spacing: 0.3em; margin-bottom: 20px; opacity: 0.7; }

.ba-cok .consent-banner { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; transform: translateY(100%); animation: ba-cok-slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards; }
@keyframes ba-cok-slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ba-cok .consent-banner.dismissed { animation: ba-cok-slideDown 0.5s cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes ba-cok-slideDown { from { transform: translateY(0); } to { transform: translateY(110%); } }
.ba-cok .consent-frame { background: var(--ba-cok-onyx); border-top: 1px solid var(--ba-cok-rule); position: relative; overflow: hidden; }
.ba-cok .consent-frame::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--ba-cok-gold-dim) 20%, var(--ba-cok-gold) 50%, var(--ba-cok-gold-dim) 80%, transparent 100%); }
.ba-cok .consent-inner { max-width: 1100px; margin: 0 auto; padding: 28px 32px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.ba-cok .consent-left { display: flex; flex-direction: column; gap: 10px; }
.ba-cok .consent-eyebrow { display: flex; align-items: center; gap: 10px; }
.ba-cok .consent-eyebrow-line { width: 28px; height: 1px; background: var(--ba-cok-gold); opacity: 0.5; }
.ba-cok .consent-eyebrow-text { font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ba-cok-gold); opacity: 0.8; }
.ba-cok .consent-title { font-family: 'Libre Baskerville', serif; font-size: 19px; font-weight: 700; color: var(--ba-cok-ivory); line-height: 1.25; }
.ba-cok .consent-body { font-size: 12.5px; line-height: 1.75; color: var(--ba-cok-ivory-dim); max-width: 560px; }
.ba-cok .consent-body a { color: var(--ba-cok-gold-lite); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.35); transition: border-color 0.2s; }
.ba-cok .consent-tabs { display: flex; gap: 0; margin-top: 6px; border: 1px solid var(--ba-cok-rule); width: fit-content; border-radius: 2px; overflow: hidden; flex-wrap: wrap; }
.ba-cok .consent-tab { display: flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ba-cok-ivory-dim); cursor: pointer; background: transparent; border-right: 1px solid var(--ba-cok-rule); transition: all 0.2s; }
.ba-cok .consent-tab:last-child { border-right: none; }
.ba-cok .consent-tab input[type="checkbox"] { width: 11px; height: 11px; accent-color: var(--ba-cok-gold); cursor: pointer; }
.ba-cok .consent-tab:hover { background: rgba(201,168,76,0.06); color: var(--ba-cok-ivory); }
.ba-cok .consent-tab.required { color: rgba(201,168,76,0.6); pointer-events: none; }
.ba-cok .consent-right { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 180px; }
.ba-cok .btn-accept { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 13px 24px; background: var(--ba-cok-gold); color: var(--ba-cok-obsidian); border: none; cursor: pointer; transition: all 0.25s ease; }
.ba-cok .btn-accept:hover { background: var(--ba-cok-gold-lite); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(201,168,76,0.35); }
.ba-cok .btn-decline { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 24px; background: transparent; color: var(--ba-cok-ivory-dim); border: 1px solid rgba(245,240,232,0.15); cursor: pointer; transition: all 0.25s ease; }
.ba-cok .btn-decline:hover { border-color: rgba(245,240,232,0.35); color: var(--ba-cok-ivory); background: rgba(245,240,232,0.04); }
.ba-cok .consent-divider { height: 1px; background: var(--ba-cok-rule); margin: 0 32px; }
.ba-cok .consent-footer { padding: 10px 32px; max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.ba-cok .consent-footer-text { font-size: 10px; color: rgba(245,240,232,0.3); letter-spacing: 0.06em; }
.ba-cok .consent-deco { color: rgba(201,168,76,0.3); font-size: 10px; letter-spacing: 0.15em; }

@media (max-width: 640px) {
  .ba-cok .consent-inner { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .ba-cok .consent-right { flex-direction: row; min-width: unset; }
  .ba-cok .btn-accept, .ba-cok .btn-decline { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ba-cok .consent-banner { animation: none; transform: translateY(0); } }

(() => {
  const root = document.querySelector('.ba-cok');
  if (!root) return;
  const banner = root.querySelector('[data-ba-cok-banner]');
  if (!banner) return;
  const dismiss = () => banner.classList.add('dismissed');
  root.addEventListener('click', (e) => {
    if (e.target.closest('[data-ba-cok-accept]')) { dismiss(); return; }
    if (e.target.closest('[data-ba-cok-decline]')) {
      root.querySelectorAll('[data-ba-cok-pref]').forEach((c) => { c.checked = false; });
      dismiss();
    }
  });
})();