/* ==================================================================
   Cloud Lift Off: NIS2 Quick Check
   Vragen, voortgang, uitslag en uitlegvenster. Wordt na page.css geladen.
   ================================================================== */

/* Koppen op deze pagina houden de regelhoogte van de tekst */
h1, h2, h3, h4 {
  line-height: inherit;
}

body {
  font-family: 'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background: #fff;
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-top: 78px;
}
.nis2-scan {
  font-family: 'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 24px 64px;
  color: var(--text);
  line-height: 1.6;
}
.nis2-scan h2,
.nis2-scan h3,
.nis2-question-text,
.nis2-score-value,
.nis2-btn {
  font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
.nis2-intro {
  text-align: center;
  padding: 48px 32px;
  border-radius: 20px;
  color: #fff;
  background: radial-gradient(1.6px 1.6px at 12% 22%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.2px 1.2px at 38% 8%,rgba(255,255,255,.6),transparent 60%),radial-gradient(2px 2px at 62% 30%,rgba(255,255,255,.75),transparent 60%),radial-gradient(1.3px 1.3px at 84% 14%,rgba(255,255,255,.55),transparent 60%),radial-gradient(1.5px 1.5px at 74% 62%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 26% 58%,rgba(255,255,255,.55),transparent 60%),var(--navy);
}
.nis2-intro h1 {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 12px 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.nis2-intro p {
  font-size: .95rem;
  color: #c6cbe0;
  margin: 0 0 8px 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.nis2-intro .nis2-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(247,181,0,.15);
  color: var(--yellow);
  border: 1px solid rgba(247,181,0,.35);
  font-size: .8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-top: 12px;
}
.nis2-deadline {
  display: inline-block;
  margin-top: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: #fdba74;
  background: rgba(234,88,12,.18);
  border: 1px solid rgba(234,88,12,.35);
  padding: 6px 14px;
  border-radius: 999px;
}
.nis2-disclaimer-link {
  font-size: .8rem;
  color: #9aa3c7;
  text-align: center;
  margin-top: 18px;
  cursor: pointer;
  text-decoration: underline;
  display: inline-block;
}
.nis2-disclaimer-link:hover {
  color: #fff;
}
.nis2-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10,15,36,.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.nis2-modal-overlay.active {
  display: flex;
}
.nis2-modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(10,15,36,.25);
  animation: nis2ModalIn .3s ease;
  max-height: 85vh;
  overflow-y: auto;
  font-family: 'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
@keyframes nis2ModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.nis2-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--bg-alt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.nis2-modal-close:hover {
  background: var(--border);
}
.nis2-modal-close svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.nis2-modal h3 {
  font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--text);
  padding-right: 40px;
}
.nis2-modal p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 12px 0;
}
.nis2-modal p:last-child {
  margin-bottom: 0;
}
.nis2-modal-btn {
  margin-top: 20px;
  padding: 10px 22px;
  background: var(--yellow);
  color: #1a1400;
  border: none;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
.nis2-modal-btn:hover {
  background: #e0a400;
}
.nis2-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  margin-bottom: 32px;
  overflow: hidden;
}
.nis2-progress-fill {
  height: 100%;
  background: var(--yellow);
  border-radius: 3px;
  transition: width .4s ease;
  width: 0%;
}
.nis2-progress-text {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 8px;
  text-align: right;
}
.nis2-question-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(20,27,51,.06);
}
.nis2-category-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--yellow-dark);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
  padding: 5px 12px;
  background: rgba(247,181,0,.12);
  border-radius: 999px;
}
.nis2-question-text {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.4;
}
.nis2-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nis2-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
  background: #fff;
}
.nis2-option:hover {
  border-color: rgba(185,127,0,.5);
  background: #fffdf4;
}
.nis2-option.selected {
  border-color: var(--yellow);
  background: rgba(247,181,0,.08);
  color: var(--text);
}
.nis2-option.selected .nis2-option-label {
  color: var(--text);
}
.nis2-option.selected .nis2-option-desc {
  color: var(--muted);
}
.nis2-option-radio {
  width: 20px;
  height: 20px;
  border: 2px solid #cccccc;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}
.nis2-option.selected .nis2-option-radio {
  border-color: var(--yellow-dark);
  background: #fff;
}
.nis2-option.selected .nis2-option-radio::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--yellow);
  border-radius: 50%;
  display: block;
}
.nis2-option-content {
  flex: 1;
}
.nis2-option-label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  display: block;
}
.nis2-option-desc {
  font-size: .83rem;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
.nis2-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.nis2-btn {
  padding: 12px 26px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .2s ease;
  font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
.nis2-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.nis2-btn-primary {
  background: var(--yellow);
  color: #1a1400;
}
.nis2-btn-primary:hover:not(:disabled) {
  background: #e0a400;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(247,181,0,.35);
}
.nis2-btn-secondary {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
}
.nis2-btn-secondary:hover {
  border-color: rgba(185,127,0,.5);
  color: var(--yellow-dark);
}
.nis2-btn-ghost {
  background: transparent;
  color: var(--muted);
  padding: 12px 16px;
}
.nis2-btn-ghost:hover {
  color: var(--text);
}
.nis2-results {
  display: none;
}
.nis2-results.active {
  display: block;
}
.nis2-score-header {
  text-align: center;
  padding: 16px 0 32px 0;
}
.nis2-score-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 8px 0;
}
.nis2-score-header p {
  font-size: .95rem;
  color: var(--muted);
}
.nis2-scope-verdict {
  border-radius: 12px;
  padding: 16px 20px;
  font-size: .9rem;
  line-height: 1.55;
  text-align: left;
  margin: 24px auto 0;
  max-width: 540px;
  border: 1px solid transparent;
}
.nis2-scope-verdict strong {
  display: block;
  margin-bottom: 4px;
  font-size: .95rem;
}
.nis2-scope-verdict.sv-in {
  background: rgba(220,38,38,.06);
  border-color: rgba(220,38,38,.22);
  color: #7f1d1d;
}
.nis2-scope-verdict.sv-maybe {
  background: rgba(234,88,12,.06);
  border-color: rgba(234,88,12,.22);
  color: #7c2d12;
}
.nis2-scope-verdict.sv-chain {
  background: rgba(202,138,4,.07);
  border-color: rgba(202,138,4,.28);
  color: #713f12;
}
.nis2-scope-verdict.sv-out {
  background: rgba(22,163,74,.06);
  border-color: rgba(22,163,74,.22);
  color: #14532d;
}
.nis2-scope-verdict.sv-unknown {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text);
}
.nis2-score-circle-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
.nis2-score-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(var(--score-color) var(--score-deg),var(--border) 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nis2-score-circle::before {
  content: '';
  width: 130px;
  height: 130px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
}
.nis2-score-value {
  position: relative;
  z-index: 1;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
}
.nis2-score-label {
  position: relative;
  z-index: 1;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: -4px;
  text-align: center;
}
.nis2-verdict {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  margin-top: 16px;
  font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
.nis2-verdict.critical {
  background: rgba(220,38,38,.08);
  color: #dc2626;
}
.nis2-verdict.limited {
  background: rgba(234,88,12,.08);
  color: #ea580c;
}
.nis2-verdict.moderate {
  background: rgba(202,138,4,.1);
  color: #a16207;
}
.nis2-verdict.good {
  background: rgba(22,163,74,.08);
  color: #16a34a;
}
.nis2-verdict.excellent {
  background: rgba(37,99,235,.08);
  color: #2563eb;
}
.nis2-categories {
  margin: 32px 0;
}
.nis2-cat-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--text);
}
.nis2-cat-item {
  margin-bottom: 16px;
}
.nis2-cat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.nis2-cat-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}
.nis2-cat-score {
  font-size: .83rem;
  font-weight: 700;
  color: var(--muted);
}
.nis2-cat-bar-bg {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.nis2-cat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .8s ease .3s;
  width: 0%;
}
.nis2-actions {
  background: var(--bg-alt);
  border-radius: 16px;
  padding: 28px;
  margin: 32px 0;
  border: 1px solid var(--border);
}
.nis2-actions h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: var(--text);
}
.nis2-action-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.nis2-action-item:last-child {
  border-bottom: none;
}
.nis2-action-priority {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}
.nis2-action-priority.high {
  background: #dc2626;
}
.nis2-action-priority.medium {
  background: #ca8a04;
}
.nis2-action-priority.low {
  background: #16a34a;
}
.nis2-action-text {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
}
.nis2-action-cat {
  font-size: .75rem;
  color: var(--yellow-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}
.nis2-result-cta {
  text-align: center;
  padding: 36px 28px;
  border-radius: 20px;
  color: #fff;
  background: radial-gradient(1.6px 1.6px at 18% 30%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1.3px 1.3px at 78% 20%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1.8px 1.8px at 60% 70%,rgba(255,255,255,.4),transparent 60%),var(--navy);
}
.nis2-result-cta h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}
.nis2-result-cta p {
  font-size: .95rem;
  color: #c6cbe0;
  margin: 0 0 20px 0;
}
.nis2-result-cta .nis2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.nis2-result-disclaimer {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  margin-top: 24px;
  line-height: 1.5;
  padding: 16px;
  background: var(--bg-alt);
  border-radius: 12px;
}
.nis2-hidden {
  display: none !important;
}
.nis2-uitleg {
  margin: 0 0 36px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
}
.nis2-uitleg h2 {
  font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: var(--text);
  letter-spacing: -0.01em;
}
.nis2-uitleg-lead {
  font-size: .97rem;
  color: var(--muted);
  margin: 0 0 24px 0;
}
.nis2-uitleg-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.nis2-uitleg-item {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}
.nis2-uitleg-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(247,181,0,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.nis2-uitleg-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--yellow-dark);
}
.nis2-uitleg-item h3 {
  font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size: .98rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--text);
}
.nis2-uitleg-item p {
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.nis2-uitleg-note {
  margin: 18px 0 0 0;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
@media (max-width:680px) {
  .nis2-uitleg-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width:600px) {
  .nis2-scan {
    padding: 24px 16px 48px;
  }
  .nis2-intro {
    padding: 36px 22px;
  }
  .nis2-intro h1 {
    font-size: 1.5rem;
  }
  .nis2-question-card {
    padding: 24px 20px;
  }
  .nis2-question-text {
    font-size: 1.02rem;
  }
  .nis2-modal {
    padding: 24px;
    margin: 16px;
  }
}

/* NIS2 check: donker thema */
[data-theme="dark"] .nis2-uitleg,
[data-theme="dark"] .nis2-question-card,
[data-theme="dark"] .nis2-modal {
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .nis2-uitleg h2,
[data-theme="dark"] .nis2-uitleg h3,
[data-theme="dark"] .nis2-modal h3 {
  color: var(--text);
}
[data-theme="dark"] .nis2-intro, [data-theme="dark"] .nis2-result-cta {
  border: 1px solid var(--border);
}
[data-theme="dark"] .nis2-option {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .nis2-option:hover {
  background: rgba(247,181,0,.06);
  border-color: rgba(247,181,0,.45);
}
[data-theme="dark"] .nis2-option.selected {
  background: rgba(247,181,0,.10);
  border-color: var(--yellow);
}
[data-theme="dark"] .nis2-option-radio {
  border-color: #4a5275;
}
[data-theme="dark"] .nis2-option.selected .nis2-option-radio {
  background: var(--card);
  border-color: var(--yellow);
}
[data-theme="dark"] .nis2-category-label {
  color: var(--yellow);
}
[data-theme="dark"] .nis2-btn-secondary:hover {
  color: var(--yellow);
  border-color: rgba(247,181,0,.5);
}
[data-theme="dark"] .nis2-score-circle::before {
  background: var(--card);
}
[data-theme="dark"] .nis2-scope-verdict.sv-in {
  background: rgba(248,113,113,.10);
  border-color: rgba(248,113,113,.30);
  color: #fca5a5;
}
[data-theme="dark"] .nis2-scope-verdict.sv-maybe {
  background: rgba(251,146,60,.10);
  border-color: rgba(251,146,60,.30);
  color: #fdba74;
}
[data-theme="dark"] .nis2-scope-verdict.sv-chain {
  background: rgba(250,204,21,.10);
  border-color: rgba(250,204,21,.30);
  color: #fde68a;
}
[data-theme="dark"] .nis2-scope-verdict.sv-out {
  background: rgba(74,222,128,.10);
  border-color: rgba(74,222,128,.30);
  color: #86efac;
}
[data-theme="dark"] .nis2-verdict.critical {
  background: rgba(248,113,113,.12);
  color: #f87171;
}
[data-theme="dark"] .nis2-verdict.limited {
  background: rgba(251,146,60,.12);
  color: #fb923c;
}
[data-theme="dark"] .nis2-verdict.moderate {
  background: rgba(250,204,21,.12);
  color: #facc15;
}
[data-theme="dark"] .nis2-verdict.good {
  background: rgba(74,222,128,.12);
  color: #4ade80;
}
[data-theme="dark"] .nis2-verdict.excellent {
  background: rgba(96,165,250,.12);
  color: #60a5fa;
}