/* Banner cookie self-hosted Carnova — verde accessibile, Plus Jakarta Sans.
   Prima layer: banner in basso con Accetta / Rifiuta di pari evidenza +
   Personalizza. Seconda layer: pannello modale con categorie. */

#cc-root { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
#cc-root *, #cc-root *::before, #cc-root *::after { box-sizing: border-box; }

.cc-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  max-width: 560px;
  background: #fff;
  color: #16201A;
  border: 1px solid #E6ECE0;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(20, 40, 25, 0.22);
  padding: 24px 24px 20px;
}
@media (min-width: 620px) { .cc-banner { left: 24px; bottom: 24px; } }

.cc-title { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.cc-text { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: #52605A; }
.cc-text a { color: #3E7E20; font-weight: 600; }

.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.cc-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.cc-btn:active { transform: translateY(1px); }
/* Accetta e Rifiuta hanno la stessa evidenza (requisito Garante). */
.cc-btn--accept { background: #326A19; color: #fff; }
.cc-btn--accept:hover { background: #285715; }
.cc-btn--reject { background: #EEF2EA; color: #1B2A1E; border-color: #DBE3D3; }
.cc-btn--reject:hover { background: #E4EADE; }
.cc-btn--ghost { background: transparent; color: #3E7E20; padding: 12px 12px; }
.cc-btn--ghost:hover { text-decoration: underline; }

.cc-btn--save { background: #326A19; color: #fff; }
.cc-btn--save:hover { background: #285715; }

/* Focus visibile per navigazione da tastiera (WCAG 2.4.7). */
#cc-root :focus-visible {
  outline: 3px solid #1B5FBf;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Pannello preferenze (modale) */
.cc-overlay {
  position: fixed; inset: 0; z-index: 2147483001;
  background: rgba(16, 32, 26, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.cc-modal {
  width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  background: #fff; color: #16201A;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(20, 40, 25, 0.32);
  padding: 28px;
}
.cc-modal .cc-title { font-size: 20px; }

.cc-cat {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid #EDF1E8;
}
.cc-cat:first-of-type { border-top: none; }
.cc-cat-body { flex: 1; }
.cc-cat-name { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.cc-cat-desc { margin: 0; font-size: 13px; line-height: 1.5; color: #52605A; }

/* Toggle */
.cc-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-track {
  position: absolute; inset: 0; border-radius: 999px;
  background: #CDD6C6; transition: background .15s ease;
}
.cc-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.cc-switch input:checked + .cc-track { background: #4F9A2A; }
.cc-switch input:checked + .cc-track::after { transform: translateX(20px); }
.cc-switch input:disabled + .cc-track { background: #4F9A2A; opacity: .55; }
.cc-switch input:focus-visible + .cc-track { outline: 3px solid #1B5FBf; outline-offset: 2px; }

.cc-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Riapri preferenze — pill discreta in basso a sinistra */
.cc-reopen {
  position: fixed; left: 16px; bottom: 16px; z-index: 2147482000;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: #3A463D;
  border: 1px solid #E0E6D9; border-radius: 999px;
  padding: 9px 14px; font-family: inherit; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(20, 40, 25, 0.14); cursor: pointer;
}
.cc-reopen:hover { background: #F6F8F3; }

@media (prefers-reduced-motion: reduce) {
  .cc-btn, .cc-track, .cc-track::after { transition: none; }
}