/* ============================================================================
   ECM — Cookie banner
   Stile allineato al sistema visivo del tema (custom.css). I token sono letti da
   :root con fallback, così il banner resta corretto anche se caricato da solo.
   ========================================================================== */

.ecmprivacy-cookie {
  position: fixed;
  z-index: 10000;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 46rem;
  margin-inline: auto;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--tc-paper, #f4f0e6);
  color: var(--tc-ink, #1b1a16);
  border: 1px solid var(--tc-rule, #ddd6c2);
  border-top: 3px solid var(--tc-yellow, #d6c62e);
  box-shadow: 0 -2px 40px rgba(27, 26, 22, .16);
  font-size: .9375rem;
  line-height: 1.6;
}

.ecmprivacy-cookie[hidden] { display: none; }

.ecmprivacy-cookie.is-visible {
  animation: ecmprivacy-cookie-in .28s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes ecmprivacy-cookie-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ecmprivacy-cookie.is-visible { animation: none; }
}

/* ── Titolo e testo ─────────────────────────────────────────────────────── */
.ecmprivacy-cookie__title {
  font-family: var(--tc-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0 0 .5rem;
  color: var(--tc-ink, #1b1a16);
}

.ecmprivacy-cookie__text {
  margin: 0;
  max-width: 60ch;
  color: var(--tc-ink-soft, #4a4740);
}

.ecmprivacy-cookie__policy-link {
  color: var(--tc-olive-dark, #5f5d1f);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ecmprivacy-cookie__policy-link:hover { color: var(--tc-ink, #1b1a16); }

/* ── X di chiusura (= rifiuto) ──────────────────────────────────────────── */
.ecmprivacy-cookie__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--tc-ink-soft, #4a4740);
  border-radius: 2px;
  transition: color .18s ease, background-color .18s ease;
}

.ecmprivacy-cookie__close:hover {
  color: var(--tc-ink, #1b1a16);
  background: rgba(27, 26, 22, .06);
}

/* ── Pannello categorie ─────────────────────────────────────────────────── */
.ecmprivacy-cookie__prefs {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tc-rule, #ddd6c2);
  display: grid;
  gap: .75rem;
}

.ecmprivacy-cookie__prefs[hidden] { display: none; }

.ecmprivacy-cookie__cat {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
  font-size: .875rem;
  color: var(--tc-ink-soft, #4a4740);
  min-height: 44px;
  padding: .2rem 0;
}

.ecmprivacy-cookie__cat input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .18rem;
  accent-color: var(--tc-olive, #83812f);
  cursor: pointer;
}

.ecmprivacy-cookie__cat input[disabled] { cursor: not-allowed; opacity: .55; }

.ecmprivacy-cookie__cat strong { color: var(--tc-ink, #1b1a16); font-weight: 700; }

/* ── Pulsanti ───────────────────────────────────────────────────────────── */
.ecmprivacy-cookie__actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-items: center;
}

.ecmprivacy-cookie__btn {
  font-family: var(--tc-font-body, "Inter", system-ui, sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .8rem 1.5rem;
  min-height: 44px;
  border-radius: 2px;
  border: 1px solid var(--tc-ink, #1b1a16);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Accetta e Rifiuta hanno lo STESSO peso visivo: è un requisito del Garante,
   non una scelta estetica. Non differenziarli. */
.ecmprivacy-cookie__btn--equal {
  background: var(--tc-ink, #1b1a16);
  color: var(--tc-paper, #f4f0e6);
  flex: 1 1 11rem;
}

.ecmprivacy-cookie__btn--equal:hover {
  background: var(--tc-olive-dark, #5f5d1f);
  border-color: var(--tc-olive-dark, #5f5d1f);
}

.ecmprivacy-cookie__btn--ghost {
  background: transparent;
  color: var(--tc-ink, #1b1a16);
  border-color: var(--tc-rule-strong, #b9b092);
}

.ecmprivacy-cookie__btn--ghost:hover {
  border-color: var(--tc-ink, #1b1a16);
  background: rgba(27, 26, 22, .04);
}

.ecmprivacy-cookie__btn--save {
  background: var(--tc-yellow, #d6c62e);
  color: var(--tc-ink, #1b1a16);
  border-color: var(--tc-yellow, #d6c62e);
}

.ecmprivacy-cookie__btn--save:hover {
  background: var(--tc-yellow-deep, #c0b022);
  border-color: var(--tc-yellow-deep, #c0b022);
}

.ecmprivacy-cookie__btn--save[hidden] { display: none; }

.ecmprivacy-cookie__btn:focus-visible,
.ecmprivacy-cookie__close:focus-visible {
  outline: 2px solid var(--tc-olive, #83812f);
  outline-offset: 2px;
}

/* ── Link "Preferenze cookie" nel footer ────────────────────────────────── */
.ecmprivacy-cookie-reopen {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 0;
  padding: .5rem 0;
  min-height: 44px;
  cursor: pointer;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: inherit;
  opacity: .85;
  transition: opacity .18s ease;
}

.ecmprivacy-cookie-reopen:hover { opacity: 1; text-decoration: underline; }

.ecmprivacy-cookie-reopen .material-icons { font-size: 1.05rem; }

.ecmprivacy-cookie-reopen:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .ecmprivacy-cookie {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 1.25rem 1.25rem;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
  }

  .ecmprivacy-cookie__title { font-size: 1.3rem; }

  .ecmprivacy-cookie__actions { flex-direction: column; align-items: stretch; }

  .ecmprivacy-cookie__btn { width: 100%; flex: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   [ECM 2026-09-03] "Preferenze cookie" da link di footer a PULSANTE FISSO,
   stesso schema di ecotempo e doctorbike: a riposo è solo l'ingranaggio,
   all'hover (o al focus da tastiera) si apre e mostra l'etichetta.
   Qui in basso a DESTRA: su questo sito non c'è il pulsante WhatsApp.
   Palette del progetto: inchiostro a riposo, oliva quando si apre.
   ═══════════════════════════════════════════════════════════════════════ */
.ecmprivacy-cookie-reopen {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1090;
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 46px;                 /* a riposo: solo il cerchio con l'ingranaggio */
  overflow: hidden;
  padding: .6rem;
  border: 0;
  border-radius: 50px;
  background: #1b1a16;             /* --tc-ink, scritto per esteso: questo CSS
                                      vive nel modulo e non vede i token del tema */
  color: #f4f0e6;
  box-shadow: 0 4px 14px rgba(27, 26, 22, .28);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  transition: max-width .28s cubic-bezier(.2,.7,.3,1), background .18s ease, box-shadow .18s ease;
}
.ecmprivacy-cookie-reopen:hover,
.ecmprivacy-cookie-reopen:focus-visible {
  max-width: 260px;
  gap: .5rem;
  background: #5f5d1f;             /* --tc-olive-dark */
  box-shadow: 0 6px 18px rgba(27, 26, 22, .34);
  text-decoration: none;
  opacity: 1;
}
.ecmprivacy-cookie-reopen:focus-visible {
  outline: 2px solid #d6c62e;      /* --tc-yellow */
  outline-offset: 3px;
}
.ecmprivacy-cookie-reopen .material-icons {
  font-size: 1.35rem;
  flex: 0 0 auto;
  animation: ecmprivacy-gear 8s linear infinite;
}
.ecmprivacy-cookie-reopen:hover .material-icons { animation-duration: 2s; }
@keyframes ecmprivacy-gear { to { transform: rotate(360deg); } }

/* Mentre il banner è aperto il pulsante non serve. Il JS marca il BANNER
   (.is-visible), non il body, quindi si risale con :has(). Se un browser non
   lo supporta non succede nulla di male: il banner è fisso a z-index 2000 e
   copre comunque il pulsante, che sta a 1090. */
body:has(.ecmprivacy-cookie.is-visible) .ecmprivacy-cookie-reopen { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ecmprivacy-cookie-reopen { transition: background .18s ease; }
  .ecmprivacy-cookie-reopen .material-icons { animation: none; }
}

/* Su schermo stretto resta il cerchio: l'etichetta si apre al tocco (focus). */
@media (max-width: 36rem) {
  .ecmprivacy-cookie-reopen { right: 12px; bottom: 12px; }
}

/* L'etichetta a riposo è chiusa davvero: larghezza zero e trasparente.
   Il pulsante resta un cerchio pulito da 46px (sopra i 44px di area
   toccabile minima), e l'aria-label tiene il nome per chi usa uno screen
   reader anche mentre il testo non si vede. */
.ecmprivacy-cookie-reopen__label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .28s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}
.ecmprivacy-cookie-reopen:hover .ecmprivacy-cookie-reopen__label,
.ecmprivacy-cookie-reopen:focus-visible .ecmprivacy-cookie-reopen__label {
  max-width: 14rem;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ecmprivacy-cookie-reopen__label { transition: opacity .2s ease; }
}