/* ══════════════════════════════════════════════
   COOKIE CONSENT — Stili standalone
   Prefisso .cc-* — nessun conflitto con il tema
   Variabili CSS: usa quelle del tema se presenti,
   altrimenti fallback neutri
══════════════════════════════════════════════ */

/* ── Variabili locali con fallback ── */
.cc-wrap,
.cc-backdrop {
  --cc-bg        : var(--bg,  #ffffff);
  --cc-sur       : var(--sur, #f5f5f3);
  --cc-tx        : var(--tx,  #0e0d0c);
  --cc-tm        : var(--tm,  #6b6862);
  --cc-maincolor      : var(--gold,#2e8dd4);
  --cc-bd        : var(--bd,  #e0deda);
  --cc-font-sans : var(--font-sans, 'Jost', sans-serif;);
  --cc-font-serif: var(--font-serif, 'Jost', sans-serif;);
  --cc-ease      : var(--ease, cubic-bezier(.4,0,.2,1));
  --cc-t         : var(--t,   .2s);
  --cc-radius    : 0;
  --cc-selradio  : 14px;
  --cc-switchradio  : 50%;
}

/* ── Backdrop bloccante ── */
.cc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--cc-ease), visibility .35s var(--cc-ease);
}

.cc-backdrop--visible {
  opacity: 1;
  visibility: visible;
}

/* ── Wrapper dialog ── */
.cc-wrap {
  position: fixed;
  inset: 0;
  z-index: 9991;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--cc-ease), visibility .35s var(--cc-ease);
  /* Outline per focus sul wrapper stesso */
  outline: none;
}

.cc-wrap--visible {
  opacity: 1;
  visibility: visible;
}

/* ── Box modale ── */
.cc-box {
  background: var(--cc-bg);
  border: 1px solid var(--cc-bd);
  border-radius: var(--cc-radius);
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 3rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
}

/* ── Header ── */
.cc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1.6rem;
  border-bottom: 1px solid var(--cc-bd);
  flex-shrink: 0;
}

.cc-title {
  font-family: var(--cc-font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--cc-maincolor);
  margin: 0;
  line-height: 1.2;
}

.cc-close {
  background: none;
  border: 1px solid var(--cc-bd);
  border-radius: var(--cc-radius);
  color: var(--cc-tm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  transition: color var(--cc-t), border-color var(--cc-t);
  margin-top: .1rem;
}

.cc-close:hover {
  color: var(--cc-tx);
  border-color: var(--cc-tx);
}

.cc-close:focus-visible {
  outline: 2px solid var(--cc-maincolor);
  outline-offset: 2px;
}

/* ── Body scrollabile ── */
.cc-body {
  padding: 1.25rem 1.75rem;
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
}

.cc-desc {
  font-family: var(--cc-font-sans);
  font-size: .82rem;
  color: var(--cc-tm);
  line-height: 1.65;
  margin: 0 0 10px;
}

/* ── Lista categorie ── */
.cc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom:10px;
}

.cc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--cc-bd);
  margin-bottom: 10px;
}

.cc-item:first-child {
  border-top: 0px solid var(--cc-bd);
}

.cc-item-info {
  flex: 1;
  min-width: 0;
}

.cc-item-label {
  font-family: var(--cc-font-sans);
  font-size: .8rem;
  color: var(--cc-tx);
  line-height: 1.55;
  margin: 0;
}

.cc-item-label b {
  font-weight: 600;
}

/* Badge "non disattivabile" */
.cc-badge {
  display: inline-block;
  margin-left: .5rem;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cc-maincolor);
  border: 1px solid var(--cc-maincolor);
  padding: .1rem .4rem;
  vertical-align: middle;
}

/* ── Switch WCAG (role=switch) ── */
.cc-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  background: var(--cc-bd);
  border: none;
  border-radius: var(--cc-selradio);
  cursor: pointer;
  padding: 0;
  transition: background var(--cc-t) var(--cc-ease);
}

.cc-switch[aria-checked="true"] {
  background: var(--cc-maincolor);
}

.cc-switch--disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Pallino ── */
.cc-switch::after {
  content: '';
  position: absolute;
  left: 4px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: var(--cc-switchradio);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform var(--cc-t) var(--cc-ease);
}

.cc-switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

.cc-switch:focus-visible {
  outline: 2px solid var(--cc-maincolor);
  outline-offset: 3px;
}

/* ── Footer ── */
.cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--cc-bd);
  background: var(--cc-sur);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cc-policy {
  margin: 0;
  font-family: var(--cc-font-sans);
  font-size: .72rem;
  color: var(--cc-tm);
  flex: 1;
  line-height: normal;
}

.cc-policy-link {
  color: var(--cc-maincolor);
  text-decoration: none;
  transition: opacity var(--cc-t);
}

.cc-policy-link:hover {
  opacity: .75;
}

/* ── Bottoni ── */
.cc-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.cc-btn {
  font-family: var(--cc-font-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .7rem 1.6rem;
  border-radius: var(--cc-radius);
  cursor: pointer;
  transition: background var(--cc-t), color var(--cc-t), border-color var(--cc-t);
  white-space: nowrap;
}

.cc-btn--secondary {
  background: transparent;
  border: 1px solid var(--cc-bd);
  color: var(--cc-tx);
}

.cc-btn--secondary:hover {
  border-color: var(--cc-tx);
}

.cc-btn--primary {
  background: var(--cc-maincolor);
  border: 1px solid var(--cc-maincolor);
  color: var(--cc-bg);
}

.cc-btn--primary:hover {
  opacity: .88;
}

.cc-btn:focus-visible {
  outline: 2px solid var(--cc-maincolor);
  outline-offset: 2px;
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .cc-wrap,
[data-bs-theme="dark"] .cc-backdrop {
  --cc-bg   : var(--bg,  #0e0d0c);
  --cc-sur  : var(--sur, #1a1917);
  --cc-tx   : var(--tx,  #f5f5f3);
  --cc-tm   : var(--tm,  #9e9b96);
  --cc-bd   : var(--bd,  #2a2926);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cc-backdrop,
  .cc-wrap,
  .cc-switch,
  .cc-switch::after {
    transition: none;
  }
}

/* ── Responsive ── */
@media (max-width: 575px) {
  .cc-wrap {
    padding: 0;
    align-items: flex-end;
  }

  .cc-box {
    max-width: 100%;
    max-height: 90dvh;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .cc-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .cc-actions {
    width: 100%;
  }

  .cc-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

.cc-item-title {
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cc-tx);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .3rem;
    flex-wrap: wrap;
}

.cc-item-title  svg {fill:var(--cc-maincolor);}

ul.cc-list li:last-child {border-bottom: 0px; padding-bottom: 0px;}