/* ============================================================
   cookies.css — Cookie consent banner + preferences modal
   Matches Social Play dark theme
   ============================================================ */

/* ---- Banner ---- */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background: rgba(11,11,12,0.97); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line, rgba(255,255,255,0.08));
  padding: 22px clamp(20px,4vw,40px);
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  font-family: var(--f-body, 'Saira', sans-serif);
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner.hide{ transform: translateY(100%); pointer-events:none; }

.cb-inner{
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: clamp(20px,3vw,40px);
  flex-wrap: wrap;
}
.cb-text{ flex:1; min-width: 280px; }
.cb-text p{
  font-size: 14px; line-height:1.6; color: rgba(244,242,240,0.7); margin:0;
}
.cb-text a{
  color: var(--red, #D8211F); text-decoration: underline;
  text-underline-offset: 3px;
}
.cb-actions{
  display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap;
}

/* buttons */
.cb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 22px; border-radius:8px; border:none;
  font-family: var(--f-disp, 'Saira Condensed', sans-serif);
  font-weight:700; text-transform:uppercase; font-size:13px;
  letter-spacing:0.06em; cursor:pointer; transition: all .15s ease;
  white-space:nowrap;
}
.cb-accept{
  background: var(--red, #D8211F); color:#fff;
}
.cb-accept:hover{ filter:brightness(1.15); transform:translateY(-1px); }
.cb-manage{
  background: rgba(255,255,255,0.06); color: rgba(244,242,240,0.8);
  border:1px solid var(--line, rgba(255,255,255,0.08));
}
.cb-manage:hover{ background: rgba(255,255,255,0.1); color:#fff; }
.cb-reject{
  background:transparent; color: rgba(244,242,240,0.4);
  font-size:12px; padding:8px 14px;
}
.cb-reject:hover{ color: rgba(244,242,240,0.7); }

/* ---- Preferences Modal ---- */
.cookie-prefs-overlay{
  position:fixed; inset:0; z-index:10000;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  display:none; place-items:center;
}
.cookie-prefs-overlay.open{ display:grid; }

.cookie-prefs{
  background: var(--ink, #111113);
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 16px;
  max-width: 520px; width: calc(100% - 40px);
  max-height: 85vh; overflow-y:auto;
  padding: 32px;
  font-family: var(--f-body, 'Saira', sans-serif);
}
.cp-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:22px;
}
.cp-head h3{
  font-family: var(--f-disp, 'Saira Condensed', sans-serif);
  font-weight:800; text-transform:uppercase; font-size:22px; margin:0;
  color: var(--text, #F4F2F0);
}
.cp-close{
  background:none; border:none; color: rgba(244,242,240,0.4);
  font-size:24px; cursor:pointer; padding:4px 8px; line-height:1;
}
.cp-close:hover{ color:#fff; }

.cp-cat{
  padding: 18px 0;
  border-top: 1px solid var(--line, rgba(255,255,255,0.08));
}
.cp-cat-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.cp-cat-name{
  font-family: var(--f-disp, 'Saira Condensed', sans-serif);
  font-weight:700; text-transform:uppercase; font-size:15px;
  color: var(--text, #F4F2F0);
}
.cp-cat-desc{
  font-size:13px; line-height:1.5; color: rgba(244,242,240,0.5); margin:0;
}
.cp-always{
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color: rgba(63,191,92,0.8); background: rgba(63,191,92,0.1);
  padding:4px 10px; border-radius:999px;
}

/* toggle switch */
.cp-toggle{ position:relative; width:44px; height:24px; flex-shrink:0; }
.cp-toggle input{ opacity:0; width:0; height:0; position:absolute; }
.cp-toggle .slider{
  position:absolute; inset:0; cursor:pointer;
  background: rgba(255,255,255,0.1); border-radius:999px;
  transition: background .2s ease;
}
.cp-toggle .slider::after{
  content:""; position:absolute; left:3px; top:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; transition: transform .2s ease;
}
.cp-toggle input:checked + .slider{
  background: var(--red, #D8211F);
}
.cp-toggle input:checked + .slider::after{
  transform: translateX(20px);
}

.cp-foot{
  margin-top:22px; display:flex; gap:10px; justify-content:flex-end;
}

/* ---- Responsive ---- */
@media (max-width: 600px){
  .cb-inner{ flex-direction:column; align-items:stretch; }
  .cb-actions{ justify-content:stretch; }
  .cb-btn{ flex:1; }
}