/* Shared base styles for the sample-question widget.
   Each landing direction may also override theme-specific tokens. */

.cv-quiz {
  --quiz-navy: #0F2C5A;
  --quiz-orange: #F58720;
  --quiz-green: #5DAA3A;
  --quiz-yellow: #F4C534;
  --quiz-sky: #62A8DD;
  --quiz-bg: #ffffff;
  --quiz-ink: #0F2C5A;
  --quiz-mute: #5C6E8C;
  --quiz-border: #E6ECF5;
  --quiz-radius: 22px;
  --quiz-pad: 28px;

  position: relative;
  font-family: inherit;
}

.cv-quiz__card {
  position: relative;
  background: var(--quiz-bg);
  border: 1.5px solid var(--quiz-border);
  border-radius: var(--quiz-radius);
  padding: var(--quiz-pad);
  box-shadow: 0 1px 0 rgba(15,44,90,.04), 0 24px 48px -28px rgba(15,44,90,.22);
  overflow: hidden;
}

.cv-quiz__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cv-quiz__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(98,168,221,.14);
  color: var(--quiz-navy);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
}
.cv-quiz__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--quiz-green);
  box-shadow: 0 0 0 3px rgba(93,170,58,.18);
}
.cv-quiz__progress {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.cv-quiz__pip {
  width: 22px; height: 6px; border-radius: 3px;
  background: var(--quiz-border);
  transition: background .25s, transform .25s;
}
.cv-quiz__pip.is-current { background: var(--quiz-orange); transform: scaleY(1.6); }
.cv-quiz__pip.is-done { background: var(--quiz-green); }
.cv-quiz__score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-left: 8px;
  color: var(--quiz-navy);
  font-weight: 700;
}
.cv-quiz__score-num { font-size: 18px; }
.cv-quiz__score-lbl { font-size: 12px; color: var(--quiz-mute); font-weight: 600; }

.cv-quiz__body { display: grid; gap: 14px; }
.cv-quiz__kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--quiz-orange);
}
.cv-quiz__prompt {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--quiz-ink);
  text-wrap: pretty;
}

.cv-quiz__opts {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.cv-quiz__opt {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid var(--quiz-border);
  font: inherit;
  text-align: left;
  color: var(--quiz-ink);
  cursor: pointer;
  transition: transform .15s, border-color .2s, background .2s, box-shadow .2s;
}
.cv-quiz__opt:hover:not(:disabled) {
  border-color: rgba(98,168,221,.55);
  transform: translateY(-1px);
}
.cv-quiz__opt:disabled { cursor: default; }
.cv-quiz__opt-tag {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(98,168,221,.14);
  color: var(--quiz-navy);
  font-size: 13px; font-weight: 700;
}
.cv-quiz__opt-text { font-size: 15.5px; line-height: 1.4; }
.cv-quiz__opt.is-picked { border-color: var(--quiz-sky); box-shadow: 0 0 0 3px rgba(98,168,221,.16); }
.cv-quiz__opt.is-picked .cv-quiz__opt-tag { background: var(--quiz-sky); color: #fff; }
.cv-quiz__opt.is-correct { border-color: var(--quiz-green); background: rgba(93,170,58,.07); }
.cv-quiz__opt.is-correct .cv-quiz__opt-tag { background: var(--quiz-green); color: #fff; }
.cv-quiz__opt.is-wrong { border-color: #E1564A; background: rgba(225,86,74,.07); }
.cv-quiz__opt.is-wrong .cv-quiz__opt-tag { background: #E1564A; color: #fff; }
.cv-quiz__opt.is-dim { opacity: .5; }
.cv-quiz__opt-check, .cv-quiz__opt-x {
  font-size: 16px; font-weight: 700;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
}
.cv-quiz__opt-check { background: var(--quiz-green); }
.cv-quiz__opt-x { background: #E1564A; }

.cv-quiz__explain {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px dashed;
  font-size: 14.5px;
  line-height: 1.45;
}
.cv-quiz__explain.is-ok { background: rgba(93,170,58,.08); border-color: rgba(93,170,58,.4); color: #244e15; }
.cv-quiz__explain.is-no { background: rgba(244,197,52,.13); border-color: rgba(244,197,52,.55); color: #5a3f00; }
.cv-quiz__explain-head { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.cv-quiz__explain p { margin: 0; }

.cv-quiz__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}
.cv-quiz__helper {
  font-size: 13px; color: var(--quiz-mute);
}
.cv-quiz__btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.cv-quiz__btn--primary {
  background: var(--quiz-navy);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(15,44,90,.5);
}
.cv-quiz__btn--primary:hover:not(.is-disabled) { transform: translateY(-1px); }
.cv-quiz__btn.is-disabled { background: #C9D2E1; cursor: not-allowed; box-shadow: none; }

.cv-quiz__final {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(245,135,32,.10), rgba(244,197,52,.18));
  border: 1.5px solid rgba(245,135,32,.3);
}
.cv-quiz__final-num { font-size: 28px; font-weight: 800; color: var(--quiz-orange); line-height: 1; }
.cv-quiz__final-lbl { font-size: 14px; color: var(--quiz-ink); font-weight: 600; }

/* shake on wrong */
@keyframes cv-quiz-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.cv-quiz__card.is-shaking { animation: cv-quiz-shake .42s ease-in-out; }

/* confetti */
.cv-quiz__confetti {
  position: absolute;
  bottom: 64px;
  width: 9px; height: 14px;
  border-radius: 2px;
  pointer-events: none;
  animation: cv-quiz-fly 1.2s cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes cv-quiz-fly {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; }
}

/* Theme tweaks */
.cv-quiz[data-theme="premium"] .cv-quiz__opt-tag {
  font-family: 'Söhne', 'Inter', system-ui, sans-serif;
}
.cv-quiz[data-theme="premium"] .cv-quiz__btn--primary { border-radius: 12px; }