/* Sustainable NValue — Cookie Consent UI
   Shared across all pages. Uses the site's existing design tokens
   (--ink, --panel, --amber, --amber-deep, --paper, --slate, --line)
   which are already defined in every page's stylesheet. */

.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:var(--panel);
  border-top:1px solid rgba(255,255,255,0.1);
  box-shadow:0 -20px 50px -20px rgba(0,0,0,0.5);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.cc-banner.open{transform:translateY(0);}
.cc-banner-inner{
  max-width:1180px; margin:0 auto; padding:22px 24px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.cc-text{
  flex:1 1 420px; margin:0; color:rgba(255,255,255,0.82);
  font-family:'Inter', system-ui, sans-serif; font-size:0.92rem; line-height:1.6;
}
.cc-text a{color:var(--amber); text-decoration:underline; text-underline-offset:2px;}
.cc-actions{display:flex; gap:12px; flex-wrap:wrap; flex:0 0 auto;}

.cc-btn{
  font-family:'Inter', system-ui, sans-serif;
  font-size:0.9rem; font-weight:600; padding:12px 24px; border-radius:999px;
  cursor:pointer; white-space:nowrap; transition:background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
  border:1px solid transparent;
}
.cc-btn-primary{background:var(--amber); color:#fff; border-color:var(--amber);}
.cc-btn-primary:hover{background:var(--amber-deep); border-color:var(--amber-deep); transform:translateY(-2px);}
.cc-btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,0.3);}
.cc-btn-outline:hover{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5);}
.cc-btn:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* Overlay + customize panel */
.cc-overlay{
  position:fixed; inset:0; background:rgba(6,14,26,0.6);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;
  z-index:310;
}
.cc-overlay.open{opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s linear 0s;}

.cc-panel{
  position:fixed; top:50%; left:50%; z-index:320;
  width:min(92vw, 560px); max-height:min(86vh, 720px);
  transform:translate(-50%, -50%) scale(0.96); opacity:0; visibility:hidden;
  background:linear-gradient(165deg, #0C2035 0%, #132A47 48%, #0D2740 100%);
  border-radius:20px; border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 40px 90px -20px rgba(0,0,0,0.6);
  display:flex; flex-direction:column;
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.cc-panel.open{
  opacity:1; visibility:visible; transform:translate(-50%, -50%) scale(1);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}
.cc-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 26px; border-bottom:1px solid rgba(255,255,255,0.08); flex:0 0 auto;
}
.cc-panel-header h2{
  margin:0; font-family:'Space Grotesk', sans-serif; font-size:1.15rem; color:#fff; font-weight:700;
}
.cc-panel-close{
  width:38px; height:38px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  color:#fff; font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.cc-panel-close:hover{background:rgba(255,255,255,0.16);}
.cc-panel-close:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

.cc-panel-body{padding:22px 26px; overflow-y:auto; flex:1 1 auto;}
.cc-cat{padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.07);}
.cc-cat:last-of-type{border-bottom:none;}
.cc-cat-head{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.cc-cat-title{
  font-family:'Inter', system-ui, sans-serif; font-weight:600; font-size:0.96rem; color:#fff;
  display:flex; align-items:center; gap:8px;
}
.cc-cat-count{
  font-size:0.7rem; font-weight:700; color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.08); border-radius:999px; padding:2px 8px;
}
.cc-cat-desc{margin:8px 0 0; font-family:'Inter', system-ui, sans-serif; font-size:0.85rem; line-height:1.6; color:rgba(255,255,255,0.65);}
.cc-cat-desc strong{color:rgba(255,255,255,0.85);}

.cc-policy-link{margin:18px 0 0; font-size:0.85rem;}
.cc-policy-link a{color:var(--amber); text-decoration:underline; text-underline-offset:2px;}

.cc-switch{
  flex:0 0 auto; width:44px; height:26px; border-radius:999px; position:relative;
  background:rgba(255,255,255,0.14); border:none; cursor:pointer; padding:0;
  transition:background .25s ease;
}
.cc-switch-knob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .25s ease; display:block;
}
.cc-switch.cc-switch-on{background:var(--amber);}
.cc-switch.cc-switch-on .cc-switch-knob{transform:translateX(18px);}
.cc-switch:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
.cc-switch-locked{background:rgba(224,122,62,0.35); cursor:default;}
.cc-switch-locked .cc-switch-knob{transform:translateX(18px); background:var(--amber);}

.cc-panel-footer{
  display:flex; gap:10px; flex-wrap:wrap; padding:20px 26px; border-top:1px solid rgba(255,255,255,0.08); flex:0 0 auto;
}
.cc-panel-footer .cc-btn{flex:1 1 auto; text-align:center;}

/* Floating reopen button */
.cc-reopen{
  position:fixed; left:20px; bottom:20px; z-index:290;
  width:44px; height:44px; border-radius:50%;
  background:var(--panel); border:1px solid rgba(255,255,255,0.14);
  color:#fff; display:none; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 12px 28px -10px rgba(0,0,0,0.5);
  transition:background .25s ease, transform .2s ease;
}
.cc-reopen.visible{display:flex;}
.cc-reopen:hover{background:var(--ink); transform:translateY(-2px);}
.cc-reopen:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

@media (max-width:640px){
  .cc-banner-inner{padding:18px 20px; gap:16px;}
  .cc-actions{width:100%;}
  .cc-btn{flex:1 1 auto; padding:13px 18px; font-size:0.85rem;}
  .cc-panel-footer{flex-direction:column;}
  .cc-reopen{left:14px; bottom:14px;}
}