/* Sportersprofiel test — carried over from "Sportersprofiel Test.dc.html". */

.quiz-page {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--color-ink);
}

.quiz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 48px;
}

.quiz-topbar .logo__word {
  font-size: 16px;
}

.quiz-topbar__label {
  font: 500 13px var(--font-body);
  color: rgba(58, 42, 46, 0.5);
}

.quiz-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 64px;
}

.quiz-stage__inner {
  width: 100%;
  max-width: 600px;
}

/* ------------------------------------------------------------------ intro */

.quiz-intro {
  text-align: center;
}

.quiz-kicker {
  font: 600 13px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-sage);
  margin-bottom: 16px;
}

.quiz-title {
  font: var(--text-h1);
  color: var(--color-ink);
  margin: 0 0 20px;
}

.quiz-intro__text {
  font: 400 17px/1.6 var(--font-body);
  color: rgba(58, 42, 46, 0.7);
  max-width: 460px;
  margin: 0 auto 12px;
}

.quiz-intro__meta {
  font: 500 13px var(--font-body);
  color: rgba(58, 42, 46, 0.5);
  margin-bottom: 40px;
}

.quiz-intro__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------- questions */

.quiz-progress {
  margin-bottom: 32px;
}

.quiz-progress__row {
  display: flex;
  justify-content: space-between;
  font: 500 13px var(--font-body);
  color: rgba(58, 42, 46, 0.55);
  margin-bottom: 10px;
}

.quiz-progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-clay);
  overflow: hidden;
}

.quiz-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent-honey);
  transition: width 0.3s ease;
}

.quiz-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
}

.quiz-card__question {
  font: var(--text-h3);
  margin: 0 0 28px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 2px solid rgba(58, 42, 46, 0.15);
  font: 400 15px/1.4 var(--font-body);
  color: var(--color-ink);
  transition: border-color 0.15s ease;
}

.quiz-option:hover {
  border-color: rgba(58, 42, 46, 0.35);
}

.quiz-option.is-selected {
  background: rgba(217, 154, 52, 0.14);
  border-color: var(--color-accent-honey);
  font-weight: 600;
}

.quiz-scale {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.quiz-scale__value {
  cursor: pointer;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  border: 2px solid rgba(58, 42, 46, 0.15);
  font: 600 16px var(--font-display);
  color: var(--color-ink);
  transition: all 0.15s ease;
}

.quiz-scale__value.is-selected {
  background: var(--color-accent-honey);
  border-color: var(--color-accent-honey);
  color: var(--color-on-dark);
}

.quiz-scale__labels {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 400 13px var(--font-body);
  color: rgba(58, 42, 46, 0.55);
}

.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

/* ----------------------------------------------------------------- result */

.quiz-result {
  text-align: center;
}

.quiz-result__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.quiz-result__desc {
  font: 400 17px/1.6 var(--font-body);
  color: rgba(58, 42, 46, 0.75);
  max-width: 480px;
  margin: 0 auto 32px;
}

/* Dezelfde verhouding als het portret in de gids (300 bij 210), zodat de foto
   er op beide plekken hetzelfde uitziet. Breder dan in de gids, want hier
   staat hij alleen op de pagina in plaats van naast een kolom tekst. */
.quiz-result__portrait {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 300 / 210;
  margin: 0 auto 32px;
}

.quiz-result__advice {
  background: var(--color-accent-sage-deep);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  text-align: left;
  margin-bottom: 32px;
}

.quiz-result__advice-label {
  font: 600 12px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-dark);
  opacity: 0.7;
  margin-bottom: 10px;
}

.quiz-result__advice-text {
  font: 400 16px/1.6 var(--font-body);
  color: var(--color-on-dark);
}

/* Staat onder het gids-formulier, dus de ruimte hoort erboven te zitten. */
.quiz-result__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

/* ------------------------------------------------------------- email gate */

.gids-gate {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  text-align: left;
}

.gids-gate__title {
  font: 600 15px/1.4 var(--font-display);
  color: var(--color-ink);
  margin: 0 0 8px;
}

.gids-gate__text {
  font: 400 13px/1.5 var(--font-body);
  color: rgba(58, 42, 46, 0.7);
  margin-bottom: 20px;
}

.gids-gate__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gids-gate__input {
  flex: 1;
  min-width: 220px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(58, 42, 46, 0.15);
  font: 400 15px var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
}

.gids-gate__input:focus {
  outline: none;
  border-color: var(--color-accent-honey);
}

/* Consent must be a separate, unticked choice — never bundled into the guide
   request itself. */
.gids-gate__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  font: 400 14px/1.5 var(--font-body);
  color: rgba(58, 42, 46, 0.8);
  cursor: pointer;
}

.gids-gate__check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--color-accent-sage);
  cursor: pointer;
}

.gids-gate__privacy {
  margin-top: 12px;
  font: 400 13px/1.5 var(--font-body);
  color: rgba(58, 42, 46, 0.55);
}

.gids-gate__privacy a {
  color: var(--color-accent-sage-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gids-gate__error {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(201, 100, 66, 0.12);
  border: 1px solid rgba(201, 100, 66, 0.35);
  font: 500 14px/1.5 var(--font-body);
  color: #8a3d24;
}

.gids-gate__confirm-text {
  font: 400 15px/1.5 var(--font-body);
  color: rgba(58, 42, 46, 0.7);
  margin-bottom: 16px;
}

.gids-gate__note {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(110, 124, 85, 0.16);
  font: 400 14px/1.55 var(--font-body);
  color: var(--color-ink);
}

.gids-gate__link {
  font: 600 15px var(--font-body);
  color: var(--color-accent-sage-deep);
}

@media (max-width: 700px) {
  .quiz-topbar {
    padding: 20px 24px;
  }

  .quiz-card {
    padding: 32px 24px;
  }

  .quiz-result__advice,
  .gids-gate {
    padding: 24px;
  }
}