/* Quiz-only styles. Everything else comes from ucss.css. */
.quiz { display: grid; gap: var(--sp-6, 24px); }
.quiz__q { border: 1px solid var(--color-border, #e8e9f0); border-radius: var(--radius-lg, 18px); padding: var(--sp-5, 20px); margin: 0; background: var(--color-surface, #fafafa); }
.quiz__q legend { padding: 0 var(--sp-2, 8px); }
.quiz__choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3, 12px); margin-top: var(--sp-3, 12px); }
.quiz__choices input { position: absolute; opacity: 0; pointer-events: none; }
.quiz__choices span { display: block; text-align: center; padding: var(--sp-3, 12px) var(--sp-4, 16px); border: 1.5px solid var(--color-border-strong, #cccdd8); border-radius: var(--radius-full, 9999px); background: #fff; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.quiz__choices input:checked + span { background: var(--kcc-navy, #2b318c); border-color: var(--kcc-navy, #2b318c); color: #fff; }
.quiz__choices input:focus-visible + span { outline: 3px solid var(--kcc-magenta, #ec008c); outline-offset: 2px; }

.quiz-result { margin-top: var(--sp-12, 48px); display: grid; gap: var(--sp-6, 24px); }
.quiz-result[hidden] { display: none; }
.quiz-result ul, .quiz-list { padding-left: var(--sp-5, 20px); display: grid; gap: var(--sp-3, 12px); }
.quiz-result li strong { color: var(--kcc-navy, #2b318c); }
.quiz-result .cta-card p { margin-bottom: var(--sp-4, 16px); }
.quiz-result .btn img { margin-right: var(--sp-2, 8px); }

/* Tests available at KCC */
.quiz-tests { list-style: none; padding: 0; margin: 0 0 var(--sp-4, 16px); display: grid; gap: var(--sp-3, 12px); }
.quiz-tests li { display: grid; gap: var(--sp-1, 4px); padding: var(--sp-4, 16px) var(--sp-5, 20px); border: 1px solid var(--color-border, #e8e9f0); border-left: 3px solid var(--kcc-magenta, #ec008c); border-radius: var(--radius-md, 12px); background: var(--color-surface, #fafafa); }
.quiz-tests strong { color: var(--kcc-navy, #2b318c); font-size: var(--text-lg, 1.125rem); }
.quiz-tests span { color: var(--color-text-secondary, #4a4a68); }
@media (min-width: 640px) { .quiz-tests { grid-template-columns: 1fr 1fr; } }
/* Result note: safety message about symptoms */
.quiz-result .form-hint {
  padding: 16px 20px;
  background: #fffbeb;
  border-left: 3px solid #d97706;
  border-radius: 12px;
  color: #1c1c30;
  font-size: 0.9375rem;
  line-height: 1.75;
}
.quiz-result .form-hint strong { color: #92400e; }

/* Result CTA card (navy background) */
.quiz-result .cta-card {
  padding: 32px 24px;
  background: #2b318c;
  border-radius: 18px;
  color: #fff;
  text-align: center;
}
.quiz-result .cta-card h3 { margin: 0 0 8px; color: #fff; }
.quiz-result .cta-card p {
  max-width: 46ch;
  margin: 0 auto 20px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
}

/* Buttons inside the CTA card */
.quiz-result .cta-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.quiz-result .cta-card .btn img {
  margin: 0;
  filter: brightness(0) invert(1);
}
.quiz-result .cta-card .btn--outline {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.quiz-result .cta-card .btn--outline:hover {
  background: #fff;
  color: #2b318c;
}
.quiz-result .cta-card .btn--outline:hover img { filter: none; }
.quiz-result .cta-card .btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 479px) {
  .quiz-result .cta-card .btn { width: 100%; }
  
  
  
  
  /* Read more links */
.quiz-links-title { margin-top: 40px; }

.quiz-links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #e8e9f0;
}
.quiz-links li { border-bottom: 1px solid #e8e9f0; }
.quiz-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  color: #2b318c;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}
.quiz-links a::after {
  content: "→";
  flex-shrink: 0;
  color: #ec008c;
}
.quiz-links a:hover,
.quiz-links a:focus-visible {
  color: #ec008c;
  padding-left: 10px;
}
.quiz-links a:focus-visible {
  outline: 3px solid #ec008c;
  outline-offset: -3px;
  border-radius: 6px;
}
}