/* ─────────────────────────────────────────────────────────────
   Override cookie banner del KERNEL — SOLO NSOC.
   Barra minimale a tutta larghezza in basso, brand scuro NSOC.
   Via !important sui selettori iniettati (.cck*) da
   packages/core-kernel/src/services/compliance/compliance-pages-service.js;
   nessun cambio al kernel → zero impatto sulle altre app.

   File CONDIVISO fra coming-soon e landing lunga (prima viveva solo
   nello <style> di coming-soon.ejs: la landing lunga restava col
   default bianco/viola del kernel). Chi lo modifica lo cambia per
   entrambe le pagine — non duplicare queste regole nelle view.
   ───────────────────────────────────────────────────────────── */
.cck {
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  max-width: none !important; margin: 0 !important;
  border: 0 !important; border-top: 1px solid var(--hairline, #2a2724) !important;
  border-radius: 0 !important;
  background: rgba(12,12,13,.92) !important;
  -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.4) !important;
  color: var(--white, #f4f0ea) !important;
  display: flex !important; flex-wrap: wrap; align-items: center;
  gap: 10px 16px !important; padding: 14px 20px !important;
}
@media (min-width: 768px) { .cck { left: 0 !important; right: 0 !important; transform: none !important; } }
.cck h2 { display: none !important; }              /* minimale: via il titolo */
.cck p { flex: 1 1 300px !important; margin: 0 !important; color: var(--white-soft, #cfcabf) !important; font-size: 13px !important; }
.cck a { color: var(--white, #f4f0ea) !important; text-decoration: underline !important; text-underline-offset: 2px !important; font-weight: 600 !important; }
.cck-row { margin-top: 0 !important; flex: 0 0 auto; gap: 8px !important; }
.cck-l { margin-top: 0 !important; color: var(--white, #f4f0ea) !important; text-decoration: underline !important; text-underline-offset: 2px !important; font-weight: 600 !important; }
.cck-b { min-width: 0 !important; flex: 0 0 auto !important; }
.cck-p { background: var(--white, #f4f0ea) !important; color: var(--black, #0c0c0d) !important; }
.cck-s { background: transparent !important; color: var(--white, #f4f0ea) !important; border-color: rgba(244,240,234,.28) !important; }
.cck-d { flex-basis: 100% !important; border-top-color: var(--hairline, #2a2724) !important; }
.cck-c .l { color: var(--white-soft, #cfcabf) !important; }
.cck-c .l strong { color: var(--white, #f4f0ea) !important; }
/* Mobile: compatto, in colonna */
@media (max-width: 640px) {
  .cck { flex-direction: column !important; align-items: stretch !important; gap: 11px !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Il `flex: 1 1 300px` del paragrafo serve al layout in RIGA (desktop): messo in colonna, quei
     300px diventano ALTEZZA e il banner cresce a 416px con ~260px di vuoto in mezzo al testo e ai
     pulsanti. Qui torna alto quanto il suo testo. */
  .cck p { flex: 0 0 auto !important; }
  .cck-row { display: flex !important; } .cck-row .cck-b { flex: 1 1 auto !important; }
  .cck-l { text-align: center !important; }
}