/*!
 * OndaConsent — stili di default, brand-neutri.
 * Tema via custom properties: sovrascrivi le variabili --oc-* nel CSS del
 * sito (o via config `theme`) senza toccare questo file.
 *
 * Tutta la UI (banner, dialog, fab) vive dentro #oc-root: l'ID nei selettori
 * serve a battere in specificità i reset aggressivi dei temi — es. Hello
 * Elementor stila [type=button] con bordo e colori propri, che a parità di
 * specificità vincerebbero per ordine di caricamento. I placeholder degli
 * iframe stanno nel contenuto della pagina, quindi usano selettori doppi.
 */
:root {
  --oc-bg: #ffffff;
  --oc-fg: #1a1a1a;
  --oc-muted: #666666;
  --oc-border: #e2e2e2;
  --oc-primary: #1a1a1a;
  --oc-primary-fg: #ffffff;
  /* Pulsanti secondari: grigio chiaro derivato da fg/bg, così resta
     coerente quando si cambiano i colori del tema. */
  --oc-btn-bg: color-mix(in srgb, var(--oc-fg) 7%, var(--oc-bg));
  --oc-btn-fg: var(--oc-fg);
  --oc-radius: 0.5rem;
  --oc-font: inherit;
  --oc-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
  /* Larghezza massima del contenuto del banner: allineala al container
     della pagina (es. 1140px con Elementor default). */
  --oc-max-w: 72rem;
  /* Larghezza di lettura delle pagine policy ([oc_policy] / .oc-policy). */
  --oc-policy-w: 48rem;
  --oc-z: 9999;
}

/* Reset difensivo per i nostri controlli, contro gli stili dei temi. */
#oc-root .oc-btn,
#oc-root .oc-dismiss,
#oc-root .oc-fab,
.oc-placeholder .oc-btn {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  min-height: 0;
  width: auto;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

/* Il nostro display:flex su fab/banner batterebbe [hidden] dei reset. */
#oc-root [hidden] {
  display: none !important;
}

/* ------------------------------ banner ------------------------------ */

#oc-root .oc-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--oc-z);
  background: var(--oc-bg);
  color: var(--oc-fg);
  font-family: var(--oc-font);
  border-top: 1px solid var(--oc-border);
  box-shadow: var(--oc-shadow);
}

#oc-root .oc-banner-inner {
  /* content-box: --oc-max-w è la larghezza del CONTENUTO, il padding resta
     fuori dal conteggio. Così 1140px allinea il contenuto del banner al
     contenuto di un container Elementor da 1140px. */
  box-sizing: content-box;
  max-width: var(--oc-max-w);
  margin-inline: auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  #oc-root .oc-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1.5rem;
  }
}

#oc-root .oc-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--oc-fg);
}

#oc-root .oc-desc {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--oc-muted);
}

/* Riga dei link privacy/cookie policy, sempre a capo sotto la descrizione. */
#oc-root .oc-links {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--oc-muted);
}

#oc-root .oc-desc a,
#oc-root .oc-links a {
  color: inherit;
  text-decoration: underline;
}

#oc-root .oc-desc a:hover,
#oc-root .oc-links a:hover {
  color: var(--oc-fg);
}

/* ----------------------------- pulsanti ----------------------------- */

#oc-root .oc-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  #oc-root .oc-actions {
    flex-direction: row;
  }
}

#oc-root .oc-btn,
.oc-placeholder .oc-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font: inherit;
  font-family: var(--oc-font);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--oc-btn-fg);
  background: var(--oc-btn-bg);
  border: 0;
  border-radius: var(--oc-radius);
  transition: background-color 0.15s, color 0.15s;
}

#oc-root .oc-btn:hover,
.oc-placeholder .oc-btn:hover {
  background: color-mix(in srgb, var(--oc-fg) 13%, var(--oc-bg));
  color: var(--oc-btn-fg);
}

#oc-root .oc-btn:focus-visible,
.oc-placeholder .oc-btn:focus-visible {
  outline: 2px solid var(--oc-primary);
  outline-offset: 2px;
}

/* "Accetta" e "Rifiuta" hanno pari evidenza dimensionale (Garante 2021);
   il primary si distingue solo per colore. */
#oc-root .oc-btn-primary,
.oc-placeholder .oc-btn-primary {
  background: var(--oc-primary);
  color: var(--oc-primary-fg);
}

#oc-root .oc-btn-primary:hover,
.oc-placeholder .oc-btn-primary:hover {
  background: color-mix(in srgb, var(--oc-primary) 88%, var(--oc-bg));
  color: var(--oc-primary-fg);
}

/* Solo il segno ×, nel colore del testo: niente cornice, sfondo o ombra. */
#oc-root .oc-dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  color: var(--oc-fg);
}

#oc-root .oc-dismiss:hover {
  background: transparent;
  color: var(--oc-fg);
  opacity: 0.6;
}

#oc-root .oc-dismiss:focus-visible {
  outline: 2px solid var(--oc-primary);
  outline-offset: 2px;
}

/* ------------------------------ dialog ------------------------------ */

#oc-root .oc-dialog {
  margin: auto;
  border: 1px solid var(--oc-border);
  border-radius: calc(var(--oc-radius) * 1.5);
  background: var(--oc-bg);
  color: var(--oc-fg);
  font-family: var(--oc-font);
  padding: 0;
  max-width: min(28rem, calc(100vw - 2rem));
  width: 100%;
}

#oc-root .oc-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

#oc-root .oc-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
}

#oc-root .oc-modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--oc-fg);
}

#oc-root .oc-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#oc-root .oc-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  margin: 0;
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  cursor: pointer;
  line-height: 1.4;
  vertical-align: baseline;
}

#oc-root .oc-cat-locked {
  background: color-mix(in srgb, var(--oc-fg) 4%, var(--oc-bg));
  cursor: default;
}

#oc-root .oc-cat-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}

#oc-root .oc-cat-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--oc-muted);
  margin-top: 0.125rem;
}

#oc-root .oc-cat-desc em {
  font-style: normal;
  font-weight: 500;
}

#oc-root .oc-cat input[type='checkbox'] {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--oc-primary);
}

#oc-root .oc-form footer.oc-actions {
  flex-direction: column-reverse;
}

@media (min-width: 640px) {
  #oc-root .oc-form footer.oc-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* ------------------------- icona flottante -------------------------- */

#oc-root .oc-fab {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: calc(var(--oc-z) - 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  cursor: pointer;
  color: var(--oc-fg);
  background: color-mix(in srgb, var(--oc-bg) 80%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--oc-border);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s, background-color 0.15s;
}

#oc-root .oc-fab:hover {
  background: var(--oc-bg);
  color: var(--oc-fg);
  transform: scale(1.05);
}

#oc-root .oc-fab:focus-visible {
  outline: 2px solid var(--oc-primary);
  outline-offset: 2px;
}

#oc-root .oc-fab-right {
  left: auto;
  right: 1rem;
}

/* --------------------------- pagine policy -------------------------- */

/* Layout da articolo per i testi renderizzati da [oc_policy] (o per
   qualsiasi contenitore .oc-policy): container di lettura centrato con
   respiro sopra/sotto, per pagine senza template del tema. */
.oc-policy.oc-policy {
  max-width: var(--oc-policy-w);
  margin-inline: auto;
  padding: 3rem 1.25rem 4.5rem;
  font-family: var(--oc-font);
  line-height: 1.65;
}

.oc-policy.oc-policy h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
}

.oc-policy.oc-policy h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.oc-policy.oc-policy p {
  margin: 0 0 1rem;
}

.oc-policy.oc-policy ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  list-style: disc;
}

.oc-policy.oc-policy li {
  margin-bottom: 0.375rem;
}

.oc-policy.oc-policy a {
  color: inherit;
  text-decoration: underline;
}

.oc-policy.oc-policy figure {
  margin: 0 0 1rem;
  max-width: 100%;
  overflow-x: auto;
}

.oc-policy.oc-policy table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 0 1rem;
}

.oc-policy.oc-policy th,
.oc-policy.oc-policy td {
  border: 1px solid var(--oc-border);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.oc-policy.oc-policy th {
  background: color-mix(in srgb, var(--oc-fg) 4%, var(--oc-bg));
  font-weight: 600;
}

/* --------------------------- placeholder ---------------------------- */

.oc-placeholder.oc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 12rem;
  max-width: 100%;
  padding: 1.5rem;
  text-align: center;
  background: color-mix(in srgb, var(--oc-fg) 4%, var(--oc-bg));
  border: 1px dashed var(--oc-border);
  border-radius: var(--oc-radius);
  color: var(--oc-muted);
  font-family: var(--oc-font);
  font-size: 0.875rem;
}

.oc-placeholder.oc-placeholder p {
  margin: 0;
}