/* ============================================================
   Modulo Consent — stile banner (dark/oro, in alto)
   Variabili allineate al design system; con fallback se assenti.
   ============================================================ */
.cc-banner{
  position:fixed; top:0; left:0; right:0; z-index:300;
  background:var(--elevated,#1F1B18);
  border-bottom:1px solid var(--line,rgba(255,255,255,.10));
  color:var(--ivory,#F4EEE7);
  transform:translateY(-110%); transition:transform .35s ease;
  box-shadow:0 8px 40px -12px rgba(0,0,0,.6);
}
.cc-banner.cc-open{ transform:translateY(0); }

/* Overlay bloccante: oscura e impedisce l'interazione col sito finché non si sceglie */
.cc-overlay{ position:fixed; inset:0; z-index:299; background:rgba(10,8,7,.75);
  backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .3s; }
.cc-overlay.cc-open{ opacity:1; visibility:visible; }
body.cc-locked{ overflow:hidden; }
.cc-inner{
  max-width:1200px; margin:0 auto; padding:1.1rem 2.5rem 1.1rem 1.25rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
}
@media(min-width:1024px){ .cc-inner{ padding:1.1rem 2.5rem; } }
.cc-text{ flex:1 1 100%; font-size:.9rem; line-height:1.55; }
.cc-text strong{ font-size:1rem; color:var(--gold,#C9A24B); }
.cc-text p{ margin:.3rem 0 0; color:var(--dim,#A89F95); }
.cc-note{ font-size:.8rem; font-style:italic; opacity:.85; }

/* Bottone X (chiudi = accetta) */
.cc-x{ position:absolute; top:.6rem; right:.8rem; background:none; border:0;
  color:var(--dim,#A89F95); font-size:1.8rem; line-height:1; cursor:pointer;
  padding:.1rem .4rem; transition:color .2s; }
.cc-x:hover{ color:var(--gold,#C9A24B); }
/* Desktop: X allineata col bordo destro di "Accetta" (inner ha padding-right 2.5rem, X ha padding .4rem) */
@media(min-width:640px){ .cc-x{ right:max(2.1rem, calc((100% - 1200px)/2 + 2.1rem)); } }
.cc-text a{ color:var(--gold,#C9A24B); }
.cc-text a:hover{ color:var(--gold-light,#E3C078); }

.cc-cats{ flex:1 1 100%; display:grid; gap:.75rem; margin-top:.25rem;
  border-top:1px solid var(--line,rgba(255,255,255,.10)); padding-top:.9rem; }
/* [hidden] deve vincere su display:grid, altrimenti le categorie restano sempre visibili */
.cc-banner [hidden]{ display:none !important; }
@media(min-width:640px){ .cc-cats{ grid-template-columns:repeat(2,1fr); } }
.cc-cat{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; cursor:pointer; }
.cc-cat input{ margin-top:.2rem; accent-color:var(--gold,#C9A24B); width:1.05rem; height:1.05rem; }
.cc-cat small{ color:var(--dim,#A89F95); }

.cc-actions{ display:flex; flex-wrap:wrap; gap:.6rem; flex:1 1 100%; justify-content:space-between; align-items:center; }
/* Accetta sempre all'estrema destra; Personalizza e Salva a sinistra */
.cc-accept{ margin-left:auto; }
.cc-btn{ font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:.6rem 1.1rem; border-radius:.45rem; border:1px solid transparent; transition:.25s; }
.cc-accept{ background:var(--gold,#C9A24B); color:var(--base,#14110F);
  box-shadow:0 0 30px -10px var(--gold,#C9A24B); }
.cc-accept:hover{ background:var(--gold-light,#E3C078); }
.cc-reject,.cc-custom,.cc-save{ background:transparent; color:var(--ivory,#F4EEE7);
  border-color:rgba(255,255,255,.25); }
.cc-reject:hover,.cc-custom:hover,.cc-save:hover{
  border-color:var(--gold,#C9A24B); color:var(--gold,#C9A24B); }

/* Mobile: bottoni full-width, impilati — prima Accetta, poi Personalizza */
@media(max-width:639px){
  .cc-actions{ flex:1 1 100%; flex-direction:column; }
  .cc-btn{ width:100%; padding:.8rem 1.1rem; }
  .cc-accept{ order:1; }
  .cc-custom{ order:2; }
  .cc-save{ order:3; }
}