/* =========================================================
   COOKIE BANNER 9up - STILE (cookie-consent.css)
   Base: sfondo bianco, pulsanti neri.
   Per adattarlo a un sito basta cambiare le variabili --cc-.
   ========================================================= */
:root {
  --cc-bg: #ffffff;            /* sfondo banner e pannello */
  --cc-text: #1C4053;          /* titoli: navy del logo */
  --cc-body: #33556A;          /* testo */
  --cc-muted: #5E7484;         /* testi secondari */
  --cc-primary: #1C4053;       /* pulsante pieno, bordi, interruttori attivi */
  --cc-primary-text: #ffffff;  /* testo del pulsante pieno */
  --cc-line: rgba(28, 64, 83, 0.14);
  --cc-disabled: #d9e2e8;
  --cc-shadow: 0 24px 60px -20px rgba(15, 39, 51, 0.45);
  --cc-radius: 20px;
  --cc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Pulsanti */
.cc-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--cc-font); font-weight: 500; font-size: 1rem; letter-spacing: 0.01em; padding: 14px 28px; border-radius: 999px; border: 2px solid var(--cc-primary); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease; white-space: nowrap; appearance: none; }
.cc-btn-primary { background: var(--cc-primary); color: var(--cc-primary-text); }
.cc-btn-primary:hover { opacity: 0.85; }
.cc-btn-outline { background: transparent; color: var(--cc-primary); }
.cc-btn-outline:hover { background: var(--cc-primary); color: var(--cc-primary-text); }
.cc-btn:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 3px; }

/* X in alto a destra */
.cc-close { position: absolute; top: 16px; right: 16px; background: none; border: none; cursor: pointer; color: var(--cc-muted); padding: 6px; line-height: 0; border-radius: 6px; }
.cc-close:hover { color: var(--cc-text); }
.cc-close:focus-visible { outline: 2px solid var(--cc-primary); }

/* Banner */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; max-width: 620px; margin: 0 auto; background: var(--cc-bg); color: var(--cc-body); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); padding: 22px 26px; font-family: var(--cc-font); max-height: calc(100vh - 32px); overflow-y: auto; transform: translateY(140%); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; }
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.cookie-banner h2 { font-family: var(--cc-font); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--cc-text); margin: 0 32px 8px 0; }
.cookie-banner p { margin: 0 0 16px; font-size: 0.82rem; line-height: 1.55; color: var(--cc-body); }
.cookie-banner p a { color: inherit; text-decoration: underline; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner-actions .cc-btn { flex: 1 1 0; padding: 11px 22px; font-size: 0.88rem; }
.cookie-banner .cc-close { top: 12px; right: 12px; }

@media (max-width: 560px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px 18px; }
  .cookie-banner h2 { font-size: 1rem; }
  .cookie-banner p { font-size: 0.78rem; margin-bottom: 14px; }
  .cookie-banner-actions { flex-direction: column-reverse; gap: 8px; } /* su mobile ACCETTA TUTTO sopra */
  .cookie-banner-actions .cc-btn { width: 100%; flex: none; padding: 10px 20px; }
}

/* Pannello preferenze */
.cookie-modal { position: fixed; inset: 0; z-index: 310; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--cc-font); }
.cookie-modal[hidden] { display: none; }
.cookie-modal-card { position: relative; background: var(--cc-bg); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 32px; }
.cookie-modal-card h3 { font-family: var(--cc-font); font-weight: 500; font-size: 1.5rem; line-height: 1.2; margin: 0 40px 14px 0; color: var(--cc-text); }
.cookie-modal-card > p { color: var(--cc-body); font-size: 0.96rem; line-height: 1.65; margin: 0 0 1em; }
.cookie-modal-card > p a { text-decoration: underline; color: inherit; }

.cookie-category { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--cc-line); }
.cookie-category:first-of-type { border-top: none; padding-top: 8px; }
.cookie-category-text strong { display: block; color: var(--cc-text); font-size: 0.98rem; font-weight: 600; margin-bottom: 4px; }
.cookie-category-text span { display: block; color: var(--cc-muted); font-size: 0.88rem; line-height: 1.55; }

/* Interruttore on/off */
.cookie-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; margin-top: 2px; }
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.cookie-switch-track { position: absolute; inset: 0; background: var(--cc-line); border-radius: 999px; transition: background 0.2s ease; cursor: pointer; }
.cookie-switch-track::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.cookie-switch input:checked + .cookie-switch-track { background: var(--cc-primary); }
.cookie-switch input:checked + .cookie-switch-track::before { transform: translateX(18px); }
.cookie-switch input:disabled + .cookie-switch-track { background: var(--cc-disabled); cursor: not-allowed; }
.cookie-switch input:focus-visible + .cookie-switch-track { outline: 2px solid var(--cc-primary); outline-offset: 2px; }

.cookie-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cookie-modal-actions .cc-btn { flex: 1 1 0; }

/* Riquadro al posto dei contenuti esterni (es. mappa) */
.consent-embed-placeholder { border: 1px dashed var(--cc-line); border-radius: var(--cc-radius); background: #f6f6f6; padding: 36px 24px; text-align: center; font-family: var(--cc-font); }
.consent-embed-placeholder[hidden] { display: none; }
.consent-embed-placeholder p { color: var(--cc-muted); font-size: 0.95rem; max-width: 460px; margin: 0 auto 18px; }
.consent-embed-placeholder p a { text-decoration: underline; color: inherit; }
.consent-embed-placeholder--compact { height: 100%; border: none; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.consent-embed-placeholder--compact p { font-size: 0.85rem; margin-bottom: 12px; }
.consent-embed-placeholder--compact .cc-btn { padding: 9px 20px; font-size: 0.85rem; }

/* Link "Preferenze cookie" nel footer */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal-links a, .footer-legal-links button { text-decoration: none; background: none; border: none; padding: 0; font: inherit; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); cursor: pointer; }
.footer-legal-links a:hover, .footer-legal-links button:hover { color: #fff; text-decoration: underline; }

/* ---------- Adattamenti Just Clean ---------- */
.cc-btn { font-family: "Bricolage Grotesque", var(--cc-font); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; border-width: 1.5px; }
.cookie-banner h2, .cookie-modal-card h3 { font-family: "Bricolage Grotesque", var(--cc-font); font-weight: 700; letter-spacing: -0.02em; }
.cookie-modal-card h3 { font-size: 1.6rem; }
.cookie-switch input:checked + .cookie-switch-track { background: #00A6E4; }   /* interruttori accesi: azzurro del logo */
.cookie-banner p a, .cookie-modal-card > p a { color: #0080C1; }