/* Section: quiz_wizard — mockup EXALCO-Quiz "Quiz wizard" (stepper, question, option cards, two-column shell). */

.ex-quiz-wizard { padding-top: clamp(24px, 2.8vw, 40px); }

/* ---- Stepper 01–N ---- */
ol.ex-quiz-wizard__stepper { /* ol.: base resets margins on ol[class] */
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1100px;
  margin: 0 0 clamp(24px, 2.8vw, 38px);
  padding: 0;
  list-style: none;
}
.ex-quiz-wizard__indicator { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ex-quiz-wizard__indicator-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: var(--ex-border-w, 1.5px) solid var(--ex-line-ink);
  border-radius: 0;
  background: var(--ex-white);
  color: var(--ex-ink);
  /* Rendered value: the mockup's `font: … inherit` shorthand is invalid CSS and is dropped, so the control shows the default control font (13.33px / 400). */
  font-family: inherit;
  font-size: var(--ex-fs-control);
  font-weight: 400;
  line-height: normal;
  letter-spacing: .04em;
  cursor: default;
  opacity: 1;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--ex-t-base), background var(--ex-t-base), color var(--ex-t-base);
}
.ex-quiz-wizard__indicator-check { display: none; }
.ex-quiz-wizard__indicator-label {
  min-width: 0;
  overflow: hidden;
  /* Rendered value: the mockup's `font: 700 10.5px/1.2 inherit` is invalid CSS and is dropped: the label shows at the inherited 16px / 400. */
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .09em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(35, 31, 32, .45);
  transition: color var(--ex-t-base);
}
.ex-quiz-wizard__indicator-line { flex: 1; min-width: 10px; height: 1.5px; background: rgba(35, 31, 32, .2); transition: background var(--ex-t-base); }

/* answered step: red outline + check, clickable */
.ex-quiz-wizard__indicator.is-done .ex-quiz-wizard__indicator-box { border-color: var(--ex-red); color: var(--ex-red); }
.ex-quiz-wizard__indicator.is-done .ex-quiz-wizard__indicator-num { display: none; }
.ex-quiz-wizard__indicator.is-done .ex-quiz-wizard__indicator-check { display: inline; }
.ex-quiz-wizard__indicator.is-done .ex-quiz-wizard__indicator-line { background: var(--ex-red); }
.ex-quiz-wizard__indicator.is-done .ex-quiz-wizard__indicator-label,
.ex-quiz-wizard__indicator.is-active .ex-quiz-wizard__indicator-label { color: var(--ex-ink); }
.ex-quiz-wizard__indicator-box:not(:disabled) { cursor: pointer; }
.ex-quiz-wizard__indicator-box:not(:disabled):hover { background: var(--ex-red-tint); }

/* current step: filled red, shows its number even when already answered */
.ex-quiz-wizard__indicator.is-active .ex-quiz-wizard__indicator-box { border-color: var(--ex-red); background: var(--ex-red); color: var(--ex-white); }
.ex-quiz-wizard__indicator.is-active .ex-quiz-wizard__indicator-num { display: inline; }
.ex-quiz-wizard__indicator.is-active .ex-quiz-wizard__indicator-check { display: none; }

/* ---- Two-column shell ---- */
.ex-quiz-wizard__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
  max-width: 1280px;
}
.ex-quiz-wizard__layout--single { grid-template-columns: minmax(0, 1fr); }
.ex-quiz-wizard__main { min-width: 0; }
.ex-quiz-wizard__aside { position: sticky; top: calc(var(--ex-scroll-offset) - 30px); min-width: 0; }

/* ---- Question ---- */
.ex-quiz-wizard__form { margin: 0; }
.ex-quiz-wizard__step { min-width: 0; margin: 0 0 44px; padding: 0; border: 0; }
.ex-quiz-wizard__step:last-child { margin-bottom: 0; }
.ex-quiz-wizard__legend { float: left; width: 100%; padding: 0; }
.ex-quiz-wizard__legend + * { clear: both; }
.ex-quiz-wizard__counter { display: block; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; line-height: normal; letter-spacing: .2em; color: var(--ex-red); }
.ex-quiz-wizard__question { margin: 0 0 22px; font-size: clamp(22px, 2vw, 30px); font-weight: var(--ex-fw-title); line-height: normal; letter-spacing: -.01em; color: var(--ex-ink); }
.ex-quiz-wizard__question:focus { outline: none; }
.ex-quiz-wizard__hint { margin: -10px 0 16px; font-size: 11px; font-weight: 700; line-height: normal; letter-spacing: .22em; /* EXALCO-Quiz B: 11px / 700 / .22em */  color: var(--ex-text-muted); }

/* ---- Option cards (real radio / checkbox inputs) ---- */
.ex-quiz-wizard__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; max-width: 820px; }
.ex-quiz-wizard__option { position: relative; display: block; margin: 0; cursor: pointer; }
.ex-quiz-wizard__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ex-quiz-wizard__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border: var(--ex-border-w, 1.5px) solid var(--ex-line);
  background: var(--ex-white);
  transition: border-color var(--ex-t-fast), background var(--ex-t-fast);
}
.ex-quiz-wizard__option:hover .ex-quiz-wizard__card { border-color: var(--ex-ink); }
.ex-quiz-wizard__mark {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border: 2px solid rgba(35, 31, 32, .35);
  background: transparent;
  transition: border-color var(--ex-t-fast), background var(--ex-t-fast);
}
.ex-quiz-wizard__card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.ex-quiz-wizard__option-label { font-size: 14.5px; font-weight: 800; line-height: normal; color: var(--ex-ink); }
.ex-quiz-wizard__option-desc { font-size: 12px; line-height: 1.45; color: var(--ex-text-muted); }

/* selected (also `.is-selected` on the label for controllers that prefer a class) */
.ex-quiz-wizard__input:checked + .ex-quiz-wizard__card,
.ex-quiz-wizard__option.is-selected .ex-quiz-wizard__card { border-color: var(--ex-red); background: var(--ex-red-tint); }
.ex-quiz-wizard__input:checked + .ex-quiz-wizard__card .ex-quiz-wizard__mark,
.ex-quiz-wizard__option.is-selected .ex-quiz-wizard__mark { border-color: var(--ex-red); background: var(--ex-red); }
.ex-quiz-wizard__input:focus-visible + .ex-quiz-wizard__card { outline: 2px solid var(--ex-focus); outline-offset: 2px; }

/* ---- Back / continue ----
   "ΣΥΝΕΧΕΙΑ" is printed on every step: hidden until the first choice on multi-select steps, disabled
   (base .ex-btn:disabled) until an option is selected on single-select ones. */
.ex-quiz-wizard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
/* Both 46px high as rendered: "← ΠΙΣΩ" (EXALCO-Quiz: 13px 22px + 2px border, 13.33px / 400 through .ex-btn--regular) and
   "ΣΥΝΕΧΕΙΑ →" (EXALCO-Quiz B: 15px 24px). */
.ex-quiz-wizard__back { padding: 13px 22px; }
.ex-quiz-wizard__next { padding: 15px 24px; }

/* ---- With JS: one question at a time. Without JS every question stays readable, controls that need JS are hidden. ---- */
.js .ex-quiz-wizard__step { margin-bottom: 0; }
.js .ex-quiz-wizard__step:not(.is-active) { display: none; }
.js .ex-quiz-wizard__step.is-active { animation: ex-quiz-wizard-fade .25s ease both; }
html:not(.js) .ex-quiz-wizard__stepper,
html:not(.js) .ex-quiz-wizard__actions { display: none; }

@keyframes ex-quiz-wizard-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Responsive (proposal — not designed) ---- */
@media (max-width: 1199px) {
  .ex-quiz-wizard__indicator-label { display: none; }
  .ex-quiz-wizard__layout { grid-template-columns: minmax(0, 1fr); }
  .ex-quiz-wizard__aside { position: static; }
}
@media (max-width: 899px) {
  .ex-quiz-wizard__indicator-box { width: var(--ex-touch); height: var(--ex-touch); }
  .ex-quiz-wizard__card { min-height: 64px; }
  .ex-quiz-wizard__counter { font-size: 12px; }
}
@media (max-width: 599px) {
  .ex-quiz-wizard__stepper { gap: 4px; }
  .ex-quiz-wizard__indicator { gap: 4px; }
  .ex-quiz-wizard__indicator-line { min-width: 4px; }
  .ex-quiz-wizard__actions .ex-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-quiz-wizard__indicator-box,
  .ex-quiz-wizard__indicator-label,
  .ex-quiz-wizard__indicator-line,
  .ex-quiz-wizard__card,
  .ex-quiz-wizard__mark { transition: none; }
  .js .ex-quiz-wizard__step.is-active { animation: none; }
}