/* Lektura Quiz — front-end styles. Scoped to .lq so nothing leaks into the theme.
   The widget inherits the theme's font (font: inherit everywhere). */

.lq{
  --lq-card:#FFFFFF;
  --lq-ink:#1A2230;
  --lq-ink-soft:#5B6675;
  --lq-primary:#014EA2;
  --lq-primary-tint:#E7EFF8;
  --lq-primary-soft:#BFD6EE;
  --lq-line:#E3E8EF;
  --lq-line-strong:#CDD5DF;
  --lq-ok:#1B7A3D;   --lq-ok-tint:#E6F2EA;
  --lq-no:#C0392B;   --lq-no-tint:#F7E7E4;
  --lq-avg:#8A93A0;
  --lq-radius:14px;

  max-width:620px;
  margin:24px auto;
  background:var(--lq-card);
  border:1px solid var(--lq-line);
  border-radius:var(--lq-radius);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 20px 44px -30px rgba(1,78,162,.4);
  color:var(--lq-ink);
  font-family:inherit;
  box-sizing:border-box;
}
.lq *{box-sizing:border-box}

.lq__body{padding:30px 26px 26px}

.lq__eyebrow{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lq-ink-soft); font-weight:600;
}

/* progress */
.lq__progress{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.lq__count{font-size:12.5px; letter-spacing:.04em; color:var(--lq-ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums}
.lq__bar{flex:1; height:4px; background:var(--lq-line); border-radius:999px; overflow:hidden}
.lq__bar i{display:block; height:100%; background:var(--lq-primary); width:0; transition:width .35s cubic-bezier(.2,.7,.2,1)}

.lq__q{font-weight:700; font-size:22px; line-height:1.3; letter-spacing:-.01em; margin:0 0 22px; color:var(--lq-ink)}

.lq__answers{display:flex; flex-direction:column; gap:10px; margin:0}
.lq__answer{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  cursor:pointer; background:#fff; border:1.5px solid var(--lq-line);
  border-radius:10px; padding:14px 16px; font-size:15.5px; color:var(--lq-ink);
  font-family:inherit; line-height:1.4;
  transition:border-color .15s, background .15s, transform .05s;
}
.lq__answer:hover{border-color:var(--lq-line-strong)}
.lq__answer:active{transform:translateY(1px)}
.lq__answer .key{
  flex:none; width:26px; height:26px; border-radius:7px;
  border:1.5px solid var(--lq-line-strong); background:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  color:var(--lq-ink-soft); transition:all .15s;
}
.lq__answer[aria-checked="true"]{border-color:var(--lq-primary); background:var(--lq-primary-tint)}
.lq__answer[aria-checked="true"] .key{background:var(--lq-primary); border-color:var(--lq-primary); color:#fff}
.lq__answer:focus-visible{outline:2px solid var(--lq-primary); outline-offset:2px}

/* Guard against theme button styles leaking in (uppercase, white text, glow). */
.lq .lq__answer,
.lq .lq__answer:hover,
.lq .lq__answer:focus,
.lq .lq__answer:focus-visible,
.lq .lq__answer:active{
  color:var(--lq-ink) !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-decoration:none !important;
  -webkit-appearance:none; appearance:none;
}
.lq .lq__answer .lq__answer-text{ color:var(--lq-ink) !important; font-weight:500; }
.lq .lq__answer[aria-checked="true"]{ background:var(--lq-primary-tint) !important; border-color:var(--lq-primary) !important; }
.lq .lq__answer[aria-checked="true"] .lq__answer-text{ font-weight:600; }
.lq .lq__answer[aria-checked="true"] .key{ color:#fff !important; }

.lq__foot{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:26px}
.lq__hint{font-size:13px; color:var(--lq-ink-soft)}
.lq__hint.is-error{color:var(--lq-no); font-weight:600}
.lq__btn{
  font-family:inherit; font-weight:600; font-size:15px;
  background:var(--lq-primary); color:#fff; border:0; border-radius:10px;
  padding:12px 22px; cursor:pointer; transition:opacity .15s, transform .05s;
}
.lq__btn:disabled{opacity:.35; cursor:not-allowed}
.lq__btn:not(:disabled):active{transform:translateY(1px)}
.lq__btn--ghost{background:#fff; color:var(--lq-primary); border:1.5px solid var(--lq-primary-soft)}

/* result */
.lq__score-row{display:flex; align-items:baseline; gap:12px; margin:6px 0 8px}
.lq__score{font-weight:800; font-size:52px; letter-spacing:-.02em; line-height:1; color:var(--lq-primary); font-variant-numeric:tabular-nums}
.lq__ratio{font-weight:600; font-size:14px; color:var(--lq-ink-soft)}

.scale{margin:8px 0 6px}
.scale__track{position:relative; height:8px; background:var(--lq-line); border-radius:999px; margin:40px 0 38px}
.scale__fill{position:absolute; left:0; top:0; bottom:0; background:var(--lq-primary); opacity:.18; border-radius:999px; width:0; transition:width .6s cubic-bezier(.2,.7,.2,1)}
.scale__mark{position:absolute; top:50%; left:0; transition:left .6s cubic-bezier(.2,.7,.2,1)}
.scale__dot{position:absolute; top:0; left:0; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:var(--lq-primary); border:3px solid #fff; box-shadow:0 0 0 1.5px var(--lq-primary)}
.scale__avg{position:absolute; top:0; left:0; transform:translate(-50%,-50%); width:2px; height:22px; background:var(--lq-avg); border-radius:2px}
.scale__lbl{position:absolute; left:0; font-size:11.5px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.scale__lbl.you{bottom:15px; color:var(--lq-primary)}
.scale__lbl.avg{top:17px; color:var(--lq-avg)}
.scale__ends{display:flex; justify-content:space-between; font-size:11px; color:var(--lq-ink-soft); font-variant-numeric:tabular-nums}

.percentile{background:var(--lq-primary); color:#fff; border-radius:10px; padding:13px 16px; font-size:14.5px; margin:18px 0 4px}
.percentile b{font-weight:800}

.key-head{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lq-ink-soft); font-weight:600; margin:30px 0 6px; padding-top:22px; border-top:1px solid var(--lq-line)}
.lq-key .item{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--lq-line)}
.lq-key .item:last-child{border-bottom:0}
.item__mark{flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:14px; font-weight:800; margin-top:1px}
.item__mark.ok{background:var(--lq-ok-tint); color:var(--lq-ok)}
.item__mark.no{background:var(--lq-no-tint); color:var(--lq-no)}
.item__num{font-size:12px; color:var(--lq-ink-soft); flex:none; width:22px; margin-top:4px; font-variant-numeric:tabular-nums}
.item__body{flex:1; min-width:0}
.item__q{font-size:16px; font-weight:700; margin:0 0 6px; line-height:1.3}
.item__ans{font-size:13.5px; margin:2px 0}
.item__ans .lbl{color:var(--lq-ink-soft)}
.item__ans .wrong{color:var(--lq-no); text-decoration:line-through}
.item__ans .right{color:var(--lq-ok); font-weight:700}
.item__exp{font-size:13.5px; color:var(--lq-ink-soft); margin:8px 0 0; padding-left:12px; border-left:2px solid var(--lq-line-strong)}
.item__stat{font-size:11.5px; color:var(--lq-ink-soft); margin-top:7px; font-variant-numeric:tabular-nums}

@media (max-width:480px){
  .lq__q{font-size:20px} .lq__score{font-size:44px} .lq__body{padding:24px 18px}
}
@media (prefers-reduced-motion:reduce){.lq *{transition:none !important}}