/* ════════════════════════════════════════════════════════════
   COOKIE CONSENT — self-contained (own variables, no dependency
   on a host page's design tokens). Loaded on every public page.
════════════════════════════════════════════════════════════ */
.cc-root{
  --cc-navy-1: #0d1b3e;
  --cc-navy-2: #050d18;
  --cc-blue: #1e5aef;
  --cc-cyan: #00c8ff;
  --cc-cyan-hot: #00d4ff;
  --cc-sky: #7dd3fc;
  --cc-text: #f0f6ff;
  --cc-silver: #b8bcd0;
  --cc-muted: #94a3b8;
  --cc-border: rgba(74,108,247,.22);
  --cc-gradient: linear-gradient(135deg, var(--cc-blue), var(--cc-cyan));
  font-family: 'Outfit', sans-serif;
  color: var(--cc-text);
}
.cc-root *{box-sizing:border-box}
.cc-root [hidden]{display:none!important}

/* ── BANNER ─────────────────────────────────────────────── */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:10000;
  display:flex; justify-content:center;
  padding:16px;
  transform:translateY(120%); opacity:0;
  transition:transform .5s cubic-bezier(.22,.8,.26,1), opacity .5s ease;
  pointer-events:none;
}
.cc-banner.cc-in{transform:translateY(0); opacity:1; pointer-events:auto}
.cc-bar{
  width:100%; max-width:1040px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:22px 26px;
  border-radius:18px;
  border:1px solid var(--cc-border);
  background:linear-gradient(155deg, rgba(13,27,62,.94), rgba(5,13,24,.98));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.cc-bar-text{flex:1 1 320px; min-width:0}
.cc-bar-title{font-family:'Sora',sans-serif; font-size:15px; font-weight:700; margin-bottom:6px}
.cc-bar-desc{font-size:13.5px; color:var(--cc-silver); line-height:1.6}
.cc-bar-desc a{color:var(--cc-sky); text-decoration:underline; text-underline-offset:3px}
.cc-bar-desc a:hover{color:var(--cc-text)}
.cc-bar-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.cc-btn{
  font-family:'Outfit',sans-serif; font-size:13.5px; font-weight:600;
  padding:11px 20px; border-radius:9px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .2s, opacity .2s, background .2s, border-color .2s;
}
.cc-btn:hover{transform:translateY(-1px)}
.cc-btn-primary{background:var(--cc-gradient); color:#fff}
.cc-btn-primary:hover{opacity:.92}
.cc-btn-ghost{background:rgba(74,108,247,.08); border-color:var(--cc-border); color:var(--cc-text)}
.cc-btn-ghost:hover{background:rgba(74,108,247,.15)}
.cc-btn-text{background:none; border:0; color:var(--cc-sky); padding:11px 6px; text-decoration:underline; text-underline-offset:3px}
.cc-btn-text:hover{color:var(--cc-text); transform:none}

/* ── SETTINGS MODAL ─────────────────────────────────────── */
.cc-overlay{
  position:fixed; inset:0; z-index:10001;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(3,8,15,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s ease;
}
.cc-overlay.cc-in{opacity:1}
.cc-modal{
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  border-radius:20px; border:1px solid var(--cc-border);
  background:linear-gradient(155deg, rgba(13,27,62,.97), rgba(5,13,24,.99));
  padding:32px;
  transform:translateY(12px); opacity:0;
  transition:transform .3s cubic-bezier(.22,.8,.26,1), opacity .3s ease;
}
.cc-overlay.cc-in .cc-modal{transform:none; opacity:1}
.cc-modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px}
.cc-modal-title{font-family:'Sora',sans-serif; font-size:19px; font-weight:700}
.cc-close{background:none; border:0; color:var(--cc-muted); cursor:pointer; padding:4px; flex-shrink:0; border-radius:6px}
.cc-close:hover{color:var(--cc-text)}
.cc-close svg{width:18px; height:18px; display:block}

.cc-cat{display:flex; gap:16px; align-items:flex-start; justify-content:space-between; padding:16px 0; border-top:1px solid rgba(255,255,255,.07)}
.cc-cat:first-of-type{border-top:0; padding-top:0}
.cc-cat-name{font-family:'Sora',sans-serif; font-size:14px; font-weight:600; margin-bottom:4px}
.cc-cat-desc{font-size:12.5px; color:var(--cc-silver); line-height:1.55}
.cc-cat-info{flex:1; min-width:0}

.cc-switch{position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; margin-top:2px}
.cc-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.cc-slider{position:absolute; inset:0; background:rgba(148,163,184,.25); border-radius:999px; transition:background .2s; pointer-events:none}
.cc-slider::before{content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s}
.cc-switch input:checked ~ .cc-slider{background:var(--cc-gradient)}
.cc-switch input:checked ~ .cc-slider::before{transform:translateX(18px)}
.cc-switch input:disabled ~ .cc-slider{opacity:.55; cursor:not-allowed}
.cc-switch input:focus-visible ~ .cc-slider{outline:2px solid var(--cc-cyan); outline-offset:2px}

.cc-modal-foot{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.07)}

/* ── REOPEN BUTTON ──────────────────────────────────────── */
.cc-reopen{
  position:fixed; left:18px; bottom:18px; z-index:9998;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, rgba(13,27,62,.92), rgba(5,13,24,.96));
  border:1px solid var(--cc-border); color:var(--cc-sky); cursor:pointer;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s;
}
.cc-reopen.cc-show{opacity:1; transform:none; pointer-events:auto}
.cc-reopen:hover{background:rgba(74,108,247,.18); color:var(--cc-text)}
.cc-reopen svg{width:19px; height:19px}

@media (max-width:640px){
  .cc-banner{padding:10px}
  .cc-bar{flex-direction:column; align-items:stretch; padding:20px}
  .cc-bar-actions{width:100%}
  .cc-bar-actions .cc-btn,.cc-bar-actions .cc-btn-text{flex:1; text-align:center; justify-content:center}
  .cc-modal{padding:24px; max-height:85vh}
  .cc-reopen{left:14px; bottom:14px}
}

@media (prefers-reduced-motion: reduce){
  .cc-banner,.cc-modal,.cc-overlay,.cc-reopen{transition:none}
}