/* GENEROITU — älä muokkaa. Lähde: docs/tenants/nox-visual/etusivu-3d-2026-09/prototype/consent.css. Aja: node scripts/nv3/port-css.mjs (ADR 0010). */
/* Evästebanneri ja -asetukset (consent.js). Liven NOX Visual -teema: navy-paneeli alareunan keskellä,
   vaalea korostus. "Hyväksy kaikki" ja "Hylkää kaikki" yhtä kokoa ja painoa (Traficom).
   Kerros: chatin (60) ja kuvanäyttäjän (90) yllä, etusivun intron (200) alla. */

html.theme-nox-visual-v3 .cc {
  --cc-edge: clamp(16px, 2vw, 24px);
  position: fixed;
  inset: auto 0 var(--cc-edge);
  z-index: 110;
  width: min(768px, 100% - 2 * var(--cc-edge));
  max-width: none;
  max-height: calc(100dvh - 2 * var(--cc-edge));
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  overflow: visible;
}
html.theme-nox-visual-v3 .cc[open] { display: flex; }
html.theme-nox-visual-v3 .cc::backdrop { background: rgb(7 18 34 / 46%); }
/* Modaalin ollessa auki taustasivu ei vierity (Lenis ohitetaan data-lenis-prevent-attribuutilla) */
html.theme-nox-visual-v3:has(.cc.is-modal[open]) { overflow: hidden; }

html.theme-nox-visual-v3 .cc-panel {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: 16px;
  background: var(--navy);
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 40px 90px -24px rgb(7 18 34 / 55%), 0 8px 24px -8px rgb(7 18 34 / 30%);
}
html.theme-nox-visual-v3 .cc-title { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-300); }
html.theme-nox-visual-v3 .cc-text { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: rgb(255 255 255 / 74%); text-wrap: pretty; }

html.theme-nox-visual-v3 .cc-cats { margin: 18px 0 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .cc-cat { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 12%); background: rgb(255 255 255 / 4%); cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
html.theme-nox-visual-v3 .cc-cat:hover { border-color: rgb(255 255 255 / 22%); }
html.theme-nox-visual-v3 .cc-cat:has(input:checked) { border-color: rgb(157 191 232 / 45%); background: rgb(157 191 232 / 8%); }
html.theme-nox-visual-v3 .cc-cat input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue-300); cursor: pointer; }
html.theme-nox-visual-v3 .cc-cat b { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--white); }
html.theme-nox-visual-v3 .cc-cat b + span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: rgb(255 255 255 / 66%); }

html.theme-nox-visual-v3 .cc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
html.theme-nox-visual-v3 .cc-btn { height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent; background: none; font: 500 15px/1 'General Sans', system-ui, sans-serif; color: var(--white); white-space: nowrap; cursor: pointer; transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
html.theme-nox-visual-v3 .cc-accept { background: var(--blue-300); border-color: var(--blue-300); color: var(--navy); }
html.theme-nox-visual-v3 .cc-accept:hover { background: var(--edge-core); border-color: var(--edge-core); }
html.theme-nox-visual-v3 .cc-reject, html.theme-nox-visual-v3 .cc-save { border-color: rgb(255 255 255 / 24%); }
html.theme-nox-visual-v3 .cc-reject:hover, html.theme-nox-visual-v3 .cc-save:hover { background: rgb(255 255 255 / 10%); }
html.theme-nox-visual-v3 .cc-more, html.theme-nox-visual-v3 .cc-save { margin-left: auto; }
html.theme-nox-visual-v3 .cc-more { color: rgb(255 255 255 / 74%); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
html.theme-nox-visual-v3 .cc-more:hover { color: var(--white); text-decoration-color: currentColor; }
html.theme-nox-visual-v3 .cc-btn:focus-visible, html.theme-nox-visual-v3 .cc-cat input:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }

/* Kapealla napit allekkain koko leveydeltä (kuten live) */
@media (max-width: 600px) {
  html.theme-nox-visual-v3 .cc-actions { flex-direction: column; align-items: stretch; }
  html.theme-nox-visual-v3 .cc-more, html.theme-nox-visual-v3 .cc-save { margin-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html.theme-nox-visual-v3 .cc[open] .cc-panel { animation: cc-in 0.6s var(--ease-out) both; }
  html.theme-nox-visual-v3 .cc[open]::backdrop { animation: cc-fade 0.4s ease both; }
}
@keyframes cc-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes cc-fade { from { opacity: 0; } }

@media print { html.theme-nox-visual-v3 .cc { display: none !important; } }