/*!
 * N°76 Studio — cookie consent UI
 * Banner + modal + floating button. Matches site chrome.
 */

#cc-root{
  --cc-bg:#f5f4f0;
  --cc-bg-soft:#efede7;
  --cc-text:#111;
  --cc-muted:#888;
  --cc-border:#d8d6d0;
  --cc-accent:#1a1a1a;
  --cc-ease:cubic-bezier(.22,1,.36,1);
  font-family:'Inter',sans-serif;
  color:var(--cc-text);
}
#cc-root *,#cc-root *::before,#cc-root *::after{box-sizing:border-box}

@keyframes cc-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes cc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes cc-fade{from{opacity:0}to{opacity:1}}

/* ============ BANNER — liquid glass, centered ============ */
#cc-banner{
  position:fixed;
  left:1rem;right:1rem;bottom:1.6rem;
  margin:0 auto;
  z-index:9998;
  max-width:720px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  border:.5px solid rgba(255,255,255,.45);
  border-radius:18px;
  padding:1.1rem 1.2rem 1.1rem 1.3rem;
  display:flex;align-items:center;gap:1rem;
  flex-wrap:wrap;justify-content:space-between;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -1px 0 rgba(0,0,0,.04) inset,
    0 18px 50px -22px rgba(0,0,0,.35),
    0 4px 14px -8px rgba(0,0,0,.18);
  color:rgba(17,17,17,.85);
  animation:cc-rise .55s var(--cc-ease) both;
}
#cc-banner[hidden]{display:none}
.cc-banner-copy{
  flex:1 1 280px;min-width:0;
}
.cc-banner-eyebrow{display:none}
.cc-banner-title{
  font-family:'Inter',sans-serif;
  font-weight:500;font-size:.82rem;line-height:1.3;
  margin:0 0 .15rem;color:rgba(17,17,17,.95);letter-spacing:-.005em;
}
.cc-banner-text{
  font-size:.7rem;line-height:1.5;color:rgba(17,17,17,.62);
  font-weight:400;margin:0;
}
.cc-banner-text a{
  color:rgba(17,17,17,.95);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:.5px;
}
.cc-banner-actions{
  display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;justify-content:flex-end;
}

/* ============ BUTTONS — glass ============ */
.cc-btn{
  font-family:'Martian Mono',monospace;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.85rem 1.3rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .3s var(--cc-ease), color .3s var(--cc-ease), border-color .3s, box-shadow .3s;
  border:.5px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  color:rgba(17,17,17,.95);
  white-space:nowrap;
  line-height:1;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
.cc-btn:hover{
  background:rgba(255,255,255,.38);
  border-color:rgba(255,255,255,.85);
}
.cc-btn-ghost{
  border-color:transparent;background:transparent;
  color:rgba(17,17,17,.55);
  padding-left:.6rem;padding-right:.6rem;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
}
.cc-btn-ghost:hover{color:rgba(17,17,17,.95);background:transparent;border-color:transparent}
.cc-btn-primary{
  background:rgba(17,17,17,.92);color:#fff;
  border-color:rgba(17,17,17,.92);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.5);
}
.cc-btn-primary:hover{background:#000;border-color:#000}

/* ============ FLOATING BADGE (specchietto) — liquid glass, centered ============ */
#cc-toggle{
  position:fixed;
  left:50%;bottom:1.2rem;
  transform:translateX(-50%);
  z-index:9997;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .85rem .5rem .7rem;
  font-family:'Martian Mono',monospace;
  font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(17,17,17,.62);
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:.5px solid rgba(255,255,255,.5);
  border-radius:999px;
  cursor:pointer;
  transition:color .35s var(--cc-ease), background .35s var(--cc-ease), border-color .35s, transform .35s var(--cc-ease), box-shadow .35s;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.04) inset,
    0 8px 24px -12px rgba(0,0,0,.18);
}
#cc-toggle[hidden]{display:none}
#cc-toggle .cc-dot{
  width:5px;height:5px;border-radius:50%;background:rgba(17,17,17,.7);
  animation:cc-pulse 3s ease-in-out infinite;
}
#cc-toggle:hover{
  color:rgba(17,17,17,.95);
  background:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.7);
  transform:translateX(-50%) translateY(-2px);
}

/* ============ MODAL ============ */
#cc-modal{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
#cc-modal[hidden]{display:none}
.cc-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(17,17,17,.28);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  animation:cc-fade .3s var(--cc-ease) both;
}
.cc-modal-dialog{
  position:relative;
  width:100%;max-width:640px;max-height:88vh;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(36px) saturate(180%);
  -webkit-backdrop-filter:blur(36px) saturate(180%);
  border:.5px solid rgba(255,255,255,.5);
  border-radius:22px;
  display:flex;flex-direction:column;
  overflow:hidden;
  color:rgba(17,17,17,.92);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.04) inset,
    0 32px 80px -30px rgba(0,0,0,.45),
    0 8px 24px -12px rgba(0,0,0,.25);
  animation:cc-rise .45s var(--cc-ease) both;
}
.cc-modal-head{
  padding:1.8rem 2rem 1.2rem;
  border-bottom:.5px solid rgba(255,255,255,.35);
}
.cc-modal-eyebrow{
  display:flex;align-items:center;gap:.55rem;
  font-family:'Martian Mono',monospace;
  font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cc-muted);margin-bottom:.7rem;
}
.cc-modal-eyebrow .cc-dot{
  width:5px;height:5px;border-radius:50%;background:var(--cc-text);
  animation:cc-pulse 3s ease-in-out infinite;
}
.cc-modal-title{
  font-family:'Inter',sans-serif;
  font-weight:500;font-size:1.5rem;line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .5rem;
}
.cc-modal-title em{font-style:italic;font-weight:300;color:rgba(17,17,17,.55)}
.cc-modal-sub{
  font-size:.78rem;line-height:1.55;color:rgba(17,17,17,.62);
  font-weight:400;margin:0;
}
.cc-modal-sub a{color:rgba(17,17,17,.95);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.5px}
.cc-modal-close{
  position:absolute;top:1rem;right:1rem;
  width:34px;height:34px;
  border:.5px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border-radius:999px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(17,17,17,.7);
  transition:color .3s, background .3s, border-color .3s, transform .3s;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}
.cc-modal-close:hover{
  color:rgba(17,17,17,.95);
  background:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.7);
}
.cc-modal-close svg{width:14px;height:14px}

.cc-modal-body{
  padding:1.4rem 2rem;
  overflow-y:auto;
  flex:1;
}

/* ============ CATEGORY CARDS — glass tiles ============ */
.cc-category{
  border:.5px solid rgba(255,255,255,.5);
  border-radius:14px;
  padding:1.05rem 1.15rem;
  margin-bottom:.7rem;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.04) inset;
  transition:border-color .3s, background .3s, transform .35s var(--cc-ease);
}
.cc-category:hover{
  border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.32);
}
.cc-cat-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.cc-cat-name{
  font-family:'Inter',sans-serif;
  font-weight:500;font-size:.92rem;color:rgba(17,17,17,.95);
  letter-spacing:-.01em;margin:0;
}
.cc-cat-tag{
  font-family:'Martian Mono',monospace;
  font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(17,17,17,.5);
  margin-left:.5rem;
}
.cc-cat-desc{
  font-size:.74rem;line-height:1.6;color:rgba(17,17,17,.6);
  font-weight:400;margin:.5rem 0 0;
}

/* Toggle switch — glass */
.cc-switch{
  position:relative;display:inline-block;
  width:38px;height:22px;flex-shrink:0;
}
.cc-switch input{opacity:0;width:0;height:0}
.cc-switch-slider{
  position:absolute;inset:0;cursor:pointer;
  background:rgba(17,17,17,.18);
  border:.5px solid rgba(255,255,255,.45);
  border-radius:999px;
  transition:background .3s var(--cc-ease), border-color .3s;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.06) inset;
}
.cc-switch-slider::before{
  content:"";position:absolute;
  left:3px;top:3px;
  width:15px;height:15px;
  background:#fff;border-radius:50%;
  transition:transform .3s var(--cc-ease);
  box-shadow:0 2px 4px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.04);
}
.cc-switch input:checked + .cc-switch-slider{background:rgba(17,17,17,.85);border-color:rgba(17,17,17,.85)}
.cc-switch input:checked + .cc-switch-slider::before{transform:translateX(16px)}
.cc-switch input:disabled + .cc-switch-slider{
  opacity:.55;cursor:not-allowed;
}

/* ============ MODAL FOOTER ============ */
.cc-modal-foot{
  padding:1.1rem 2rem 1.4rem;
  border-top:.5px solid rgba(255,255,255,.35);
  display:flex;gap:.55rem;flex-wrap:wrap;justify-content:flex-end;
  background:rgba(255,255,255,.08);
}

/* ============ RESPONSIVE ============ */
@media (max-width:780px){
  #cc-banner{
    flex-direction:column;align-items:stretch;
    padding:1rem 1.1rem 1.1rem;
    gap:.85rem;
    left:.75rem;right:.75rem;
    bottom:1rem;border-radius:16px;
  }
  .cc-banner-copy{flex:1 1 auto;min-width:0}
  .cc-banner-actions{justify-content:flex-end;gap:.35rem}
  .cc-banner-actions .cc-btn{padding:.7rem 1rem;font-size:.58rem}
  .cc-modal-head{padding:1.4rem 1.4rem 1rem}
  .cc-modal-body{padding:1.1rem 1.4rem}
  .cc-modal-foot{padding:1rem 1.4rem 1.2rem;justify-content:stretch}
  .cc-modal-foot .cc-btn{flex:1;min-width:0;text-align:center}
  .cc-modal-title{font-size:1.25rem}
  #cc-toggle{bottom:.9rem;padding:.45rem .75rem;font-size:.52rem}
}
@media (max-width:480px){
  #cc-banner{padding:.95rem 1rem 1rem;left:.5rem;right:.5rem;bottom:.75rem}
  .cc-banner-title{font-size:.78rem}
  .cc-banner-text{font-size:.66rem}
  .cc-banner-actions{flex-wrap:wrap;justify-content:stretch}
  .cc-banner-actions .cc-btn{flex:1 1 auto;text-align:center;padding:.65rem .8rem;font-size:.56rem;letter-spacing:.14em}
  .cc-banner-actions .cc-btn-ghost{flex:0 0 auto}
}

@media (prefers-reduced-motion: reduce){
  #cc-banner,#cc-modal *,#cc-toggle{
    animation:none !important;transition-duration:.001ms !important;
  }
}