/* ================================================================
   Cookie Banner & Modal — nowoczesny design
   Google Consent Mode V2 ready
   ================================================================ */

/* ── Reusable toggle switch ─────────────────────────────────── */
.cb__switch{
  position:relative;width:44px;height:24px;border-radius:24px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  cursor:pointer;transition:all .3s ease;flex-shrink:0;padding:0;
}
.cb__switch-dot{
  position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.cb__switch--on{
  background:linear-gradient(135deg,#6366F1,#818CF8);
  border-color:rgba(99,102,241,.5);
}
.cb__switch--on .cb__switch-dot{
  transform:translateX(20px);
}
.cb__switch--locked{
  background:linear-gradient(135deg,#6366F1,#818CF8);
  border-color:rgba(99,102,241,.4);opacity:.6;cursor:not-allowed;
}
.cb__switch--locked .cb__switch-dot{transform:translateX(20px)}

/* ── Reusable button styles ─────────────────────────────────── */
.cb__btn{
  padding:10px 20px;border-radius:10px;font-size:.85rem;font-weight:600;
  cursor:pointer;transition:all .3s ease;white-space:nowrap;
  border:none;font-family:inherit;
}
.cb__btn--primary{
  background:linear-gradient(135deg,#6366F1,#818CF8);color:#fff;
}
.cb__btn--primary:hover{
  box-shadow:0 4px 20px rgba(99,102,241,.45);transform:translateY(-1px);
}
.cb__btn--outline{
  background:transparent;color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.15);
}
.cb__btn--outline:hover{border-color:#818CF8;color:#fff}
.cb__btn--ghost{
  background:transparent;color:rgba(255,255,255,.5);
}
.cb__btn--ghost:hover{color:rgba(255,255,255,.85)}

/* ================================================================
   BANNER
   ================================================================ */
.cb{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:10000;width:calc(100% - 40px);max-width:520px;
  opacity:0;animation:cbSlideIn .5s .15s ease forwards;
}
@keyframes cbSlideIn{
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

.cb__card{
  background:rgba(10,15,30,.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(99,102,241,.12);
  border-radius:20px;padding:24px;
  box-shadow:
    0 24px 80px rgba(0,0,0,.45),
    0 0 60px rgba(99,102,241,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Header — icon + title */
.cb__header{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.cb__icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(6,182,212,.1));
  border:1px solid rgba(99,102,241,.2);
  display:flex;align-items:center;justify-content:center;
  color:#22D3EE;
}
.cb__title{
  font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;
  color:#fff;margin-bottom:4px;line-height:1.3;
}
.cb__desc{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.5}

/* Quick toggles */
.cb__toggles{
  display:flex;gap:8px;margin-bottom:18px;
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
}
.cb__toggle-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.cb__toggle-label{font-size:.72rem;color:rgba(255,255,255,.45);font-weight:500;text-transform:uppercase;letter-spacing:.04em}

/* Actions */
.cb__actions{display:flex;gap:8px}
.cb__actions .cb__btn{flex:1;text-align:center;padding:11px 12px}

/* Legal */
.cb__legal{
  font-size:.72rem;color:rgba(255,255,255,.3);text-align:center;
  margin-top:12px;
}
.cb__legal a{color:#22D3EE;text-decoration:underline}

/* ================================================================
   MODAL
   ================================================================ */
.cm{
  position:fixed;inset:0;z-index:10001;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.cm__overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.cm__panel{
  position:relative;
  background:linear-gradient(180deg,#0d1225 0%,#0a0f1e 100%);
  border:1px solid rgba(99,102,241,.15);
  border-radius:24px;padding:28px;
  max-width:500px;width:100%;max-height:85vh;overflow-y:auto;
  box-shadow:
    0 30px 100px rgba(0,0,0,.55),
    0 0 60px rgba(99,102,241,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Scrollbar */
.cm__panel::-webkit-scrollbar{width:4px}
.cm__panel::-webkit-scrollbar-track{background:transparent}
.cm__panel::-webkit-scrollbar-thumb{background:rgba(99,102,241,.25);border-radius:4px}

/* Header */
.cm__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cm__title{
  font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:700;color:#fff;
}
.cm__close{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.35);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:all .2s;cursor:pointer;
}
.cm__close:hover{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}

.cm__desc{font-size:.84rem;color:rgba(255,255,255,.45);line-height:1.55;margin-bottom:20px}

/* Category cards */
.cm__cat{
  padding:16px;border-radius:14px;margin-bottom:10px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
  transition:border-color .3s;
}
.cm__cat:hover{border-color:rgba(99,102,241,.2)}
.cm__cat--locked{opacity:.7}

.cm__cat-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cm__cat-info{display:flex;align-items:center;gap:8px}
.cm__cat-info strong{font-size:.9rem;color:#fff}
.cm__cat-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:rgba(99,102,241,.1);
  display:flex;align-items:center;justify-content:center;
  color:#22D3EE;font-size:.75rem;
}
.cm__badge{
  font-size:.65rem;font-weight:600;padding:2px 8px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.04em;
}
.cm__badge--on{
  background:rgba(99,102,241,.15);color:#818CF8;border:1px solid rgba(99,102,241,.25);
}
.cm__cat-desc{font-size:.78rem;color:rgba(255,255,255,.35);line-height:1.5;margin-top:8px}

/* Modal actions */
.cm__actions{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:540px){
  .cb{bottom:12px;width:calc(100% - 24px);max-width:none}
  .cb__card{padding:18px;border-radius:16px}
  .cb__header{gap:10px}
  .cb__icon{width:38px;height:38px;border-radius:10px}
  .cb__icon svg{width:22px;height:22px}
  .cb__title{font-size:.92rem}
  .cb__desc{font-size:.78rem}

  .cb__toggles{
    flex-direction:row;gap:6px;padding:8px 10px;
  }
  .cb__toggle-label{font-size:.65rem}
  .cb__switch{width:38px;height:22px}
  .cb__switch-dot{width:16px;height:16px}
  .cb__switch--on .cb__switch-dot,
  .cb__switch--locked .cb__switch-dot{transform:translateX(16px)}

  .cb__actions{gap:6px}
  .cb__actions .cb__btn{padding:10px 8px;font-size:.8rem}
}

@media(max-width:540px){
  .cm__panel{padding:20px;border-radius:18px}
  .cm__title{font-size:1.05rem}
  .cm__cat{padding:12px}
  .cm__actions{flex-direction:column}
  .cm__actions .cb__btn{width:100%;text-align:center}
}