/* ============================================================
   Wuthqa — PR Eligibility Test page styles
   The wizard card, chips, inputs and result reuse the .wq-rz-* /
   .wq-ss-* styles from home-functions.css; this file only adds the
   one-question-per-screen chrome (progress bar, transitions, skip).
   ============================================================ */

/* ---- Progress ---------------------------------------------------- */
.wq-prt-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.wq-prt-count { flex-shrink: 0; font-family: var(--font-en); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.wq-prt-bar { flex: 1; height: 4px; border-radius: var(--r-full); background: rgba(255, 255, 255, .12); overflow: hidden; }
.wq-prt-bar span { display: block; height: 100%; border-radius: var(--r-full); background: var(--gold);
  transition: width .35s var(--ease); }

/* ---- Question screens -------------------------------------------- */
.wq-prt-screen { animation: wqPrtIn .35s var(--ease) both; }
@keyframes wqPrtIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wq-prt-screen { animation: none; } }

.wq-prt-answer { margin-top: 6px; }
.wq-prt-answer .wq-rz-input, .wq-prt-answer .wq-ss { max-width: 460px; }
.wq-prt-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.wq-prt-requirement, .wq-prt-label-required {
  display: inline-flex; align-items: center; width: max-content; border-radius: var(--r-full);
  font-family: var(--font-en); font-size: 10.5px; font-weight: 700; line-height: 1;
  letter-spacing: .045em; text-transform: uppercase; white-space: nowrap;
}
.wq-prt-requirement { padding: 5px 8px; }
.wq-prt-requirement.required, .wq-prt-label-required {
  color: var(--gold); background: rgba(200, 168, 75, .11); border: 1px solid rgba(200, 168, 75, .34);
}
.wq-prt-requirement.optional {
  color: rgba(255, 255, 255, .64); background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .15);
}
.wq-prt-label-required { margin-inline-start: auto; padding: 4px 7px; font-size: 9.5px; }

/* Validation is inline and keeps the user's place in the wizard. */
.wq-prt-error, .wq-prt-field-error {
  display: flex; align-items: flex-start; gap: 7px; color: #ffb4aa;
  font-family: var(--font-en); font-size: 13px; font-weight: 600; line-height: 1.5;
}
.wq-prt-error { margin-top: 12px; }
.wq-prt-field-error { margin-top: -3px; }
.wq-prt-error svg, .wq-prt-field-error svg { flex: 0 0 auto; margin-top: 2px; }
.wq-rz-input.is-invalid, .wq-ss.is-invalid .wq-ss-btn {
  border-color: #e8786e; box-shadow: 0 0 0 3px rgba(232, 120, 110, .14);
}
.wq-rz-chips.is-invalid {
  width: max-content; max-width: 100%; border: 1px solid rgba(232, 120, 110, .72);
  border-radius: var(--r-lg); padding: 8px; margin: -8px;
  box-shadow: 0 0 0 3px rgba(232, 120, 110, .1);
}
.wq-rz-fld.is-invalid { border-color: rgba(232, 120, 110, .58); }
[dir="rtl"] .wq-prt-requirement,
[dir="rtl"] .wq-prt-label-required,
[dir="rtl"] .wq-prt-error,
[dir="rtl"] .wq-prt-field-error { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; }

/* Skip is quieter than a button — picking an answer is what advances. */
.wq-prt-skip { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .55);
  padding: 10px 0; transition: color .2s var(--ease); }
.wq-prt-skip:hover { color: var(--gold); }
.wq-prt-skip:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r-sm); }
.wq-prt-skip .lucide, .wq-prt-skip svg { color: var(--gold); }