/* ============================================================================
   MonkeysGod Theme — Cookie Consent Banner Styling

   Veste il banner del plugin cb-cookie-banner col design system monkeysgod.

   STRATEGIA: Il plugin usa variabili Elementor con fallback neon (#00FF99,
   #00cc7a, #0073aa, #666). Invece di combattere sulla specificità con
   selettori e !important, RIDEFINISCE le variabili Elementor che il plugin
   consuma, sullo scope del banner, con valori monkeysgod. Così
   `var(--e-global-color-accent, #00FF99)` trova la variabile definita qui
   e la usa automaticamente per TUTTI gli elementi (bottoni, hover, outline)
   — senza !important, senza selettori ad alta specificità, robusto al
   minify/combine di WP Fastest Cache.

   MAPPATURA VARIABILI ELEMENTOR → DESIGN MONKEYSGOD:
     --e-global-color-accent (#00FF99, #0073aa neon) → #fdc80f (giallo brand)
     --e-global-color-b7e33d4 (#00cc7a neon) → #d9a900 (giallo scuro hover)
     --e-global-color-secondary (#666) → #4b443c (ink-2, grigio monkeysgod)
     --e-global-color-primary (AMBIGUO, 3 usi incompatibili) → NON definito
                              globalmente; override mirati per ogni caso.

   RISOLUZIONE AMBIGUITÀ --e-global-color-primary (frontend.css del plugin):
   Linea 133: bottone primario TESTO
     button.cb-btn-primary { color: var(--e-global-color-primary, #000000); }
     Usa: NERO su sfondo GIALLO → deve rimanere nero (#15110d)
   Linea 252: modal BACKGROUND
     .cb-modal-content { background: var(--e-global-color-primary, #000000); }
     Usa: NERO scuro per sfondo modale → va bene (#15110d)
   Linea 364: manage button TESTO (pagina policy)
     .cb-manage-cookies { color: var(--e-global-color-primary, #fff); }
     Usa: BIANCO su sfondo grigio (#666) → deve restare bianco (#ffffff)

   Una definizione globale di --e-global-color-primary a un singolo valore
   ROMPE almeno uno dei tre casi. Soluzione: NON la definisco globalmente,
   faccio override mirati con selettori specifici (vedi sotto, linee ~220+).
   ============================================================================ */

/* RIDEFINISCI VARIABILI ELEMENTOR sul scope del banner.
   Il plugin le trova già impostate e usa queste, ignorando i fallback neon.
   Questo è il FULCRO della soluzione: senza !important, senza specific selector
   combat, solo sovrascrittura della variabile CSS a scope limitato. */
#cb-cookie-banner,
#cb-cookie-modal,
.cb-cookie-banner,
.cb-manage-trigger {
  --e-global-color-accent: #fdc80f;    /* Giallo brand: sostituisce #00FF99, #0073aa */
  --e-global-color-b7e33d4: #d9a900;   /* Giallo scuro hover: sostituisce #00cc7a */
  --e-global-color-secondary: #4b443c; /* Grigio ink-2: sostituisce #666 */
  /* --e-global-color-primary: NON definito qui (vedi override specifici sotto) */
}

/* ---- BANNER CONTAINER ---- */
#cb-cookie-banner,
.cb-cookie-banner,
.cb-banner-container {
  background: var(--paper);
  color: var(--ink);
}

.cb-banner-container {
  border: var(--outline-w) solid var(--ink);
}

.cb-banner-content {
  background: inherit;
}

/* ---- TITOLI E TESTO ---- */
.cb-banner-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 22px);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
  line-height: 1.2;
}

.cb-banner-text,
.cb-banner-text p {
  font-family: var(--font-ui);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.cb-banner-links {
  font-family: var(--font-ui);
  color: var(--ink);
}

.cb-banner-links a {
  color: var(--ink);
  text-decoration: underline;
  transition: color .14s;
}

.cb-banner-links a:hover {
  color: var(--accent);
}

/* ---- BOTTONI GENERICI ---- */
.cb-btn {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s, color .12s;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.cb-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}

.cb-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---- BOTTONE PRIMARIO (Accetta/Rifiuta) ---- */
/* Il plugin applica background via var(--e-global-color-accent, #00FF99)
   e color via var(--e-global-color-primary, #000000).
   Siccome abbiamo ridefinito --e-global-color-accent = #fdc80f, il background
   sarà giallo. Per il testo, serve nero (#15110d) per il contrasto su giallo:
   override esplicito di color. */
button.cb-btn.cb-btn-primary {
  color: var(--accent-ink);  /* #15110d, nero su giallo */
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 700;
}

button.cb-btn.cb-btn-primary:hover {
  /* Hover: il plugin usa var(--e-global-color-b7e33d4, #00cc7a) per background.
     Abbiamo ridefinito quel --e-global-color-b7e33d4 = #d9a900 (giallo scuro).
     Non serve override aggiuntivo: il browser usa già il valore ridefinito. */
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}

button.cb-btn.cb-btn-primary:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ---- BOTTONE SECONDARIO ---- */
.cb-btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: none;
}

.cb-btn-secondary:hover {
  transform: translate(-1px, -1px);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
}

.cb-btn-secondary:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---- BOTTONE TERZIARIO ---- */
.cb-btn-tertiary {
  background: var(--surface);
  color: var(--ink);
  border: var(--outline-w) solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.cb-btn-tertiary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}

.cb-btn-tertiary:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---- MODALE PREFERENZE ---- */
#cb-cookie-modal,
.cb-modal {
  background: var(--paper);
  color: var(--ink);
  border: var(--outline-w) solid var(--ink);
}

.cb-modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Il plugin applica background via var(--e-global-color-primary, #000000).
   Siccome NON abbiamo ridefinito --e-global-color-primary globalmente (per
   evitare conflitti col suo uso in 3 contesti), qui overridiamo direttamente
   il background a nero monkeysgod. */
.cb-modal-content {
  background: var(--ink);  /* Nero scuro: #15110d */
  color: var(--paper);     /* Testo chiaro sul fondo scuro */
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}

.cb-modal-header {
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--outline-w) solid var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 20px;
}

.cb-modal-header h3 {
  color: var(--paper);
  margin: 0;
}

.cb-modal-body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  padding: 20px;
}

.cb-modal-body p,
.cb-modal-body .cb-category-desc {
  color: color-mix(in srgb, var(--paper) 86%, transparent);
}

.cb-modal-footer {
  background: var(--ink);
  color: var(--paper);
  border-top: var(--outline-w) solid var(--ink);
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cb-modal-close {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: transform .12s, box-shadow .12s;
}

.cb-modal-close:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--accent);
  background: rgba(253, 200, 15, 0.12);
}

.cb-modal-close:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--accent);
}

/* ---- CATEGORIE E TOGGLE ---- */
.cb-categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cb-category {
  background: var(--surface-2, #e9e4d8);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cb-modal-body .cb-category {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(253, 200, 15, 0.3);
}

.cb-category-header {
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink);
  font-weight: 700;
}

.cb-modal-body .cb-category-header {
  color: var(--paper);
}

.cb-category-desc {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-2, var(--ink));
  margin-top: 4px;
  line-height: 1.4;
}

.cb-modal-body .cb-category-desc {
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* Toggle switch */
.cb-category input[type="checkbox"],
.cb-toggle {
  width: 44px;
  height: 24px;
  appearance: none;
  background: var(--surface-2, #e9e4d8);
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background .2s;
  flex: 0 0 auto;
}

.cb-modal-body .cb-category input[type="checkbox"] {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(253, 200, 15, 0.5);
}

.cb-category input[type="checkbox"]:checked,
.cb-toggle:checked {
  background: var(--accent);
  border-color: var(--ink);
}

.cb-category input[type="checkbox"]::before,
.cb-toggle::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: 50%;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  transition: left .2s;
  box-shadow: 1px 1px 0 var(--ink);
}

.cb-modal-body .cb-category input[type="checkbox"]::before {
  background: var(--accent);
}

.cb-category input[type="checkbox"]:checked::before,
.cb-toggle:checked::before {
  left: 23px;
}

/* ---- TRIGGER "GESTISCI COOKIE" ---- */
/* Il plugin applica background via var(--e-global-color-accent, #0073aa)
   (linea 201 del frontend.css: outline su manage trigger hover).
   Abbiamo ridefinito --e-global-color-accent = #fdc80f, quindi l'outline
   sarà giallo — coerente. */
.cb-manage-trigger {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s;
}

.cb-manage-trigger:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--paper);
}

.cb-manage-trigger:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---- MANAGE COOKIES BUTTON (Cookie Policy page) ---- */
/* Il plugin applica background via var(--e-global-color-secondary, #666)
   e color via var(--e-global-color-primary, #fff).
   Abbiamo ridefinito --e-global-color-secondary = #4b443c (grigio monkeysgod).
   Per il testo, serve BIANCO (#fff) su sfondo grigio: va bene il fallback,
   ma lo esplicitiamo per chiarezza.
   NOTA: questo button vive fuori dal banner (è sulla pagina Cookie Policy),
   quindi lo regoliamo qui solo come completamento. */
.cb-manage-button-wrapper .cb-manage-cookies {
  color: var(--surface);  /* Bianco esplicito su sfondo grigio */
  border-color: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform .12s, box-shadow .12s;
}

.cb-manage-button-wrapper .cb-manage-cookies:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}

.cb-manage-button-wrapper .cb-manage-cookies:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 680px) {
  .cb-banner-title {
    font-size: clamp(14px, 3vw, 18px);
  }

  .cb-banner-text,
  .cb-banner-text p {
    font-size: 13px;
  }

  .cb-btn {
    font-size: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
  }

  button.cb-btn.cb-btn-primary {
    box-shadow: 2px 2px 0 var(--ink);
  }

  .cb-modal-content {
    width: 90vw;
    max-height: 90vh;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  }

  .cb-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cb-btn {
    width: 100%;
  }
}